Web development by PHP-Web-Host.com   Website Hosting by PHP-Web-Host.com
Web Hosting by PHP-Web-Host.com

HTML Tutor!

HTML Tutor, learn to author your own website

 

 

Resources

SoftSmart.co.za | Linux Web Hosting

 

 

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

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?

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

 

 

SoftSmart.co.za | Linux Web Hosting

 

 

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

 

 

We accept PayPal

 

Web Hosting by PHP-Web-Host.com Website Hosting by PHP-Web-Host.com

[ Home ] | [ Software ] | [ Web Development ] | [ Resources ] | [ Contact ] | [ Privacy Policy ] | [ Acceptable Use Policy ] | [ Terms of Service ] | [ Sitemap ] | [ Clients ] | [ Affiliates ]

[ PHP Web Hosting ] | [ Linux Web Hosting ] | [ 500mb PHP Web Hosting ] | [ 1Gb PHP Web Hosting ] | [ 3Gb PHP Web Hosting ] | [ 6Gb PHP Web Hosting ] | [ 10Gb PHP Web Hosting ]

[ HTML Tutor ] | [ CSS Tutorial ] |