How do you manage common HTML code ?

This is about HTML/CSS web sites (with no CMS)

[samscribe]

Hi,
I hope this is a suitable forum for this question.

I am building a web site with lots (well more than 10! potentially 100) pages,
Certain bits, like the navigation, the header, the footer are more or less the same on almost every page.

When coding a web site in pure HTML / CSS (ie not using a Content Management System software package or web site) how do you manage the common parts of the layout, without having to maintain it lots of times over?

Thanks
Jonathan

[not2easy]

As soon as I have worked out the appearance and layout I want then I save a page template. When I want a new page, I just open the page template and edit in the content for that page. The template uses placeholders in the head area for title, description meta. Planning is important so that you have a basic concept for navigation in mind from the beginning.

[tbear]

I have always used 'includes' for the common elements such as index, footers, etc. Well, after they became the thing, since, I started making sites in the 90s before their inception......
I generally used PHP includes.

[tbear]

Sorry, forgot to say....
Using includes allows updating across the site by editing one include file.

[not2easy]

Yes, includes allow you to have a basic sidebar that you edit one for the relevant areas of the site. Depending on the site structure, there may be one or more navigation menus and footers. The HTML5 semantic elements are quite handy to keep that part of your pages clearly visible to you or any assistants.

Some of us have noticed that the HTML5 semantic elements also make it easier for scrapers to snip out what they came for: [webmasterworld.com...] - It depends on how paranoid you are about your content.

[samscribe]

Thanks guys,

Templates are a problem if everytime the sidebar changes you have to upate 100 pages with the same edit - I think, unless there is some way of automating that.

Yes, "includes" of some kind would be what I am looking for.

I don't use PHP and am not aware of HTML5 includes - does such a thing exist?

Ah... I see there is a JavaScript solution: [w3schools.com...]
Maybe that's my best answer?

PHP includes do look a very neat solution, provided my web host provides PHP support - I will have to check that. I guess I would need to install PHP locally on a web server to test my site before upload to the web?

Jonathan

[lucy24]

I hope this is a suitable forum for this question.

Personally, I think it isn't. The question should be asked either in the HTML subforum, or in the subforum concerned with your specific server (Apache or IIS).

Now then! I think two different things are getting mixed up, leading to confusion.

#1 HOW you achieve the include. It can be done either within the programming language (such as php) that builds the page, OR it can be done as a Server Side Include (SSI in Apache). Mechanics will depend on your server type--Apache, IIS and so on--so questions should be posted in the appropriate subforum.

#2 WHAT is in the include. It can either be plain html that is added as-is to every page, or it can be in the programming language of your choice. Yes, you can include php content into a page with html extension and so on. A php-or-similar include can be dynamic, so you can for example make a page-specific navigation header while avoiding the annoyance of a page that links to itself (as would happen if you included the same raw html on all pages).

[timchuma]

In a database that auto generates the code? No wait, that would be a CMS.

I did have a MS Access database to auto generate the page code that I would upload back in the day. I did not think to turn it into a CMS as I was not familiar with that concept despite having built a training booking system that ran on top of SQL Server.

[Mark_A]

First I would include lots of comments in the page code so <-- menu starts --> <-- menu ends --> etc (I forget the proper code for a comment)

Then some programs permit you to do a find and replace across a range of html files.

So you go find this code (ABC) (in all selected files) and replace with this code (DEF) and job's a good un.

It isn't perhaps as neat as an include, but it can be done that way.

[lammert]

With pure server-side tools, this can be done with SSI includes as @lucy24 mentioned, or some scripting language include like available in PHP.

After programming in plain HTML, I started using server-side includes in the late nineties, then moved to PHP some years after. The problem I encountered is that once you get more grip on the possibilities of the web and dynamic responses to the user, the implementation of server-side includes is too clunky to adapt flexibly. It has the option for conditional loading of parts but never comes near the flexibility you get with a real scripting language.

Another way to manage pure HTML sites without using server-side scripting would be using an off-line HTML generator. Back in the early days, HTML generating packages working on an off-line PC were quite popular. They have been overtaken now by on-line CMS systems, but if pure HTML and maintainability are a must, you might look at this kind of website generators. It gives you the added advantage that you'll always have an off-line backup of your site.

[tangor]

Repeat text/stuff for each page should be SSI or scripted.

For peace of mind and keeping things straight, keep the NUMBER of such limited!

There's a temptation to overuse this technique.