Adding Headers and Footers to a Page

The layouts you’ve seen so far provide a good base from which you can
build a more complex web page and indeed website. However, the page is
missing two things: a header and a footer.
Headers are typically used to convey information such as the name of the
site or to provide a menu; footers are used to provide additional information
such as copyright and are also being used to provide a map of links within
a site, known as a site map. Additionally, we tell you how to create a menu
within the header.
Creating a header, header menu, and footer
You’ve seen how to create a multi-column layout with a main content area
and a sidebar. To create this layout, you add a <div> element to hold the
sidebar’s content. You then apply CSS rules to the <div> to set its width
and position. Creating a header and footer is accomplished in largely the
same manner. An additional <div> is created to hold the content for each
and then rules are applied to those <div> elements to position them.

1. Open your text editor.
Create a new blank text document.
2. Enter the following HTML in the text document:
<!doctype html>
<html>
<head>
<title>Two Column With Header and Footer</title>
<link rel=”stylesheet” type=”text/css” href=”final.
css”>
</head>
<body>
<div id=”container”>
<div id=”header”>
<h1>This is my site!</h1>
</div> <!-- end header -->
<div id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><A href=”#”>Services</a></li>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>Contact Me</a></li>
</ul>
</div> <!-- end menu -->
<div id=”mainContainer”>
<div id=”content”>
<h2>Here’s some content</h2>
<p>This is where a story would go</p>
<h2>Here’s more content</h2>
<p>This is another story</p>
</div> <!-- end content -->
<div id=”sidebar”>
<h3>Menu</h3>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</div> <!-- end sidebar -->
<div id=”footer”>
<p>Copyright (c) 2012 Steve Suehring</p>
</div> <!-- end footer -->
</div> <!-- end mainContainer -->
</div> <!-- end container -->
</body>
</html>
3. Save the file.
Save the file as final.html in your document root.
4. Create a new text document.
Create a new empty text document. This one should hold the
following CSS:
body {
font-family: arial,helvetica,sans-serif;
}
#container {
margin: 0 auto;
width: 100%;
}
#header {
background-color: #abacab;
padding: 10px;
}
#menu {
float: left;
width: 100%;
background-color: #0c0c0c;
}
#menu ul li {
list-style-type: none;
display: inline;
}
#menu li a {
display: block;
text-decoration: none;
border-right: 2px solid #FFFFFF;
padding: 3px 10px;
float: left;
color: #FFFFFF;
}
#menu li a:hover {
background-color: #CCCCCC;
}
#mainContainer {
float: left;
width: 100%;
}
#content {
clear: left;
float: left;
width: 65%;
padding: 20px 0;
margin: 0 0 0 5%;
display: inline;
}
#sidebar {
float: right;
width: 30%;
padding: 20px 0;
margin: 0;
display: inline;
background-color: #CCCCCC;
}
#footer {
{
clear: left;
background-color: #CCCCCC;
text-align: center;
padding: 20px;
height: 1%;
}
5. Save the file.
Save the CSS file as final.css in your document root.
6. Open your browser and view the page.
Open your web browser, navigate to http://localhost/final.
html