Using Graphic Rules

A graphic rule is actually just an inline image shaped in the form of a rule. The main disadvantage is that a graphic rule consumes considerably more bytes than a horizontal rule (although you can use the same graphic rule several times without taking up any additional bytes).

In your text editor, scroll down to the "Egg Sizes" level-two heading and insert the following graphic rule above it (see Figure 4.28):

<p align="center"><img src="bar_gold.jpg" width="550"
height="10"></p>
<h2><a name="sizes"></a><font color="#336699" face="Verdana,
Arial, Helvetica">Egg Sizes</font></h2>

Figure 4.28: Instead of an ordinary horizontal rule, you can use a fancy graphic rule.

Notice in the previous code example that the graphic rule is nested in a center-aligned paragraph. Horizontal rules are centered by default, but with a graphic rule you've got to do it yourself.

Resizing a Graphic Rule

Graphic rules are an exception to the rule that you should always set the actual height and width dimensions of your image when setting the HEIGHT and WIDTH attributes for an inline image. Because graphic rules usually don't have diagonal or curved edges and lines, you don't have to worry about the "jaggies" (or "staircase" effect) that can become amplified when increasing the size of an image. When decreasing the size of a graphic rule, the bandwidth waste is usually relatively small. Thus, the advantage of dynamically resizing the graphic rule relative to the width of the browser window's viewport outweighs the small disadvantages that are involved. Use the IMG element's WIDTH attribute to set the width of the graphic rule to 95 percent of the width of the browser's viewport (see Figure 4.29):

<p align="center"><img src="bar_gold.jpg" width="95%"
height="10"></p>

Figure 4.29: The width of the graphic rule is set to 95 percent of the width of the browser's viewport.