Server Side Includes - Server Side Includes Tutorial

If you have content that shows on every page of your website OR on many pages of your site, you might want to consider using Server Side Includes (SSI.) SSI's allow you to make a change in one page and have it update on all the pages where it is included. One of the disadvantages/inconveniences of SSI's is that you can NOT see them when you are working on your computer. The SSI directive in your page tells the server to follow the instructions and merge the called file into your document before it is viewed in the browser.

NOTE: This site uses includes BUT they are FrontPage includes rather than SSI. The advantage, I can see them while I am working on them. The disadvantage  is that because I have chosen not to install FrontPage Server Extensions on this site,  I need to upload all changed pages when I make a change in one of the includes. Not a problem for me. The  RootsWeb servers including the FreePages server does NOT support FrontPage Server Extensions. With SSI's, you only have to upload the changed page you are including.

The top menu on this page is a frontpage include, and it is automatically inserted in any page I want to use it. Same would be true with SSI's.

Using SSI

Create the page you want to include as a plain text document including any formatting you might want as part of it. Since I use an external cascading style sheet (css) I use classes and id's in formatting.

Screenshot of left-menu.txt

Place your cursor at the place in your html document where you want the file to be included. Insert the following code changing the file name to what you have named your file.

<!--#include virtual="left-menu.txt" -->

This code works ONLY when the file you are including is located at the same level as the file it is being included in. If you were to put all of your includes in a folder named _includes (which I do) then the code would be -

<!--#include virtual="_includes/left-menu.txt" -->

If the page you want to insert the include in is down one or two levels (folders) then you would need to add ../ for each level.

It often becomes a problem when you decide to use Server Side Include (SSI) for adding navigation menus etc. to your pages. Without the use of a Virtual Server on your own computer, you are left in the dark as to what your navigation actually looks like when checking through your pages. NOTE: I would like to thank Barry Carlson of the FreePages list for coming up with this solution.

There is a simple way of showing the #include information locally and without affecting the coding on the pages loaded to the server, e.g.

<div id ="topmenu">
<!--#include file="topmenu.txt" -->
<script type="text/javascript" src="topmenu.js"></script>
</div>

To make this possible, open your file e.g. "topmenu.txt" in your editor, highlight and copy into

HTML to JavaScript Convertor

 Click the 'Convert to Javascript' button, then Copy & Paste the result into a new text editor page and save as e.g. topmenu.js into the same Folder/Directory as 'topmenu.txt. Before saving, edit out anything before <!-- and after //-->.

Just add the javascript link as in the example above to each of your pages, and lo and behold, you will have your pretty navigation showing locally.

Don't load the javascript file to the server, and all the server will do is serve the <!--#include text file. The javascript file is not there and no one will know any difference (if it's there, you'll get two helpings of the menu!).

Examples of Server Side Includes SSI (The example site uses the above javascript solution so that I can now view the includes on my local computer.

Additional Resources

CSS Layout Templates (includes Server Side Includes)