Inserting an Inline Image

The IMG (Image) element lets you insert an inline image in a Web page. The IMG element is an empty (or standalone) element, which means that it has a start tag, but no end tag. It is also an inline element, which means that the inserted image is displayed inline, or at the spot where it is located on a line. Insert an inline image into the page (see Figure 3.12):

<p><img src="goodegg.gif"></p>
<h1>Egg Facts and Figures</h1>

Figure 3.12: An inline image is inserted into the page.

In the example, the SRC (Source) attribute specifies the file name of the image to be displayed (src="goodegg.gif").

Notice that the IMG element is nested inside of a P element. The reason is that the IMG element is an inline element and should, thus, always be nested inside of a block element. Browsers don't care if you nest an IMG element directly inside of the BODY element, but doing so will cause your page to not be a valid HTML 4.01 document (and generate an error report if you try to validate your page using the W3C's HTML Validator).

Specifying the Image Dimensions

The WIDTH and HEIGHT attributes let you specify the dimensions of an image in pixels. Including these attributes can speed up the initial display of the page, since they allow a browser to allocate space for the image and display surrounding text before the image has been completely downloaded. The HTML 4.01 specification states that these attributes are required in the IMG element. Add WIDTH and HEIGHT attributes to the IMG element:

<p><img src="goodegg.gif" width="400" height="267"></p>

When setting image dimensions, the general rule is that you should specify the actual dimensions of the image and not use the WIDTH and HEIGHT attributes to resize the image in the browser. (There are a couple of exceptions to this rule, which will be covered later in this book.) If you want to resize the image, you should do so in your image editor, not in your browser. The reason for this is that decreasing the size of an image in the browser is a waste of bandwidth (and increases the time required to download and display the image). Increasing the size of an image in the browser magnifies any flaws that may be present in the image.

Including Alternative Text

The ALT attribute lets you include alternative text that can be displayed in place of the image. Inclusion of the ALT attribute in the IMG element is required by the HTML 4.01 specification. Including alternative text helps a user of a non-visual browser or other user agent (such as a screen reader, for instance) to understand what the content and function of an image is; not including alternative text for images can make your page less accessible to users with visual handicaps, for instance. Include an ALT element describing the image:

<p><img src="goodegg.gif" width="400" height="267" alt="The
Good Egg Company banner image"></p>

Search engines also place special weight on alternative text when indexing a page, so including ALT attributes for all of your images can help to ensure that your page will have a higher search engine ranking.

Many browsers will also display alternative text when the mouse is passed over an image, so using the ALT attribute can also be a good way to include additional information, or a caption, for an image (see Figure 3.13).

Figure 3.13: Many browsers display alternative text when the mouse is passed over an image.

Horizontally Aligning the Image

Unlike with the H1 and P elements, you cannot use the ALIGN attribute in the IMG element to horizontally align the image relative to the left and right margins. In the IMG element, align="left" and align="right" are used to float the image on the left or right margin, with following text and elements flowing around the other side of the image. Using floating images will be covered in the Saturday Afternoon session, "Dressing Up Your Pages."

To horizontally align an image, without also floating it, you need to horizontally align the parent element in which the image is nested. Horizontally align P element, as well as the following H1 element (see Figure 3.14):

<p align="center"><img src="goodegg.gif" width="400"
height="267" alt="The Good Egg Company banner image"></p>
<h1 align="center">Egg Facts and Figures</h1>

Figure 3.14: The inline image is nested in a center-aligned P element.

To right-align the image, just include an align="right" attribute in the image's P element.

Vertically Aligning the Image

The ALIGN attribute can be used in the IMG element to vertically align the image relative to the line on which it is inserted. By default, the bottom of an image is vertically aligned with the line on which it is inserted. To see this, delete the P element in which the image is nested and cut the IMG element and paste it inside of the H1 element, as shown here (see Figure 3.15):

<p align="center"><img src="goodegg.gif" width="400"
height="267" alt="The Good Egg Company banner
image"></p>
<h1 align="center"><img src="goodegg.gif" width="400"
height="267" alt="The Good Egg Company banner image">Egg
Facts and Figures</h1>

Figure 3.15: Inline images are bottom-aligned by default.

Tip

To cut text, highlight the text and press Ctrl+X (Windows) or Command+X (Macintosh). To paste in text you have copied or cut, position the cursor where you want to paste the text and press Ctrl+V (Windows) or Command+V (Macintosh).

Revise the example code to top-align the image (see Figure 3.16):

<h1 align="center"><img src="goodegg.gif" width="400"
height="267" alt="The Good Egg Company banner image"
align="top">Egg Facts and Figures</h1>

Figure 3.16: The image is top-aligned relative to the line on which it is inserted.

Revise the example code to middle-align the image (see Figure 3.17):

<h1 align="center"><img src="goodegg.gif" width="400"
height="267" alt="The Good Egg Company banner image"
align="middle">Egg Facts and Figures</h1>

Figure 3.17: The image is middle-aligned relative to the line on which it is inserted.

Wrapping Text beneath the Image

Text that follows an inline image can be wrapped beneath the image by inserting a BR (Break) element (see Figure 3.18):

<h1 align="center"><img src="goodegg.gif" width="400"
height="267" alt="The Good Egg Company banner image"
align="middle"><br>Egg Facts and Figures</h1>

Figure 3.18: Inserting a BR element causes following text to be wrapped beneath the image.