Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Reduce Your Site to Reusable Include Files

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.
 

Adam Powell

September 2002

Summary:     Learn how to maintain your site using includes, which can be dynamically assembled to make Web pages on-the-fly.

Contents

Overview
Identifying Possible Include Files
How the Server Works with Include Files
Creating the Footer File
Assembling the Include Files
Other Tips and Tricks
Conclusion

Overview

There are certain elements of any Web site that are repeated. This tutorial will show you how to isolate those elements into include files so you can reuse them throughout your site. The tutorial is intended for the advanced Hypertext Markup Language (HTML) practitioner. We'll be using the Microsoft® FrontPage® Web site creation and management tool to create these files in HTML mode.

Includes are the repeated elements in your site isolated into single files. An example of code that is a good candidate for an include file is a logo, a header, a footer, and/or navigation bars. These elements are part of every Web page.

But if such elements are hard-coded into every page, repeating the same information dozens of times, it's a real time waster just to change a logo site-wide. You could find and replace through dozens or even hundreds of files to change consistent elements, but if you've tried this you know that the process is less than foolproof. Every page must be checked for errors due to inconsistent code. When your find and replace command grabs the wrong thing and alters it, a nonfunctioning Web page will frequently result.

This tutorial will demonstrate how to break out a site's repeating elements as separate files and simply pull them in when needed. When a server assembles the file being called by the browser, the result is called a dynamic site because it is dynamically generated by the server, as opposed to a static site. Reduce your site to include files, and then recycle them. The time you spend in the effort will pay itself back a hundredfold.

Identifying Possible Include Files

The most important step is the first one: Look at what you are starting with, and identify your goals. So before we start hacking into the code, let's take a minute or two and define every common element in your site. Pull up your Web site and get out a pad and paper.

We want to reduce the site to component form in order to isolate elements as single files and reuse them.

Identify the headers, footers, and other elements common to every page on the site, and start grouping if possible. A logo can be grouped with top navigation bars as a "header" file. Contact information, a script that handles an e-mail form, and a JavaScript date/time script could all be grouped as a "footer" file.

Think carefully. Is your navigation always the same? What about the HTML that surrounds the content area? Every site is different, so you need to look at your own site and determine which elements repeat frequently enough to isolate into include files.

How the Server Works with Include Files

To appreciate how dynamic HTML includes work, we need to explain how Web servers communicate with your dynamic HTML.

When a Web page is assembled "on the fly," it simply means that the site is assembled at the moment it is requested by a browser. On-the-fly assembly is accomplished by what's called a server-side include. The server assembles an HTML page according to the embedded include commands when the client browser makes an HTTP request. Rather than serving up a flat file, the server assembles a file to code specifications at the moment of the HTTP request and then serves it up. Web servers are widely varied in configuration, but nearly all of them have the capacity to serve includes. If you experience problems, talk to your system administrator about toggling the "turn includes on" function.

Now let's make a master page and an include, and call the include into the master.

Creating the Footer File

To understand the relationship between include files and the main Web page, think of the page as a master template of which the include is one element. Let's look at the example of the footer.

Most sites have a small chunk of the same HTML at the bottom of every page, something like this:

<a href="contact_info.html">Contact Us</a> 
<a href="copyright_info.html">Copyright &copy; 2000-2002</a>
<a href="about_us.html">Tailspin Toys</a>

You could hard-code this HTML into every page. But in the future, you would have a lot of extra work to do. By setting this bit of code in its own file (footer.html) and then calling footer.html as a include file from every page, you limit your work on New Year's Day to changing a single digit in a single file.

To create a include file:

  1. Using FrontPage, open the index page from your site. Open the HTML editor (HTML view) to work directly on the code.
  2. Cut and paste the footer code of this static HTML page into a separate file, and save it as footer.html.
  3. Save the original page, without the footer code, as index.html. In the next step, we'll be inserting a call to the footer.html file.

Assembling the Include Files

If you have your footer file and your index page, it is time to set up the index page to pull in the include file. When you put this code — the footer.html file and the index.html file — online, your site will be dynamically assembled in real time just as a browser hits your site.

Let's start with a single include as an example: calling footer.html into index.html.

Got your footer file? In the place of the original footer code in the index page, insert a call to the footer file:

<!--#include virtual="footer.html"-->

Now save the file.

Here's what a generic, basic index.html looks like:

<html>
<head>
<title>Tailspin Toys</title>
</head>
<body>
<p>Welcome to Tailspin Toys! Here is a bunch of inline content that is distinct to this page only, so it is hard-coded into the content area.</p>
<!--#include virtual="footer.html"-->
</body>
</html>

Again, here is what the footer.html include file looks like:

<a href="contact_info.html">Contact Us</a> 
<a href="copyright_info.html">Copyright &copy; 2000-2002</a>
<a href="about_us.html">Tailspin Toys</a>

Now, FTP both files to a Web server. When you call up the page in browser, you should see the footer at the bottom of the page.

Using the above example, you can make includes out of the header, the navigation bar, and so on.

Here's a good model of what a template for a dynamically driven Web site should look like:

<html>
<head>
<title>Tailspin Toys</title>
<body bgcolor="#ffffff">
<!--#include virtual="header.html"-->
<!--#include virtual="navigation.html"-->
<p>This text is hard-coded into the page because it is unique to this page. Therefore there is no need to make this text into an include file. In fact, that would create unnecessary work. So go ahead and hard-code elements that are specific to a single page.</p>
<!--#include virtual="footer.html"-->
</body>
</html>

Got the idea? If you use include files, your pages will be much shorter and feature only content unique to the individual page. In this way, visual management of the code is greatly improved.

Other Tips and Tricks

Once you've gotten the idea of how this works, there are other applications for include files as well.

  • Includes allow you to use one file on all pages — but also on all the pages in a subdirectory. Simply determine the layout for all the pages in that subdirectory, and create include files for that subdirectory.
  • If necessary, you can call includes from within includes as well.
  • Explore the built-in FrontPage components. You've already done the hard part: working directly with the server-side code. Have some fun and familiarize yourself with these built-in pieces of code. You can quickly add news, weather, and stock quotes to your page.

Conclusion

In a sense, one of the chief virtues of a good programmer is laziness. That's because laziness leads to smarter approaches to programming that don't require so much work. The programmer strives for simplicity, not only because it is easier to deal with but also because there is less room for error.

Once a site is based on includes, the ease of a future redesign is something that you will greatly appreciate when that inevitable day arrives.

Show: