12

I started creating web pages in plain HTML. I have a header, main content and a footer. The main content is divided into two, left and right content. Everything is the same on all pages except for the right content. Now I have about 15 pages. This is very tiresome if I make some changes on the other static pages (header, footer and left side content) as I have to go through all pages.

How can I create one HTML file for each static area and how am I going to integrate it?

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Saint Dee
  • 985
  • 6
  • 21
  • 43
  • This isn't properly called a "template". A template is a generic structure that gets loaded with variable fields, like a mail-merge. What you're describing are simply reusable HTML chunks. – johny why Nov 27 '22 at 20:15

3 Answers3

15

There are, essentially, three places you can do this:

  1. At build time. Run a script that puts the pages together and outputs static HTML. Then upload the static HTML to the server. Back in 2013 I recommended ttree, but these days static site builders are common and more powerful. My projects tend towards Gatsby (for complex projects) and Metalsmith (for simpler ones). Jekyll is very popular (and Github provides documentation for using it with GH Pages).
  2. At runtime on the server. This could be a simple SSI, a PHP include or a full template system (of which there are many, including Template Toolkit and mustache), possibly running inside an MVC framework (such as Catalyst or Django). This is the most common approach, it has less time between making a change and putting the result life then doing the templating at build time.
  3. At runtime on the client. This adds a dependency on client-side JavaScript (which can be fragile and unfriendly to search engines), so I wouldn't recommend it unless you already had a server-side or build-time solution in place. Gatsby, for example, is a static site generator that builds a React frontend backed by static pages.
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
6

There are a couple of ways to do this.

If you are working purely with HTML, then you can use a 'server side include' -- this is a tag which allows you to load a file into the page (see http://en.wikipedia.org/wiki/Server_Side_Includes). Whoever is hosting your website has to support this.

<!--#include virtual="../quote.txt" -->

If youe web host happen to use PHP, you can do this using the include method (see http://php.net/manual/en/function.include.php):

<?php include('path_to_file/file.htm');?>

This will include the file at the point you place the tag. But again, whoever is hosting your site needs to support this.

There are other methods of doing this, bit these are the two I make use of.

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
swshaun
  • 384
  • 1
  • 4
  • 12
  • I am currently building the site on my local machine using wampserver. I have followed the steps to do this but it doesn't seem to work. Is it necessary to rename all files to .shtml? I want to preserve the html extension due to the old website that's been running for years and I don't want the google cache to be wasted. I have added this to the wamp apache config: `AddType text/html .shtml Options +Includes AddOutputFilter INCLUDES .shtml ` – Saint Dee Apr 22 '13 at 09:58
  • As it happens... I use WAMP server as well :) The `` is the easiest method to use as PHP should be enabled by default. That way there is no need to amend the Apache config file. You do not need to amend the extensions of your files if you use this approach. – swshaun Apr 23 '13 at 18:13
  • try replacing `.shtml` with `.html` after `INCLUDES`. that should make the server include files in files with the .html extension – maxpelic Apr 22 '19 at 13:06
-1

Well... what you’re looking for is called "Master Page" and unfortunately it isn’t available in html however you can use the <iframe> tag but it would make your website look really ugly. i would suggest you to use a programming language such as PHP its much easier that way.

but if you want to use <iframe> then They’ll load remote pages into your website, so you could define a "Master Page" like this:

<body>
  <div id="content">
    <iframe src="content1.html"></iframe>

Now, inside of content1.html, you could just write the content without the main layout

Murtaza Noori
  • 31
  • 4