Once you have specified the source for the <IMG> tag, you have to define some ALT text. ALT text simply describes the picture [if it needs description] or the picture's function [if it's a picture used in navigation, such as a BACK or NEXT button]. ALT text is
required to validate for HTML 4.0 Transitional, because it ensures easier browsing for blind people.
No, you don't get to see any pictures yet. If you want your page to look presentable on browsers that have graphics turned off, you
have to specify a WIDTH and HEIGHT for your image, in pixels. This also speeds up your page's load time. [I don't have any fancy schmancy programs that measure picture size and I'm no graphics guru, so I just do everything by trial and error :)]
Another important thing that I must mention is the BORDER attribute. If you do not specify
no border, your pictures will default to displaying with a border around them. Some people like the look of that, some don't. It's up to you if you want the border or not.. Now that you've heard all about the attributes, see them in action:
<IMG SRC="images/ttr32.jpg" ALT="[Carrie-Anne Moss is Trinity in The Matrix]" HEIGHT=110 WIDTH=100 BORDER=0>
Note how I have my ALT text enclosed in square brackets - this is useful for blind visitors to my site and to non-graphic browser [such as Lynx] users, who only see my ALT text and a number in square brackets beside it. If I did not have the square brackets and my image was surrounded by text, it would look a little confusing.
I guess I
should talk about image alignment here. You can use
<IMG ALIGN="left/right"> to align the image to the left or right margin, and use the <CENTER> tag separately to align the image in the middle of the page. Pretty easy, huh?
To align text to an image, you have to use the IMG ALIGN attribute. Demonstration:
<IMG SRC="images/tmo1.gif" ALT="[Laurence Fishburne is Morpheus in The Matrix]" HEIGHT=75 WIDTH=100 BORDER=0 ALIGN="top">
This image will align all text following it to the top and jump straight to the bottom after the first line wraps.
<IMG SRC="images/tne40.jpg" ALT="[Keanu Reeves is Neo in The Matrix]" HEIGHT=100 WIDTH=100 BORDER=0 ALIGN="middle">
This image will align all text following it to the middle and jump straight to the bottom after the first line wraps.
<IMG SRC="images/ttr32.jpg" ALT="[Carrie-Anne Moss is Trinity in The Matrix]" HEIGHT=110 WIDTH=100 BORDER=0 ALIGN="bottom">
This image will align all text to its bottom line and then jump to the bottom [useful for those starting-letter images]
Before we move on to tables, let me say another thing about ALT text. You
have to have ALT text, even if it's a bullet. The most appropriate ALT text for a bullet is "*" - this will show up nicely in non-graphical browsers and will be most helpful to blind persons. Okay, let's go on to tables now.