Section Two - Getting Started: Lesson 2-3: Headings and Heading Alignment
You have already created your first page, but it doesn't have much content yet.
One of the first things you'll want to put on your page is a heading. In this lesson you will learn how to create a heading, and how to center it.
Headings come in six sizes: 1 is the largest, and 6 is the smallest.
Heading tags look like this: h1/h1 - h6/h6
These are the six different heading sizes.
The left column shows the HTML code which is typed into your
source file.
The result which is displayed on your home page is shown in the right column:
HTML Tags | | Actual Heading Size |
h1Heading Size 1/h1 | = |
Heading Size 1 |
h2Heading Size 2/h2 | = |
Heading Size 2 |
h3Heading Size 3/h3 | = | Heading Size 3 |
h4Heading Size 4/h4 | = | Heading Size 4 |
h5Heading Size 5/h5 | = | Heading Size 5 |
h6Heading Size 6/h6 | = | Heading Size 6 |
Aligning Headings:
Most people like to center their headings.
You can easily align your headings left, right, or center using the ALIGN attribute.
The ALIGN attribute is placed inside the opening heading tag. The alignment position value
(left, right, or center) should be enclosed in quotation marks - eg. "CENTER".
Look at these examples:
(HTML source code appears in the white boxes,
followed by the results in the gray boxes.)
Heading Alignment |
h3 ALIGN="RIGHT"Heading Size 3 - Aligned Right/h3 = |
Heading Size 3 - Aligned Right
|
h3 ALIGN="CENTER"Heading Size 3 - Aligned Center/h3 = |
Heading Size 3 - Aligned Center
|
h3 ALIGN="LEFT"Heading Size 3 - Aligned Left/h3 = |
Heading Size 3 - Aligned Left |
ps. If you don't use any ALIGN attribute, the heading will be aligned left.
Practice:
Now, it's time to add a centered heading to your practice page.
Using Notepad or your text editor, open the file named mypage.htm which you created in the previous lesson.
You have already typed in the black text. Add the red text to your file:
html
head
titleMy First Home Page/title
/head
body bgcolor="#ddffff"
h1 align="center"HTML Tips and Tricks/h1
Only this sentence should appear on the page. /body
/html
|
After typing in the red text,
save your file and take a look at it in your browser. If you like, you can keep this page open and
look at your file in a second browser window. If your file is saved in a floppy disk,
click this button to open a second browser window with a list of the files in your floppy disk. Then, just click on your file.
(Make sure your disk is in the computer before you click the button!) Use your taskbar to switch between windows.
When you are finished editing and saving, you should see a large, centered heading on your page like the one below.
Review:
- Headings can be added to web pages with the hn tag.
- Headings are available in six sizes, h1 - h6.
- Headings can be aligned on the page with the align attribute, which is placed inside the opening heading tag.
|