Using Server Side Includes

Using Server Side Includes
Web Design

Easy Site Maintenance with Server Side Includes (SSI)

A well-designed web site is also easy to maintain. If you’ve ever done a site redesign for a medium to large web site you know what a headache it is to recode every page. Adding even a simple navigation link to 50+ pages is tedious.

And error prone!

But there is a technology that allows you to keep common page elements like your logo or navigation bar in separate HTML files.

You make changes to a single file and you have updated your entire site!

I’m talking about Server Side Includes (SSI), which allow you literally to include one HTML document inside another:

You place an SSI command, called a directive, on a page where you want to insert the text.
When a page is requested, the server replaces the SSI directive with the file and sends the output to the browser.

You can use SSI to include your logo, your left, top and bottom navigation bars, a copyright notice or any other information you want to appear on every page of your site.

Very cool, and good design as well.

Let’s take a look at a simple example to add a copyright notice to your web pages.

First, create the copyright notice in a file called “copyright.html”.

Copyright 2003 MyCompany, Inc.

Now add the following line at the bottom of every page where you want the copyright notice to appear:

That’s it!

Now if you want to update the copyright with the current year, or add an email address, you only have to update one file.

A very efficient use of your very valuable time!

How can you add SSI to your existing website?

The easiest way is to cut and paste the information that appears on all of your pages and save it in separate files.

You can use “html” or “txt” as the file extension, but remember to use descriptive names like “topnavbar” or “copyright” so you will remember
what each file contains when it is time for the next global update.

Add the appropriate include command on each page and you’re done.

If your includes are in the root directory, the code looks like this:

If you decide to store your includes in another directory you will need to add the path name before the file name:

Before including SSI, check with your web host to be sure it supports SSI (most do).

Some web hosts may require that you use .shtml or .shtm as your file extensions, but not all do.

If your web host doesn’t support SSI you might want to find one that does.

It’s that valuable.

If you want to learn more, there are lots of good SSI tutorials on the web. Here is one of my favorites:

Using server-side includes

Web Design
The Best Ways To Learn Web Design

  Having some web design education can be extremely valuable. When you know how to build your own site, you won’t have to pay someone else to do it for you. With that said, learning web design isn’t always easy. Keep these simple tips in mind if you want to …

Isomorphic JavaScript
Web Design
Benefits Of Isomorphic JavaScript

Isomorphic JavaScript is now one of the more relied upon coding systems that are going because it is the future and the benefits are piling up. The coders who have developed it state it is the next step and something that will eventually pass onto everything that is being done …

responsive web design
Web Design
Top Website Design Trends To Watch In 2015

Websites are very important. They act as the mirror through which customers see and feel your business brand online. While this is the major role websites have played for such a long time, the trends, standards and techniques in which they are built have always changed. It’s either by design …