A Complete Guide to Web Design

(やまだぃちぅ) #1
The <img> Tag and Its Attributes 159

ObjectsImages &

The <img> Tag and Its Attributes

Web Design in a Nutshell, eMatter Edition

course, if you are fond of the blue borders, you could just as easily make them
really wide by setting a higher number value.


<A HREF="document.html"><IMG SRC="picture.gif" BORDER=0></A>

Alternative Text


If a graphic cannot be displayed (either because the file is corrupted or cannot be
found), the browser displays a generic broken graphic icon in its place. The
browser will also display a generic graphic icon when the user has chosen to turn
graphics off for faster browsing (and a lot of users do). Thealtattribute allows
you to specify a string of alternative text to be displayed in place of the graphic
when the graphic is unavailable, as shown in Figure 9-8. It is also what non-graph-
ical browsers will display in place of images.


When alternative text is provided in the image tag, users at least know what
they’re missing. This is particularly important when graphics are links that make
up the main navigation of the site. Readers can follow a link if they know where it
goes, even if the graphic isn’t visible. Without the alternative text, the page would
be a big dead end.


Taking the extra time to provide alternative text for your images is the simplest
way to make your page accessible to the greatest number of readers. In fact, the
HTML 4.0 Specification has declaredaltto be a required attribute within the


tag (although browsers are not currently enforcing it).

Specifying Width and Height


Althoughsrcis the only truly required attribute in thetag, a few others
come strongly recommended. The first isalt, discussed in the previous section.
widthandheightare the others. Thewidthandheightattributes simply indi-
cate 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 down-
load. Without width and height values, the page is displayed and then when the
graphics finally arrive, the whole page is displayed a second time with the
graphics in place (this process may actually take place in a series of passes
depending on how it is constructed). It is worthwhile to take the time to include
accurate width and height information in the image tag.


Figure 9-8: Alternative text is displayed when graphics are unavailable


First star <IMG SRC="star2.gif" ALT="[another star]"> I see tonight.
Free download pdf