How to load external html code to web page?

Question

I have many similar pages with the same heading, menu and footnote. If I want to make a change to one of these, do I have to make the change to every individual page or can I call an external file that includes html code, change it there and the changes will apply to all pages? Sort of a template.

Anonymous · Accepted Answer

This is one of the most common reasons to use a server-side language like PHP, ASP.NET, or cold fusion. It's pretty trivial to use the include statement in these languages to include code before it's been presented to the user. Content management systems do this sort of thing all the time.

Here's a rough outline (done in PHP)

<html>

<head>

</head>

<body>

<?php include("menu.html") ?>

<?php include("main.html") ?>

</body>

</html>

If you don't want to (or can't) use a server-side language, there are two other alternatives. Check to see if your server allows SSI (server-side includes) This technology tells the server to preview a file and incorporate parts into the original:

<html>

<head>

</head>

<body>

</body>

</html>

Note that you may have to alter the file extension (.shtml) to make your server perform the includes.

Recently people have been using AJAX to perform the same process with Javascript. If you use a tool like jquery (a free download from http://jquery.com/ ) you can include text or HTML with basic JavaScript:

<html>

<head>

src = "jquery-12.1.js"></script>

$(document).ready(function() {

$("title").load("title.txt");

$("#menu").load("menu.html");

$(#main").load("main.html");

} );

</script>

</head>

<body>

</div>

</div>

</body>

</html>

The great thing about the AJAX approach is how clean it leaves the HTML. All the work is done in the script. The AJAX solution (unlike the other two solutions) will work on any server, without any special software or server configuration necessary. It will not work on very old browsers, but it does work fine on most reasonably up-to-date browsers.

For more information on these and related topics please see my upcoming book (available in May)

Good luck!

Andy L · Answer

When using SHTML, or PHP, or Coldfusion, or many other languages - you can use what is called an "include". Which does exactly what you want, include a single file on multiple pages so that you only have to edit code in one place.

However, and im more than willing to be corrected on this, I don't think there is any way to use includes in bog-standard HTML.

Edit: or use templates like pete says - silly me!

Anonymous · Answer

Depends on your editor...

A .dwt file is a Dynamic Web Template that some editors, such as Dreamweaver and Expression web work with. Of course, you have to create the template first, then spawn each individual page from it to make this work. Also, you have to include 'editable regions' in the template to make it workable. This is all pretty easy to get down in both Dreamweaver and Expression.

I'm not sure about other editors or how they create template files.

? · Answer

You raise some good points here.

Anonymous · Answer

ia m sure there is ... just that noone deals with frames anymore. read up css on w3

Anonymous · Answer

Interested in this as well

Trending News

How to load external html code to web page?

6 Answers