Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

XHTML help: basics – images, the IMG tag

Every website looks a lot better with pictures. To get some great images on your page you’ll just need one simple line:

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif" />


And that’s really it. Of course there are a few more attributes that you may want to add, especially the alt attribute. The alt attribute provides alternate text, typically used for accessibility and users with alternative devices, who are using a text browser. “Alt-text” can also be indexed by search engines.

A very important rule to remember about alt-text is that it should be descriptive of the image. This is a bad example:

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
alt="html_help_link.gif" />

By describing your image with the file name you are not providing any additional or useful information. Something better would be:

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
alt="HTML help, animated link into site xhtmltips.co.uk" />

The same is true of the title attribute, which can be used as a descriptive label for your image, and may be displayed when the image is linked to:

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
title="XHTML help." />

You can also specify the width and height of your image by using the width and height attributes. The values can be either in percents, using the % symbol, or in pixels:

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
width="50%" height="50%" />

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
width="120" height="60" />

If the % symbol is not used the image will be sized in pixels. Height and width values should be the placement size the image is to occupy on the page. This can help the browser render pages quicker.

So the finished image will look like this :

HTML help, animated link into site xhtmltips.co.uk

This entry was posted on Saturday, May 5th, 2007 at 9:43 am and is filed under HTML help, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.