Each of the example files we'll create throughout the course of this book will rely on a common set of elements. Rather than repeatedly showing these same elements in every single code section and example in the book, I'll show you them just once now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/.css">
<!--[if lte IE 8]>
<script src=http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.js"></script>
<script>
(function($){
})(jQuery);
</script>
</body>
</html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from 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.
Save a copy of this file now and call it template.html. This is the base file that we'll use for every single example, so when we start working through the examples and I say "add the following markup to the <body> of the template file", I mean insert it directly between the opening <body> tag and the first <script> tag in the template file, as shown above. Whenever we add any JavaScript to the template file, it will be added within the anonymous function in the second <script> tag.
Let's just take a look at what the template file contains. We start out with the HTML5 doctype declaration as we'll be using plenty of HTML5 elements in our examples. We also set the lang attribute of the <html> element to en, and <meta> tag with its charset attribute to utf-8, neither of which are strictly required but are nevertheless best practice.
Next comes an empty <title> element, to which we can add the name of each example, and a <link> element with an incomplete href, ready for us to add the name of the stylesheet that each example will use.
Because current versions (prior to version 9) of Internet Explorer don't support any HTML5 elements, we need to use Remy Sharp's html5shiv script to make this browser use them correctly. We can link to the online version of this file for convenience using a conditional comment that targets all versions of IE lower than version 9. Feel free to download html5.js and store it locally if you plan on playing with the examples in IE while disconnected from the Internet.
To get the most out of the examples throughout the book, it would probably be wise to upgrade to the latest stable release versions of the most common browsers, which at the time of writing are Firefox 3.6.13, Chrome 9.0, Safari 5.03, and Opera 11, although expect these to change quite rapidly.
At the time of writing, Internet Explorer 9 is available in beta release and is scheduled to go to full release at some point in early 2011. IE9 does support a lot of HTML5 and CSS3, so using the html5shiv file may not be required.
The <body> of the page is empty except for some <script> tags. We'll obviously use jQuery in every example, so the first tag links to that. The current version of jQuery is 1.5 at the time of writing (but like the browser versions, this is likely to change pretty quickly!).
In the second <script> tag we have an empty function, into which all of the example JavaScript code we write will go. We pass the jQuery object into our anonymous function and alias it to the $ character. Although not strictly necessary (except in the example where we create a jQuery plugin), this is another good habit to get into.
So that's the template file that we'll be referring to and using in the code examples throughout the book. Let's also take a moment to look at the folder structure that the example files use. Create a project folder and call it jquery-animation or similar. Within this, create three new folders and call them css, img, and js.
The HTML pages we create will go into the jquery-animation folder alongside the subfolders. All of the CSS files we create will go into the css folder and all of the images that we use in the examples will go into the img folder. The jQuery library and any additional script files we use or create will go into the js folder. This is also the directory structure you'll find if you download and unpack the accompanying code archive containing all of the examples.