Once you've surfed the Web for more than a day, you'll notice that most Web sites have a theme for their site design that is repeated across every page on the site. On the Web Design site, there are several elements that are repeated in this way, including the header portion of the page and the left navigation.
But, when I put up a new article every week, I don't have to write the HTML to add those standard elements. All I write is the article. The rest of the template is built by a content management tool on About. But even if you don't have access to a content management system, there are many ways you can manage your site without having to edit every page by hand.
What Are Includes?
An include is a section of HTML that isn't a full HTML document by itself. Instead, it is a portion of another page that can be included in complete Web pages using programming. Unfortunately, this is not something that is supported by HTML, so you need to have some type of program or script to add your include files into your Web pages.
Most include files are items that are repeated on multiple pages of a Web site without changing, like:
- navigation
- copyright information
- contact notices
Server Side Includes
SSI, or Server Side Includes, were first developed to allow Web developers to "include" HTML documents inside other pages. If your Web server supports SSI, it's easy to create templates for your Web site.
- Save the HTML for the common elements of your site as separate files. For example, your navigation section might be saved as navigation.html or navigation.ssi.
- Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" --> - Use that same code on every page that you want to include the file.
PHP
PHP is another server level programming language that allows you to include HTML documents inside your pages, much the same as SSI. Like SSI, this is a server level technology.
- Save the HTML for the common elements of your site to separate files. For example, your navigation section might be saved as navigation.html or navigation.php.
- Use the following PHP code to include that HTML in each page.
<?php require($DOCUMENT_ROOT . "path to file/include-file.html"); ?> - Use that same code on every page that you want to include the file.
ASP
Active Server Pages are another way to include HTML within your Web pages. Again, as long as your server supports ASP, you can include files using it.
- Save the HTML for the common elements of your site to separate files. For example, your navigation section might be saved as navigation.html or navigation.asp.
- Use the include directive to include that HTML in each page.
<!--#include file="path to file/include-file.html"--> - Use that same code on every page that you want to include the file.
JavaScript
JavaScript is another way to include HTML within the pages of your site. This has the advantage of not requiring server-level programming. But it's a little more complicated than the server-level include methods.
- Save the HTML for the common elements of your site to a JavaScript file. Any HTML written in this file, must be printed to the screen with the document.write function.
- Use a script tag to include the JavaScript file on your pages.
<script type="text/javascript" src="path to file/include-file.js"> </script> - Use that same code on every page that you want to include the file.
Other Include Methods
There are many other ways to include HTML on your pages. Some are more complicated than others.
- CGI
You can use Perl or another CGI programming language to create your pages and then include whatever you want, either as "require" files or by reading them in manually. - Flash
If you want to build your site entirely in Flash, you can then use it to include elements of the site. - Frames
Instead of using the same elements over and over in multiple pages, you can create a framed site where the frames are the duplicated portions of the site. - Content Management
Templating is one of the major selling points of CMS. Only the managers have access to change the template portions of the site, while content developers change the dynamic sections.
