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…
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:
<?php include('includes/somefile.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. 
If you found this article useful, please spread the word:
Thanks for the info. One small suggestion – the thumbnails enlarge over the thumbnails bellow making it hard to scroll all your thumbnails, why not move the larger images off to the right?
I like your design and articles, especially your promise to keep things current. Lots of dated tutorials out there.
You’re very welcome, Paul. I’m glad you found it useful!
Thank you also, for the compliment and suggestion. Although I made a few adjustments and additions to this blog (like the clickable smileys and customized category pages), the “Japan Style” theme you see here was created by Good Design Web. The articles and code additions/changes, however, are mine.
As for your suggestion, I liked it, so I implemented it. Thanks again!
I replaced the thumbnails with a video today, and hope it helps even more.
The video is a good compliment to the blog post. Either one on its own might be a little hard to grasp for an amateur (like me), but together made some sense
Thank you for that feedback, Skokey!
I’m glad I chose this tutorial to add my first video instructional to. Those thumbnails were just too cumbersome. Hopefully I’ll get good enough at making videos that they’ll be able to stand on their own, but for now, I’m glad they can complement each other.
I am just starting out to learn web design and I find your tutorials excellent. Do you have more tutorials on php? Your site is just the best out there.
Thank you for the excellent compliment, bchitala.
I don’t have any other tutorials on php at the moment. Is there anything in particular you were looking for?
I want to get a handle on the php coding and how emailing works.
I’ll see if I can write a tutorial on emailing via php in the near future. For now, you can check out the tutorial at w3schools here.
What they describe is very simplistic, though, and you’ll need to pass the variables from the form to the script, instead of hard-coding them directly like they did in their example. Also, you need to be aware of email injection and how to prevent it, otherwise people will be able to use your email form for malicious purposes. For more information on email injection, see here.
If what you want is to create a mailing list, you can do that by combining php and MySQL.
I hope this gets you started, and I’ll see if I can write tutorials on both of these topics soon. It’s been a few months since I’ve written a tutorial, and these would be good topics for me to cover.
I’m now a regular on your site and will be on the lookout for new tutorials. In the meantime, I’ll continue studying tutorials you already posted here. Thanks.
You’re welcome, and thank you.