The address for this web page is:   http://fishcaro.crosswinds.net/day_33_horizontal_rules.htm
On to the next lesson!
Back to the COURSE SYLLABUS

33. HORIZONTAL RULES

In this lesson we finish up Chapter 4 of the web tutorial, by talking about ways that you can change the appearance of horizontal rules (lines):

You will need 2 index cards (4 sides) for this lesson.

INDEX CARD #33:

HORIZONTAL RULES (33a)

What is a "rule"? In word processing and desktop publishing, a rule is a straight line.

What are horizontal rules used for? Horizontal rules are most often used as simple dividers, to break up large amounts of text into manageable chunks.

What is the basic structure of a horizontal rule? You can control how long (wide) the rule is, as well as its height (thickness), shading, and alignment on the page: 

<HR WIDTH="length_of_rule_in_pixels_or_%_of_available_page_width"
    SIZE="height_(thickness)_of_rule_in_number_of_pixels"
    NOSHADE
    ALIGN="left|right|center">
In some browsers, the COLOR="desired_color" attribute is also supported. Is the opening sample horizontal rule in RED as you're viewing this page? If so, then colored rules are supported for your browser.

THE WIDTH ATTRIBUTE (33b)

  • If you don't specify a width for a rule, then it goes across the entire available width: the code   <HR>   produces

  • A rule always creates a line break both above and below. Additional vertical space can be added, if desired, by inserting <P> (paragraph) tags.

  • You can specify width in number of pixels. The code    <HR WIDTH="100">   produces a line that is 100 pixels wide:
    Remember that 100 pixels will appear as different lengths to different viewers.

  • You can specify width as a percentage of the available width. For example, if you always want a rule to take up half (50%) of the available width, use the code   <HR WIDTH="50%">   to produce:


THE SIZE and NOSHADE ATTRIBUTES (33c)

The height (thickness) of a rule is always measured in number of pixels, so you can't guarantee that all your viewers will see the same height:
<HR>   (no size specification) produces a very thin rule:
<HR SIZE="5">   produces a 5-pixel-high rule:
<HR SIZE="10">   produces a 10-pixel-high rule:
You can make the three-dimensional shading effect disappear, and instead display a solid line, by using the optional  NOSHADE  attribute:
<HR SIZE="10" NOSHADE>   produces a 10-pixel-high solid rule:
Of course, effects can be combined. It doesn't matter what order you list the attributes. The code   <HR SIZE="10" WIDTH="25%" NOSHADE>   produces a 10-pixel-high solid rule that takes up 25% of the available width:

THE ALIGN ATTRIBUTE (33d)

If you specify a rule that doesn't take up all the available width, then you can specify how it is aligned.
If you don't specify an alignment, then it will be centered:
<HR WIDTH="50%">   produces a centered rule:

You can make the rule begin at the left (i.e., "left-justify" or "left-align"):
<HR WIDTH="50%" ALIGN="left">   produces:

You can make the rule flush with the right margin (i.e., "right-justify" or "right-align"):
<HR WIDTH="50%" ALIGN="right">   produces:

A final note: a common trick is to make the width and size the same value, to get a little embossed (or solid) square. (The ones below are 10×10.)

Printable version of Index Card 33a

Printable version of Index Card 33b

Printable version of Index Card 33c

Printable version of Index Card 33d

WORKSHEET #33:

ASSIGNMENT #33:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2000 Carol J.V. Fisher    All Rights Reserved