ayahsaba76.blogspot.com
 | So, you want to make a Web Page! Lesson 11 |
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 --> It's a 1x1 square. Look what I can do with it though...
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?
