0

Good night everyone. I would like to know how to ass header or footer on an html page: I have my index.html and then other html pages. I use the same navigation bar and header / footer in almost every page. I don't want to go on every .html file and change the header on each and everyone of them every time something changes. Therefore I want to have a header.html file and then include it on every page, so I just have to edit one single file and it updates the rest. I know someone told me I can do it on php but I wanted to do it on html first, because I would like to not need a server to see the page in the mean time. I searched and tried every thing I saw on the internet, for instance the href and other things and for me, it did not work. Thanks in advance!

Jess
  • 81
  • 10
  • http://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages – Nick Feb 23 '17 at 21:43
  • It did not work... Please help! http://prntscr.com/ecr3b1 – Jess Feb 24 '17 at 09:35

1 Answers1

-1

This will require you to use either JavaScript or PHP to remove the redundancy of code in multiple web pages. With Javascript, you could have an empty div tag with id attribute and attach a JS method on an event HTML attribute, possibly onLoad. Then call a JS method on that event onLoad=populate() and in that method, you can do something like document.getElementById("divID").innerHTML = 'HTML code here' This is what it would look like: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>

<body onload='populate(example)'>
    <div id="example"> </div>

<script type="text/javascript">
    function populate(divID){
        document.getElementById(divID).innerHTML = "<h1> HELLO! </h1>"
    }
</script>
</body>

</html>

You can call this header.js instead of having the JS code in the HTML file and import that script into multiple HTML docs with 1 line:

<script src="folder/to/header.js"></script>

With PHP, you would create a module called HeaderView and include that into your HomepageView.php file. It's up to you to choose between them. HTML and CSS are purely static, hardcoded web pages. JavaScript and/or PHP are used to make them dynamic. This method is a bit more complicated.

btramisetty
  • 89
  • 1
  • 9