Horizontal Rules:

1. align=left, right or center

   these parameters align the horizontal rule on the page.  Horizontal rules placed in tables, lists, forms and other specially formatted areas will conform to the formatting of the sections in which they are placed. 

   Examples:

   <hr align=left width=50%>

   ---

   <hr align=right width=50%>

   ---

2. width=n% or n

   where n% is a percent of the total maximum pagewidth.  The default is 100%. 

   or where n is expressed in actual pixels.  At a screen resolution of 640 X 480 the approximate width of the screen in most browsers is 600 pixels. 

   Examples:

   <hr align=center width=300>

   ---

   <hr align=center width=25%>

   ---

3. size=n

   where n is the height (most people would think of it as the width) of the horizontal rule in pixels.  The default is only one pixel.  Sizes greater than 1 pixel produce an embossed effect unless the noshade parameter is used (compare with below). 

   Examples:

   <hr size=2>

   ---

   <hr size=10>

   ---

4. noshade

   produces a rounded solid (possibly shaded!) rather than rectangular embossed horizontal rule (compare with above). 

   Examples:

   <hr size=10 noshade>

   ---

Paragraphs

The basic form of the paragraph command is very simple: 

<p>

This command forces a line break at the point of insertion in the HTML code and begins a new paragraph below with one intervening line of space.  No closing command </p> is required unless paragraph alignment parameters are specified. 

Example:

    This is 
   paragraph one.<p>This is   paragraph two.

yields -

This is paragraph one.

This is paragraph two. 

Note that the browser removes all extraneous spaces when formatting text and reduces them to a single space.  This includes extra spaces at the ends of sentences after the period and extra spaces after colons.  This can reduce text readability.  The solution is always to include a non-breaking space character (  - See Special Characters) after any period or colon where extra white space is needed to increase the text readibility.

Paragraph Alignment

Paragraphs can be aligned using the align= command parameter with permitted values of left, right and center. 

Examples:

<p align=right>This paragraph is aligned to the right.</p>

yields -

This paragraph is aligned to the right.

and so on -

This paragraph is aligned to the center.

This paragraph is aligned to the left. 

Note that the default is to align all paragraphs to the left.  If alignment parameters are specified, then the closing command </p> must be used.  If the paragraph metacommand is used by itself merely to force a line break with a blank space above, then no command closing is necessary.

The Internet Explorer browser uses the <div> </div> metacommand with the corresponding alignment attributes to produce the same effects. 

Text Columns

A Netscape extension to HTML allows the creation of text columns.  The basic form of the command is shown below:

<multicol cols=n1 gutter=n2>   . . . some text here . . .   </multicol>

Where n1 defines the number of columns in the text block and n2 defines the width of the "gutter" (white space between columns) in pixels.

This command can produce very odd results in other browsers and is not compatible with some table elements and list elements.  In general, it is better to produce this effect with tables.  See an example of the use of the multicol command structure below:

<multicol cols=4 gutter=20>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.</multicol>

Note that the column breaks will not display in Internet Explorer.  Explorer requires the use of multi-celled tables to accomplish the similar effects.

Text Breaks

HTML provides several ways in which to govern the way in which text is placed on the page.  The table below provides a synopsis of text break commands: 

Headings

Text Functions

Course Contents

You are here:  NetStrider   »   Tutorials   »   HTML   »   LINES/DIVIDERS   «