|
Proper use of <img> tag and it's attributes.One of the first things a WebTV user learns when starting in HTML, is how to add an image or picture to their email or webpage. We know that the basic tag is:
This will add the image to the page, but there are some attributes that should be added, both to improve the look, and the effectiveness of the image tag.
| |||
Height & Width AttributesThe most important attributes we can add to the image container are the height and width. These will not make the image load faster, but they do allow the page to load around the images, because the browser will know how much room to reserve for each image.
| |||
BorderAn attribute that a lot of WebTV users don't use designates the border size. WebTV users can't see a border on most images, but computer users do. To make your pages look cleaner for computer visitors, you should add border="0". You can also add a larger border to an image if you would like to give it a framed look.
| |||
|
ALT AttributeAnother often overlooked image attribute is the ALT, or alternate text one.Computer users have the option of turning off the images as they surf. If you don't use the alt attribute, all a computer user will see is an empty box where the image actually is. By adding alt text you can tell them what they are missing, and even give them a short message in a window that pops up next to the image when the user highlights it. To see what this looks like to a computer user, visit these two screen shots of the same page, one with images on, one with images off. You will be able to see the text that I have added to the alt command in the small window.
HTML validator sites strongly recommend the use of alt attributes. Search engines also read the alt information and use it to help rank your site. So be descriptive, to help yourself, as well as your visitors. Another attribute that works much like the ALT attribute is the title attribute. It can be used to add a caption under an image. Here is a screen shot of what the title attribute looks like on some computer browsers.
| |||
Image AlignmentWe can use the align attribute to control where the image is displayed, and how the surrounding text reacts around it. Here are some basic examples of alignment.
| |||
Horizontal & Vertical Spacing Next we discuss the hspace and vspace attributes. As you can see, when using an image with a contrasting background color, text runs right up to its edge, making reading difficult, as well as taking away from the over-all look of the page.
If you are familiar with using tables, the H & V space attributes are much like cellpadding.
There is 1 visitor online
|
|
Search New2HTML.com
powered by FreeFind |
|
|
For demonstration, we will use a WebTV Logo. The size of this image is 109x141 pixels, so the image container for it should include its measurements to speed page loading. The height and width attributes can come either before or after the URL, as long as they are within the container (image tag).
