What is a server-side include?
A server-side include is a Web-based scripting language used primarily to include the contents of one file into another file. The code is run on the server rather than in the client's browser. SSI is also used to refer to the included file, or the tag that includes the file.
Why is a server-side include useful?
Server-side includes can be used to insert code that is used exactly the same in multiple files. The advantage is modularity: The code needs to be changed in only one place. It greatly simplifies page code, helps to produce a standard look for a site, and reduces site maintenance time and errors.
Server-side includes are commonly used to insert headers, footers, navigation bars and search forms. They can also be used to display the document URL, last modified date and other page information stored by the server.
CSS is another way to make maintenance of large sites easier, and can be used in conjuction with SSIs to format the code within the SSI file and control layout of SSI elements on the page.
Technical notes
Because server-side includes run on the server, they are browser-independent. They will produce the same results for all browsers. By contrast, sites which use client-side scripting such as JavaScript to include files will not work properly for browsers that do not support the client-side scripting language.
Another technology that is used for modularity of inserting content is frames. Each part of a page, such as header, footer and navigation bar, could be put in a separate frame. However, there are many well-documented usability problems with frames. Inline frames are a slightly better solution than frames, but SSIs are generally best.
How do I create a server-side include?
How to create an SSI file
- Open a new file in any web or text editor.
- Put in the HTML code that you would like to include in multiple
files.
- You could copy this code from an existing .html file that already has the codes, or create them from scratch.
- You can create this in design view, but when you are finished, make sure you switch to code view and remove any extra tags that you do not need to include.
- Remove the entire <head> section, including the <title> tag, and the opening and closing <html> and <body> tags. You do not want to repeat these tags twice in the same file, since some browsers may not read it correctly. Also, although you could remove these from all your HTML files and put them in your SSI, some editors may be confused if these tags are missing
- Save the file.
- I recommend using an .html extension to indicate that it contains HTML code.
- (It could have any extension, such as .txt to make it clear that it is not a complete HTML document, or .ssi to make it clear that it is being used as an SSI, but if you want it to include other files, it should have an .html or .shtml extension.
How to include an SSI file in a Web page
The CSU Libraries Web server is set up to look in all .html files for server-side includes. (For other servers, you should use an .shtml extension. Consult the documentation of your server or the SSI links below.)
To insert an SSI into any .html file, you need to add a line of HTML code where you want the file to be inserted:
<!--#include virtual="filename.html" -->
The spacing is important. There are exactly two spaces in the line.
Note that this line follows the structure of an HTML comment. If you save it to your hard drive or the T: drive, and view it in your Web browser, you will not see the SSI, since HTML comments are not displayed by the browser.
To test if the SSI works, upload your Web page(s) to the Web
server, including your SSI file if you created one, and view it
through your browser in an address like
http://lib.colostate.edu/foldername/filename.html. If
you view the HTML source from your Web browser, you will see that
the contents of filename.html has been inserted into your Web page
in place of the #include line.
Headers
To include the CSU Libraries header in a Web page, open your
page, switch to code view and type this line immediately after the
<body> tag.
<!--#include virtual="/includes/header.html" -->
To include a different header, create a file named header.html that includes your site title, logo, banner, and possibly top navigation, and save it as header.html. If this is in the same directory as your pages, you would insert this line into your Web pages:
<!--#include virtual="header.html" -->
Footers
Including a footer is very similar to including a header, except
that it should be inserted immediately before the closing
</body> tag. For the CSU Libraries footer,
use
<!--#include virtual="/includes/footer.html" -->
or for your own footer, use something like
<!--#include virtual="footer.html" -->
SSI Paths
If you want to include a file into a document that is in a different folder, use a relative or absolute path, much like for images or links.
If the include file is in a subdirectory named includes, use
<!--#include virtual="includes/header.html" -->
If the include file is in the parent directory, use
<!--#include virtual="../header.html" -->
If you are including a file into files in multiple directories, you might want to use an absolute path name starting with /, like
<!--#include virtual="/research/astrology/header.html" -->
SSI in Dreamweaver
Dreamweaver allows you to preview how a file will look when an SSI is included.
- In Dreamweaver MX 2004, click Edit, Preferences, Invisible Elements, and check the box next to "Server-Side includes: Show contents of included file".
The file must be accessible to Dreamweaver, e.g. either in the same folder or a relative path.
Server Variables
To include the file URL, your footer SSI file should include this line:
URL: http://<!--#echo var="SERVER_NAME" --><!--#echo var="DOCUMENT_URI" -->
To include the last modification date (in US date format), your footer SSI file should include this line:
Last updated: <!--#config timefmt="%m/%d/%Y" --><!--#echo var="LAST_MODIFIED" -->
Navigation Bars
To include a navigation bar, create a file that contains links to the pages in your site, and save as an .html file, e.g. navbar.html. Then include it in your pages using a line like this:
<!--#include virtual="navbar.html" -->
An example of a navigation bar is the Web design tips navigation bar which you can see in the left margin of this page. It is formatted by the Libraries body stylesheet.
Including files from multiple directory levels
If you are including a navigation bar (or other element) from
files in multiple directory levels, such as
/dir/index.html and
/dir/subdir/index.html, links and images in the
navigation bar should use absolute file paths (starting with
"/dir/").
<a href="/dir/" title="Subsite Home"><img src="/dir/images/subsite.gif" width="150" height="60" alt="Subsite Home" /></a>