Server Side Includes
It can make your page dynamic. It can help keep your page updated with the latest information. A CGI program can insert custom HTML code into your page.
This magic thing is called Server Side Includes, also known as "SSI".
"Includes" because SSI includes stuff on your page, at the spot you tell it to.
"Server Side" because SSI is taken care of at the server (rather than at the browser). As the server is sending your page to your visitor's browser, it scans your page for special tags that tell it what you want included in those spots. Whenever it finds such a spot, the server includes what you want.
Wherever you have the same code on many pages (such as navigation bars, subscription forms, bottom-of-page links), use SSI and you'll only need to change one file to change every page that it's used on.
Wherever you need freshly updated information every time a page loads, use SSI.
It's simple.
So why isn't everybody using it? Because it takes a few nanoseconds of time for the server to scan the page and include the material. And because not everybody knows how to use the tags.
Most hosting companies allow their accounts to use SSI. A common requirement is the .shtml file extension for SSI pages. This is because it does take a tiny bit of time and server resources to scan the page and include material. It is assumed that you'll only use the .shtml extension for SSI pages and use .html and .htm for the others.
If you don't know whether or not you can use SSI on your server, do a test.
Make two files. Name the first file mytest.shtml and the second file myssi.txt
The content of the mytest.shtml is:
<html><body>It goes here. <!--#include file="myssi.txt"--> </body></html>
The content of the myssi.txt is:
<font size="+2"> <b>Here I am!</b> </font>
Upload those two files to your server and put the URL of mytest.html into your browser. If you see the words "It goes here. Here I am!", then you can use SSI on your server.
Notice how the SSI tag is within HTML comment tags. Some servers will work with a space after the "<!--" comment begin characters or a space before the "-->" comment end characters. But some servers will produce an error message when you do that. Example:
<!-- #include _________ -->
might work on some servers, but not on all. To be certain, do it like this:
<!--#include _________-->
Here is some of what you can do with SSI:
- The tag: <!--#include file="__________"-->
Replace the underscore with the file name you want included. The file name can just about anything you want (.txt and .html file extensions are common), but it must be text. It can be plain text, HTML code, JavaScript, and anything else composed of text. However, do not use binary files such as images or sound files.
The file you include can have HTML code for images and sound files, but you just can't put the image/sound file name directly into the SSI tag itself.
The file must reside in the same directory as your .shtml page.
- The tag: <!--#include virtual="__________"-->
Same as file="__________" except your include file may be in different directory. The file name, in this case, is a virtual file name.
Examples:
"../filename.txt" specifies a file one directory lower.
"nextdir/filename.txt" specifies a file in the nextdir directory from where your .shtml file is at.
- The tag: <!--#exec cgi="__________"-->
Replace the underscore with the CGI program's file name. The file name may be a virtual file name, but it cannot be a http://... URL.
The CGI program must return text, but that text can be JavaScript or HTML tags for images and/or sounds or anything else that browsers understand.
With those three simple SSI tags, you can have one central file for any code you may want to repeat from page to page.
And you can display the output of CGI programs; including counters, banners, live news/weather information retrieved from remote sites, your current "latest news", a count of members, the visitor's IP address, the last page the visitor visited if s/he arrived via a link -- pretty much anything a CGI program can do.
Here is an extreme example:
<html>
<body bgcolor="FFFFFF">
<!--#include file="topnavbar.html"-->
<table><tr><td>
<!--#include file="sidenavbar.html"-->
</td><td>
The weather in Italy is:
<!--#exec cgi="italyweather.cgi"-->
<p>Current stock prices are
<table border="1" cellpadding="9"><tr><td>
<!--#exec cgi="stockprices.cgi"-->
</td></tr></table>
<p>Your IP address is:
<!--#exec cgi="your_ip_address.cgi"-->
<p>Subscribe to our awesome newsletter!
<!--#include file="subform.html"-->
Click here for a random link:
<!--#exec cgi="randomurl.cgi"-->
<p>You are the <!--#exec cgi="counter.cgi"--> visitor!
</td></tr></table>
<!--#include file="bottomstuff.html"-->
</body>
</html>
With all those file and CGI program accesses, the above example page would take some seconds to load. But as a demonstration, you can see for yourself that there is much room for creative implementation.
Will Bontrager
