Server Side Includes - called SSIs for short - are a server technology that lets you build your Web pages through a series of reusable components. And it's easier to do than you might think.

To understand the value of SSIs, we first have to review the problem. Suppose that you build a Web site for your company totaling something like 30 pages. You build all the pages following a basic template like the one shown here.

This page has a masthead with your company logo, a left navigation bar, a content section, and a page footer with copyright and other information. The content section is the only part that really changes between pages on the site; all other elements are the same on all pages.

Now after you've built your site like this, your boss tells you he wants to change the order of the links on your navigation bar. He'd like link #3 to be first in the list, and link #2 to be last.

Great! Now you have to edit all 30 pages in your site and change the navigation section on each page. Wouldn't it be easier if your site used a single copy of the navigation bar that was somehow tied to all your pages? Then you could change the navigation links for the whole site by editing a single file.

That's the idea behind SSIs. You can use them to make elements that are common to all your pages exist in a single, shared file.

For example, take a look at our basic page again. Though it may not look like it, this page was actually built using five separate pages. The pages are:

· The masthead, showing the corporate logo.

· The left navigation bar.

· The content section.

· The page footer.

The fifth page is our basic page itself. This page includes four SSI statements that tell the Web server to include the other pages inside this page.

The syntax for building an SSI is simple. You can insert a file inside another file using a statement like this:

<!--#include virtual="other_page.htm" -->

This directs the server to look for a separate file called "other_page.htm" in the same directory as the page basic_page.shtml and insert it into the latter page.

The syntax of the SSI consists of a normal HTML comment, followed immediately by the statement "#include" (Be careful with this syntax: any extra white space in this first part of the statement can cause your SSI not to work.). There are actually several different types of SSI commands besides "#include," but include statements like this one are by far the most useful.

The third part of the SSI is the attribute "virtual" followed by the name of the file we want to include. The term "virtual" means that we will specify the location of the included file exactly the same way as if we were creating a hypertext link between the pages. So since both the parent file and the included file are in the same directory, we can include other_page.htm just by specifying its name.

The last part of the SSI is the closing part of the HTML comment.

Notice something interesting about our basic page. Try looking at the source code of the page. You can do this by using the View - Source option on your browser, or click here to view the source code as it's seen by your browser.

Notice that you don't see the SSI statements. That's because SSI is a server-side technology that leaves no fingerprints in the resulting Web page. When the Web server gets a request for a page containing SSIs, it scans every line of the HTML source for SSI statements. When it finds one, it inserts the included file into the HTML source, removing the SSI statement in the process.

To see the source code of our basic page as it really resides on the Web server, click here.

This shows you what the file looks like before server parsing.

Server parsing is an important point to remember about SSIs. If you build a page using SSIs on your desktop computer, the SSI statements won't work. You won't see the results of your SSI until you upload the pages to your Web server.

Even then you probably won't see the result of the SSI. Like CGI scripts, SSIs require some special server configuration before they are enabled. You may need to contact your ISP or Web hosting service and let them know that you'd like to use SSIs in your site.

One final thing to notice about our parent page basic_page.shtml: notice that the file extension is .shtml, and not the usual .htm or html. That file extension tells the Web server that this file includes SSIs. It's a signal to the Web server that it needs to scan the file for SSI statements.

You don't see many files on the Web using this extension. Does that mean that not many people are using SSIs? Not really, since you can configure the Web server to look for SSIs in any type of file. These hidden SSIs give you the benefit of SSIs without the slight security risk you might have with standard SSI specifications.