HTML5: The Missing Manual HTML5 (en)
User Manual:
Open the PDF directly: View PDF .
Page Count: 519
Download | |
Open PDF In Browser | View PDF |
www.it-ebooks.info www.it-ebooks.info HTML5 2nd Edition The book that should have been in the box® Matthew MacDonald Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo www.it-ebooks.info 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 (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com. August 2011: December 2013: First Edition. Second Edition Revision History for the Second Edition: 2013-12-09 First release See http://oreil.ly/html5tmm_2e 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] www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info v www.it-ebooks.info 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: nanbarber@oreilly.com. 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: kristen@oreilly.com. Kara Ebrahim (conversion) lives, works, and plays in Cambridge, MA. She loves graphic design and all things outdoors. Email: kebrahim@oreilly.com. 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: little_media@yahoo.com. Julie Hawks (indexer) is a teacher and eternal student. She can be found wandering about with a camera in hand. Email: juliehawks@gmail.com. Shelley Powers (technical reviewer) is a former HTML5 working group member and author of several O’Reilly books. Website: http://burningbird.net. 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 www.heathrowe.com/blog. Email: darrell@heathrowe.com. THE MISSING CREDITS www.it-ebooks.info 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 www.it-ebooks.info 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 www.missingmanuals.com/library. html. THE MISSING CREDITS www.it-ebooks.info ix www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info • 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 create an HTML5 page. However, you do need JavaScript if you want to use many of HTML5’s most powerful features, like drawing on a canvas or talking to a web server. If you have a smattering of programming experience but don’t know much about JavaScript, then Appendix B, “JavaScript: The Brains of Your Page” can help you get up to speed. But if the idea of writing code sounds about as comfortable as crawling into bed with an escaped python, then you’ll either end up skipping a lot of material in this book, or you’ll need to fill in the gaps with a book like JavaScript & jQuery: The Missing Manual by David Sawyer McFarland. Writing HTML5 You can write HTML5 pages using the same software you use to write HTML pages. That can be as simple as a lowly text editor, like Notepad (on Windows) or TextEdit (on Mac). Many current design tools, like Adobe Dreamweaver and Microsoft Visual Studio, have templates that let you quickly create new HTML5 documents. However, the basic structure of an HTML5 page is so simple that you can use any web editor to create one, even if it wasn’t specifically designed for HTML5. NOTE And, of course, it doesn’t matter whether you do your surfing and web page creation on a Windows PC or the latest MacBook Pro—HTML5 pays no attention to what operating system you use. Viewing HTML5 You’ll get support for most HTML5 features in the latest version of any modern browser, including the mobile browsers than run on Apple and Android devices. As long as your browser is up to date, HTML5 will perform beautifully—and you’ll be able to try out the examples in this book. INTRODUCTION www.it-ebooks.info xiii WHEN WILL HTML5 BE READY? Currently, no browser supports every last detail of HTML5, in part because HTML5 is really a collection of interrelated standards. Google Chrome generally leads the browser race in HTML5 support, with Firefox and Opera in close pursuit. Safari lags the pack a bit, and Internet Explorer trails still further behind. The real problem lies in the old copies of Internet Explorer that can’t be updated because they’re running on creaky operating systems like Windows Vista or Windows XP (which is still chugging away on a fifth of the world’s desktop computers). Page 26 has a closer look at this problem and some advice on how to deal with it. When Will HTML5 Be Ready? The short answer is “now.” Even the despised Internet Explorer 6, which is 10 years old and chock-full of website-breaking quirks, can display basic HTML5 documents. That’s because the HTML5 standard was intentionally created in a way that embraces and extends traditional HTML. The more detailed answer is “it depends.” As you’ve already learned, HTML5 is a collection of different standards with different degrees of browser support. So although every web developer can switch over to HTML5 documents today (and many big sites, like Google, YouTube, and Wikipedia, already have), it may be some time before it’s safe to use all of HTML5’s fancy new features—at least without adding some sort of fallback mechanism for less-enlightened browsers. NOTE Before encouraging you to use a new HTML5 feature, this book clearly indicates that feature’s current level of browser support. Of course, browser versions change relatively quickly, so you’ll want to perform your own up-to-date research before you embrace any feature that might cause problems. The website http://caniuse.com lets you look up specific features and tells you exactly which browser versions support them. (You’ll learn more about this useful tool on page 27.) As a standards-minded developer, you also might be interested in knowing how far the various standards are in their journey toward official status. This is complicated by the fact that the people who dreamt up HTML5 have a slightly subversive philosophy, and they often point out that what browsers support is more important than what the official standard says. In other words, you can go ahead and use everything that you want right now, if you can get it to work. But web developers, big companies, governments, and other organizations often take their cues about whether a language is ready to use by looking at the status of its standard. At this writing, the HTML5 language is in the candidate recommendation stage, which means the standard is largely settled but browser makers are still polishing up their HTML5 implementations. The next and final stage is for the standard to become a full recommendation, and HTML5 is expected to hit that landmark in late 2014. In the meantime, the W3C has already published a working draft of the next version of the standard, which it calls HTML 5.1. (For more help making sense of all the different versions, see the box on the next page.) xiv HTML5: THE MISSING MANUAL, SECOND EDITION www.it-ebooks.info ABOUT THE OUTLINE FREQUENTLY ASKED QUESTION The Difference Between HTML5 and HTML 5.1 Is there another new version of HTML? And what’s with the inconsistent spacing? As you’ll learn in Chapter 1, HTML5 has gone through two sets of hands. This process has left a few quirks behind, including a slightly schizophrenic versioning system. The people who originally created HTML5—the members of WHATWG, which you’ll meet on page 5—aren’t much interested in version numbers. They consider HTML5 to be a living language. They encourage web developers to pay attention to browser support, rather than worry about exact version numbers. However, the WHATWG passed HTML5 to the official web standard-keepers—the W3C—so they could finalize it. The W3C is a more careful, methodical organization. The folks there wanted a way to separate their initial publication of the HTML5 standard from the slightly tweaked and cleaned up successors that were sure to follow. Thus, the W3C decided to name the first release of the HTML5 standard HTML 5.0 (note the space). The second release will be HTML 5.1, followed by a third release called HTML 5.2. Confusingly enough, all these versions are still considered to be HTML5. Incidentally, the later iterations of the HTML5 standard aren’t likely to add major changes. Instead, new features will turn up in separate, complementary specifications. This way, small groups of people can quickly develop new, useful HTML5 features without needing to wait for an entirely new revision of the language. About the Outline This book crams a comprehensive HTML5 tutorial into 13 chapters. Here’s what you’ll find: Part One: Meet the New Language • Chapter 1 explains how HTML turned into HTML5. You’ll meet your first HTML5 document, see how the language has changed, and take a look at browser support. • Chapter 2 tackles HTML5’s semantic elements—a group of elements that can inject meaning into your markup. Used properly, this extra information can help browsers, screen readers, web design tools, and search engines work smarter. • Chapter 3 goes deeper into the world of semantics with add-on standards like microdata. And while it may seem a bit theoretical, there’s a fat prize for the web developers who understand it best: better, more detailed listings in search engines like Google. • Chapter 4 explores HTML5’s changes to the web form elements—the text boxes, lists, checkboxes, and other widgets that you use to collect information from your visitors. HTML5 adds a few frills and some basic tools for catching data-entry errors. INTRODUCTION www.it-ebooks.info xv ABOUT THE OUTLINE Part Two: Video, Graphics, and Glitz • Chapter 5 hits one of HTML5’s most exciting features: its support for audio and video playback. You’ll learn how to survive Web Video Codec Wars to create playback pages that work in every browser, and you’ll even see how to create your own customized player. • Chapter 6 introduces the latest version of the CSS3 standard, which complements HTML5 nicely. You’ll learn how to jazz up your text with fancy fonts and add eye-catching effects with transitions and animation. • Chapter 7 explores CSS3 media queries. You’ll learn how to use them to create responsive designs—website layouts that seamlessly adapt themselves to different mobile devices. • Chapter 8 introduces the two-dimensional drawing surface called the canvas. You’ll learn how to paint it with shapes, pictures, and text, and even build a basic drawing program (with a healthy dose of JavaScript code). • Chapter 9 pumps up your canvas skills. You’ll learn about shadows and fancy patterns, along with more ambitious canvas techniques like clickable, interactive shapes and animation. Part Three: Building Web Apps • Chapter 10 covers the web storage feature that lets you store small bits of information on the visitor’s computer. You’ll also learn about ways to process a userselected file in your web page JavaScript code, rather than on the web server. • Chapter 11 explores the HTML5 caching feature that can let a browser keep running a web page, even if it loses the web connection. • Chapter 12 dips into the challenging world of web server communication. You’ll start with the time-honored XMLHttpRequest object, which lets your JavaScript code contact the web server and ask for information. Then you’ll move on to two newer features: server-side events and the more ambitious web sockets. • Chapter 13 covers three miscellaneous features that address challenges in modern web applications. First, you’ll see how geolocation can pin down a visitor’s position. Next, you’ll use web workers to run time-consuming tasks in the background. Finally, you’ll learn about the browser history feature, which lets you sync up the web page URL to the current state of the page. There are also two appendixes that can help you catch up with the fundamentals you need to master HTML5. Appendix A, “Essential CSS,” gives a stripped-down summary of CSS; Appendix B, “JavaScript: The Brains of Your Page” gives a concise overview of JavaScript. xvi HTML5: THE MISSING MANUAL, SECOND EDITION www.it-ebooks.info ABOUT THE ONLINE RESOURCES About the Online Resources As the owner of a Missing Manual, you’ve got more than just a book to read. Online, you’ll find example files as well as tips, articles, and maybe even a video or two. You can also communicate with the Missing Manual team and tell us what you love (or hate) about the book. Head over to www.missingmanuals.com, or go directly to one of the following sections. The Missing CD This book doesn’t have a CD pasted inside the back cover, but you’re not missing out on anything. Go to http://missingmanuals.com/cds/html5tmm2e to download the web page examples discussed and demonstrated in this book. And so you don’t wear down your fingers typing long web addresses, the Missing CD page offers a list of clickable links to the websites mentioned in each chapter. TIP If you’re looking for a specific example, here’s a quick way to find it: Look at the corresponding figure in this book. The file name is usually visible at the end of the text in the web browser’s address box. For example, if you see the file path c:\HTML5\Chapter01\SuperSimpleHTML5.html (Figure 1-1), you’ll know that the corresponding example file is SuperSimpleHTML5.html. The Try-Out Site There’s another way to use the examples: on the example site at www.prosetech.com/ html5. There you’ll find live versions of every example from this book, which you can run in your browser. This convenience just might save you a few headaches, because HTML5 includes several features that require the involvement of a real web server. (If you’re running web pages from the hard drive on your personal computer, these features may develop mysterious quirks or stop working altogether.) By using the live site, you can see how an example is supposed to work before you download the page and start experimenting on your own. NOTE Don’t worry—when you come across an HTML5 feature that needs web server hosting, this book will warn you. Registration If you register this book at oreilly.com (www.oreilly.com), you’ll be eligible for special offers—like discounts on future editions of HTML5: The Missing Manual. Registering takes only a few clicks. Type http://tinyurl.com/registerbook into your browser to hop directly to the Registration page. INTRODUCTION www.it-ebooks.info xvii SAFARI® BOOKS ONLINE Feedback Got questions? Need more information? Fancy yourself a book reviewer? On our Feedback page, you can get expert answers to questions that come to you while reading, share your thoughts on this Missing Manual, and find groups of folks who share your interest in creating their own sites. To have your say, go to www.missingmanuals.com/feedback. Errata To keep this book as up to date and accurate as possible, each time we print more copies, we’ll make any confirmed corrections you suggest. We also note such changes on the book’s website, so you can mark important corrections into your own copy of the book, if you like. Go to http://tinyurl.com/html52e-mm to report an error and view existing corrections. Safari® Books Online Safari® Books Online is an on-demand digital library that lets you search over 7,500 technology books and videos. With a subscription, you can read any page and watch any video from our library. Access new titles before they’re available in print. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features. O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com. xviii HTML5: THE MISSING MANUAL, SECOND EDITION www.it-ebooks.info PART Modern Markup CHAPTER 1: Introducing HTML5 CHAPTER 2: Structuring Pages with Semantic Elements CHAPTER 3: Writing More Meaningful Markup CHAPTER 4: Building Better Web Forms www.it-ebooks.info 1 www.it-ebooks.info CHAPTER Introducing HTML5 1 I f HTML were a movie, HTML5 would be its surprise twist. HTML wasn’t meant to survive into the 21st century. The official web standards organization, the W3C (short for World Wide Web Consortium), left HTML for dead way back in 1998. The W3C pinned its future plans on a specification called XHTML, which it intended to be HTML’s cleaned-up, modernized successor. But XHTML stumbled, and a group of disenfranchised rebels resuscitated HTML, laying the groundwork for the features that you’ll explore in this book. In this chapter, you’ll get the scoop on why HTML died and how it came back to life. You’ll learn about HTML5’s philosophy and features, and you’ll consider the thorny issue of browser support. You’ll also get your first look at an authentic HTML5 document. The Story of HTML5 The basic idea behind HTML—that you use elements to structure your content—hasn’t changed since the Web’s earliest days. In fact, even the oldest web pages still work perfectly in the most modern web browsers. Being old and successful also carries some risks—namely, that everyone wants to replace you. In 1998, the W3C stopped working on HTML and attempted to improve it with an XML-powered successor called XHTML 1.0. 3 www.it-ebooks.info THE STORY OF HTML5 XHTML 1.0: Getting Strict XHTML has most of the same syntax conventions as HTML, but it enforces stricter rules. Much of the sloppy markup that traditional HTML permitted just isn’t acceptable in XHTML. For example, suppose you want to italicize the last word in a heading, like so:The Life of a Duck
And you accidentally swap the final two tags:The Life of a Duck
When a browser encounters this slightly messed-up markup, it can figure out what you really want. It italicizes the last word without even a polite complaint. However, the mismatched tags break XHTML’s official rules. If you plug your page into an XHTML validator (or use a web design tool like Dreamweaver), you’ll get a warning that points out your mistake. From a web design point of view, XHTML’s strictness is helpful in that it lets you catch minor mistakes that might cause inconsistent results on different browsers (or might cause bigger problems when you edit and enhance the page). At first, XHTML was a success story. Professional web developers, frustrated with browser quirks and the anything-goes state of web design, flocked to XHTML. Along the way, they were forced to adopt better habits and give up a few of HTML’s half-baked formatting features. However, many of XHTML’s imagined benefits—like interoperability with XML tools, easier page processing for automated programs, portability to mobile platforms, and extensibility of the XHTML language itself—never came to pass. Still, XHTML became the standard for most serious web designers. And while everyone seemed pretty happy, there was one dirty secret: Although browsers understood XHTML markup, they didn’t enforce the strict error-checking that the standard required. That means a page could break the rules of XHTML, and the browsers wouldn’t blink twice. In fact, there was nothing to stop a web developer from throwing together a mess of sloppy markup and old-fashioned HTML content and calling it an XHTML page. There wasn’t a single browser on the planet that would complain. And that made the people in charge of the XHTML standard deeply uncomfortable. XHTML 2: The Unexpected Failure XHTML 2 was supposed to provide a solution to this sloppiness. It was set to tighten up the error-handling rules, forcing browsers to reject invalid XHTML 2 pages. XHTML 2 also threw out many of the quirks and conventions that originated with HTML. For example, the system of numbered headings (,
,
, and so on) was superseded by a new
element, whose significance depended on its position in a web page. Similarly, the element was eclipsed by a feature that let web developers transform any element into a link, and the element lost its alt attribute in favor of a new way to supply alternate content. 4 HTML5: THE MISSING MANUAL, SECOND EDITION www.it-ebooks.info These changes were typical of XHTML 2. In theory, they made for cleaner, more logical markup. In practice, the changes forced web designers to alter the way they wrote web pages (to say nothing of updating the web pages they already had), and added no new features to make all that work worthwhile. XHTML 2 even dumped a few well-worn elements that some web designers still loved, like for bold text, for italics, and