Odilon Redon's smiling spider

Including Headers and Footers with SSI.
author: jim.cerny@unh.edu

last modified on August 17, 1999

The most common use of SSI is to include a standard header or footer on a set of pages. This allows you to do several things:

  • To automatically annotate your pages with information that would be tedious and error-prone to supply by hand: the last modification date and the page URL are two common examples.

  • To supply some boilerplate on each page or on many pages, fully integrated with the page, not as a hyperlink.

  • To modularize your pages so that by changing one file for the header and one file for the footer you can change the look and content of the whole set of pages in which those headers and footers are referenced, without editing the set of pages.

An experiment with footers.

What follows is an example of what might be done in the evolution of features in a page footer, starting with a line or two and adding more and more material until you get to the point where it makes sense to include the block of instructions. Each bulleted section consists of three parts: (1) brief description, (2) the HTML code, (3) the result.

  • We start with a last modifed date for the file by using the environment variable LAST_MODIFIED. and use the "config" directive to control the date and time format. Begin and end with a horizontal rule to set it off. 
    <hr size="1">
<!--#config timefmt="%B %d, %Y" -->
last modified <!--#echo var="LAST_MODIFIED" -->
<hr size="1">
    last modified August 17, 1999

  • Now we add the URL for the document. The URL is composed from two environment variables, the SERVER_NAME and the DOCUMENT_URI. We combine them plus the text "http://" to get the full URL. 
    <hr size="1">
http://<!--#echo var="SERVER_NAME" var="DOCUMENT_URI" -->
<br>
<!--#config timefmt="%B %d, %Y" -->
last modified <!--#echo var="LAST_MODIFIED" -->
<hr size="1">
    http://unhinfo.unh.edu/NIS/Courses/SSI/head-foot.html
    last modified August 17, 1999

  • Next we control the text style with inline Cascading Style Sheet code. And we add additonal annotation in the footer consisting of a small graphic and a highlighted return-to link. The CSS style sets the background to aqua to achieve the highlighting and then, to better space the highlighted text relative to other lines, the line height is increased. 
    <hr size="1">
<img src="/Graphics/Campus-Pics/thall.icon.gif"
     alt="T-Hall" align="left">
Return to
<a style="line-height: 18pt; background-color: aqua;"
   href="http://www.unh.edu/NIS/Courses/SSI/">SSI Course page</>.
<div style="font-size: 10pt; font-weight: bold;">
http://<!--#echo var="SERVER_NAME" var="DOCUMENT_URI" -->
<br>
<!--#config timefmt="%B %d, %Y" -->
last modified <!--#echo var="LAST_MODIFIED" -->
</div>
<br clear="left">
<hr size="1">
    T-Hall Return to SSI Course page.
    http://unhinfo.unh.edu/NIS/Courses/SSI/head-foot.html
    last modified August 17, 1999

  • Finally, we've expanded this to the point where it doesn't make sense to repeat these instructions in each file. Instead we can use SSI to direct the server to include the block of HTML where we want it, before it is sent to the browser. The result is seamless, i.e., anyone viewing the source with their browser can't tell whether SSI was used or whether everything was already in the HTML file. This also shows that one SSI directive can be nested within another: the "include" directive is used here to insert a file called bigfoot.html that contains the code and directives used in the previous step of this evolution (view source). 
    <!--#include virtual="bigfoot.html" -->
    T-Hall Return to SSI Course page.
    http://unhinfo.unh.edu/NIS/Courses/SSI/head-foot.html
    last modified August 17, 1999

Wrap-up.

Remember, the use of SSI is server-dependent, not browser dependent. However, as with any HTML code, you ought to test the code used in the header or footer to make sure that it displays as intended with various browsers and systems. Versions of Netscape and MSIE that are 4.x or newer, support basic CSS pretty well.

Return to Courses page.