Another <img> attribute that deserves mention is alt...

<img src="chef.gif" width="130" height="101" alt="My 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 --> red dot   It's a 1x1 square. Look 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 >>
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 25 26
Index & Quick Reference      Table of Contents      ColorPicker      BareBones HTML Guide
Color Charts      Simple Font Widget      Practice Exercises      Where are my images?
Print version of this tutorial available - Get the PageTutor Book & CD