So, You Want An HR Line, Huh?

Use these to jump around or read it all…

[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 whoever 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 no 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 subcommand 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% of the page. See the lines at the very top that get thinner to wider then wider to thinner? 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 the number 5 on your 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 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.

---

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?

     No problem. Dig this:

---

---

---

     There are three HR lines set to the three colors of Mardi Gras (I live in New Orleans). It’s the “COLOR=” attribute that does the trick. Here’s the code. Notice that I have also set the HR lines to only span 60%.

<HR COLOR=”yellow” WIDTH=”60%”>

<HR COLOR=”purple” WIDTH=”60%”>

<HR COLOR=”green” WIDTH=”60%”>

     Nothing to it.

 

Enjoy!

 

[The Basic Line]

[Changing The Width]
[Changing The Height]

[Sending It To The Left Or Right]

[No Shading, Please!]
[How About Some Color?]