Creating Colorful Horizontal Rules

Graphics displayed on a Web page serve all types of purposes; they attract attention, create a visual
picture for your visitors, and support the written text on the Web page. However, in addition to using
images to convey information, you can also use graphics to help organize the content on a Web page.
For example, you can create horizontal rules (that is, draw horizontal lines) to organize text
or groups of images on a Web page by inserting horizontal rule tags (

---

) as shown in the
following HTML:

Figure 6-19 The Image Size dialog box in Photoshop lets you modify the resolution of the
scanned image

This line of text is separated from the next
line by a horizontal rule line

---

This line of text is separated from the text
above by a horizontal rule line

However, although you can use them to divide a Web page into sections, horizontal rules lack
pizzazz. To add some zing to your Web pages, substitute colorful graphics for the functional (albeit
boring), standard horizontal rules.
Suppose, for example, that you use an image editing and creation program such as
Photoshop to create a 600-pixel-wide by 5-pixel-high graphic of a horizontal line. After
saving the graphics image as a small GIF file (line.gif) of only about 645 bytes, you can use the image
of the horizontal line in place of the horizontal rules used in the previous code as follows:

This line of text is separated from the next
line by a horizontal rule line

This line of text is separated from the text
above by a horizontal rule line