Easy Site Maintenance with Server Side Includes (SSI)
© Jim Philips
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
- 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".
<p>Copyright 2003 MyCompany, Inc.</p>
- Now add the following line at the bottom of every page where you want the copyright
notice to appear:
<!--#include file="copyright.html" -->
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:
<!--#include virtual="topnavbar.html" -->
If you decide to store your includes in another directory you will need to add the path
name before the file name:
<!--#include virtual="/includes/topnavbar.html" -->
Before including SSI, check with your web host to be sure it supports SSI
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 are a few
of my favorites:
Big Nose Bird:
Implementing SSI on an existing site takes time but once you've done it you'll see the
rewards of easier site maintenance immediately.
And it is something you'll want to remember for future designs as well.
About the Author
Fresh, New, Master Reprint Right Products 'SHHH' free! Just visit: http://www.viralnews.com . Also, feel free to
republish this article in your own ezine or web site.
Subscribe to our newsletter:
Your Email address:
given away to anybody. You can unsubscribe at any time.