Header across multiple pages

Question

I am wondering how can I send my header element over multiple pages. I have viewed the article and there are a lot of information, however it did not work in my case. I need more of understanding before I can implement the practices from the article. Can you please help me with more detailed explanation please? This is my code which I want to send over number of pages.

<header id = "header">
        <div class = "logo">
            Work Along
        </div>
        <div class = "pages">
            <a href = "index.html" id = "Gallery">Gallery Walls</a>
            <a href = "#contact">Story</a>
            <a href = "https://www.instagram.com/studio/" target = "_blank" class="fab fa-instagram" id = "icon"></a>
            <i class="fas fa-store" id = "icon"></i>
        </div>
    </header>

you could use php for instance to include the file across multiple pages. — Jonathan Akwetey Okine, Aug 19 '20 at 15:11
php or ejs both great choices. Not the kind of thing you'll get a detailed answer for though, you're not showing any work or any of your progress. Place your question title in youtube and learn something. — Thanos Dodd, Aug 19 '20 at 15:14
option A ) use html framesets (html < 5 only), Option B) use a client side rendering library like vue.js, angular or react, Option C) use a server side language like PHP, ASP etc — Dev Man, Aug 19 '20 at 15:16

score 0 · Answer 1 · answered Aug 19 '20 at 15:52

0

I would Say PHP too with the include, in HTML there is a way, but it's not good to use it, iframes.

answered Aug 19 '20 at 15:52

Anton

61
8

G-Cyrillus · Answer 2 · 2020-08-19T19:32:08.297

You could use JavaScript to create an HTML template and insert it inside body.

here is an example

// to put inside myHeaderFooterTemplate.js at the same level of your html pages 

// create a header 
let header = document.createElement('header');
//make the HTML template to insert inside your header 
let headerContent = `<h1>HTML Ipsum Presents</h1>
<nav><a href="#">link 1</a> <a href="#">link 2</a></nav>
<p>some more text to spray all over the site</p>`;
//insert the header right before anything else
document.querySelector('body').prepend(header);
// fill your header with HTML template
document.querySelector('body>header:first-of-type').innerHTML = headerContent;

// Now again with a footer:

let footer = document.createElement('footer');
document.querySelector('body').append(footer);


let footerContent = ` 
<nav><a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> <a href="#">link 4</a></nav>
<p>some more text to spray all over the site</p>`;


document.querySelector('body>footer:last-of-type').innerHTML = footerContent;

/* you can style those element added to your HTML alike anyother */
header,footer {background:#bee;border:solid 1px #0008;text-align:center;}
footer nav {display:flex;justify-content:space-around;border-bottom:ridge}

<script src="myHeaderFooterTemplate.js"></script>
<!-- let say this is index.html header and footer will be inserted via a javascript -->
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
  tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
  elit sit amet quam. Vivamus pretium ornare est.</p>

Ressouces to understand what javascript does here :

and last how to link your javascript to your html document : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Header across multiple pages

2 Answers2