Web Services → Support →  How to Use Server Side Includes

How to Use Server Side Includes

  • "Using Server Side Includes is a technique where by you can insert the content of one file into other files." - YourHTMLSOurce.com.
  • Used for content that will appear on more than one page
  • Update the content once, and all pages with the include on it are updated
  • Common uses: navigation, headers, footers Example: Also used to pull content in from tools like newsbox and calendar

What is a Server Side Include?

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—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 include.

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 on many pages only have to be updated once. Includes use can work like frames, without the disadvantages of using a framed site.

Using includes is a good way to place headings, navigation elements, as well as local and site-wide footers in a Web page. The Publishing Tools provides by Web Services (News Box Publisher, Tool Central NewsPublisher, Calendar Box Publisher, and DirectoryBox all use includes.

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" -->

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.

How to implement SSI tags

More about includes

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

Still need help?

For questions on using SSI's, contact the Web Services Team at webmaster@mcpsmd.org