HTML5.array.org

Visual Blueprint


HTML5 Book

HTML5.array.org is designed to be the companion web site for my new HTML5 book, published by John Wiley & Sons (2011).

In the table of contents below, you will find a downloadable sample chapter PDF, as well as links to some of the site-specific examples found in the book.

Naturally, since HTML5 will not be "finalized" until 2014, this book can give you a snapshot of what HTML5 is, when it was published. Therefore, I will endeavor to keep HTML5.array.org updated with as many HTML5 updates that I can, as well as any errata found within the book itself.

All code examples in the book can be found on Github.

--
Adam McDaniel

Description (from Wiley.com)

Use the latest version of HTML to create dynamic Web pages

HTML5 is the latest iteration of the standard markup language for creating Web pages. It boasts extensive updates from its predecessor and allows you to incorporate rich media content into a site without any dependence on extra software such as Flash. Packed with hundreds of screen shots, this visual guide introduces you to the many new features and abilities of HTML5 and shows you the many exciting new possibilities that exist for designing dynamic Web pages.

  • Offers visual learners a solid reference on HTML5, the latest version of the standard markup language for designing Web pages
  • Demonstrates how to use HTML5 to create Web pages that feature the latest in rich media content
  • Provides easy-to-understand examples that cover a variety of topics to get you up and running with HTML5
  • Features a companion Web site that contains all the code needed to learn HTML5
  • HTML5: Your visual blueprint for designing effective Web pages opens your eyes to the world of possibilities that exist with the new version of the popular markup language.

Table of Contents

  1. Introducing HTML5 (Sample Chapter PDF)
    • 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
  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
  3. Using New HTML5 User Interface Tags and Attributes
  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 (Demonstration) 68
    • Select an HTML Element Using the Structural type Pseudo-Class (Demonstration) 70
    • Select an HTML Element Using the Structural child Pseudo-Class (Demonstration) 72
    • Select an HTML Element by Its Sibling Element (Demonstration) 74
    • Select HTML Elements Using a Negating Pseudo-Class (Demonstration) 76
    • Select HTML Elements by User Selection (Demonstration) 77
    • Change an Element's Background Image (Demonstration) 78
    • Customize an Element's Font (Demonstration) 80
    • Format Text Overflow inside an Element (Demonstration) 82
  5. Enhancing Your Web Page Visually with CSS3
  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 (Demonstration) 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 (Demonstration) 124
  7. Creating HTML5 Form Inputs
  8. Using jQuery with HTML5
  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
  10. Drawing with the HTML5 Canvas
  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 (Demonstration) 226
    • Play Sound with the HTML5 audio Element (Demonstration) 228
    • Control Audio and Video Playback with JavaScript (Demonstration) 230
    • Embed a Movie Player with VideoJS (Demonstration) 232
  12. Using Drag and Drop in HTML5 (Chapter-specific demonstration)
    • 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
  13. Storing Data Using a Client-Side Database
  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 (Demonstration) 272
    • Introducing the Application Cache 274
    • Create an Application Cache Manifest 276
    • Update the Application Cache (Demonstration) 278
    • Create a "Website Offline" Fallback Page (Demonstration) 280
  15. Using Geolocation
    • Display a Specific Location with Google Maps (Demonstration) 282
    • Understanding Geolocation and GPS Services 284
    • Request the User's Current Location (Demonstration) 286
    • Display the User's Current Location with Google Maps (Demonstration) 288
  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 (Demonstration) 298
    • Falling Back for Non–Web Worker Browsers 300
  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 (Demonstration) 310
  18. Displaying Desktop Notifications
    • Introducing Desktop Notifications for Chrome 312
    • Request User Permission to Display Desktop Notifications (Demonstration) 316
    • Launch a Desktop Notification Message (Demonstration) 318
    • Customize the Desktop Notification UI 320
    • Listen for Desktop Notification Events 322
  1. 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