01_977279-ffirs.indd i 10/28/10 9:54 PM SMASHING HTML5 01_977279-ffirs.indd i 10/28/10 9:54 PM PUBLISHER’S ACKNOWLEDGMENTS Some of the people who helped bring this book to market include the following: Editorial and Production VP Consumer and Technology Publishing Director: Michelle Leete Associate Director–Book Content Management: Martin Tribe Associate Publisher: Chris Webb Publishing Assistant: Ellie Scott Development Editor: Elizabeth Kuball Copy Editor: Elizabeth Kuball Technical Editor: Harvey Chute Editorial Manager: Jodi Jensen Senior Project Editor: Sara Shlaer Editorial Assistant: Leslie Saxman Marketing Senior Marketing Manager: Louise Breinholt Marketing Executive: Kate Parrett Composition Services Compositor: Wiley Composition Services Proofreader: Susan Hobbs Indexer: Potomac Indexing, LLC 01_977279-ffirs.indd ii 10/28/10 9:54 PM SMASHING HTML5 Bill Sanders wnload from Wow! eBook <www.wowebook.com> o D A John Wiley and Sons, Ltd, Publication 01_977279-ffirs.indd iii 10/28/10 9:54 PM Th is edition fi rst published 2011 © 2011 William B. Sanders. Registered offi ce John Wiley & Sons Ltd, Th e Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom For details of our global editorial offi ces, for customer services and for information about how to apply for permission to reuse the copyright material in this book please see our website at www.wiley.com. Th e right of the author to be identifi ed as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopy- ing, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Designations used by companies to distinguish their products are oft en claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. Th e publisher is not associated with any product or vendor mentioned in this book. Th is publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought. Trademarks: Wiley and the Wiley Publishing logo are trademarks or registered trade- marks of John Wiley and Sons, Inc. and/ or its affi liates in the United States and/or other countries, and may not be used without written permission. iPhone, iPad and iPod are trademarks of Apple Computer, Inc. All other trademarks are the property of their respective owners. Wiley Publishing, Inc. is not associated with any product or vendor mentioned in the book. Th is book is not endorsed by Apple Computer, Inc. A catalogue record for this book is available from the British Library. 978-0-470-97727-9 Set in 10/12 Minion Pro by Wiley Composition Services Printed in the United States by Krehbiel 01_977279-ffirs.indd iv 10/28/10 9:54 PM Th is book is dedicated to Jacob Sanders. 01_977279-ffirs.indd v 10/28/10 9:54 PM Author’s Acknowledgments I became aware of the immediate importance of HTML5 thanks to Michael Wilson, Zach Dunn, and Nick Greenfi eld, who brought it to my attention. Th ey also introduced me to Smashing Magazine and a number of other emerging new trends. Chris Webb of Wiley guided the direction of the book and, in concert with Margot Hutchinson of Waterside Productions, was able to clear a path for the book to move ahead. Ellie Scott of Wiley helped take care of the many details necessary in forging the book’s inception. Elizabeth Kuball worked as an able editor to clarify and smoothen everything I wrote, and Harvey Chute, the technical editor, worked to make sure that all the code was done correctly and off ered suggestions for improve- ment. Finally, my colleagues at the University of Hartford’s Multimedia Web Design and Development program, John Gray and Brian Dorn, helped when asked, including one terrible moment when a missing semicolon wrecked havoc on a program. About the Author Bill Sanders is one of the founding faulty members of the University of Hartford’s Multimedia Web Design and Development program where he teaches courses covering HTML5, informa- tion and interface design, CSS3, Flash, ActionScript 3.0, ASP.NET, C#, PHP, and streaming video. He has written numerous books on Internet computing, on topics ranging from JavaScript to ActionScript 3.0 Design Patterns. He lives in rural Connecticut with his wife, Delia, and one and a half dogs. 01_977279-ffirs.indd vi 10/28/10 9:54 PM Contents Introduction 1 PART I: THE LANGUAGE OF THE WEB 5 Chapter 1: Introducing HTML5 1 Creating with Tags: An Overview 8 Incorporating the new HTML5 elements 9 Using continued tags from HTML4 11 Forgetting or replacing discontinued tags 15 Choosing a Browser to Interpret HTML5 17 Mozilla Firefox 18 Google Chrome 19 Opera 21 Apple Safari 22 Microsoft Internet Explorer 9 24 Previewing diff erent displays 24 Take the Wheel 25 Chapter 2: Understanding HTML5 Tags 27 Parsing Code 28 Understanding HTML5 and related fi les 28 Learning which fi les work with the Web 31 Knowing How Tags Work 31 Starting off with the basic HTML tag 32 Describing your page with tags 32 Identifying the parts of a tag 33 Understanding the role of the comment tag 35 Nesting Tags 38 Take the Wheel 40 Chapter 3: Text Tags and a Little CSS3 43 Th e Fundamentals 44 A little more organization 45 Th inking about structure 47 Adding More HTML5 Structure 49 Adding Style to Text with CSS3 52 Styling HTML5 elements with CSS3 properties 52 Creating CSS3 classes and IDs 59 Take the Wheel 63 02_977279-ftoc.indd vii 10/28/10 9:54 PM CONTENTS Chapter 4: Working with Color Values 65 Understanding RGB Color 66 Using names 66 RGB and HSL percentages 67 RGB decimal integer settings 70 Hexadecimal settings: Th inking like your computer 71 Adding Transparency to Color 74 Creating a Color Scheme 76 From a base color 76 From an image 76 Integrating Your Color Palette with Your Web Page 78 Take the Wheel 81 PART II: PAGES, SITES, AND DESIGNS 83 Chapter 5: Organizing a Page 85 Th e Top of the HTML5 Document 86 Setting your home base 86 Adding character to your site with metadata 87 Knowing when you need a script 89 A Design in Sections 91 Getting Your Stuff Organized 94 VIII Paragraphs, divisions, and lists 94 Grouping without fracturing 99 Figures and captions 100 Organizing Files 103 Image organization and reference 103 Absolute reference 104 Relative reference 104 Take the Wheel 106 Chapter 6: Displaying Data with Tables 109 CSS3 Table Properties for HTML5 110 Tables and Tabular Data 112 Table basics 113 Styling a Table 114 Adding borders with CSS3 114 Data clarifi cation with background colors 117 Complex Tables 120 Using the rowspan and colspan attributes 120 Practical spans in tables 122 Take the Wheel 125 Chapter 7: All About Links 127 Th e Link Element and Its Key Attributes 128 Alternate style sheets 128 Link icons 131 02_977279-ftoc.indd viii 10/28/10 9:54 PM CONTENTS Prefetching 133 Other link attributes 133 Page Links 134 More of the rel attribute 134 Page anchors and IDs 137 Targets 140 Using Iframes 143 Nesting Web pages 144 Take the Wheel 146 Chapter 8: Navigation Strategies 147 Web Navigation Concepts 148 Designer navigation and user navigation 148 Global navigation 149 Using JavaScript to Call a Linked Page 156 Creating Consistency 159 Vertical and horizontal navigation 160 Applying CSS3 pseudo-classes 160 Understanding the HTML5 mechanics of vertical navigation 162 Using graphic icons in navigation 165 Single-Page Web Sites with Iframes 166 Linking to a graphic 166 Making and using thumbnail icons 167 Using iframes on mobile devices 169 IX Take the Wheel 170 PART III: MEDIA IN HTML5 173 Chapter 9: Images 175 Th e Basics of HTML5 Image Files 176 Formats and pixels matter 176 Preserving layers in Web graphics 178 Working with Graphic File Sizes 179 Using graphic applications to modify image fi le size 182 Placing Images and Creating Flexible Web Pages 189 Image placement with the align attribute 189 Flexible image size with a little JavaScript 191 Application for Dynamic SVG fi les from Adobe Illustrator CS5 fi les 194 Take the Wheel 196 Chapter 10: Sound 199 Th e Basics of Audio in HTML5 200 Autoplay 200 Controls 200 Preload 202 Loop 203 Browser Support for Audio 203 02_977279-ftoc.indd ix 10/28/10 9:54 PM CONTENTS Saved by Source: Plan B 204 Type attribute 204 Source type codec parameter 205 Creating Audio Files 206 Windows 7 Sound Recorder 206 Macintosh OS X Sound Studio 208 Sound Eff ects: FX on Your Desktop 209 Transition sounds 209 Integrating sound eff ects into a Web page 211 Take the Wheel 214 Chapter 11: Video 215 Making an HTML5 Page with Video 216 Video and Browser Compatibility 218 Make mine WebM: Th e Miro Video Converter 219 Converting to 3GP: Adobe Media Encoder CS5 221 Making Videos for the Web 222 Webcams 223 Small camcorders 223 Standard camcorders 224 Screen video capture 225 Video and Source Attributes 225 Src 226 X Poster 226 Preload 227 Loop 227 Autoplay 228 Controls 228 Width and Height 229 Take the Wheel