Issue
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>
  
<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;
}
Solution
Using just HTML and/or CSS, no, you cannot do this, as this requirement is outside their specifications (read 'purpose').
There are two approaches that remain:
If you are using a server side language (e.g. PHP) you can leverage off the libraries syntax for including content from other files inline (
include()) in the case of PHP, or Server Side IncludesYou can use javascript, or a library like jQuery to fetch the output (content) of other pages, and inject them into your page at a specified place. This can be done as easily as using jQuery's
load()method as seen here
Answered By - SW4
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.