home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeWeb Design in a NutshellSearch this book

12.3. 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.

Figure 12-1

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, "A Beginner's Guide to the Server".

12.3.3. Specifying Width and Height

Although src is the only truly necessary attribute in the <img> tag, a few others come strongly recommended. The first is alt, discussed in the previous section. width and height are the others. The width and height attributes simply indicate the dimension of the graphic in pixels, such as:

<IMG SRC="star.gif" WIDTH="50" HEIGHT="50">

With this information, the browser can lay out the page before the graphics download. Without width and height values, the page may be redrawn several times (first without graphics in place, and again each time new graphics arrive). It is worthwhile to take the time to include accurate width and height information in the image tag.

12.3.5. Horizontal Alignment

The align attribute can be used to align a graphic on the left or right margin of the page by using the values left or right, respectively. What makes the left and right alignment special is that in addition to placing the graphic on a margin, it allows the text to flow around it.

Figure 12-6 shows how images are displayed when set to align to the left or right.

Figure 12-6

Figure 12-6. Text wraps around images when they are aligned to the left or right

Right Alignment Without Text Wrap

Using the align=right attribute to place a graphic against the right margin automatically results in text wrapping around the graphic. If you want to move it to the right without the wrap, put the image in a paragraph (<p>), then align the paragraph to the right, as shown here:

<P ALIGN="right"><IMG SRC="leaf.gif"></P>
<P>An Oak and a Reed were arguing...</P>

12.3.6. Tips for Placing Graphics

These are a few tips for graphics use that may not be obvious from simply looking at HTML code.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.