Using Server Side Includes (SSI)

Server Side Includes are a handy way to repeat identical content across multiple web pages. For example, a page header with a navigation bar may be the same on many web pages.

Using an SSI, you can place the HTML you want repeated in a separate file, and then give the web server instructions to insert it in any web page.

The most important reason to do this is not to save the work of typing. It is to allow you to update all pages at some future date by changing one file. You might have a navigation bar or header image, or example, that you want to update every now and then. Using and "include" file means changing one file changes all the web pages that use it.

The "include" file

In any convenient spot in your web site, create a file with the content of interest. It can have any extension, but if you give it an html extension you may be able to edit it WYSIWYG with web editing software.

Example contents:

<p><img src="http://www.wfu.edu/~matthews/logo.gif" width="600" height="150"></p>

Let me save this in the "includes" directory under my home directory with the filename "logo.html".

Caution: if you are using a WYSIWYG web editor like Dreamweaver, you can create all the content in the Design view, but then you must switch to Code view to delete any other content that Dreamweaver added, such as <head>, <body>, etc.

Including this in another web page

Now you need to refer to this in each web page you create.

Suppose I have a file "index.html" in the "misc" directory of my web site. In that file, I should insert the following HTML where I want the logo to go:

<!--#include virtual="../includes/logo.html" --> 

In the above, I used the relative path to the include file, "logo.html". You may also use an absolute path, if you can figure out what the web server considers the full path to your file. Under Apache, the site home directory is "/".

Special concerns for Wake Forest users

Academic department pages can use absolute paths. For example, the physics home directory is:

"/academics/physics".

There are big advantages to absolute paths. You can cut and paste your above "include" statement from one file to another without regard to the directory you are in. With relative paths, you will need to figure out how to express the relative path. (I always lose count of the "dot-dots".)

Unfortunately, you do not have the option of absolute paths for user pages. The reason is that the university has two versions of all the user page URL's: http://www.wfu.edu/~username and http://users.wfu.edu/username. Depending on which address you use, the file appears to be in a different directory!

This means on user pages, we are stuck with relative paths to our include files. The upside is the our pages are user web sites are more portable.


61,589