Web Design

server-side includes (SSIs)

main menus

help pages

This is quite a useful and straightforward technique. It doesn't require any particularly specialised knowledge or software to exploit. However, the reason I haven't introduced it earlier, and am instead slightly relegating it to this "appendix", is that it is best to liaise with the administrators of your server or web host if planning to use SSIs in your site. Some specifics may vary from server to server. If you try out these techniques and they don't work, it may be that's the reason, rather than any failings on your part. As it can sometimes be difficult to contact server administrators, particularly if your site is on a large "public" web host, these are sometimes more trouble than they're worth.

A server-side include is basically a line of code in your HTML which "pulls in" some HTML stored separately. In some ways it's almost similar to style sheets - whereas there you have style information being "pointed" to by, potentially, several files at once, here it is actual code which is separately stored. There are two main reasons you might want to do this:

you have a piece of complex code (a navigation bar, for instance) which is identical on many different pages - storing it separately makes page creation quicker, and also means you can make changes to that code only once rather than dozens of times (an identical issue to that which crops up with style sheets).
you have something which changes frequently: perhaps a "breaking news" frame, or a date and time, or (as in the example below) a deadline date. Rather than having to rewrite the page(s) over and over again you can just make changes to a small bit of code or even, in some circumstances, automate it completely.

For instance, on the ACOM web site, we use SSIs on the course work pages. Here there are examples of both the above situations. There are slabs of text common to all course work pages: the information on plagiarism, for instance, and how to use the Submissions Facility. Then there is information which changes on a fairly regular basis: specifically, the deadline for the work. The screen shot below shows portions of both these.

If you View Source of these pages you might wonder what I'm talking about. It just looks like ordinary code. But that is itself an insight into the way SSIs work, and their major advantage. All the work is done by the server, not the browser (hence, "server-side"). By the time the browser gets the page it can't distinguish it from any other HTML. Which means that you don't need to worry (beyond your usual concerns) about whether SSI instructions can be understood by different browsers. It does explain, however, why you need to check with server administrators about exactly how your pages are supported. (The most common server set-up is Apache, and this is what the following examples are drawn from.)

What the above pages actually contain is something like this:


<a href="#top">Back to top of page</a>
<hr>
<!--#include virtual="network_sub.html" -->
<!--#include virtual="deadline.html" -->
<a name="hints"></a>
<h2>Hints and Tips</h2>

network_sub.html is the file which contains the information about submitting your work. It does not contain <head> or <body> tags or anything else like that - in other words it is a "slice" of an HTML file, not a fully functioning file in its own right. Unlike the files which are included in frames, is not a file which could be viewed by a browser in its own right even though it has the .html suffix. deadline.html... well, I'm sure you can work it out.

As usual with complex techniques like this, the syntax needs to be exactly right. You must include the hashmark (#); you must also ensure there is one space before the closing --> tag. Once that's done, though, it's just a matter of making sure your included files "fit in" properly, and Bob's your mother's brother.

Oh, there's one more thing. When using any file that pulls in SSIs in this fashion, you must change the file extension to .shtml rather than .html. This lets the server know that it must go and look for the includes. Check the extension of any one of the ACOM course work pages for proof.

That's all there is to it really. Definitely a time-saver, but do be aware of the limitations posed by certain servers.

Back to the top

Back to the menu of other topics

Material on this site is © Drew Whitworth and ACOM, 2002. Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.