HTML5_ The Missing Manual, 2nd EditionReduced.pdf - HTML5...

  • No School
  • AA 1
  • irisnavarrete
  • 519
  • 100% (1) 1 out of 1 people found this document helpful

This preview shows page 1 out of 519 pages.

Unformatted text preview: HTML5 2nd Edition The book that should have been in the box® Matthew MacDonald Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo HTML5: The Missing Manual, 2nd Edition by Matthew MacDonald Copyright © 2014 Matthew MacDonald. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles ( ). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected] August 2011: First Edition. December 2013: Second Edition Revision History for the Second Edition: 2013-12-09 First release See for release details. The Missing Manual is a registered trademark of O’Reilly Media, Inc. The Missing Manual logo, and “The book that should have been in the box” are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media is aware of a trademark claim, the designations are capitalized. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained in it. ISBN-13: 978-1-4493-6326-0 [LSI] Contents The Missing Credits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi Part One: CHAPTER 1: Modern Markup Introducing HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 The Story of HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Three Key Principles of HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Your First Look at HTML5 Markup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 A Closer Look at HTML5 Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 HTML5’s Element Family. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Using HTML5 Today. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 CHAPTER 2: Structuring Pages with Semantic Elements. . . . . . . . . . . . . . . . 37 Introducing the Semantic Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Retrofitting a Traditional HTML Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Browser Compatibility for the Semantic Elements . . . . . . . . . . . . . . . . . . . . . . 51 Designing a Site with the Semantic Elements. . . . . . . . . . . . . . . . . . . . . . . . . . 53 The HTML5 Outlining System. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 CHAPTER 3: Writing More Meaningful Markup. . . . . . . . . . . . . . . . . . . . . . . . . . 75 The Semantic Elements Revisited. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Other Standards That Boost Semantics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 A Practical Example: Retrofitting an “About Me” Page . . . . . . . . . . . . . . . . . 88 How Search Engines Use Metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 CHAPTER 4: Building Better Web Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Understanding Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Revamping a Traditional HTML Form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Validation: Stopping Errors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Browser Support for Web Forms and Validation. . . . . . . . . . . . . . . . . . . . . . . 119 New Types of Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 New Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 An HTML Editor in a Web Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 iii Part Two: Video, Graphics, and Glitz CHAPTER 5: Audio and Video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 The Evolution of Web Video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Introducing HTML5 Audio and Video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Understanding the HTML5 Media Formats. . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Fallbacks: How to Please Every Browser. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Controlling Your Player with JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Video Captions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 CHAPTER 6: Fancy Fonts and Effects with CSS3. . . . . . . . . . . . . . . . . . . . . . . 177 Using CSS3 Today. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Building Better Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Creating Effects with Transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Web Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 CHAPTER 7: Responsive Web Design with CSS3. . . . . . . . . . . . . . . . . . . . . . . 221 Responsive Design: The Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Adapting Your Layout with Media Queries. . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 CHAPTER 8: Basic Drawing with the Canvas. . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Getting Started with the Canvas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Building a Basic Paint Program. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Browser Compatibility for the Canvas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 CHAPTER 9: Advanced Canvas: Interactivity and Animation. . . . . . . . . . . 275 Other Things You Can Draw on the Canvas. . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Shadows and Fancy Fills. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 Making Your Shapes Interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Animating the Canvas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 A Practical Example: The Maze Game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Part Three: CHAPTER 10: Building Web Apps Storing Your Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Web Storage Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Deeper into Web Storage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 Reading Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 IndexedDB: A Database Engine in a Browser. . . . . . . . . . . . . . . . . . . . . . . . . 340 CHAPTER 11: Running Offline. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 Caching Files with a Manifest. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 Practical Caching Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366 iv Contents CHAPTER 12: Communicating with the Web Server. . . . . . . . . . . . . . . . . . . . . 375 Sending Messages to the Web Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 Server-Sent Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 Web Sockets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393 CHAPTER 13: Geolocation, Web Workers, and History Management. . . . 401 Geolocation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Web Workers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 History Management. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Part Four: Appendixes APPENDIX A: Essential CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 Adding Styles to a Web Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .435 The Anatomy of a Style Sheet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436 Slightly More Advanced Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 A Style Sheet Tour. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 APPENDIX B: JavaScript: The Brains of Your Page. . . . . . . . . . . . . . . . . . . . . . 451 How a Web Page Uses JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 A Few Language Essentials. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Interacting with the Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477 Contents v The Missing Credits ABOUT THE AUTHOR Matthew MacDonald is a science and technology writer with well over a dozen books to his name. Web novices can tiptoe out onto the Internet with him in Creating a Website: The Missing Manual. Office geeks can crunch the numbers in Excel 2013: The Missing Manual. And human beings of all description can discover just how strange they really are in the quirky handbooks Your Brain: The Missing Manual and Your Body: The Missing Manual. ABOUT THE CREATIVE TEAM Nan Barber (editor) has been working on the Missing Manual series since its inception. She lives in Massachusetts with her husband and various Apple and Android devices. Email: [email protected] Kristen Brown (production editor) is a graduate of the publishing program at Emerson College. She lives in the Boston area with her husband and their large collection of books and board games. Email: [email protected] Kara Ebrahim (conversion) lives, works, and plays in Cambridge, MA. She loves graphic design and all things outdoors. Email: [email protected] Julie Van Keuren (proofreader) quit her newspaper job in 2006 to move to Montana and live the freelancing dream. She and her husband (who is living the novel-writing dream) have two sons. Email: [email protected] Julie Hawks (indexer) is a teacher and eternal student. She can be found wandering about with a camera in hand. Email: [email protected] Shelley Powers (technical reviewer) is a former HTML5 working group member and author of several O’Reilly books. Website: . Darrell Heath (technical reviewer) is a freelance web/print designer and web developer from Newfoundland and Labrador, Canada, with a background in Information Technology and visual arts. He has authored weekly tutorial content for NAPP, Layers magazine, and Planet Photoshop, and in his spare time offers design- and technology-related tips through his blog at . Email: [email protected] THE MISSING CREDITS vii ACKNOWLEDGEMENTS No author could complete a book without a small army of helpful individuals. I’m deeply indebted to the whole Missing Manual team, especially my editor Nan Barber, who never seemed fazed by the shifting sands of HTML5; and expert tech reviewers Shelley Powers and Darrell Heath, who helped spot rogue errors and offered consistently good advice. And, as always, I’m also deeply indebted to numerous others who’ve toiled behind the scenes indexing pages, drawing figures, and proofreading the final copy. Finally, for the parts of my life that exist outside this book, I’d like to thank all my family members. They include my parents, Nora and Paul; my extended parents, Razia and Hamid; my wife, Faria; and my daughters, Maya, Brenna, and Aisha. Thanks, everyone! —Matthew MacDonald THE MISSING MANUAL SERIES Missing Manuals are witty, superbly written guides to computer products that don’t come with printed manuals (which is just about all of them). Each book features a handcrafted index; cross-references to specific pages (not just chapters); and RepKover, a detached-spine binding that lets the book lie perfectly flat without the assistance of weights or cinder blocks. Recent and upcoming titles include: Access 2013: The Missing Manual by Matthew MacDonald Adobe Edge Animate: The Missing Manual by Chris Grover Buying a Home: The Missing Manual by Nancy Conner Creating a Website: The Missing Manual, Third Edition by Matthew MacDonald CSS3: The Missing Manual, Third Edition by David Sawyer McFarland David Pogue’s Digital Photography: The Missing Manual by David Pogue Dreamweaver CS6: The Missing Manual by David Sawyer McFarland Dreamweaver CC: The Missing Manual by David Sawyer McFarland and Chris Grover Excel 2013: The Missing Manual by Matthew MacDonald FileMaker Pro 12: The Missing Manual by Susan Prosser and Stuart Gripman Flash CS6: The Missing Manual by Chris Grover Galaxy Tab: The Missing Manual by Preston Gralla Google+: The Missing Manual by Kevin Purdy iMovie ’11 & iDVD: The Missing Manual by David Pogue and Aaron Miller iPad: The Missing Manual, Sixth Edition by J.D. Biersdorfer viii THE MISSING CREDITS iPhone: The Missing Manual, Fifth Edition by David Pogue iPhone App Development: The Missing Manual by Craig Hockenberry iPhoto ’11: The Missing Manual by David Pogue and Lesa Snider iPod: The Missing Manual, Eleventh Edition by J.D. Biersdorfer and David Pogue JavaScript & jQuery: The Missing Manual, Second Edition by David Sawyer McFarland Kindle Fire HD: The Missing Manual by Peter Meyers Living Green: The Missing Manual by Nancy Conner Microsoft Project 2013: The Missing Manual by Bonnie Biafore Motorola Xoom: The Missing Manual by Preston Gralla Netbooks: The Missing Manual by J.D. Biersdorfer NOOK HD: The Missing Manual by Preston Gralla Office 2011 for Macintosh: The Missing Manual by Chris Grover Office 2013: The Missing Manual by Nancy Conner and Matthew MacDonald OS X Mountain Lion: The Missing Manual by David Pogue OS X Mavericks: The Missing Manual by David Pogue Personal Investing: The Missing Manual by Bonnie Biafore Photoshop CS6: The Missing Manual by Lesa Snider Photoshop CC: The Missing Manual by Lesa Snider Photoshop Elements 12: The Missing Manual by Barbara Brundage PHP & MySQL: The Missing Manual, Second Edition by Brett McLaughlin QuickBooks 2013: The Missing Manual by Bonnie Biafore Switching to the Mac: The Missing Manual, Mountain Lion Edition by David Pogue Switching to the Mac: The Missing Manual, Mavericks Edition by David Pogue Windows 8.1: The Missing Manual by David Pogue WordPress: The Missing Manual by Matthew MacDonald Your Body: The Missing Manual by Matthew MacDonald Your Brain: The Missing Manual by Matthew MacDonald Your Money: The Missing Manual by J.D. Roth For a full list of all Missing Manuals in print, go to . html. THE MISSING CREDITS ix Introduction A t first glance, you might assume that HTML5 is the fifth version of the HTML web page–writing language. But the real story is a whole lot messier. HTML5 is a rebel. It was dreamt up by a loose group of freethinkers who weren’t in charge of the official HTML standard. It allows page-writing practices that were banned a decade ago. It spends thousands of words painstakingly telling browser makers how to deal with markup mistakes, rather than rejecting them outright. It finally makes video playback possible without a browser plug-in like Flash. And it introduces an avalanche of JavaScript-fueled features that can give web pages some of the rich, interactive capabilities of traditional desktop software. Understanding HTML5 is no small feat. One stumbling block is that people use the word HTML5 to refer to a dozen or more separate standards. (As you’ll learn, this problem is the result of HTML5’s evolution. It began as a single standard and was later broken into more manageable pieces.) In fact, HTML5 has come to mean “HTML5 and all its related standards” or, even more broadly, “the next generation of webpage-writing technologies.” That’s the version of HTML5 that you’ll explore in this book: everything from the HTML5 core language to a few new features lumped in with HTML5 even though they were never a part of the standard. The second challenge of HTML5 is browser support. Different browsers support HTML5 to different degrees. The most notable laggard is Internet Explorer 8, which supports very little HTML5 and is still found on one out of every 20 web-surfing computers. (At least it was at the time of this writing. Page 30 explains how you can get the latest browser usage statistics.) Fortunately, there are workarounds that can bridge the browser support gaps—some easy, and some ugly. In this book, you’ll learn a bit of both on your quest to use HTML5 in your web pages today. xi WHAT YOU NEED TO GET STARTED Despite the challenges HTML5 presents, there’s one fact that no one disputes—HTML5 is the future. Huge software companies like Apple, Google, and Microsoft have lent it support, and the W3C (World Wide Web Consortium) has given up its work on XHTML to formalize and endorse it. With this book, you too can join the party and use HTML5 to create cool pages like the one shown in Figure I-1. FIGURE I-1 In the dark old days of the Web, you had to build your web page games with a browser plug-in like Flash. But with HTML5’s features, including the canvas (shown here), you can use trusty, plug-in-free JavaScript. Here, HTML5 powers a maze game that you’ll dissect in Chapter 9. What You Need to Get Started This book covers HTML5, the latest and greatest version of the HTML standard. And while you don’t need to be a markup master to read it, you do need some previous web design experience. Here’s the official rundown: xii HTML5: THE MISSING MANUAL, SECOND EDITION • Web page writing. This book assumes you’ve written at least a few web pages before (or at the very least, you understand how to use HTML elements to structure content into headings, paragraphs, and lists). If you’re new to web design, you’re better off with a gentler introduction, like my own Creating a Website: The Missing Manual, Third Edition. (But don’t worry; you won’t be trapped in the past, as all the examples in the third edition of Creating a Website are valid HTML5 documents.) WHAT YOU NEED TO GET STARTED • Style sheet experience. No modern website is possible without CSS—the Cascading Style Sheet standard—which supplies the layout and formatting for web pages. To follow along in this book, you should know the basics of style sheets: how to create them, what goes inside, and how to attach one to a page. If you’re a bit hazy on the subject, you can catch up in Appendix A, “Essential CSS.” But if you need more help, or if you just want to sharpen your CSS skills to make truly cool layouts and styles, check out a supplementary book like CSS3: The Missing Manual by David Sawyer McFarland. • JavaScript experience. No, you don’t need JavaScript to ...
View Full Document

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture