Introduction

Including just makes good design sense. What’s an include? Here is a brief description of includes and web page content.

An include is a piece of code that pulls in content from an external file, and places it into a web page. These are generally known as server side includes. You can use includes in a web page for content that changes from time to time. You can build a page like a template, and by using include files, can change content without having to completely redesigning the page.

Some people build complex templates with many includes. I use as many includes as I need to make maintaining my site as easy and fast as I can. For example; I maintain a publishing website that has constantly changing sidebars, and some contents on the home page. I use the sidebars on more than one page, so having them in an include is very handy for updating all of those pages by editing just 2 files. If you use text navigation, you need to change it every time you add a new page. If you had your menu in an include, you would only have to ad the link to one file, and every page of your site would be updated. You would only have to upload your new page and your menu include and your done. All of your pages are updated, and if you are on a dial-up connection, that alone would be a time saver.

The benefit of using includes.

As you know, a site that is stagnant and does not keep fresh content will die over time. Even sites that offer the same products continually need to add new pages or freshen up content from time to time. Using includes is the easiest way to do this. Just like Cascading Style Sheets to make global presentation changes to your website, includes makes global content changes. As mentioned above, every time you add a new page, you will only have to add a new link to one or two pages, to have every page in your site updated with that new link. What a timesaver that would be!

On my main site, CyberStar Designs, I use a styled list menu with text links. Since this menu appears on all of my pages, when I add a new page I would have to add that page link to the menu of every page. Not so with includes. Since my menu is an include, I only have to add the link to the one page. I then upload the menu page include and the new page, and I’m done! If you are using a JavaScript menu you may want to consider keeping a complete list of links at the bottom of all of your pages. This serves a dual purpose. Since search engines have a hard time reading JavaScript menus and in the event your visitor has their JavaScript turned off, the search engines and your visitors will alternate way of accessing all of your pages.

Different types of server side include codes:

ASP <!--#include file="included.asp"--> Page extension - page.asp Used on Windows servers.

PHP <?php include( ‘included.php’ ); ?> Page extension - page.php Used on servers running Apache and some Windows servers

SSI <!--#include file="included.shtml" --> Page extension - page.shtml Runs on various servers that supports Server Side Includes.

Included pages can be almost anything, from just plain text, to complete tabled layouts. They are simply pulled into the main page and displayed where you put the code. Because these includes are in the body of your page, make sure you do not add any page tags like: html, title, body and so forth. Since the pages are basically assembled and served to the visitor’s web browser, all they see is the finished page. If they were to click on "View Source", it would look just like any other web page. Also, since this is all done on the server before it is displayed, it doesn’t matter what type of browser or operating system your visitor is using.

I’ll be including tables in this tutorial as I like controlling the layout in the include rather than the main page, but it could be a block of text just as well. If you are using style sheets, and you should be, you do not have to add any styling to the include pages. Just add your normal tags, like classes and id's, and it will pick up the style sheet from the main page.