CODEWITHSUNDEEP
htmltemplates
maxjackie
maxjackie

Reputation: 23322

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?

Upvotes: 4

Views: 3434

Answers (11)

d34dIO
d34dIO

Reputation: 81

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

http://php.net/manual/en/function.include.php

Cheers

Upvotes: 0

javanaut
javanaut

Reputation: 21

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.

Upvotes: 2

Sinan &#220;n&#252;r
Sinan &#220;n&#252;r

Reputation: 118166

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.

Upvotes: 3

GameFreak
GameFreak

Reputation: 2931

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.

Upvotes: 2

Josef Pfleger
Josef Pfleger

Reputation: 74557

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).

Upvotes: 2

annakata
annakata

Reputation: 75872

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.

Upvotes: 1

knittl
knittl

Reputation: 265864

why not use php or any other side scripting language?

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

Upvotes: 1

yann.kmm
yann.kmm

Reputation: 837

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

Upvotes: 0

Ryan Oberoi
Ryan Oberoi

Reputation: 14505

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.

Upvotes: 0

Alan Haggai Alavi
Alan Haggai Alavi

Reputation: 74272

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.

Upvotes: 6

PhilS
PhilS

Reputation: 1279

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

Upvotes: 4

Related Questions