Mastering. HTML and XHTML. Deborah S. Ray. Eric J. Ray. San Francisco Paris Düsseldorf Soest London

Transcription

1 4141fm.qxd 8/1/02 6:04 PM Page iii Mastering HTML and XHTML Deborah S. Ray Eric J. Ray San Francisco Paris Düsseldorf Soest London

2

3 4141fm.qxd 8/1/02 6:04 PM Page i Mastering HTML and XHTML

4

5 4141fm.qxd 8/1/02 6:04 PM Page iii Mastering HTML and XHTML Deborah S. Ray Eric J. Ray San Francisco Paris Düsseldorf Soest London

6 Associate Publisher: Dan Brodnitz Acquisitions and Developmental Editor: Willem Knibbe Editor: Liz Welch Production Editor: Erica Yee Technical Editor: Martin Reid Book Designer: Franz Baumhackl Electronic Publishing Specialist: Franz Baumhackl Proofreaders: Emily Hsuan, Laurie O Connell, Nancy Riddiough, Yariv Rabinovitch Indexer: Ted Laux Cover Designer: Design Site Cover Illustrator: Jack D. Meyers Copyright 2002 SYBEX Inc., 1151 Marina Village Parkway, Alameda, CA World rights reserved. The author(s) created reusable code in this publication expressly for reuse by readers. Sybex grants readers limited permission to reuse the code found in this publication or on so long as (author(s)) are attributed in any application containing the reusabe code and the code itself is never distributed, posted online by electronic transmission, sold, or commercially exploited as a stand-alone product. Aside from this specific exception concerning reusable code, no part of this publication may be stored in a retrieval system, transmitted, or reproduced in any way, including but not limited to photocopy, photograph, magnetic, or other record, without the prior agreement and written permission of the publisher. Library of Congress Card Number: ISBN: SYBEX and the SYBEX logo are either registered trademarks or trademarks of SYBEX Inc. in the United States and/or other countries. Netscape Communications, the Netscape Communications logo, Netscape, and Netscape Navigator are trademarks of Netscape Communications Corporation. Netscape Communications Corporation has not authorized, sponsored, endorsed, or approved this publication and is not responsible for its content. Netscape and the Netscape Communications Corporate Logos are trademarks and trade names of Netscape Communications Corporation. All other product names and/or logos are trademarks of their respective owners. Internet screen shot(s) using Microsoft Internet Explorer 5.5 reprinted by permission from Microsoft Corporation. REUSABLE CODE IN THIS BOOK The authors created reusable code in this publication expressly for reuse for readers. Sybex grants readers permission to reuse for any purpose the code found in this publication www,sybex.com so long as all of the authors are attributed in any application containing the reusable code, and the code itself is never sold or commercially exploited as a stand-alone product. TRADEMARKS: SYBEX has attempted throughout this book to distinguish proprietary trademarks from descriptive terms by following the capitalization style used by the manufacturer. The author and publisher have made their best efforts to prepare this book, and the content is based upon final release software whenever possible. Portions of the manuscript may be based upon pre-release versions supplied by software manufacturer(s). The author and the publisher make no representation or warranties of any kind with regard to the completeness or accuracy of the contents herein and accept no liability of any kind including but not limited to performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged to be caused directly or indirectly from this book. Manufactured in the United States of America

7 To Ashleigh and Alex, who have taught us what s important in life.

8 Acknowledgements We d like to thank the many folks who helped bring this book together. First, a big thanks to Dan Brodnitz, with whom we were fortunate enough to work again on this edition as we were on the book s very first edition some years ago. Excellent working with you again, Dan. Thank you. We were also fortunate to work with Willem Knibbe, whose excellent guidance, quick turnaround, and attention to quality helped shape this book and its content. Thanks also to Erica Yee for keeping the process moving along smoothly. We d also like to thank the behind-the-scenes team at Sybex who brought this book together. Thanks to Martin Reid for helping make this book as accurate as possible. Thanks also to Liz Welch for her excellent editing, comments, and suggestions. And to Franz Baumhackl, Emily Hsuan, Laurie O Connell, Nancy Riddiough, Yariv Rabinovitch, and Ted Laux. You folks rock, and we thank you!

9 Contents at a Glance Introduction xxxi Part 1 Getting Started Chapter 1 Getting Acquainted with HTML and XHTML Chapter 2 Creating Your First HTML or XHTML Document Chapter 3 Linking Your Documents Chapter 4 Including Images Part 2 Advancing Your Skills Chapter 5 Developing Tables Chapter 6 Developing Forms Chapter 7 Creating Frames Chapter 8 Converting HTML to XHTML Part 3 Moving Beyond Pure HTML and XHTML Chapter 9 Using Style Sheets Chapter 10 Adding JavaScript Chapter 11 Including Multimedia Part 4 Developing Web Sites Chapter 12 Planning for a Coherent, Usable, Maintainable, and Accessible Web Site Chapter 13 Implementing a Good Web Site Chapter 14 Tips for Web Sites: Public, Personal, and Intranet Chapter 15 Publishing Your XHTML Documents

10 Part 5 Applying HTML and XHTML to Advanced Applications Chapter 16 Bringing Pages to Life with Dynamic HTML and XHTML Chapter 17 Generating HTML or XHTML from a Database Chapter 18 Making Your Web Site Searchable Part 6 HTML and XHTML Development Tools Chapter 19 Choosing Development Tools Chapter 20 Validating HTML and XHTML Documents Part 7 A Bridge to XML Chapter 21 An Overview of XML Chapter 22 Extending XHTML Using Namespaces Chapter 23 Getting Started with DTDs Chapter 24 Creating a DTD Chapter 25 XHTML 1.1 and XHTML Modularization Part 8 The XML Family of Applications Chapter 26 XSLT: Extensible Stylesheet Language Transformations Chapter 27 SMIL Chapter 28 XML Tree Model Reference Chapter 29 XML Schemas Part 9 Master s Reference Master s Reference Part 1 HTML and XHTML Elements and Attributes Master s Reference Part 2 Cascading Style Sheets Reference Master s Reference Part 3 Scripting Reference Master s Reference Part 4 HTML and XHTML Special Characters Master s Reference Part 5 Color Codes Index

11 Contents Introduction xxxi Part 1 Getting Started Chapter 1 Getting Acquainted with HTML and XHTML Why Use HTML or XHTML? What s the Difference Between HTML and XHTML? What Tools Do You Need? Text Editors Web Browsers The W3C Validator What Does HTML and XHTML Code Look Like? Understanding Elements Understanding Attributes Typing Elements and Attributes Correctly What Other Resources Can Help? Visit the W3C Monitor Netscape and Microsoft Sites Monitor Other Sites Where to Go from Here Chapter 2 Creating Your First HTML or XHTML Document Creating, Saving, and Viewing Documents Applying Document Structure Elements The DOCTYPE Declaration The html Element The head Element The body Element Applying Basic Elements Creating Paragraphs Creating Headings Creating Lists Applying Bold, Italic, and Other Emphases Including Horizontal Rules Specifying Line Breaks Including Fancier Formatting Adding Colors Specifying Fonts and Font Sizes Where to Go from Here

12 x CONTENTS Chapter 3 Linking Your Documents URL Anatomy Protocol Hostname Folder Name Filename Types of URLs Absolute URLs Relative URLs Link Anatomy Linking to Documents and Web Sites Linking to Documents in the Same Folder Linking to Documents in a Different Folder Linking to Documents on the Web Linking to a Specific Location in a Document Forming Name Anchors Linking to Name Anchors Inserting Links Where to Go from Here Chapter 4 Including Images Developing Images Determining File Size Dealing with Physical Dimensions Understanding Image Formats Adding Images Adding an Image Including Alternative Text Specifying Height and Width Aligning the Image Controlling the Border Choosing Suitable Colors Using Images as Links Creating Image Links Creating Thumbnails Creating Image Maps Creating Client-Side Image Maps Using Background Images Where to Go from Here Part 2 Advancing Your Skills Chapter 5 Developing Tables Using Tables Effectively Creating Basic Tables

13 CONTENTS xi Adding or Removing Rows and Columns Adding Rows Adding Columns Deleting Rows and Columns Spanning Rows and Columns Spanning Rows Spanning Columns Adding Captions Formatting Tables Adding and Formatting Borders Setting Table Background Options Specifying Cell Alignment Specifying Cell Size Adding Cell Spacing and Padding Specifying Table Alignment, Width, and Text Wrap Using Advanced Table Features Identifying Table Sections Table Borders Where to Go from Here Chapter 6 Developing Forms Determining Form Content Information Issues Usability Issues Design Issues Creating Forms Understanding Widgets Creating a Form and Adding Submit and Reset Buttons Including General Input Fields Including Text Areas Including Select Fields Processing Forms One Solution: Processing Results with cgi Where to Go from Here Chapter 7 Creating Frames Understanding Frames Deciding to Use Frames Some Advantages of Using Frames Some Disadvantages of Using Frames Creating Frames Determining Frame Size Creating a Frameset Adding Frames Formatting Frames

14 xii CONTENTS Controlling Frames Accommodating Nonframed Browsers Enabling Effective Navigation Choosing Navigation Types Implementing Navigation Using Special Target Names Creating Inline Frames Where to Go from Here Chapter 8 Converting HTML to XHTML Why Convert Your Documents? Converting Documents by Hand Backward Compatibility The Rules Summing It Up Working with Tidy Using Tidy from the Command Prompt Using TidyGUI Using Tidy in HTML-Kit Using Tidy on the Mac Where to Go from Here Part 3 Moving Beyond Pure HTML and XHTML Chapter 9 Using Style Sheets How Do Style Sheets Work? Some Advantages of Using Style Sheets Cascading Style Sheets Level Cascading Style Sheets Level Cascading Style Sheets Level 3 and Beyond Implementing Style Sheets Associating Style Sheets with Documents Embedding the Style Sheet in the Document Storing Style Sheets Separately Applying Style Sheets to Parts of Documents Applying Inline Style Definitions What Is Cascading? Developing a Style Sheet Specifying Measurements Specifying Colors in Style Rules Setting Style Sheet Properties Setting Font Properties Setting Text Properties Setting Box Properties Setting Color and Background Properties Setting Classification Properties

15 CONTENTS xiii Setting Aural Style Sheet Properties Setting Printed-Media Properties Setting Positioning Properties Where to Go from Here Chapter 10 Adding JavaScript What Is JavaScript? Adding JavaScript to Your Document Embedding JavaScript Adding a JavaScript Function in the Head Linking JavaScript Providing for Older Browsers Adding Event Handlers Using onmouseover and onmouseout Events Using onclick and onchange Event Handlers Using the onsubmit Event Handler Using the onload Event Handler Tracking Users Using Cookies Session Cookies Persistent Cookies Where to Go from Here Chapter 11 Including Multimedia Deciding to Include Multimedia The Challenges for Users The Challenges for Developers Developing and Using Animated GIFs Developing Animated GIFs Incorporating Animated GIFs into HTML and XHTML Documents Adding Sounds Some Disadvantages of Sounds Sound File Formats Adding Video Video File Formats Adding Java Applets Adding Flash Animations Adding Multimedia Where to Go from Here Part 4 Developing Web Sites Chapter 12 Planning for a Coherent, Usable, Maintainable, and Accessible Web Site Planning for Site Development and Maintenance Planning for a Smooth Development (and Redesign) Process

16 xiv CONTENTS Planning for Development Planning for Maintenance Determining What Information to Provide What Do Your Users Want? What Do You Want to Provide? Reconciling the Want Lists Determining How to Organize the Information Hierarchical Organization Linear Organization Webbed Organization Planning Site Navigation Textual Navigation Graphical Navigation Placing Navigation Menus Planning for Accessibility Understanding the Need to Address Accessibility Issues Understanding Adaptive Technologies Planning for Accessibility Creating a Master Document Adding Backgrounds Choosing Colors Including Logos Incorporating Other Graphical Elements Where to Go from Here Chapter 13 Implementing a Good Web Site Understanding (and Accommodating) Your Users Wants and Needs Favoring Content over Flash Ensuring That the Flash Does Not Obscure Your Site s Content Being Aware of Other Obstacles That May Impede Your Users Testing Your Web Site Getting Ready to Test Testing for Overall Appearance Testing for Usability Testing for Readability Testing for Accuracy Maintaining Your Site Where to Go from Here Chapter 14 Tips for Web Sites: Public, Personal, and Intranet Developing Public Sites Publicizing Your Site Making Users Want to Browse Your Site Making Users Yearn to Return Maintaining Public Sites Putting Ads on Your Site

17 CONTENTS xv Developing Personal Sites Marketing Your Skills Self-Publishing Information Developing Intranet Sites Determining Intranet Content Accommodating User Needs Helping Others Contribute Announcing New or Updated Information Setting Up a Discussion Forum Where to Go from Here Chapter 15 Publishing Your XHTML Documents Places to Publish Publishing through Your ISP Publishing through a Corporate Server Publishing through Your Own Server The Publishing Process Uploading with FTP Uploading with Other Tools Where to Go from Here Part 5 Applying HTML and XHTML to Advanced Applications Chapter 16 Bringing Pages to Life with Dynamic HTML and XHTML What Are Dynamic HTML and XHTML? The Document Object Model (DOM) Understanding the Standard Implementation Creating a Collapsible Document Collapsing a Document Implementing Browser Detection Where to Go from Here Chapter 17 Generating HTML or XHTML from a Database Why Generate HTML or XHTML from a Database? Deciding to Use a Database Exploring Your Options The Large Company Scenario The Small Company Scenario Choosing Software Tools for Database Publishing Scripting Languages for Database Publishing Generating HTML or XHTML Pages from Databases Maintaining Pages Generated from a Database Where to Go from Here

18 xvi CONTENTS Chapter 18 Making Your Web Site Searchable Exploring the Benefits and Drawbacks of a Site Search Engine Benefits for Users Potential Drawbacks for Users Potential Drawbacks for Developers Using Low-Tech Alternatives Developing Effective Navigation Menus Using Breadcrumbs Taking the Guided Tour Approach Using Hierarchical Menus Using a Back-of-the-Book Index Using JavaScript Adding a Site Map Preparing to Implement a Search Engine on Your Site How Much of Your Site Will Be Indexed? Who Can Access Your Search Engine? What Can You Do to Improve the Search Engine s Performance? Choosing the Right Search Engine for Your Needs Hosted Solutions Unix Solutions Windows Solutions Where to Go from Here Part 6 HTML and XHTML Development Tools Chapter 19 Choosing Development Tools Choosing an Editing Tool Text Editors WYSIWYG Editors Discovering XML Development Tools XML Spy XML Pro epcedit Choosing an Image-Editing Tool Where to Go from Here Chapter 20 Validating HTML and XHTML Documents Why Validate Your Documents? The Validation Process The W3C Validator Validating Using the W3C s Web Interface Validating by Uploading a Document to the W3C Site Translating Error Messages Adding the W3C Icon Working with Other Available Validators The W3C Online CSS Validator

19 CONTENTS xvii STG s Online XML Validator The WDG Validator WDG s CSSCheck Page Valet CAST s Bobby Where to Go from Here Part 7 A Bridge to XML Chapter 21 An Overview of XML Why Another Markup Language? Understanding SGML Basics The Advantages of SGML The Disadvantages of SGML Why HTML and XHTML Were Built The Advantages of HTML and XHTML The Disadvantages of HTML and XHTML Understanding XML Markup The Advantages of XML The Disadvantages of XML Where to Go from Here Chapter 22 Extending XHTML Using Namespaces Benefits of Extending XHTML XML Namespaces Declaring Namespaces Combining Namespaces Combining XML Vocabularies with XHTML Extended Examples MathML SVG Your Own Vocabulary Validation Suggestions and Tips Where to Go from Here Chapter 23 Getting Started with DTDs Understanding DTDs and Validity Declarations: The Heart of a DTD Understanding DTD Rules and Concepts Characters and Names Logic in a DTD Data Types Comments in a DTD INCLUDE/IGNORE Connecting DTDs to XML Documents Embedding the DTD

20 xviii CONTENTS Referencing the DTD Combining External and Internal DTDs Where to Go from Here Chapter 24 Creating a DTD Specifying Processing Instructions Filling in DTD Content Element Type Declarations Attribute List Declarations Entity Declarations Notation Declarations Putting It All Together Where to Go from Here Chapter 25 XHTML 1.1 and XHTML Modularization Understanding XHTML Modularization Encapsulating XHTML Abstract Modules Meet the XHTML 1.1 Specification XHTML Modules: Abstract and Otherwise Modularization Rules and Naming Conventions Attribute Collections Core XHTML Modules XHTML Forms Modules XHTML Tables Modules XHTML Basic Defines Bare-bones XHTML Text Extension Modules Other Standard XHTML Modules Deprecated XHTML Modules The XHTML 1.1 Ruby Annotation Module Using XHTML Modules Modular XHTML and Schemas Where to Go from Here Part 8 The XML Family of Applications Chapter 26 XSLT: Extensible Stylesheet Language Transformations Understanding XSL and XSLT Working with XSLT The Transformation Process Understanding the Tree Variables, Expressions, and Data Types Style Sheet Structure Templates XSLT Products A Working Example XSLT Elements Reference Defining Style Sheet Structure Applying and Invoking Template Rules

21 CONTENTS xix Defining Variables and Parameters Copying Nodes Conditional Processing Sorting and Numbering Generating Output Manipulating White Space in the Output XSLT Expressions Reference XSLT Patterns Where to Go from Here Chapter 27 SMIL What Can SMIL Do? A Brief History of SMIL SMIL Support Creating SMIL Files Creating SMIL Files Using HTML + Time Working with SMIL Server Issues SMIL Tools SMIL Resources Where to Go from Here Chapter 28 XML Tree Model Reference XML Information Set Where to Use it Information Items XML DOM Core Objects XPath Nodes Where to Go from Here Chapter 29 XML Schemas Schema Overview XML Schemas versus DTDs XML Schema Specification Documents XML Schema Namespaces XML Schema Syntax XML Schema Vocabulary Declarations Declaring Elements Declaring Attributes Schema Data Types Other Schema Vocabularies RELAX NG Schematron Where to Go from Here

22 xx CONTENTS Part 9 Master s Reference Master s Reference Part 1 HTML and XHTML Elements and Attributes Master s Reference Part 2 Cascading Style Sheets Reference General Information Font Properties Text Properties Box Padding Properties Box Border Properties Box Margin Properties Box Position Properties Background and Color Properties Classification Properties Positioning Aural Style Sheets Printed Media Style Sheets Auto-Generated Content Master s Reference Part 3 Scripting Reference Constructs Operators Escape Character Reserved Words Objects Methods and Functions Event Handlers Properties Master s Reference Part 4 HTML and XHTML Special Characters HTML and XHTML Entities Entity Reference HTML, XHTML, and Character Sets Master s Reference Part 5 Color Codes Index

23 Introduction Welcome to Mastering HTML and XHTML, Premium Edition your one-stop comprehensive guide to the Hypertext Markup Language (HTML) and Extensible Hypertext Markup Language (XHTML)! In this book, you ll find the following features: Plain English explanations of what HTML and XHTML are, what the differences are between the two, and which one is right for your needs. Easy-to-follow instructions that help you build HTML and XHTML documents one step at a time, or to convert documents from HTML to XHTML. Easy-to-understand descriptions of how to apply HTML and XHTML elements to create features you want. Tips, advice, examples, and explanations of how to develop Web sites with users needs in mind. Examples of how you can enhance your Web pages with various technologies, including JavaScript and multimedia. Design guidelines to help you use HTML and XHTML properly and effectively. Thorough coverage of XML uses, applications, and structure, along with information about how to integrate XHTML and XML documents. Thorough coverage of advanced HTML and XHTML topics, such as generating HTML or XHTML from a database and creating searchable HTML or XHTML. Useful information and advice about choosing tools that meet your Web page creation, management, and publishing needs. A comprehensive reference on HTML, XHTML, style sheets, JavaScript, special characters, browser-safe colors, and the XML specification. We developed this book so that any Web content developer whether a newbie or a seasoned professional can learn and use HTML and XHTML effectively. For example, if you re new to HTML or XHTML, you can start at the beginning and work your way forward as you improve and expand upon your skills. You ll find the step-by-step instructions and examples easy to follow and understand. However, if you re already up to speed on authoring in HTML, you can thumb

24 xxii INTRODUCTION through later chapters to learn about new topics (including XHTML and XML) and develop new skills, use the Master s Reference to find the information you seek, or jump straight to the sections on XML or converting from HTML to XHTML to see where the future lies. So, if you re involved in any way with creating documents for the Web, you ll find this book an invaluable reference. What s in This Book? This book contains nine parts, including the Master s Reference. Here s what to expect: Part 1: Getting Started In this part, you ll learn about HTML and XHTML code, develop your first HTML or XHTML document including all the common page elements and even a few relatively advanced features, such as links, adding images, and working with fancy formatting controls. Part 2: Advancing Your Skills In this part, you ll move on to some of the more sophisticated and interesting HTML and XHTML effects, such as working with tables, frames, and forms. You ll also learn how to convert HTML files into their XHTML equivalents, including some cool tools to help automate this otherwise timeconsuming and tedious task. Part 3: Moving Beyond Pure XHTML In this part, you ll learn how to use Cascading Style Sheets to manage how Web documents appear inside your users browsers with verve and precision. You ll also learn about incorporating interactivity and flexible controls with JavaScript, and how to include multimedia effects in your Web pages. Armed with this information, you should be able to create HTML and XHTML pages with great power and eye appeal! Part 4: Developing Web Sites In this part, you ll learn the ins and outs of developing and managing highly functional Web sites that your users will want to keep coming back to visit. Here, you ll learn many aspects you ll need to consider in planning, developing, and testing your site, and you ll find tips and tricks to help you develop specific types of Web sites including public, personal, and intranet sites with ease and panache. These chapters show you how to develop and design your pages and sites according to how they ll be used and to meet your users needs. Part 5: Applying HTML and XHTML to Advanced Applications In this part, you ll learn about some more sophisticated HTML and XHTML applications. First, you ll find out how to apply what you ve already learned about style sheets and JavaScript to create dynamic HTML or XHTML pages. Next, you ll discover how publishing HTML or XHTML directly from a database can ease your workload and help you keep your site entirely up-to-date. Finally, a chapter on creating and managing searchable HTML or XHTML gives you the tools you need to let people search your Web site easily and effectively.

25 INTRODUCTION xxiii Part 6: XHTML Development Tools In this part, you ll survey the ever-changing landscape of Web development tools, including those that work with HTML, XHTML, and XML. You ll learn about some of the capabilities that high-end authoring tools have to offer, as well as explore the value and confidence that validation tools can confer. Next, you ll find out the secrets and importance of validating your XHTML documents. Part 7: XHTML: A Bridge to XML In this part, you ll examine the interesting and powerful relationship between XML and XHTML (the X in XHTML stands for extensible, after all). First, you ll tackle a review of XML s capabilities and characteristics. Then, you ll find an in-depth discussion of the many and various relationships that it s possible to create between XHTML and other XML applications, with a particular emphasis on how to extend documents beyond XHTML s built-in markup and semantics. The next two chapters cover the ins and outs of working with the formal definitions of XML markup called Document Type Definitions (DTDs); here, you ll learn how to define and use you own customized markup! Finally, you ll examine the details behind the W3C s efforts to break XHTML into a series of interrelated subsets called modules (which is why this effort is called modularization ) so that certain XHTML documents need only incorporate those components of the markup language that they actually use. (Thus, a cell phone with XHTML support does not have to incorporate support for tables, frames, or graphics, because it s not likely they will be used on the itty-bitty screen so typical on such a device.) Part 8: The XML Family of Applications In this part, you ll get a sense of what the XML fuss is all about, as you look at important ways to use XML-based markup languages to manage and present XML-based documents and data. Starting with an examination of the Extensible Stylesheet Language Transformations (XSLT), you ll learn how to turn XML into HTML or XHTML on the fly for delivery to older Web browsers (or for maximum backward compatibility). After that, you ll get a chance to see what XML s Synchronized Multimedia Integration Language (SMIL) can do to help you coordinate voice, text, and multimedia effects in your Web pages. Next, you learn how to navigate, interrogate, and access the contents of parsed XML documents (including XHTML) using easy programming tools and techniques. Finally, you learn about XML Schemas, another method for defining XML documents that s particularly well suited to capture complex data types and for screening input and output values. Part 9: Master s Reference The Master s Reference includes five sections: HTML and XHTML Elements and Attributes A comprehensive list of HTML and XHTML elements and attributes, with definitions, explanations, and examples of proper usage. Cascading Style Sheets Reference A comprehensive explanation of style sheet markup, with a list of related markup elements and attributes, plus examples of proper usage.