linking multiple documents in html (not hyperlink !!)

[kumarboston]

Hi All,

Is there any way to link all the header and footer information from the main html(index.html) to all the pages, without actually typing them in all the pages.

I know this could be done in PHP but don't know in HTML.

As I have like 30 different HTML pages and each one has the same header and footer, and if i change something in index.HTML, then I have to change that in all the pages which is really frustrating.

Thanks for help

Kumar

[Brosert]

Use PHP

<?
include("header.html");
?>
 

.

[oler1s]

Is there any way to link all the header and footer information from the main html(index.html) to all the pages, without actually typing them in all the pages.

No, there isn’t. It’s frustrating, yes. Are you in a situation where you cannot use PHP or another language to combine the HTML document on the fly?

The two other options are to use Javascript and to use frames. Javascript makes you dependent on the client having JS enabled. If they don’t, you have a problem.

Frames bring their own problems, but at least all browsers support them as they are a part of HTML.

[kumarboston]

Thankyou so much for your suggestions.

Reply @ Brosert: If suppose I use the php to call the html header and footer, then do I need to have php installed in my computer or client computer who will visit my site and will it work in IE 5+, Firefox and Opera??


Reply @ oler1s: Regarding javascript, I am not very familar with that scripting language and futhermore as you suggested it will be browser dependend.
How to use frames in html page, that means if I use frames and can link it to other documents also??


Thanks for your reply
Kumar

[Brosert]

The PHP needs to be installed on the server that is hosting the web page - which if you're using a professional hosting service, it usually is!! - if you're using you're own server from home/work you would need to install it!

(Incedently, silly me didn't read that you weren't so interested in php solutions)

[veralee]

I had a similar problem... had to stick with html extention but include external file data. This is what worked for me... but of course it depends on Javascript.

This is the javascript, which in the example following is in a file called "include.js".

// for including file info
 
//load xml file
 
// code for IE
if (window.ActiveXObject) {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.load(includeFile);
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument) {
  xmlDoc=document.implementation.createDocument("","",null);
  xmlDoc.load(includeFile);
}
else {
  alert('Your browser cannot handle this script');
}
 
function setInclude(tags) {
  var ta=new Array();
    var tt=new Array();
    var ts=0, i;
  ta=tags.split(' ');
    ts=ta.join('');
    ta=ts.split(',');
  for(i=0; i < ta.length; i++) {
      tt=ta[i].split('>');
    document.getElementById(tt[1]).innerHTML=xmlDoc.getElementsByTagName(tt[0])[0].childNodes[0].nodeValue;
    }
}
 

Another file contains the text and html for the headers etc... or anything that goes on a bunch of pages. For the example it is called "include.xml".

 <?xml version="1.0" encoding="ISO-8859-1"?>
<includes>
 
 <header><![CDATA[
stuff... html code and text
<a href="stuff.html">stuff</a><br>
<font color="red">end</font> of stuff
 ]]></header>
 
 <footer><![CDATA[
put all the html & text for the footer here
 ]]></footer>
 
 </includes>
 

For the example there are just 2 items, "header" and "footer".

You have to define where you want the header and footer on the web page, and you can do that like this,

<div id="top"></div>
....
<div id="bottom"></div>
 

I used a different name for the ID just to indicate that you can... it could also have been named "header" and "footer".

Next we have to add some code in the head section of the web pages like so,

<script language="JavaScript" type="text/javascript">
var includeFile='/include.xml';
</script>
<script language="JavaScript" type="text/javascript" src="/include.js"></script>
 

The second line defines the file with the stuff to be included.
The fourth line gets the javascript.

Finally, on each web page we also need a onLoad call, like so,

<body onload="setInclude('header>top, footer>bottom')">
 

The body tag might of course contain other stuff, but here we make a call to "setInclude()". We pass to this function the names of the things in the xml file with the names of where they go in the web page div tags. For example here, the xml file stuff named "header" is sent to the div tag with the ID set to "top". That's what the ">" indicates. A comma and optional space separates each of these pairs. There can be as many pairs as needed. But if it's referenced in the setInclude then it needs to be defined in the web page with a unique ID and defined in the xml file also.

You can also make a transfer of something in the xml file to the web page via a onclick="setInclude('fromXMLitem>todivID')"

A thing I noticed is, if something on the page takes a long time to load, then the stuff that's supposed to be included will be a long time showing up... cuz the transfer can't happen till the load is done. But to get around that, you can put the slow-loading thing in the xml file instead of the web page, which will allow the page to get done loading quickly, and then bring the slow thing back to the web page with the onLoad call to setInclude().