using images

by Workshop, 8 July 1998

using images in your web page
Images are one of the most important components of a web page, providing visual appeal and style. To put an image into your web page, you use the IMG tag. For example:

<IMG SRC="myimage.gif">

The example above demonstrates the simplest use of the IMG tag. An image file called myimage.gif that exists within the same directory as the web page is loaded by the browser and displayed.

There are many attributes for the IMG tag that allow some control over the way that images are displayed. Some of these attributes include ALIGN, ALT, BORDER, WIDTH, HEIGHT, HSPACE, VSPACE.

The ALIGN attribute allows you to specify how a following line of text is aligned against the top, middle, or bottom of the image. To use this attribute you add ALIGN=alignment (where alignment is one of top, middle, or bottom) to your tag before the ending bracket.

code	result
<IMG SRC="arrowbutton.gif" ALIGN="TOP">TOP aligned	TOP aligned
<IMG SRC="arrowbutton.gif" ALIGN="MIDDLE">MIDDLE aligned	MIDDLE aligned
<IMG SRC="arrowbutton.gif" ALIGN="BOTTOM">BOTTOM aligned	BOTTOM aligned

The ALT attribute allows you to specify some text to display in place of the image if the image cannot be loaded for some reason, or if the visitor to your page is using a text only browser.

On newer browsers, the text specified by the ALT attribute will be displayed as a "tool tip" when the mouse cursor is placed over the image. The ALT attribute is used by adding ALT="some text" (where some text is replaced with the alternative text you wish to specify) before the ending bracket.

The example below uses such code. Place your mouse cursor on the information picture. If you have a newer browser, a "tool tip" will appear with the text "Click here for more information".

code	result
<img src="info.gif" alt="Click here for more information">

The BORDER attribute allows you to specify the thickness of the border that surrounds an image. The border attribute is used by adding BORDER=3 (where you would replace 3 with the size of the border you would like) to your IMG tag just before the ending bracket. A border usually becomes visible when the image is used as part of a link.

The WIDTH and HEIGHT attributes are used to specify the dimensions of an image when it is displayed. These attributes are not required by the browser but are useful to include in case the image can not be loaded for some reason (the space that the image would have taken up is reserved to preserve formatting of a page).

The WIDTH and HEIGHT attributes are used in the same manner as the BORDER attribute. When using these attributes, you must specify both of them (ie you can not have a WIDTH attribute and no HEIGHT attribute).

The following example uses WIDTH and HEIGHT attributes that are exactly the same as the actual width and height of the image.

code	result
<img src="donteatme.gif" width="120" height="115">

The following example uses a HEIGHT attribute that is smaller than the actual height of the image.

code	result
<img src="donteatme.gif" width="120" height="50">

Note that you should not use the WIDTH and HEIGHT attributes to make an image smaller than it actually is because it will still take the same amount of time to download. You should use a paint program such as Paint Shop Pro to change the size of an image.

If you need to find out the dimensions (in pixels) of a picture, you can use a program such as Paint Shop Pro.

The HSPACE (Horizontal Space) and VSPACE (Vertical Space) attributes are used to provide a "buffer" of space around the image. It is used in the same manner as the WIDTH and HEIGHT attribute except that you may specify one attribute without the other (ie you can have a HSPACE attribute without a VSPACE attribute).

Here is an example of an image using no space buffer.

code	result
<img src="arrowbutton.gif">No buffer space	No buffer space

Here is an example of an image using a HSPACE buffer.

code	result
<img src="arrowbutton.gif" hspace="10">Horizontal buffer of 10 pixels	Horizontal buffer of 10 pixels

An example use of an image tag is shown below, using all attributes.

code	result
<img src="funkytown.gif" align="middle" alt="my image" border="0" width="75" height="61" hspace="20" vspace="20">This is some text to demonstrate the Horizontal spacing and vertical spacing with the HSPACE and VSPACE attributes.	This is some text to demonstrate the Horizontal spacing and vertical spacing with the HSPACE and VSPACE attributes.

more information?
Bare Bones Guide to HTML