Prasanth A R Prasanth A R - 3 months ago 20
CSS Question

Make header and footer files to be included in multiple html pages

I want to create common header and footer pages that are included on several html pages.

I'd like to use javascript. Is there a way to do this using only html and JavaScript?

I want to load a header and footer page within another html page.

Answer

You could do it with jquery. Put this code in index.html

<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

And put this code in header.html and footer.html at the same location as the index.html

<a href="http://www.google.com">click here for google</a>

Then visit the index.html, you should be able to click the link tags.