HOW TO BUILD A PROFESSIONAL WEB SITE Rel. 1.1

LESSON 04 - Chapter e

by Carlo Scodanibbio

home

enrol

Lessons

welcome
1 - chapter a
1 - chapter b
1 - chapter c
1 - chapter d
1 - chapter e
1 - chapter f
1 - chapter g
1 - chapter h
1 - chapter i
1 - chapter j
1 - chapter k
2 - chapter a
2 - chapter b
2 - chapter c
2 - chapter d
2 - chapter e
2 - chapter f
2 - chapter g
2 - chapter h
3 - chapter a
3 - chapter b
3 - chapter c
3 - chapter d
3 - chapter e
3 - chapter f
3 - chapter g
3 - chapter h
4 - chapter a
4 - chapter b
4 - chapter c
4 - chapter d
4 - chapter e
4 - chapter f
4 - chapter g
4 - chapter h
4 - chapter i
4 - chapter j
4 - chapter k
5 - chapter a
5 - chapter b
5 - chapter c
5 - chapter d
5 - chapter e
5 - chapter f
5 - chapter g
6 - chapter a

other text manipulating tools - headings

Let's now talk of a subject related to the previous one.
The HTML Standard strongly recommends the use of HEADINGS to identify the various areas of a textual (and not only) Page: Headings are what the word implies, sort of Dividers and Titles for blocks of text embedded in the Page.
Headings break the current flow of text, standing alone on lines separated from the preceding and following text. This is obtained without inserting any BREAK or PARAGRAPH Tag, it is a built-in feature of Headings.
Now, Headings are totally optional (in fact they are rather seldom seen on the Net), but I join the W3C Organisation in recommending their use. When, in future Lessons, we shall be talking of Cascading Style Sheets and Dynamic HTML, you will fully understand why Headings can be very handy. For the time being just believe me: they are very useful.

There are 6 levels of Headings in the HTML Standard, and they are obtained through the use of 6 different pairs of Tags:
<H1></H1>
<H2></H2>
<H3></H3>
<H4></H4>
<H5></H5>
<H6></H6>

Text contained in a pair of Heading Tags gets displayed by Browsers in very large (H1, H2..) to very small (H5, H6) font size, without using the FONT Tag at all.
Normally, the text inside a H4 Heading gets displayed as ordinary size text (size 3).
The FACE used is normally the default FONT (Times New Roman).
The default text colour is normally black.
Some browsers display contained text in boldface.
Each version of each Browser has its own way of rendering text within Headings: the difference, however, is not excessive.

Some examples will give you a better perspective on the subject:

<BODY BGCOLOR="#FFFF99">
<H1>Welcome to Rapounzel's Web Site</H1>
Blah, blah, blah, etc. etc.
<H2>Welcome to Rapounzel's Web Site</H2>
Blah, blah, blah, etc. etc.
<H3>Welcome to Rapounzel's Web Site</H3>
Blah, blah, blah, etc. etc.
<H4>Welcome to Rapounzel's Web Site</H4>
Blah, blah, blah, etc. etc.
<H5>Welcome to Rapounzel's Web Site</H5>
Blah, blah, blah, etc. etc.
<H6>Welcome to Rapounzel's Web Site</H6>
Blah, blah, blah, etc. etc.
</BODY>

This is what the Browser displays:

Rather self-explanatory, I suppose: you may easily see the difference between ordinary (default) text and text contained within the 6 Headings.

Obviously you may beautify your Heading Text using the FONT Tag to specify a different FACE than Times New Roman and a different COLOR from black. This is shown in the example that follows.
However, I cannot guarantee that all versions of all Browsers will respect the change imposed by a FONT Tag to the H built-in style.
You can definitely use, within Headings, other style Tags such as I, U, CENTER, etc.
But there is another interesting feature associated to Heading Tags: all the 6 of them accept the Attribute ALIGN, with a syntax identical to DIV and P. Therefore you may use the H Tags also to align your text conveniently. Also this aspect is shown in the following example:

<BODY BGCOLOR="#99CC66">
<H2 ALIGN="center"> <FONT FACE="courier new, times new roman" COLOR="#660033">this is the most fascinating <BR>page on the web</FONT></H2>
<BR><P>
<H3 ALIGN="right"><B><I><U>in fact you will discover that the most incredible <BR>mysteries of the universe are fully explained in my page
<BR>keep on reading blah blah blah etc. etc.</U></I></B></H3>
</BODY>

MS Internet Explorer will display the above code as follows:

All right with Headings ?

shut-down this HTML story !

http://webbuildcourse.tripod.com

full details of this Course at
http://www.scodanibbio.com/webbuild