jessey.net: XHTML Tutorial

Lesson 2

Page Structure 2

First, we will recap what we learned in the first lesson before learning more about page structure elements.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">: The first structure tag in every HTML page is the <html> tag. It tells the browser that the contents of the file is in the HTML markup language. In XHTML, it should immediately follow the DOCTYPE identifier, as mentioned in the previous lesson. The last structure tag in every HTML page is the </html> tag. Anything following it in your code should be ignored.
<head>: This tag tells the browser that the lines between it and the closing tag will contain the head of the file. Few elements go in here, the page title and metadata being the most common. The head is closed with the </head> tag.
<title>...</title>: The page title goes between these two tags. Keep the title short and descriptive.
<meta ... />: There are several kinds of meta elements, and some of these will be explained later. The most important is the element that identifies the character set that the file will be using, and it should be included in all page structures wherever possible; however, the information it contains will always be trumped by the settings of the web server.
<body>...</body>: The content of the page must reside within these tags. This represents what can be accessed by the user.
<h1>...</h1>: Of the six heading elements, h1 is the most important. Text in this element will normally be rendered by the browser with some sort of emphasis, with the convention being larger and bolder than normal text.
<p>...</p>: Like in a book, most of the information that you present on your web page will be contained in paragraphs.

Headings in detail

You can use headings to divide sections of text. This version of XHTML specifies six heading levels, h1 through h6, with h1 having the most importance. Ideally, headings should be used in an ever descending order of importance. For example, you may have one or more h3 elements that are sub-headings of an h2 element. Heading elements should never be used as a way of changing the visual appearance of text. Headings can be any length, including (if necessary) many lines of text. Normally they are kept fairly short and descriptive.

Let us return to the example. Add the following lines of code to the body of the document you created in the first lesson:

<body>
  <h1>My first webpage</h1>
  <p>At last, I am a web developer!</p>
  <h6>Low importance heading</h6>
  <h5>A little more important than the last heading</h5>
  <h4>Relatively important now</h4>
  <h3>A bit more important</h3>
  <h2>This heading is very important</h2>
<h1>The most important heading ever!</h1>
</body>

Save the document under the new name of page02.html, and then view the file in your web browser. You should see something a bit like this:

Paragraphs in detail

Paragraphs are a simpler affair, because there is only one version. Text existing between the opening <p> and closing </p> tags is formatted just like on a word processor.

Let us create a new example, page03.html that makes use of both headings and paragraphs. Type in the code exactly the same as it is shown below and save it as page03.html, taking care not to end up with a .txt extension on the end.:

<!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>Page03</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <h1>The Third Page</h1>
    <h3>A lesson in paragraphs</h3>
    <p>This paragraph follows an h3 heading. It will be the first time I will get to see something that looks like a REAL web page, although I'll have seen something similar in a wordprocessor document.</p>
    <p>The second paragraph will be just as boring as the first, but it will demonstrate the fact that a line break is added between the two paragraph blocks by the browser. What will follow will be another heading.</p>
    <h3>Another, unremarkable heading</h3>
    <p>The final paragraph demonstrates that a line break is automatically inserted after a heading as well. It means that the document looks well presented. Notice the font that this is being shown in. It is the DEFAULT font, chosen by your browser (usually Times New Roman).</p>
  </body>
</html>

From now on, these lessons will assume that you will create the generic structure of the page for yourself, and concentrate only on the content within the document body.

View the page in your browser, and you should see something a bit like this:

Okay, you are doing really well. This is one of the longest lessons, with perhaps the steepest learning curve. You have one more series of structural elements to learn before you'll be ready to move on to some of the more interactive elements.

Lists (3 different kinds)

After paragraphs and headings, lists are probably the most common XHTML element. There are three, basic types of list, which I will ... er ... list for you:

Unordered lists
Ordered lists (like this one)
Definition list

The Unordered List

This type of element opens with the <ul> tag and closes with the </ul> tag. You have had some experience with opening and closing tags so this should not come as any surprise. This particular element must have one or more children, known as list items. List items begin with the <li> tag and end with the </li> tag.

The best way to see how a list works is to try it. Using your template, create a document called page04.html that includes the following code within the document's body:

<ul>
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
  <li>Fourth list item</li>
</ul>

Viewed in a web browser, you should see something like the following:

Pretty easy, huh? Now we will have a go at nesting them. Create page05.html with the following:

<ul>
  <li>First list item</li>
  <li>Second list item
    <ul>
      <li>First nested item</li>
      <li>Second nested item</li>
      <li>Third nested item</li>
    </ul>
  </li>
  <li>Third list item</li>
  <li>Fourth list item</li>
</ul>

The code should look like this, assuming all the tags are in the correct places:

You will notice that the bullet point changes for the nested group. There are several types that are used to distinguish between different levels of the list, and these vary from browser to browser.

The Ordered List

This type of list opens with the <ol> tag and closes with the </ol> tag. List items use the same li element as unordered lists. Create page06.html with the code below. It is almost identical to the previous example:

<ol>
  <li>First list item</li>
  <li>Second list item
    <ol>
      <li>First nested item</li>
      <li>Second nested item</li>
      <li>Third nested item</li>
    </ol>
  </li>
  <li>Third list item</li>
  <li>Fourth list item</li>
</ol>

The code should look like this, assuming all the tags are in the correct places:

Definition Lists

Definition lists (also called glossary lists) differ from from other lists because the items within the list have two parts:

One or more definition terms (or titles)
One or more definition descriptions

Normally, there is only a single term and definition. It is extremely rare to have more than one definition term. Each part of the definition list has its own element. The definition term is described by the dt element, and the definition description by the dd element. The whole structure is contained within a dl element. Create page07.html with the following:

<dl>
  <dt>James T. Kirk</dt>
  <dd>The heroic captain of the USS Enterprise has distinguished himself countless times when facing the unknown.</dd>
  <dt>Spock</dt>
  <dd>Kirk's trusted science officer can always be depended upon for solutions to difficult problems, as well as unswerving loyalty to his commander.</dd>
  <dt>Montgomery Scott</dt>
  <dd>The most talented engineer in Starfleet, Scotty has used his skills to save the USS Enterprise and keep her shipshape.</dd>
</dl>

The result should look like this:

Phew! That was a lot of typing, wasn't it? All of the code you have been entering is available on this website, to save you typing it in. Why has this not been mentioned earlier? Because it is important that you to learn to do it yourself. In the next lesson, a new menu link will appear. Click on the new “source code” to go to a directory listing of all the source files. In the next lesson, we will look at hyperlinks and text formatting before creating a proper web page.

Proceed to lesson 3.

jessey.net