[Chapter 5] Rules, Images, and Multimedia

While the body of most HTML documents is text, an appropriate seasoning of horizontal rules, images, and other multimedia elements make for a much more inviting and attractive document. These features of HTML are not simply gratuitous geegaws that make your documents look pretty, mind you. Multimedia elements bring HTML documents alive, providing a dimension of valuable information often unavailable in other media, such as print. In this chapter, we detail how you can insert special multimedia elements into your documents, when their use is appropriate and how to avoid overdoing it.

5.1 Using Horizontal Rules

Horizontal rules give you a way to visually separate sections of your document. That way, you give readers a clean, consistent, visual indication that one portion of your document has ended and another portion is beginning. Horizontal rules effectively set off small sections of text, delimit document headers and footers, and provide extra visual punch to headings within your document.

The `<hr>` Tag

The <hr> tag tells the browser to insert a horizontal rule across the display window. Like the <br> tag, <hr> forces a simple line break, although unlike <br>, <hr> causes the paragraph alignment to revert to the default (left-justified). The browser places the rule immediately below the current line, and content flow resumes below the rule. [<br>, 4.7.1]

The rendering of a horizontal rule is at the discretion of the browser. Typically, it extends across the entire document. Graphical browsers may render the rule with a chiseled or embossed effect; character-based browsers most likely use dashes or underscores to create the rule.

There is no additional space above or below a horizontal rule. If you wish to set it off from the surrounding text, explicitly place the rule in a new paragraph, followed by another paragraph containing the subsequent text. For example, note the spacing around the horizontal rules in the following source and in Figure 5-1:

Figure 5-1: Paragraph tags give your text extra elbow room

[Graphic: Figure 5-1]

This text is directly above the rule.
<hr>
And this text is immediately below. 
<p>
Whereas this text will have space before the rule.
<p>
<hr>
<p>
And this text has space after the rule.

A paragraph tag following the rule tag is necessary if you want the content beneath the rule line aligned other than the default left.

The size attribute

Normally, Netscape Navigator and Internet Explorer render horizontal rules three pixels[1] thick with a chiseled, 3D appearance, making the rule look incised into the page. You may thicken the rules with the size attribute. The required value is the thickness, in pixels. You can see the effects of this attribute in Figure 5-2 as constructed from the following source:

[1] A pixel is one of the many tiny dots that make up the display on your computer. While display sizes vary, a good rule of thumb is that one pixel equals one point on a common 75 dot-per-inch display monitor. A point is a unit of measure used in printing and is roughly equal to 1/72 of an inch (there are 72.72 points in an inch, to be exact). Typical typefaces used by various browsers are usually 12 points tall, yielding six lines of text per inch.

Figure 5-2: Netscape lets you vary the horizontal rule size

[Graphic: Figure 5-2]

<p>
This is conventional document text, 
followed by a normal, 3-pixel tall rule line.
<hr>
The next three rule lines are 12, 36, and 72 pixels tall.
<hr size=12>
<hr size=36>
<hr size=72>

The noshade attribute

You may not want Netscape's 3D rule line, preferring a flat, 2D rule--the default for other graphical browsers. Just add the noshade attribute (no value required) to the <hr> tag to eliminate the effect.

See the difference in appearance of a ``normal'' 3D Netscape rule versus the noshade 2D one in Figure 5-3? (We've also exaggerated the rule's thickness for obvious effect, as evident in the source HTML fragment.)

<hr size=32>
<hr size=32 noshade>

Figure 5-3: Netscape's 3D rule versus the noshade 2D option

[Graphic: Figure 5-3]

The width attribute

Most browsers extend rule lines the full width of the view window. You can shorten or lengthen Netscape Navigator and Internet Explorer rules with the width attribute, creating rule lines that are either an absolute number of pixels wide or extend across a certain percentage of the page. The extended browsers automatically center partial-width rules; see the align attribute (below) to left- or right-justify horizontal rules.

Here are some examples of width-specified horizontal rules (Figure 5-4):

The following rules are 40 and 320 pixels wide
no matter the actual width of the browser window
<hr width=40>
<hr width=320>
Whereas these next two rules will always extend across
10 and 75 percent of the window, regardless of its width: 
<hr width="10%">
<hr width="50%">

Figure 5-4: Absolute versus relative rule widths

[Graphic: Figure 5-4]

Notice, too, that the relative (percentage) value for the width attribute is enclosed in quotes; the absolute (integer) pixel value is not. In fact, the quotes aren't absolutely necessary, but since the percent symbol (%) normally means that an encoded character follows, failure to enclose the percent width value in quotes may confuse other browsers and trash a portion of your rendered document.

In general, it isn't a good idea to specify the width of a rule as an exact number of pixels. Browser windows vary greatly in their width, and what might be a small rule on one browser might be annoyingly large on another. For instance, Netscape Navigator's default window is tall and thin; Internet Explorer's is short and squat. For this reason, we recommend specifying rule width as a percentage of the window width. That way, when the width of the browser window changes, the rules retain their same relative size.

The align attribute

The align attribute for a horizontal rule in Netscape or Internet Explorer can have one of three values: left, center, or right. For those rules whose width is less than the current text flow, the rule will be positioned relative to the window margins accordingly. The default alignment is center.

A varied rule alignment makes for nice section dividers. For example, the source shown below alternates a 35 percent-wide rule from right to center to the left margin (Figure 5-5).

<hr width="35%" align=right>
<h3>Fruit Packing Advice</h3>
... 
<hr width="35%" align=center>
<h3>Shipping Kumquats</h3>
...
<hr width="35%" align=left>
<h3>Juice Processing</h3>
...

Figure 5-5: Varying horizontal rule alignment makes for subtle section dividers

[Graphic: Figure 5-5]

Combining rule attributes

You may combine the various rule attribute extensions and their order isn't important. To create big squares, for example, combine the size and width attributes (Figure 5-6):

<hr size=32 width="50%" align=center>

Figure 5-6: Combining rule attributes for special effects

[Graphic: Figure 5-6]

In fact, some combinations of rule attributes are necessary--align and width, for example. Align alone appears to do nothing because the default rule width stretches all the way across the display window.

Using Rules to Divide Your Document

Horizontal rules provide a handy visual navigation device for your readers. To use <hr> effectively as a section divider, first determine how many levels of headings your document has and how long you expect each section of the document to be. Then decide which of your headings warrant being set apart by a rule.

A horizontal rule can also delimit the front matter of a document, separating the table of contents from the document body, for example. Use a rule also to separate the document body from a trailing index, bibliography, or list of figures.

Experienced HTML authors also use horizontal rules to mark the beginning and end of a form. This is especially handy for long forms that make users scroll up and down the page to view all the fields. By consistently marking the beginning and end of a form with a rule, you help users stay within the form, better ensuring they won't inadvertently miss a portion when filling out its contents.

Using Rules in Headers and Footers

A fundamental style approach to HTML document families is to have a consistent look and feel, including a standard header and footer for each document. Typically, the header contains navigational tools that help users easily jump to internal sections as well as related documents in the family, while the footer contains author and document information as well as feedback mechanisms like an email link to the webmaster.

To ensure these headers and footers don't infringe on the main document contents, consider using rules directly below the header and above the footer. For example (also see Figure 5-7):

<body>
Kumquat Growers Handbook - Growing Season Guidelines
<hr>
<h1>Growing Season Guidelines</h1>
Growing season for the noble fruit varies throughout the
United States, as shown in the following map:
<p>
<img src="pics/growing-season.gif">
<p>
<hr>
<i>Provided as a public service by the 
<a href="feedback.html">Kumquat Lovers of America</a></i>

Figure 5-7: Clearly delineate headers and footers with horizontal rules

[Graphic: Figure 5-7]

By consistently setting apart your headers and footers using rules, you help users locate and focus upon the main body of your document.


Special HTML Characters	Book Index	Inserting Images in Your Documents