'Multiple webpages with common title and navigation bars

I'm making a small personal academic website, which has multiple pages with a common structure.

Question: Is there a way to not repeat the code for the header and the menu (or navigation bar) in each of the html files? It would be great if I could put the code for the header and menu in another file, e.g. header.html and write a statement such as \input{header.html} (using TeX syntax) to include the file into index.html and publications.html.

Below is an example of what the website looks like.

Contents of index.html:

<!DOCTYPE html>

<html>
    <head>
        <title>The Title</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <div id="header">
            <h1>My Name</h1>
        </div>

        <div id="menu">
            <p>
                <a href="index.html">Home</a>
                &nbsp&nbsp
                <a href="publications.html">Publications</a>
                &nbsp&nbsp
                <a href="contact.html">Contact</a>
            </p>
        </div>

        <div id="content">
            <p>
                This is my academic webpage.
            </p>
            <p>
                I am a 15th year PhD student in Filmmaking at Mickey's Institute of Technology (MIT).
            </p>
        </div>
    </body>
</html>

Contents of publications.html:

<!DOCTYPE html>

<html>
    <head>
        <title>The Title</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <div id="header">
            <h1>My Name</h1>
        </div>

        <div id="menu">
            <p>
                <a href="index.html">Home</a>
                &nbsp&nbsp
                <a href="publications.html">Publications</a>
                &nbsp&nbsp
                <a href="contact.html">Contact</a>
            </p>
        </div>

        <div id="content">
            <ol>
                <li>Snow White and the Seven Dwarfs, 1937</li>
                <li>Pinocchio, 1940</li>
                <li>The Reluctant Dragon, 1941</li>
            </ol>
        </div>
    </body>
</html>

Contents of stylesheet.css:

    body {font-size: 16px; line-height: 20px; font-weight: light; color: #250517; /*gray*/}
    a:link {text-decoration: none; color: #003399; /*blue*/}
    a:visited {text-decoration: none; color: #003399; /*blue*/}
    a:active {text-decoration: none; color: #003399; /*blue*/}
    a:hover {text-decoration: none; color: #003399; /*blue*/}

    #header {
        width:800px;
        margin-left:auto; 
        margin-right:auto;
        text-align:center;
        margin-top:50px;
    }

    #content {
        width:730px;
        margin-left:auto; 
        margin-right:auto;
        height:410px;
    }

    #menu {
        width:800px;
        margin-left:auto; 
        margin-right:auto;
        text-align:center;
        margin-bottom:50px;
        clear:both;
    }
htmlcss


Solution 1:[1]

I was facing the same thing. Then, I created a new file for storing the html of the navigation bar.

I created a file navbar.html which had all my navigation bar code. Then, in your main html file where you want navigation bar, just include this file by using jquery.

$(document).ready(function() {
    $('#navigation').load('navbar.html');
});

Then at the place where you want navigation bar, just add this line:

<div id="navigation"></div>

Solution 2:[2]

You can use php for do the same job -- like include "navbar.html;

Solution 3:[3]

The solution provided by @Abhinav is only partially correct. It will not successfully load in chrome because navbar.html is of type file:// and not http:// as the jQuery load function expects. Try the following:

$(document).ready(function() {
    $('.navigation').load('navbar.html');
});

and reference in your base html file with similar div method as previously shown:

<div class="navigation"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abhinav Aggarwal
Solution 2 Hrithik Pal
Solution 3 sayantankhan

Related Questions