• Cavalcade-of-Coding
• Start Learning
  • The Right Tool
  • First Things First
  • Presentation vs Structure
    • CSS for Elements
    • CSS for Attributes
• Required HTML Elements
• Structure of an HTML Document
  • Markup
  • CSS
  • Screenshot
• If the Shoe Fits
  • Headings
  • Navigation
  • Positioning

Structure of an HTML Document

Since HTML stands for HyperText Markup Language, let's talk about marking up a document. What are the parts of a document?

1. Heading Title
2. Paragraphs
3. Navigation List
4. Page Footer

You will probably want to divide your page up into sections, a section for the navigation, header, footer and main content. Using the DIV element, you can divide your page as you want.

Optionally, you may have a table with tabular information, and you might have second, or third level headings. You might want to have some pictures of things, and you might want to have some images to give the page a little pizzazz. You might even have a list, as the one above.

Here is a short example:

<div class="menu">
<ul>
<li><a href="home.html">Home Page</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</div>
<div class="content">
<h1>Title of Page</h1>
<p>A paragraph explaining the subject of the document.</p>
<p>Another paragraph delving more into the subject.</p>
<h2>Subtitle</h2>
<p>More information paragraph.
<img src="somepic.png" alt="Picture of My Red Tortishell Cat">
</p>
<table summary="My Current Events">
<caption>My Current Events</caption>
<thead>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th><th>Thur</th><th>Fri</th><th>Sat</th><th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td>Doctor's Appointment</td><td>Lunch with Bob</td><td>Opera Tickets</td><td class="black">Black</td>
<td>Dinner with Sarah</td><td>Festival</td><td>Church</td>
</tr>
<tr>
<td class="black">Black</td><td>Pay Bills</td><td>Grocery Shopping</td>
<td>Laundry</td><td>Sportsman's Lodge</td><td class="black">Black<td>Church</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">Copyright © 2005</div>

Please note that there are absolutely no presentational elements. There is nothing about color, or borders, etc. That is all handled by CSS.

Here is the CSS:

	.menu {
		width:20%;
		float:left;
		top:0;
		border-left: 1px solid #008000;
		border-top:5px solid #9a00bd;
		border-right:1px solid #008000;
		border-bottom: 5px solid #9a00bd;
		height:100%;
	}
	.menu ul {
		list-style-type: none;
		margin:0;
		padding:0;
	}
	.menu ul ul {
		margin-left:1em;
	}
	.content {
		margin-left:22%
	}
	.content h1, .content h2 {
		text-align:center; 
		font-variant: small-caps; 
		border-top:1px solid #000; 
		border-bottom:1px solid #000; 
		color:#ededed;;
		background-color: #008080;
	}
	.content h1 {
		font-size:140%;
	}
	.content h2 {
		font-size:130%
	}
	.footer {
		text-align:center;
		font-size:80%;
		margin-top:4em;
	}
		.content table {
		border-collapse:separate;
		background-color:#fff;
		padding:0 1em 1em 1em;
		border-right:1px solid #000;
		border-left:1px solid #000;
		border-bottom:1px solid #000;
		
	}
	.content caption {
		background-color:#fff;
		color:#000;
		border-right:1px solid #000;
		border-left:1px solid #000;
		border-top:1px solid #000;
		padding:.5em 0 0 .5em;
		font-weight:bold;
	}
	.content th {
		background-color:#c0c0c0;
		color:#000;
		border:1px outset #000;
	}
	.content td {
		border:1px solid #c0c0c0;
		vertical-align: top;
		background-color:#f0fff7;
		color:#000
	}
	.content td.black {
		background-color:#000;
		color:#fff;
	}