2

I have some ten html pages each page also has same header and footer tag can i have one page with complete header and footer ,and i will refer to that particular page from other html pages.

mahesh
  • 3,067
  • 16
  • 69
  • 127

6 Answers6

6

If you don't care about users who have JavaScript disabled, or are using some mobile platforms, you can use JavaScript to do it.

headerfooter.js

window.onload = function ()
    {
        var header = document.getElementById('header');
        var footer = document.getElementByID('footer');

        header.innerHTML = "<h1>My website</h1><h2>Rules</h2>";
        footer.innerHTML = "<small>This code is in the public domain</small>";
    }

page.html

<html>
  <head>
    <script type="text/javascript" src="headerfooter.js"></script>
  </head>
  <body>
    <div id="header"></div>
    ... Your content ...
    <div id="footer"></div>
  </body>
</html>

But don't do this, it's user unfriendly, and unprofessional. Just stick with either using php, or building a solid template which doesn't need to be edited much later.

Randy the Dev
  • 25,810
  • 6
  • 43
  • 54
4

You do this by using a server side language like PHP or another one of the myriad different languages out there, which pre-processes the page. Something along these lines:

<?php include 'header.html'; ?>

... page contents...

<?php include 'footer.html'; ?>
deceze
  • 510,633
  • 85
  • 743
  • 889
  • Thanks for the reply , is their any way to do on the clientside without using any serverside controls. – mahesh Sep 28 '10 at 04:32
  • @mahesh I guess you *could* do it in Javascript if you're so inclined (fetch header and footer files via AJAX, inject into DOM), but I really wouldn't recommend it. You'll also still have to repeat a certain amount of HTML preamble this way anyway. – deceze Sep 28 '10 at 04:35
  • I am using asmx webservices on the serverside . – mahesh Sep 28 '10 at 04:41
  • You can do this using XSLT on the client. All modern browsers have decent XLST support, including IE6. :) – Dagg Nabbit Sep 28 '10 at 04:49
  • Is thier any way of using contentplaceholder like control which is used in asp.net for html pages – mahesh Sep 28 '10 at 04:53
1

What's your server side scripting language? You can do what is called an "include."

The exact syntax depends on the language(s) your web server supports.

Chris Adragna
  • 625
  • 8
  • 18
  • I am using webservices on serverside with c# coding,I want my html to be plain without using any asp tags into it is thier any way to do it on the clientside – mahesh Sep 28 '10 at 04:38
  • Yes, with XSL include. I have to say it's probably better to do it server side because you know for certain it will get included going to the browser. – Chris Adragna Sep 28 '10 at 04:54
1

Presuming the "master-pages" tag on the question refers to ASP.NET, here's a Super Link. Ps. You should give Ruby on Rails a try as well :)

Zabba
  • 64,285
  • 47
  • 179
  • 207
0

Use Django. The best thing out there when you get a hang of it :)

premik91
  • 89
  • 1
  • 1
  • 7
0

Absolutely we can Avoid Writing same code like header and footer on multiple pages by having just a single header and footer content defined and use it on all pages.

Lets assume you have header and footer elements in your index.html for example as shown below:

<header id='header'>
<!-- Code-->
</header>

<!---Body contents -->

<footer id='footer'>
<!-- Some code-->
</footer>

Use JavaScript to store header and footer contents in a variable

<script>
var header_content = '<!-- Code for header---> ;
var footer_content = '<!-- Code for footer---> ;

var header_element = document.getElementById('header');
var footer_element = document.getElementById('footer');

header_element.innerHTML = header_content;
footer_element.innerHTML = footer_content;
</script>

Use this script on pages you would like to add header and footer and enjoy the power of JavaScript.

Code Duplication must be minimum in our document as it increases redundancy(Extra content not actually needed)/size of document + its really unprofessional to have same code repeated over and over again.

We can discuss this topic of Code Duplication in much greater depth with lots of cons(Disadvantages) and Less pros(Advantages).

JavaScript is the best solution because no server-side scripting needed, only Client side scripting and yeah for this to work, your client side browsers must have JavaScript Enabled that's default for major browsers nowadays.

Jay Bharadia
  • 16
  • 2