One Page To Rule Them All
In the design of web-sites that utilize Master Pages, most call for one site-level Master Page that all other resource documents merge with, including other Master Pages. Called by many names, this is your "primary Master Page", "main template", "parent Master Page", and "Master of Master Pages" which controls the overall presentation and site-wide styling that every other page is meant to "fit into".
This walk-through is neither a design tutorial nor an introduction to the fundamentals of HTML or CSS, so we will use a simple, if ugly, template that is written only to illustrate the key features of HTML Master Pages and not the design -- or even programming -- prowess of its author. For this simple merge tutorial, we will be working with the following fictional HTML5 Master Page and CSS3 style-sheet files. You could name the files anything you prefer and even store them anywhere you like if you don't want to use the root directory of your web-site for templates and style-sheets. However, to follow along with this tutorial, you should create these example files in the root directory of your web-site or fix all link and file paths to point to wherever you are actually working:
<!DOCTYPE html>
<html>
<head>
<title>Your Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Overarching description of your site">
<link rel="stylesheet" href="style-master.css">
</head>
<body>
<header>
<h1>On Every Page</h1>
<p>This content will appear on every page that points to this
file as its Master Page.</p>
</header>
<article>
<div title="SSI-Container" id="master-content-1"></div>
</article>
<footer>
© Your copyright notice here
<address>
Your name,<br>
when this page was last updated, and<br>
how to contact you here.
</address>
</footer>
</body>
</html>
body {
margin: 1em;
color: #aaa;
}
h1 {
margin: 0;
font-size: 1.5em;
text-transform: uppercase;
text-shadow: 0.05em 0.05em #000;
}
h1 + p {
margin-top: 0;
}
body > article {
padding: 1em;
border: red dashed thin;
box-shadow: #ccc 0.25em 0.25em;
background-color: yellow;
}
body > footer {
margin-top: 1em;
font-size: 0.75em;
text-align: center;
}
article p:last-child {
margin-bottom: 0;
}
address {
margin-top: 1em;
text-align: right;
}
Results
When we open a web browser and point it at this new Master Page at http://your-site/site-master.html, the output should look a lot like:
The resulting source code of the document is identical to the Master Page because no merge has yet been triggered:
<!DOCTYPE html>
<html>
<head>
<title>Your Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Overarching description of your site">
<link rel="stylesheet" href="style-master.css">
</head>
<body>
<header>
<h1>On Every Page</h1>
<p>This content will appear on every page that points to this
file as its Master Page.</p>
</header>
<article>
<div title="SSI-Container" id="master-content-1"></div>
</article>
<footer>
© Your copyright notice here
<address>
Your name,<br>
when this page was last updated, and<br>
how to contact you here.
</address>
</footer>
</body>
</html>
Analysis
You should notice that the SSI-Container DIV is left intact rather than having been stripped out by HTML Master Pages. This is normal and is because there was no SSI-Template directive in the document what would normally trigger the merge algorithm that would strip these directives. Under typical circumstances, we should not invite our visitors to directly open Master Pages. Do not confuse a Master Page with a "home page", which will be discussed next.