HTML The Definitive Guide (38 page)

text

This effect is handy when formatting conventional text with fixed line breaks, such as addresses, song lyrics, or poetry. Notice, for example, the lyrical breaks when the following source is rendered by Netscape:

Heartbreak Hotel

Ever since my baby left me

I've found a new place to dwell.
It's down at the end of lonely street
Called Heartbreak Hotel.

The results are shown in
Figure 4.18
.

Figure 4.18: Give lyrics their breaks (
)
Also notice how the
tag causes text simply to start a new line, while the browser, when encountering the

tag, typically inserts some vertical space between adjacent paragraphs.
[

,

4.1]

4.7.1.1 The clear attribute

Normally, the
tag tells the browser to stop the current flow of text immediately and resume at the left margin of the next line or against the right border of a left-justified inline graphic or table.

Sometimes you'd rather the current text flow resume below any tables or images currently blocking the left or right margins.

HTML 4.0 provides that capability with the clear attribute for the
tag. It can have one of three values: left, right, or all, each related to one or both of the margins. When the specified margin or both margins are clear of images, the browser resumes the text flow.

Figure 4.19 illustrates the effects of the
clear attribute when Netscape renders the following HTML

fragment:

This text should wrap around the image, flowing between the image and the right margin of the document.

This text will flow as well, but will be below the image, extending across the full width of the page. There will be white space above this text and to the right of the image.

Figure 4.19: Clearing images before resuming text flow after the
tag
Inline HTML images are just that - normally in line with text, but usually only a single line of text.

Additional lines of text flow below the image unless that image is specially aligned by right or left attribute values for the tag (similarly for

attribute, 5.2.6.4]
[The align attribute, 11.2.1.1]

The following HTML code fragment illustrates how to use the
tag and its clear attribute as well as the tag's alignment attributes to place captions directly above, centered on the right, and below an image that is aligned against the left margin of the browser window: Paragraph tags separate leading and following text flow from the captions.

I'm the caption on top of the image.

This one's centered on the right.

This caption should be directly below the image.

And the text just keeps flowing along....

Figure 4.20 illustrates the results of this example code.

You might also include a
tag just after an tag or table that is at the very end of a section of your document. That way, you ensure that the subsequent section's text doesn't flow up and against that image and confuse the reader.
the sidebar ""

Figure 4.20: Captions placed on top, center-right, and below an image
4.7.1.2 The class, id, style, and title attributes
You can associate additional display rules for the
tag using style sheets. The rules can be applied to the
tag using either the style or class attributes.
[Inline Styles: The style

Attribute, 9.1.1]
[Style Classes, 9.2.4]

You also may assign a unique id to the
tag, as well as a less rigorous title, using the respective attribute and accompanying quote-enclosed string value.
[The id attribute, 4.1.1.4]
[The title attribute,

4.1.1.5]

4.7.2 The Tag

Occasionally, you may have a phrase you want to appear unbroken on a single line in the user's browser window, even if that means the text extends beyond the visible region of the window.

Computer commands are good examples. Typically, one types in a computer command - even a multiword one - on a single line. Because you cannot predict exactly how many words will fit inside an individual's browser window, the HTML-based sequence of computer-command words may end up broken into two or more lines of text. Command syntax is confusing enough; it doesn't need the