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.
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" -->
To make this possible, open your file e.g. "topmenu.txt" in your editor, highlight and copy into
- Elsi's FreePages SSI General Info
- Elsi's SSI Examples
- SSI Commands
- HTML Goodies
- Google's Search Results for Server Side Includes
- Lorrie Laskey's Server Side Includes