Basic HTML Tags and Coding

Using Server Side Includes (SSI)

One of the really cool features of modern web servers is Server Side Includes, or SSI. Server Side Includes allow you to use shortcuts for things that might otherwise be very hard to do in a basic web page.

For example, with SSI, you can create templates that allow you to create the look and feel of your web site once, then change just the little details that differentiate one page from another, they allow you to include CGI snippets in an otherwise static web page, they allow you to access your web server's environment variables from within your web page, and they allow you to show when you last updated your web page. SSI also does many more things; these are just a few of the more common examples.

Note: I am more familiar with Apache than IIS, iPlanet, or other web servers. While I am pretty sure that these includes are pretty much universal, I am not positive of that, so I take no responsibility if these examples don't work on your server :P

Note 2: To use SSI, you must have your Apache server built with mod_SSI (or relevant parser for non-Apache web servers). Installing and configuring mod_SSI is beyond the scope of this document (for now), so I am going to assume that mod_SSI or equivalent is already installed and configured.

Getting Started

SSI is basically an extension to HTML, and therefore like tags in standard HTML, SSI directives are enclosed in angle brackets (<>). However, SSI directives look a lot like HTML comments. The basic form of an SSI tag in an HTML document is  .

One of the most basic--and also most useful--SSI directives is "include" . This directive tells the web server to include another web document into the HTML. This is very useful for creating web sites with a consistent look and feel. While Cascading Style Sheets (howto coming soon :) also allow this, to some extent, allows you to create the moral equivalent of C functions or perl subroutines for your web pages. For example, suppose you want to create a copyright notice across the bottom of all of the pages in your web site. While you could rewrite the copyright notice on every single page, it is a lot more efficient to write it once, and insert it into all of the pages on your web site. This also makes it easier to update the copyright notice when it becomes necessary--it's much easier to modify one document than several documents, right?

Here's how you do it. First, create your document that will contain the copyright notice. You can include as much HTML (it is simply an HTML document, after all) as you like--I generally include all of the code that is relevant to my copyright notice, like so:

                    <tr>
                      <td align="center">
                        <font face="helvetica"e; size="small">
                          ©blahblahblah
                        </font>
                      </td>
                    </tr>

...and save it in a file called "copyright.inc" You can call it anything you like, but I like to name my includes .inc just so I can recognize them. Save your main documents with a .shtml or .shtm extension. While this can be altered from within your web server configuration file (httpd.conf for Apache), these are the standard extensions for web pages with Server Side Includes, and there really isn't any good reason to use different extensions.

Within your main document, you will need to include the code to call your .inc file, like this:

                        ...
                          </tr>
                          <!--#include virtual="copyright.inc"-->
                        </table>
                      </body>
                    </html>

and that's it--include the line with the "#include" statement in your web pages, and all of your pages will contain the same copyright notice. If you need to change the text or formatting or whatever in your copyright, you change it in the file copyright.inc, rather than in each web page.

What's really cool, is you are not limited to calling text (HTML) documents with your include. Suppose you have a web site that uses SSI now to get that consistent look and feel, but on one of your pages, you want to include some dynamically generated information--like the results of a database query, returned from a CGI script. As long as your CGI doesn't need to accept any parameters from the calling web page, you can embed your CGI in an SSI, using the same format as above. This is often used to create hit counters, only in this case, the SSI directive would look like this:

                    <!--#include virtual="/cgi-bin/Counter.pl"-->

I created a web page where I needed to query a list of customers from a CGI. Since the most of the web page was static content, and didn't really need to be run from a perl script, it made sense to me to write a static HTML page that created the formatting for the results, then write a really short perl CGI script that actually queried the database, and include it in the static page with an SSI. The result was a lot less coding, and a perl script that was much easier to read, since it didn't have nearly as much HTML embedded in it. Be aware, however, that this technique only works if you don't need to pass parameters to the CGI--the database query in this example always retrieves all of the customers. When embedding a perl CGI in an SSI, you cannot pass CGI parameters to the script!

Another application for SSI is for notating the "last modified" date on your static web pages. This is done with the echo SSI directive like this:

                     <!--#config timefmt="%a, %b %d, %Y %T %Z"-->
                     Last Modified:
                     <!--#echo var="LAST_MODIFIED"->-

The config directive sets the formatting for the time stamp, and the echo directive writes the web server environment variable "LAST_MODIFIED" to the web page. Here is what the various formatting codes mean in the config directive:

%a	Short Day of the Week	Mon, Tue, Wed, Thu, etc.
%A	Long Day of the Week	Monday, Tuesday, Wednesday, etc.
%b or %h	Short Month	Jan, Feb, Mar, etc.
%B	Long Month	January, February, etc.
%d	2-digit Day	01, 02, 10, 11, etc.
%e	1- or 2-digit Day (as appropriate)	1, 2, 10, 20, etc.
%y	2-digit Year	70, 88 04
%Y	4-digit Year	1970, 1988, 2004
%r	12-hour Time	06:30:14 AM, 10:30:01 PM
%T	24-hour Time	06:30:14, 22:30:01

© 2004 Michael Wallette/gecko-ak.org
Please feel free to use, print, copy or share the text of this page as you like, but please do not publish it on any web pages without the author's permission--please link to this page instead. All images on this server are copyrighted and may not be reproduced without permission.