Lines

Horizontal Rule

Lines showing the boundaries between sections of your page are made with the Horizontal Rule Tag which has the form:

<hr {align="center|left|right" size="thickness_in_pixels" width="percent%|pixels" noshade}>

To create a simple line across the entire screen, just add <hr> at the point where you want the line to occur. The lines which occur at the beginning of each section of this document were created using the following code:

<hr width=75% align="center">

Example of possible lines are (NOTE:FireFox rounds the corners of this line, all others square the edges):


Where the HTML code to create this line is:

<hr width=50% size=20 align="center" noshade>



Where the HTML code to create this line is:

<hr width="100" size=4 align="left">

Highly variant lines can be created using CSS styles.


Where the HTML code to create this line is:

<hr style="width:50%; height:50px; text-align:center; background-color:purple;border-width:10px; border-color:red; border-style:groove;">

Fieldset

The Fieldset tags create a box around other elements within a document.
<fieldset><legend>legend_text</legend>any HTML elements</fieldset>

The Legend text appears in the upper left border of the Fieldset. Data within the Fieldset will center or right justify if the Fieldset is within an aligned Div tag (but not a P tag) and Safari will also align the Legend. For Opera and IE, the Legend must appear before the other tags within the Fieldset. Note that the Fieldset encloses the entire area from margin to margin. The width of the Fieldset as well as the color, size and appearance of the line can be changed using the border properties in a style attribute. Background color can also be added.

Don't Panic!Don't Panic
Image with a legend, no style used.

The next example uses the following Fieldset statement with a CSS style.

<fieldset style="width:300px; text-align: center; border-width:10px; border-color: red; border-style: ridge; color: navy; background-color: lightblue; font-weight: bold">

Don't Panic!Don't Panic
Image with a legend and Style.


Next Lesson Next Page

HTML Home