Putting
it all Together
- Page Contents
- The HTML Code
- The Page in a Browser
This is where we'll use all of the previous steps to put together a web page. We're going to keep it simple — we don't want to blow anyone's eyes out with HTML code! I've also annotated it with red comment tags to point out the various sections.
The HTML Code
<!-- doctype -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- html & head area -->
<html>
<head>
<!-- Title, MetaTags and Language Tag -->
<title>Joe's Bookshelf - Rare and Used History Books</title>
<meta name="description" content="Browse our vast collection of rare and used history books online.">
<meta name="keywords" content="used history books for sale online, rare history books, Joe's Bookshelf">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Internal CSS styles-->
<style type="text/css">
<!--
body {margin:0; padding:0; background:#fff url(images/bk-white.gif")}
p { color: #000000; font-size: 10pt; font-family: Arial, Helvetica, sans-serif; }
.title { color: #cc6699; font-size: 31px; font-weight: bold; }
.title2 { color: #cc6699; font-size: 17px; font-weight: bold; font-family: arial,sans-serif}
.menu { color: #127481; font-size: 12px; text-decoration: none; font-weight: bold; font-family:
arial,sans-serif; }
a:hover { color: #cc6699; text-decoration: underline; }
-->
</style>
</head>
<!-- body tag -->
<body>
<!-- top of page starts here -->
<table width="500" cellpadding="0" cellspacing="0" border="0"
align="center">
<tr>
<td width="121"><img src="images/yourlogo.jpg" width="101"
height="130" alt="Joe's Bookshelf"></td>
<td width="379" class="title">Welcome to Joe's Bookshelf<br>
<span class="title2">Used and Rare History Books for Sale</span></td>
</tr>
</table>
<br>
<!-- main content table here -->
<table width="500" cellpadding="0" cellspacing="0" border="0"
align="center">
<tr>
<td width="95" valign="top" align="right">
<!-- menu -->
<p><a href="0-intro.html" class="menu">Home</a><Br>
<a href="0-intro.html" class="menu">Products</a><Br>
<a href="0-intro.html" class="menu">About Us</a></p>
</td>
<td width="25"> </td>
<td width="380" valign="top">
<!-- text area -->
<p>This new page has been put together using our previous lessons.</p>
<p>Once you've got the hang of HTML -- which you can only do by practicing it
--
you'll have no problems.</p>
<p>Best regards,</p>
<p>DianeV</p>
</td>
</tr>
</table>
</body>
</html>
The Page in a Browser
Notice how our Title is reflected at the top of the browser window, and on the button at the bottom.
That's it. Let's go on to the finale.
DianeV Web Design Studio
© 1998- DianeV Web Design Studio. All Rights Reserved. :: Privacy/Legal/Return Policy. Any unauthorized reproduction
or distribution of the contents of this website is a violation of copyright law and may result in severe civil and criminal penalties.
