Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
25th July 2011

Create a basic HTML5 page with the new layout tags

How to build a simple and semantic one-page template with HTML5

Create a basic HTML5 page with the new layout tags

Create a basic HTML5 page with the new layout tags

How to build a simple and semantic one-page template with HTML5

tools | tech | trends: Photoshop, Adobe Dreamweaver, HTML5
expert: Neil Pearce

This article originally appeared in Web Designer issue 181, you can download the cover CD tutorial files by clicking here

In this tutorial, we’re going to build a one-page template using some of the next-generation techniques from HTML5. Everyone’s talking about HTML5, it’s perhaps the most-hyped technology since people started putting rounded corners on everything. Apparently though, HTML5 won’t be completely supported until 2022, but this is a misconception based on the projected date that HTML5 will reach the stage in the W3C process known as Candidate Recommendation (REC).All this means is that the spec won’t be completely finished until you can use all of it, and in at least two browsers. But don’t let that stop you from using the new tags now – after all, this industry moves so damn fast that it’s nice to be able to stay ahead for once!
HTML5 introduces a bunch of new elements that will make our pages more semantic, cleaner and faster. It also includes fancy APIs for drawing graphics on screen, storing data offline, playing video and a lot more. The web industry is buzzing right now with the introduction of both HTML5 and CSS3, and if you couple that with jQuery (or any other JavaScript library), then you have some very powerful, sought-after skills all ready to take the industry by the scruff of the neck! So open up the supplied PSD design (on the CD) and let’s get cracking…

01 Set things up
Before we jump into Photoshop, it’s always a good idea to create the basic markup first. Open up a new file in Dreamweaver (or your chosen editor), and name it ‘index.html’ and add the new and very simple doctype and head section. It isn’t even necessary for HTML5, but it’s used for current and older browsers that require a specified doctype. Browsers that do not understand this doctype will render the markup in Standards mode.

001 <!DOCTYPE html>
002 <html>
003 <head>
004 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
005 <!–[if lt IE 9]>
006 <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
007 <![endif]–>
008 <link rel=”stylesheet” href=”styles.css”>
009 <title>Web designer</title>
010 </head>

02 Inside the head
As you can see, the new doctype is much cleaner than what you would have if you were writing HTML4 or XHTML. You will also notice the link to the style sheet is missing its type attribute. This is no longer necessary, as it’s implied that this link refers to style sheets. This is also true for any links to scripts that you may use.

001 <link rel=”stylesheet” href=”styles.css”>
002 <script src=”js/scripts.js”></script>

03 HTML5 shiv
In IE, excluding the newest version (IE9), you cannot apply styles to elements that the browser does not recognise and our new HTML5 elements, in all their glory, are not recognised to CSS rules. This is where Remy Sharp’s html5shiv comes to the rescue.
Simply include the link in your page’s <head> section and you will be able to style the new HTML5 elements without fear.

001 <!–[if lt IE 9]> 
002 <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
003 <![endif]–>

Pages: 1 2 3 4 5

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.