IMAGES

Page 2


Text Sound Links Lists Tables
Frames Forms Style Sheets Scripts Links to Other Pages




EXAMPLES


Example 1


IMAGE 1
Placing an image on the left side of the screen
(Horizontal Alignment)



Note: The default position for horizontal alignment is on the left.

To see the code for IMAGE 1, right click anywhere on the screen where there is no text or image, then left click on View Source. Look for <!-- Code for IMAGE 1 -->




Example 2


IMAGE 2
Placing an image in the centre of the screen


To see the code for IMAGE 2, look for <!-- Code for IMAGE 2 --> in View Source.




Example 3


IMAGE 3
Placing an image on the right side of the screen
(Horizontal Alignment)



To see the code for IMAGE 3, look for <!-- Code for IMAGE 3 --> in View Source.




Example 4


IMAGE 4
Wrapping text around an image on the left

Text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

To see the code for IMAGE 4, look for <!-- Code for IMAGE 4 --> in View Source.




Example 5


IMAGE 5
Wrapping text around an image on the right

Text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

To see the code for IMAGE 5, look for <!-- Code for IMAGE 5 --> in View Source.




Example 6


IMAGE 6
Vertical Alignment: Top

ext text text

Top aligns the top of the tallest text with the top of the image.

To see the code for IMAGE 6, look for <!-- Code for IMAGE 6 --> in View Source.




Example 7


IMAGE 7
Vertical Alignment: Middle

ext text text

Middle aligns the text baseline with the middle of the image.

To see the code for IMAGE 7, look for <!-- Code for IMAGE 7 --> in View Source.




Example 8


IMAGE 8
Vertical Alignment: Bottom

ext text text

Bottom aligns the text baseline with the bottom of the image.

To see the code for IMAGE 8, look for <!-- Code for IMAGE 8 --> in View Source.




Note:

  1. Internet Explorer treats:



  2. Internet Explorer has also difficulty aligning more than one image on a line.



Example 9


IMAGE 9
Horizontal Alignment of Image With Vertical Alignment of Text

ext text text
Note: In this example text is treated as a header.

To see the code for IMAGE 9, look for <!-- Code for IMAGE 9 --> in View Source.




Example 10


IMAGE 10
Aligning Two (or More) Images

ext text text

ext text text


To see the code for IMAGE 10, look for <!-- Code for IMAGE 10 --> in View Source.




Example 11


IMAGE 11
Thumb-nail Images (Using One Image)

Click on the image to enlarge.

To see the code for IMAGE 11, look for <!-- Code for IMAGE 11 --> in View Source.




Example 12


IMAGE 12
Thumb-nail Images (Using Two Images)

Click on the image to enlarge.

To see the code for IMAGE 12, look for <!-- Code for IMAGE 12 --> in View Source.

Return to First Page



Home    Site Map    Assumptions    Introduction    Tools    Resources    Contact