An introduction to Server Side Includes

This file, and the three files that go along with it, are here to serve as an example for using Server Side Includes (SSI) on the copland.udel.edu web server.

Try out the navigation links as the top of the page. Notice that this part of the page is the same on all three of the linked pages.

Without SSI, we'd have to duplicate the HTML code for that navigation header inside all three HTML files, namely, inside:

  1. mainPage.shtml
  2. viewingSource.shtml
  3. links.shtml

Instead, we write this HTML code only once, and put in a file called navigation.html. This makes our job easier, because if we want to add a fourth page to the site, we only have to do it in one place.

The way we make this work, is to include the following inside all three files at the very top of the content of the <body>element, right after the <body> open tag: 

  <!--#include file="navigation.html"-->

You won't be able to see this line if you do "view source" though. That's because by the time the "source" makes it to your web browser, this line has already been replaced by the contents of the file navigation.html. If you want to actually see the #include SSI directive in the file, you'll need to follow the navigation links at the top of the page to learn how to view the source for pages with SSI.

Please look over the information on all three pages to get an idea of how to use SSI, and to see how a "common navigation header" is set up using SSI.

Not every server supports SSI

Also note that not every web server allows SSI. It is something that some web servers do, and others don't.

It is implemented by the server though, not the browser, so for a given web server (say, copland.udel.edu), if it works in one browser if will work on every browser that visit that page.

Server side? Client Side?

We'll talk more in lecture about the difference between

You may also want to revisit p. 2 and p. 3 of the textbook "Head First HTML (with XHTML and CSS)".

One more thing... factoring out the style sheet

There is one other thing we can do to make our life easier, that is very similar to the use of SSI.

Note that the style sheet—i.e. the CSS code inside the <style> element)—still appears in all three HTML files.

This is not good. That means that if want (for example) to change the color of the header, we have to make the change in all three HTML files.

So, it is better to factor out the CSS into its own file. We'll discuss how to do that in a separate example. You can also read about this on pp. 303-307 of the textbook "Head First HTML (with XHTML and CSS)".