Summary of Contents Preface . xix 1. Basics: What is HTML5? . 1 2. Basics: The Anatomy of HTML5 . 7 3. Basics: Structuring Documents . 17 4. Basics: HTML5 Forms . 33 5. Basics: Multimedia, Audio and Video . 51 6. Multimedia: Preparing Your Media . 59 7. Multimedia: Using Native HTML5 Audio . 69 8. Multimedia: Using Native HTML5 Video . 77 9. Multimedia: The source Element . 87 10. Mutimedia: The track Element . 93 11. Multimedia: Scripting Media Players . 111 12. Canvas & SVG: An Introduction to Canvas . 123 13. Canvas & SVG: Canvas Basics . 127 14. Canvas & SVG: Handling Non-supporting Browsers . 137 15. Canvas & SVG: Canvas Gradients . 139 16. Canvas & SVG: Canvas Images and Videos . 145 17. Canvas & SVG: An Introduction to SVG . 149 18. Canvas & SVG: Using SVG . 159 19. Canvas & SVG: SVG Bézier Curves . 163 20. Canvas & SVG: SVG Filter Effects . 169 21. Canvas & SVG: Canvas or SVG? . 175 22. Offline Apps: Detecting When the User Is Connected . 179 23. Offline Apps: Application Cache . 185 24. Offline Apps: Web Storage . 197 25. Offline Apps: Storing Data With Client-side Databases . 215 26. APIs: Overview . 233 27. APIs: Web Workers . 239 28. APIs: The Geolocation API . 249 29. APIs: Server Sent Events . 255 30. APIs: The WebSocket API . 263 31. APIs: The Cross-document Messaging API . 269 JUMP START HTML5 BY TIFFANY B. BROWN KERRY BUTTERS SANDEEP PANDA iv Jump Start HTML5 by Tiffany B. Brown, Kerry Butters, and Sandeep Panda Copyright © 2014 SitePoint Pty. Ltd. Product Manager: Simon Mackie English Editor: Paul Fitzpatrick Technical Editor: Craig Buckler Cover Designer: Alex Walker Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: [email protected] ISBN 978-0-9802858-2-6 (print) ISBN 978-0-9870908-0-5 (ebook) Printed and bound in the United States of America v About Tiffany B. Brown Tiffany B. Brown is a freelance web developer and technical writer based in Los Angeles. She has worked on the web for more than a decade at a mix of media companies and agencies. Before founding her consultancy, Webinista, Inc., she was part of the Opera Software De- veloper Relations & Tools team. Now she offers web development and consulting services to agencies and small design teams. About Kerry Butters Kerry Butters1 is a technology writer from the UK. With a background in technology and publishing, Kerry writes across a range of techy subjects including web design and corporate tech. Kerry also heads up markITwrite digital content agency2, loves to play around with anything tech related and is an all-round geek. About Sandeep Panda Sandeep Panda is a web developer and writer with a passion for JavaScript and HTML5. He has over four years' experience programming for the Web. He loves experimenting with new technologies as they emerge and is a continuous learner. While not programming, Sandeep can be found playing games and listening to music. About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile development, design, and more. About Jump Start Jump Start books provide you with a rapid and practical introduction to web development languages and technologies. Typically around 150 pages in length, they can be read in a weekend, giving you a solid grounding in the topic and the confidence to experiment on your own. 1 https://plus.google.com/u/0/+KerryButters?rel=author 2 http://markitwrite.com Table of Contents Preface . xix Who Should Read This Book . xx Conventions Used . xx Code Samples . xx Tips, Notes, and Warnings . xxii Supplementary Materials . xxii Tools You’ll Need . xxii Do You Want to Keep Learning? . xxiv Chapter 1 Basics: What is HTML5? . 1 A Brief History of HTML5 . 2 HTML: The Early Years . 2 A Detour Through XHTML Land . 3 The Battle for World DOM-ination . 4 Applets and Plugins . 4 What HTML5 Isn’t . 5 A Note on the HTML5 Specification . 6 Chapter 2 Basics: The Anatomy of HTML5 . 7 Your First HTML5 Document . 8 The Two Modes of HTML5 Syntax . 9 HTML Syntax . 10 To Quote or Not Quote: Attributes in HTML5 . 12 A Pared-down HTML5 Document . 12 "XHTML5": HTML5’s XML Syntax . 13 viii Chapter 3 Basics: Structuring Documents . 17 The article Element . 20 Putting It Together . 23 The section Element . 25 div Versus section . 27 Other Document Elements . 28 figure and figcaption . 28 main Element . 29 Chapter 4 Basics: HTML5 Forms . 33 Starting an HTML5 Form . 34 The input Element . 35 Collecting Names . 35 Using Form Labels . 36 Requiring Form Fields . 36 Styling Required Forms . 37 Collecting Email Addresses, Phone Numbers, and URLs . 38 Uploading Files . 42 The datalist Element . 44 Other Input Types . 45 Date and Time Inputs . 49 Chapter 5 Basics: Multimedia, Audio and Video . ..