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. 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.
Linked 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 two-pixel-wide border around the image in the same color as the text ...
Get Web Design in a Nutshell, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.