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


<!DOCTYPE html>
<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

No related posts.

Tags:

Leave a Reply


Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482