HTML Boilerplate
Views:
This is more or less the standard HTML template I use for all documents, including some of the basic layout.
For applications I might make it a little different, but not much.
Pretty much always I will include my CSS Boilerplate, Javascript Boilerplate and Javascript Utility Class.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" title="Default Web Site Styles" type="text/css" media="all" href="{STATIC_URL}/assets/css/styles.css"/>
<link rel="shortcut icon" type="image/png" href="{STATIC_URL}/favicon.png"/>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="{STATIC_URL}/assets/css/ie.css" />
<meta http-equiv="imagetoolbar" content="no" />
<![endIf]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="{STATIC_URL}/assets/css/ie7.css" />
<![endIf]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="{STATIC_URL}/assets/css/ie6.css" />
<![endIf]-->
{jsVars(#BASE_URL,STATIC_URL,THUMBNAILS_URL,FILES_URL,gaId#):h}
<script type="text/javascript" src="{STATIC_URL}/assets/js/sifr.js"></script>
<script type="text/javascript" src="{STATIC_URL}/assets/js/swfobject.js"></script>
<script type="text/javascript" src="{STATIC_URL}/assets/js/K.js"></script>
<script type="text/javascript" src="{STATIC_URL}/assets/js/site.js"></script>
<!-- <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("{gaId}");
pageTracker._trackPageview();
} catch(err) {}</script> -->
<meta name="keywords" content="{keywords}" />
<meta name="description" content="{description}" />
</head>
<body class="{class}">
<ul class="hidden">{if:mainContent}<li><a href="#mainStart">Go to main content</a></li>{end:}{if:sectionMenu}<li><a href="#secondarymenuHeading">Go to secondary navigation</a></li>{end:}{if:primaryMenu}<li><a href="#primarymenuHeading">Go to primary navigation</a></li>{end:}</ul>
<div id="masthead">
<h1><a href="{BASE_URL}"><img src="{STATIC_URL}/assets/img/logo.png" width="" height="" alt="Acme Co Ltd" /></a></h1>
</div>
<div id="primarymenu">
<h2 class="hidden"><a class="hidden" id="primarymenuHeading" name="primarymenuHeading"></a>Primary Navigation</h2>
{primaryMenu:h}
</div>
<div id="secondarymenu">
<h2 class="hidden"><a class="hidden" id="secondarymenuHeading" name="secondarymenuHeading"></a>Secondary Navigation</h2>
{sectionMenu:h}
<ul>
<li><a href="{BASE_URL}/reservation"><strong>Reserve a table online!</strong></a></li>
<li class="mailinglist"><a href="{BASE_URL}/mailinglist">Join our mailing list!</a></li>
</ul>
</div>
<div id="main">
<p class="hidden"><a class="hidden" name="mainStart" id="mainStart">The main content follows.</a></p>
<div id="maincontent">
</div>
<div id="breakout">
</div>
<div class="clear"></div>
</div>
<div id="footer">
<h2 class="hidden">Footer</h2>
<ul class="menu">
<li>© Acme Co Ltd. All Rights Reserved</li>
<li>
<a href="{BASE_URL}/pages/privacy">Privacy Policy</a>
</li>
<li>
<a href="{BASE_URL}/contact">Contact Us</a>
</li>
<li>
<a rel="external" href="http://www.example.com/services/design">Web Design</a>
and <a rel="external" href="http://www.example.com/services/development/cms"><acronym
title="Content Management System">CMS</acronym></a>
by <a rel="external" href="http://www.huminteractive.com">Example.com web design</a>
</li>
</ul>
</div>
</body>
</html>
