Most websites use graphics of some sort - photographs, cartoons, buttons, bullets, bars, and so on. Some of the graphics are animated. Fortunately, all of these different sorts of images use the same tag... the image tag. It is a stand-alone, and so has no ending tag. You just put it where you want the image to be. The basic image tag looks like this:

<img src=filename.jpg>

With, of course, the appropriate file location and extention inserted where you see filename.jpg. Just like with the BODY tag, you can also set many other attributes if you wish. The following are not requred, but can be used if you want.

ALT=""
ALIGN=
BORDER=
HEIGHT=
WIDTH=
HSPACE=
VSPACE=

ALT stands for alternative text. This is the text which is displayed while the image loads, if the image link is broken, if the visitor's browser does not load images, or when a visitor hovers their mouse pointer over the image. For example, the ALT text of the image below is Pretty cool, eh?

The ALIGN tag lets you sent the images alignment with respect to the surrounding text. For example, the images on either side of this paragraph are put there by the values of their ALIGN tag. ALIGN=RIGHT aligns the image with the right margin. ALIGN=LEFT aligns it with the left margin. Use "View Source" to look at the tags. If the text around the images is long enough, it will wrap around them, filling in the extra space. To see how this works (if your screen is too big and so the text doesn't go past the bottom of the images), resize your browser window until it's small enough to demonstrate.

ALIGN=TOP aligns the top of the image with the tallest object in the current line.

ALIGN=MIDDLE aligns the middle of the image with the baseline of the current row.

ALIGN=BASELINE aligns the baseline of the image with the baseline of the current row. If you don't set a value for ALIGN, it will automatically use BASELINE.

The BORDER tag refers to the line you often see around images used as links. Look at the linked images below. From left to right, their borders are set at 0, 1, 2, 3, 4, and 5.

If you don't enter a value for BORDER, most browsers will automatically display a border of 2.

HEIGHT and WIDTH set the dimensions of the image in pixels. You may sometimes want to slightly shrink or enlarge an image without having to alter the image itself. You use these tags to do it.

The HSPACE and VSPACE tags set the space around the image, again in pixels. HSPACE sets the horizontal space, and VSPACE sets the vertical. For example, the images used in the BORDER example all have an HSPACE of 10.

Design Tip: when you want to illustrate a text with images, alternate which side of the page you put the pictures on.