ITS Home at The University of West Georgia

Log On

Using "Server-Side Includes" with your Website

Note: This feature is NOT compatible with the student web server!

Here's the basics on how Server Side Includes work. Let's say that you have a section of code on your site that is repeated on every page or your site. Like the menu bar below.

[ myLink1 ] [ myLink2 ] [ myLink3 ] [ myLink4 ]

Everything is fine, but as your site grows to include more pages and you decide to add a few more links and then you start changing the order you'll have to edit each individual file. You are now spending a lot of time editing a trivial part of your site. So what do you do about it?

Think of SSI as little shortcuts for your site code. Sound confusing? Don't worry I'll explain. Let's look at the following code:

    <HTML>
    <HEAD>
    <TITLE>My little piece of the web</TITLE>
    </HEAD>
    <BODY BGCOLOR="green" TEXT="black" LINK="white">
    <H1>My little piece of the web</H1>
    <BR>
    <TABLE BORDER="1" ALIGN="left"><TR>
    <TD BGCOLOR="#cccccc" VALIGN="middle" ALIGN="top">
    [ <A HREF="myLink1.html">myLink1</A> ]
    [ <A HREF="myLink2.html">myLink2</A> ]
    [ <A HREF="myLink3.html">myLink3</A> ]
    [ <A HREF="myLink4.html">myLink4</A> ]
    </TD></TR></TABLE>
    <BR><BR>
    Page one text. Page one text. Page one text. Page one text. Page one text. Page one text. Page one text. Page one text. Page one text.
    </BODY>
    </HTML>


This is an example of a basic webpage. Now what if you decided to add a new link to the menu. Now you would have change that little piece of code on each and every page. SSI will let you do it much easier!

Probably the most annoying part is the first step. You'll need to change the extension of your pages to .shtml or .shtm. This is how the server recognizes which pages to parse. Now that we have this out of the way lets begin. The following code is the same site from above, but now with a little touch of SSI.

    <HTML>
    <HEAD>
    <TITLE>My little piece of the web</TITLE>
    </HEAD>
    <BODY BGCOLOR="green" TEXT="black" LINK="white">
    <H1>My little piece of the web</H1>
    <BR>
    <!--#include virtual="menu.shtml"-->
    <BR><BR>
    Page one text. Page one text. Page one text. Page one text. Page one text. Page one text. Page one text. Page one text. Page one text.
    </BODY>
    </HTML>


What's this code do? Well, it instructs the server to "include" the referenced file into your webpage. And because your pages have the extension "shtml" or "shtm", the server knows to "parse" the file and look for these instructions.

The follwing code is what might be included in menu.shtml.

    <TABLE BORDER="1" ALIGN="left"><TR>
    <TD BGCOLOR="#cccccc" VALIGN="middle" ALIGN="top">
    [ <A HREF="myLink1.shtml">myLink1</A> ]
    [ <A HREF="myLink2.shtml">myLink2</A> ]
    [ <A HREF="myLink3.shtml">myLink3</A> ]
    [ <A HREF="myLink4.shtml">myLink4</A> ]
    </TD></TR></TABLE>


Ok so you still have to put the include on each and every page you wish to have the menu, BUT, when the time comes to change the menu, you only have to change "menu.shtml".

Now let's learn a litle more about the tags.

Think of the following tag as a link. Just like a link you can point it to any page you want. Please remember that all pages on your site must become .shtml instead of .html. You would be surprised at how many people forget that.

    <!--#include virtual="menu.shtml"-->


You only need to change what's in red. It works just like a link. You can replace almost any part of your site with this tag. Be creative. Below are a few more tags that are helpful.

    <!--#echo var="LAST_MODIFIED" -->


This tag produces the following result.


That tag shows the last time this page was modified. This is great for people who want to show that their site is fresh.

    <!--#echo var="DATE_LOCAL" -->


This tag produces the following result.


That tag shows the current date and time.

There are many other tags that you can use on your site. Below is a link to a great SSI site. There is a catch to using SSI at UWG; you can not execute files or anything else that would be a security risk. But for helping make your site easier to update, there is nothing better.

The Server Side Includes Tutorial - Great site for learning more about SSI.