A Complete Guide to Web Design

162 Chapter 9 – Adding Images and Other Page Elements

The Tag and Its Attributes

Web Design in a Nutshell, eMatter Edition

Adding space around aligned images

When text flows around a graphic, it tends to bump right up against the graphic’s

edge. Usually, it is preferable to have a little space between the graphic and the

surrounding text. In HTML, this is provided by using thevspaceandhspace

attributes within the<img> tag.

Thevspaceattribute holds a specified number of pixels space above and below

an aligned graphic. Space to the left and the right is added withhspace. Note that

space is always added symmetrically (both top and bottom, or on both sides), and

it is not possible to specify an amount of space along a particular side of the

graphic. Figure 9-13 shows an image aligned with thehspace attribute set to 12.

Stopping text wrap

Text will automatically wrap to fill the space along the side of an aligned graphic.

If you want to stop the wrap and have the text resume below the image, insert a

line break tag (<br>) with aclear attribute.

Theclearattribute has three possible values:left,right, andall. It tells the

browser to skip down on the page until the specified margin is clear (i.e., no

graphics) and begin flowing the text at that point.

If your graphic is aligned right, insert<br clear=right>to begin the text below

the graphic. For left-aligned graphics, use <br clear=left>. The <br

clear=all> tag starts the text after the graphics on both margins (see

Figure 9-14), so it may be the only value you’ll ever need.

Tips for Placing Graphics

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

at HTML code.

Link to large images

Remember that when designing for the Web, you must always consider the time it

takes to download files. Images are particularly bandwidth-hungry, so you should

use them inline with care. One successful strategy for providing access to very

large images (with correspondingly large file sizes) is to provide a postage-stamp-

size preview graphic that links to the full-size graphic.

Figure 9-13: Image alignment with horizontal spacing

<IMG SRC="leaf.gif" ALIGN="left" HSPACE=12><P>An Oak and a Reed...