You are previewing HTML5, 2nd Edition.
O'Reilly logo
HTML5, 2nd Edition

Book Description

Implement the powerful multimedia and interactive capabilities offered by HTML5, including style control tools, illustration tools, video, audio, and rich media solutions. Understand how HTML5 is changing the web development game with this project-based book that shows you-not just tells you-what HTML5 can do for your websites. Reinforce your practical understanding of the new standard with demo applications and tutorials, so that execution is one short step away.

HTML5 is the future of the web. Literally every web designer and developer needs to know how to use this language to create the types of web sites consumers now expect. This new edition of the bestseller teaches you to enhance your web designs with rich media solutions and interactivity, using detailed descriptions and hands-on projects for every step along the way. The second edition contains completely updated information, including more on mobility and video standards, plus new projects.


The companion website, visualizetheweb.com, is packed full of extra information, online code libraries, and a user forum, offering even more opportunity to learn new skills, practice your coding and interact with other users.

Table of Contents

  1. Cover
  2. Title
  3. Copyright
  4. Dedication
  5. CONTENTS
  6. Preface
  7. Section 1
    1. HTML5 Tag Structure
      1. Where HTML Code Can Be Found
      2. The Evolution of the Web
      3. The Rocky Road from HTML4 to HTML5
      4. Web 2.0 Applications and Solutions
      5. What Is Included in HTML5
      6. Enhancements to Core Tag Language
      7. New Elements Are Introduced to HTML5
      8. Blocking Content on the Page
      9. Modifications to Content Sections
      10. Making DOCType Easier to Work with
      11. Organizing Code Using Blocking Elements
        1. Using the SECTION Element
        2. Using the ARTICLE Element
        3. Using the HEADER and FOOTER Elements
        4. Using the ASIDE Element
        5. Using the DIALOG Element
        6. Using the FIGURE Element
        7. Using the NAV Element
      12. Text-Level Semantic Additions and Changes
        1. Using the MARK Element
        2. Using the TIME Element for Measurement
        3. Using the METER Element
        4. Using the PROGRESS Element
      13. Applying HTML5 to Make HTML Code Easier to Read
      14. Working with HTML5 Forms
        1. What Has Changed in HTML Forms 2.0?
        2. Inserting the Cursor Automatically into a Specified Field
        3. Making an INPUT Field Required
        4. Adding the Placeholder Text
      15. Controlling Data with HTML5
        1. Extending the Functionality of HTML5
        2. Displaying Data in HTML5
        3. Storing Data Locally Using Web Storage
      16. New HTML5 Attributes
      17. What Is Not Being Supported in HTML5
      18. How to Gracefully Migrate Sites to Work with the New HTML5 Standard
      19. HTML5 Is Going Mobile
        1. Designing for the Mobile Web
        2. The Leading Mobile Web Browsers
        3. Additional Web Browsers
      20. What You Have Learned
    2. Project 1: Building a Web Site Using HTML5 Blocking Elements
      1. Creating a Template for Your Web Site
      2. Customizing the HEADER Element
      3. Customizing the NAVIGATION Element
      4. Customizing the Main SECTION Element
      5. Customizing the FOOTER Element
      6. Creating the Site’s Home Page
      7. Adding a Product Page That Uses the MARK Element
      8. Adding a News Page That Uses the TIME and ASIDE Elements
      9. Creating a Contact Us Page That Uses the New Form INPUT Attributes
      10. Summary
  8. Section 2
    1. Picture CSS3
      1. Using CSS To Style Your Web Site
      2. Cascading Your Designs
      3. The Format of CSS
        1. Modifying Elements with CSS
        2. Creating Class Styles
        3. Using Pseudo Class Styles
        4. Using Pseudo Elements
      4. Designing Your Web Page with CSS
      5. Controlling Font Display with CSS
        1. Embedding Fonts Using CSS3
        2. Sizing Fonts with CSS Units of Measurement
        3. Color Control for Fonts
        4. Adding Drop Shadow Text Effects
        5. Additional Font Definitions
      6. Working with Columns in CSS3
      7. Using CSS3 to Control Visual Display
        1. Positioning Design Elements with CSS
        2. Increased Control over Color
        3. Multiple Background Objects
        4. Adding Rounded Corners to Layers
      8. Dazzling Your Audience with CSS3 Animation
        1. Using Transitions in CSS
        2. Creating Animation with CSS3
      9. Delivering Solutions for the Mobile Market
      10. What You Have Learned
    2. Project 2: Applying CSS3 to Your Web Design
      1. Linking to a Single CSS Document
      2. Embedding Fonts
      3. Default Styles for Content
      4. Applying Styles to Main Sections of Content
      5. Applying Styles to the Navigation Elements
      6. Applying Styles to the Form Elements
      7. Additional Styles
      8. Advanced CSS Execution
      9. Creating a Menu with CSS
      10. Designing with CSS3
      11. Summary
  9. Section 3
    1. Rendering HTML5 Illustrations
      1. The Tale of Web Image Formats
      2. Bitmap Images: Using JPEG, GIF, and PNG Images on the Web
      3. Creating SVG Graphics
      4. The Fundamentals of Creating SVG Images and Adding Them to Your Web Pages
        1. Understanding the Basics of Creating Shapes
        2. Adding CSS-Based Color
        3. Applying Gradients to SVG Images
        4. Adding Text to Your SVG Drawings
        5. Adding Interactivity and JavaScript to Your SVG Drawings
      5. Leveraging SVC Drawing Tools
      6. Adding the CANVAS Element to Your Web Page
        1. Starting with the Basics
        2. Controlling Shapes
        3. Drawing Simple Shapes
        4. Drawing Lines
        5. Creating Arcs
        6. Adding Color
        7. Adding Animation to CANVAS Images
      7. What You Have Learned
    2. Project 3: Inserting Video into Your Web Design
      1. Creating the Video
      2. Converting the Video to Ogg Format
      3. Embedding the Video into the Web Page
      4. Adding Audio to Your Web Page
      5. Summary
  10. Section 4
    1. HTML5 Rich Media Foundation
      1. Working with VIDEO and AUDIO Tags
      2. Using HTML5 Rich Media Tags
        1. Controlling Video with VIDEO Tags
        2. Controlling Audio with AUDIO Tags
      3. Encoding Video and Audio for Delivery over the Web
        1. Creating Video in Ogg Theora Format
        2. Creating Video in H.264 Format
        3. Creating Audio That Plays Back Through Your Web Browser
        4. Ensuring That Your Video and Audio Play Back
      4. Serving Video from Your Servers
      5. What about Google’s WebM?
      6. What You Have Learned
    2. Project 4: Creating SVG Logos and CANVAS Charts
      1. Creating an SVG Logo
      2. Inserting a CANVAS-Driven Dynamic Chart
      3. Summary
  11. Section 5
    1. HTML5 JavaScript Model
      1. Understanding JavaScript
      2. JavaScript as a Programming Language
        1. Working with Variables
        2. Using Math in Your Scripts
        3. Assessing Values Using Operators
        4. Controlling Outcomes with If/Else and Switch Statements
        5. Specific Objects You Can Use in JavaScript
      3. Developing JavaScript for HTML5
        1. Using Web Workers
        2. Storing Data with LocalStorage
        3. Controlling Geolocation Devices with JavaScript
      4. Integrating JavaScript with HTML5
      5. Taking JavaScript to the Next Level with Ajax
        1. Using Ajax in Your Work
        2. Popular Ajax Libraries
        3. Going Mobile with jQuery
      6. What You Have Learned
    2. Project 5: Working with JavaScript
      1. Working with jQuery
      2. Developing a Lightbox Image Management Tool
      3. Creating the Images
      4. Working with JavaScript
      5. Stitching It All Together in HTML
      6. Controlling Forms with jQuery
      7. Inserting a Tabbed Interface to Build on Top of Your Existing jQuery Projects
      8. Using Additional Ajax Libraries: Working with Adobe’s Spry Framework
      9. Working with Additional Ajax Libraries: Using Yahoo’s YUI Framework
      10. Linking to Content Hosted on Different Web Sites
      11. Summary
  12. Index