Let's start with some HTML5 code to shape the structure of our project's web page. To do so, create a file, named index.html, in a new folder, named
no_signup_no_party, containing the following markup:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>No signup? No party!</title>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-
min.css">
<link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Port+Lligat+Sans'>
<link rel='stylesheet' type='text/css'
href='css/application.css'>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
</head>
<body>
<article>
<header>
<h1>No signup? No party!</h1>
<p>
Would you like to join the most amazing party of the
planet? Fill out this form with your info but.. hurry up! only a
few tickets are still available!
</p>
</header>
<form name="subscription">
<!-- FORM FIELDS -->
<input type="submit" value="Yep! Count me in!">
</form>
<footer>
Party will be held at Nottingham Arena next sunday, for info
call 555-192-132 or drop us a line at [email protected]
</footer>
</article>
</body>
</html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased through your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
As you can see from the markup, we are taking advantage of the new structure offered by HTML5. Tags such as <article>, <header>, and <footer> enrich the page by adding semantic meaning to the content. These tags are rendered exactly as <div> but are, semantically speaking, better because they explain something about their content.
Note
For more information, I suggest you look at the following article: http://html5doctor.com/lets-talk-about-semantics
Flavor text aside, the only section that needs detailed explanation is the <head> section. Within this tag, we ask the browser to include some external assets that will help us along the way.
First, there is a Reset stylesheet, which is particularly useful for ensuring that all the CSS properties that browsers apply by default to HTML elements get removed. In this project, we use the one offered freely by Yahoo!, which basically sets all the properties to none or something equivalent.
Next, we ask for another stylesheet. This one is from a
Google service called Google Web Fonts (www.google.com/webfonts), which distributes fonts that can be embedded and used within a web page. Custom web fonts are defined with a special
@font-face property that contains the link to the font file the browser has to implement.
@font-face{
font-family: YourFontName;
src: url('yourfonturl.eot');
}Unfortunately, to reach the maximum possible compatibility between browsers, more font file formats are required, and so a more complex statement is necessary. The following statements help achieve such compatibility:
@font-face{
font-family: YourFontName;
src: url('yourfonturl.eot');
src:
url('yourfonturl.woff') format('woff'),
url('yourfonturl.ttf') format('truetype'),
url('yourfonturl.svg') format('svg');
font-weight: normal;
font-style: normal;
}Google Web Fonts provides us with a stylesheet containing these statements for the fonts we choose, saving us all the trouble related to font conversion.
Next, let's create an empty file for our stylesheet under a css folder within the project.
Last but not least, we need to ensure that even older Internet Explorer browsers will be able to handle the new HTML5 tags correctly.
html5shiv (html5shiv.googlecode.com) is a small JavaScript file
that accomplishes exactly this task.