Lesson 1

Page Structure

Let's get right to it. Open up your text editor and type the following code, exactly as it is shown below. I will explain what it all means later:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Page01</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <h1>My first webpage</h1>
    <p>At last, I am a web developer!</p>
  </body>
</html>

Save the page as page01.html. Please be aware that some text editors, like Windows Notepad, will try to append .txt to the filename. You will need to watch out for this, but you can usually avoid it by wrapping the filename in double quotation marks, like this: "page01.html"

Open up your web browser, and browse to page01.html on your local system. You should see the following in your browser:

So what does all that mean?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This line tells the browser what form the page will take. The browser must render the page in accordance with the rules given in the Document Type Definition. You can see the actual XHTML 1.0 Strict Document Type Definition on the website of the World Wide Web Consortium if you wish.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
The html element is one of the mechanisms that tells the browser that the document contains HTML, and that this particular version of the document will be presented in the English language.
<head>
This is the opening tag of the head element. The element contains document metadata, which is information about the content of the page for the browser. You should never put any of the text for your page in this section.
<title>Page01</title>
This line gives the page a name. The title is usually displayed in the title bar of the viewport (browser window).
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
This meta element gives information about the character encoding that is being used for the text of a document, and also the type of file it is.
</head>
This tag closes the head element. In XHTML, all elements must have a closing tag. When there is no specific closing tag, a space followed by a forward-slash "/" is used, like the end of the meta line in the example.
<body>
The rest of the page is enclosed within the body element. Anything that you want your user to see should be included within this section.
<h1>My first webpage</h1>
This is your first line of visible text. The <h1> element is used to represent the most important of 6 predefined headings. Most browsers represent headings in a bold face to distinguish them from the rest of the text, but it is the importance of each heading that is most significant.
<p>At last, I am a web developer!</p>
The bulk of text on most web pages resides within p or paragraph elements. Both the h1 and p elements generate a line break after the closing tag.
</body> </html>
These closing tags close the body of the page and the page itself respectively. A deeper explanation of these structural page elements, along with reference information for every aspect of XHTML can be found in the excruciatingly dull specification on the World Wide Web Consortium's website.

Excluding the h1& and p elements, all of your web pages should have the basic structure of the example. There are subtle variations that you will learn in a later lesson, but for now you can simply copy the example shown here.

The next lesson will delve into the basic aspects of the web page in more detail. You will learn about headings, paragaphs, and lists, which (together with links) form the basis for most web pages.

Proceed to lesson 2.