Adding Images Using the img Element

Last update on: 05-08-2008
Images are usually added to a site using the <img> element. It must also carry the src attribute indicating the source of the image and an alt attribute whose value is an alternate description for the image in case it does not load or the user has a visual impairment.

For example, the following line would add a logo to the page. In this case the image is in the same folder as the file, and is called logo.gif:

Note that the Image Formats accepted are GIF, JPEG, and PNG

As you can see again the <img> has not closing tag so for the standard XHTML we add the back slash / at the end of the tag

In addition to carrying all of the universal attributes and the UI event attributes, the <img> element can carry the following attributes
src alt align border height width hspace vspace ismap usemap longdesc name we will talk just about the bold ones.

The src Attribute: The src attribute is required to specify the URL of the image to load, like the above example.

It�s a good idea to create a separate directory (or folder) in yourWeb site for images. If you have a very large site, with separate directories for each section, you can create an image folder for each section of the site.

The alt Attribute: The alt attribute is required to specify a text alternative for the image in case the browser cannot display the image (for any of a number of reasons). see the above example:

The align Attribute: is used to align the image within the page or the element that contains the image:

It can take one of the values in the table that follows:

Value	Purpose
Top	The top of the image is aligned with top of the current line of text.
Middle	The middle of the image is aligned with the current text baseline.
Bottom	The bottom of the image is aligned with the baseline of the current line of text (the default), which usually results in images rising above the text.
Left	The image is aligned to the left side of the containing window or element and any text flows around it.
Right	The image is aligned to the right side of the containing window or element and any text flows around it.

You may come across the absbottom, texttop, absmiddle, and baseline values, but these are nonstandard extensions that can produce inconsistent results.

The border Attribute: The border attribute specifies the width of the border around the image in pixels:

The default value is 0, and if the attribute is not used there will not be a border unless the image is used as a link in which case you should specify border="0"

The height and width Attributes: The height and width attributes specify the height and width of the image:

The values can either be pixels as shown in the preceding code or a percentage of the page or containing element (in which case it will be followed with the percent sign).

Specifying the size of the image can help browsers lay out pages faster because they can allocate the correct amount of space to the image and continue to render the rest of the page before the image has finished loading.

If you want to scale an image, you can just provide the value for one of the attributes and the browser will maintain the correct ratio for the image (its width compared to the height). You can even distort images by providing a different width in relation to its height.

Using Images as Links:

Images are often used to create graphical buttons or links to other pages. Turning an image into a link is as simple as placing the <img /> element inside an <a> element, like so:

Images Color Backgrounds's lessons:

Adding Images Using The Img Element
Adding Color To Your Site
Adding Image Backgrounds