|
Quick Menu
|
3. Headings: The Six Levels
HTML HEADINGS
You created headings in HTML by "tagging" certain chunks of text with heading tags. The format for an HTML heading tag is:
<hN>Text To Appear In The Heading</hN>
Where N is a number from 1 to 6 identifying the heading size. Here are some examples of different heading sizes:
 |
Heading Level 1 |
Code <h1> </h1> |
Heading Level 2 |
Code <h2> </h2> |
Heading Level 3 |
Code <h3> </h3> |
Heading Level 4 |
Code <h4> </h4> |
Heading Level 5 |
Code <h5> </h5> |
Heading Level 6 |
Code <h6> </h6> |
|
|
|
|
Site Stats
| There are 6 users online | | click to see where | |
149,242 total unique visitors | | 485,897 total pageviews | | 48 visitors in the last 24 hours | | 37 total visitors today | | 106 pageviews today | | This page has been visited 5,690 times
| | get this script | | Most users online at once:
63 on 01/18/2010 |
|
|
|
|
|
|
Heading levels range from level 1 (Most Important & Largest) to level 6 (Least Important & Smallest). Like an outline, your heading levels should have logical, consistent order and be parallel.
Placing HTML Headings in Your Document
- Re-open your work space (if not already open)
- Go to the text editor window.
- First, we will use the tag to display the title as the biggest header, <H1>. Enter the following text above the existing body text you have already entered and after the </head><body> tags of your document:
<h1>Eazy Space Tours</h1>
- Below the text already entered, create other headings for future sections of your Eazy Space Tours Web Site.
Enter the following headings inside the body of your web page (Note that some are h3 and others are h2 tags):
<h2>Introduction</h2>
<h2>Venus</h2>
<h3>Volcanic Tours Of Venus</h3>
<h3>Tropical Centres Of Venus</h3>
<h2>Uranus</h2>
<h3>Skiing Tour for Mt. WannaHockALoogie</h3>
<h3>Skating on Lake Unix</h3>
- Save changes in your text editor.
- Return to your web browser, Open and Reload the HTML file
Note that on the computer you are using now, you can use the settings in your web browser to define the fonts and/or size of the headings. For example, on one computer you could have a browser display h1 tags as Times font and 36 point; h2 tags as Helvetica font and 24 point, etc. HTML codes designate only that the headers are of a certain type (h1 to h6); how it is displayed is controlled by the user of the web browser.
CHECK YOUR WORK
Compare your document with a SAMPLE of how this document should look. If your page looks different than the example, review the text you entered in the text editor. Make sure it matches the text instructions in the Headings: The Six Levels section of this lesson. If some of your headings do not appear correct, be sure to check that the starting tag and ending tags have the same heading level. After viewing the sample, you can close the window that opened.
As an optional exercise, take a look at what happens when you make a typographical error. Open your HTML document in the text editor and delete the slash (/) in the <h1> tag, after the header Eazy Space Tours
<h1>Eazy Space Tours<h1>
[missing "/" ------------^^^]
Save the changes and reload into your web browser. Without the correct ending of the <h1> tag, your web browser interprets all of the succeeding text as part of that header! After trying this you should go back to your document and re-insert the slash (/) in the correct spot.
Top of page | Previous Lesson| Lessons Index | Next Lesson
|
