Introduction To SSI – Server Side Includes
SSI stands for Server Side Includes. In it’s simple form, it means that you can put a tag in your HTML pages that will be replaced by the file that you specify. This is extremely useful and I strongly urge you, whether you are a beginner or advanced designer, to use it. It will save you many hours work later.
The most popular use is to create header and footer files for your site that will contain all of the information that is pretty much standard across all of your pages. Therefore, you don’t need to go through every page on your site to add something or change the design of your site, you just change a couple of files and it’s done. We use it across this site – only the text that you are now reading is actually created for this page. Everything to the left, above and below is pulled from two HTML files that contain all of the information that we use on every page. Therefore, if we re-design the site we just change these two files and our whole site is updated immediately – the whole design can change with a few minutes work even if we have 10 000 pages.
How To Use SSI
So, how do you use it? The easiest way I have found is to design a template for your pages in your editor of choice. You then decide which parts of this page will be standard across your whole site – this will generally be the top bit (your header) and the bottom bit (your footer). If you have a menu down the left (or ads like we have) this could be an extra file – only if the menu needs to be different on different parts of your site. We include the left column as part of our header because it doesn’t change.
You then copy the HTML for these sections to new files called header.html, footer.html and possibly left.html (or whatever you want to call them). Then, in the original page you have created, replace the HTML you just removed with this – <!–#include virtual=”/header.html” –> for the header, <!–#include virtual=”/footer.html” –> for the footer and <!–#include virtual=”/left.html” –> for the left column (if required). Note that you need to call the files from the correct place – if you have put them in your root directory (where your main page is) then what we have here is correct. If you set up a new directory for them, you will need to reflect this.
Extensions And Hosting
Now, the original page that you have created will generally need to be saved with a .shtml extension. Generally speaking most hosting companies will set your site up so SSI only works on pages with the .shtml extension. It is possible to make it work on .htm or .html pages but for simplicity, it’s best just to go with what your server has already been configured for. Upload the files to your server, look at the original page that you created in your browser and it should look the way you want. If it doesn’t check that the paths to the SSI files that you have called are correct or contact your hosting company to make sure that you can use SSI (if you cant, find a new hosting company).
It is important to note that you probably can’t use SSI on pages generated by a CGI script – unless the script can generate pages with a .shtml extension. You are, however, able to Include the output of a cgi script in your pages. In fact, you can Include pretty much anything on your site in your HTML pages. You may, on some servers, need to use #include exec rather than #include virtual – this depends on your server. Contact your administrator to find out.
One Last Tip On SSI
One last tip on SSI. You can Include files within an Include file. This means that, using the above example, you could have <!–#include virtual=”/anotherfile.html” –> within the header.html file. It is important to note that you still need to follow your servers “rules” so you may need to change header.html to header.shtml. The most common example of doing this is what occurs on this site – we Include our ad script within our header and footer files. So within header.shtml we have <!–#include virtual=”/cgi-bin/centralad/ssirand.cgi.html” –> which generates the ads within the header file that we Include in this page.
There are other uses for SSI – you can include dates, browser info, referrers and so on but what I have described is a good start and will save you a lot of time.