A Simple HTML5 Template Tutorial
Following on from our recent series in HTML 5 tutorials I have coded up a simple HTML5 template for you to download and use at your will. Before you get to the download be sure to read through the example below and leave any comments if you would like to see further HTML5 Tutorials.
Now that we have an understanding of the HTML5 Tags, Workarounds (Download the Stater File) and a simple wire-frame sketch to work from, we can now begin to develop our HTML5 Template.
Take your time to look through the files attached to see how the template has been built. You can now go ahead and start playing with all the new HTML5 Tags and begin adding some more advanced code to the template provided or modify as you wish.
HTML Code
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>HTML5</title>
<link rel=”stylesheet” href=”css/styles.css” type=”text/css” />
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”css/ie.css”/>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script type=”text/javascript” src=”js/unitpngfix.js”></script>
<![endif]–>
</head>
<body>
<div>
<header></header>
<nav></nav>
<figure></figure>
<div>
<aside></aside>
<aside></aside>
<aside></aside>
<section></section>
<article></article>
<article></article>
<footer></footer>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
/* Imports CSS Reset File */
@import url("reset.css");
aside, article, figure, footer, header, nav, section { display:block; }
div { margin:0 auto; }
/* Generic */
header, nav, figure, footer { width:960px; background: #ccc; }
div { width:960px; height: auto; }
aside, section, article { background: #ccc; }
/* Header */
header { height:150px; }
/* Nav */
nav { height:40px; margin:15px 0; }
/* Action */
figure { height: 300px; }
/* Services */
aside { width: 310px; height: 150px; float: left; margin: 15px 0; }
.mid { margin: 15px; }
/* Content */
section { width: 635px; height: 400px; float: left; }
/* News */
article { height: 190px; margin: 0 0 15px 15px; width: 310px; float: left; }
/* Footer */
footer { height: 220px; clear: left; }
Click Here to download our HTML5 Template
Related posts:
- HTML5 Template – Tutorial
- HTML 5 Tutorial – Tags
- HTML 5 Tutorial – Workarounds
- HTML5 vs Flash
- Safari and HTML5
Posted By: Martyn
Hi, I'm Martyn, the Lead Designer for Web Design GM and really hope you find my existing and upcoming articles useful. Please leave comments below and I will try to respond to any questions as soon as possible.
