HTML5 For Dummies Quick Reference - Weebly

Transcription

www.it-ebooks.info

Area to cut and punch.9375Welcome to HTML5 For Dummies Quick Reference. Keep this book withinarm’s reach to find quick answers to your questions.HTML is the predominant programming language used to create Web pages.HTML5 is the most recent update to the HTML standard which is maintainedand governed by the World Wide Web Consortium (W3C). HTML5 representsa major change to HTML — arguably the most substantial change since thedevelopment of XHTML. HTML5 has enhanced rich media, geolocation,database and mobile capabilities, and is now able to script APIs.sppAeliMobThis book covers the fundamentals for developing Web sites using HTML5by utilizing clear-cut tasks, code examples, step-by-step instructions, andeasy-to-follow advice. This book provides seasoned and new Web programmersand developers with a fast reference for getting up to speed on HTML5.This is a For Dummies book, so you have to expectsome snazzy icons, right? I don’t disappoint. Here’swhat you’ll see:This is where I pass along any small insights I mayhave gleaned in our travels.TECWatch out! Anything I mark with this icon is a placewhere things have blown up for me or my students. Ipoint out any potential problems with this icon.ICAL STHNFUFISBN 978-1-118-01252-9A lot of details here. I point out something importantthat’s easy to forget with this icon.I can’t really help being geeky once in a while. Everyso often I want to explain something a little deeper.Read this to impress people at your next computerscience cocktail party or skip it if you really don’tneed the details.There’s a Dummies Appfor This and ThatWith more than 200 million books in print and over1,600 unique titles, Dummies is a global leader inhow-to information. Now you can get the same greatDummies information in an App. With topics such asWine, Spanish, Digital Photography, Certification, andmore, you’ll have instant access to the topics youneed to know in a format you can trust.To get information on all our Dummies apps, visit the following:www.Dummies.com/go/mobile from your computer.www.Dummies.com/go/iphone/apps from your phone.www.it-ebooks.info

HTML5FORDUMmIES‰QUICK REFERENCEby Andy Harriswww.it-ebooks.info01 9781118012529-ffirs.indd i3/21/11 8:51 AM

HTML5 For Dummies Quick ReferencePublished byWiley Publishing, Inc.111 River StreetHoboken, NJ 07030-5774www.wiley.comCopyright 2011 by Wiley Publishing, Inc., Indianapolis, IndianaPublished by Wiley Publishing, Inc., Indianapolis, IndianaPublished simultaneously in CanadaNo part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means,electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 ofthe 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization throughpayment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978)750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department,John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.Trademarks: Wiley, the Wiley Publishing logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!, TheDummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, Making Everything Easier, and related trade dressare trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners.Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book.LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONSOR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK ANDSPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR APARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THISWORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL,ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICESOF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHORSHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE ISREFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOESNOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION ORWEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THATINTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORKWAS WRITTEN AND WHEN IT IS READ.For general information on our other products and services, please contact our Customer Care Department within the U.S.at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.For technical support, please visit www.wiley.com/techsupport.Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available inelectronic books.Library of Congress Control Number: 2011924127ISBN: 978-1-118-01252-9Manufactured in the United States of America10 9 8 7 6 5 4 3 2 1www.it-ebooks.info01 9781118012529-ffirs.indd ii3/21/11 8:51 AM

About the AuthorAndy Harris once owned a TRS-80 Model I. It’s still in the garage. He remembersfondly typing BASIC code into that machine and wondering how it really worked.He eventually taught himself enough programming to work as a consultant whilepursuing a career in special education. He now teaches for Indiana University —Purdue University / Indianapolis as a Senior Lecturer in Computer Science. Heteaches Web programming, game development, and Freshman ComputerScience classes.www.it-ebooks.info01 9781118012529-ffirs.indd iii3/21/11 8:51 AM

www.it-ebooks.info01 9781118012529-ffirs.indd iv3/21/11 8:51 AM

DedicationI dedicate this book to Jesus Christ, my personal savior, and to Heather, the joyin my life. I also dedicate this project to Benjamin, Jacob, Matthew, andElizabeth. I love each of you.Author’s AcknowledgmentsPeople often think of writing as a solo sport, but I know better. Thanks toHeather, for being amazing (again and again). Thank you Katie Feltman, foranother interesting project, and for being a consistent friend. Thanks to BlairPottenger for all your support on this book. You wrestled this monster intodecent shape. Thanks very much to Heidi Unger for your editing help. It tookmore than a minute to win this one. Thank you Ronald Norman for the technicaledit. You found a number of goofy errors that would have confused students.Thank you so much for your vigilance.Thanks also to the many people at Wiley who the author never gets to meet. Iappreciate your contributions. Thank you also to the open-source communitywhich creates so many excellent tools. A big thanks to the IUPUI family forsupporting me through this and so many other projects, especially Micheleand Lingma.Finally, thank you to my extended family — the Friday morning guys, and theSunday evening families. I’m lucky to have a job where I get to publicly thankyou for all you add to my life.www.it-ebooks.info01 9781118012529-ffirs.indd v3/21/11 8:51 AM

Publisher’s AcknowledgmentsWe’re proud of this book; please send us your comments at http://dummies.custhelp.com. For othercomments, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at317-572-3993, or fax 317-572-4002.Some of the people who helped bring this book to market include the following:Acquisitions, Editorial, and Media DevelopmentComposition ServicesProject Editor: Blair J. PottengerAcquisitions Editor: Katie FeltmanCopy Editor: Heidi UngerTechnical Editor: Ronald NormanEditorial Manager: Kevin KirschnerMedia Development Project Manager:Laura Moss-HollisterMedia Development Assistant Project Manager:Jenny SwisherMedia Development Associate Producers:Josh Frank, Marilyn Hummel, Douglas Kuhn,and Shawn PatrickEditorial Assistant: Amanda GrahamSr. Editorial Assistant: Cherie CaseProject Coordinator: Katie CrockerLayout and Graphics: Erin ZeltnerProofreaders: John Greenough, Sossity R. SmithIndexer: Potomac Indexing LLCPublishing and Editorial for Technology DummiesRichard Swadley, Vice President and Executive Group PublisherAndy Cummings, Vice President and PublisherMary Bednarek, Executive Acquisitions DirectorMary C. Corder, Editorial DirectorPublishing for Consumer DummiesDiane Graves Steele, Vice President and PublisherComposition ServicesDebbie Stailey, Director of Composition Serviceswww.it-ebooks.info01 9781118012529-ffirs.indd vi3/21/11 8:51 AM

A Note About the Term HTML5As this book was nearing completion, the World Wide Web Consortium (W3C)announced that the change of the upcoming version of HTML would not beHTML5, but simply HTML. They reasoned that a collaborative project like anHTML standard is an evolution rather than a strict milestone. When HTML5 isreasonably universal, there will be no need to call it HTML5, but simple HTMLwill do.For the purposes of this book, it is important to distinguish between the currentstate of the art and the evolving standard that is the focus of this work. For thatreason, I refer to the emerging standards as HTML5 to distinguish them from theolder approaches to Web development, and keep the term HTML5 in the title.Companion Resources On the WebBe sure to check out my Web site for working examples of every code fragmentin the book: www.aharrisbooks.net/h5qr.Also check out this book’s companion Web site at www.dummies.com/go/html5fdqr to access “Bonus Part 1: Using JavaScript” for a review (or preview)of computer programming in JavaScript. Programming is a complex business,and learning how to program in JavaScript deserves its own book; see myJavaScript and AJAX For Dummies (Wiley) or HTML, XHTML, and CSS All-In-OneFor Dummies, 2nd edition (Wiley) books for a more complete treatment.www.it-ebooks.info01 9781118012529-ffirs.indd vii3/21/11 8:51 AM

www.it-ebooks.info01 9781118012529-ffirs.indd viii3/21/11 8:51 AM

Table of ContentsPart 1: Moving on to HTML5 . 1A Quick History of HTML . 2A bit of ancient history. 2And the first browser war begins . . . . 2A new challenger arises from the ashes . 3HTML 4 was getting old . 4Getting to Know the Real HTML5 . 4HTML5 Is More than HTML! . 5HTML . 6CSS . 6JavaScript . 7Server technologies . 7Looking At Browser Features . 8Assessing your browser’s capabilities . 8Checking for features in your code . 9Picking a Suitable Browser . 12Using Chrome Frame to Add Support to IE. 13Part 2: HTML Foundations. 15Exploring HTML and XHTML . 16Appreciating HTML. 16Emergence of XHTML . 17It’s alive, and it’s HTML5! . 18Setting up a basic HTML page . 19Fleshing Out Your Page . 22Adding images . 22Including links . 24Making lists and tables . 26Utilizing tables . 28Making a Form . 30Form structure tags . 33Constructing text input . 34Creating password fields . 35Erecting a multiline text box . 35Forming drop-down lists . 36Making checkboxes . 37Popping in radio buttons . 38Putting in action buttons . 39Validating Your Pages . 40www.it-ebooks.info02 9781118012529-ftoc.indd ix3/21/11 8:51 AM

xHTML5 For Dummies Quick ReferencePart 3: New or Changed HTML5 Elements . 41Semantic Page Elements. 42address . 42article. 42aside. 43footer . 43header. 44hgroup . 44menu . 44nav . 45section . 45Inline Semantic Elements . 46command . 46details . 47dfn . 47figcaption . 47figure . 48summary/details . 48time . 48wbr . 49Media Elements . 49audio . 49canvas. 51embed . 53source . 54svg . 54video . 55Ruby Elements . 56ruby. 56rt . 56rp . 56Part 4: New and Modified Form Elements . 57New Form Elements . 58datalist . 58fieldset . 58keygen . 59label . 59meter . 60output . 61progress . 61New Form Element Attributes . 62autofocus . 62pattern . 62placeholder . 63required. 63Validation . 63www.it-ebooks.info02 9781118012529-ftoc.indd x3/21/11 8:51 AM

Table of ContentsxiNew Form Input Types . 64color. 65date . 65datetime . 65datetime-local . 66email . 67month . 67number . 67range . 68search . 69tel . 69time . 70url . 70week . 70Part 5: Formatting with CSS . 71A Quick Overview of CSS . 72Employing local styles. 74Making use of ids and classes . 77Managing levels of CSS . 80Managing the Appearance of Your Page . 82Comprehending hex colors . 82Editing text . 85Joining the border patrol . 89Putting in background images . 90Using Float Positioning . 93Getting to know the display types . 95Having a block party . 96Floating to a two-column look . 97Cleaning up the form . 98Using absolute positioning . 100Part 6: New and Improved CSS Elements .103CSS3’s New Selection Tools . 104Attribute selection . 104not . 104nth-child . 104Other new pseudo-classes . 106Downloadable Fonts and Text Support . 106@font-face . 106Column support . 107text-stroke . 108text-shadow . 109Flexible Box Layout Model . 110Creating a flexible box layout . 110Viewing a flexible box layout . 111. . . And now for a little reality . 113www.it-ebooks.info02 9781118012529-ftoc.indd xi3/21/11 8:51 AM

xiiHTML5 For Dummies Quick ReferenceNew Visual Elements . 114Color values . 114Gradients . 115Image borders . 118Reflections . 119Rounded corners . 122Shadows . 122Transformations. 124Transition animation . 126Transparency . 128Part 7: Changes in JavaScript.129Behold: The New JavaScript Selection Options . 130document.getElementsByClassName( ) . 130document.getElementsByTagName( ) . 130document.querySelector( ) . 131document.querySelectorAll( ) . 131Data Options . 131Achieving offline cache . 132Local storage . 134WebSQL database . 139Miscellaneous New JavaScript Features . 143Geolocation . 143Notifications . 146Web sockets. 148Web workers . 156Part 8: Working with the Canvas .163Canvas Basics . 164Setting up the canvas . 164Understanding how canvas works . 165Controlling Fill and Stroke Styles . 166Colors . 166Gradients . 166Patterns . 169Drawing Essential Shapes . 171Drawing rectangles . 171Drawing text. 172Enhancing shapes with shadows . 173Drawing More Complex Shapes . 175Line-drawing options . 176Making arcs and circles. 179Making quadratic curves . 181Producing a bezier curve . 183www.it-ebooks.info02 9781118012529-ftoc.indd xii3/21/11 8:51 AM

Table of ContentsxiiiImages . 184Drawing an image on the canvas . 185Drawing part of an image . 186Manipulating Images with Transformations . 187Building a transformed image . 188Some key points about transformations . 191Using Animation . 191Basic structure of the animation loop. 191Creating the constants . 192Deploying the animation .

Trademarks: Wiley, the Wiley Publishing logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, Making Everything Easier, and related trade dress . www.it-ebooks.info. 01_9781118012529-ffirs.indd iv 3/21/11 8:51 AM www.i