Team-Fly ® HTML & Web Design Tips & Techniques Kris Jamsa Konrad King Andy Anderson McGraw-Hill/Osborne New York Chicago San Francisco Lisbon London Madrid Mexico City Milan New Delhi San Juan Seoul Singapore Sydney Toronto Copyright © 2002 by The McGraw-HIll Companies, Inc. All rights reserved. Manufactured in the United States of America. Except as permitted under the United States Copyright Act of 1976, no part of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without the prior written permission of the publisher. 0-07-222825-3 The material in this eBook also appears in the print version of this title: 0-07-219394-8 All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occur- rence 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. Where such 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 training programs. For more information, please contact George Hoare, Special Sales, at george_hoare@mcgraw-hill.com or (212) 904-4069. TERMS OF USE This 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 of the 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 own noncommercial and personal use; any other use of the work is strictly prohibited. Your right to use the work may be terminated if you fail to comply with these terms. THE WORK IS PROVIDED “AS IS”. McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS TO THE ACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK, INCLUDING ANY INFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLY DISCLAIM ANY WAR- RANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. McGraw-Hill and its licensors do not warrant or guarantee that the functions contained in the work will meet your requirements or that its operation will be uninterrupted or error free. Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless of cause, in the work or for any damages resulting therefrom. McGraw-Hill has no responsibility for the content of any information accessed through the work. Under no cir- cumstances shall McGraw-Hill and/or its licensors be liable for any indirect, incidental, special, punitive, conse- quential or similar damages that result from the 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 shall apply to any claim or cause whatso- ever whether such claim or cause arises in contract, tort or otherwise. DOI: 10.1036/0072228253 To Bonnie, You are, and always will be, the most important part of my life. –Andy To my wife Karen, Thanks for enduring the late hours, solitary meals, missed vacations, and especially for listening to my moans and groans about the writing “process.” Your knowing smiles and not so gentle (but needed) “Just Do It!” inspired me to see the project through from concept to completion. –Konrad To Stephanie, Although you have grown up to become a very special woman, you will always be our little girl. –Dad About the Authors Konrad King is an author and computer systems consultant for a wide range of clients. A former Air Force officer, Konrad has worked with mainframes as well as PCs and PC-based networks. He has written and worked with award-winning authors on several books on SQL database design and implementation, Web design, and Microsoft Office software, such as FrontPage and PowerPoint. When not writing, Konrad designs, develops, and maintains Web sites; installs and maintains networks and enterprise software; and develops custom software applications in Visual C++, Visual Basic, DataFlex, and various SQL database platforms. Having worked in the computer field since 1984, Konrad is able to draw from a vast pool of knowledge about what works in the “real world” and what does not. Andy Anderson is a graphics artist and designer and has worked with Photoshop, Illustrator, and most graphics arts programs for the Web since their release. An author and university professor, Andy is also a sought-after lecturer in the U.S., Canada, and Europe. The remainder of his time is spent developing curriculum and resource materials for various corporations and seminar companies. His clients include designers and trainers from the U.S. government, Boeing, Disneyland, and other Fortune 500 companies. Kris Jamsa is the author of more than 90 computer books, with cumulative sales of several million copies. Kris holds a bachelor of science degree in computer science from the United States Air Force Academy, a masters degree in computer science from the University of Nevada, Las Vegas, a Ph.D. in computer science with an emphasis in operating systems from Arizona State University, and a masters of business administration from San Diego State University. In 1992, he and his wife, Debbie, founded Jamsa Press, a computer- book publishing company. After expanding the company’s presence to 70 countries and 28 languages, they sold Jamsa Press to a larger publishing house. Today, Kris is the founder of Jamsa Media Group, which produces high-quality computer books. He is also very active in analyzing emerging technologies. Kris lives on a ranch in Houston, Texas, with his wife Debbie, their three dogs, and six horses. When he is not in front of his PC, Kris is normally riding and jumping his horse Robin Hood. Contents at a Glance Chapter 1 HTML Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii Chapter 2 HTML Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Chapter 3 HTML Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Chapter 4 Cascading Style Sheets (CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Chapter 5 XHTML and Emerging Trends . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Chapter 6 Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Chapter 7 Animation, Sound, and Video . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Chapter 8 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Chapter 9 Java Applets and ActiveX Objects . . . . . . . . . . . . . . . . . . . . . . . . . 418 Chapter 10 PHP4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Chapter 11 Active Server Pages (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524 Chapter 12 Security and Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637 v For more information about this title, click here. Copyright 2002 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use. This page intentionally left blank. Contents Acknowledgments, xv Introduction, xv Chapter 1 HTML Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii Downloading and Installing the Personal Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Managing the Personal Web Server and Publishing Your Web Pages . . . . . . . . . . . . . . . . . . . . . . 18 Describing Web Page Contents with a Title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Identifying Web Documents Using the Document Type Definition . . . . . . . . . . . . . . . . . . . . . . . 23 Inserting Comments into a Web Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Specifying the Typeface for Web Page Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Controlling the Flow of Text with Paragraph and Line Break Tags . . . . . . . . . . . . . . . . . . . . . . . 27 Changing the Size of Text Using Heading Level Tags and the Font Tag size Attribute . . . . . . . . . . . . . . 32 Changing the Color of Text in an HTML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Adding Graphics to a Web Page Using a Basic <img> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Changing the Alignment of Text and Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Adding a Hypertext Link to a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Enhancing Individual Letters and Words Using Character Formatting Tags . . . . . . . . . . . . . . . . . . . 41 Using Symbols and Special Characters in an HTML Document . . . . . . . . . . . . . . . . . . . . . . . . .42 Using Horizontal Rules to Organize Web Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Using Blockquote Tags to Control Left and Right Text Margins . . . . . . . . . . . . . . . . . . . . . . . . . 47 Creating Ordered and Unordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Creating Nested Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Creating Definition Listings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Using Preformatted Text Tags to Control the Display of Web Content . . . . . . . . . . . . . . . . . . . . . 54 Displaying a Navigation Menu Within a Web Page Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Displaying Multiple Web Pages Onscreen at the Same Time . . . . . . . . . . . . . . . . . . . . . . . . . . 57 vii For more information about this title, click here. Copyright 2002 by The McGraw-Hill Companies, Inc. Click Here for Terms of Use. Chapter 2 HTML Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Creating a Table with Cells that Span Multiple Columns or Multiple Rows . . . . . . . . . . . . . . . . . . . .72 Working with Table and Cell Border Widths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Working with Table and Cell Border Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Working with Background Images and Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Determining a Color Attribute’s Value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Working with Cell Padding and Cell Spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Setting Table Dimensions Using Relative or Absolute Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Setting Cell Dimensions Using Relative or Absolute Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Aligning Cell Content Horizontally and Vertically . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Aligning a Table on a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Controlling the Width and Height of a Cell by Inserting a Transparent GIF . . . . . . . . . . . . . . . . . . .89 Wrapping Text Around an Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Displaying a Gallery of Thumbnails Within a Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Creating Bullets and Lists with Tables and Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Creating a Navigation Sidebar Using a Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Adding Images and Links to Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Nesting Tables to Control Borders on a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Approximating an Image Map by Placing Pieces of an Image Within a Table . . . . . . . . . . . . . . . . . . 100 Slicing a Graphic Image into Table Cells to Create a Quick-Loading Web Graphic . . . . . . . . . . . . . . . . 102 Reducing the Amount of Time a Web Browser Spends Drawing a Table . . . . . . . . . . . . . . . . . . . . . 103 Simulating Web Page Frames Using a Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Focusing the Viewer’s Attention with Cell Background Colors . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Aligning Web Page Content Visually with Visible Table Borders . . . . . . . . . . . . . . . . . . . . . . . . . 108 Controlling Gutter Size and Margin Width of Text on a Web Page . . . . . . . . . . . . . . . . . . . . . . . 110 Chapter 3 HTML Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Creating a Single-Line Input Field on a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Creating a Multiline Input Field on a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Validating Text Element Data Prior to Submitting Form Results . . . . . . . . . . . . . . . . . . . . . . . . 122 Placing Check Boxes on a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Placing Radio Buttons on a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Validating Radio Button Group Selections Prior to Submitting Form Results . . . . . . . . . . . . . . . . . . . 128 Placing a Drop-Down List (Selection Menu) on a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Verifying the Visitor Has Made a Selection List Choice Prior to Submitting Form Results . . . . . . . . . . . . . 132 Changing the Items Available on a Selection List Based on Visitor Supplied Information . . . . . . . . . . . . 134 Sending All Selection List Values to the Web Server Through a Hidden Field . . . . . . . . . . . . . . . . . . 136 Adding a Reset Button to a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Preventing a Visitor from Clearing Form Elements Accidentally . . . . . . . . . . . . . . . . . . . . . . . . 139 Adding a Submit Button to a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 viii HTML & Web Design Tips & Techniques Replacing the Standard Submit and Reset Buttons on a Form with Other Graphics Images . . . . . . . . . . . 141 Sending Form Results by E-Mail Without a CGI Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Controlling the Layout of Form Elements and Text with HTML Tables . . . . . . . . . . . . . . . . . . . . . . 145 Creating a Shortcut Key for Form Navigation with a <label> Tag . . . . . . . . . . . . . . . . . . . . . . . 148 Instructing the Web Browser to Execute a Form Validation Function with the onClick Attribute . . . . . . . . . 149 Passing Values to the Web Server Through Hidden Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Hiding Visitor Input from View Within a Password Element . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Adding a Generic Button Object to a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Enabling and Disabling Form Elements on-the-Fly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Chapter 4 Cascading Style Sheets (CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Applying Multiple CSS Rules to a Single Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Selecting a Typeface with the font-family Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Specifying the Size of Text with the font-size Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Creating Overlapping Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Aligning Web Page Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Controlling Margins and Line Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Displaying Text Within Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Working with Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Indenting Paragraphs and Controlling Letter, Word, and Line Spacing . . . . . . . . . . . . . . . . . . . . . 188 Offsetting Text with Initial Caps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Customizing the Appearance of Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Creating a Drop-Shadow Effect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Applying a Border Graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Positioning Background Images and Watermarks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Floating Images and Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Customizing the Appearance of Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Creating Text and Image Effects with Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Aligning Labels with Form Elements and Adding Color to Forms . . . . . . . . . . . . . . . . . . . . . . . . 206 Displaying a Gallery of Thumbnails with Captions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Controlling the Cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Layering Web Page Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Sending Your Style Sheet Through a Validator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Chapter 5 XHTML and Emerging Trends . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Converting HTML to XHTML Using HTML Tidy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Selecting the Correct DOCTYPE for Your Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Validating Your Web Page with an XHTML Validator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Setting the Text Size on an XHTML Web Page with Keywords . . . . . . . . . . . . . . . . . . . . . . . . . 242 Grouping an XHTML Form’s Selection List Items with the <optgroup> Tag . . . . . . . . . . . . . . . . . . . 245 Adding Color to XHTML Tables with Cascading Style Sheet Rules . . . . . . . . . . . . . . . . . . . . . . . . 247 Contents ix [...]... you can use HTML to put onto a Web page For visitors to access Web pages on your Web site, they must first connect to the Internet and start a Web browser After the Web server sends a Web page to the visitor’s computer, the Web browser interprets the HTML in the Web page file and displays the file’s contents as text and graphics images in the browser’s application window Web servers and Web browsers... types of HTML tags in each section of the Web page definition have a specific purpose: • < /html> These occur at the start and end of an HTML document As such, start and end HTML tags enclose all the other HTML tags you use to describe the Web page • Start and end header tags immediately follow the start HTML tags ( ) and denote the Web page header You can use tags in the Web page... source of any Web page 4 HTML & Web Design Tips & Techniques HTML Container Tags Essentially, a Web page is a text file that contains instructions in the form of HTML codes (called tags) and attributes The tags are the commands the Web browser later follows to format the text and insert the graphics images you want on the Web page Some, but not all, HTML commands require both a start and an end tag... which Web browsers and servers send messages and the structure of the messages themselves A thorough discussion of the various HTTP message types and structures is beyond the scope of this book However, to design and create even complex Web sites, you need only a basic understanding of the HTTP request and response stream (between Web browser and Web server) illustrated in Figure 1-1 1 2 HTML & Web Design. .. HTML, is the computer language at the heart of the World Wide Web When you create a Web site, you use HTML to put the text, pictures, animations, and perhaps video and sound onto the individual Web pages that make up the site In addition, HTML lets you insert hypertext links and interactive buttons that connect your Web pages to other pages on your Web site and on other Web sites around the world Web. .. The Web browser takes the original Web page files, follows the instructions given by the HTML tags in the file to combine the Web page and the inserted file contents into a Web document the browser displays onscreen Understanding the Roles of Web Browsers and Web Pages To keep up with the changing market, and to make the Internet available to all, Microsoft and Netscape have made versions of their Web. .. a group of HTML tags The tag instructs the Web browser to again use the default values for attributes specified in the tag Creating Web Pages Using Text Editors, Word Processors, and Web Layout Applications Creating an “exceptional” Web page requires good design technique and a thorough understanding of HTML tags and attributes Setting the concepts of “good” and “bad” page design aside,... 1-1 A Web server handling a request for Web content 1 Each time you enter a Web address (such as http://www.NVBizNet.com) into your browser’s Address field and press ENTER, the Web browser sends an HTTP request for a file over the Internet to the Web server 2 After it receives the HTTP request for a file, the Web server retrieves the requested file and sends the Web page to the Web browser 3 The Web. .. your Web page If you do not know HTML, you cannot make a decision as to what you need and what you should remove If you are new to Web design, it is a good idea to start by using a simple text editor or word processor After you understand HTML, move on to a Web layout program such as Dreamweaver or GoLive If you understand HTML, using a Web layout program gives you the best of both worlds The Web layout... around the world Web design is a creative process, and HTML is simply one of the tools (the page description language) you use to produce Web pages HTML is a text markup and not a programming language In theory, a Web page you create using HTML should be viewable by anyone with a computer, any Web browser, and access to the Internet In reality, the ability to view all the content on a Web page depends . database design and implementation, Web design, and Microsoft Office software, such as FrontPage and PowerPoint. When not writing, Konrad designs, develops, and maintains Web sites; installs and maintains. world” and what does not. Andy Anderson is a graphics artist and designer and has worked with Photoshop, Illustrator, and most graphics arts programs for the Web since their release. An author and. perform to enhance your Web pages and the overall design and performance of your Web site. Chapter 1: HTML Basics To start, this chapter lays the foundation that designers new to Web development need