Download .ZIP

HTML and CSS templates are a great way to make a good looking site, but they can be a pain down the road. The problem is that they don't, by nature, separate the theme from the content of the page: If you create ten or a hundred pages on your site, then decide to change the theme or navigation, add Google analytics, or whatnot — and you have to edit ten or a hundred pages. Quite a chore.

There are many template engines and other approaches that separate dynamic content from fixed or "static" web pages, or try to separate layout from content, but they don't completely separate the layout of the site (the look & feel you see looking at an empty CSS template page) from your unique content on each page. Each of those solutions requires custom modifications or "hooks" in your HTML to connect your content with the template's look & feel or otherwise shackles your content to their way of doing things.

No matter where you get your layout and design from, unless your site runs software like WordPress, you have to merge the theme with your content in such a way that you can't easily keep them separate. (And the WordPress approach has limitations as well, such as not working with off-the-shelf CSS templates -- it needs those "hooks" I mentioned.) That means you can't easily...

I faced all these challenges on the various sites I run. Here's how I made my life simpler with ".ht" files.

In brief, .ht files completely separate your per-page content from your theme/layout -- with no hooks inside your HTML content or templates. Just upload a content file and go. This approach also easily meshes with PERL, PHP, ASP, etc.

Notice the shape of a web page

Many (if not most) web pages are made of content wrapped in the middle of unchanging top, side, and bottom material (header, footer, side navigation, etc.).

Visually, in other words, we have something like this. The parts that are the same from page to page are in blue, the unique content for each page is shown in red:

Your typical .html file looks like, then, like this:

That is, when it's stored in the .html file, many pages have their "real content" sandwiched between unchanging top and bottom material. (This is the kind of output you get from using a template in Dreamweaver. The problem is, once it's in the HTML file, you can't undo it. If you've inherited a site and don't have the original input files, you're stuck. Or if you want to easily incorporate your theme into a CGI or PHP script you pick up off the web, it isn't simple.)

If you had the web server automatically spit out the top and bottom stuff, you could simply create a file that contained only your "real" stuff. That's what a .ht file is! You set up the layout once, split it into two parts (top & bottom bread slices of that sandwich), then never have to touch it again. Every .ht file you create will draw from that layout. If you change the layout, every .ht file immediately picks it up without you lifting a finger.

(Note that it doesn't really matter if the left side matter is in the "top" file and the right side matter in the "bottom". Just find the point in your template where your content goes, and split it right there into top/bottom files.)

The First Step

Take the template for your web site and customize it as usual for your navigation links and site name. Then view this as HTML, and find the place where you would insert your unique page content -- where you'd see "Lorem ipsum..." above. Copy everything above that point to a file called "top". This would include all the header material and perhaps some left-side navigation. Next copy everything after your content -- the footer, maybe right-side column material -- into a file called "bottom". Upload top & bottom to your web server. (No extension, just "top" and "bottom".)

You're just left with your unique content for that page. In my ideal, I want to place that -- and only that -- into a file and have the web server automatically wrap it inside the top and bottom bread of the sandwich.

That's what I created, and called a ".ht" file. Inside of, for example, test.ht, you would find only the specific content, the "middle stuff." The web server does the rest. When a user visits test.ht, the web server sends out "top", your middle "good stuff" from test.ht, then "bottom". You can now concentrate on creating the per-page content and not have to mess with the look&feel of the surrounding template again. This makes using free web templates a snap. Just split them into top/bottom files and place all your content into a bunch of .ht files.

To aid in this process, I created a web tool to do the splitting of a page containing "CONTENT HERE" (or a string of your choice). It's here if you want to use it.

Want to change your web template to something else? Just replace the top & bottom files and you don't have to touch any of your content pages.

How To Do It

You can accomplish this in two ways:

1. Set up your server to handle the ".ht" file type; or
2. Approximate it using server side includes (like ".shtml" files or .asp, .php, or .cgi);

Adding Real .ht Files to your Server

It's not difficult to add the .ht file type to a web server. Here are directions for adding it to an Apache server.

1. Add this to your httpd.conf file (or .htaccess file [*]):

AddHandler encapsulated-file-type .ht Action encapsulated-file-type /cgi-bin/encapsulator.cgi

(Note that if you want to use some suffix other than ".ht", like ".foo", change it in that first line above.)

[*] Note you can place this in a .htaccess file, which is useful if you have a hosted site where you don't have access to the httpd.conf file.

2. Assuming you want "index.ht" in a directory to be a default file like index.html usually is, add "index.ht" to the end of the DirectoryIndex line in your httpd.conf or .htaccess file, such as:

DirectoryIndex index.html index.cgi index.php index.ht

3. Save the following into encapsulator.cgi and place it in your cgi-bin directory (or wherever you pointed to it from httpd.conf; it needn't be named ".cgi" nor put in a cgi-bin directory but I've done so since people quickly grasp the idea of .cgi files):

#!/usr/bin/perl # .ht file encapsulator # copyright 2008 Andrew Burt # # The .HT Encapsulator is released under a Creative Commons # license. If you like it, donations are encouraged, and for # commercial use please purchase a license at # http://tech-soft.com/ht/license . # print "Content-type: text/html\n\n"; # optional; where to find sitewide top/bottom files $root = "/home/httpd/lib"; ($dir = $ENV{PATH_TRANSLATED}) =~ s!/[^/]*$!!; if (-r "$dir/top") { cat("$dir/top"); } else { cat("$root/top"); } cat($ENV{PATH_TRANSLATED}); if (-r "$dir/bottom") { cat("$dir/bottom"); } else { cat("$root/bottom"); } exit 0; sub cat { my ($file) = @_; open(CATFILE, "<$file") || return 0; print while (<CATFILE>); close(CATFILE); return 1; }

Restart your server and you're all set! Make a top/bottom file and a test.ht file to see how it works.

(Note that as an added bonus this version looks in the current directory for "top" & "bottom" then in a specified root directory if not present in the current directory. I usually keep top/bottom linked in each directory anyway, but it's a useful feature.)

(Adding the .ht extension to Microsoft IIS seems a bit trickier. I'm not IIS expert but I had to write a compiled version of the above so it would be a .exe file that the associated file type pointed to. It's here if you want it..)

SSI, CGI, PHP, ASP, etc.

You can approximate this idea with server side includes, which are available on most web servers. It's not quite as clean (you have to embed some tags in every content file to make it work), but doesn't require changing your web server configutation. It's also useful for integrating your look & feel into pages that are created dynamically, from CGI, PHP, etc.

Server Side Includes

You can do this trick using whatever kind of file type supports "including" other files. On mine, .shtml is one of those. On a windows server, .asp should be one. Split up your template into top & bottom files like above. Then make your test.shtml file like so:

It's not quite as good as a real .ht file, since you have to remember to put the #include directives into every file, but it does fulfill the other goals of keeping your look&feel where you can easily modify it and affect all your pages at once.

PHP

PHP users can do a similar thing:

Or, even better, you can do:

at the top of your .php file, where "ht.inc" is thus:

PERL

I like to keep things simple, especially when retrofitting this into an existing PERL page. What I did is put a small library of .ht tools into a "ht.pl" file then

package ht; # print top/bot files a la .ht files # copyright 2008 Andrew Burt # # The .HT Encapsulator is released under a Creative Commons # license. If you like it, donations are encouraged, and for # commercial use please purchase a license at # http://tech-soft.com/ht/license . # # usage: do/require "ht.pl"; after print http headers # # options: # # place $ht'_noautotop = 1; before the 'do' if you want to call # ht'top() yourself and not have the package do it. # # call ht'bottomfile("other-bottom-file"); after the 'do' to # set a different 'bottom' file. # # the function ht'error("error message") is provided to simplify # quitting a script. It prints the message, ensuring the 'top' was displayed, # then exits the script. sub _htcat { my ($file) = @_; open(CATFILE, "<$file") || return 0; print while (<CATFILE>); close(CATFILE); return 1; } sub top { #$__bottom_file = ($_[1] ? $_[1] : "bot"); bottomfile($_[1]) if ($_[1] ne ""); # only print top HTML stuff once return if ($__top++); _htcat($_[0] ? $_[0] : "top"); } sub bottomfile { $__bottom_file = ($_[0] ? $_[0] : "bot"); } sub error { print "\n\n"; # in case still in header top(); # print top if haven't before print "<h2>$_[0]</h2>"; done(0); } sub done { _htcat($__bottom_file ? $__bottom_file : "bot") if (!$__bot++); exit $_[0]; } END { done(); } top() if (!$_noautotop); 1;

Tips

Absolute Paths

I recommend absolute paths -- paths starting with '/', like "/faq.ht" -- in the top/bottom files for header images, menu links, etc. That way if you use them in a subdirectory, /faq.ht will find the files in the right place, not look for them in the subdirectory (where they probably aren't).

Dynamic Content in top/bottom

The top/bottom files are, by nature, unchanging. They can't contain PHP, PERL, or ASP server-side code. They can, of course, include script code that runs in the client's browser. (And they can include dynamic code client-side include techniques like having a <script src="program.cgi"> call to a CGI or PHP page that generates JavaScript code as output.)

Titles and Such

Normally the page <title> tag is in the header, which would now be in the "top" file. However, most browsers don't seem to care, in practice, if you put it in the .ht file. You can put the whole <head> tag and all's well.

Using WordPress (or other) Themes

For the heck of it, yes, you can use WordPress themes, but only for the look -- it won't have the WordPress software behind it to do the administration and such. You might not care -- you might just want the look of a given WP layout. Here's an example. That example uses WordPress.org's own blog page layout at the time I wrote this.

I created this example in about one minute. I saved the source to their page (it's legal to do that, it's all under a GPL). I edited that file, searched for where the main area's content began, saved everything above to "top"; found the bottom of the content area, saved everything below to "bottom". I typed up a short index.ht file saying Test-o-Rama, and I was done.

(Why does this work? Because even though the real file on their server probably has lots of PHP in it that you can't see, everything you see has to be downloaded to your browser. So saving the file saves the whole look of it. (Plus the CSS files the template comes with.)

Voila! A whole new sea of cool themes to choose from.

Conclusion

This has been a huge timesaver for me. I hate repetitive tasks like editing hundreds or thousands of files to change a theme -- that's what the computer is for. Now I just whip up a new .ht file and I don't have to worry about the surrounding layout.

Add it to a simple page editor like TinyMCE and you have an instant Content Management System. (With the benefit that you can change the editor for another at any time; they aren't wedded together in any way.)

I hope this saves you as much time as it has me. Enjoy!

Own a Square Inch of South Park

Where does Mr. Hankey live?
On Kickapoo Rd -visit online or IRL