Beginners Tutorial - Basic Page Structure

2: Basic Page Structural Elements

The very first element you'll see if you view the source of this page is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This specifies exactly which HTML specification I'm using, and where the program rendering the page should look if it's not familiar with that specification. The specification itself is designed for a program or programmer, and it takes a lot of work to get through. Most web authors don't need to know it exactly. This code also tells the validator which version it should be checking your page against.

Strictly speaking, this tag isn't necessary. But if you don't want to choke the validator, or you're using a very new 'dtd' (document type definition), you'll need it.

After that, you need a specific set of tags:


   <HTML>
     <HEAD>
       <TITLE> Insert your page title here </TITLE>
     </HEAD>

     <BODY>
       The body of the page - the part that's displayed in the browser window
            - goes here.
     </BODY>
   </HTML>

To break that down:
HTML: this tag surrounds the entire document. It basically tells the browser that everything between them is to be interpreted as an HTML document.
HEAD: this tag surrounds the heading information of the document. This includes the title of the page as well as more advanced tags, stylesheet definitions, and scripts. Basically, things that don't go into the browser window.
TITLE: this tag surrounds the text that you want to be displayed in the title bar of your browser window. This must be between the two HEAD tags.
BODY: this tag surrounds the part of the documents that is to be rendered and displayed in the main browser window.

Notice how I indented the different tags - this was to draw attention to the fact that the start and end tags are symmetrical: you start the HEAD tag, then start the TITLE tag, so you must end the TITLE tag before you can end the HEAD tag. Ending the HEAD tag before ending the TITLE tag is wrong. The same goes for other tags inside the body of the page.

Go ahead, copy that very simple page into a text file (note, use a plain text editor such as notepad (Windows) or BBEdit (Mac) and not a word processor). Save it, then open the file you just created in your web browser. Voilà! You have a web page.

Any time you want to put a note in your page, but don't want it to be displayed (for example, if you want to note where to change something later), you can put a comment into the text. Of course, anyone can see the comments just by doing a 'view source', so don't put anything you want to keep private in the comments!

A comment looks like this:

The special beginning and ending indicate that this is not a normal tag. If it weren't for the '!--' and '--' at the beginning and end, the browser would try to interpret it as a tag. Now normally if a browser encounters a tag it doesn't understand, it just ignores it, but it's still not a good idea to put unknown tags in your code.

Go on, start up your favourite text editor and try it out. (Not word processor, but text editor. If what you use doesn't produce plain-ASCII text you'll have trouble. If you're on windows, notepad works just fine.)

Type anything at random inside the BODY tags - spaces and newlines anywhere - and notice when you view the page that the browser interprets any number of spaces or newlines as a single space. This makes it possible to format your document in a manner easy to maintain, while not affecting how it looks. If you do a 'view source' on this page, you'll see a couple of comments. One of them is in the middle of a paragraph, but since the browser doesn't care about excess spaces, it renders it as though I had not put anything there.

To see what you've just typed up, save the file in notepad with a .html extension, and go to your browser. Click 'File' then 'Open page...' (the exact wording may be different in browsers other than Netscape) and in the popup that appears you will have the choice to type in a web address or click 'browse...' to choose a file on your hard drive. Find the file you just saved, and open it. Now, every time you make a change in the file in notepad, you have to save it then hold down the shift key and click 'reload' ('refresh' in MSIE). This forces the browser to reread the file - if you just clicked reload, it would read it from its cache, not the file.

HTML Tutorial index | Beginners Tutorial index
<< Back: Introduction | Next: Text commands >>

The Paradox

2: Basic Page Structural Elements