-1

I am making a website. I made separate Header and Footer files with separate css part.. I know only html and css. Plz tell me how to merge the header and footer for all the other pages. I am sending my code link from GitHub: https://github.com/AJITESH3210/WhatNext10-2 plz help me I am student of class 9 only.

I have sent the source code. I tried a lot but I was not able to do

AJITESH
  • 1
  • 1
  • please see https://stackoverflow.com/help/minimal-reproducible-example – MasterMind May 01 '21 at 10:26
  • 1
    Welcome to stackoverflow. Please take some time to read https://stackoverflow.com/help/how-to-ask. You should first research for your own, tell what you've tried to achieve the goal and add a [minimal reproducable example](https://stackoverflow.com/help/minimal-reproducible-example) to your question if possible. – biberman May 01 '21 at 10:27
  • 2
    Does this answer your question? [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) – biberman May 01 '21 at 10:29
  • do you want to merge your header and footer css code in everywhere? – Nazmul Hossain Pappu May 01 '21 at 10:54

1 Answers1

0

You can't import other files with html only. So, you have 3 methods to do this :

Server-side include (recommended) :

Use a server side language (like php) to import files.

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

see PHP include function

Files need to be php files, but you can write it like html files. It's better because page is rendered on server and the client receive the page with header and footer merged.

Client-side import :

Another method is to load differents parts with JS. Some frameworks (like Vuejs) comes with a components system. But, if you want to use vanilla js, you can use the fetch API

fetch('linkto/header.html')
    .then(x => x.text())
    .then(html => {
        document.getElementById('your-container-id').innerHTML = html
    })

see Fetch API

Pre render pages :

If you use an assets compiler (webpack, parcel, rollup ...), you can import html files, and the compiler will generate a new html file, in a /dist directory for exemple, with parts imported, and other options like minify.

I never used this technique but here is a link for a parcel plugin.

Arnooo
  • 206
  • 4
  • 6