Web Design in a Nutshell

The <img> Tag and Its Attributes

The <img> tag inserts a graphic image into the document’s text flow. Unlike horizontal rules, it doesn’t create any paragraph breaks, so you can place graphics inline with the text. By default, the bottom of an image will align with the baseline of surrounding text (ways to alter this will be discussed later).

There are over a dozen attributes that can be added within the <img> tag to affect its display, but the only required attribute is src, which provides the URL of the graphic. The minimal HTML tag for placing an image on the page looks like this:

<IMG SRC="url of graphic">

Figure 9.7 shows an inline image and its HTML source.

Figure 9-7. A graphic placed within a line of text

Linking Graphics

To make a graphic a link, place anchor tags around the image tag just as you would around any string of text characters:

<A HREF="document.html"><IMG SRC="picture.gif"></A>

When a graphic is linked, the browser displays a 1-pixel-wide border around the image in the same color as the text links on the page (usually a bright blue). In most cases, this blue border is unacceptable, particularly around a graphic with transparent edges, but it is quite simple to turn it off using the border attribute.

The border attribute specifies the width of the border in number of pixels. Specifying a value of zero turns the borders off, as shown in the following example. Of course, ...