HTML and CSS Reference
In-Depth Information
applications. Many of the techniques you will learn in this topic have been tried and
used successfully on other platforms, and now we are applying them to this exciting
new technology.
Browser Support for HTML5 Canvas
With the exception of Internet Explorer 8, HTML5 Canvas is supported in some way
by most modern web browsers, with specific feature support growing on an almost
daily basis. The best support seems to be from Google Chrome, followed closely by
Safari, Firefox, and Opera. We will utilize a JavaScript library named
modernizr.js
that
will help us figure out which browsers support which Canvas features. At the same
time, if you are worried about Internet Explorer, version 9 promises to have support
for Canvas. In the meantime, you can check out Google Chrome Frame (
http://code
.google.com/chrome/chromeframe/
), which delivers Canvas support for IE.
The Basic HTML Page
Before we get to Canvas, we need to talk a bit about the HTML5 standards we will be
using to create our web pages.
HTML is the standard language used to construct pages on the World Wide Web. We
will not spend much time on HTML, but it does form the basis of
<canvas>
, so we
cannot skip it entirely.
A basic HTML page is divided into sections, commonly
<head>
and
<body>
. The new
HTML5 specification adds a few new sections, such as
<nav>
,
<article>
,
<header>
, and
<footer>
.
The
<head>
tag usually contains information that will be used by the HTML
<body>
tags
to create the HTML page. It is a standard convention to put JavaScript functions in the
<head>
, as you will see later when we discuss the
<canvas>
tag. There may be reasons
to put some JavaScript in the
<body>
, but we will make every attempt to keep things
simple by having all JavaScript in the
<head>
.
Basic HTML for a page might look like
Example 1-1
.
Example 1-1. A basic HTML page
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX1: Basic Hello World HTML Page</title>
</head>
<body>
Hello World!
</body>
</html>
