HTML and CSS Reference
In-Depth Information
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 topic 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.
