Creating my personal academic website involves multiple pages that share a common structure.
Question: I'm searching for a method to avoid duplicating the header and menu code in each HTML file. Is there an approach where I can store the code for the header and menu in a separate file, like header.html, and then use a statement such as \input{header.html} (similar to TeX syntax) to include the file into both index.html and publications.html.
A preview of the website's layout is provided below.
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>
  
<a href="publications.html">Publications</a>
  
<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>
  
<a href="publications.html">Publications</a>
  
<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;
}