Server-Side Includes
a.k.a. SSI

What is a Server-Side Include?

A Server Side Include lets you insert (or include) some HTML into a different web page in real time (dynamically). The exceptionally cool thing about it, and why we use it, is that you update a whole mess of pages by just updating a single SSI file. FYI, the place I always use it is in my page navigation, footers and headers.

Check this out:

Let's say I've just finished this page and need to add it to the dropdown box on my left menu. Now, I have a sh*tload of pages in this site, so if I had to add a link to this page on the navigation menu of every page, it would take me forever and put me in a very bad mood.

But with SSI, I make one file called leftmenu.shtml and place a single line of code in all my web pages. So, when I need to update the left menu, I just edit the one file leftmenu.shtml and my entire website gets updated instantly. I never need to open any other pages and all I have to upload is that one file!

You'll need to find out how your web host is set up for SSI

For instance, my host requires that both the page that gets included as well as the page that holds the include both have the .shtml extension, which explains why all my pages end in .shtml. Some web hosts only require that the initial page (the one that holds the include) be shtml, so you'll want to check with your web host. Usually a search in their help files for "SSI" will tell you what the scoop is.

Components of a Server-Side Include:

1. The page you want to insert the SSI into.
2. The bit of code you want inserted into that page.

In this example, lets use this website's left menu which happens to be called "leftmenu.shtml". The file for that doesn't need html, header or body tags because the page it's inserted into already has all that stuff. So the only thing in the page leftmenu.shtml is a table that houses the dropdown menu, the topic list and all the other stuff you see to the left.

To insert the left menu, all my web pages have this bit of code where I want my left menu to appear.

You might need to revisit our hyperlinks page to remember relative vs. absolute linking, because that applies to this, too:

ex.  will find the leftmenu file in the "pretend-directory" folder .