17. Horizontal Rules

We won't be modifying any of our web pages here -- you can for now review the information and then decide if you want to experiment with it on your pages.

LINE THICKNESS
OK, so now the first option is to allow for lines of different thickness by using the option:

   <hr size="N" />

Where N is how thick the line in pixels. Let's look at some examples to show the effect.

<hr size="3" /> <hr size="8" /> <hr size="15" />

LINE WIDTH
Anther formatting tag option for the <hr /> tag allows you to control the width of the line -- it doesn't have to stretch across the whole page. You can do this by using this format:

   <hr width="X" />
      
   <hr width="Y%" />

Now X is a number of pixels for the width and Y is a percentage of the current web page. In general, using the percentage is more recommended as it will self adjust itself to the width of the browser window used by the person reading your pages. Here are some examples:

<hr width="80" size="3" /> <hr width="80%" size="3" />

LINE COLOUR
Anther formatting tag option for the <hr /> tag allows you to colour the line. You can do this by using this format:

   <hr color="XXXXX" />

<hr color="red" width="50%" /> <hr color="#0066ff" width="50" />

LINE ALIGNMENT
You can also align your horizontal rules by using this format with either “right”, “center”, & “left”:

   <hr align="xxxxx" />

<hr align="right" width="50%" /> <hr align="left" width="50%" /> <hr align="center" width="50%" />

INDEPENDENT PRACTISE
Experiment with some of the <hr /> options in your own web pages.

Top of page | Previous Lesson| Lessons Index | Next Lesson