HTML & CSS

Transcription

HTML & CSS:The Complete Reference,Fifth Edition

About the AuthorThomas A. Powell (tpowell@pint.com) is a long-timeindustry veteran. After an early stint at CERFnet in theearly ‘90s, he founded Powell Internet Consulting (laterrenamed PINT) in 1994, a Web design and consulting servicesfirm. Today, PINT (pint.com) provides Web development,design, and consulting services to large and small corporationsall over the United States in a variety of industries.Beyond his involvement at PINT, Thomas is heavilyinvolved in the academic community. He developed theUniversity of California, San Diego Extension Web Publishingprogram in the late 1990s and continues to teach classes therein Web development and design. He is also an instructor forthe UCSD Computer Science Department, where he teachesclasses in Web development and the theory of programminglanguages.Mr. Powell is well published, and his work has appearedin numerous trade publications. He continues to publishregularly in Network World. He also has published numerousbooks on Web technology and design, including Ajax: TheComplete Reference, JavaScript: The Complete Reference, andmany others. His books have been translated into over12 languages and are used around the world both in industryand college settings.About the Technical EditorJames H. (Jim) Pence is a full-time writer, editor, speaker,singer, and performance chalk artist. Jim broke into bookpublishing in 2001 with How to Do Everything with HTML,a how-to book on Web authoring, written “by a nontechie fornontechies,” and published by McGraw-Hill Professional. Hefollowed this book the same year with another book forMcGraw-Hill: Cascading Style Sheets: A Beginner’s Guide.McGraw-Hill published a second edition of Jim’s HTMLbook, re-titled How to Do Everything with HTML & XHTML,in 2003.Jim is also a published novelist. He is the author of BlindSight (Tyndale, 2003), a suspense/thriller novel set in themind-control cults, and The Angel (Kregel, 2006), set againstthe backdrop of the euthanasia and physician-assisted suicidemovements. Jim moved into “true crime” writing with hislatest book, Terror by Night (Tyndale, 2009). Terror by Night isthe true story of the brutal 2008 murders of the Caffey familyin Emory, Texas. You can learn more about Jim’s books andother creative projects at his Web site: www.jamespence.com.

HTML & CSS:The Complete Reference,Fifth EditionThomas A. PowellNew York Chicago San FranciscoLisbon London Madrid Mexico CityMilan New Delhi San JuanSeoul Singapore Sydney Toronto

Copyright 2010 by The McGraw-Hill Companies. All rights reserved. Except as permitted under the United States Copyright Act of 1976, nopart of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without theprior written permission of the publisher.ISBN: 978-0-07-174170-5MHID: 0-07-174170-4The material in this eBook also appears in the print version of this title: ISBN: 978-0-07-149629-2, MHID: 0-07-149629-7.All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occurrence of a trademarked name,we use names in an editorial fashion only, and to the benefit of the trademark owner, with no intention of infringement of the trademark. Wheresuch designations appear in this book, they have been printed with initial caps.McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate trainingprograms. To contact a representative please e-mail us at bulksales@mcgraw-hill.com.Information has been obtained by McGraw-Hill from sources believed to be reliable. However, because of the possibility of human ormechanical error by our sources, McGraw-Hill, or others, McGraw-Hill does not guarantee the accuracy, adequacy, or completeness of anyinformation and is not responsible for any errors or omissions or the results obtained from the use of such information.TERMS OF USEThis is a copyrighted work and The McGraw-Hill Companies, Inc. (“McGraw-Hill”) and its licensors reserve all rights in and to the work.Use of this work is subject to these terms. Except as permitted under the Copyright Act of 1976 and the right to store and retrieve one copy ofthe work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon, transmit, distribute,disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior consent. You may use the work for your ownnoncommercial and personal use; any other use of the work is strictly prohibited. Your right to use the work may be terminated if you fail tocomply with these terms.THE WORK IS PROVIDED “AS IS.” McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS TO THEACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK, INCLUDING ANYINFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLYDISCLAIM ANY WARRANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OFMERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. McGraw-Hill and its licensors do not warrant or guarantee that thefunctions contained in the work will meet your requirements or that its operation will be uninterrupted or error free. Neither McGraw-Hill norits licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless of cause, in the work or for any damagesresulting therefrom. McGraw-Hill has no responsibility for the content of any information accessed through the work. Under no circumstancesshall McGraw-Hill and/or its licensors be liable for any indirect, incidental, special, punitive, consequential or similar damages that result fromthe use of or inability to use the work, even if any of them has been advised of the possibility of such damages. This limitation of liability shallapply to any claim or cause whatsoever whether such claim or cause arises in contract, tort or otherwise.

Contents at a GlancePart I Core Markup123Traditional HTML and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Introducing HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .HTML and XHTML Element Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . .355133Part II Core Style456Introduction to CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .CSS Syntax and Property Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .CSS3 Proprietary and Emerging Features Reference . . . . . . . . . . . . . . . . . .429521613Part III AppendixesABCDECharacter Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Reading a Document Type Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .727751765783801Index809.v

This page intentionally left blank

ContentsAcknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiiiPart I Core Markup1Traditional HTML and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .First Look at HTML and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Hello HTML and XHTML World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Viewing Markup Locally . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Viewing Markup with a Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . .HTML and XHTML: Version History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .HTML and XHTML DTDs: The Specifications Up Close . . . . . . . . . . . . . . . .Document Type Statements and Language Versions . . . . . . . . . . . . .(X)HTML Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .The Document Head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .The Document Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Browsers and (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .The Doctype Switch and Browser Rendering Modes . . . . . . . . . . . . .The Rules of (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .HTML Is Not Case Sensitive, XHTML Is . . . . . . . . . . . . . . . . . . . . . . .Attribute Values May Be Case Sensitive . . . . . . . . . . . . . . . . . . . . . . . .(X)HTML Is Sensitive to a Single Whitespace Character . . . . . . . . . .(X)HTML Follows a Content Model . . . . . . . . . . . . . . . . . . . . . . . . . . .Elements Should Have Close Tags Unless Empty . . . . . . . . . . . . . . . .Unused Elements May Minimize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Elements Should Nest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Attributes Should Be Quoted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Entities Should Be Used for Special Characters . . . . . . . . . . . . . . . . . .Browsers Ignore Unknown Attributes and Elements . . . . . . . . . . . . .Major Themes of (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Logical and Physical Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Standards vs. Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Myths and Misconceptions About HTML and XHTML . . . . . . . . . . .The Future of Markup—Two Paths? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XHTML: Web Page Markup XML Style . . . . . . . . . . . . . . . . . . . . . . . .HTML5: Back to the Future . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54647494952532Introducing HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Hello HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Loose Syntax Returns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55555860vii

viiiHTML & CSS: The Complete ReferenceHTML5: Embracing the Reality of Web Markup . . . . . . . . . . . . . . . . . . . . . . .Presentational Markup Removed and Redefined . . . . . . . . . . . . . . . . . . . . . .Out with the Old Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .In with the New Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Sample of New Attributes for HTML5 . . . . . . . . . . . . . . . . . . . . . . . . .HTML5 Document Structure Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Adding Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Marking Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Indicating Dates and Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Inserting Figures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Specifying Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .HTML5’s Open Media Effort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Media Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Client-Side Graphics with canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Drawing and Styling Lines and Shapes . . . . . . . . . . . . . . . . . . . . . . . .Drawing Arcs and Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Scaling, Rotating, and Translating Drawings . . . . . . . . . . . . . . . . . . . .Using Bitmaps in Drawings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Text Support for canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . canvas Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .HTML5 Form Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .New Form Field Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Validating Data Entry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Autocomplete Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Miscellaneous Usability Improvements . . . . . . . . . . . . . . . . . . . . . . . .Emerging Elements and Attributes to Support Web Applications . . .

HTML & CSS: The Complete Reference, Fifth Edition Thomas A. Powell New York Chicago San Francisco Lisbon London Madrid Mexico City Milan New Delhi San Juan