Make your own free website on
:: crazy8 #web_resources ::

The Horizontal Rule
Tutorial by
Mr. Baldy

Horizontal rules ( HRs ) are lines created in the document. Usually, they are used to mark off sections of the document, or they can be used cosmetically. You can see an example of an edited one right above the text "The Horizontal Rule" on this page. Yeah, it's that yellow-green line. They are generally simple to make a basic one, but you can customize them to your liking. Here is the basic one:

Those appear differently in Internet Explorer and in Netscape, so keep that in mind. Horizontal rules are just created with the HR tag:


There is no ending tag since it is an object being placed, not an attribute. That was quite different, however, than the line at the top of the page. That is because I customized it to my liking. First of all, you can apply the ALIGN attribute, LEFT, RIGHT, or CENTER.

<hr align="left">
<hr align="center">
<hr align="right">

Simple enough, now comes the SIZE attribute. This states the height of the horizontal rule, in pixels. As you can tell, my line is SIZE="1", since it is 1 pixel tall. You can make yours different sizes, any number you want.

Normal One

After that, you can define the color, which is simple:

<hr color="X">

Where X is either a named color or RBG value. Yeah. This is simple.

Now, this is important. You can define the width, which is very useful. It make the HRs much better if they are smaller than default size. The embedded attribute is what it should be:

<hr width="X">

X here is a number in pixels. Now you might want a thick line, but don't want the shading. All you would need to do is add NOSHADE as an attribute with nothing else, like this:

<hr noshade>

In the example:

<hr size="10">
<hr size="10" noshade>

Here is how it would show up:

That's about it for horizontal rules. They are pretty easy, but can be very effective.

<< back  |  top  |  next >>

. . . . . . . . . . . . . . . . . . . . . . .
All html, graphics, and javascript is © 1999 crazy8 #web_resources
All quake, quake 2, and quake arena content is © id software
All unreal content is © epic megagames, and half-life © valve software
Page designed by mr. baldy ( webmaster )
home tutorials free gfx design tips templates reviews consultation contact