A Complete Guide to Web Design

158 Chapter 9 – Adding Images and Other Page Elements

The Tag and Its Attributes

Web Design in a Nutshell, eMatter Edition

Acceptable Graphics Formats

A graphic needs to be in either GIF or JPEG format to be displayed as an inline

image by the vast majority of browsers. Furthermore, the files need to be named

with the proper suffixes—.giffor GIF files;.jpegor.jpgfor JPEG—in order to be

recognized by the browser.

There is a third format, PNG (pronounced “ping”), which was designed specifi-

cally with web distribution in mind; however, only the very latest browser versions

support PNG files (suffix.png) as inline graphics, and they don’t support all of

PNG’s most attractive features. Until PNG gains better support, stick with either

GIF or JPEG.

These graphics file formats, as well as other requirements for putting graphics

online, are discussed in detail in the chapters ofPart III: Graphics.

The Tag and Its Attributes

The<img>tag inserts a graphic image into the document’s text flow. Unlike hori-

zontal 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 base-

line 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 issrc, 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.

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 theborder attribute.

Theborderattribute specifies the width of the border in number of pixels. Speci-

fying a value of zero turns the borders off, as shown in the following example. Of

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

<P>Star light <IMG SRC="star.gif"> Star bright.</P>