Exercise - Bullets and rulers

Step 1. Graphics bullets

Recreate your list of apples, oranges, grapes and bananas. In order to substitute icons or images for the standard bullets in an unordered list, use the <IMG SRC=""> tag. While the HTML list tags we used earlier automatically supply line breaks, in this example you must manually enter the <BR> tag after each line.

<IMG SRC="images/greenball.gif">apples<BR>
<IMG SRC="images/greenball.gif">oranges<BR>
<IMG SRC="images/greenball.gif">grapes<BR>
<IMG SRC="images/greenball.gif">bananas<BR>

Save your document, reload in your web browser and it should look like this:

apples
oranges
grapes
bananas

Step 2. Horizontal rulers using HTML

The <HR> tag is an HTML default that specifies a shaded line two pixels wide. You can control how thick the line is with the SIZE attribute and the width with the WIDTH attribute. You can also eliminate the shading with NOSHADE and use ALIGN as well. Enter this after your list:

<HR>

<HR SIZE=20>

<HR WIDTH=20>

<HR SIZE=20 WIDTH=20 ALIGN=LEFT>

<HR SIZE=20 WIDTH=20 ALIGN=LEFT NOSHADE>

Save your document, reload in your web browser and your rulers should look like this:

Let's stop a moment to notice a few things. First, specifying a WIDTH automatically centers the ruler. Second, rulers insert their own line breaks. And, as always, you can combine ruler attributes to get some interesting effects.

Another important characteristic of the <HR> tag is that if the user changes the width of the browser window, the ruler will stretch to accommodate. This is not the case with the graphics rulers discussed below, which are fixed in size. Additionally, since the rulers created with the <HR> tag are HTML code and not graphics, the do not add to download time.