HTML: Images (Part 2)

 

Images

The ALIGN attribute of <IMG> controls how an image interacts with text; values for ALIGN can be left, center, right, top and middle.

To clear text from the left and right of an image, so that the image stands alone, use the tag <BR CLEAR=ALL>.

 

Examples

1) How does the image interact with text if we choose ALIGN=CENTER? Here's the code:

<p>Many students take the school bus to school each day. <img src="schoolBus.jpg" alt="A School Bus" align=center>On a wintry day kids waiting for the bus utter many prayers that the bus will come soon.</p>

to see this how this code looks in a window.

 

2) How does the layout change if instead we choose ALIGN=LEFT? Here's the code:

<p>Many students take the school bus to school each day. <img src="schoolBus.jpg" alt="A School Bus" align=left>On a wintry day kids waiting for the bus utter many prayers that the bus will come soon.</p>

to see this how this code looks in a window.

 

3) How about ALIGN=RIGHT? Here's the code:

<p>Many students take the school bus to school each day. <img src="schoolBus.jpg" alt="A School Bus" align=right>On a wintry day kids waiting for the bus utter many prayers that the bus will come soon.</p>

to see this how this code looks in a window.

 

4) What is the effect of <BR CLEAR=ALL>? Here's the code:

<p>Many students take the school bus to school each day. <img src="schoolBus.jpg" alt="A School Bus"><br clear=all>On a wintry day kids waiting for the bus utter many prayers that the bus will come soon.</p>

to see this how this code looks in a window.

 

Other Resources

Try these links on images and the <IMG> tag:

Page Link
The IMG Tag www.htmlhelp.com/reference/html40/special/img.html
Image Formats
(GIF, JPEG, Bitmap)
www.htmlgoodies.com/tutorials/web_graphics/article.php/3479931
Quick-Loading Images www.htmlgoodies.com/tutorials/web_graphics/article.php/3479921

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your web page, or 2) the eEverything.com page. Include an image, and try at least two different ways of setting text alongside the image, using the ALIGN attribute or <BR CLEAR=ALL>. If you work on eEverything.com, you might use an image that shows some merchandise that you would like eEverything.com to sell.