An SSI (Server Side Include) allows the webmaster to include content that is reused on many pages by updating the content one time. It’s also a way to have dynamic content on your pages within updating the HTML code or using FTP.

Users

The webmaster is the primary user of the SSI.

What is an SSI?

SSI (Server Side Include) is a directive that is placed within HTML pages, and evaluated on the server as the server sends the page to the browser. It allows you, the Webmaster, to add dynamically generated content to an existing HTML page, without having to serve the entire page via a CGI program, or other dynamic technology.

What’s that you say? As a Webmaster, you can divide your page into parts. For example, these might be: header, navigation bar, content well, text insert, site footer, and copyright footer. The parts that you want to appear on several pages on your site, like the header, navigation bar, and footers can be stored separately as text files and imported dynamically into all the pages where they are used. As you update the content well (that piece which changes frequently) or any other piece, the browser assembles the parts dynamically, and the page is displayed to the site visitor as if the page had been created as a single unit. In fact, when you look at the source code from the browser window, it’s a seamless unit. The “magic wand” that “glues” the pieces together is an SSI.

Why use a server side include?

The advantage of using a server side include in a page is that the browser builds the page using the latest version of the included file and dynamically updates all the pages using that block the next time the pages are refreshed or loaded by the browser. Thus, blocks of code that are reused in many pages only have to be updated once. SSI use can work like frames, without the disadvantages of using a framed site.

The example in Appendix A (311K PDF) uses several server side includes to assemble designated blocks of code that might be used repeatedly throughout a related set of web pages. Using SSI’s is a good way to place headings, navigation elements, News Box Publisher, Tool Central NewsPublisher or Calendar Box Publisher content, as well as local and site-wide footers in a web page. The text SSI (server side include) used in this example is processed on the fly by the server as the page is rendered by the browser for the site visitor.

Note: MCPS servers DO NOT support SSI execs that execute a program on the server because they pose a high security risk to our servers.

What does a server side include look like?

The format of the server side include of text is one line of code:

#include file=”filename.txt” or
#include virtual=”/directory/filename.txt”

If the browser can’t process this kind of statement (If browser is too old, pre-Netscape 4.0 or IE 5), it will skip the command and try to display the include statement as text on the page. To avoid this situation, we place the command inside of HTML comment tags thus:
<!– #include file=”filename.txt” –>

That’s it. One line of code tells the browser “go get this file and insert it here.”

Changing file extensions to .shtm or .shtml

It can’t be that easy, can it? Well, there are a couple of other little things you need to do once for each page. You must use the file extension .shtm or .shtml instead of .htm and .html. This is simply a naming convention that says “This html file includes Server commands – please parse it before delivering to the browser site” (hence the “s”). That way parsing can be skipped for all “plain” .html [or .htm] files. Shtml is the default extension for a page with server-side includes.

Keeping your visitors coming to your site after changing file extensions

The last thing you need to do is keep your friends who used to view your page at the .htm or .html URL address. When using the SSI, you’re actually changing your home page name from index.html to index.shtm. If you delete the old index.html and put up index.shtm, your new page is the default. It displays in the browser when your directory is opened and everybody’s happy. Few will even notice that the page name has changed.

But, if a visitor has bookmarked or linked to the page named index.html, and they use their bookmark or link to return to your page, it won’t be there anymore. The site visitor will see 404 — Page not found. What can you do so you don’t lose this site visitor? You can make a redirect page to send those seeking the old index.html and forward them to your new page now named index.shtm. An example of this code is included in How to Make and Use a Redirect. It’s good practice to put up a redirect to replace the old index.html to avoid frustrating your site visitors.

Make the pieces to assemble

The pieces are made in the same way you make your pages. The pieces, though, only include their part of the page. You don’t need any <html>, <head> or <body> tags as you need for a complete page. You can preview your “piece” in your HTML editor the same way you’d preview an .html page. To make the piece into an includable file, save it as a text file. Give it an identifiable name with the suffix of .txt ( i.e. footer.txt) and save it in your school/office root directory. You’ll need one text file for each include command in your web page.

Easy as pie… That’s the essentials of using SSI.

Related links

To learn more about server side includes see the following sites.

• SSI Commands
• All About SSI
• File Extensions Overview
• What does “.shtml” mean?