-1

DISCLAIMER: I'm a complete newbie to programming. I've my experiences with editing code through trial and error, but I do not have any real knowledge.

I'm looking to build a website from scratch. How do I make it so that I don't have to paste the same header/footer code to every page? I'd assume that there is a designated file for the header/footer; on the pages which I want to include the header/footer, I would have to include a line of code to call it?

Also found this similar question/topic/thread: Use same header and footer on all webpages

Eager to Learn
  • 21
  • 6
  • 2
    Not by default, no. This depends entirely on what server you're using. If you're using Node, Uttam's answer is probably solid. If you're using PHP, you can insert the header/footer with a simple PHP command. If you're using Ruby, the ERB template language can do the same thing PHP can. – Silvio Mayolo May 22 '21 at 04:35

2 Answers2

0

I asked this question, and got responses that were way out of the league.

Even without using the proposed ideas, I found a way to incorporate DOM manipulation into it.

  1. I defined the content that will be on multiple pages. In my case, it was just text.
  2. I created a JavaScript file, and set the text to a variable.
  3. Find the HTML Element, and change the element via: document.getElementByID("").innerHTML

This was an extremely simple way of doing it. Maybe it's not encouraged or correct.

Eager to Learn
  • 21
  • 6
-2

if you are looking to do it using just Html there is no possible way, but you can use JavaScript inside your html to create a custom attribute which will include your html files. You can read more about it here - template tag examples

This is not the best solution for this, I won't personally recommend you to do this as you are a beginner. This might be overwhelming at first but you don't need to understand or learn it right now. For a quick example -

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test File</title>
</head>
<body>

    <div include-your-html = "header.html">
    <!--Cosidering I have header.html file in the same directory-->
    <p>This is my body</p>
    <div include-your-html = "footer.html">
    <!--Cosidering I have footer.html file in the same directory-->
    
    <!--You can use this script to set the attribute-->
    <script>
    function includeHTML() {
        var z, i, elmnt, file, xhttp;
        z = document.getElementsByTagName("*");
        for (i = 0; i < z.length; i++) {
            elmnt = z[i];
            file = elmnt.getAttribute("include-your-html");
            if (file) {
                xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4) {
                        if (this.status == 200) {elmnt.innerHTML = this.responseText;}
                        if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
                        elmnt.removeAttribute("include-your-html");
                        includeHTML();
                    }
                }
                xhttp.open("GET", file, true);
                xhttp.send();
                return;
           }
       }
    }
    includeHTML()
    </script>
</body>
</html>

For some of the people this may be blocked due to CORS policy, you can set up a CORS proxy to get around this. More detailed information at sideshowbarker's answer here

Utkarsh Tyagi
  • 1,379
  • 1
  • 7
  • 12