Difference between revisions of "Header and Footer"

Latest revision as of 18:17, 6 October 2009

On many web sites, there are many elements which are common between pages:

Navigation
Company or Product logo
Copyright information

On web sites which support Server-side Includes, these elements can be incorporated into one or two files in order to simplify web site maintenance. They are called the Header and Footer of the web page.

An example

The following outlines an example using Server-side Includes:

File: index.html

This is the web site's home page:

<!--#include virtual="/header.html" -->
<h1>Welcome to our site</h1>
<p>Example company was founded in 2009 and produces the finest quality widgets available on the market today ...</p> <!--#include virtual="/footer.html" -->
<!--#include virtual="/footer.html" -->

File: header.html

<html>
     <head>
         <title>My web site</title>
         <link rel="stylesheet" href="style.css" media="all" />
     </head>
     <body>
         <img src="logo.gif" alt="Example Company" />
         <ul class="menus">
             <li><a href="/">Home</li>
             <li><a href="/products/">Products</li>
             <li><a href="/contact/">Contact</li>
             <li><a href="/about/">About</li>
         </ul>
         <div class="content">

File: footer.html

          </div>
          <div id="footer">
              Copyright © 2009 Example Company, Inc.
          </div>
     </body>
     </html>

Relation to analytics software

Obviously, having a header and footer for your web site make it much, much easier to change information which may be contained on the header and footer. To add a new menu item, just update the header.html file and all pages which use that include will be updated as well.

When installing conversion tracking software, it's easiest to update the footer.html file with the appropriate HTML snippet.

Navigation menu