HTML5 And CSS3 Visual Quick Start Guide 7th Edition (Elizabeth Castro and Bruce Hyslop) (Z-Library)

📄 File Format: PDF

💾 File Size: 36.6 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

ptg7794906

📄 Page 2

ptg7794906 Peachpit Press V I S U A L Q U I C K S tA r t G U I D E HTML5 and CSS3 Seventh Edition ElizabEth Castro • bruCE hyslop

📄 Page 3

ptg7794906 HTML5 and CSS3, Seventh Edition: Visual QuickStart Guide Elizabeth Castro and Bruce Hyslop Peachpit Press 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax) Find us on the Web at www.peachpit.com. To report errors, please send a note to errata@peachpit.com. Peachpit Press is a division of Pearson Education. Copyright © 2012 by Elizabeth Castro and Bruce Hyslop Editor: Clifford Colby Development editor: Robyn G. Thomas Production editor: Cory Borman Compositor: David Van Ness Copyeditor: Scout Festa Proofreader: Nolan Hester Technical editors: Michael Bester and Chris Casciano Indexer: Valerie Haynes Perry Cover design: RHDG/Riezebos Holzbaur Design Group, Peachpit Press Interior design: Peachpit Press Logo design: MINE™ www.minesf.com Notice of Rights All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com. bart.gov screen shots courtesy of San Francisco Bay Area Rapid Transit District (BART). css3generator.com screen shots courtesy of Randy Jensen. dribbble.com screen shots courtesy of Dan Cederholm. fontsquirrel.com screen shots courtesy of Ethan Dunham. foodsense.is screen shots courtesy of Julie Lamba. modernizr.com screen shots courtesy of Faruk Ates. namecheap.com screen shots courtesy of Namecheap. Notice of Liability The information in this book is distributed on an “As Is” basis without warranty. While every precaution has been taken in the preparation of the book, neither the authors nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. Trademarks 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 Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book. ISBN-13: 978-0-321-71961-4 ISBN-10: 0-321-71961-1 9 8 7 6 5 4 3 2 1 Printed and bound in the United States of America

📄 Page 4

ptg7794906 To family.

📄 Page 5

ptg7794906 iv Acknowledgments Acknowledgments Writing the acknowledgments is one of the most daunting challenges of working on a book, because you want to be sure to convey your appreciation of everyone properly. This book is the result of the support, tireless work, and good spirits of a lot of people. I hope to do them all justice, and I hope that you’ll indulge me for a bit while I thank them. A most sincere thank you goes out to: Nancy Aldrich-Ruenzel and Nancy Davis, for entrusting me with this edition of a book that has been important to Peachpit for many years. Cliff Colby, for recommending me and mak- ing this possible; for his confidence in me and his patience, flexibility, and guidance; and for countless conversations and lots of laughs. Robyn Thomas, for her tremendous effort in keeping us all on track, wrangling count- less documents, making thoughtful edits and suggestions, and providing regular words of encouragement, which were always a boost. Michael Bester, for all the spot-on feed- back and suggestions, catching technical errors and omissions, and helping us get the right message across to readers. It was a real pleasure working with him on another book. Chris Casciano, in the same vein, for all your technical expertise, suggestions, and crucial feedback. I really appreciated your joining us in the final weeks; we were lucky to have you. Cory Borman, for expertly overseeing the production of the book and creating dia- grams in a pinch, and for his good humor. Scout Festa, for carefully correcting gram- mar and punctuation, tightening up lan- guage, ensuring the accuracy of figure and chapter references, and, overall, providing an all-important level of polish. David Van Ness, for his great care laying out the pages and for his proficiency and attention to detail. Nolan Hester, for lending his expertise to the effort of reviewing the laid-out pages. Valerie Haynes Perry, for handling the criti- cal task of creating an effective index on which readers will rely time and again. The numerous marketing, sales, and other folks at Peachpit for working behind the scenes to make the book successful. My family and friends, for checking in on my progress and providing occasional, wel- come breaks from writing. Thanks to those friends in particular who probably tired of hearing me say often that I couldn’t get together, but who kept asking anyway. Robert Reinhardt, as always, for getting me started in writing books and for his guid- ance as I was embarking on this one. The Web community, for your innovations and for sharing your knowledge so that others may benefit (I’ve cited many of you throughout the book). To you readers, for your interest in learning about HTML and CSS and for selecting this book; I know you have a lot of others from which to choose. I hope the book serves you well.

📄 Page 6

ptg7794906 Acknowledgments v Seth Lemoine (Chapters 5 and 16) Seth Lemoine is a software developer and teacher in Atlanta. For over ten years, he’s worked on challenging projects to see what’s possible, with technologies from HTML, JavaScript, and CSS to Objective-C and Ruby. Whether it’s finding innovative ways to teach HTML5 and CSS to his stu- dents or perfecting a Schezuan recipe in his outdoor wok, being creative is his passion. Erik Vorhes (Appendixes A and B, available on the book’s Web site) Erik Vorhes creates things for the Web with VSA Partners and is managing editor for Typedia (http://typedia.com/). He lives and works in Chicago. Brian Warren (Chapter 13) Brian Warren is a senior designer at Happy Cog in Philadelphia. When he’s not writing or designing, he spends his time playing with his beautiful family, listening to music, and brewing beer. He blogs, intermittently, at http://begoodnotbad.com. And, finally, I’d like to extend a special thank you to Elizabeth Castro. She created the first edition of this book more than 15 years ago and nurtured her audience with each edition that followed. Her style of teaching has resonated with literally hundreds of thousands of readers over the years. I’m extremely grateful for the oppor- tunity to be part of this book, and I was very mindful of doing right by both it and readers while working on this edition. —Bruce Thank you so much to the following con- tributing authors. Readers have a more valuable book because of your efforts, for which I’m grateful. I’d also like to extend my apologies to Erik Vorhes that we weren’t able to fit Appendixes A and B in the book. Readers who see them on the book’s site will surely appreciate your work. In alphabetical order by last name, the contributing authors are: Scott Boms (Chapter 14) Scott is an award-winning designer, writer, and speaker who has partnered with orga- nizations such as PayPal, HSBC, Hyundai, DHL, XM Radio, Toronto Life magazine, and Masterfile during his more than 15 years of working on the Web. When he’s away from the computer, you might find him shooting Polaroids; playing drums with his band, George; or enjoying time with his wonderful wife and two children. He’s @scottboms on Twitter. Ian Devlin (Chapter 17) Ian Devlin is an Irish Web developer, blog- ger, and author who enjoys coding and writing about emerging Web technologies such as HTML5 and CSS3. In addition to front-end development, Ian also builds solutions with back-end technologies such as .NET and PHP. He has recently written a book, HTML5 Multimedia: Develop and Design (Peachpit Press, 2011).

📄 Page 7

ptg7794906 Contents at a Glance acknowledgments . . . . . . . . . . . . . . . . . . . . iv introduction . . . . . . . . . . . . . . . . . . . . . . . . xv Chapter 1 Web page building blocks . . . . . . . . . . . . . . . 1 Chapter 2 Working with Web page Files . . . . . . . . . . . . 25 Chapter 3 basic htMl structure . . . . . . . . . . . . . . . . . 41 Chapter 4 text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Chapter 5 images . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Chapter 6 links . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Chapter 7 Css building blocks . . . . . . . . . . . . . . . . . . 179 Chapter 8 Working with style sheets . . . . . . . . . . . . . . 197 Chapter 9 Defining selectors . . . . . . . . . . . . . . . . . . . 213 Chapter 10 Formatting text with styles . . . . . . . . . . . . . 241 Chapter 11 layout with styles . . . . . . . . . . . . . . . . . . . . 275 Chapter 12 style sheets for Mobile to Desktop . . . . . . . . 327 Chapter 13 Working with Web Fonts . . . . . . . . . . . . . . . 353 Chapter 14 Enhancements with Css3 . . . . . . . . . . . . . . . 371 Chapter 15 lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Chapter 16 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 Chapter 17 Video, audio, and other Multimedia . . . . . . . 449 Chapter 18 tables . . . . . . . . . . . . . . . . . . . . . . . . . . . 489 Chapter 19 Working with scripts . . . . . . . . . . . . . . . . . . 497 Chapter 20 testing & Debugging Web pages . . . . . . . . . 505 Chapter 21 publishing your pages on the Web . . . . . . . . . 521 index . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 vi Contents at a Glance

📄 Page 8

ptg7794906 Table of Contents vii Table of Contents Acknowledgments . . . . . . . . . . . . . . . . . . . . . iv Introduction . . . . . . . . . . . . . . . . . . . . . . . . xv HTML and CSS in Brief . . . . . . . . . . . . . . . . . . . xvi Progressive Enhancement: A Best Practice . . . . . . xviii Is This Book for You? . . . . . . . . . . . . . . . . . . . . xx How This Book Works. . . . . . . . . . . . . . . . . . . . xxii Companion Web Site . . . . . . . . . . . . . . . . . . . xxiv Chapter 1 Web Page Building Blocks . . . . . . . . . . . . . . . . 1 A Basic HTML Page . . . . . . . . . . . . . . . . . . . . . . 3 Semantic HTML: Markup with Meaning . . . . . . . . . . . 6 Markup: Elements, Attributes, and Values . . . . . . . . .13 A Web Page’s Text Content . . . . . . . . . . . . . . . . 16 Links, Images, and Other Non-Text Content . . . . . . . .17 File Names . . . . . . . . . . . . . . . . . . . . . . . . . . 19 URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Key Takeaways. . . . . . . . . . . . . . . . . . . . . . . . 24 Chapter 2 Working with Web Page Files . . . . . . . . . . . . . 25 Planning Your Site . . . . . . . . . . . . . . . . . . . . . . 26 Creating a New Web Page . . . . . . . . . . . . . . . . . 28 Saving Your Web Page . . . . . . . . . . . . . . . . . . . 30 Specifying a Default Page or Homepage . . . . . . . . . 33 Editing Web Pages . . . . . . . . . . . . . . . . . . . . . 35 Organizing Files . . . . . . . . . . . . . . . . . . . . . . . 36 Viewing Your Page in a Browser . . . . . . . . . . . . . . 37 The Inspiration of Others . . . . . . . . . . . . . . . . . . 39 Chapter 3 Basic HTML Structure . . . . . . . . . . . . . . . . . . 41 Starting Your Web Page . . . . . . . . . . . . . . . . . . 43 Creating a Title. . . . . . . . . . . . . . . . . . . . . . . . 46 Creating Headings . . . . . . . . . . . . . . . . . . . . . 48 Understanding HTML5’s Document Outline . . . . . . . 50 Grouping Headings . . . . . . . . . . . . . . . . . . . . . 58 Common Page Constructs . . . . . . . . . . . . . . . . . 60

📄 Page 9

ptg7794906 viii Table of Contents Creating a Header . . . . . . . . . . . . . . . . . . . . . . 61 Marking Navigation . . . . . . . . . . . . . . . . . . . . . 64 Creating an Article . . . . . . . . . . . . . . . . . . . . . 68 Defining a Section. . . . . . . . . . . . . . . . . . . . . . 72 Specifying an Aside . . . . . . . . . . . . . . . . . . . . . 75 Creating a Footer . . . . . . . . . . . . . . . . . . . . . . 80 Creating Generic Containers. . . . . . . . . . . . . . . . 84 Improving Accessibility with ARIA . . . . . . . . . . . . . 88 Naming Elements with a Class or ID. . . . . . . . . . . . 92 Adding the Title Attribute to Elements . . . . . . . . . . 95 Adding Comments . . . . . . . . . . . . . . . . . . . . . 96 Chapter 4 Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Starting a New Paragraph . . . . . . . . . . . . . . . . .100 Adding Author Contact Information . . . . . . . . . . . . 102 Creating a Figure . . . . . . . . . . . . . . . . . . . . . . 104 Specifying Time . . . . . . . . . . . . . . . . . . . . . . .106 Marking Important and Emphasized Text . . . . . . . . . 110 Indicating a Citation or Reference . . . . . . . . . . . . . 112 Quoting Text . . . . . . . . . . . . . . . . . . . . . . . . . 113 Highlighting Text . . . . . . . . . . . . . . . . . . . . . . 116 Explaining Abbreviations . . . . . . . . . . . . . . . . . . 118 Defining a Term . . . . . . . . . . . . . . . . . . . . . . . 120 Creating Superscripts and Subscripts. . . . . . . . . . . 121 Noting Edits and Inaccurate Text . . . . . . . . . . . . . 124 Marking Up Code . . . . . . . . . . . . . . . . . . . . . . 128 Using Preformatted Text . . . . . . . . . . . . . . . . . . 130 Specifying Fine Print . . . . . . . . . . . . . . . . . . . . 132 Creating a Line Break . . . . . . . . . . . . . . . . . . . . 133 Creating Spans . . . . . . . . . . . . . . . . . . . . . . . 134 Other Elements . . . . . . . . . . . . . . . . . . . . . . . 136 Chapter 5 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 About Images for the Web . . . . . . . . . . . . . . . . . 148 Getting Images . . . . . . . . . . . . . . . . . . . . . . . 152 Choosing an Image Editor . . . . . . . . . . . . . . . . . 153 Saving Your Images . . . . . . . . . . . . . . . . . . . . . 154 Inserting Images on a Page . . . . . . . . . . . . . . . . 156 Offering Alternate Text . . . . . . . . . . . . . . . . . . . 157 Specifying Image Size . . . . . . . . . . . . . . . . . . . 158 Scaling Images with the Browser . . . . . . . . . . . . .160

📄 Page 10

ptg7794906 Table of Contents ix Scaling Images with an Image Editor . . . . . . . . . . . 161 Adding Icons for Your Web Site . . . . . . . . . . . . . . 162 Chapter 6 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 The Anatomy of a Link . . . . . . . . . . . . . . . . . . . 166 Creating a Link to Another Web Page. . . . . . . . . . . 167 Creating Anchors . . . . . . . . . . . . . . . . . . . . . . 172 Linking to a Specific Anchor . . . . . . . . . . . . . . . . 174 Creating Other Kinds of Links . . . . . . . . . . . . . . . 175 Chapter 7 CSS Building Blocks . . . . . . . . . . . . . . . . . . . 179 Constructing a Style Rule. . . . . . . . . . . . . . . . . . 181 Adding Comments to Style Rules . . . . . . . . . . . . . 182 The Cascade: When Rules Collide. . . . . . . . . . . . . 184 A Property’s Value. . . . . . . . . . . . . . . . . . . . . . 188 Chapter 8 Working with Style Sheets . . . . . . . . . . . . . . . 197 Creating an External Style Sheet . . . . . . . . . . . . . 198 Linking to External Style Sheets . . . . . . . . . . . . . 200 Creating an Embedded Style Sheet . . . . . . . . . . . 202 Applying Inline Styles . . . . . . . . . . . . . . . . . . . 204 The Importance of Location . . . . . . . . . . . . . . . 206 Using Media-Specific Style Sheets . . . . . . . . . . . 208 Offering Alternate Style Sheets . . . . . . . . . . . . . .210 The Inspiration of Others: CSS . . . . . . . . . . . . . . .212 Chapter 9 Defining Selectors . . . . . . . . . . . . . . . . . . . . 213 Constructing Selectors . . . . . . . . . . . . . . . . . . . 214 Selecting Elements by Name . . . . . . . . . . . . . . .216 Selecting Elements by Class or ID. . . . . . . . . . . . .218 Selecting Elements by Context . . . . . . . . . . . . . .221 Selecting Part of an Element . . . . . . . . . . . . . . . 227 Selecting Links Based on Their State . . . . . . . . . . 230 Selecting Elements Based on Attributes . . . . . . . . 232 Specifying Groups of Elements . . . . . . . . . . . . . 236 Combining Selectors . . . . . . . . . . . . . . . . . . . 238 Selectors Recap . . . . . . . . . . . . . . . . . . . . . . 240

📄 Page 11

ptg7794906 x Table of Contents Chapter 10 Formatting Text with Styles . . . . . . . . . . . . . . 241 Choosing a Font Family . . . . . . . . . . . . . . . . . . 243 Specifying Alternate Fonts . . . . . . . . . . . . . . . . 244 Creating Italics . . . . . . . . . . . . . . . . . . . . . . . 246 Applying Bold Formatting . . . . . . . . . . . . . . . . 248 Setting the Font Size . . . . . . . . . . . . . . . . . . . 250 Setting the Line Height . . . . . . . . . . . . . . . . . . 255 Setting All Font Values at Once . . . . . . . . . . . . . 256 Setting the Color . . . . . . . . . . . . . . . . . . . . . 258 Changing the Text’s Background . . . . . . . . . . . . 260 Controlling Spacing . . . . . . . . . . . . . . . . . . . . 264 Adding Indents . . . . . . . . . . . . . . . . . . . . . . 265 Setting White Space Properties . . . . . . . . . . . . . 266 Aligning Text . . . . . . . . . . . . . . . . . . . . . . . . 268 Changing the Text Case . . . . . . . . . . . . . . . . . 270 Using Small Caps . . . . . . . . . . . . . . . . . . . . . . 271 Decorating Text . . . . . . . . . . . . . . . . . . . . . . 272 Chapter 11 Layout with Styles . . . . . . . . . . . . . . . . . . . 275 Considerations When Beginning a Layout . . . . . . . 276 Structuring Your Pages . . . . . . . . . . . . . . . . . . 279 Styling HTML5 Elements in Older Browsers . . . . . . 286 Resetting or Normalizing Default Styles . . . . . . . . 290 The Box Model. . . . . . . . . . . . . . . . . . . . . . . 292 Changing the Background . . . . . . . . . . . . . . . . 294 Setting the Height or Width for an Element . . . . . . 298 Setting the Margins around an Element . . . . . . . . 302 Adding Padding around an Element. . . . . . . . . . . 304 Making Elements Float . . . . . . . . . . . . . . . . . . 306 Controlling Where Elements Float. . . . . . . . . . . . 308 Setting the Border . . . . . . . . . . . . . . . . . . . . . . 311 Offsetting Elements in the Natural Flow . . . . . . . . . 314 Positioning Elements Absolutely . . . . . . . . . . . . .316 Positioning Elements in 3D . . . . . . . . . . . . . . . . . 318 Determining How to Treat Overflow. . . . . . . . . . . 320 Aligning Elements Vertically . . . . . . . . . . . . . . . 322 Changing the Cursor . . . . . . . . . . . . . . . . . . . 323 Displaying and Hiding Elements . . . . . . . . . . . . . 324

📄 Page 12

ptg7794906 Table of Contents xi Chapter 12 Style Sheets for Mobile to Desktop . . . . . . . . 327 Mobile Strategies and Considerations . . . . . . . . . 328 Understanding and Implementing Media Queries. . . 333 Building a Page that Adapts with Media Queries . . . 340 Chapter 13 Working with Web Fonts . . . . . . . . . . . . . . . 353 What Is a Web Font?. . . . . . . . . . . . . . . . . . . . 354 Where to Find Web Fonts. . . . . . . . . . . . . . . . . 356 Downloading Your First Web Font . . . . . . . . . . . . 358 Working with @font-face . . . . . . . . . . . . . . . . 360 Styling Web Fonts and Managing File Size . . . . . . . 365 Chapter 14 Enhancements with CSS3 . . . . . . . . . . . . . . . 371 Understanding Vendor Prefixes . . . . . . . . . . . . . 373 A Quick Look at Browser Compatibility . . . . . . . . . 375 Using Polyfills for Progressive Enhancement . . . . . 376 Rounding the Corners of Elements . . . . . . . . . . . 378 Adding Drop Shadows to Text . . . . . . . . . . . . . . 382 Adding Drop Shadows to Other Elements . . . . . . . 384 Applying Multiple Backgrounds . . . . . . . . . . . . . 388 Using Gradient Backgrounds . . . . . . . . . . . . . . 390 Setting the Opacity of Elements . . . . . . . . . . . . . 394 Chapter 15 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Creating Ordered and Unordered Lists . . . . . . . . . 398 Choosing Your Markers . . . . . . . . . . . . . . . . . . .401 Choosing Where to Start List Numbering. . . . . . . . 403 Using Custom Markers . . . . . . . . . . . . . . . . . . 404 Controlling Where Markers Hang . . . . . . . . . . . . 406 Setting All List-Style Properties at Once . . . . . . . . 407 Styling Nested Lists . . . . . . . . . . . . . . . . . . . . 408 Creating Description Lists . . . . . . . . . . . . . . . . . 412 Chapter 16 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 Creating Forms . . . . . . . . . . . . . . . . . . . . . . . 419 Processing Forms . . . . . . . . . . . . . . . . . . . . . . 421 Sending Form Data via Email. . . . . . . . . . . . . . . 424 Organizing the Form Elements. . . . . . . . . . . . . . 426 Creating Text Boxes. . . . . . . . . . . . . . . . . . . . 428

📄 Page 13

ptg7794906 xii Table of Contents Creating Password Boxes . . . . . . . . . . . . . . . . . 431 Creating Email, Telephone, and URL Boxes . . . . . . 432 Labeling Form Parts . . . . . . . . . . . . . . . . . . . . 434 Creating Radio Buttons . . . . . . . . . . . . . . . . . . 436 Creating Select Boxes . . . . . . . . . . . . . . . . . . 438 Creating Checkboxes . . . . . . . . . . . . . . . . . . . 440 Creating Text Areas . . . . . . . . . . . . . . . . . . . . . 441 Allowing Visitors to Upload Files . . . . . . . . . . . . 442 Creating Hidden Fields . . . . . . . . . . . . . . . . . . 443 Creating a Submit Button . . . . . . . . . . . . . . . . . 444 Using an Image to Submit a Form . . . . . . . . . . . . 446 Disabling Form Elements . . . . . . . . . . . . . . . . . .447 New HTML5 Features and Browser Support . . . . . . 448 Chapter 17 Video, Audio, and Other Multimedia . . . . . . . 449 Third-Party Plugins and Going Native. . . . . . . . . . . 451 Video File Formats . . . . . . . . . . . . . . . . . . . . 452 Adding a Single Video to Your Web Page . . . . . . . 453 Exploring Video Attributes . . . . . . . . . . . . . . . . 454 Adding Controls and Autoplay to Your Video . . . . . 455 Looping a Video and Specifying a Poster Image . . . 457 Preventing a Video from Preloading . . . . . . . . . . 458 Using Video with Multiple Sources . . . . . . . . . . . 459 Multiple Media Sources and the Source Element . . . 460 Adding Video with Hyperlink Fallbacks. . . . . . . . . . 461 Adding Video with Flash Fallbacks . . . . . . . . . . . 463 Providing Accessibility . . . . . . . . . . . . . . . . . . 467 Adding Audio File Formats . . . . . . . . . . . . . . . . 468 Adding a Single Audio File to Your Web Page . . . . . 469 Adding a Single Audio File with Controls to Your Web Page . . . . . . . . . . . . . . . . . . . . . . . . 470 Exploring Audio Attributes . . . . . . . . . . . . . . . . . 471 Adding Controls and Autoplay to Audio in a Loop . . . 472 Preloading an Audio File . . . . . . . . . . . . . . . . . .473 Providing Multiple Audio Sources . . . . . . . . . . . . .474 Adding Audio with Hyperlink Fallbacks . . . . . . . . . .475 Adding Audio with Flash Fallbacks . . . . . . . . . . . .476 Adding Audio with Flash and a Hyperlink Fallback . . .478 Getting Multimedia Files . . . . . . . . . . . . . . . . . 480 Considering Digital Rights Management (DRM) . . . . . 481 Embedding Flash Animation . . . . . . . . . . . . . . . 482

📄 Page 14

ptg7794906 Table of Contents xiii Embedding YouTube Video 484 Using Video with Canvas 485 Coupling Video with SVG 486 Further Resources 487 Chapter 18 Tables 489 Structuring Tables 490 Spanning Columns and Rows 494 Chapter 19 Working with Scripts 497 Loading an External Script 499 Adding an Embedded Script 502 JavaScript Events 503 Chapter 20 Testing & Debugging Web Pages 505 Trying Some Debugging Techniques 506 Checking the Easy Stuff: General 508 Checking the Easy Stuff: HTML 510 Checking the Easy Stuff: CSS 512 Validating Your Code 514 Testing Your Page 516 When Images Don’t Appear 519 Still Stuck? 520 Chapter 21 Publishing Your Pages on the Web 521 Getting Your Own Domain Name 522 Finding a Host for Your Site 523 Transferring Files to the Server 525 Index 529 Bonus chapters mentioned in this eBook are available after the index. Appendix A A1 Appendix B B1

📄 Page 15

ptg7794906 This page intentionally left blank

📄 Page 16

ptg7794906 Introduction xv Introduction Whether you are just beginning your ven- ture into building Web sites or have built some before but want to ensure that your knowledge is current, you’ve come along at a very exciting time in the industry. How we code and style pages, the brows- ers in which we view the pages, and the devices on which we view the browsers have all advanced substantially the past few years. Once limited to browsing the Web from our desktop computers or lap- tops, we can now take the Web with us on any number of devices: phones, tablets, and, yes, laptops and desktops, and more. Which is as it should be, because the Web’s promise has always been the dissolution of boundaries—the power to share and access information freely from any metropolis, rural community, or anywhere in between, from any Web- enabled device. In short, the Web’s prom- ise lies in its universality. And the Web’s reach continues to expand as technology finds its ways to communities that were once shut out. Adding to the Web’s greatness is that anyone is free to create and launch a site. This book shows you how. It is ideal for the beginner with no knowledge of HTML or CSS who wants to begin to create Web pages. You’ll find clear, easy-to-follow instructions that take you through the process of creating pages step by step. Lastly, the book is a helpful guide to keep handy. You can look up topics in the table of contents or index and consult just those subjects about which you need more information.

📄 Page 17

ptg7794906 xvi Introduction HTML and CSS in Brief At the root of the Web’s success is a simple, text-based markup language that is easy to learn and that any device with a basic Web browser can read: HTML. Every Web page requires at least some HTML; it wouldn’t be a Web page without it. As you will learn in greater detail as you move through this book, HTML is used to define your content’s meaning, and CSS is used to define how your content and Web page will look. Both HTML pages and CSS files (style sheets) are text files, making them easy to edit. You can see snippets of HTML and CSS in “How This Book Works,” near the end of this introduction. You’ll dive into learning a basic HTML page right off the bat in Chapter 1, and you’ll begin to learn how to style your pages with CSS in Chapter 7. See “What this book will teach you” for an overview of all the chap- ters and a summary of the topics covered. What is HTML5? It helps to know some basics about the origins of HTML in order to understand HTML5. HTML began in the early 1990s as a short document that detailed a handful of elements used to build Web pages. Many of those elements were for describing Web page content such as headings, para- graphs, and lists. HTML’s version number has increased as the language has evolved with the introduction of other elements and adjustments to its rules. The most current version is HTML5. HTML5 is a natural evolution of earlier versions of HTML and strives to reflect the needs of both current and future Web sites. It inherits the vast majority of features from its predecessors, meaning that if you coded HTML before HTML5 came on the scene, you already know a lot of HTML5. This also means that much of HTML5 works in both old and new browsers; being backward compatible is a key design principle of HTML5 (see www.w3.org/TR/ html-design-principles/). HTML5 also adds a bevy of new features. Many are straightforward, such as addi- tional elements (article, section, figure, and many more) that are used to describe content. Others are quite complex and aid in creating powerful Web applications. You’ll need to have a firm grasp of creat- ing Web pages before you can graduate to the more complicated features that HTML5 provides. HTML5 also introduces native audio and video playback to your Web pages, which the book also covers. What is CSS3? The first version of CSS didn’t exist until after HTML had been around for a few years, becoming official in 1996. Like HTML5 and its relationship to earlier ver- sions of HTML, CSS3 is a natural extension of the versions of CSS that preceded it. CSS3 is more powerful than earlier ver- sions of CSS and introduces numerous visual effects, such as drop shadows, text shadows, rounded corners, and gradients. (See “What this book will teach you” for details of what’s covered.) Web standards and specifications You might be wondering who created HTML and CSS in the first place, and who continues to evolve them. The World Wide Web Consortium (W3C)—directed by the inventor of the Web and HTML, Tim Bern- ers-Lee—is the organization responsible for shepherding the development of Web stan- dards. Specifications (or specs, for short) are documents that define the parameters

📄 Page 18

ptg7794906 Introduction xvii of languages like HTML and CSS. In other words, specs standardize the rules. Follow the W3C’s activity at www.w3.org A. For a variety of reasons, another organi- zation—the Web Hypertext Application Technology Working Group (WHATWG, found at www.whatwg.org)—is developing the HTML5 specification. The W3C incor- porates WHATWG’s work into its official version of the in-progress spec. With standards in place, we can build our pages from the agreed-upon set of rules, and browsers—like Chrome, Firefox, Inter- net Explorer (IE), Opera, and Safari—can be built to display our pages with those rules in mind. (On the whole, browsers imple- ment the standards well. Older versions of IE, especially IE6, have some issues. Specifications go through several stages of development before they are considered final, at which point they are dubbed a Recommendation (www.w3.org/2005/10/ Process-20051014/tr). Parts of the HTML5 and CSS3 specs are still being finalized, but that doesn’t mean you can’t use them. It just takes time (literally years) for the standardization process to run its course. Browsers begin to implement a spec’s features long before it becomes a Recommendation, because that informs the spec development process itself. So browsers already include a wide variety of features in HTML5 and CSS3, even though they aren’t Recommendations yet. On the whole, the features covered in this book are well entrenched in their respec- tive specs, so the risk of their changing prior to becoming a Recommendation is minimal. Developers have been using many HTML5 and CSS3 features for some time. So can you. A The W3C site is the industry’s primary source of Web-standards specifications.

📄 Page 19

ptg7794906 xviii Introduction Progressive Enhancement: A Best Practice I began the introduction by speaking of the universality of the Web—the notion that information on the Web should be accessi- ble to all. Progressive enhancement helps you build sites with universality in mind. It is not a language, rather it’s an approach to building sites that Steve Champeon cre- ated in 2003 (http://en.wikipedia.org/wiki/ Progressive_enhancement). The idea is simple but powerful: Start your site with HTML content and behavior that is accessible to all visitors A. To the same page, add your design with CSS B and add additional behavior with JavaScript, typically loading them from external files (you’ll learn how to do this). The result is that devices and browsers capable of accessing basic pages will get the simplified, default experience; devices and browsers capable of viewing more- robust sites will see the enhanced version. The experience on your site doesn’t have to be the same for everyone, as long as your content is accessible. In essence, the idea behind progressive enhancement is that everyone wins. A A basic HTML page with no custom CSS applied to it. This page may not look great, but the information is accessible—and that’s what’s important. Even browsers from near the inception of the Web more than 20 years ago can display this page; so too can the oldest of mobile phones with Web browsers. And screen readers, software that reads Web pages aloud to visually impaired visitors, will be able to navigate it easily.

📄 Page 20

ptg7794906 Introduction xix This book teaches you how to build pro- gressively enhanced sites even if it doesn’t always explicitly call that out while doing so. It’s a natural result of the best practices imparted throughout the book. However, Chapters 12 and 14 do address progressive enhancement head on. Take an early peek at those if you’re interested in seeing how the principle of progres- sive enhancement helps you build a site that adapts its layout based on a device’s screen size and browser capabilities, or how older browsers will display simplified designs while modern browsers will display ones enhanced with CSS3 effects. Progressive enhancement is a key best practice that is at the heart of building sites for everyone. B The same page as viewed in a browser that supports CSS. It’s the same information, just presented differently. Users with more capable devices and browsers get an enhanced experience when visiting the page.