Server-Side Includes (SSI)

Would you like to change one link in one file and have it change on all of your pages instantly?

Server-side scripting isn’t the same as xHTML or CSS, and it can be an advanced topic for people who are just starting out. But, ‘including’ a content file into every page can be just as easy as including a CSS file, and the benefits can be huge.
Consistency from page to page

When you visit a website, each page usually has the same layout as all the others along with some of the same content, sometimes with the exception of the homepage. But homepage aside, let’s look at all the others. They usually have the same banner on every page, a list of the same links on every page, the same content at the bottom of every page, etc.

How redundant it would be, to have to put the same thing on every page like that? Worse, if you change one thing in one of those areas, you would need to manually change it on every page of your website… unless you are using server-side includes for those areas.

Let’s take a typical web page…
Header
Main Content
Sidebar
Footer

Every page has the same header, sidebar, and footer, and only the “Main Content” will change from page to page. In this case, you can have one separate file for the header, another file for the sidebar, and another file for the footer, and “include” them all into every page.
PHP

PHP is the scripting language I’m familiar with, therefore it’s the one I use and the one I’m going to tell you about. In order to use PHP includes, you need to either use a .php extension for every page instead of .htm or .html, or (from what I’ve read on the web) you can use .htaccess to tell your host’s server to process .htm and .html files as PHP before sending them to the end user.

I have never had use for the latter and don’t know what to put into that .htaccess file, but thought I should point it out for those of you who may already have a website and don’t want to change the URLs to your pages. If anyone happens by and knows the answer to this, please feel free to post a comment below, or I can try to find out if someone asks (I did a quick search before making this post and found a lot of suggestions, but nothing that worked).

If you change your page extensions from .htm or .html to .php, those pages will no longer work on your computer unless you have server software installed on it. Therefore, you can either install that software, or upload your pages to your website, then check it out there before making it public.

If you do the .htaccess thing, I can tell you now that you won’t see the included parts on your pages while viewing them from your computer unless you’ve installed server software on it, so you’ll still need to upload those pages or the software before you’ll see the finished product.

That said, it’s easy enough to check that stuff online, which is what I did before installing server software at home.
How it works

Basically, what you want to do is take a finished web page, find something that is exactly the same on every page, then cut it out of there, paste it into its own file, and save that file. Let’s call it “somefile.php”. I like to put all of my includes into a folder and name it “includes”, so let’s put the file there. Then, in the place where you removed the code, replace it with this little line of PHP:

Of course, you should name these include files more appropriately, such as header.php, sidebar.php, footer.php, etc.

It is ideal to use a root-relative URL here, but the root for server-side includes isn’t the same as the root for links and images, and it differs from host to host. If you would like to use root-relative URLs, your host should be able to tell you how to use them on their servers. If they don’t, then maybe you should leave them and buy your hosting through me. 😉
A Visual

Pictures speak louder than words, and video speaks louder than pictures. If you find any of the above confusing, hopefully this will help.

When you’re viewing your page online, be sure to view the source code (if you don’t know how, it’s view > source from your browser’s toolbar). When you view the source code this way, it will look like the file you started with before separating it into two files.

Now, every time you create a new page, you can include those files into it, instead of adding the same text, images, links, etc., into each one. This way, if you need to add, remove, or change a link in a sidebar throughout your entire website, for instance, you only need to change it in that one ‘include’ file. 🙂