SHTML Tutorial

Footers and Headers in SHTML

Setting up Headers and Footers for your site using SHTML

After browsing around our website enough, you'll probably notice that while part of the page changes (ie. the text in the middle), other parts don't (the top bar and links to the left). In fact, if you were to look at the HTML code for each page, you'll notice that the top few lines are exactly the same. Did we make copies of the same page for each page on our site? Not exactly, since doing that would cause all sorts of problems in the future. For example, what if we want to add/remove a link, or correct a spelling mistake we didn't catch? If we made seperate copies of each page, we would have to make the corrections to every page on our site (and yes, that's a lot of pages). Not exactly my idea of fun, and I'm sure I'm not the only one who feels that way. So what did we do instead? We made use of what we like to call headers and footers . Recall what I said earlier about the top few lines of our page's HTML being the same on every page. If you check out the HTML again, the same holds true for the last few lines of the page as well. The static top part is called the header , and the static bottom part is called the footer . So you're probably asking yourself "That's nifty, but now what?". Well, imagine if you could detach the header and footer parts of the page and put them into seperate files. Then, for each page on your site, have the webserver automatically reattach the contents of the header and footer files to the pages before displaying them. That way if you wanted to update the top or bottom parts of the page, all you'd have to edit is a single file and the changes will appear on every page on your site. As it turns out, there's a variety of ways you can do this that are extremely easy once you understand what is going on. In the following example, we'll have a shot at doing this to a very simple page. Note that the majority of the templates on our site are laid out in a similar fashion to the example below, so you should be able to apply this to any non-frames template you purchase from us.

Step 1:

Divide up your page

Open up the HTML file for your page and take a look at the code. Below is our sample code:

<html>
<head>
<title>My page</title>
</head>
<body bgcolor="#FFFFFF">
<h1>Welcome to my page!</h1>
<table width="100%">
<tr>
<td valign="TOP">
<a href="home.html">Home</a>
<br><br>
<a href="about.html">About Me</a>
<br><br>
<a href="links.html">Links</a>
<br><br>
<a href="mailto:me@localhost">Contact</a>
</td>
<td valign="TOP">
Hi there. You've stumbled across my
homepage. Feel free to look around!
Have fun!!!
</td>
</tr>
</table>
</body>
</html>

We need to figure out which line ends our header, where our content area is (ie. the part that changes), and which line starts our footer. The easiest way to figure this out is to ask yourself this question: Which part of this page would I change to change the actual content of the page? Once you figure that out, everything before the content would be your header's ending line, and everything after the content would be your footer's starting line. Look at the following highlighted version of the code above to see what we chose:

We see that the text beginning with "Hi there..." and ending with "...Have fun!!!" is what we'd change to change our page's content (colored blue ). Therefore the header goes from the first line of the file to the line just above our content (colored orange ), and the footer goes from the line after the content to the end of the file (colored in green ). Now that we know where both the header and footer are, we're ready for the next step.

Step 2:

Copy the header/footer text to seperate files

Ok, now that we know where everything is we have to copy the appropriate lines to seperate files. We'll move the lines of the header to a file named header.html and move the lines of the footer to a file named footer.html . Below are the contents of each file:

Contents of header.html :

Contents of footer.html :

</td>
</tr>
</table>
</body>
</html>

We now have our header and footer files, ready to go. The next step is to tell the webserver to attach these files to each page.

Step 3:

Getting the header/footer to display on your pages

Recall from the previous step where we moved the header/footer text to seperate files. This left us with header.html, footer.html, and a rather bland page with just our content:

Hi there. You've stumbled across my
homepage. Feel free to look around!
Have fun!!!

We're now going to tell the webserver to include the contents of header.html and footer.html with the above page. To do this, we place a line at the top of the page that tells the server to include header.html, and a line at the end of the page that tells the server to include footer.html. There are two ways to do this nowadays. The first is to use Server Side Includes (SSI) , which is demonstrated as follows:

Hi there. You've stumbled across my
homepage. Feel free to look around!
Have fun!!!

Since we're using SSI, we have to save the file with the .shtml extension to let the webserver know that the page uses SSI to include files. The other way to do this is to use PHP , where including files doesn't differ too much from the SSI method. Here's how to do it using PHP:

<?php include("header.html"); ?>
Hi there. You've stumbled across my
homepage. Feel free to look around!
Have fun!!!
<?php include("footer.html"); ?>

If you use PHP for this you'll need to save each of your pages with the .php extension (or whatever extension your server expects for files containing PHP code -- ask your webmaster if in doubt).

After uploading this page and our header/footer files, taking a look at the page now shows the whole page, complete with the contents of our header and footer files. Now for every page you want the header/footer to appear on just do as we did above. You can also edit your header.html and footer.html and have the changes affect every page on your site. Cool, eh?

If you're having problems getting this to work, try contacting your webhost to make sure they support either SSI or PHP. For more information on SSI and PHP, please consult the following websites:

WEB TEMPLATES (new)

!!!

TUTORIALS (new)

INFORMATION (new)

This site is optimized for 1024/768 screen resolution