HTML 4.0 Sourcebook:Introduction to the HyperText Markup Language

To access the contents, click the chapter and section titles.

HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Table of Contents

Rendering of the Example Document

Renderings of the document ex2a.html (listed in Figure 1.4) are shown in Figures 1.5 through 1.8. Figure 1.5 and 1.6 show the document as presented by the Netscape Navigator 4, while Figure 1.7 shows the view using the Internet Explorer 4 browser, and Figure 1.8 shows the view displayed by lynx. Many of the differences between these views are simply due to the different window sizes and fonts. Still, there are other differences that warrant mention.

Inline Images

Note the appearance of the images in Figures 1.5 and 1.7. By default, an image is included as if it were a large letter or word inline with the surrounding text, deforming the line spacing to ensure that no text overlaps the image. Also by default the bottom of the image aligns with the bottom of the line of text leading up to the image. Note that there is no wrapping or flowing of the text around the image and, since there is no way of guaranteeing how the document will be formatted and displayed, no guarantee that an image embedded in the middle of a sentence will appear in a particular place on the screen. Indeed, the only way to guarantee image placement is to make the image element the first item following a paragraph (or other) break; then, it will always be the first item on a line.

Figure 1.4 Contents of the example HTML document ex2a.html. The rendering of this document by the Netscape Navigator, Internet Explorer, and lynx browsers is shown in Figures 1.5 to 1.8.

<HTML>
<HEAD>
    <TITLE> Example 2A, Showing IMG and Hypertext Links </TITLE>
</HEAD>
<BODY>

<H1> Example 2A: Image Inclusion and Hypertext Links </H1>

<P> Greetings from the exciting world of HTML Example documents. OK,
    so text is not so exciting.  But how about some pictures!

<P> There are many ways to fit in the image.  For example, you
    fit it in this way:
    <IMG SRC=“home.gif” ALIGN=“top”>, this way
    <IMG SRC=“home.gif” ALIGN=“middle”> or this way
    <IMG SRC=“home.gif” ALIGN=“bottom”>.

<P> Another important thing: you can make
    <a href=“ex2b.html”>hypertext links</a> to other files.<BR>
     This <a href=“ex2b.html”> second link </a> has spaces
    between the start and stop tags, and the enclosed text.<BR>
    You can also place images inside hypertext links,  for example:
    <a href=“ex2b.html”><IMG SRC=“sright.xbm” ALIGN=“middle”></a>.<BR>
    You can get rid of the border around the image by setting a
    BORDER=“0” attribute on the IMG element. For example:
    <a href=“ex2b.html”><IMG SRC=“sright.xbm” BORDER=“0” ALIGN=“middle”></a>.

<P> Lastly, here is a row of images:
 <IMG src=“home.gif” alt=“[Home Icon]”> <IMG src=“home.gif” alt=“[Home Icon]”>
 <IMG src=“home.gif” alt=“[Home Icon]”> <IMG src=“home.gif” alt=“[Home Icon]”>
 <IMG src=“home.gif” alt=“[Home Icon]”> <IMG src=“home.gif” alt=“[Home Icon]”>
 <IMG src=“home.gif” alt=“[Home Icon]”> <IMG src=“home.gif” alt=“[Home Icon]”>

</BODY>
</HTML>

Figure 1.5 Netscape Navigator 4 rendering of the HTML document ex2a.html (the document is listed in Figure 1.4).

This point is illustrated by the last line of ex2a.html (Figure 1.4), which is simply a row of inline images. Note that these wrap to best fit the width of the screen, just as if they were a sequence of words (Figures 1.5 and 1.7). Consequently, if the user changes the size of the browser window, these icons are repositioned. This is another example of the wide variation possible between different renderings of the same document.

Figure 1.6 Netscape Navigator 4 rendering of the HTML document ex2a.html, but with image loading disabled. (the document is listed in Figure 1.4).

Figure 1.7 Internet Explorer 4 rendering of the HTML document ex2a.html (the document is listed in Figure 1.4).

Figure 1.8 Lynx browser rendering of the HTML document ex2a.html (the document is listed in Figure 1.4).

Fortunately, there are more sophisticated image placement mechanisms that permit better control of image positioning and alignment. Some of these are discussed later in this example, while others are described in Chapters 2 and 6.

Aligning Images with Text

The IMG element can take an optional ALIGN attribute to specify how the image should be aligned on the page. Several values control the placement of the image with respect to the surrounding text. The effects of the three most common values are illustrated in Figures 1.5 and 1.7, using the three “Home” icons (I am afraid I am not a great graphic artist). The first, ALIGN=“top”, aligns the top of the image with the top of the text, while the ALIGN=“middle” value aligns the middle of the image with the bottom of the text, and ALIGN=“bottom” aligns the bottom of the image with the bottom of the text. The latter is the default behavior when ALIGN is not specified.

The four additional values textop, absmiddle, baseline, and absbottom also control the positioning of the image with respect to the adjacent line of text. Also supported are the alignment attribute values ALIGN=“left” and ALIGN=“right”, which cause an image to “float” with subsequent text flowing around the image. These aspects of layout control are described in detail in Chapters 2 and 6.

No Graphics?—The ALT Attribute

Most graphical browsers let the user disable the loading of images (although this feature may be hard to find, particularly in more recent versions of Navigator or Internet Explorer). Disabling image loading can substantially speed up the appearance of a page, since the browser does not need to wait for all the images before displaying the text. Figure 1.6 shows the display by Netscape Navigator when image loading is disabled, while Figure 1.8 shows the lynx interpretation—lynx is a text-only browser and cannot display images. Netscape Navigator replaces the missing images by symbols that denote a missing image, while lynx replaces each occurrence of an image with the text string [IMAGE]. In neither case is the replacement very descriptive, but at least it tells users that they are missing something.

A far better choice is to use the IMG element ALT attribute to provide a real text alternative to the image. This is essential for any browser that cannot display images and is extremely useful for graphical browsers with disabled image loading. The usage is simply:

<IMG SRC=“image.file” ALT=“[A text alternative to the Image]”>

The string specified for ALT is case-sensitive and thus must be enclosed in double quotes. It is also common (but not necessary) to surround the string with square brackets, as is done at the bottom of ex2a.html, where the attribute ALT=“[Home Icon]” is used with all the inline images. The resulting text rendering is shown in Figures 1.6 and 1.8. Note how the text effectively indicates the content of the missing image.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.