When I was first learning to write computer programs, one of most important points that was drummed into me was that it's never a good idea to write great chunks of computer code that are repetitions of earlier code. The reason is simple: when it comes time to update code, you'll have a tough time making same change in each copy, and you'll have an even tougher time making sure that each changed copy has been modified in same way.

Why this digression into programming lore? If you create web sites , there is a good chance that, at least most of time, you don't think of your HTML files as "computer code". You probably think of them as content, documents, my writing... etc. But truth is they are. You need only open an HTML file in a plain text editor, and you can see HTML language.

So question is, can same spaghetti problem arise with HTML code? If you've been a webmaster for a while, you probably already know answer... absolutely. The typical web site contains lot of repeated elements.

For example, you may have same heading or footer on each page. You might have a search box or banner code on each page. You might have same menu down side.

Updating all these multiple copies of same HTML code in different files quickly gets tiresome. Even if you haven't encountered update-problem yet, as your projects grow larger and larger, you soon will.

HOW TO AVOID SPAGHETTI?

One answer is various "include" mechanism that HTML technologies provide:

1. Server Side Includes (SSI)

This technology is implemented on many web sites, and basically allows you to include a common fragment of HTML code (stored in a separate file) into as many HTML pages as you want. The advantage is that instead of updating each file individually, you only need update common fragment once.

Here's how:

* On most web servers, you simply rename your HTML files (the ones that are doing including) with a .shtml extension.

* Where you want to include common fragment of code use a line like:

[!--#include file="fragment.html" --]

IMPORTANT: Because some email programs don't display greater-than and less-than signs properly, I've used square brackets, but when you copy this line make sure to change brackets to greater-than and less-than signs. If you prefer to see code online, (and displayed correctly), go to: http://www.suniltanna.com/spaghetti.html

2. ASP Includes

For NT web servers, in .asp pages, you can exact same include syntax as for SSI.

3. PHP Includes

If your web site supports PHP (a script language that runs on server), another way to achieve same thing is to use PHP include command.

Here's how:

* Rename your HTML files (the ones that are doing including) with a .php extension.

* Where you want to include common fragment of code use a line like:

[?php include 'fragment.php' ; ?]

IMPORTANT: Again same point about brackets applies. If you prefer to see code online, (and displayed correctly), go to: http://www.suniltanna.com/spaghetti.html

NO THROUGH ROAD HITHER?

Right, so this all sounds fantastic, problem solved?

Not so fast... While these are powerful techniques they also have drawbacks and limitations:

No, I'm not trying to convince you to switch to frames. I myself use tables and am not going to change my layout. The only problem is that over time, sites tend to grow. It just might be possible to edit around 20 pages when you want to change something, but when we start talking 50 or over one hundred, it just doesn't seem like a good idea. Unless you are prepared to spend hours trying to keep your navigation menu up to date, you have to come up with a better way of doing things.

SSI's to Rescue ===================

If your host supports Server Side Includes and is running Apache, you can use this article to make your table design as easy to maintain as it would be if you were using frames. The best part is that visitors won't even notice that you have changed anything. After new system is in place, they will see exactly same design and HTML code as before, but you will be saved from hours of monotonous work.

Server Side Includes, or SSI's, can be used in many ways. With them you can execute CGI programs, display current date & time on your page and do plenty of other things as well. In this article, we use them for including external files to your HTML. The idea is to create a separate file from your navigation menu and use SSI's to point to it, requiring you to merely edit one file when you wish to change navigation.