CWC index .
last modified 27 March, 2007
___ / _/ | \,^%--- |_____| <_ \ Fear not. It's quite simple.... --- == >/ [_____] __>,^ ejm | | //| |
Warning! I am not an expert in Server Side Includes (SSI). But the following instructions do work and will get you started.
These nifty directives can shave hours off of the edit-time for your site. You can create one or two files and call them up to display the same things on several pages. This is particularly useful for headers, navigation bars and footers for your site. Whenever a change needs to be made, only a few files need be altered, rather than every file on the site.
Before proceeding, check to make sure that your webhost supports server side includes. Happily, Crosswinds does support them for both .html and .shtml pages. (Crosswinds also supports SSI for .php but for this tutorial, only SSI for .html and .shtml will be addressed.)
structure | config errmsg | echo var | include variables | include virtual | htaccess | customize 404
SSIs are texts that are placed in the HTML coding.
To call them, use the following syntax:
<!--#config errmsg="[...]" --> <!--#echo var="[...]" --> <!--#include virtual="[...]" -->
There is a standard error message that is sent (the following is not an actual error):
[an error occurred while processing this directive]
Let's say you wish to display a different message such as "oh oh... an error occurred somewhere in the SSI". Here is the coding using SSI's config errmsg that will produce a customized error message. Place it at the top of the HTML coding.
<!--#config errmsg="oh oh... an error occurred somewhere in the SSI" -->
However, if all goes well, you will never see the error message.
Let's say that you want to show the current time and date on a page (DATE_LOCAL shows the time in the computer's timezone and DATE_GMT shows in Greenwich Meantime.):
18:06:53 (EDT), Wednesday, 22 March, 2017
Here is the coding using SSI's echo:
<!--#config timefmt="%T (%Z), %A, %e %B, %Y" --> <!--#echo var="DATE_LOCAL" -->
Here are some of the variables: SERVER_NAME your domain name (eg: crosswinds-cadre.net) DOCUMENT_URI virtual path to file being viewed (eg: /tutorials/ssi.html DATE_LOCAL today's date and local time zone LAST_MODIFIED last modification date of file being viewed. DATE_GMT today's date, Greenwich Mean Time DATE_GMT today's date, Greenwich Mean Time date variables: %a abbreviated weekday name %A full weekday name %B full month name %e day of month: 1 to 31 %H hour: 00 to 23 %m month: 01 to 12 %M minute: 00 to 59 %R 24hour time: (%H:%M) %S second: 00 to 59 %T 24hour time with seconds (%H:%M:%S) %Y year (4 digits) %Z timezone
Now let's say that you want to show your logo, sitename and a link to your homepage on all of your pages.
Using a text editor, create a file that has the following coding (obviously, you will use your own logo, website name and style):
<div style="background:#fff;color:#00c; text-align:center; border:3px outset #fff;"> <p><img src="images/generic_logo.gif" width="120" height="50" alt="Website Name Logo" /></p> <h2>Website Name</h2> <p><a href="/" title="Website Name Homepage">homepage</a></p> </div>
Save it as myheader.txt and upload the file to a folder named globalfiles in your directory. (Why the file extension
.txt? This is so that the server won't be slowed down looking at the include file to see if there are any SSIs. Read more about this.)
For any .html or .shtml file on your site that you wish to show the header, simply type the following SSI that employs include virtual into the coding:
<!--#include virtual="/globalfiles/myheader.txt" -->
Some of the includes may include links to various folders on your site. In order that the links work, here is the suggested HTML for two links and an image that might be placed in an include file. Note that there is a forward slash / after href=" and src=". This will cause the link to work no matter what folder houses the .html or .shtml page containing the include virtual.
<p style="text-align:center; border:1px inset #fff; padding:5px;"> <a href="/folderA/fileA.html">fileA in folderA</a> : <a href="/fileB.html">fileB in main folder</a> : <img src="/folderC/fileC.gif" alt="fileC image that is in folderC" /> </p>
SSI's include virtual is particularly useful for headers, menus and footers for your site. Whenever a global change is required, only a few files need be changed, rather than every file on the site.
You may not want people or robots to be able to view the files in your global folder. You can prevent indexing of the folder by creating an htaccess file. Open your text editor and copy and paste the following:
Options All -Indexes
Save the file as
.htaccess and upload it via ASCII to your global folder.
SSI is also very useful for 404 pages. On occasion, there may be "not found" files that occur from misdirected links to your site. Perhaps you have moved some files or someone has mistyped a file name in a link to your site. You can create a page using the style of your site. Adding a little more useful information can be helpful as well.
Whatever it is you are looking for at http://yourdomainname/notfoundfilename does not exist on this site. Please check for typo(s) and/or browse through the menu on yourdomainname's homepage
To produce the above on a 404 not found page that uses the style of your site, use the following coding:
<p>Whatever it is you are looking for at <strong>http://<!--#echo var="SERVER_NAME" --><!--#echo var="REQUEST_URI" --></strong> does not exist on this site. Please check for typo(s) and/or browse through the menu on <!--#echo var="SERVER_NAME" -->'s <a href="/">homepage</a></p>
Save it as 404.shtml and place the file in your root folder.
see more on customizing error pages (400, 401, 403, 500)
I hope all that helps you!
\_,^^%--- <\_ \ See? It's easy when you know how.... > >^^ /| ejm | \
For more detailed and much better instructions, please go to What is this thing called SSI?, Apache Tutorial: Introduction to Server Side Includes, Indiana University: Server Side Includes Tutorial or wikipedia: Server Side Includes.
© llizard 2007
CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page