Html – How to use templates to generate static web pages

htmltemplates

I want to add one HTML file into another.

For example: I have header.html and footer.html
Now I am trying to create aboutus.html where I want to add these two HTML files
there is no dynamic code in these file except JavaScript.

How can I do this without using any scripting language except JavaScript and CSS?

Best Solution

In the case of web sites with no dynamic content but have common elements, I generate the final pages on my development machine using Perl's Template Toolkit and upload the resulting static HTML files to the server. Works beautifully.

For example:

header.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>[% title %]</title>
<link rel="stylesheet" href="/site.css" type="text/css">
<meta name="description" content="[% description %]">
<meta name="keywords" content="[% keywords.join(',') %]">
</head>

<body>

<div id="banner">
    <p>Banner</p>
</div>

footer.html

<address>
Last update:
[%- USE date -%]
[%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%]
</address>
</body>
</html>

aboutus.html

[%- INCLUDE header.tt.html
title       = 'About Us'
description = 'What we do, how we do it etc.'
keywords    = 'rock, paper, scissors'
-%]

<h1>About us</h1>

<p>We are nice people.</p>

You can now use tpage or ttree to build your pages.