Step 9 – Horizontal Rule

When you use large amounts of text in HTML it may make it easier on your visitor to scan the text if it’s divided into a few parts. You can use a horizontal rule for this:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<FONT FACE=”Verdana” SIZE=2>

<H2>A short introduction</H2>

<FONT COLOR=”#FF9B6A”><B>Nora Tol Virtual Publishing</B></FONT> was founded about 12 years ago when owner <FONT COLOR=”#FF9B6A”>Nora Tol</FONT> started offering her web design services.
<P>
By demand she quickly expanded her services with <U>designing logos and artwork (DTP)</U> and even started various <U>Internet- and marketing services</U>.
<P>
<FONT SIZE=4>Take a look at her homepage for more information.
<BR>
Or send her an E-mail!</FONT>

<HR>

</FONT>
</BODY>
</HTML>

HR is short for Horizontal Rule. When the tag (<HR>) is used like in the example the browser will place a standard line. This is an open lijn with depth to give it a bit of a shadow. The depth won’t show in its default setting. When adding a SIZE you can make this visible:

<HR SIZE=5>

The line will now be 5 pixels in height, but will remain open. You can fill it:

<HR NOSHADE>

But you can adjust more with Horizontal Rule:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<FONT FACE=”Verdana” SIZE=2>

<H2>A short introduction</H2>

<FONT COLOR=”#FF9B6A”><B>Nora Tol Virtual Publishing</B></FONT> was founded about 12 years ago when owner <FONT COLOR=”#FF9B6A”>Nora Tol</FONT> started offering her web design services.
<P>
By demand she quickly expanded her services with <U>designing logos and artwork (DTP)</U> and even started various <U>Internet- and marketing services</U>.
<P>
<FONT SIZE=4>Take a look at her homepage for more information.
<BR>
Or send her an E-mail!</FONT>

<HR WIDTH=”50%” COLOR=”#000000″ NOSHADE SIZE=”2″>

</FONT>
</BODY>
</HTML>

In my index.html document I have chosen for a line with the height of 2 pixels (SIZE=”2″), filled it with black (NOSHADE COLOR=”#000000″). I have also defined the line to use half of the screen width (WIDTH=”50%”). You can define the width in pixels too, for example WIDTH=400.

HR contains spacing by default. When it’s not enough you can use Forced Line Breaks or the Paragraph-tag (see Step 4).

You can also add an alignment to the Horizontal Rule. You can choose from center, left or right:

<HR ALIGN=CENTER>
<HR ALIGN=LEFT>
<HR ALIGN=RIGHT>

Go to Step 10

Bookmark the permalink.

Comments are closed