Articles – Server Side Includes

Server Side Includes (SSI)

This article uses the old Informaticans website ( as the example. That link will bring you back to the new site over here @ RssITZONE.

This is a simple method I am using on Informaticans to make my life easy when updating is required. Server Side Includes, simply put it, embed a file into a shtml file. That embedded file can say, be a content menu that will need to be displayed on every single page of the whole site (as in Informaticans case). You will just need to update that content menu file and the changes will be done all across the site! Something like Cascading Style Sheet, a single change in the .css file, all the formatting on all pages that has the embedding codes will be changed according.

On Informaticans main page, you should see the following screen shot, don’t worry if it look a little different as we may be viewing the page on a different resolution.

But on my PC where I edit the codes, the preview looks like this:

I’ve marked out places where SSI is used using a rough red lining in the above figure. There’s actually one more at the bottom of the page where the counter and copyright text are embedded.

There are actually 6 files that are embedded on the main pages are actually

1. top_contents.shtml

2. news.shtml

3. quicklink.shtml

4. tellafriend.shtml

5. brainfood.shtml

6. bottom_copyright.shtml

As you can see, the initial work can be quite a lot depending on how many pages you have already create. Informaticans had about 50 pages that I need to edit by adding in SSI codes! So it is, as always, to plan ahead on what you want on the site and how to go about doing it.

Simply, you will need to place the following code on places you want the relevant embedded shtml page to be displayed.

You can also use:

The difference:

Using #include virtual – When the file you want to embed’s path is in relative to your do*censored*ent root directory. Informaticans is using this as I just have to point all the files using

Notice the “/”/ at the very start of the “”. This will tell the server to go to my server’s root directory (/), then “informaticans” (/informaticans), then “ssi” (/informaticans/ssi). All the files that need to be embedded are save in this directory but you have do it your way like saving all the files to be embedded with it’s relevant shtml file.

Using #include file – Use this when the file you want to embed is in the same directory as your SSI file (the file that is to be embedded).

There, easy huh?! Also beware, SSI does load the pages slower as the server will look for al lthe directives, process it, p*censored* it to the shtml file and then display it, causing the page to load slower in the whole process.

If you want more info on how to enable SSI on your server, and the like, head to Bignosebird, they have a really good article on Server Side Includes.

All the files can be downloaded here. I’ve kept a copy of Informaticans main page here too but the graphics and links will/may not load, they are deleted.

– Contributed by etegration
6 June 2001


Sidebar Block

* Function Not Configured *