HTML5: The Missing Manual, 2nd Edition

HTML5: The Missing Manual, 2nd Edition

by Matthew MacDonald
Released December 2013
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449363260

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from O’Reilly and nearly 200 trusted publishing partners.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

HTML5 is more than a markup language—it’s a collection of several independent web standards. Fortunately, this expanded guide covers everything you need in one convenient place. With step-by-step tutorials and real-world examples, HTML5: The Missing Manual shows you how to build web apps that include video tools, dynamic graphics, geolocation, offline features, and responsive layouts for mobile devices.

The important stuff you need to know:

  • Structure web pages more effectively. Learn how HTML5 helps web design tools and search engines work smarter.
  • Add audio and video without plugins. Build playback pages that work in every browser.
  • Create stunning visuals with Canvas. Draw shapes, pictures, and text; play animations; and run interactive games.
  • Jazz up your pages with CSS3. Add fancy fonts and eye-catching effects with transitions and animation.
  • Design better web forms. Collect information from visitors more efficiently with HTML5 form elements.
  • Build it once, run it everywhere. Use responsive design to make your site look good on desktops, tablets, and smartphones.
  • Include rich desktop features. Build self-sufficient web apps that work offline and store the data users need.

Table of contents

  1. The Missing Credits
    1. About the Author
    2. About the Creative Team
    3. Acknowledgements
    4. The Missing Manual Series
  2. 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: Video, Graphics, and Glitz
      3. Part Three: Building Web Apps
    4. About the Online Resources
      1. The Missing CD
      2. The Try-Out Site
      3. Registration
      4. Feedback
      5. Errata
    5. Safari® Books Online
  3. 1. Modern Markup
    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
      7. How to Find the Browser Requirements for Any HTML5 Feature
        1. How to Find Out Which Browsers Are on the Web
        2. Feature Detection with Modernizr
        3. Feature “Filling” with Polyfills
    2. 2. Structuring Pages with Semantic Elements
      1. Introducing the Semantic Elements
      2. Retrofitting a Traditional HTML Page
        1. Page Structure the Old Way
        2. Page Structure with HTML5
        3. Adding a Figure with <figure>
        4. Adding a Sidebar with <aside>
      3. Browser Compatibility for the Semantic Elements
        1. Styling the Semantic Elements
        2. Using the HTML5 Shiv
        3. Modernizr: An All-in-One Fix
      4. Designing a Site with the Semantic Elements
        1. Deeper into Headers
        2. Navigation Links with <nav>
        3. Deeper into Sections
        4. Deeper into Footers
        5. Identifying the Main Content with <main>
      5. The HTML5 Outlining System
        1. How to View an Outline
        2. Basic Outlines
        3. Sectioning Elements
        4. Solving an Outline Problem
    3. 3. Writing More 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
        4. Microdata
      3. A Practical Example: Retrofitting an “About Me” Page
        1. Extracting Semantic Data in Your Browser
      4. How Search Engines Use Metadata
        1. Google Rich Snippets
        2. Enhanced Search Results
        3. The Recipe Search Engine
    4. 4. Building Better Web Forms
      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
      4. Browser Support for Web Forms and Validation
        1. Testing for Support with Modernizr
        2. Polyfilling with HTML5Forms
      5. 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
      6. New Elements
        1. Input Suggestions with <datalist>
        2. Progress Bars and Meters
        3. Toolbars and Menus with <command> and <menu>
      7. An HTML Editor in a Web Page
        1. Using contenteditable to Edit an Element
        2. Using designMode to Edit a Page
  4. 2. Video, Graphics, and Glitz
    1. 5. Audio and Video
      1. The Evolution of Web Video
      2. Introducing HTML5 Audio and Video
        1. Making Some Noise with <audio>
        2. Preloading Media Files
        3. Automatic Playback
        4. Looping Playback
        5. Getting the Big Picture with <video>
      3. Understanding the HTML5 Media Formats
        1. Meet the Media Formats
        2. Browser Support for Media Formats
      4. Fallbacks: How to Please Every Browser
        1. Supporting Multiple Formats
        2. Adding a Flash Fallback
      5. Controlling Your Player with JavaScript
        1. Adding Sound Effects
        2. Creating a Custom Video Player
        3. JavaScript Media Players
      6. Video Captions
        1. Timed Text Tracks and WebVTT
        2. Adding Captions with <track>
        3. Browser Support for Video Captions
    2. 6. Fancy Fonts and Effects 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 with Vendor Prefixes
      2. Building Better Boxes
        1. Transparency
        2. Rounded Corners
        3. Backgrounds
        4. Shadows
        5. Gradients
          1. Linear Gradients
          2. Radial Gradients
          3. Repeating Gradients
      3. Creating Effects with Transitions
        1. A Basic Color Transition
        2. More Transition Ideas
        3. Triggering Transitions with JavaScript
        4. Transforms
        5. Transitions That Use Transforms
      4. Web Fonts
        1. Web Font Formats
        2. Finding a Font for Your Website
        3. Getting a Free Font from Font Squirrel
        4. Preparing a Font for the Web
        5. Even Easier Web Fonts with Google
        6. Putting Text in Multiple Columns
    3. 7. Responsive Web Design with CSS3
      1. Responsive Design: The Basics
        1. Fluid Layout
        2. Fluid Images
        3. Fluid Typography
        4. Understanding Viewports: Making Your Layout Work on a Smartphone
      2. Adapting Your Layout with Media Queries
        1. The Anatomy of a Media Query
        2. Creating a Simple Media Query
        3. Building a Mobile-Friendly Layout
        4. More Advanced Media Query Conditions
        5. Replacing an Entire Style Sheet
        6. Recognizing Specific Mobile Devices
    4. 8. 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
        6. Composite Operations
      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 with ExplorerCanvas
        2. Polyfilling the Canvas with FlashCanvas
        3. The Canvas Fallback and Feature Detection
    5. 9. Advanced Canvas: Interactivity and Animation
      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. 3. Building Web Apps
    1. 10. Storing Your Data
      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. Reading a Text File with <input>
        3. Replacing the Standard Upload Control
        4. Reading Multiple Files at Once
        5. Reading an Image File with Drag-and-Drop
        6. Browser Support for the File API
      4. IndexedDB: A Database Engine in a Browser
        1. The Data Object
        2. Creating and Connecting to a Database
        3. Storing Records in the Database
        4. Querying All the Records in a Table
        5. Querying a Single Record
        6. Deleting a Record
        7. Browser Support for IndexedDB
    2. 11. Running Offline
      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. 12. 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. The Web Socket Server
        2. A Simple Web Socket Client
        3. Web Socket Examples on the Web
    4. 13. Geolocation, Web Workers, and History Management
      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
        7. Browser Compatibility for Geolocation
      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
        6. Browser Compatibility for Web Workers
      3. History Management
        1. The URL Problem
        2. The Old Solution: Hashbang URLs
        3. The HTML5 Solution: Session History
        4. Browser Compatibility for Session History
  6. 4. Appendixes
    1. A. Essential 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. Pseudo-Class Selectors
        6. Attribute Selectors
      4. A Style Sheet Tour
    2. B. JavaScript: The Brains of Your Page
      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
        10. Objects
        11. Object Literals
      3. Interacting with the Page
        1. Manipulating an Element
        2. Connecting to an Event Dynamically
        3. Inline Events
  7. Index
  8. About the Author
  9. Copyright

Product information

  • Title: HTML5: The Missing Manual, 2nd Edition
  • Author(s): Matthew MacDonald
  • Release date: December 2013
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449363260