How is this problem usually solved without using sever-side scripting?

Question

Simple problem I have so far always solved via PHP:

You have a site with header, menu, footer and content field.

Header, menu and footer are usually the same for each page.

• How do you, without PHP or any other server-side language, have the header, menu and footer data exist only in one file?

So that for example you don't have ten pages (like home.html, products.html, about.html, ..) all having a copy of the static header and menu in their html files. Now if you want to change the header you have to change ten files.

I hope I made my question clear enough, if not please leave a comment :)

Answer 1

Frames can do this. Can't say much about the quality of the result though.

Answer 2

If you're using Apache, you can use server-side includes. These basically provide include statements within HTML documents.

Answer 3

There is couple of client side solutions, like various frames or javascript, but all of them either user- or SEO unfriendly.
Why?

Answer 4

if your host support shtml files, they have limited scriptability.

<!--#include file="included.html" -->

otherwise, for plain html, you're out of luck i'm afraid, unless you have some fancy javascript/ajax that does it.

Answer 5

One option that you have is to include the header in references JS file where you have document.write() wrapped around the header. Of course, I do not use this method for my own code since I usually do PHP or VB.

Answer 6

Could also do it entirely with client side scripting. Just execute some async requests to get static resources and inject them into the page. This is really just a JS version of frames and not the best way to approach the problem, but it'd work.

Answer 7

Don't know if it's exactly what you mean, but you can do this with SSI (server-side includes) instead of server-side scripting. SSI isn't scripting, it's just a way of including other files without writing any real code.

As for doing this without the server's help altogether, that's a different story. You're better off using the server to do this kind of thing. It feels dirty, you end up with weird files all over, and it's a pain to manage, but templates and includes do a fairly decent job of doing what you're looking to do.

Answer 8

The most obvious way I can think of that doesn't involve a server language (but does involve server-side processing) is server side includes.

Answer 9

If you had to, and without frames, ajax requests to get the data would be best. Though, as mentioned, would kill seo

Answer 10

If you can use javascript and jQuery, you can dynamically load header and footer using $.load. Not the most clean solution though.

Answer 11

The solution I like best is to, since you know PHP, produce a PHP script that, given a folder of templates, produces a folder of final HTML files for you to upload. Sounds like a decently easy task, actually.

Answer 12

The suggestions of using PHP include or Apache server-side includes are true, these would solve the problem.

But I suggest another option specific to PHP, if you know that every page has the same header and footer:

• auto_prepend_file

• auto_append_file

See docs at http://www.php.net/manual/en/ini.core.php

Answer 13

Use JavaScript templating, like that provided by Underscore or Closure. More likely: refuse to work for clients who will not pony up for appropriate web hosting, and are basing that decision solely on cost rather than what is appropriate for the site.