Another little widget that you will find yourself using a lot is the Horizontal Rule.

<body>
<hr>
</body>

We have a few options available to us...

<body>
<hr width="20%">
<hr width="50%">
<hr width="100%">
<hr width="20">
<hr width="50">
<hr width="100">
</body>

Be careful with large absolute widths, such as width="1000". If your visitor is running a screen resolution of 1024x768 or greater, a <hr> width of 1000 is no problem. But if he's running at a lesser resolution (such as 800x600... which many folks do) your horizontal rule will run off the right side of the screen. If you wish to alter the default length of a horizontal rule, best use a percentage value.

This attribute is pretty self-explanatory.

<body>
<hr width="60%" align="left">
<hr width="60%" align="right">
<hr width="60%" align="center">
</body>

We can control the thickness of the line...

<body>
<hr width="60%" size="1">
<hr width="60%" size="3">
<hr width="60%" size="8">
<hr width="60%" size="15">
</body>

And we can make it a solid line.

<body>
<hr width="60%" size="1" noshade>
<hr width="60%" size="3" noshade>
<hr width="60%" size="8" noshade>
<hr width="60%" size="15" noshade>
</body>

You can also color horizontal rules. (Although not included in any official HTML specification, the color attribute in a <hr> is supported by most common browsers.)

<body>
<hr width="60%" size="1" noshade color="#ff9900">
<hr width="60%" size="3" noshade color="#99ff00">
<hr width="60%" size="8" noshade color="#9900ff">
<hr width="60%" size="15" noshade color="#ff0099">
</body>

You'll notice the result is a solid color... as if a colored noshade. This is fairly consistent across the the browsers that support it. If you're going to use the color attribute, you might want to leave the noshade in there. That way the occasional browser that doesn't support color will just default to the grayish color.

<< BACK NEXT >>
So, you want to make a Web Page!
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Index & Quick Reference      Table of Contents      ColorPicker      BareBones HTML Guide
Color Charts      Simple Font Widget      Practice Exercises      Where are my images?
Print version of this tutorial available - Get the PageTutor Book & CD