HTML5 Your visual blueprint™ for designing rich web pages and applications

Table of Contents
Introducing HTML5 2
Understanding HTML5 Web Browsers . 6
Understanding Backward Compatibility 8
Understanding the History of Markup Languages 10
Introducing the New and Changed HTML5 Tags and Attributes 12
Understanding Obsolete HTML Tags and Attributes 16
Validate a Website for HTML5 Compliance 18
Validate a Web Browser for HTML5 Support 20
Support HTML5 in Internet Explorer with a Plug-in 22
Chapter 1 Introducing HTML5
Create an HTML5 Web Page 24
Understanding the Semantic Layout in HTML5 26
Declare Header and Footer Layout Elements . 30
Declare a Navigation Layout Element 32
Declare Section and Article Layout Elements 34
Declare Heading and Paragraph Layout Elements 36
Declare Figure and Aside Layout Elements . 38
Assign CSS Styles to Layout Elements 40
Provide a Fallback for Outdated Web Browsers 42
Announce HTML5 Support . 44
Resize Your Website for Mobile Web Browsers . 46
Chapter 2 Getting Started with HTML5 Page Layout

Create an HTML5 Web Page 24
Understanding the Semantic Layout in HTML5 26
Declare Header and Footer Layout Elements . 30
Declare a Navigation Layout Element 32
Declare Section and Article Layout Elements 34
Declare Heading and Paragraph Layout Elements 36
Declare Figure and Aside Layout Elements . 38
Assign CSS Styles to Layout Elements 40
Provide a Fallback for Outdated Web Browsers 42
Announce HTML5 Support . 44
Resize Your Website for Mobile Web Browsers . 46

Display a Fixed-Meter Bar 48
Display a Moving Progress Meter 50
Add a Caption to a Figure . 52
Highlight Text . 54
Specify Safe Line Breaks in Long Words . 55
Allow the User to Edit Content . 56
Spell-Check User Content 57
Declare an Interactive Summary and Details Layout Element . 58
Chapter 3 Using New HTML5 User Interface Tags and Attributes
Introducing CSS3 . 60
Validate a Web Browser for CSS3 Support . 62
Select an HTML Element Using Its Class or ID . 64
Select an HTML Element Using an Attribute . 65
Select an HTML Element Using a Specific Attribute Value . 66
Select an HTML Element Using a Partial Attribute Value . 68
Select an HTML Element Using the Structural type Pseudo-Class 70
Select an HTML Element Using the Structural child Pseudo-Class . 72
Select an HTML Element by Its Sibling Element 74
Select HTML Elements Using a Negating Pseudo-Class 76
Select HTML Elements by User Selection 77
Change an Element’s Background Image 78
Customize an Element’s Font . 80
Format Text Overflow inside an Element 82

Round Border Corners . 84
Add a Shadow Effect 86
Change an Element’s Opacity . 88
Apply an Image As an Element Border . 90
Customize a Scroll Bar with Images 92
Apply a Color Gradient 96
Transform Object Dimensions . 98
Transition between Styles . 100
Create Simple Animations . 102
Chapter 5 Enhancing Your Web Page Visually with CSS3
Introducing the Flexible Box Model 106
Create a Horizontal Flexible Box Model 108
Create a Vertical Flexible Box Model 110
Stretch and Shrink Objects in a Flexible Box 112
Horizontally Pack Objects within a Flexible Box 114
Vertically Align Objects within a Flexible Box . 115
Reorder Objects in a Flexible Box . 116
Introducing Multi-Column Layouts 118
Create a Multi-Column Layout 120
Add a Ruler and Gap in between Columns 122
Span Objects Horizontally across Columns 124
Chapter 6 Creating Boxes and Columns with CSS3
Create a Number Input Type 126
Create a Telephone Input Type . 127

Create an Email Input Type . 128
Create a URL Input Type . 129
Create a Search Input Type 130
Require a Value in an Input Field . 131
Set a Placeholder for an Input Field 132
Auto-Focus on an Input Field 133
Disable Auto-Completion of Input Text 134
Using Speech Input 135
Create a Drop-Down List for Text Input Suggestions 136
Restrict Input Values Using Pattern Matching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Create a Date Input Type 140
Create a Range Input Type 142
Create a Color Input Type 144
Link an Input Field to a Specific Form . 146

Introducing jQuery . 148
Download jQuery 150
Load jQuery 151
Execute jQuery Methods on Elements 152
Manipulate HTML Elements via the DOM 154
Customize Browser Events with jQuery . 156
Hide and Show Content with jQuery 158
Add and Remove CSS Classes on Elements with jQuery . 160
Send Custom HTML Attribute Data into jQuery 162
Using Scrolling Transitions with jQuery . 164

Launch the Chrome Inspector 166
Examine Elements’ Structure and Layout 168
Modify HTML and CSS Code in Real Time 170
Examine JavaScript Code . 172
Add a JavaScript Breakpoint 174
Step through JavaScript Code 176
Add a Watch Expression 178
Chapter 9 Inspecting and Debugging Your Website
Introducing the HTML5 Canvas . 180
Declare a canvas Element 186
Draw Basic Rectangles on the Canvas 188
Draw Paths on the Canvas . 190
Draw Text on the Canvas . 192
Using Solid Color on the Canvas . 194
Using Linear Gradient Colors on the Canvas . 196
Using Radial Gradient Colors on the Canvas . 198
Draw an Image on the Canvas 200
Scale a Canvas Image . 202
Crop a Canvas Image 203
Query Individual Canvas Pixels . 204
Track Mouse Activity on the Canvas 206
Translate the X- and Y-Axes . 210
Rotate the X- and Y-Axes 212
Create Animations on the Canvas . 214
Chapter 10 Drawing with the HTML5

Introducing HTML5 Audio and Video . 218
Understanding Audio and Video Formats . 220
Install a Movie Encoder 222
Reencode Movies with the Miro Video Converter . 224
Play Movies with the HTML5 video Element 226
Play Sound with the HTML5 audio Element 228
Control Audio and Video Playback with JavaScript 230
Embed a Movie Player with VideoJS 232
Chapter 11 Adding HTML5 Multimedia
Introducing Drag and Drop in HTML5 234
Specify Objects to Drag . 238
Specify a Drop Zone . 240
Handle the Drag-and-Drop Events . 242
Visually Enhance the Drag-and-Drop Experience 248
Chapter 12 Using Drag and Drop in HTML5
Introducing Client-Side Storage in HTML5 250
Store Data Using the Web Storage API 252
Retrieve Data from the Web Storage API 254
Using the Correct IndexedDB API . 256
Open an IndexedDB Database 257
Create a New IndexedDB Object Store . 258
Store an Object Using the IndexedDB API 260
Retrieve Objects Using the IndexedDB API . 262
Delete an Object Using the IndexedDB API 264
Delete an IndexedDB Object Store 265

Identify Whether the Browser Is Online . 266
Identify Whether the Network Is Online 268
Listen for Online and Offline Events 272
Introducing the Application Cache . 274
Create an Application Cache Manifest 276
Update the Application Cache 278
Create a “Website Offline” Fallback Page . 280
Chapter 14 Providing Offline Access to Web Applications
Display a Specific Location with Google Maps . 282
Understanding Geolocation and GPS Services . 284
Request the User’s Current Location 286
Display the User’s Current Location with Google Maps 288
Chapter 15 Using Geolocation
Introducing WebSockets . 302
Create a WebSocket Client . 304
Chapter 17 Communicating with WebSockets
Introducing Web Workers 290
Create a Web Worker JavaScript File 294
Link a Web Worker to Your Web Application . 296
Launch a Web Worker Event from Your Web Application . 298
Falling Back for Non–Web Worker Browsers 300

Introducing WebSockets . 302
Create a WebSocket Client . 304

Send WebSocket Messages . 306
Display WebSocket Messages 308
Interact with a WebSocket Service 310

Introducing Desktop Notifications for Chrome 312
Request User Permission to Display Desktop Notifications 316
Launch a Desktop Notification Message . 318
Customize the Desktop Notification UI 320
Listen for Desktop Notification Events 322
Chapter 18 Displaying Desktop Notifications
HTML5 Reference . 324
HTML Global Attributes . 327
HTML Metadata Tags . 330
HTML Sectioning Tags . 336
HTML Grouping Tags . 339
HTML Phrasing Tags . 342
HTML Embedding Tags 349
HTML Table Tags 355
HTML Form Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358

Index......................................................................................................... 363