Adding a horizontal line

Lesson 8

A horizontal line is a separation between sections of your page.

the code for a horizontal line is <hr>

The <hr> also does not need a closing counterpart.

If you type in <hr> this is what the default line will look like

It is grey, extends the full width of the page, is centered (so no need for an align=center statement) and is size 2. If this is what you want your horizontal line to look like, there is no need to add any statements. But you don't really think I will let you get away with THAT do you?

Lets change the appearance of the line. Lets change it to red. Remember the code for the color red. In case your forget its #FF0000

I need to add the color statement here to change it to red. My code will now look like this

<hr color=#FF0000>

Lets make it thicker now. I need to add the size statement. Hmmmmmmm. Lets make it size 4

<hr color=#FF0000 size=4>

OK we're getting there.

Now I want it to only be 60% of the width of the page. sooooooooooooo I have to tell it to do that by adding a width statement. The width can be declared in the PERCENTAGE of the page that you would like your <hr> to extend.

<hr color=#FF0000 size=4 width=60%>

OK I like it now.

WAIT...LOL

Lets make it BLUE. To do this I only need to replace the code for red with the code for blue. The code I used here was #0000FF

Now lets add a couple images and separate them with horizontal lines

Hey...this horizontal line stuff can come in pretty handy!

If you have a horizontal line on your page that is size 4, Blue and 60% of the width of the page....DANCE!