Learning HTML 3.2: Objects & Images

Inline Images

The <IMG> tag is used to insert images within your text.  These are called inline images.  Most browsers only support GIF and JPEG file types for inline images so you'll want to stick with those.  The location of the image file is specified in the SRC attribute and it can be a relative or an absolute URL.

If the image cannot be displayed, for example if you have images turned off or if you're using a text-only browser, the browser displays the text in the ALT attribute instead.  The WIDTH and HEIGHT attributes contain the image's dimensions (in pixels) and are required if you want fast-loading pages.

The ALIGN attribute controls the alignment of the image with respect to the text.  Using a value of "Left" or "Right" will make the image line up against the left or right margin, and text will flow around it.  (To force text below such an aligned image, use BR with the CLEAR attribute.)  Using "Top", "Middle" and "Bottom" specify where any text following the image should be put.  If more than one line follows after the image, it will be put below the image.

Here's the basic image code:

<P><IMG SRC="images/web.gif" ALT="Spider's Web" WIDTH=32 HEIGHT=32>The default alignment for an image is &quot;Bottom&quot;.

The default alignment for an image is "Bottom".

If you want your images to be centered or right justified, simply embed them in an aligned paragraph tag, like this:

<P ALIGN="center"><IMG SRC="images/web.gif" ALT="Spider's Web" WIDTH=32 HEIGHT=32>This image (and text) are centered.

This image (and text) are centered.

Here's an example of some text between two images; one with ALIGN="left" and one with ALIGN="right":

<P ALIGN="center"><IMG SRC="images/web.gif" ALIGN="left" ALT="Spider's Web" WIDTH=32 HEIGHT=32><IMG SRC="images/web.gif" ALIGN="right" ALT="Spider's Web" WIDTH=32 HEIGHT=32>This text should be centered between two images.

This text should be centered between two images.

There are several other attributes to the <IMG> tag including VSPACE and HSPACE which specify the number of pixels (vertically and horizontally, respectively) that should be left free around the image.

You can turn an image into a link by simply embedding it in an <A> tag instead of, or with the linked text.  The BORDER attribute is used when the image is a link.  It indicates that the browser should draw a border of the indicated size (in pixels) around the image to show that it is a link.  It's most often used as BORDER=0 to turn off borders.  Browsers which do not draw boxes around hyperlinked images will not honor the BORDER attribute.

There are also attributes for use with "image maps" which won't be discussed here, visit my Resources page for links to more in-depth references.