How to include one HTML file inside another

Test

Using "include files", you can more easily organize data and remove the need to repeat the same information in several different files on your web site.

                  
                        

by Leo A. Notenboom, © 2004

               How do I include one HTML file inside another?
     
It's very common practice to have a consistent theme on a web site.You might have a standard navigation bar or a logo or even just a page footer withcopyright and administrative information. Rather than actually havingthat information on each and every page it would certainly be nice ifyou could write your navigation bar once, keep it in one file, and thenreference that file in each of several different pages. Make a changeto the navigation bar in one place and instantly all pages are updated.
Welcome to "include" files - an incredibly powerful facility thatcan do this, and so much more, on your web site.
     
Includes break down into two categories: client and server. A"client" side include is one performed by your browser. Unfortunately,there is no specific syntax in HTML for client side includes so wehave to play a small game using javascript. A "server" side include isexactly that - the include happens on your web server so the clientbrowser never even knows it happened.

Server Side Includes

We'll start with the conceptually easier one: the server sideinclude. The specific syntax will vary based on what type of server youhave and what language your pages are written in.
Simple HTML pages on most common web servers can use a syntaxcalled Server Side Include, or SSI. As an example inan HTML file a.html we can place this line:

<!--#include FILE="b.inc" -->

The page seen by a browser viewing a.html will consist of thecontents of a.html before the include line, followed by the contents ofb.inc, followed by the contents of a.html after the include line. Put theHTML for your navigation bar in a file like b.inc, and all your pagescan show the exact same bar.

SSI is available on both Apache and Microsoft IIS web servers. On Apachesome configuration may be needed but even if you don't have access to theactual server configuration files it can typically also be enabled bycommands in a file named .htaccess that you will either find or can createin your server's web directory. Read more about Apache SSIhere. Under IIS, SSI is enabled anytime youuse ".asp" pages -- so the only configuration you need do is to name yourpages .asp instead of .html. Read more about Server Side Include inASP pages here.

Another popular ASP-like programming environment is PHP. PHP's includesyntax is very simple:

<? readfile("b.inc"); ?>

Naturally, PHP has a host of additional processing ability but muchlike ASP the only requirement to make the include above work is to havePHP on your web server and name your file ".php".

With all of the above approaches, the browser viewing the page knowsabsolutely nothing about the include - it all happened before the pagewas downloaded. However, sometimes processing an include on the serverisn't the right option. That's where processing an include on theclient comes in.

Client Side Includes

As I mentioned above, there is no actual syntax for a client-sideinclude but we can mimic one using Javascript. Forexample:

<script src="b.js" type="text/javascript"></script>

When encountered, the browser downloads the script "b.js", executesit, and prints any output that the script might generate as if it wereinline HTML. Technically that's not an include but thescript "b.js" could be nothing more than a series of javascript "print"statements such as these:

document.write("<table>")
document.write("<tr>")
... and so on

"Welcome to 'include' files - an incredibly powerful facility that can do this, and so much more, on your web site."
You can see it's "printing" the HTML you want included. In otherwords, if you can format your include file as a series of javascriptprints, you can use client-side include to insert it.

Now things can get very interesting, because we'll introducetwo things: remote includes, and CGI programs, into the mix.

Remote Includes

The files we've included so far have been assumed to be on your ownserver in the same location as your other HTML pages. In almost allcases you can "include" using a full URL to any other server on theinternet.

For client-side includes it's very simple. It just works:

<script src="http://example.com/b.js" type="text/javascript"></script>

This works just like the earlier example except that b.js willget loaded from example.com rather than your own server. Similarly,PHP also "just works":

<? readfile("http://example.com/b.inc"); ?>

Unfortunately Apache SSI directives do not support remoteincludes. But there's almost always a way and we have a workaroundusing CGI.

CGI Includes

So far we've included only "static" HTML pages. As it turns out youcan "include" the output of a server-run CGI program. This thenbecomes our solution for Apache's lack of support for remote includes.We'll start with this very short Perl program:

use LWP::Simple;
print "Content-type:text/html\n\n";
getprint ($ENV{'QUERY_STRING'});

We'll call it "proxy.pl". Proxy.pl must be appropriately installedon your server into your cgi-bin directory or its equivalent. By beinglocal to your server, Include directives can reference it.

Proxy.pl simply fetches the contents of the URL passed as a parameter.This means we can perform an apache remote include this way:

<!--#include VIRTUAL="/cgi-bin/proxy.pl?http://example.com/b.inc" -->

It works like this:

• The include executes proxy.pl with the parameter "http://example.com/b.inc"
• Proxy.pl then fetches b.inc from example.com and prints it.
  

The result is that the contents of b.inc show up as an included file.

Test

Includes + remote includes + CGI

So far we've used a CGI program to fetch what is essentially justanother static html file. In fact, if we put all these pieces together we cancreate some very useful and interesting internet applications.
Randy Cassingham of This is True wanted to beable to provide his readers who had web sites the ability to host one ofhis stories. Sounds like a job for an include file, right? But he alsowanted that story to change every day. That's more than a static HTMLpage; that's a CGI program that outputs a different story eachday.
The result is tad.pl (True-A-Day) - a Perl script that picksa new story every day and outputs HTML. Given what we've talked aboutso far so you can probably guess how it's used. As a client sideinclude:

<script src="http://www.thisistrue.net/cgi-bin/tad.pl" type="text/javascript"></script>

That's it in its simplest form. Note that:

• tad.pl is written in Perl. It does whatever it needs to gatherthe HTML for the story to be output.
• tad.pl outputs javascript. In fact, tad.pl's output is nothingmore than a series of "document.write" statements.
• The client browser executes the javascript. The result is that itprints the HTML that tad.pl constructed for today's story.
  

Using tad.pl in a server-side include looks like this:

<!--#include VIRTUAL="/cgi-bin/proxy.pl?http://www.thisistrue.net/cgi-bin/tad.pl?ssi=1" -->

Note that as discussed above we had to use a localCGI program, proxy.pl, to fetch the remote URL.
Note also that we've added an additional parameter, ssi=1.This causes tad.pl to output the HTML it gathers without thejavascript document.write statements. The final sequence looks likethis:

• proxy.pl executes on your server, and is passed the URL"http://www.thisistrue.net/cgi-bin/tad.pl?ssi=1".
• proxy.pl fetches that URL, causing tad.pl to executeon www.thisistrue.net.
• tad.pl once again does whatever it needs to gather the HTML for thestory to be output.
• tad.pl outputs the HTML to be included.
• That output is returned to proxy.pl, which in turn prints it, whereit becomes the "included text".
• The client browser sees nothing but HTML - the HTML from thecontaining page with the HTML from tad.pl inserted in place of theinclude statement.
  

As you can see, includes are not only a great organizational toolallowing you to collect common information into fewer files, but also apowerful way to add functionality to your web site and perhapsothers. I'll end this with True-A-Day included via a client side include:
[script]http://www.thisistrue.net/cgi-bin/tad.pl
  

   Visit True  

[/script]            

     Article C1891 - February  8, 2004