Web Design
Server Side Includes
Beginners Level
SSI Demo
A simple Server Side Include Demonstration (How to include the contents of a seperate file into all your web pages)
This simple demonstration shows how to create a 'menu.txt' file and
include it into your web page(s).
This page assumes you have tested your web server and that SSI is enabled.
There are links to [Notes*] in relevant places in this HowTo document that
further explain what is meant by a certain term or why I have gone about it but is NOT essential to
this tutorial.
These Notes are in a seperate page called 'ssidemonotes.shtml' so you might
like to read them as you go or all at the same time at the end of the tutorial.
Clicking on each note will take you away from this page so use your back button
to return to this tutorial or right-click on the link and select 'Open in new
window' if you prefer.
Using SSI I use the <!--#include virtual=" "--> command to incorporate
the main body of the menu.
Section 1 - Create your external text file. (menu.txt or menu.ssi)
1. Create a new 'menu.txt' file or whatever you want to call it. [ Note1 ]
2. Write in or paste your code for the Menu. I have done it as a text file so as not to confuse the fact you don't want <Head> or <Body> Tags created - just the menu code.
3. Save your menu.txt file. For this example I placed it in site root and I recommend you do the same.[ Note2 ]
Section 2 - Editing or Creating your Web Page that will make use of the external file (menu.txt)4. In the web page that you want to include your menu (menu.txt) type this
in the appropriate place:-
(appropriate would be where you want your menu to be!)
<!--#include virtual="menu.txt" -->
5. Save this web page as a .shtml file type [ Note3 ] and not the usual .html (or .shtm instead of .htm)
6. That should work once both files are uploaded to your (SSI enabled) web
space.
If the file is placed other than site root then alter the above statement to
reflect this. [ Note4 ]
7. Repeat Section 2 (Steps 4 - 6) for any other web page that you want to use the menu.txt with.
Having difficulty getting the above example to work?
There is a simple test to determine whether your web space is SSI enabled,
click on [ssitest] from the left navigation.
One further point, you may notice that every page on this site has identical information in the left and right columns of the page. The left column containing the navigation menu and the right column containing site news and other information. These are created using the method described above. I have one .ssi page for the navigation and another one .ssi file for the right side information. Thats just one page to change when altering or replacing the left navigation and the same for the right side info - the changes are then reflected immediatly across all pages on the site. This is a prime example of why Server Side Includes are so widely used today, so wherever you have a lot of repeated coding in your site, use an SSI instead.
If you now wish to read the notes go to the 'ssidemotes.shtml' page.
