the html

<body>
<!-- Start Container -->
<div id="container">
<!-- Start Banner -->
	<div id="banner">
<img src="Images/web.jpg" height="103" width="150" border="4" alt ="Class web logo"/>
<h1>Create a Div Web Page</h1>
<p>One Pixel at a Time</p>

	</div>
	<!-- End Banner -->
	<!-- Start Subject -->
	<div id="subject">

<h2>the html</h2>
<br />
<br />
<br />

	</div>
<!-- End Subject -->
<div id="subject2">

<h2>the css</h2>
<pre>
<style type="text/css">
#container {
	width: 850px;
	height:675px;
	background-color: silver;
	margin:auto;
}
#banner {
	width:800px;
	height:111px;
	background-color:ButtonShadow;
	margin:auto;
	background-image: url(Images/bg1d.gif);
	}
	
#banner img {
	float:left;
			}

#banner h1 {	color:red;
padding: 10px;
text-indent: 10px;
      }	 

#banner p {
		color:yellow;
	text-indent: 30px;
}


#subject {width:300px;
height: 300px;
clear: left;
float: left;
background-color: #cdfcff;
margin: 10px;
padding: 10px;
}

#subject2
{width:300px;
height: 300px;

float: left;
background-color: #cdfcff;
margin: 10px;
padding: 10px;
}


 #footer {
clear: left;
float: left;`
border:1px;
border-color:#039;
width:800px;
height: 38px;
}

#footer ul#navigation {
	padding: 0;
	margin-top: 10px;
	background-color: #039;
	color: #fff;
	width: 100%;
}
#footer ul#navigation li { display: inline; }
#footer ul#navigation li a {
  padding: .25em 1em;
  background-color: #039;
  color: #fff;
  text-decoration: none;
float:left;
  border-bottom: solid 1px #fff;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
} 
#footer a:link, a:visited { color: #fff; }
#footer ul#navigation li a:hover {
	color: #000;
	background-color: #fff;
}
#footer p a:link, p a:visited { color: #000; }
</pre>

	
	</style>


	</div>
<!-- End Subject -->

<!-- Start Footer -->
	<div id="footer">
<ul id="navigation">
  <li><a href="Banner-01.html"> Page 1</a></li>
<li><a href="Banner-02.html"> Page 2</a></li>
<li><a href="Banner-leftcol.html"> Page 3</a></li>
<li><a href="navlist-0.html"> Page 4</a></li>
<li><a href="navPsuedo-1.html"> Page 5</a></li>
<li><a href="nav-vert-hor-1.html"> Page 6</a></li>

</ul>
	</div>
	<!-- End Footer -->
</div>
<!-- Ened Container -->
</body>
</html>

the css

<style type="text/css">
#container {
	width: 850px;
	height:675px;
	background-color: silver;
	margin:auto;
}
#banner {
	width:800px;
	height:111px;
	background-color:ButtonShadow;
	margin:auto;
	background-image: url(Images/bg1d.gif);
	}
	
#banner img {
	float:left;
			}

#banner h1 {	color:red;
padding: 10px;
text-indent: 10px;
      }	 

#banner p {
		color:yellow;
	text-indent: 30px;
}


#subject {width:300px;
height: 300px;
clear: left;
float: left;
background-color: #cdfcff;
margin: 10px;
padding: 10px;
}

#subject2
{width:300px;
height: 300px;

float: left;
background-color: #cdfcff;
margin: 10px;
padding: 10px;
}


 #footer {
clear: left;
float: left;`
border:1px;
border-color:#039;
width:800px;
height: 38px;
}

#footer ul#navigation {
	padding: 0;
	margin-top: 10px;
	background-color: #039;
	color: #fff;
	width: 100%;
}
#footer ul#navigation li { display: inline; }
#footer ul#navigation li a {
  padding: .25em 1em;
  background-color: #039;
  color: #fff;
  text-decoration: none;
float:left;
  border-bottom: solid 1px #fff;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
} 
#footer a:link, a:visited { color: #fff; }
#footer ul#navigation li a:hover {
	color: #000;
	background-color: #fff;
}
#footer p a:link, p a:visited { color: #000; }
</style>