How do you use "includes"?

Provided by the Good News Web Designers Association

Return to Directory of Tutorials or GNWDA home page

The following answers were provided by various members of the GNWDA, after one member asked this question in the discussion group. If you are a member who is not yet participating in this helpful network, sign up to share tips and questions on web designing ministry and tools, ideas and education.

Q: I was once told about "include" pages (as my friend called them). You can set up some HTML code on one page that is "included" on another webpage. Seems like a good alternative to copy/paste, especially if you need to change it often. I know that you can use JavaScript from another file, but how do you do this "include" thing? ~ Russ

"Server-Side Includes" (SSI) are great for putting menus or a Table of Contents onto webpages. Every time you add a new page that needs to have a link on the menu, you don't need to add the link to it on every webpage throughout your site. Just add it once to the menu; the menu is a separate webpage or txt file that is "included" or called upon by those webpages.

Here's an example of how it works:

  1. Create a menu on a webpage, and name it menu.htm
  2. Open any webpage where you want the menu to appear (let's say it's index.html), and type this code into the position on the page where it should appear:
    <!--# include virtual="menu.htm" -->
  3. Save the page as index.shtml -- the "s" you just added to "html" tells the server that there's an SSI to watch for and implement.

Another good use of SSI is a header or footer that gets repeated on every webpage. These includes would contain recurring information such as text links, contact information, copyright information, etc.

With that introduction to SSI, let's see what tips the GNWDA members have provided.

From Ken: Our server allows a little trick called the "X-bit Hack", but the Apache is actually set up to do that. This allows you to make an .html file and CHMOD it so that it's executable, and you can put as much SSI as you want in it, while the keeping the filename .html instead of .shtml.

Q: How can I figure out if I must save it as .shtml?

From Kathie: It depends on what kind of setup your host server is running. You will need to check directly with them as to what you need to do in order to use SSI.

From Lynn: To find out if you can use the SSI on your site, there's an easy test to load on your page as either and .html or .shtml. You can run it as: (or .shtml).

<TITLE>Test File</TITLE>
<!--#config timefmt="%A" --> <!--#echo var="DATE_LOCAL" -->

When you view the page, you should see the day's name. If you can, you can use includes.

From Kim: My include looks like this:
Now, SSI is a little different, as you have to use .shtml for the extension in some cases.

From Terry: Includes can be any type of file. If you put the html code for the menu (or header or whatever) into a .txt file instead of an .htm file, you can leave out the <html><title><head><body> tags, since you don't need them twice (once on the main page, and once on the include page).

From Kim: Also, you can include includes WITHIN other includes! As far as speed, includes make your pages load faster.

From Bonni: SSI renders the page on the spot, taking the information in the file that you specify as an include and
putting it into the page when the page is loaded. For this reason, it is still accessible to those with older browsers or non-graphical browsers, or with text-reading software such as used by the blind. The server does all the work, and it doesn't matter what the browser is, because the server renders all the includes as the page loads.
And for this reason, you need to be a little bit careful about what you put in an include and how many you use. It can slow down a page considerably if you have a lot of SSI or very large hunks of material to be rendered.

And since the source is just like normal HTML, all of those text links will be picked up and spidered by the search engine.


Tutorials from
elsewhere on
Server Side Includes

Return to Directory of Tutorials or GNWDA home page