Image Basics 157ObjectsImages &Image BasicsWeb Design in a Nutshell, eMatter EditionImage Basics
Before jumping into the finer points of thetag, let’s back up and consider
general graphics usage issues.
How Graphics Can Be Used
The overwhelming majority of graphics on the Web are used as inline images,
graphics that are displayed in the browser window as part of the flow of the
HTML document. Banners and buttons are examples of inline images. Inline
images, which are placed on the page with thetag, can serve a variety of
functions as listed below. (Note that images may also be used as background tiles
or viewed externally with a helper application).
As a Simple Graphic
A graphic can be used on a web page much as it is used in print—as a static
image that adds decoration or information, such as a company logo or an
illustration.
As a Link
A graphic can also be used to link to another document as an alternative to
text links. Linking graphics are discussed later in this chapter.
As an Imagemap
An imagemap is a single graphic with multiple “hotspots” that link to other
documents. There is nothing special about the graphic itself; it is an ordinary
inline image. The “magic” is the result of special coding and map files that
link pointer coordinates with their respective URLs. Theusemaporismap
attribute within thetag indicates to the browser that the graphic is
used as a client-side or server-side imagemap (respectively).
A full explanation of how imagemaps work and how to create them appears
in Chapter 8.
As Spacing Devices
Because web pages are difficult for designers to control with HTML alone,
many designers use transparent graphics to invisibly control the alignment of
text or the behavior of tables. David Siegel introduced the convention of
using a single transparent pixel that can be resized to create any amount of
white space on the page. Although it is one solution for arranging elements
on the page, it isn’t necessarily good HTML form.
Netscape’s solution for holding extra space on a web page is its pro-
prietary<spacer>tag. Spacers can be used to hold a specified
amount of horizontal space, vertical space, or a “block” of space
with width and height measurements. The<spacer>tag and its
attributes are listed earlier in this chapter. Because this is a propri-
etary tag and because it adds presentation information throughout
the HTML document, the use of the<spacer>tag is generally con-
sidered to be poor HTML form.