HTML and CSS —

Adding Content to the Template

The example takes the template created in tutorial 1, "Building an HTML Page," and has added some of the features introduced in this tutorial so you can get context for them in a working document.

Example: Adding content to the template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>your site : location within site : topic title</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="your, keywords, here" />
<meta name="description" content="your description here" />
<meta name="author" content="your name here" />

</head>

<body>

<h1>Welcome!</h1>

<p>Here are a few things I enjoy.</p>

<h2>A poem . . .</h2>

<p>What earthly tongue, and, oh! what human pen<br />
Can tell that scene of suffering, too severe.<br />
'Tis ever present to my sight, oh! When<br />
Will the sound cease its torture on mine ear?</p>

<h2>A recipe</h2>

<p>I like this recipe so much, I tell all my friends about it!</p>

<h3>Swirled coffee cake</h3>

<ol>
<li>Beat eggs, flour, butter and sugar until creamy</li>
<li>Pour into round baking pan</li>
<li>Slowly add and swirl any one or combination of the following ingredients:
     <ul>
     <li>chocolate sauce</li>
     <li>cinnamon crunchies,</li>
     <li>1 tsp nutmeg</li>
     </ul>
</li>
<li>Place in oven and bake for 40 minutes</li>
</ol>

<h2>Unusual terms</h2>

<dl>
     <dt>Furkid (n)</dt>
     <dd>A pet treated as though it were one's child.</dd>

     <dt>Nearshoring (v)</dt>
     <dd>Restructuring a company's workforce by moving jobs to a nearby
         foreign country.</dd>

     <dt>Neurodiversity (n)</dt>
     <dd>The variety of non-debilitating neurological behaviors and
         abilities exhibited by the human race.</dd>
</dl>

<h2>When friends get in touch . . .</h2>

<p><a href="mailto:abc@domain.com?subject=feedback">Feedback</a></p>

</body>
</html>

Load this on up in your web browser and take a look!

THE IMPORTANCE OF STRUCTURE

In this tutorial, you've gotten a great start learning about two of the most important aspects of a web page: text and links. But along the way, you also learned a bit about the importance of semantics, or meaning, of elements and their tags.

This understanding is so important because when you misuse elements to achieve visual results rather than to convey meaning, you limit the document a great deal. The meaning of these elements is a part of logical document structure, and a logical document structure, in turn, generates what's known as a document tree.

A document tree is simply the hierarchical logic of your document's structure, based on the semantics of the tags you're using to mark up your content. This tree isn't particularly relevant on its own, but the moment you begin applying CSS, JavaScript, or server-side scripts for dynamic content generation, the document tree becomes incredibly important.

A clean document generates a logical document tree, making the CSS and scripting all the more easy because you can rely on advanced concepts in both that rely on such issues as inheritance. Without a clear document tree, you will be at a disadvantage when trying to debug documents.