Contents

ACKNOWLEDGMENTS

INTRODUCTION

PART I Overview

1 New Features of HTML5

HTML5 Is a Kinder, Gentler HTML

HTML5 and CSS

New HTML5 Tags

HTML5 and HTML4 Comparison

The Latest in Multimedia the HTML5 Way!

Summary

2 JavaScript and CSS in HTML5 Web Development

JavaScript Is Integral to Web Development

Placing a Script at the End of a Page

Loops and Conditional Tests

JavaScript in an External File

CSS Overview

ID Selectors: Targeting Specific Page Sections

CSS Classes

How CSS Is Applied to New HTML5 Multimedia Tags

Summary

PART II Graphics and Media

3 Getting Creative with the Canvas

Introducing the Canvas

Drawing on the Canvas

Using Gradients

Linear Gradients

Radial Gradients

Understanding Paths

Drawing Circles and Arcs

Drawing Lines

Using Multiple Canvases

Placing Text on a Canvas

Vertical Text

Shadow Text

Summary

4 Using Animation and Events with the Canvas

Circles, Revisited

A Moving Gradient

Using Events

Mondrian-Inspired Art

A Drawing Tablet

Summary

5 Getting Visual with Video

Of Formats, Codecs, and Other Confusing Matters

Reformatting Files

Watching Video!

Falling Back

Video Controls

More Video Attributes

Events and Video

Summary

PART III Advanced HTML5 Features

6 Audio the HTML5 Way

Introducing the Audio Element

Look Ma, No Audio Player!

Events and Audio

Using Audio Events

Using Other Events with Audio

Summary

7 Be Persistent with Local Storage

Local Storage Defined

Basic Local Storage

Getting Visual

Summary

8 Drag-and-Drop: Moving Things Around the Screen

A Box in a Box

Adding Actions to Drag-and-Drop Events

Online Shopping Made Easy

Playing Tic-Tac-Toe

Summary

9 Geolocation

Geolocation Methods

Privacy Concerns

Finding Your Location

Handling Rejection and Errors

Detecting Browser Support

Mapping Your Place in the World

Getting on the Map

Continuously Tracking Movement

Summary

10 HTML5 Document Structure

The Problems with Div

HTML5 Layout Tags

Layout Tag Overview

Using the New Layout Tags

Summary

11 New HTML Form Elements and Usage

HTML5 Input Types

Creating a Form

Adding a Color Picker

Adding Date and Time Controls

Using the E-mail and URL Fields

Adding Number and Range Controls

Using Search

Adding Telephone Number Boxes

Creating Safe Forms

Laying Out Forms

Performing Validation

Submitting Data

Summary

12 CSS3: New Styling Techniques

CSS3 Modules

Web Fonts

CSS3 Rules for Fonts

Font Formats

Using Fonts on a Web Site

Backgrounds

Multiple Backgrounds

Background Placement

Borders

Borders with Rounded Corners and Shadows

Images as Borders

Transformations

Transitions

Animations

Building an Animation

Multiple Animations

CSS Animation Caveats

Summary

13 Editable Regions and Offline Sites

Editable Content

Creating an Editable Region

A Game with Editable Content

Offline Sites

Manifest Files

Detecting Offline Code

Caching Multiple Pages

Summary

14 Advanced Topics: Taking It All a Little Further

JavaScript

Looping

Conditional Branching

Functions

Math Made Visible

Parallax Processing

Summary

Appendix Quick Reference

HTML5 Template

HTML Global Attributes

HTML Tag-Specific Attributes

HTML5 Tags

Index