O'Reilly logo

Web Design in a Nutshell, 2nd Edition by Jennifer Niederst Robbins

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The <img> Tag and Its Attributes

The <img> tag inserts a graphic image into the document’s text flow. Placing graphics inline with the text does not introduce any line breaks or extra space. By default, the bottom of an image aligns with the baseline of surrounding text (ways to alter this are 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 HTML 4.01 specification has declared the alt attribute (for alternative text, see explanation below) to be required as well, but the graphic will display just fine without it. The minimal HTML tag for placing an image on the page looks like this:

<IMG SRC="url of graphic">

Figure 12-1 shows an inline image and its HTML source.

A graphic placed within a line of text

Figure 12-1. A graphic placed within a line of text

The URL of the graphic can be absolute (including the protocol and domain name) or relative to the current document (using a relative pathname). The conventions for relative pathnames are described in detail in Chapter 4.

Linked 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 two-pixel-wide border around the image in the same color as the text ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required