HTML5: The Missing Manual

Book description

HTML5 is more than a markup language—it's a dozen independent web standards all rolled into one. Until now, all it's been missing is a manual. With this thorough, jargon-free guide, you'll learn how to build web apps that include video tools, dynamic drawings, geolocation, offline web apps, drag-and-drop, and many other features. HTML5 is the future of the Web, and with this book you'll reach it quickly.

The important stuff you need to know:

  • Structure web pages in a new way. Learn how HTML5 helps make web design tools and search engines work smarter.
  • Add audio and video without plugins. Build playback pages that work in every browser.
  • Draw with Canvas. Create shapes, pictures, text, and animation—and make them interactive.
  • Go a long way with style. Use CSS3 and HTML5 to jazz up your pages and adapt them for mobile devices.
  • Build web apps with rich desktop features. Let users work with your app offline, and process user-selected files in the browser.
  • Create location-aware apps. Write geolocation applications directly in the browser.

Publisher resources

View/Submit Errata

Table of contents

  1. A Note Regarding Supplemental Files
  2. The Missing Credits
    1. About the Author
    2. About the Creative Team
    3. Acknowledgments
    4. The Missing Manual Series
  3. Introduction
    1. What You Need to Get Started
      1. Writing HTML5
      2. Viewing HTML5
    2. When Will HTML5 Be Ready?
    3. About the Outline
      1. Part One: Meet the New Language
      2. Part Two: Creating Modern Web Pages
      3. Part Three: Building Web Apps with Desktop Smarts
    4. About the Online Resources
      1. The Missing CD
      2. The Try-Out Site
      3. Registration
      4. Feedback
      5. Errata
      6. Newsletter
    5. Safari® Books Online
  4. 1. Meet the New Language
    1. 1. Introducing HTML5
      1. The Story of HTML5
        1. XHTML 1.0: Getting Strict
        2. XHTML 2: The Unexpected Failure
        3. HTML5: Back From the Dead
        4. HTML: The Living Language
      2. Three Key Principles of HTML5
        1. 1. Don’t Break the Web
        2. 2. Pave the Cowpaths
        3. 3. Be Practical
      3. Your First Look at HTML5 Markup
        1. The HTML5 Doctype
        2. Character Encoding
        3. The Language
        4. Adding a Style Sheet
        5. Adding JavaScript
        6. The Final Product
      4. A Closer Look at HTML5 Syntax
        1. The Loosened Rules
        2. HTML5 Validation
        3. The Return of XHTML
      5. HTML5’s Element Family
        1. Added Elements
        2. Removed Elements
        3. Adapted Elements
          1. Bold and italic formatting
        4. Tweaked Elements
        5. Standardized Elements
      6. Using HTML5 Today
        1. Evaluating Browser Support
        2. Browser Adoption Statistics
        3. Feature Detection with Modernizr
        4. Feature “Filling” with Polyfills
    2. 2. A New Way to Structure Pages
      1. Introducing the Semantic Elements
      2. Retrofitting a Traditional HTML Page
        1. Page Structure the Old Way
        2. Page Structure with HTML5
        3. Subtitles with <hgroup>
        4. Adding a Figure with <figure>
        5. Adding a Sidebar with <aside>
      3. Browser Compatibility for the Semantic Elements
      4. Designing a Site with the Semantic Elements
        1. Deeper into Headers
        2. Navigation Links with <nav>
        3. Deeper into Footers
        4. Deeper into Sections
      5. The HTML5 Outlining System
        1. How to View an Outline
        2. Basic Outlines
        3. Sectioning Elements
        4. Solving an Outline Problem
    3. 3. Meaningful Markup
      1. The Semantic Elements Revisited
        1. Dates and Times with <time>
        2. JavaScript Calculations with <output>
        3. Highlighted Text with <mark>
      2. Other Standards that Boost Semantics
        1. ARIA (Accessible Rich Internet Applications)
        2. RDFa (Resource Description Framework)
        3. Microformats
          1. Contact details with hCard
          2. Events with hCalendar
        4. Microdata
      3. Google Rich Snippets
        1. Enhanced Search Results
        2. The Recipe Search Engine
  5. 2. Creating Modern Web Pages
    1. 4. Web Forms, Refined
      1. Understanding Forms
      2. Revamping a Traditional HTML Form
        1. Adding Hints with Placeholders
        2. Focus: Starting in the Right Spot
      3. Validation: Stopping Errors
        1. How HTML5 Validation Works
        2. Turning Validation Off
        3. Validation Styling Hooks
        4. Validating with Regular Expressions
        5. Custom Validation
        6. Browser Support for Validation
      4. New Types of Input
        1. Email Addresses
        2. URLs
        3. Search Boxes
        4. Telephone Numbers
        5. Numbers
        6. Sliders
        7. Dates and Times
        8. Colors
      5. New Elements
        1. Input Suggestions with <datalist>
        2. Progress Bars and Meters
        3. Toolbars and Menus with <command> and <menu>
      6. An HTML Editor in a Web Page
        1. Using contentEditable to Edit an Element
        2. Using designMode to Edit a Page
    2. 5. Audio and Video
      1. Understanding Video Today
      2. Introducing HTML5 Audio and Video
        1. Making Some Noise with <audio>
        2. Getting the Big Picture with <video>
      3. Format Wars and Fallbacks
        1. Meet the Formats
        2. Browser Support for Media Formats
        3. Multiple Formats: How to Please Every Browser
        4. The <source> Element
        5. The Flash Fallback
      4. Controlling Your Player with JavaScript
        1. Adding Sound Effects
        2. Creating a Custom Video Player
        3. JavaScript Media Players
        4. Captions and Accessibility
    3. 6. Basic Drawing with the Canvas
      1. Getting Started with the Canvas
        1. Straight Lines
        2. Paths and Shapes
        3. Curved Lines
        4. Transforms
        5. Transparency
      2. Building a Basic Paint Program
        1. Preparing to Draw
        2. Drawing on the Canvas
        3. Saving the Picture in the Canvas
      3. Browser Compatibility for the Canvas
        1. Polyfilling the Canvas
        2. The Canvas Fallback and Feature Detection
    4. 7. Deeper into the Canvas
      1. Other Things You Can Draw on the Canvas
        1. Drawing Images
        2. Slicing, Dicing, and Resizing an Image
        3. Drawing Text
      2. Shadows and Fancy Fills
        1. Adding Shadows
        2. Filling Shapes with Patterns
        3. Filling Shapes with Gradients
        4. Putting It Together: Drawing a Graph
      3. Making Your Shapes Interactive
        1. Keeping Track of What You’ve Drawn
        2. Hit Testing with Coordinates
      4. Animating the Canvas
        1. A Basic Animation
        2. Animating Multiple Objects
      5. A Practical Example: the Maze Game
        1. Setting Up the Maze
        2. Animating the Face
        3. Hit Testing with Pixel Colors
    5. 8. Boosting Styles with CSS3
      1. Using CSS3 Today
        1. Strategy 1: Use What You Can
        2. Strategy 2: Treat CSS3 Features as Enhancements
        3. Strategy 3: Add Fallbacks with Modernizr
        4. Browser-Specific Styles
      2. Web Typography
        1. Web Font Formats
        2. Using a Font Kit
        3. Using Google Web Fonts
        4. Using Your Own Fonts
        5. Putting Text in Multiple Columns
      3. Adapting to Different Devices
        1. Media Queries
        2. More Advanced Media Queries
        3. Replacing an Entire Style Sheet
        4. Recognizing Mobile Devices
      4. Building Better Boxes
        1. Transparency
        2. Rounded Corners
        3. Backgrounds
        4. Shadows
        5. Gradients
      5. Creating Effects with Transitions
        1. A Basic Color Transition
        2. More Transition Ideas
        3. Transforms
  6. 3. Building Web Apps with Desktop Smarts
    1. 9. Data Storage
      1. Web Storage Basics
        1. Storing Data
        2. A Practical Example: Storing the Last Position in a Game
        3. Browser Support for Web Storage
      2. Deeper into Web Storage
        1. Removing Items
        2. Finding All the Stored Items
        3. Storing Numbers and Dates
        4. Storing Objects
        5. Reacting to Storage Changes
      3. Reading Files
        1. Getting Hold of a File
        2. Browser Support for the File API
        3. Reading a Text File
        4. Replacing the Standard Upload Control
        5. Reading Multiple Files at Once
        6. Reading an Image File
    2. 10. Offline Applications
      1. Caching Files with a Manifest
        1. Creating a Manifest
        2. Using Your Manifest
        3. Putting Your Manifest on a Web Server
        4. Updating the Manifest File
        5. Browser Support for Offline Applications
      2. Practical Caching Techniques
        1. Accessing Uncached Files
        2. Adding Fallbacks
        3. Checking the Connection
        4. Pointing Out Updates with JavaScript
    3. 11. Communicating with the Web Server
      1. Sending Messages to the Web Server
        1. The XMLHttpRequest Object
        2. Asking the Web Server a Question
          1. Creating the script
          2. Calling the web server
        3. Getting New Content
      2. Server-Sent Events
        1. The Message Format
        2. Sending Messages with a Server Script
        3. Processing Messages in a Web Page
        4. Polling with Server-Side Events
      3. Web Sockets
        1. Assessing Web Sockets
        2. A Simple Web Socket Client
        3. Web Socket Examples on the Web
    4. 12. More Cool JavaScript Tricks
      1. Geolocation
        1. How Geolocation Works
        2. Finding a Visitor’s Coordinates
        3. Dealing with Errors
        4. Setting Geolocation Options
        5. Showing a Map
        6. Monitoring a Visitor’s Moves
      2. Web Workers
        1. A Time-Consuming Task
        2. Doing Work in the Background
        3. Handling Worker Errors
        4. Canceling a Background Task
        5. Passing More Complex Messages
      3. History Management
        1. The URL Problem
        2. The Traditional Solution: Hashbang URLs
        3. The HTML5 Solution: Session History
        4. Browser Compatibility for Session History
  7. 4. Appendixes
    1. A. A Very Short Introduction to CSS
      1. Adding Styles to a Web Page
      2. The Anatomy of a Style Sheet
        1. CSS Properties
        2. Formatting the Right Elements with Classes
        3. Style Sheet Comments
      3. Slightly More Advanced Style Sheets
        1. Structuring a Page with <div> Elements
        2. Multiple Selectors
        3. Contextual Selectors
        4. id Selectors
        5. Pseudoclass Selectors
        6. Attribute Selectors
      4. A Style Sheet Tour
    2. B. A Very Short Introduction to JavaScript
      1. How a Web Page Uses JavaScript
        1. Embedding Script in Your Markup
        2. Using a Function
        3. Moving the Code to a Script File
        4. Responding to Events
      2. A Few Language Essentials
        1. Variables
        2. Null Values
        3. Variable Scope
        4. Variable Data Types
        5. Operations
        6. Conditional Logic
        7. Loops
        8. Arrays
        9. Functions that Receive and Return Data
      3. Interacting with the Page
        1. Manipulating an Element
        2. Connecting to an Event Dynamically
        3. Inline Events
  8. Index
  9. About the Author
  10. Colophon
  11. Copyright

Product information

  • Title: HTML5: The Missing Manual
  • Author(s): Matthew MacDonald
  • Release date: August 2011
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449302399