All HTML documents have a prescribed, broad structure. This structure, and the tags we use to define it, are the subject of our first lesson.
You've probably already noticed that web page files all seem to have filename extensions of ".htm" or ".html". These extensions help your web browser (and web servers, and other software) to recognise the file as being an HTML-coded document. And for many browsers, that is actually enough for them to know what's coming and to interpret everything in the file accordingly.
But to conform to the specifications for HTML (we'll talk about those later), and to be sure that every browser knows what kind of file it is, we have to start the file off with a tag that identifies it as being HTML. All tags are enclosed in angle brackets, like <THIS>. HTML isn't sensitive to case, so tags may be written either in upper case or in lower case: it's just a matter of taste. In this tutorial, we'll write them in upper case simply because it makes them stand out more on the page.
(Just a note of caution here. XHTML and XML will be used increasingly in the future to build web pages, and these are case-sensitive, and require tags to be in lower case. So in order to prepare yourself for the future, you might want to start using lower case right from the beginning.)
We need to start our file with the <HTML> tag. As soon as the browser sees this, it knows to interpret the file as HTML. Most elements of HTML come in pairs, an "opening" tag, that tells the browser what to do with what follows it; and a "closing" tag, that tells the browser we're finished with that particular instruction. The closing tag looks just like the opening tag, except that it has a "/" before the tag name inside the angle brackets. <HTML> has a closing tag; you've probably figured out that it is </HTML>.
Let's make a start on our first web page. Open your text editor in another window, and start a new file. Type the following two lines:
</HTML>
Everything else in an HTML file must appear in between those two tags. (Actually that isn't the whole truth, but we'll come back to that in Lesson 14!)
Each HTML document has two parts, the HEAD and the BODY. Inside the HEAD element, we put information such as the title of the page that we want to appear in the title bar of the browser. The HEAD element can contain other things, but we won't go into that just yet. The BODY element section contains the meat, the real content of the page: so let's take a look at it now.
To distinguish the BODY from the HEAD, you've guessed it -- we have to place it between a pair of opening and closing tags. Not surprisingly, these are <BODY> and </BODY>. Insert these into your file so that it now looks like this (if your browser supports Cascading Style Sheets, you'll see the new bits coloured in red, to make them easier to spot):
<BODY>
</BODY>
</HTML>
Let's put some text into the body of the document -- between the BODY tags as follows:
<BODY>
Hello, world!
</BODY>
</HTML>
Save your file with the filename "file1.html". When you open it in your web browser, it should look like this (following this link will open up a new browser window to display the result -- just close it when you're finished, this window will still be here).
All right, let's go back to this HEAD section thing. I said that we can enclose a number of different instructions in the HEAD element, which is defined by a pair of tags: <HEAD> and </HEAD>. We have to differentiate between different types of instruction using... more tags! For example, to display a title for our page in the browser's title bar, we put the title inside the <TITLE> and </TITLE> tags. Insert a few more lines in your file so that it looks like this:
<HEAD>
<TITLE>Lesson 1</TITLE>
</HEAD>
<BODY>
Hello, world!
</BODY>
</HTML>
Save your file. When you open it in your browser, it should look like this (close the new window when you're done looking at it). See the message in the title bar?
By the way, when you create an HTML file, it doesn't much matter where you choose to break lines. All of the instructions for formatting the text in the way that it will be seen in a browser are given in the tags, not in the layout of the HTML code. So whereas above we typed:
<HEAD>
<TITLE>Lesson 1</TITLE>
</HEAD>
<BODY>
Hello, world!
</BODY>
</HTML>
we could equally well have typed:
and the file would have displayed in exactly the same way. Also, browsers pay no attention to additional spaces between words or lines. Generally speaking, if you put ten spaces between two words in your HTML file, the browser will ignore nine of them and display the text with just one space between the two words. This gives us a lot of flexibility in formatting the source code in our HTML files -- we can lay it out according to our own preference. It makes sense to format the code in a way that will make it easy to read, understand and follow its logic. You'll pick this up as we come across more examples throughout the tutorial, and we'll discuss this again in Lesson 10.
You'll have noticed in the simple example above that tags are often placed (or "nested") inside other tags. For example, the <TITLE> and </TITLE> tags were nested inside the <HEAD> and </HEAD> tags. You'll see a lot more of this as we progress. What you really have to be careful about is ensuring that wherever you have opening and closing pairs of tags, you close them in the right order. In other words, if you open a new tag inside another pair of tags, you have to close it inside the same pair. Put another way:
<TITLE>
Lesson 1
</TITLE>
</HEAD>
is right, but:
<TITLE>
Lesson 1
</HEAD>
</TITLE>
would be wrong (note the position of the </TITLE> tag). The <TITLE> tag was opened inside the HEAD tags, so the closing </TITLE> tag must come before the closing </HEAD> tag.
An HTML file must open with <HTML> and close with </HTML>.
The content of the page must be enclosed within the <BODY> and </BODY> tags.
You don't have to define a HEAD element in your page, but if you do, it has to be enclosed between the </HEAD> and <HEAD> tags; and these must come before the <BODY> tag.
If you want your page to have a title in the browser's title bar, you have to place it in the HEAD section inside <TITLE> and </TITLE> tags.
You must take care to ensure that nested pairs of tags are closed in the right order. The general pattern is:
<< Go back to Introduction | Top | Go on to Lesson 2 >>
Copyright © Keith W Bell, 1999 - 2001This page last updated 1 February 2001
http://www.campanile.org/tutorials/html/lesson1.html
Title Page Contents Introduction
Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson 10 Lesson 11 Lesson 12 Lesson 13 Lesson 14 Appendix A Appendix B Appendix C Appendix D Feedback
We're going to use one particular trick throughout this tutorial. Whenever I want to show you an example of how a page looks, I'll put a link in the text. When you select that link, the example will open up in a new browser window. When you've finished looking at the example, close the new window. You'll find that the original window is still there, at the same tutorial page you were looking at beforehand.