|  | PageTutor.com

Another `IMG` attribute that deserves mention is `ALT`...

    <IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">

`ALT` is sort of a substitute for the image when the user is using a browser that isn't (for whatever reason) displaying images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a screen reader (a browser where the web page is read aloud). In those cases, that `ALT` attribute could be very important to your visitor.

Something really neato you should know about images and their size.

Try this...

    <BODY>
    <IMG SRC="chef.gif">
    </BODY>

As you can see, the browser figures out how big the image is all by itself. Why bother with dimensions then? Because with dimensions, the browser can simply reserve a space for the image, then load the rest of page. Once the entire page loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. All in all, the browser functions much better with image dimensions.

Well Joe, that's all well and good <yawn>, but what's the neato part??

Check this out...

    <BODY>
    <IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
    </BODY>

    <BODY>
    <IMG SRC="chef.gif" WIDTH=40 HEIGHT=200>
    </BODY>

You can specify whatever dimensions you want and override the proper dimensions. Still foggy on the neato part?
Well, look at this little red dot `->` It's a 1x1 square. Lookie what I can do with it though...

    <BODY>
    <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=1>
    <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=2>
    <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=8>
    <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200>
    </BODY>

Pretty nifty huh?

<< BACK NEXT >>

PageTutor - So, you want to make a Web Page!
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Upload Your Pages 216 Color Chart Color Picker
Index & Quick Reference Barebones HTML Guide Joke Break
Print version available - Get the PageTutor book & CD
Become a member - Get more good stuff!

Invest in the future - Hug your kid today.