8Putting it all Together

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"

<!-- html & head area -->
<!-- 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; }

<!-- body tag -->

<!-- top of page starts here -->
<table width="500" cellpadding="0" cellspacing="0" border="0" align="center">
<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>

<!-- main content table here -->
<table width="500" cellpadding="0" cellspacing="0" border="0" align="center">
<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 width="25">&nbsp;</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>




<!-- end of page! -->


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.


  1. The Learn Basic HTML Series:
    1. Learn Basic HTML and Web Page Construction
    2. What is HTML?
    3. HTML Page Structure
    4. Head Tag, MetaTags & Titles
    5. Adding Page Content
    6. Tables
    7. CSS and Fonts
    8. Putting It All Together
    9. 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.