TechTutorials - Free Computer Tutorials  

Server Side Includes (SSI) 

Added: 05/09/2002, Hits: 3,004, Rating: 0, Comments: 0, Votes: 0
Add To Favorites | Comment on this article
I was recently doing some contract work on a company's web site and discovered something very irritating. Their site has about 25 pages and they are not using SSI. I would venture that even the most junior webmasters know when to utilize server side includes (SSI) and would not want to modify 25 pages every time a static element on the pages changes.

If you are not familiar with SSI, it provides a way to create templates for static elements of your web pages, in other words, elements that are the same across all of your pages such as menus, sidebars, etc. This is really only necessary on web sites that just use HTML. If you are using PHP or some other programming language, implementing a template system is done in a different but similar manner.

The first thing you must do to get started, is have SSI enabled on your web server. If you do not know how to do this, ask your web hosting company's support department to do it for you. The most common method for implementing SSI is to create a header.html file and footer.html file. As you have probably figured out, the header file contains the HTML code for the top portion of the site and the footer contains the bottom.

Then we just include the header and footer files in our HTML documents which will need to be given a .shtml extension instead of .html in most cases.

Let's say we are creating the homepage for the site. Including your templates will look a little like this:

Code :



<!--#include virtual="/pathtoincludes/header.html" -->

This is my homepage.. Here is the body of my page..

<!--#include virtual="/pathtoincludes/footer.html" -->

We would then save this file as index.shtml. We repeat this process for all of the pages on the site. Now, if we need to make any changes to our left menu, for example, we simply edit the header.html file and it will change on all of the pages in the site. In fact, if we wanted to completely redesign the site, in most cases we could simply replace the header and footer files.

A couple of things to notice in my example above.. Notice that we left the title, metatags, etc., out of the header.html file. While you can add these to your include file, it is best not to for search engine friendliness. This way you can customize the metatags for each individual page.

Notice there is no /head tag showing. I usually put this in my header.html file. This way, if there is javascript code that must go between the head tags on all pages, I can just add it to the header.html file before the /head tag. If it only goes on 1 or some of the pages, I still have the flexibility to add it to those pages before the include statement.

The path to your include files should be from the root of the web site (virtual server), not the server path. So if your site is called and you have a folder called includes, the path would look something like:

You do not have to name your files header and footer. You can call them what ever you want as long as you reference them correctly in your include statement.

You can include more than 2 files, although, the more you include the more your site's performance will suffer under heavy traffic.

SSI is a very simple way to save yourself a lot of time down the road. It is very easy to work with and you should have no problems getting started using this method for your sites.

Comments (0)

Be the first to comment on this article

Related Items

7 Seconds Resources, Inc.

IT Showcase