Vodoravne črte

[The Basic Line] [Changing the Width] [Changing the Height] [Sending It To The Left Or Right] [No Shading Please] [How About Some Color?]

I want to shake the hand of whomever came up with this <HR> line. It is a great, and simple, way to break up your page. I use them to death. Here I'll try to get into the more subtle sections of the <HR> line.

The Basic Line

You probably already know that you can place a line simply by typing <HR> on the page. "HR" stands for horizontal reference, by the way. It makes a nice line, with a little bit of shading all the way across the screen. Plus it needs to end command. And it's centered. Coolness.
But all those lines looking the same tends to get dull. Let's change it a bit.

Changing The Width

You change the width of the line by adding a sub-command to the <HR>. I do this with all my lines. I think the line going all the way across the page is a bit much. I only have mine go 60 or 80 percent of the page. See the lines at the very top that get smaller to wider and then wider to smaller? I just added different percentages to a series of HR commands. Here's the format:

<HR WIDTH="60%">

Notice it's just an HR command with WIDTH="--%" added. You can set the width to any percentage you want. There's no need to stay with round numbers. If you really want a line that only goes 17% -- fine. Just remember to include the percentage sign! It's over top of the 5 on the keyboard.

Changing The Height

How's about a thicker line? Like these:

Here's the format:

<HR SIZE="6">

Think of the size command as an equal to the H commands in that there are six numbered 1 through 6 with six being the widest.
You might also notice that the lines are only 60% width. I just used both commands inside the same <HR> command, nothing to it.

Sending It To The Left Or Right

How about this...

You can probably guess how I did that. I added ALIGN="--" inside of the command. Here's what made the four lines above:

<HR WIDTH="60%" ALIGN="LEFT"> <HR WIDTH="60%" ALIGN="RIGHT"> <HR WIDTH="60%" ALIGN="LEFT"> <HR WIDTH="60%" ALIGN="RIGHT">

You can also state ALIGN="center", but that's a bit of overkill as the line centers for you anyway. Notice also that I used the width command in there also.

No Shading Please!

Here's what it looks like:

And here's what does it:

<HR WIDTH="60%" NOSHADE>

I'm not a super fan of the command, but to each his or her own.

How About Some Color?

This is a little tougher if you are using Netscape. Explorer makes it easy. You just add COLOR="--" inside the command and you're done. I'm sure that Netscape isn't long for putting the command into their bag of tricks, but not at the time of this tutorial.

So do you do it? If you are using Netscape to view this page, you can see that the lines are all purple. Well, It's a two-step process.

You first need to being using a background. I am using one on this page. It doesn't look like it, but I am. The background I am using is just a pure white square. I got the purple by using a BGCOLOR command in addition to the background command. Here's the BODY command from this page:

<BODY BGCOLOR="purple" BACKGROUND="clbg.gif">

Whatever color you choose for the BGCOLOR, bleeds through on the HR commands. It's a neat little trick, but it does have a drawback. The color is on every line, and every table border, and every table cell wall. It might get to be a little much. But it's up to you. It's in your bag of tricks now.