Using Server Side Includes

Using Server Side Includes

Web Design

Easy Site Maintenance with Server Side Includes (SSI)

A well-designed web site is also easy to maintain. If you’ve ever done a site redesign for a medium to large web site you know what a headache it is to recode every page. Adding even a simple navigation link to 50+ pages is tedious.

And error prone!

But there is a technology that allows you to keep common page elements like your logo or navigation bar in separate HTML files.

You make changes to a single file and you have updated your entire site!

I’m talking about Server Side Includes (SSI), which allow you literally to include one HTML document inside another:

You place an SSI command, called a directive, on a page where you want to insert the text.
When a page is requested, the server replaces the SSI directive with the file and sends the output to the browser.

You can use SSI to include your logo, your left, top and bottom navigation bars, a copyright notice or any other information you want to appear on every page of your site.

Very cool, and good design as well.

Let’s take a look at a simple example to add a copyright notice to your web pages.

First, create the copyright notice in a file called “copyright.html”.

Copyright 2003 MyCompany, Inc.

Now add the following line at the bottom of every page where you want the copyright notice to appear:

That’s it!

Now if you want to update the copyright with the current year, or add an email address, you only have to update one file.

A very efficient use of your very valuable time!

How can you add SSI to your existing website?

The easiest way is to cut and paste the information that appears on all of your pages and save it in separate files.

You can use “html” or “txt” as the file extension, but remember to use descriptive names like “topnavbar” or “copyright” so you will remember
what each file contains when it is time for the next global update.

Add the appropriate include command on each page and you’re done.

If your includes are in the root directory, the code looks like this:

If you decide to store your includes in another directory you will need to add the path name before the file name:

Before including SSI, check with your web host to be sure it supports SSI (most do).

Some web hosts may require that you use .shtml or .shtm as your file extensions, but not all do.

If your web host doesn’t support SSI you might want to find one that does.

It’s that valuable.

If you want to learn more, there are lots of good SSI tutorials on the web. Here is one of my favorites:

Using server-side includes