Tutorial :How can I use templates to generate static web pages?


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?


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:


<!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>  


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


Server Side Includes (SSI) exist for this particular functionality. However, you need to have the server configured for such includes. Apache supports it. Not sure about other web servers.


or Server Side Includes (SSI), all embedding is done there on the server side...


The only way to do this on the client side without javascript is to use frames or iframes. If you want to use javascript, you can use AJAX. Most javascript frameworks provide corresponding convenience methods (e.g. jQuery's load function).

Obviously there are many server side solutions, including the popular SSI extension for apache (see other posts).


I'm not entirely sure what it is you want but an entirely client side method of doing it would be to embed them with the <object> tag.

<html>      <head>          <title>About Us</title>      </head>      <body>          <object data="header.html"><!--Something to display if the object tag fails to work. Possibly an iFrame--></object>          <!--Content goes here...-->          <object data="footer.html"></object>      </body>  </html>  

I do not think that this would work if either header.html or footer.html have javascript that accesses the parent document. Getting it to work the other way might be possible though.


Check out ppk's website (quirksmode.org), and go to the javascript archives, (http://quirksmode.org/js/contents.html). He uses an ajax function he wrote called sendRequest (found at http://quirksmode.org/quirksmode.js). Since IE9+ plays nice with standards, I've simplified it some:

function sendRequest(url,callback,postData) {      var req = new XMLHttpRequest();      if (!req) return;      var method = (postData) ? "POST" : "GET";      req.open(method,url,true);      req.setRequestHeader('User-Agent','XMLHTTP/1.0');      if (postData)          req.setRequestHeader('Content-type','application/x-www-form-urlencoded');      req.onreadystatechange = function () {          if (req.readyState != 4) return;          if (req.status != 200 && req.status != 304) {              //  alert('HTTP error ' + req.status);              return;          }          callback(req);      }      if (req.readyState == 4) return;      req.send(postData);  }  

Then use the sendRequest function by wrapping the setFooter, setHeader functions and any other content functions around it.


why not use php or any other side scripting language?

doing this with javascript will not all users allow to watch your page.


Whilst this can be done with JS in a number of ways (AJAX, iframe insertion) it would be a very bad idea not to do this within the mark-up directly or (much) better on the server side.

A page reliant on JS for it's composition will not be fully rendered on a significant proportion of user's browsers, and equally importantly will not be correctly interpreted by google et al, if they like it at all.

You can do it, but please, please, don't.


Obviously header.html and footer.html are not html files -- with full fledged headers etc. If you have just html snippets and you want to include them so you can create different pages - like aboutus.html, terms.html, you have a couple of options:

  1. Use a framework like Rails - which allows you to use layouts and partials. [** heavy **]
  2. Write a simple tool that will generate all the files by concat-ing the appropriate files.

I assume you are doing this to avoid duplicating header and footer content.


Another way would be using ajax to include the remote html files.


Framesets would be the way to do this without any script or serverside influences.

<frameset rows="100,*,100">      <frame name="header" src="header.html" />          <frame name="content" src="content.html" />      <frame name="footer" src="footer.html" />  </frameset>  

HTML5 framesets:http://www.w3schools.com/tags/html5_frameset.asp

This is a very dated solution, most web hosts will support server side includes or you could use php to include your files



Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »