Developer

Stupid Web Tricks: Use server-side includes to make site-wide changes

Why make site-wide changes one instance at a time? Change them all at once with server-side includes.

Click here for our complete list of Stupid Web Tricks.

By Lauren Guzak and Patrick Joseph
(1/26/99, updated 6/22/01)class="f">

If you have a Web site devoted to selling cheese, you probably want to reinforce your cheese-marketing message any way you can. Something like, "When it's cheese you want, be sure to visit Chuckie's Online Cheese Factory. We've got cheese, cheese, and more cheese. We're your online cheese superstore!" might be nice.

It's easy to insert this message onto every page of your site, and without having to cut and paste it onto every page. It's also easy to change the message on all of the pages at once, without having to cut and paste it all over again.

How? Server-side includes (SSI), the perfect solution to this kind of site-maintenance nightmare. If you have a standard navigation bar on every page of your site, you should definitely make it an SSI, so whenever you change the structure, or add a section, you'll only have to change one file. If you've got linked JavaScript or DHTML files, setting them up as SSIs mean that your audience only has to make one server call for the page.

As with style sheets, the beauty of includes is that when you want to change something, you need only change the single include file and the change automatically propagates throughout every page on which it appears.

Here's how it works. The server reads the HTML file and sees that there is a directive to go get and then insert some other piece of code. It then collates all of the code and spits out a finished document. Everything happens behind the scenes, unknown to your audience.

Here's how to set up an SSI:

Step One
Make sure that your site's server is configured to support SSI.

If you use an ISP to host your site, check with management to make sure SSI is supported. If your ISP doesn't support SSI, request that it do so.

If you maintain your own server, read the NCSA's HTTP server-side includes documentation.

Step Two
Set up a directory to contain your include source file or files.

Step Three
Create the include file. Our sample file is called cheese_text.html. Note that you don't need to add header and footer tags, just create the formatting you want for that particular piece of text.

cheese_text.html
<font face="Helvetica,Arial" color=#cc0000><b> When it's cheese you want, be sure to visit Chuckie's Online Cheese Factory. We've got cheese, cheese, and more cheese. We're your online cheese superstore! </b></font>

Step Four
Insert the code below into your page's HTML file. The code is a directive telling the server where to get the include file:

<!—#include virtual="/Includes/cheese_text.html"—>

When it's cheese you want, be sure to visit Chuckie's Online Cheese Factory. We've got cheese, cheese, and more cheese. We're your online cheese superstore!

(Note: The text above is written into a separate HTML file from this page.)

Lauren Guzak is a project manager for Ask Jeeves, and Patrick Joseph is a freelance writer.

Editor's Picks

Free Newsletters, In your Inbox