HTML Example

Easy Example

Rather than confuse you with lots of wordy instructions let's just plough straight into a simple HTML document:-

<HTML>

<HEAD>
   <TITLE>
      An example of an HTML document.
   </TITLE>
</HEAD>

<BODY>
   This is my very first document written in HTML
   Woweeee!
</BODY>

</HTML>

If you would like to see exactly what this looks like then click here. (Then click on your Browser's Back Button to return here).

Let's look at what we did here. We have already covered the first and last HTML tags so we can begin with the header.

At the beginning of every HTML document there is a header section which is enclosed in:

Only certain things are allowed in the header section. One of these is the TITLE. The title of your document does not refer to the text on the page but rather to the the text that will appear in the Browser's Title Bar. So, if you take another look at the example above you will notice that the Title Bar changed from "Introduction to HTML" to "An example of an HTML document". The TITLE is most important as, should someone add a bookmark to your page, it is the TITLE you have given your document that will be used as the bookmark's name.
In addition, many search engines have the capability to search sites not just by subject matter, but by titles as well.

Other tags that can appear in the Header will be considered later.

The other requirement of an HTML document is its BODY section. The body is, of course, enclosed in the following tags:

It is in this section that we write everything we want to appear on-screen when someone loads our document.

Looking at our example we see the following text:

This is my first document written in HTML Woweeee!

Notice that although we typed the "Woweeee!" on a separate line, when the document is viewed in the browser the text for it appears on the same line as the first sentence. This is because HTML treats all spaces (returns, tabs, spaces) as ONE SPACE whether it is one, two or more spaces, 13 tabs or 100 returns! If we specifically want to have "Woweeee!" on a separate line we have to use the line break tag BR as follows:

This is my very first document written in HTML<BR>
Woweeee!

See the effect of the BR tag here.

You may have noticed that "BR" was used alone. It is an example of a tag that is not a part of a pair, ie. it is not followed by </BR>

So, to see the effect of the BR tag, click here. A very useful variation is the <BR CLEAR="ALL"> tag. This comes into its own particularly where you have a mixture of text and graphics as differing computers/browsers/browser settings will display them in a different manner. The <BR CLEAR="ALL"> tag ensures that the subsequent line of text or subsequent image will be below all that has gone before. Without it, the text/image could appear alongside, instead of below, the previous text/image.