Basic Web Page Writing Step 7
Horizontal Lines
In step 6 you used some of the various tags to make your text stand out from the rest of the document. Now you will be able to add lines and dividers to separate one part of text from the other.
This step will introduce some more HTML 2.0 + enhanced codes. The basic Horizontal Line tag as well as the fancier wider lines which is shown right below the header of this page.
The Standard Horizontal Line
The standard horizontal line tag is <HR> and requires NO end tag.
The following tag
<HR>
will produce the line below.
If you want wider lines or lines that are not all the way across the screen then the HTML 2.0+ codes will allow you to specify exactly how long, how wide and the location of your lines.
Using the Enhanced Horizontal Line
With some of the enhanced codes you can create lines that are wider, thicker, and filled in as well as locating them exactly were you want them on the page.
- By adding SIZE=#, the thickness of the line can be controlled.
The # represents the thickness, usually 1-10.
- By adding WIDTH=%, the length of the line can be controlled.
The % is the percent of the screen to use, between 10% and 100%.
- By adding ALIGN=, the alignment can be controlled.
Either Left, Right or Center
- By adding NOSHADE, a solid line can be created.
Specifying Horizontal Line Sizes
Here are some examples. You should experiment with them to see all the combinations possible.
<HR WIDTH=50% ALIGN=left SIZE=5>
Will produce a line that is half the width of the browser screen, aligned to the left, 5 pixels thick.
<HR WIDTH=50% ALIGN=center SIZE=5 NOSHADE>
Will produce the same line but filled in and centered.
<HR WIDTH=25% ALIGN=right SIZE=10 noshade>
Will produce a line that is 1/4 the width of the browser screen, aligned to the right, 10 pixels thick, and filled in.
Fancy Lines
The Pretty fancy colored lines you see in documents are not really lines at all, they are Graphic images and you will see how to do that later in step 10.
Click below to see a sample.
Try using some of these options on your own page. You do no need to use all the options to create the enhanced lines. Leaving out the align= option will default to the left, but it is a good idea to use them anyway.
In step 8 you will see another way to format text, this time into lists.
STEP 8 -- Unordered Lists
created by Larry Curreri,
© 1996 l_curreri@yahoo.com
Visit My Home Page
last modified: January 14, 2002
This page hosted by 
Get your own Free Home Page