What is this all about?? Well, any web page can be divided into two aspects: Content and Presentation. The content is what you are reading, the actual text and images on the page. Presentation is how all of the content is positioned and layed out on the output device (screen). Theory says, that these two aspects should be separated completely from each other. I will try to show you why I think this is a good thing, and what you can do about it.

Why is it a good thing?

Suppose you wrote a web page using HTML 3.2, like most pages on the web. You would have used the FONT tags, B tags, and others to tell the browser how to render each bit of text. You also could have used tables to get very precise positioning of the contents, and probably ended up using single-pixel gifs from time to time to provide breaks and margins and the like. Without much thought, anyone would realise that this is no easy way to do something as simple as the task at hand. Also, suppose that you suddenly decided that the colours (colors?) of your site are ripe for a change. In this situation, you would have to go through every single FONT, B, I, and other tags and change them manually. For a very small web site, that may not be hard to accomplish. What happens if you have 10 pages? 100? 3000? Suppose that each page has 4 FONT tags for example, with a 100 page site, you have 400 different pieces of text to find and change. This is very error prone, and is simply too difficult to do once a year (on average).

Enter CSS

Cascading Style Sheets (CSS). This is easily the most innovative technology the Web has seen in years. What it does is allow you to define the presentation of each element in a file separate from the HTML file containing the content. It draws a line between content and presentation. Now, if all of the site's files are using the same stylesheet, then, by accessing and editing only one file, you can change the whole look of the site. How long would that take?? My guess is about an hour, but whatever the actual time, it would be much shorter than accessing every page on the site. I don't have to tell you that webmasters are already using CSS on a daily basis now.

Server Side Includes And CSS

What is SSI? SSI means Server Side Includes. SSI simply allows you to insert text files into a page on the server before sending it to the client. What does this mean? It means that we can generalize our content/presentation argument even further. Suppose that your 100 page site has a standard navigation and footer sections. These should be present on all of your pages, and you want to make sure that they are the same in all pages. Suppose now that you add a new section to your site, and want to let all the pages contain a link to it. What do you do? Well, without SSI, you would go to each page, edit it, and then upload it again. Very difficult and error prone. However, by using SSI, you tell each page to include a footer and a navigation file, taken from a central location on the server. Now, you only have to edit only one file and all of your pages will be up to date. Very simple. Also, since you control where the included text goes, you can control its presentation by using a central CSS. That means, that even if you change either the included files or the CSS file, then both will be synchronised.

An ideal web site?

Firstly, let me say that there is no correct way of structuring a web site. All methods have advantages and disadvantages, and the trick is to find the technique that offers the most advantages for your needs now, and the one most easily changed later on, as your needs change. On eKstreme.com, I have implemented the following routine, which I think is a fairly robust and modular way of doing it:

The first thing I did was create a template. All pages on this site are structured the same because they use the same template. This template has a link to include the central CSS file to give a uniform consistent look throughout the site, and also has SSI directives to include the navigation and footer bits. Finally, each webpage has another SSI directive telling it to include the content of the page from a separate text file. This may sound a bit too extreme (no pun intended...), but when I thought that a feedback email at the bottom of each page was a good idea, all I had to do is edit one file and got it over with. The process took less than 3 min to edit the file and upload it. I think that is efficient. Moreover, the template is made up of a table, and each cell has a specific function: one has the navigation, one has the footer, one has the main content, and the cosmetics, like the thin orange line going down the left side of the content. All of these can be controlled by the style sheet, so in theory, 5 minutes with a text editor, I could change eKstreme.com beyond recognition!

What now??

Well, I hope you can now see the advantages of having this kind of flexibilty, and I hope you are now very excited to learn about CSS and SSI. I don't like to stop you, so I point you to the Webmaster Section.