A More Advanced HTML Page
Let's revisit our testpage.html and add some extra elements. Listing 2.2 shows seville.html, developed from our original HTML page but with different content in the <body> section of the document. Figure 2.3 shows how the page looks when displayed, this time in Mozilla Firefox.
Now we have applied a background tint to the body area of the document. The content of the body area has been centered on the page, and that content now includes an image (which we've given a two-pixel-wide border), a heading and a subheading, a simple table, and some text.
Listing 2.2. seville.html
[View full width] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4
 /loose.dtd">
<html>
<head>
<title>A Simple HTML Document</title>
</head>
<body bgcolor="#cccccc">
<center>
<img src="cathedral.jpg" border="2" alt="Cathedral" />
<h1>Guide to Seville</h1>
<h3>A brief guide to the attractions</h3>
<table border="2">
<tr>
<th bgcolor="#aaaaaa">Attraction</th>
<th bgcolor="#aaaaaa">Description</th>
</tr>
<tr>
<td>Cathedral</td>
<td>Dating back to the 15th century</td>
</tr>
<tr>
<td>Alcazar</td>
<td>The medieval Islamic palace</td>
</tr>
</table>
<p>Enjoy your stay in beautiful Seville.</p>
</center>
</body>
</html>
|
Let's take a closer look at some of the code.
First, we used the BGCOLOR property of the <body> tag to provide the overall background tint for the page:
<body bgcolor="#cccccc">
Everything in the body area is contained between the <center> tag (immediately after the body tag) and its partner </center>, immediately before the closing body tag. This ensures that all of our content is centered on the page.
The main heading is enclosed in <h1> ... </h1> tags as previously, but is now followed by a subheading using <h3> ... </h3> tags to provide a slightly smaller font size.
By using the border property in our opening <table> tag, we set a border width of two pixels for the table:
<table border="2">
Meanwhile we darkened the background of the table's header cells slightly by using the BGCOLOR property of the <th> elements:
<th bgcolor="#aaaaaa">Attraction</th>