Posts
One of the best parts of web development is how easy it is to create and view a document—all you need is
a text editor and a web browser. This simple snippet provides the setup for all of the examples contained
in this book. After you walk through the structure of these elements, we’ll add a couple of minor additions
for clarity, but this is the basic HTML5 file you will use:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function () {
//Our code here...
};
</script>
</body>
</html>
Save this file as 01-skeleton.html and load it in your web browser. You won’t actually see anything
because it’s a blank document, but the page did load and is a completely valid HTML5 document. (You
can always view the source in your browser to confirm that something is there.)
Now let’s go through the elements step by step. The first line simply declares that this is an HTML5
document type. If you have any familiarity with all the various HTML4 document types, you’ll see that this
declaration is quite simple:
<!doctype html>
Next, we declare the root html element and the header:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
At the top of the head element, set the document character encoding to utf-8. UTF-8 is an encoding for
Unicode, which is a universal character set that defines the characters used in most of the world's
languages. The browser uses this encoding to read the characters from a file and display them as properly
formatted text. These documents are stored in a sequence of bytes contained in a file on a server
somewhere, transmitted across the network, then reassembled on the client's computer and displayed in a
web browser. The character encoding tells the browser how to convert this sequence of bytes into a
sequence of characters, which is then processed and displayed as a web page. If you don't include the
encoding declaration, the browser might attempt to guess the character encoding of the file (wrongly), or
use a default setting (wrongly), causing the page to display incorrectly. It's best to explicitly set the
character encoding here and avoid the potential confusion.
All valid HTML5 documents contain a title element, which is also placed in the header. Because we use
a CSS stylesheet, create a link element that points to an external file. This contains the style definitions
for our document; we’ll look at the style.css file in a moment.
With the header set, let’s look at the rest of the document:
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function () {
//Our code here...
};
</script>
</body>
</html>
In the body element, we place a canvas element. This is what we draw to and reference from our scripts.
Give the canvas an id name and a height and width value so you can see it, and use its id to access
the element with the DOM interface.
After the canvas element, add a script tag that includes the JavaScript code for each example. We’ve
placed the script after the other elements, right before the closing body tag, so that the browser loads
the rest of the document before executing the script. Also, if the script is loaded from a file—possibly from
a different server—it won’t hold up the rest of the document while waiting to download. This makes loading
faster and the document more responsive.
The skeleton script is simple and effectively does nothing. The window object is the top of the Document
Object Model and how we access the DOM. When the document has finished loading, the window object
executes the function assigned to its onload property:
<script>
window.onload = function () {
//Our code here...
};
</script>
The example code in this book is placed within the window.onload callback function. Because this
method is executed after all the document elements have been loaded, we can be assured that the canvas
element is ready to go by the time the code is called. Consequently, if your document contains a lot of data
embedded in it, such as large images, you can wait a long time for window.onload to execute. In this
situation, it might be better to load the assets using JavaScript, which I show you how to do in Chapter 4.
Finally, we close out our script, body, and html tags. We’re finished creating a basic but perfectly valid
HTML5 document.
0 comments:
Post a Comment