HTML for Absolute Beginners, by Jon Storm.
Go to : Next (Text formatting); Previous (Getting started); Beginner's HTML Index; Jargon dictionary; Ultraspace; Jon Storm.

Creating your first page

The first thing you need to do is create the basic structure of your page. There are several tags involved in this, and the minimum you need to start will look like this :

<HTML>

<HEAD>
<TITLE>My new webpage</TITLE>
</HEAD>

<BODY>
(All the content of your webpage goes in here, between the <BODY> tags)
</BODY>

</HTML>

That's all you need! This is a complete webpage : sadly lacking in content, but it will work. Notice that all these tags are in pairs. Most tags work in pairs, with one to switch something on and another to switch it off. The "off" tag is usually the same as the "on" tag with / added, as you can see here. Tags are often "nested" inside one another : notice that <TITLE> and </TITLE> both go between the <HEAD> and </HEAD> tags, and that all the tags are nested between <HTML> and </HTML>. All the text, pictures and so forth in your webpage will go between the <BODY> and </BODY> tags.

Use the above to create a basic webpage template - highlight it and use Windows Copy (see Windows tips and tricks if you don't know how), then paste it into an empty Notepad document, and save that as "template.htm". Make sure the "Save as type" box at the bottom of the Notepad save window is set to "All files *.*" rather than "Text documents", or Notepad will add ".txt" to the end of the filename, and Windows won't know to treat it as a webpage rather than just a text document.

Actually, that's not the absolute minimum number of tags you could get away with. You could omit all these tags and just start typing your text, and it would probably still work. But it's not a good idea, because what works in your browser might not in someone else's (there are lots of different browsers), and also because the <HEAD> section and the <TITLE> field in particular are very important for helping internet search engines to list your page properly - more about that later, in the section on search engines. Note that the contents of the <TITLE> field don't actually appear on your page - in HTML a title in that sense is called a heading, which is covered in the next section. In many browsers though, the <TITLE> is displayed across the very top of the browser, above the pulldown menus.

If you use View Source to look at the HTML for this page (see Getting started for how to do this), you will see that it is structured exactly the same way, except that I have used several extra tags in the <HEAD> section; and my <BODY> tag incorporates some extra bits, called attributes, which set various things like the colour of the text and background. More about that later, too. Scroll right down to the end and you will see the </BODY> and </HTML> tags which mark the end of a HTML document.

You may also have noticed that the text at the beginning of this page, which lays out the basic tags for the page structure, looks very odd when you view the source code, with lots of & and ; symbols. That is because your browser always interprets angle brackets in HTML as tags, and treats everything inside them as a command rather than text, so if you want to display the < or > symbols on a webpage, you have to use these special groups of characters instead. There are a number of these special character groups, mostly for displaying unusual characters like the angle brackets or the copyright symbol ©. But most of the time you don't need them.

A word about laying out your HTML. Although I usually put my tags in upper case (capital letters), because they stand out better that way, you don't have to - lower case works just as well. And it's a good idea to put in lots of Returns to separate your HTML source code into paragraphs, as I have, because that makes it a lot easier to edit. Actually, doing it all in one long block with no Returns at all works just as well, because HTML completely ignores Returns - you start a new paragraph on your webpage with a tag (see the next section), not by pressing Return. But I don't advise it, because although the computer doesn't care, you have to be able to read it too.

Another thing you can do to make the source code easier to read is add comments. A comment is a special tag that is ignored by the browser when displaying your HTML. You start a comment with <!-- and finish it with -->. Anything you put between the two sets of symbols won't be displayed, but is visible in the source code. I mostly use them to leave myself a note of where to insert something I haven't written yet, or to put a date on a page for my own reference that doesn't display to visitors.

But don't bother with that for now. Move on to the next section, where we will start adding some content to our template.


Go to : Next (Text formatting); Previous (Getting started); Beginner's HTML Index; Jargon dictionary; Ultraspace; Jon Storm.