HTML5

Chapter 1 Introducing HTML5

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 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

Chapter 3 Using New HTML5 User Interface Tags and Attributes

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 4 Styling with CSS3

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-Class70

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

Chapter 5 Enhancing Your Web Page Visually with CSS3

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 6 Creating Boxes and Columns 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 7 Creating HTML5 Form Inputs

Create a Number Input Type 126

Create a Telephone Input Type 127

Create an Email Input Type 128

Create a URL Input Type129

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

Chapter 8 Using jQuery with HTML5

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

Chapter 9 Inspecting and Debugging Your Website

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 10 Drawing with the HTML5 Canvas

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 11 Adding HTML5 Multimedia

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 12 Using Drag and Drop in HTML5

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 13 Storing Data Using a Client-Side Database

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

Chapter 14 Providing Offline Access to Web Applications

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 15 Using Geolocation

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 16 Running Secondary JavaScript Threads Using Web Workers

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

Chapter 17 Communicating with WebSockets

Introducing WebSockets 302

Create a WebSocket Client 304

Send WebSocket Messages 306

Display WebSocket Messages 308

Interact with a WebSocket Service 310

Chapter 18 Displaying Desktop Notifications

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

Appendix A HTML5 Reference

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