9.8.12

So, You Want An HR Line, Huh?

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?]
Make a Comment

  • Brenda Johnsonsaid on May 22, 2012 at 11:22 am

    How can I get spacing on the top and under the rule line?
    Reply

  • jayirvsaid on January 20, 2011 at 1:09 am

    Thanks for the tutorial. I'm having problems with it going across the entire webpage. It seems to start about a cm away from the left side. E-mail me if you can help. Thanks
    Reply

  • whatnameshouldisaid on December 21, 2010 at 5:32 pm

    Nice tutorial, im still new to this but it was quite helpful. I was wondering if there was any chance of chainging the height at which the line appears in the "writing space". When im using it seems to be bottom of the line im working on, i mean something like this _ and i want it at this height ------ or top. Im not sure if you get what im saying. Thanks in advance whatname
    Reply
Posted by at