Basics: HTML
Add Headlines and Horizontal Rules

Headlines

Horizontal Rules

Headlines are phrases in large size type.

Headlines are also used to separate sections of a web page.

Basic design rules call for headlines to decrease in size as you travel down a page.

The Headline Tag The headline tag pair is <Hn></Hn> where n is a number from 1-6.

1 is the largest headline size.  Normal type is size 3.

To add the largest size headline to the top of a  page:

1)   Place your cursor on a new line immediately after the opening <BODY> tag.

2)Type

<H1>Welcome to my Web Page!</H1>

Example
Welcome to my Web Page!
Align a Headline To align a headline on a page, insert the ALIGN attribute and the desired value (i.e., right, left, or center) inside the opening <H> tag.

Ex. <H1 ALIGN="CENTER">

Save the file and preview it in your browsers.

The Horizontal Rule

A horizontal rule is a line embedded in a web page.


Horizontal rules are convenient and quick-loading ways to divide a web page into sections.

Horizontal rules can be adjusted in several different ways. In HTML terminology, each adjustment is called an attribute.

The HTML tag for the horizontal rule is
<HR>.

By default the horizontal rule is about 2 pixels thick and extends the width of the page.

The tag requires no closing tag.  The tag also automatically creates paragraph breaks above and below the rule.

Change the Length  of a Horizontal Rule A horizontal rule can extend the width of the entire page or can be set to a particular width. 

Use the WIDTH attribute in the <HR> tag.

You can express the width in a percent of the width of the monitor.

<HR WIDTH="50%">

You can express the width in pixels.

<HR WIDTH="360">

NOTE:
72 pixels = one inch

Change the Thickness of a Horizontal Rule

A horizontal rule can be any thickness you desire.

Use the SIZE attribute with the <HR> tag

<HR SIZE=8>


<HR SIZE=15>


Fill in the Horizontal Rule A horizontal rule can be filled in.

Use the NOSHADE attribute with the <HR> tag.

<HR WIDTH="50%" SIZE="10" NOSHADE>


Align the Horizontal Rule Use the ALIGN attribute to affect the alignment of the horizontal rule on a page.
Example <HR ALIGN="CENTER" WIDTH="50%" SIZE="10">

Example <HR ALIGN="RIGHT" WIDTH="25" SIZE="10" NOSHADE>
Save the file and preview it in your browsers.

Basics: HTML
Create a New Page
Enter and Format Text
Add Headlines and Horizontal Rules
Add a Title and an Address Footer
Save and Preview a Page
Create a Page Template

 

Personal Home PageWeb Design CenterTutorial MenuTop of Page

Web Design Center
Last Revised: October 19, 2006
© Agatha Taormina