Web Design Tutorials and Lessons: Horizontal Rules

Stay at Home and Learn

Web Design Tutorials

Computer Tutorials List

Horizontal Rules

A Horizontal rule can look quite nice on a web page. The Rule is used to divide one section from another. Here's what a coloured rule looks like

To insert a Horizontal Rule using your Editor, do the following:

Click in between the two BODY where you want your Horizontal Rule to appear
From the Editor's menu bar, click on Insert
From the drop down menu, click Horizontal Rule
From the sub menu, click Build HR. The following dialogue box appears:

Horizontal Rule Dialogue box

Type in a Size for your Rule. This is the height
Type in a width
Choose an alignment option: Left, Right or Centre
Click on the Colour button and choose a colour for your Horizontal Rule
The Noshade option is supposed to either add or remove a shadow from the rule, but has mixed results with coloured rules. Just ignore it
Click OK when you're done
The following code will be added to your page:

<HR SIZE = 10 WIDTH = 75% ALIGN = Center COLOR = #6600CC>

You can have the HR tag just by itself, which is why the Editor has a Basic HR option as well as the Build HR option. Try it out and see what it looks like on a web page.

The next section is for your reference. It is a list of some of the other formatting tags you can use in your HTML. It wraps up this section of the course.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses