CODEWITHSUNDEEP
htmltemplates
Eric
Eric

Reputation: 2128

HTML Template File

I know this is a beginner's question, but I've been searching online and all I can find are "free website templates" that I can download.

The question is: How can I write a segment of HTML in a single file, and then load that exact same segment into any other HTML files that I choose?

The intent is so that if that segment changes, I would only have to change 1 file, rather than 10's/100's/1000's/etc.

For example, I might want to define a menu bar like this:

<a href="./Test1">Test1</a> <br />
<a href="./Test2">Test2</a> <br />
<a href="./Test3">Test3</a> <br />

And then, so I don't have to keep repeating that same code in every single file, I could just link to this menu bar. Maybe something like:

<html>
   <!-- Load "Menu Bar" file -->
   <!-- Place the menu bar right here -->

   Thanks for visiting my web page. Please navigate with the menu bar above.
</html>

Thanks.

Edit: Though it might sound trivial, I wanted to make a few HTML pages to manage some of my personal files and data. As programmers, we of course do not like to repeat ourselves. My initial thought was that this was as simple as linking to a CSS file, but I see now it is more complicated, though I'm not sure (from a technical standpoint) why it has to be. In any case, since I'll be viewing the files on my own machine, I suppose I can install something like PHP to aid my efforts.

Upvotes: 0

Views: 4717

Answers (6)

Spikeh
Spikeh

Reputation: 3695

There are a few ways you can do this, but first of all we must establish what hosting environment you'll be running your site on. It's also completely dependant on what you're trying to achieve - are you programming, or just simply including a HTML page in another HTML page?

If your web-host allows you to run back-end code like Classic ASP, ASP.NET, PHP, MVC, Ruby or Perl, then each one has one or more methods to include files.

It's possible (though I haven't used this for a long, long time) that you can use an SSI directive within your HTML file. This is usually web-server dependant, rather than language dependant, and you can read more about it here. It's the easiest way to include files, but it has a lot of limitations.

Alternatively, you could use AJAX to retrieve a page from your server and update the HTML in your page dynamically. Remember though, that this relies on the user having JavaScript enabled, and requires a bit more effort on your side.

Upvotes: 0

Oded
Oded

Reputation: 498924

You are describing server side includes.

Server Side Includes are useful for including a common piece of code throughout a site, such as a page header, a page footer and a navigation menu.

Example of usage:

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

This will add the text of quote.txt to the page - if you add it to multiple pages, you can make your change in this one file and it will show on all pages in was included in.

Different web servers have different support and additional features for these, so you need to check the documentation for yours.

Many websites that need dynamic features (like fetching data from a database) will use some kind of server side scripting language for this kind of functionality - examples include PHP, Perl, ASP.NET, JSP and many more.

Upvotes: 1

Quentin
Quentin

Reputation: 943163

There are two places you can do this:

  1. Server side programming at runtime (which allows for quick updates to templates but needs server support)
  2. Something at build time (which simplifies cache control and doesn't require anything to run on the server)

The two basic approaches to this are includes (simple) and full template systems (powerful).

For a runtime include system, the popular choice is PHP's include function. An alternative is SSI. You can even use a C preprocessor.

Template systems include PHP's Smarty.

My weapon of choice is Template-Toolkit, which can be used via Perl at runtime and comes with ttree for use at build time.

Less sane options involving making the client do it and include frames and JavaScript.

Upvotes: 1

kaj
kaj

Reputation: 5251

For plain HTML you just use include: 

<!--#include FILE="menu.inc" -->

Upvotes: 1

Simon West
Simon West

Reputation: 3788

This kind of behaviour can only (sensibly) be achieved through the use of sevrer side languages like php or asp.

Non-sensible ways of handling this would include iframes blech or framesets double-blech.

Upvotes: 1

user17753
user17753

Reputation: 3161

Typically a server-side scripting language such as PHP is used to dynamically include such files. Client-side solutions usually involve iframes, etc. which is usually not preferred.

Upvotes: 1

Related Questions