How to add the same header and footer to all pages at once? HTML

Question

I'm trying to figure out how to upload the same header and footer from my index to all pages, without having to edit all of them after that if I change/add something to the header and footer. I'm using CSS and JS to my HTML pages. you can check the main page here.

If it helps, those are the following codes:

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Da Montanha | Esporte e Aventura em Curitiba</title>
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
<link href="css/custom.css" rel="stylesheet" type="text/css">
 
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
 
<link href="css/color.css" rel="stylesheet" type="text/css">
 
<link href="css/responsive.css" rel="stylesheet" type="text/css">
 
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
 
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
<link href="css/datepicker.css" rel="stylesheet" type="text/css">
 
<link href="css/iconmoon.css" rel="stylesheet" type="text/css">
 
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
 
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,600" rel="stylesheet" type="text/css">
</head>
<body class="campers-theme">
 
<div id="wrapper">
 
<header id="header">
 
<section class="topbar-section">
<div class="container">
<div class="col-md-6">
<div class="top-social">
<ul>
<li><a href="https://instagram.com/DaMontanhaAventura" target="_blank"><i class="fa fa-instagram" target="_blank"></i></a></li>
<li><a href="https://www.youtube.com/channel/UC2xNehgiy7AJzThAxQJqA3A" target="_blank"><i class="fa fa-youtube-square" target="_blank"></i></a></li>
<li><a href="https://facebook.com/DaMontanhaAventura" target="_blank"><i class="fa fa-facebook-f" target="_blank"></i></a></li>
</ul>
<a href="mailto:contato@damontanha.com.br" class="email"><i class="fa fa-envelope-o"></i><span class="__cf_email__" data-cfemail="">contato@damontanha.com.br</span></a> <script data-cfhash="f9e31" type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> </div>
</div>
<div class="col-md-6">
<div class="register-login">
<ul>
<li><a href="login.html"><i class="fa fa-key"></i>Login</a></li>
<li><a href="registrar-se.html"><i class="fa fa-unlock"></i>Registrar-se</a></li>
</ul>
</div>
</div>
</div>
</section>
 
 
<section class="logo-section">
<div class="container">
<div class="col-md-6"><strong class="logo"><a href="index.html"><img src="images/logo.png" alt="logo"></a></strong></div>
<div class="col-md-6">
<div class="book-section"> <a href="booking-form.html" class="btn-book">Orçamentos</a>
<div class="number-box"> <i class="fa fa-whatsapp"></i>
<div class="number-text"> <span>Entre em Contato</span> <strong>41 99613 6600</strong> </div>
</div>
</div>
</div>
</div>
</section>
 
<div id="cp-slide-search" class="cp_side-search">
<form method="get">
<input type="text" placeholder="Digite o que procura..." required>
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
 
<section class="main-navigation">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="nav-outer">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="nav">
<li class="active"><a href="#">Início</a>
</li>
<li><a href="Aventuras.html">Aventuras<i class="fa fa-caret-down"></i></a></li>
<li><a href="events-large.html">Eventos</i></a></li>
<li><a href="products.html">Loja</i></a></li>
<li><a href="#">Páginas<i class="fa fa-caret-down"></i></a>
<ul>
<li><a href="blog-large.html">Blog</i></a></li></li>
<li><a href="booking-form.html">Orçamento</a></li>
<li><a href="team.html">Nosso Time</a></li>
<li><a href="gallery-1.html">Galeria de fotos</a></li>
<li><a href="testimonials.html">Depoimentos</a></li>
</ul>
</li>
<li><a href="about.html">Sobre Nós</a></li>
<li><a href="contact.html">Contato</a></li>
</ul>
</div>
<div class="nav-right-col">
<div class="cart-box-outer">
<div class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="fa fa-shopping-cart"></i> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="cart-box"> <strong class="title">Você tem <a href="products-detail.html">1 item(s)</a> no seu carrinho.</strong>
<div class="cart-row">
<div class="thumb"><a href="products-detail.html"><img alt="img" src="images/cart-img.jpg"></a></div>
<div class="text-box"> <a class="close" href="#"><i class="fa fa-close"></i></a> <a href="products-detail.html">BestWedding Camping Equipment</a> <strong class="amount">1 x R$59.00</strong> </div>
</div>
<strong class="subtotal">Subtotal: <span>R$59.00</span></strong>
<div class="btn-row"> <a class="btn-checkout" href="products-detail.html">Checkout</a> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="top-search"> <a href="#" class="search-icon" id="search-push"><i class="fa fa-search"></i></a> </div>
</div>
</div>
</div>
</div>
</nav>
</section>
 
</header>

<footer id="footer">
<section class="instagram">
<div class="container">
<h2>We’re on Instagram</h2>
</div>
<ul>
<li><a href="#"><img src="images/instagram/instagram-img-1.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-2.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-3.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-4.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-5.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-6.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-7.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-8.jpg" alt="img"></a></li>
</ul>
</section>
 
<section class="footer-section-1">
<div class="container">
<div class="row">
<div class="col-md-4"> <strong class="footer-logo"><a href="#"><img src="images/footer-logo.png" alt="logo"></a></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam laboris nisi ut aliquip ex ea commodo conseque Duis aute irure dolor in reprehenderit</p>
<a href="about.html" class="btn-style-2">Read More</a> </div>
<div class="col-md-4">
<h3>More Services</h3>
<div class="row">
<div class="col-md-6">
<div class="footer-box">
<ul>
<li><a href="#">Free Parking</a></li>
<li><a href="#">Free Wifi Area</a></li>
<li><a href="#">Restaurant</a></li>
<li><a href="#">Free Hot Shower</a></li>
<li><a href="#">Swimming Pool</a></li>
<li><a href="#">Shaded Pitches</a></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="footer-box">
<ul>
<li><a href="#">Laundry</a></li>
<li><a href="#">Hairdresser</a></li>
<li><a href="#">Digs Area</a></li>
<li><a href="#">Barbecue Station</a></li>
<li><a href="#">Ping Pong Table</a></li>
<li><a href="#">Coffee Bar</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="footer-box">
<h3>Contact us</h3>
<address>
<ul>
<li> <span><i class="fa fa-home"></i></span>
<div class="text-box">
<p>123 Lorem Ipsum Avenue,<br>
Campers Road, NY, U.S.A.</p>
</div>
</li>
<li> <span><i class="fa fa-phone"></i></span>
<div class="text-box">
<p>Call us for any Query</p>
<strong>44 01234 5678</strong> </div>
</li>
<li> <span><i class="fa fa-envelope-o"></i></span>
<div class="text-box">
<p>Send us email for any Information</p>
<a href="mailto:"><span class="__cf_email__" data-cfemail="caa3a4aca58aa9aba7baafb8b9e4a9a5a7">[email&#160;protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> </div>
</li>
<li> <span><i class="fa fa-clock-o"></i></span>
<div class="text-box">
<p>Office Timings</p>
<strong>09:00 - 19:00</strong> </div>
</li>
</ul>
</address>
</div>
</div>
</div>
</div>
</section>
 
 
<section class="footer-section-2">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="footer-socila">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i>twitter</a></li>
<li><a href="#"><i class="fa fa-facebook-f"></i>facebook</a></li>
<li><a href="#"><i class="fa fa-google-plus"></i>google plus</a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i>linkedin</a></li>
</ul>
</div>
</div>
<div class="col-md-6"><strong class="copy">2016 &copy; Campers, Powered by: <a href="http://crunchpress.com/" target="_blank">Crunchpress</a></strong></div>
</div>
</div>
</section>
 
</footer>
 
</div>
 
 
<script src="js/jquery-1.12.2.min.js"></script>
 
<script src="js/bootstrap.min.js"></script>
 
<script src="js/owl.carousel.min.js"></script>
 
<script src="js/jquery.noconflict.js"></script>
<script src="js/theme-scripts.js"></script>
 
<script src="js/zebra_datepicker.js"></script>
 
<script src="js/function.js"></script>
 
<script src="../../cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
 
<script src="js/jquery.countdown.min.js"></script>
 
<script src="js/custom.js"></script>
<script type="text/javascript">/* <![CDATA[ */(function(d,s,a,i,j,r,l,m,t){try{l=d.getElementsByTagName('a');t=d.createElement('textarea');for(i=0;l.length-i;i++){try{a=l[i].href;s=a.indexOf('/cdn-cgi/l/email-protection');m=a.length;if(a&&s>-1&&m>28){j=28+s;s='';if(j<m){r='0x'+a.substr(j,2)|0;for(j+=2;j<m&&a.charAt(j)!='X';j+=2)s+='%'+('0'+('0x'+a.substr(j,2)^r).toString(16)).slice(-2);j++;s=decodeURIComponent(s)+a.substr(j,m-j)}t.innerHTML=s.replace(/</g,'&lt;').replace(/>/g,'&gt;');l[i].href='mailto:'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script></body>

<!-- Mirrored from html.crunchpress.com/campers/blog-details.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 24 Nov 2016 12:21:10 GMT -->
</html>

If you want to do it without PHP you are going to need a template engine, like handlebars.js for instance — Iván Rodríguez Torres, Dec 22 '16 at 19:32
I gonna search for tutorials on how to use this, if you know some, please let me know! And thank you very much for your help! — Tiago Kotryk, Dec 22 '16 at 19:44

score 3 · Accepted Answer · answered Dec 22 '16 at 19:29

3

you can put them in php files, header.php and footer.php
and then just include them wherever you want
<?php include('header.php') ?>
html code
<?php include('footer.php') ?>

answered Dec 22 '16 at 19:29

Taki

15,354
3
20
39

Where did he specify this question is for PHP? – prateekkathal Dec 22 '16 at 19:29
he didn't, so i'm assuming he's open for all suggestions – Taki Dec 22 '16 at 19:30
Thanks for your suggestion, to be honest I don't know how to work with PHP, I tried to do what you said but it didn't work, I guess I should change something else so the page can read the code? – Tiago Kotryk Dec 22 '16 at 19:42
what are you using for the backend ? – Taki Dec 22 '16 at 19:45
I figured it out, thanks @Taki. Btw, the code that worked for me whas with the ; – Tiago Kotryk Dec 23 '16 at 04:56

score 2 · Answer 2 · answered Dec 22 '16 at 20:09

You can use routing feature in angularJS. you can check the example below. Here you can have multiple contents which you can dynamically bind it to your page. So you will have a fixed header and footer content.

<body ng-app="myApp">

    <p>header</p>

    <a href="#content1">content1</a>
    <a href="#content2">content2</a>
    <a href="#content3">content3</a>

    <div ng-view></div>


    <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
        .when("/", {
            templateUrl : "content1.htm"
        })
        .when("/content1", {
            templateUrl : "content1.htm"
        })
        .when("/content2", {
            templateUrl : "content2.htm"
        })
        .when("/content3", {
            templateUrl : "content3.htm"
        });
    });
    </script>
<p>footer</p>
</body>

score 0 · Answer 3 · edited May 23 '17 at 10:30

0

To do it without a server-side language, You will have to use JavaScript to load in your templates. See the several ways you can do that from answers to this question.

Include another HTML file in a HTML file

Basically, you would have to use jQuery or something like it to make an AJAX request to pull in the HTML.

edited May 23 '17 at 10:30

Community

1
1

answered Dec 22 '16 at 19:35

JDavis

3,030
1
20
22

Thanks @JDavis, I gonna try these codes: `
Put here your HTML content before insertion of b.js.
... ...
And here whatever content you want afterwards.
` js `document.write('\ \
Add your HTML code here
\ \
Notice however, that you have to escape LF's with a '\', just like\ demonstrated in this code listing.\
\ \ ');` – Tiago Kotryk Dec 22 '16 at 19:49

How to add the same header and footer to all pages at once? HTML

3 Answers3

Put here your HTML content before insertion of b.js.

Add your HTML code here