HTML 4 Bible [2nd ed] 0764534734, 9780764534737

Citation preview

HTM L 4 Bible, 2nd Edition

HTM L 4 Bible, 2nd Edition Bryan Pfaffenberger and Bill Karow

IDG Bo o ks Wo rldwide, Inc . An Internatio nal Data Gro up Co mpany Fo ster City, CA ✦ Chic ago , IL ✦ Indianapo lis, IN ✦ New Yo rk, NY

HTML 4 Bible, 2nd Edition Published by

IDG Books Worldwide, Inc. An Internatio nal Data Gro up Co mpany 919 E. Hillsdale Blvd., Suite 400 Fo ster City, CA 94404 www.idgbooks.com (IDG Bo o ks Wo rldwide Web site) Co pyright © 2000 IDG Bo o ks Wo rldwide, Inc . All rights reserved. No part o f this bo o k, inc luding interio r design, c o ver design, and ic o ns, may be repro duc ed o r transmitted in any fo rm, by any means (elec tro nic , pho to c o pying, rec o rding, o r o therwise) witho ut the prio r written permissio n o f the publisher. ISBN: 0-7645-3473-4 Printed in the United States o f Americ a 10 9 8 7 6 5 4 3 2 1 1B/ RX/ QY/ QQ/ FC Distributed in the United States by IDG Bo o ks Wo rldwide, Inc . Distributed by CDG Bo o ks Canada Inc . fo r Canada; by Transwo rld Publishers Limited in the United Kingdo m; by IDG No rge Bo o ks fo r No rway; by IDG Sweden Bo o ks fo r Sweden; by IDG Bo o ks Australia Publishing Co rpo ratio n Pty. Ltd. fo r Australia and New Zealand; by TransQuest Publishers Pte Ltd. fo r Singapo re, Malaysia, Thailand, Indo nesia, and Ho ng Ko ng; by Go to p Info rmatio n Inc . fo r Taiwan; by ICG Muse, Inc . fo r Japan; by Interso ft fo r So uth Afric a; by Eyro lles fo r Franc e; by Internatio nal Tho mso n Publishing fo r Germany, Austria, and Switzerland; by Distribuido ra Cuspide fo r Argentina; by LR Internatio nal fo r Brazil; by Galileo Libro s fo r Chile; by Edic io nes ZETA S.C.R. Ltda. fo r Peru; by WS Co mputer Publishing Co rpo ratio n, Inc ., fo r the Philippines; by Co ntempo ranea de Edic io nes fo r Venezuela; by Express Co mputer Distributo rs fo r the Caribbean and West Indies; by Mic ro nesia Media Distributo r, Inc . fo r Mic ro nesia; by Chips Co mputado ras S.A. de C.V. fo r Mexic o ; by Edito rial No rma de Panama S.A. fo r Panama; by Americ an Bo o ksho ps fo r Finland.

Fo r general info rmatio n o n IDG Bo o ks Wo rldwide’s bo o ks in the U.S., please c all o ur Co nsumer Custo mer Servic e department at 800-762-2974. Fo r reseller info rmatio n, inc luding disc o unts and premium sales, please c all o ur Reseller Custo mer Servic e department at 800-434-3422. Fo r info rmatio n o n where to purc hase IDG Bo o ks Wo rldwide’s bo o ks o utside the U.S., please c o ntac t o ur Internatio nal Sales department at 317-596-5530 o r fax 317-572-4002. Fo r c o nsumer info rmatio n o n fo reign language translatio ns, please c o ntac t o ur Custo mer Servic e department at 800-434-3422, fax 317-572-4002, o r e-mail rights@idgbo o ks.c o m. Fo r info rmatio n o n lic ensing fo reign o r do mestic rights, please pho ne +1-650-653-7098. Fo r sales inquiries and spec ial pric es fo r bulk quantities, please c o ntac t o ur Order Servic es department at 800-434-3422 o r write to the address abo ve. Fo r info rmatio n o n using IDG Bo o ks Wo rldwide’s bo o ks in the c lassro o m o r fo r o rdering examinatio n c o pies, please c o ntac t o ur Educ atio nal Sales department at 800-434-2086 o r fax 317-572-4005. Fo r press review c o pies, autho r interviews, o r o ther public ity info rmatio n, please c o ntac t o ur Public Relatio ns department at 650-653-7000 o r fax 650-653-7500. Fo r autho rizatio n to pho to c o py items fo r c o rpo rate, perso nal, o r educ atio nal use, please c o ntac t Co pyright Clearanc e Center, 222 Ro sewo o d Drive, Danvers, MA 01923, o r fax 978-750-4470.

Library of Congress Cataloging-in-Publication Data Pfaffenberger, Bryan, 1949HTML 4 Bible / Bryan Pfaffenberger and Bill Karo w.--2nd ed. p. c m. ISBN 0-7645-3473-4 (alk. paper) 1. HTML (Do c ument markup language) I. Karo w, Bill. II. Title. QA76.76.H94 P494 2000 005.7'2--dc 21 00-040993

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND AUTHOR HAVE USED THEIR BEST EFFORTS IN PREPARING THIS BOOK. THE PUBLISHER AND AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS BOOK AND SPECIFICALLY DISCLAIM ANY IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. THERE ARE NO WARRANTIES WHICH EXTEND BEYOND THE DESCRIPTIONS CONTAINED IN THIS PARAGRAPH. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES REPRESENTATIVES OR WRITTEN SALES MATERIALS. THE ACCURACY AND COMPLETENESS OF THE INFORMATION PROVIDED HEREIN AND THE OPINIONS STATED HEREIN ARE NOT GUARANTEED OR WARRANTED TO PRODUCE ANY PARTICULAR RESULTS, AND THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY INDIVIDUAL. NEITHER THE PUBLISHER NOR AUTHOR SHALL BE LIABLE FOR ANY LOSS OF PROFIT OR ANY OTHER COMMERCIAL DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR OTHER DAMAGES. FULFILLMENT OF EACH COUPON OFFER IS THE RESPONSIBILITY OF THE OFFEROR. Trademarks: All brand names and pro duc t names used in this bo o k are trade names, servic e marks, trademarks, o r registered trademarks o f their respec tive o wners. IDG Bo o ks Wo rldwide is no t asso c iated with any pro duc t o r vendo r mentio ned in this bo o k. is a registered trademark o r trademark under exc lusive lic ense to IDG Bo o ks Wo rldwide, Inc . fro m Internatio nal Data Gro up, Inc . in the United States and/ o r o ther c o untries.

Welcome to the world of IDG Books Worldwide. IDG Books Worldwide, Inc., is a subsidiary of International Data Group, the world’s largest publisher of computer-related information and the leading global provider of information services on information technology. IDG was founded more than 30 years ago by Patrick J. McGovern and now employs more than 9,000 people worldwide. IDG publishes more than 290 computer publications in over 75 countries. More than 90 million people read one or more IDG publications each month. Launched in 1990, IDG Books Worldwide is today the #1 publisher of best-selling computer books in the United States. We are proud to have received eight awards from the Computer Press Association in recognition of editorial excellence and three from Computer Currents’ First Annual Readers’ Choice Awards. Our bestselling ...For Dummies® series has more than 50 million copies in print with translations in 31 languages. IDG Books Worldwide, through a joint venture with IDG’s Hi-Tech Beijing, became the first U.S. publisher to publish a computer book in the People’s Republic of China. In record time, IDG Books Worldwide has become the first choice for millions of readers around the world who want to learn how to better manage their businesses. Our mission is simple: Every one of our books is designed to bring extra value and skill-building instructions to the reader. Our books are written by experts who understand and care about our readers. The knowledge base of our editorial staff comes from years of experience in publishing, education, and journalism — experience we use to produce books to carry us into the new millennium. In short, we care about books, so we attract the best people. We devote special attention to details such as audience, interior design, use of icons, and illustrations. And because we use an efficient process of authoring, editing, and desktop publishing our books electronically, we can spend more time ensuring superior content and less time on the technicalities of making books. You can count on our commitment to deliver high-quality books at competitive prices on topics you want to read about. At IDG Books Worldwide, we continue in the IDG tradition of delivering quality for more than 30 years. You’ll find no better book on a subject than one from IDG Books Worldwide.

John Kilcullen Chairman and CEO IDG Books Worldwide, Inc.

Eighth Annual Computer Press Awards 1992

Ninth Annual Computer Press Awards 1993

Tenth Annual Computer Press Awards 1994

Eleventh Annual Computer Press Awards 1995

IDG is the world’s leading IT media, research and exposition company. Founded in 1964, IDG had 1997 revenues of $2.05 billion and has more than 9,000 employees worldwide. IDG offers the widest range of media options that reach IT buyers in 75 countries representing 95% of worldwide IT spending. IDG’s diverse product and services portfolio spans six key areas including print publishing, online publishing, expositions and conferences, market research, education and training, and global marketing services. More than 90 million people read one or more of IDG’s 290 magazines and newspapers, including IDG’s leading global brands — Computerworld, PC World, Network World, Macworld and the Channel World family of publications. IDG Books Worldwide is one of the fastest-growing computer book publishers in the world, with more than 700 titles in 36 languages. The “...For Dummies® ” series alone has more than 50 million copies in print. IDG offers online users the largest network of technology-specific Web sites around the world through IDG.net (http://www.idg.net), which comprises more than 225 targeted Web sites in 55 countries worldwide. International Data Corporation (IDC) is the world’s largest provider of information technology data, analysis and consulting, with research centers in over 41 countries and more than 400 research analysts worldwide. IDG World Expo is a leading producer of more than 168 globally branded conferences and expositions in 35 countries including E3 (Electronic Entertainment Expo), Macworld Expo, ComNet, Windows World Expo, ICE (Internet Commerce Expo), Agenda, DEMO, and Spotlight. IDG’s training subsidiary, ExecuTrain, is the world’s largest computer training company, with more than 230 locations worldwide and 785 training courses. IDG Marketing Services helps industry-leading IT companies build international brand recognition by developing global integrated marketing programs via IDG’s print, online and exposition products worldwide. Further information about the company can be found at www.idg.com. 1/26/00

Credits Acquisitions Editors

Quality Control Technician

David Mayhew Jo hn Gravener

Din F Quan

Permissions Editor Project Editor

Carmen Kriko rian

Sharo n Eames

Technical Editor

Associate Media Development Specialist

Greg Guntle

Jamie Smith

Copy Editor

Media Development Assistant

Laura J. Hester

Marisa Pearman

Proof Editor

Media Development Managers

Patsy Owens

Stephen No etzel Laura Carpenter

Project Coordinators Danette Nurse Lo uigene A. Santo s

Book Designer

Graphics and Production Specialists

Illustrator

Bo b Bihlmayer Darren Cutlip Jude Levinso n Vic to r Pérez-Varela Ramses Ramirez

Gabriele Mc Cann

Drew R. Mo o re

Proofreading and Indexing Yo rk Pro duc tio n Servic es

Cover Illustration Larry S. Wilso n

About the Authors Bryan Pfaffenberger is the autho r o f mo re than 75 bo o ks o n c o mputers and the Internet, inc luding the best-selling Disco ve r the Inte rne t, fro m IDG Bo o ks Wo rldwide. He teac hes advanc ed pro fessio nal c o mmunic atio n and the so c io lo gy o f c o mputing in the University o f Virginia’s Divisio n o f Tec hno lo gy, Culture, and Co mmunic atio n. Bryan lives in Charlo ttesville, Virginia, with his family and an extremely spo iled c at. In additio n to writing several c o mputer bo o ks, Bill Karow has served as a c o ntributo r o r tec hnic al edito r o n mo re than 30 o ther bo o ks. Fo rmerly in c harge o f systems develo pment fo r Walt Disney Entertainment, Bill no w serves as a c o mputer c o nsultant in the Orlando area when he’s no t o ut riding his bic yc le. He also has the distinc tio n o f having sto o d ato p many o f the buildings at Walt Disney Wo rld, fanfare trumpet in hand (with their permissio n, o f c o urse).

To Suz anne and Farris

Preface

R

emember all that late-1980s talk abo ut the Info rmatio n Superhighway? Yo u learned yo u’d get 500 c able c hannels, no t just 50 (o r, as c o medians put it, 500 terrible c hannels instead o f 50 terrible c hannels). Like mo st predic tio ns invo lving tec hno lo gy, this o ne was way o ff the mark. (Add this o ne to the gro wing c atalo g o f predic tio ns go ne awry, suc h as the famed remark by a 1950s IBM exec utive that the wo rld wo uld need, at mo st, a do zen o r so c o mputers.) The Info rmatio n Superhighway didn’t happen at the TV; instead, it happened at the perso nal c o mputer, c o nnec ted to the Internet and the Wo rld Wide Web. Far mo re impo rtant, tho ugh, the Info rmatio n Superhighway that has develo ped isn’t like TV at all. TV is a bro adc ast medium, in whic h c o rpo rate c o ntent pro viders determine what yo u’re go ing to see. The Web, fro m the beginning, was designed to transfo rm c o uc h po tato es into c o ntent pro duc ers. Yo u c an do no thing but c o nsume Web c o ntent, to be sure, and millio ns o f Web surfers are o ut there who are happy to flit fro m site to site witho ut making their o wn c o ntributio n. And WebTV, o f c o urse, brings the Web-as-TV to the TV — and in so do ing, ro bs the Web o f part o f its po wer. What makes the Web suc h a po werful medium is, unlike all o ther mass media, it’s inherently a two -way street, c o ntent-wise. Anyo ne who c an c o nsume c o ntent o n the Web c an also pro duc e it, using HTML, the easy-to -learn page definitio n language that underlies the Web’s appearanc e. It’s as if yo u go t a mo rning paper, but by afterno o n, yo u c o uld publish yo ur o wn take o n the news — and make it available, po tentially, to millio ns o f peo ple. The Web is pro bably the mo st impo rtant develo pment in suppo rt o f free speec h sinc e the inventio n o f the printing press, in that it enables virtually anyo ne to o riginate c o ntent c heaply and make this c o ntent available to a po tentially massive audienc e. Unquestio nably, the Web is go o d fo r the enviro nment: millio ns o f tree-killing public atio ns are mo ving to the Web. Within c o rpo ratio ns, fo r example, vo lumino us public atio ns — direc to ries, emplo yee manuals, pro c edure manuals, agendas, repo rts, and meeting minutes — appear in Web-based internal netwo rks c alled intranets; the enviro nmental plusses, c o upled with signific ant c o st savings, make this inno vatio n a no -brainer. Fo r even the smallest business, the Web pro vides a way to get yo ur message o ut, stay in to uc h with c usto mers, and pro vide needed info rmatio n, but witho ut running up a huge bill at the printer. And the best part o f all is no o ne c an tell ho w big o r

x

Preface

small yo u are. No reaso n exists fo r them ever to kno w o nly o ne little sc ientist is behind the c urtain in the Emerald City. The list o f Web impac ts c o uld go o n fo r do zens o f pages, but the pattern’s c lear: the Web is fast bec o ming an indispensable new way to make info rmatio n available to o thers. This do esn’t mean the Web is go ing to replac e o ther media anytime so o n. If yo u’re running a retail business, yo u’d be wise to advertise in the lo c al newspaper as well as set up a Web page, but it do es mean the Web is no lo nger so mething yo u c an prudently igno re. No matter what yo ur message might be, yo u want to get it o ut o n the Web.

Who Should Read This Book? What all this means fo r yo u is simple: Whatever yo ur walk o f life — whether yo u’re a businessperso n, a manager, a student at any level, a retired perso n, a ho memaker, o r the vic e president o f the United States (a c o nfessed Web junkie) — yo u o we it to yo urself to learn ho w to o riginate Web c o ntent. And this means learning HTML. To do this, yo u need a bo o k — a c o mprehensive bo o k, and what’s mo re, a bo o k that teac hes yo u ho w to take full advantage o f this exc iting new versio n o f HTML, Versio n 4.01. Whether yo u’re a c o mplete beginner o r so meo ne who ’s already delved into previo us versio ns o f HTML, yo u’ll find this bo o k is abso lutely the right o ne fo r learning and mastering HTML 4.01 — and in so do ing, assure yo ur plac e in the Web’s future.

What’s So Special About This Book? The HTML 4 Bible , 2nd Editio n is yo ur tic ket to mastery o f the newest versio n o f HTML, Versio n 4.01. As yo u learn in the next sec tio n, HTML 4 is the mo st signific ant revisio n o f the Web’s publishing language to appear sinc e the language’s inventio n. Yo u need a bo o k that rec o gnizes these no vel features and takes a no vel appro ac h. Fo r the first time, HTML pro vides Web publishers with the po wer and flexibility to c reate page layo uts rivaling tho se fo und in pro fessio nally designed magazines and newsletters. HTML 4 requires a new appro ac h to HTML, ho wever. If yo u’ve learned previo us versio ns o f HTML, yo u need to unlearn so me o ld habits — a lo t o f o ld habits. If yo u’re learning HTML fo r the first time, yo u need to learn it the right way,by reading a bo o k that’s no t just a quic kie rehash o f a bo o k o n so me previo us versio n o f HTML. Fro m the first sentenc e to the last item in the final appendix, this bo o k was written fro m sc ratc h to emphasize the HTML 4 Way, the radic ally new appro ac h to Web publishing made po ssible by this exc iting new versio n o f HTML. No t a single wo rd o f this bo o k appeared in any previo us editio n that fo c used o n an earlier, flawed versio n o f HTML. This bo o k teac hes a new appro ac h to learning and using HTML 4, o ne that fully enables yo u to realize HTML 4’s inc redible layo ut po tential. Onc e yo u

Preface

learn what HTML is and understand the impo rtant implic atio ns o f HTML Versio n 4, yo u’ll understand why yo u need a bo o k that’s been written fro m the gro und up to emphasize HTML 4’s inc redible new c apabilities.

How This Book Is Organized This bo o k has seven parts. All o f them adhere stric tly to the HTML 4 Way.

Part I fo c uses o n getting yo u up to speed o n Web publishing: what’s in it fo r yo u, and what’s invo lved. Part II helps yo u understand HTML — where it is to day, and where it’s heading in the future with XML and XHTML. Part II inc ludes a review o f the latest HTML-editing so ftware o n the market with spec ial attentio n to whether it suppo rts the HTML 4 Way (and all o f it is inc luded o n the CD-ROM in the bac k o f the bo o k). Part III teac hes do c ument struc ture with HTML. Part IV helps yo u design the lo o k o f yo ur site with graphic s and c asc ading style sheets.

Part V teac hes advanc ed page layo ut and c asc ading style sheets — so mething no t c o vered in any o ther bo o k o f this type abo ut HTML 4.

Part VI explains ho w to add bells and whistles to yo ur site with multimedia and interac tivity.

Part VII explains what has bec o me kno wn as dynamic HTML and its animatio n with JavaSc ript.

Using This Book’s Special Features Bec ause this bo o k c an’t make use o f hypertext, it implements several spec ial c o nventio ns to draw yo ur attentio n to things yo u might want to kno w o r need to kno w o utside the text. Definition

To help you becom e fam iliar w ith new term s, w e introduce new term s and acronym s (and, boy, are a lot of acronym s associated w ith HTML!) in special vocabulary boxes. You’ll know them w hen you com e across them by looking for this Vocabulary icon.

In Depth

This book addresses the needs of a num ber of audiences, each of w hich desires a different level of technical detail. To accom m odate all levels, the m ain text covers w hat you need to know to publish your pages successfully. When there is m ore you m ight w ant to know, the topic is covered in-depth because w e set it apart from the text w ith this icon.

xi

xii

Preface

Tip

If w e suggest a particularly useful w ay to achieve som ething, a m arvelous shortcut, or a clever alternative, w e identify it w ith this icon to save you both tim e and frustration . . . at no extra charge!

Caution

Many of you are already fam iliar w ith HTML 4.0 and earlier versions. For you, know ing both how HTML 4.01 does it and w hen doing it the pre-HTML 4.01 Way m ight get you into trouble w ith subsequent versions of brow sers is im portant. The W3C calls certain uses of elem ents and attributes deprecated. Rather than ignoring deprecated elem ents and attributes, in w hich case you m ight go ahead and use them , this book flags them w ith an icon, along w ith any other special inform ation you should know.

On the CD-ROM

Content you find included on this book’s CD-ROM is flagged w ith a CD icon for your convenience.

CrossReference

Som etim es you are directed to other sections of the chapter or other chapters in the book for m ore inform ation on a topic. In addition, each chapter ends w ith a section telling you w here you go next in the book —a particularly useful feature if you’re not follow ing the book sequentially.

We didn’t inc lude anything unimpo rtant. If yo u read a c hapter every night, yo u c an be as kno wledgeable as the pro s in less than two mo nths! In what o ther c areer c o uld yo u kno w what the experts kno w this quic kly? What are yo u waiting fo r? Begin!

Acknowledgments

W

riting this bo o k has been a real adventure. So many peo ple have helped us alo ng the way. With the breadth o f material this bo o k c o vers, we o c c asio nally turned to spec ialists to make sure everything we said was up-to -the-mo ment c o rrec t. Many thanks to Peter Dalianis fo r his pro fessio nal and tho ughtful c o mments o n defining the message. Thanks also to Ric k Pro vine fo r his invaluable assistanc e with digital audio . Mic hael Tuite pro vided tho ughtful assistanc e with digital video and a ho st o f o ther issues, fo r whic h we are grateful. We are indebted to Chuc k Mo ran and Debra Weiss, who genero usly assisted with pro fessio nal design advic e fo r the sec tio n o n site design. Thanks also to Tim O’Brien fo r his help with Java rapid develo pment enviro nments. Thank yo u to Caro le Mc Clendo n and Chris Van Buren at Waterside Pro duc tio ns fo r pulling this o ppo rtunity to gether and making it happen. Thanks to e ve ryo ne at IDG Bo o ks Wo rldwide; a mo re pro fessio nal gro up has never been assembled. Thanks to pro jec t edito r Sharo n Eames, ac quisitio ns edito rs David Mayhew and Jo hn Gravener, tec hnic al edito r Greg Guntle, c o py edito r Laura Hester, and pro o f edito r Patsy Owens. Also wo rking behind the sc enes were permissio ns edito r Jessic a Mo ntgo mery, graphic s c o o rdinato r Danette Nurse, layo ut superviso r Chris Pimentel, pro jec t c o o rdinato r Lo uigene Santo s, and a multitude o f o thers at IDG Bo o ks, to o numero us to mentio n here. Extra spec ial thanks also sho uld go to Ric k Darnell fo r his assistanc e with the last part o f this bo o k, and to Mic hele Davis, fo r jumping in to ensure this bo o k wo uld make it o ut to yo u, the reader. Thanks! Finally, Bill wo uld like to thank Suzanne and Farris fo r their patienc e and suppo rt while he disappeared fo r many ho urs at a time. This wo uldn’t have been po ssible witho ut yo u bo th.

Contents at a Glance Prefac e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Ac kno wledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii

Part I: HTM L 4 Quick Start . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Chapter 1: HTML 4 Basic s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Chapter 2: The HTML 4 Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Chapter 3: Creating Yo ur First Web Page . . . . . . . . . . . . . . . . . . . . . . . . 29 Chapter 4: Go ing Public ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Part II: Understanding HTM L 4 . . . . . . . . . . . . . . . . . . . . . . . 69 Chapter 5: Intro duc ing HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Chapter 6: What Abo ut XML/ XSL? . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Chapter 7: Intro duc ing XHTML: HTML’s Future . . . . . . . . . . . . . . . . . . . . 95 Chapter 8: Cho o sing an HTML Edito r . . . . . . . . . . . . . . . . . . . . . . . . . 101 Chapter 9: Writing fo r the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Chapter 10: Co nsidering Spec ial Needs — Web Ac c essibility . . . . . . . . . . . 135 Chapter 11: Understanding Server Optio ns . . . . . . . . . . . . . . . . . . . . . 139

Part III: Developing Document Structure with HTM L 4 . . . . . . . . 155 Chapter 12: Understanding HTML 4 Do c ument Arc hitec ture . . . . . . . . Chapter 13: Spec ifying the HTML Versio n and Do c ument Title . . . . . . . Chapter 14: Spec ifying Metadata . . . . . . . . . . . . . . . . . . . . . . . . Chapter 15: Struc turing Lines and Paragraphs with Blo c k-Level Elements Chapter 16: Creating Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . Chapter 17: Using Inline Elements and Spec ial Charac ters . . . . . . . . . . Chapter 18: Adding Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . Chapter 19: Inserting Graphic s and Other Objec ts . . . . . . . . . . . . . . Chapter 20: Adding Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . Chapter 21: Creating Fo rms and Inserting Sc ripts . . . . . . . . . . . . . . . Chapter 22: Creating Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . Chapter 23: Gro uping Elements with DIV and SPAN . . . . . . . . . . . . . . Chapter 24: Testing and Validating Yo ur HTML . . . . . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

157 169 173 179 187 195 205 215 223 239 263 275 279

Part IV: Enhancing Presentation with Cascading Style Sheets . . . . 287 Chapter 25: Intro duc ing Casc ading Style Sheets Chapter 26: Learning CSS Syntax . . . . . . . . Chapter 27: Adding Styles to Yo ur Web Pages . Chapter 28: Adding Co lo rs and Bac kgro unds . Chapter 29: Fo rmatting Paragraphs . . . . . . . Chapter 30: Fo rmatting Tables . . . . . . . . . . Chapter 31: Adding Fo nts . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

289 297 309 319 327 337 349

Part V: Lay It Out Like the Pros . . . . . . . . . . . . . . . . . . . . . . 359 Chapter 32: Essentials o f Web Page Design . . . . . Chapter 33: Understanding CSS Po sitio ning Optio ns Chapter 34: Po sitio ning Graphic s and Text . . . . . . Chapter 35: Co o l CSS Po sitio ning Tips and Tric ks . . Chapter 36: Struc turing Multipage Sites . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

361 381 391 403 411

Part VI: Adding Sensory Excitement and Interactivity . . . . . . . . . 431 Chapter 37: Creating Still Graphic s fo r the Web . . . . . . . . . . . . . . . . . . . Chapter 38: Creating Animated Graphic s fo r the Web . . . . . . . . . . . . . . . Chapter 39: Designing and Implementing Imagemaps . . . . . . . . . . . . . . . Chapter 40: Pro duc ing and Adding So unds . . . . . . . . . . . . . . . . . . . . . Chapter 41: Pro duc ing and Adding Video . . . . . . . . . . . . . . . . . . . . . . Chapter 42: Inc o rpo rating Plug-Ins and Ac tiveX Co ntro ls . . . . . . . . . . . . . Chapter 43: Adding Java Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating 44: Subsc riptio ns with the Channel Definitio n Fo rmat . . . . . . . . . . Chapter 45: Ac c essing External Databases . . . . . . . . . . . . . . . . . . . . . . Chapter 46: Building a Co mmunity: Inc o rpo rating Disc ussio n Gro ups and Chat

433 445 453 461 471 479 495 503 511 519

Part VII: Using Cross-Browser Dynamic HTM L . . . . . . . . . . . . . 525 Chapter 47: Intro duc ing Dynamic HTML and the Do c ument Objec t Mo del Chapter 48: Cro ss-Bro wser Basic s with JavaSc ript . . . . . . . . . . . . . . Chapter 49: Frames, Layers, and the Shell Game . . . . . . . . . . . . . . . Chapter 50: Do ing Windo ws with JavaSc ript . . . . . . . . . . . . . . . . . .

. . . .

. . . .

. . . .

527 539 557 571

Appendix Appendix Appendix Appendix Appendix Appendix Appendix Appendix

A: HTML 4 Data Types . . . . . . . . . . B: HTML 4 Elements Referenc e . . . . . C: HTML 4 Attributes Referenc e . . . . . D: HTML 4 Charac ter Entities Referenc e E: Casc ading Style Sheets Referenc e . . F: Language Co des Referenc e . . . . . . G: Hex No tatio ns Referenc e . . . . . . . H: Abo ut the CD-ROM . . . . . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

579 583 653 665 669 713 719 723

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 End-User Lic ense . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744 CD-Ro m Installatio n Instruc tio ns . . . . . . . . . . . . . . . . . . . . . . . . . . . . 750

Contents Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Acknow ledgm ents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii

Part I: HTM L 4 Quick Start

1

Chapter 1: HTM L 4 Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Intro duc ing the Basic Building Blo c ks: Elements . . . . . . . . . . . . . . . . 3 Elements versus tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Even elements have parts . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Understanding Yo ur Optio ns: Attributes . . . . . . . . . . . . . . . . . . . . . 5 Co uples o nly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Always sho p fro m a list . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Please take a number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 The c o lo rs o f the wo rld . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Creativity c o unts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Using Spec ial Charac ters: Entities . . . . . . . . . . . . . . . . . . . . . . . . . 8 Adding Co mments to Yo ur HTML . . . . . . . . . . . . . . . . . . . . . . . . 10 Making Yo ur HTML Readable . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Avo iding Co mmo n Syntax Erro rs . . . . . . . . . . . . . . . . . . . . . . . . . 12 Understanding Nesting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 The Basic Struc ture o f an HTML Do c ument: HEAD and BODY . . . . . . . . 14 Fro m Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Chapter 2: The HTM L 4 Way . . . . . . . . . . . . . . . . . . . . . . . . . 17 The Extensio n Pro blem . . . . . . . . . . . . . . . . Co mpatibility ac ro ss bro wsers . . . . . . . . The Wo rld Wide Web Co nso rtium . . . . . . . The Ideal: Separating Struc ture fro m Presentatio n Cluttered HTML (the pre-HTML-4 universe) . The maintenanc e nightmare . . . . . . . . . . HTML 4 defines struc ture . . . . . . . . . . . . Intro duc ing Casc ading Style Sheets . . . . . . . . . The HTML 4 Way . . . . . . . . . . . . . . . . . . . . The Future: XML . . . . . . . . . . . . . . . . . . . . The Ideal Versus the Reality . . . . . . . . . . . . . Where’s All This Go ing? . . . . . . . . . . . . . . . . What Sho uld Yo u Do No w? . . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

17 18 19 20 20 22 23 24 26 26 27 27 28 28

xviii

Contents

Chapter 3: Creating Your First Web Page . . . . . . . . . . . . . . . . . 29 Fire Up Yo ur Edito r . . . . . . . . . . . . . . . Titling Yo ur Page . . . . . . . . . . . . . . . . First things first . . . . . . . . . . . . . Identifying the Autho r . . . . . . . . . . . . . Defining key wo rds fo r better retrieval Beginning the BODY . . . . . . . . . . . . . . Adding an Apparent Title . . . . . . . . . . . Typing and Editing Text . . . . . . . . . . . . Paragraphs . . . . . . . . . . . . . . . . Blo c kquo tes . . . . . . . . . . . . . . . Breaking Lines and Starting New Paragraphs Preventing line breaks . . . . . . . . . Adding ho rizo ntal lines . . . . . . . . . Creating a List . . . . . . . . . . . . . . . . . Bulleted lists . . . . . . . . . . . . . . . Numbered lists . . . . . . . . . . . . . . Adding a Link . . . . . . . . . . . . . . . . . . Adding an internal link . . . . . . . . . Adding an external link . . . . . . . . . Preview Yo ur Page . . . . . . . . . . . . . . . Finishing To uc hes . . . . . . . . . . . . . . . Lo ading yo ur style sheets . . . . . . . Linking to style sheets . . . . . . . . . Change yo ur style . . . . . . . . . . . . HTML Elements in Sho rthand . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

29 31 31 32 32 34 34 36 36 36 37 37 38 39 39 40 41 41 42 42 43 43 43 44 45 46

Chapter 4: Going Public! . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Getting Yo ur Fac ts Straight . . . . . . . . . . . . . . . . . . . . . Deskto p Web Servers . . . . . . . . . . . . . . . . . . . . . . . . Enterprise Web Servers . . . . . . . . . . . . . . . . . . . . . . . Publishing o n Yo ur Own Server . . . . . . . . . . . . . . . . . . Publishing o n Yo ur Servic e Pro vider’s Server . . . . . . . . . . Platfo rm Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . Extra: Publishing to a Windo ws NT/ 2000 server . . . . . . . . . . . . . . . . . . . . Fro m Windo ws 98 . . . . . . . . . . . . . . . . . . . . . . . Fro m Windo ws NT/ 2000 . . . . . . . . . . . . . . . . . . . Fro m a Mac . . . . . . . . . . . . . . . . . . . . . . . . . . . Intro duc ing FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . Intro duc ing FTP c lients: CuteFTP, WS_FTP, Fetc h . . . . . . . . Develo ping Direc to ries to Sto re Yo ur Pages and Graphic s . . . Direc to ry struc ture to matc h yo ur pages . . . . . . . . . . Direc to ry struc ture by file type (generally a better idea)

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

47 49 51 51 52 52

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

53 53 56 57 59 60 62 62 63

Uplo ading Yo ur Pages and Graphic s DNS . . . . . . . . . . . . . . . . . . . Permissio ns . . . . . . . . . . . . . . Testing Yo ur Wo rk . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

Part II: Understanding HTM L 4

. . . . .

64 65 65 65 67

69

Chapter 5: Introducing HTM L . . . . . . . . . . . . . . . . . . . . . . . . 71 What’s Yo ur Purpo se? . . . . . . . . . . . . . Transit po int . . . . . . . . . . . . . . . Destinatio n . . . . . . . . . . . . . . . . Educ atio nal . . . . . . . . . . . . . . . . Mo tivatio nal . . . . . . . . . . . . . . . Info rmatio nal . . . . . . . . . . . . . . . Persuasive . . . . . . . . . . . . . . . . Sales . . . . . . . . . . . . . . . . . . . . Understanding Yo ur To o ls . . . . . . . . . . SGML . . . . . . . . . . . . . . . . . . . HTML . . . . . . . . . . . . . . . . . . . The HTML Standardizatio n Pro c ess . . . . . Buzz and sc rambling . . . . . . . . . . Co mmittees and wo rking drafts . . . . Vo ting pro c ess . . . . . . . . . . . . . . HTML edito rs . . . . . . . . . . . . . . . Writing HTML . . . . . . . . . . . . . . . . . . Fo rmat yo ur text . . . . . . . . . . . . . Struc ture yo ur do c ument . . . . . . . . Inc luding Multimedia . . . . . . . . . . . . . Inline . . . . . . . . . . . . . . . . . . . Out-o f-line . . . . . . . . . . . . . . . . . Objec ts . . . . . . . . . . . . . . . . . . Standardizatio n . . . . . . . . . . . . . . . . . Understanding the Standardizatio n Pro c ess Ac tivities . . . . . . . . . . . . . . . . . Gro ups . . . . . . . . . . . . . . . . . . Co nsensus . . . . . . . . . . . . . . . . Pro po sed rec o mmendatio ns . . . . . . Vo ting . . . . . . . . . . . . . . . . . . . Rec o mmendatio ns . . . . . . . . . . . . Players in the Standardizatio n Pro c ess . . . The Extensio ns Game . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

72 72 72 73 73 74 74 75 75 76 77 77 77 78 78 80 81 82 82 83 83 84 84 84 85 85 86 86 86 86 87 87 88 89

xx

Introduction

Chapter 6: What About XM L/ XSL? . . . . . . . . . . . . . . . . . . . . . 91 What Is XML? . . . . . . . . . . . Do c ument type definitio n . XML namespac e . . . . . . What Is XSL . . . . . . . . . . . . Transfo rmatio ns . . . . . . Fo rmatting . . . . . . . . . Fro m Here . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

91 92 92 92 93 93 93

Chapter 7: Introducing XHTM L: HTM L’s Future . . . . . . . . . . . . . 95 What Is XHTML? . . . . . . . . . . . . . . . . Extensibility . . . . . . . . . . . . . . . Po rtability . . . . . . . . . . . . . . . . Differenc es Between HTML and XHTML . . . Required tags . . . . . . . . . . . . . . Tags must be pro perly nested . . . . . Lo werc ase tag and attribute names . . Empty elements are no t allo wed . . . . No nempty elements have to be c lo sed Attribute values must be quo ted . . . Attribute values must be expanded . . Fro m Here . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

95 95 96 96 96 96 98 98 98 99 99 99

Chapter 8: Choosing an HTM L Editor . . . . . . . . . . . . . . . . . . 101 To WYSIWYG o r No t to WYSIWYG? . . . . . . . . . . WYSIWYG edito rs: Easy to use, but hands-o ff Getting serio us: Tag-based pro grams . . . . . What’s the differenc e? . . . . . . . . . . . . . . Explo ring HTML Edito r Features . . . . . . . . . . . Co nsideratio ns . . . . . . . . . . . . . . . . . . HTML 4 suppo rt . . . . . . . . . . . . . . . . . Suppo rt fo r advanc ed tags . . . . . . . . . . . Lo o king at HTML Edito rs . . . . . . . . . . . . . . . TextPad 4.2.1 . . . . . . . . . . . . . . . . . . . Ho tDo g Pro fessio nal 6.0 . . . . . . . . . . . . . Ho meSite 4.5 . . . . . . . . . . . . . . . . . . . Ho TMetaL PRO 6.0 . . . . . . . . . . . . . . . . Co ffeeCup 8.2 . . . . . . . . . . . . . . . . . . . Dreamweaver . . . . . . . . . . . . . . . . . . . Fro ntPage 2000 . . . . . . . . . . . . . . . . . . HTML-Kit 1.0 . . . . . . . . . . . . . . . . . . . PageMill 3.0 . . . . . . . . . . . . . . . . . . . . NetObjec ts Fusio n 5.0 . . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

102 102 102 103 105 105 106 111 117 117 117 119 120 121 123 124 124 125 126 127

Introduction

Chapter 9: Writing for the Web . . . . . . . . . . . . . . . . . . . . . . 129 Designing fo r Quic k Sc anning . . Writing Co nc isely . . . . . . . . . Ac tive verbs . . . . . . . . . Subo rdinatio n . . . . . . . . Expletives . . . . . . . . . . Sentenc e length . . . . . . . Write Vividly . . . . . . . . . . . . Chec k Spelling and Pro o freading Fro m Here . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

129 131 131 132 132 133 133 134 134

Chapter 10: Considering Special Needs —Web Accessibility . . . . . 135 Ac c essible Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Ac c essibility Guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Fro m Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Chapter 11: Understanding Server Options . . . . . . . . . . . . . . . 139 The Client-Server Mo del . . . . . . . . . . The c lient-server mo del . . . . . . . Pro c essing: The c rux o f the issue . Client Pro c essing . . . . . . . . . . . . . . Intro duc ing Web Servers . . . . . . . . . . Permissio ns . . . . . . . . . . . . . . NT: Hidden permissio n . . . . . . . Server Pro c essing . . . . . . . . . . . . . . What the Web server c an’t pro c ess Co nverting sc ripts to HTML . . . . The Histo ry o f Middleware . . . . . . . . Built-in middleware . . . . . . . . . Stand-alo ne middleware . . . . . . . Rapid applic atio n develo pment . . Co o kies . . . . . . . . . . . . . . . . . . . . Sec ure Servers . . . . . . . . . . . . . . . Lo o king at UNIX Servers . . . . . . . . . . Lo o king at Windo ws NT Servers . . . . . Fro m Here . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

139 140 141 142 143 144 144 145 146 146 146 148 149 149 150 150 152 153 153

xxi

xxii

Introduction

Part III: Developing Document Structure with HTM L 4

155

Chapter 12: Understanding HTM L 4 Document Architecture . . . . 157 What’s New in HTML 4? . . . . . . . . . . . . Frames . . . . . . . . . . . . . . . . . . . Fo rms . . . . . . . . . . . . . . . . . . . Anno tatio n . . . . . . . . . . . . . . . . Tables . . . . . . . . . . . . . . . . . . . Fac ilitating CSS . . . . . . . . . . . . . . What’s go ne fro m HTML 4.0? . . . . . . Co mpo nents o f HTML . . . . . . . . . . . . . Elements . . . . . . . . . . . . . . . . . . Attributes . . . . . . . . . . . . . . . . . Entities . . . . . . . . . . . . . . . . . . . Blo c k Versus Inline Elements . . . . . . . . . Understanding Nesting . . . . . . . . . . . . . The HTML Element . . . . . . . . . . . . . . . The HEAD Element . . . . . . . . . . . . . . . Additio nal HEAD Elements . . . . . . . . . . . The BODY Element . . . . . . . . . . . . . . . Struc ture Versus Presentatio n, Again . . . . Making Yo ur HTML as Readable as Po ssible Fro m Here . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .

157 157 158 158 158 159 159 159 159 160 160 160 161 162 163 163 166 166 167 167

Chapter 13: Specifying the HTM L Version and Document Title . . . 169 Versio n Info rmatio n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Do c ument Title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Fro m Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Chapter 14: Specifying M etadata . . . . . . . . . . . . . . . . . . . . . 173 The META Element . . . . . . Name attributes . . . . The http-equiv attribute Ro bo ts.txt . . . . . . . . . . . Fro m Here . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

173 174 175 176 177

Chapter 15: Structuring Lines and Paragraphs with Block-Level Elements . . . . . . . . . . . . . . . . . . . . 179 Intro duc ing Blo c k-Level Elements . . . . . . . . . . . . . . . . . . . . . . . 179 Dic tating presentatio n . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

Introduction

Creating Paragraphs: The P Element . . . . . . . . . . . . . . Co ntro lling Line Breaks and Spac ing . . . . . . . . . . . . . . Breaking up yo ur page . . . . . . . . . . . . . . . . . . . Preventing a line break . . . . . . . . . . . . . . . . . . Adding Headings . . . . . . . . . . . . . . . . . . . . . . . . . Creating Indented Quo tatio ns: The BLOCKQUOTE Element Adding Prefo rmatted Text . . . . . . . . . . . . . . . . . . . . Gro uping Blo c k Elements: The DIV Element . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

180 181 181 182 182 183 184 185 186

Chapter 16: Creating Lists . . . . . . . . . . . . . . . . . . . . . . . . . 187 Intro duc ing Lists . . . . . . . . . . . . . . . . . Creating bulleted lists: The UL element . Creating numbered lists: The OL element Creating definitio n lists: The DL element Nesting Blo c k Elements . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

187 187 189 190 192 192

Chapter 17: Using Inline Elements and Special Characters . . . . . 195 Intro duc ing Inline Elements . . . . . . . . . . Lo gic al Versus Physic al Styles . . . . . . . . Understanding Web Charac ter Sets . . . . . . Adding Spec ial Charac ters . . . . . . . . . . . Spec ial Charac ters fo r Spec ific Jo bs . . . . . Handling Fo reign Languages . . . . . . . . . . Adding Quo tes: The Q Element . . . . . . . . Gro uping Inline Elements: The SPAN Element Fro m Here . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

195 197 198 198 199 202 203 203 204

Chapter 18: Adding Hyperlinks . . . . . . . . . . . . . . . . . . . . . . 205 Understanding Links . . . . . . . . . . . . . . . . URLs Dissec ted . . . . . . . . . . . . . . . . . . . Linking Lo c al Pages with Relative File Names . . Qualifying the URL . . . . . . . . . . . . . . The A element . . . . . . . . . . . . . . . . Linking to Pages in Other Direc to ries . . . Linking to External Pages . . . . . . . . . . . . . Linking to Lo c atio ns o n the Same Page . . . . . Link to Pages fro m Images . . . . . . . . . . . . . Linking to No n-Web Data . . . . . . . . . . . . . . The BASE Element . . . . . . . . . . . . . . . . . Adding a mailto Link . . . . . . . . . . . . . . . . Bo nus: Create a Link Witho ut Leaving Yo ur Page Fro m Here . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

205 206 207 207 207 208 208 209 210 211 211 212 212 213

xxiii

xxiv

Contents

Chapter 19: Inserting Graphics and Other Objects . . . . . . . . . . 215 A Quic k Intro duc tio n to Graphic s File Fo rmats . . . JPEG . . . . . . . . . . . . . . . . . . . . . . . . GIF . . . . . . . . . . . . . . . . . . . . . . . . . PNG . . . . . . . . . . . . . . . . . . . . . . . . Creating a graphic image . . . . . . . . . . . . Adding Inline Images with the IMG Element . . . . . Multimedia . . . . . . . . . . . . . . . . . . . . . . . . Adding Inline Multimedia with the OBJECT Element Tips o n Using Images Effec tively . . . . . . . . . . . Pro viding Alternatives fo r Text-Only Bro wsers . . . Fro m Here . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

215 215 216 216 216 216 218 218 220 221 222

Chapter 20: Adding Tables . . . . . . . . . . . . . . . . . . . . . . . . . 223 Intro duc ing the HTML Table Mo del Defining the Table . . . . . . . . . . . Adding Table Data . . . . . . . . . . Gro uping Ro ws . . . . . . . . . . . . Defining Co lumns . . . . . . . . . . . Gro uping Co lumns . . . . . . . . . . Spanning Ro ws and Co lumns . . . . Adding Finishing To uc hes to a Table Nesting Tables . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

223 224 226 231 234 235 236 237 238 238

Chapter 21: Creating Forms and Inserting Scripts . . . . . . . . . . . 239 Intro duc ing Fo rms . . . . . . . . . . . . . . . Understanding Fo rm Pro c essing . . . . . . . Saving the data fo r further pro c essing Returning info rmatio n to the visito r . . Taking o ther ac tio n . . . . . . . . . . . Inserting the FORM . . . . . . . . . . . . . . . Ac tio n . . . . . . . . . . . . . . . . . . . Metho d . . . . . . . . . . . . . . . . . . Adding Co ntro ls . . . . . . . . . . . . . . . . . INPUT Element . . . . . . . . . . . . . . . . . Type attribute . . . . . . . . . . . . . . BUTTON Element . . . . . . . . . . . . . . . . SELECT, OPTION, and OPTGROUP Elements SELECT element . . . . . . . . . . . . . OPTION element . . . . . . . . . . . . . TEXTAREA Element . . . . . . . . . . . . . . . LABEL Element . . . . . . . . . . . . . . . . . FIELDSET and LEGEND Elements . . . . . . . Fo rm Pro c essing Optio ns . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

239 240 240 240 241 241 242 242 243 245 246 251 252 253 254 256 257 258 259

Contents

Dealing with Fo rm Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Mailto : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Fro m Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Chapter 22: Creating Frames . . . . . . . . . . . . . . . . . . . . . . . 263 Intro duc ing Frames . . . . . . . . . . . . . Develo ping the Master Frame Do c ument Ro ws o nly . . . . . . . . . . . . . . . Co lumns o nly . . . . . . . . . . . . . Bo th ro ws and c o lumns . . . . . . . Nested FRAMESETs . . . . . . . . . Targets . . . . . . . . . . . . . . . . . . . . Creating FRAMEs . . . . . . . . . . . . . . Enhanc ing Navigability . . . . . . . . . . . NOFRAMES . . . . . . . . . . . . . . . . . . Adding Inline Frames (IFRAMEs) . . . . . Fro m Here . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

Chapter 23: Grouping Elements with DIV and SPAN What Is CLASS? . Intro duc ing DIV . Intro duc ing SPAN Fro m Here . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

263 264 265 265 266 266 267 268 269 271 271 273

. . . . . . . . . 275 . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

275 276 277 278

Chapter 24: Testing and Validating Your HTM L . . . . . . . . . . . . . 279 Watc h fo r These Co mmo n HTML Mistakes Testing Yo ur HTML . . . . . . . . . . . . . . Why Yo u Sho uld Validate . . . . . . . . . . What is validating? . . . . . . . . . . . Why validate? . . . . . . . . . . . . . . Validating Yo ur HTML . . . . . . . . . . . . Validating Yo ur CSS . . . . . . . . . . . . . . Different ways o f validating yo ur CSS Assessing Usability . . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

Part IV: Enhancing Presentation with Cascading Style Sheets

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

279 280 281 281 281 282 283 284 284 285

287

Chapter 25: Introducing Cascading Style Sheets . . . . . . . . . . . . 289 Why Style Sheets Are Needed . . . . . . . . . . . . . . . . . . . . . . . . . . 289 What Style Sheets Can Do . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 Gro uping elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

xxv

xxvi

Contents

Site fac e-lift . . . . . . . . Delegating page assembly The Casc ading Mo del . . . . . . Style Sheet Examples . . . . . . Bro wser Co mpatibility Issues . Fro m Here . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . witho ut sac rific ing design c o ntro l . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

291 291 291 292 295 295

Chapter 26: Learning CSS Syntax . . . . . . . . . . . . . . . . . . . . . 297 Anato my o f a Style Sheet . . . . . . . . . . . Differenc es Between CSS and HTML Syntax Defining Pro perties . . . . . . . . . . . . . . Gro uping Pro perties . . . . . . . . . . . . . Pro perty Definitio n Sho rtc uts . . . . . . . . Bo x Fo rmatting: The CSS Fo rmatting Mo del Bo x dimensio ns . . . . . . . . . . . . . Padding . . . . . . . . . . . . . . . . . Bo rder . . . . . . . . . . . . . . . . . . Margins . . . . . . . . . . . . . . . . . Understanding Inheritanc e . . . . . . . . . Defining Classes . . . . . . . . . . . . . . . . Pseudo -Classes . . . . . . . . . . . . . . . . Defining IDs . . . . . . . . . . . . . . . . . . Gro uping Elements with DIV and SPAN . . Co mments in Style Sheets . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

297 298 299 300 301 301 301 302 303 304 304 305 305 306 306 307 307

Chapter 27: Adding Styles to Your Web Pages . . . . . . . . . . . . . 309 Using an External Style Sheet . . . . . . . Using a STYLE Element within the HEAD Adding Inline Styles . . . . . . . . . . . . . Using a Standardized Style Sheet . . . . . Mixing the Appro ac hes: An Example . . . Fro m Here . . . . . . . . . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

309 310 312 312 315 317

Chapter 28: Adding Colors and Backgrounds . . . . . . . . . . . . . . 319 Ho w Yo ur Mo nito r Creates Co lo r . . Intro duc ing Co lo r Co des . . . . . . . Using English . . . . . . . . . . Mo nito r-to -mo nito r variatio ns Co lo r Palettes . . . . . . . . . . . . . Co lo r-Co mpatibility Co nsideratio ns Defining a Bac kgro und Co lo r . . . . Changing Default Text Co lo rs . . . . Adding a Bac kgro und Graphic . . . Fro m Here . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

319 320 320 321 321 322 322 323 323 325

Contents

Chapter 29: Formatting Paragraphs . . . . . . . . . . . . . . . . . . . 327 Reviewing the CSS Bo x Fo rmatting Mo del Padding summary . . . . . . . . . . Margins summary . . . . . . . . . . Units o f length . . . . . . . . . . . . Adding Indentatio ns . . . . . . . . . . . . Co ntro lling Alignment . . . . . . . . . . . Cho o sing Line Height . . . . . . . . . . . . Co ntro lling Lists with Styles . . . . . . . . List style type . . . . . . . . . . . . . List style image . . . . . . . . . . . . List style po sitio n . . . . . . . . . . List style sho rthand . . . . . . . . . Adding Bo rders . . . . . . . . . . . . . . . Bo rder width . . . . . . . . . . . . . Bo rder c o lo r . . . . . . . . . . . . . Bo rder style . . . . . . . . . . . . . . Sho rthand tec hniques . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

327 328 328 329 329 329 330 330 330 331 331 332 332 332 333 333 334 334

Chapter 30: Formatting Tables . . . . . . . . . . . . . . . . . . . . . . 337 Co ntro lling Table Alignment . . . . . . . . . . Setting Ho rizo ntal Cell Alignment . . . . . . . At the c ell level . . . . . . . . . . . . . . At the ro w level . . . . . . . . . . . . . . At the c o lumn level . . . . . . . . . . . At the ro w gro up level o r c o lumn gro up Setting Vertic al Cell Alignment . . . . . . . . Spec ifying Table and Cell Widths . . . . . . . Abso lute values . . . . . . . . . . . . . . Relative values . . . . . . . . . . . . . . Spec ifying width in style sheets . . . . Adding Cell Spac ing . . . . . . . . . . . . . . . Defining Cell Padding . . . . . . . . . . . . . . Using Co lo rs in Tables . . . . . . . . . . . . . Defining Rules and Bo rders . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . level . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

337 338 338 339 340 341 341 342 342 343 343 344 345 346 346 347

Chapter 31: Adding Fonts . . . . . . . . . . . . . . . . . . . . . . . . . 349 Intro duc ing Fo nts . . . . . . . . . . . . Fo nt families . . . . . . . . . . . Fo nts versus the image o f fo nts Using Lo c al Fo nts . . . . . . . . . . . . Fo nt-Selec tio n Co nsideratio ns . . . . The aesthetic s o f fo nt selec tio n Availability o f lo c al fo nts . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

349 349 351 351 351 352 352

xxvii

xxviii

Contents

Co ntro lling Fo nt Selec tio n . . . . . . . . . . . . Cho o sing Fo nt Sizes . . . . . . . . . . . . . . . Using Co ndensed and Expanded Fo nts . . . . Co ndensing and expanding ho rizo ntally Co ndensing and expanding vertic ally . . Adding Small Caps and Other Dec o ratio ns . . Changing the first line . . . . . . . . . . . Changing the first letter . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

Part V: Lay It Out Like the Pros

. . . . . . . . .

352 353 353 354 355 355 356 356 357

359

Chapter 32: Essentials of Web Page Design . . . . . . . . . . . . . . 361 What’s in a Page? . . . . . . . . . . . . . . . . Fo c using o n Yo ur Message . . . . . . . . . . . Keeping it to the po int (yo ur left brain) Go with the feeling (yo ur right brain) . When to ask fo r help . . . . . . . . . . . Lead me no t into temptatio n . . . . . . The Shell Game . . . . . . . . . . . . . . . . . Co nsistenc y . . . . . . . . . . . . . . . . . . . Predic tability . . . . . . . . . . . . . . . . . . Navigability . . . . . . . . . . . . . . . . . . . Navigatio n bar o r navigatio n butto ns . Table o f c o ntents . . . . . . . . . . . . . Site map . . . . . . . . . . . . . . . . . . Site searc h . . . . . . . . . . . . . . . . . Site dro p-do wn list . . . . . . . . . . . . Visual Appeal . . . . . . . . . . . . . . . . . . Interac tivity . . . . . . . . . . . . . . . . . . . Speed . . . . . . . . . . . . . . . . . . . . . . . Design Guidelines . . . . . . . . . . . . . . . . Effec tive Use o f White Spac e . . . . . . . . . Optimum Page Length . . . . . . . . . . . . . Future Expandability . . . . . . . . . . . . . . Designing an Effec tive Welc o me Page . . . . Splash Sc reens . . . . . . . . . . . . . . . . . Testing . . . . . . . . . . . . . . . . . . . . . . The Myth o f Co mpleteness . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

361 362 362 363 364 364 365 367 368 368 368 370 371 372 372 373 373 373 374 378 378 379 379 379 379 380 380

Chapter 33: Understanding CSS Positioning Options . . . . . . . . . 381 The display Pro perty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381 The flo at Pro perty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 The c lear Pro perty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

Contents

The po sitio n Pro perty . . . . . . . . . . . . . . The z-index Pro perty . . . . . . . . . . . . . . . Understanding Relative Po sitio ning . . . . . . Understanding Abso lute Po sitio ning . . . . . . Co mbining Relative and Abso lute Po sitio ning Fro m Here . . . . . . . . . . . . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

388 389 389 390 390 390

Chapter 34: Positioning Graphics and Text . . . . . . . . . . . . . . . 391 Spec ifying Image Lo c atio n . . . . . . . . . . . . Using frames . . . . . . . . . . . . . . . . Using CSS with abso lute po sitio ning . . . Using CSS with relative po sitio ning . . . Using CSS to flo at the image . . . . . . . Defining Text Po sitio ns . . . . . . . . . . . . . . Changing the BODY element . . . . . . . Po sitio ning text with relative po sitio ning Flo ating an Image Next to Text . . . . . . . . . Flo ating bo th the text and the image . . Flo ating o nly the text . . . . . . . . . . . The o rder o f the HTML matters . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

391 391 392 392 394 395 396 396 397 398 399 399 402

Chapter 35: Cool CSS Positioning Tips and Tricks . . . . . . . . . . . 403 Creating Co lumns o f Text . . . . . Superimpo sing Text and Graphic s Creating Pull Quo tes . . . . . . . . Fro m Here . . . . . . . . . . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

403 405 407 409

Chapter 36: Structuring M ultipage Sites . . . . . . . . . . . . . . . . . 411 Po ssibilities and Pro blems o f Multipage Sites . . . . The Pro s o f multipage sites fo r yo ur visito rs . The Co ns o f multipage sites fo r yo ur visito rs The Pro s o f develo ping a multipage site . . . The Co ns o f develo ping a multipage site . . . Dividing the Site . . . . . . . . . . . . . . . . . . . . . By o riginatio n o f c o ntent . . . . . . . . . . . . By type o f c o ntent . . . . . . . . . . . . . . . . By visito r type . . . . . . . . . . . . . . . . . . Dividing Co ntent . . . . . . . . . . . . . . . . . . . . Site Arc hitec ture . . . . . . . . . . . . . . . . . . . . Linear arc hitec ture: The fo rc ed marc h . . . . Hierarc hic al arc hitec ture . . . . . . . . . . . . Avo id extreme devo tio n to hierarc hy . . . . . Anarc hy . . . . . . . . . . . . . . . . . . . . . . A seamless web . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

411 412 412 414 414 414 415 416 417 419 421 422 423 423 424 424

xxix

xxx

Contents

Pro viding Navigatio nal Aids . . . . . . . . . Maintaining a Multipage Site . . . . . . . . Bo nus: Maintaining a Really Large Web Site Fro m Here . . . . . . . . . . . . . . . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

Part VI: Adding Sensory Excitement and Interactivity

. . . .

425 426 428 429

431

Chapter 37: Creating Still Graphics for the Web . . . . . . . . . . . . 433 Understanding Graphic s File Fo rmats Why c o mpressio n? . . . . . . . . Co mpressio n o ptio ns . . . . . . Understanding Co lo r Depth . . . . . . Enhanc ing Do wnlo ading Speed . . . . Image file sizes . . . . . . . . . . Number o f images . . . . . . . . Reuse images . . . . . . . . . . . Use frames . . . . . . . . . . . . Use text rather than images . . . Creating Graphic s . . . . . . . . . . . . Essential func tio ns . . . . . . . . Free alternatives . . . . . . . . . Capturing Graphic s . . . . . . . . . . . Pro gressive JPEGs and Interlac ed GIFs Using Transparent GIFs . . . . . . . . Fro m Here . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

433 433 436 437 438 438 439 439 440 440 440 440 441 442 442 443 444

Chapter 38: Creating Animated Graphics for the Web . . . . . . . . 445 Intro duc ing Animated GIFs . . . . . . . . Planning Yo ur Animatio n . . . . . . . . . . Creating the Animatio n . . . . . . . . . . . Using a GIF Animatio n Edito r . . . . . . . Inc luding an Animated GIF o n Yo ur Page Testing Yo ur Animatio n . . . . . . . . . . Mo re Animatio n Optio ns . . . . . . . . . . Sho c kwave/ Flash . . . . . . . . . . . Mo vies . . . . . . . . . . . . . . . . . Java applets . . . . . . . . . . . . . . Ac tiveX c o ntro ls . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

445 446 448 448 450 450 450 450 451 451 451 451

Contents

Chapter 39: Designing and Implementing Imagemaps . . . . . . . . 453 Intro duc ing Imagemaps . . . . . . . . . . . Imagemap Design . . . . . . . . . . . . . . . Server-Side Versus Client-Side Imagemaps Develo ping Graphic s fo r Imagemaps . . . . Using an Imagemap Edito r . . . . . . . . . . The MAP Element . . . . . . . . . . . . . . . The AREA Element . . . . . . . . . . . . . . The Anato my o f an Imagemap . . . . . . . . Adding Alternate Text . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

453 454 455 455 456 457 457 458 458 458

Chapter 40: Producing and Adding Sounds . . . . . . . . . . . . . . . 461 Understanding Digital Audio . . . . . Rec o rding equipment . . . . . . Rec o rding bit-depth . . . . . . . Sample rate . . . . . . . . . . . . Mo no versus stereo . . . . . . . Playbac k equipment . . . . . . . Intro duc ing So und File Fo rmats . . . . Intro duc ing Streaming Audio . . . . . Obtaining So und Files . . . . . . . . . Rec o rding So und Files . . . . . . . . . Editing So und Files and Adding Filters Co mpressing So und Files . . . . . . . Adding So und Files to Yo ur Page . . . Inline so und . . . . . . . . . . . . Out-o f-line so und . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

461 462 462 462 463 463 463 464 465 465 466 466 467 467 468 468

Chapter 41: Producing and Adding Video . . . . . . . . . . . . . . . . 471 Intro duc tio n to Digital Video . Expec tatio ns . . . . . . . Garbage in, garbage o ut . The Anato my o f Digital Video . Frame rate . . . . . . . . . Frame size . . . . . . . . . Intro duc ing Video File Fo rmats Intro duc ing Streaming Video . Video Co mpressio n Sc hemes . Capturing Analo g Video . . . . Editing Digital Video . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

471 472 472 472 473 473 473 474 474 474 475

xxxi

xxxii

Contents

Adding Video Files to Yo ur Page Inline mo vies . . . . . . . . Out-o f-line mo vies . . . . . Invaluable Reso urc es . . . . . . . Fro m Here . . . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

477 477 477 477 477

Chapter 42: Incorporating Plug-Ins and ActiveX Controls . . . . . . 479 Reviewing the OBJECT Element . . . . . . . Ho w Plug-Ins Wo rk . . . . . . . . . . . . . . Plug-In Pluses and Minuses . . . . . . . . . Adding Plug-Ins . . . . . . . . . . . . . . . . 3D and animatio n plug-ins . . . . . . . Audio and video plug-ins . . . . . . . Disc ipline-spec ific plug-ins . . . . . . Business plug-ins . . . . . . . . . . . . Testing Yo ur Plug-In . . . . . . . . . . . . . Co nfiguring Yo ur Server . . . . . . . . . . . Intro duc ing Ac tiveX . . . . . . . . . . . . . Ac tiveX Pluses and Minuses . . . . . . . . . Understanding the Ac tiveX Sec urity Mo del Finding Ac tiveX Co ntro ls . . . . . . . . . . . Inc o rpo rating Ac tiveX Co ntro ls . . . . . . . Defining Optio ns (Parameters) . . . . . . . Getting Aro und the Mac Pro blem . . . . . . Testing Yo ur Co ntro l . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

479 480 482 482 483 484 485 485 486 487 487 488 489 489 490 491 491 492 492

Chapter 43: Adding Java Applets . . . . . . . . . . . . . . . . . . . . . 495 Intro duc ing Java . . . . . . . . . . . . . Java Pluses and Minuses . . . . . . . . . The Java virtual mac hine . . . . . The Just-In-Time c o mpiler . . . . Understanding the Java Sec urity Mo del Java Develo pment To o ls . . . . . . . . . Inc o rpo rating Java Applets . . . . . . . Defining Optio ns (Parameters) . . . . . Testing Yo ur Applet . . . . . . . . . . . . Intro duc ing Server-Side Java . . . . . . Fro m Here . . . . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

495 496 496 497 497 498 500 500 501 501 501

Chapter 44: Creating Subscriptions with the Channel Definition Format . . . . . . . . . . . . . . . . . 503 Intro duc ing Push Optio ns . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503 No thing new . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504 Channels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504

Contents

Marketing with Push . . . . . . . . . . . Intro duc ing Channel Definitio n Fo rmat CDF (XML) syntax . . . . . . . . . Images . . . . . . . . . . . . . . . . Items . . . . . . . . . . . . . . . . . Subsc ribing to a Channel . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

505 505 506 506 508 508 509

Chapter 45: Accessing External Databases . . . . . . . . . . . . . . . 511 Understanding Databases . . . . . . . . . . . . . . . . . . . Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . Keys . . . . . . . . . . . . . . . . . . . . . . . . . . . . Relatio nships . . . . . . . . . . . . . . . . . . . . . . . Co mmo n databases . . . . . . . . . . . . . . . . . . . ODBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . The Web-to -Database Interfac e . . . . . . . . . . . . . . . . Requesting data . . . . . . . . . . . . . . . . . . . . . Co mmunic ating with the database . . . . . . . . . . . Returning results . . . . . . . . . . . . . . . . . . . . . Co nc lusio ns fro m the Web-to -database interac tio n . Optio ns fo r Ac c essing Database Data . . . . . . . . . . . . Three stand-alo ne c o mpo nents . . . . . . . . . . . . Dual-purpo se Web server and stand-alo ne database Stand-alo ne Web server and dual-purpo se database External Database Ac c ess witho ut Pro gramming . . . . . . External Database Ac c ess with SQL . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

511 511 512 512 512 512 513 513 514 515 515 515 516 516 517 517 517 518

Chapter 46: Building a Community: Incorporating Discussion Groups and Chat . . . . . . . 519 Intro duc ing Threaded Disc ussio n Gro ups and Chat Applic atio ns o f threaded disc ussio n gro ups . Applic atio ns o f c hat ro o ms . . . . . . . . . . . Adding Threaded Disc ussio n Gro ups to a Web Page Adding Chat to a Web Page . . . . . . . . . . . . . . Text c hat . . . . . . . . . . . . . . . . . . . . . Visual c hat . . . . . . . . . . . . . . . . . . . . Creating Co mmunity . . . . . . . . . . . . . . . . . . What c an yo u o ffer? . . . . . . . . . . . . . . . A big-name c o lumnist . . . . . . . . . . . . . . Talk with a pro fessio nal . . . . . . . . . . . . . Beyo nd Chat and Threaded Disc ussio n Gro ups . . Fro m Here . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

519 520 520 521 521 521 522 522 522 523 523 523 524

xxxiii

xxxiv

Contents

Part VII: Using Cross-Browser Dynamic HTM L

525

Chapter 47: Introducing Dynamic HTM L and the Document Object M odel . . . . . . . . . . . . . . . . . 527 What Is Dynamic HTML? . . . . . . . . . . . . . . . . . Fo undatio n fo r Change: The Do c ument Objec t Mo del Ho w is the DOM implemented? . . . . . . . . . . Cro ss-bro wser c o mpatibility and the DOM . . . The struc ture o f the DOM . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

528 531 532 533 533 536

Chapter 48: Cross-Browser Basics with JavaScript . . . . . . . . . . 539 JavaSc ript: The Dynamic in DHTML . . . . . . Adding sc ripts with the SCRIPT element JavaSc ript exec utio n . . . . . . . . . . . . Event handling in JavaSc ript . . . . . . . Pro perties, metho ds, and func tio ns . . . Passing data fro m the page to the sc ript Testing and debugging JavaSc ript . . . . Cro ss-Bro wser JavaSc ript . . . . . . . . . . . . Surveying the Bro wser Enviro nment . . . . . . Objec t detec tio n in JavaSc ript . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

539 541 542 544 547 549 551 552 552 555 556

Chapter 49: Frames, Layers, and the Shell Game . . . . . . . . . . . 557 Defining Hidden Text . . . . . . . . . . . . . . . . Bringing hidden text into view . . . . . . . Designing an interac tive table o f c o ntents Dynamic ally mo difying styles . . . . . . . . The sc ript . . . . . . . . . . . . . . . . . . . Mo ving Layers . . . . . . . . . . . . . . . . . . . . Creating c ro ss-bro wser HTML . . . . . . . DOM o bjec t detec tio n . . . . . . . . . . . . Setting the initial po sitio n . . . . . . . . . . Mo ving the o bjec t . . . . . . . . . . . . . . Fro m Here . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

557 558 558 561 562 563 565 566 566 567 569

Chapter 50: Doing Windows with JavaScript . . . . . . . . . . . . . . 571 What’s a Windo w? . . . . Windo w Wo rkings . . . . . Opening Windo ws . . . . . Spec ial-Purpo se Windo ws Windo ws by remo te Clo sing windo ws . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

571 572 573 574 576 577

Contents

Appendix A: HTML 4 Data Types . . . . . . . . . . . . . . . . . . . . . . . 579 Appendix B: HTML 4 Elem ents Reference . . . . . . . . . . . . . . . . . 583 Appendix C: HTML 4 Attributes Reference . . . . . . . . . . . . . . . . . 653 Appendix D: HTML 4 Character Entities Reference . . . . . . . . . . . . 665 Appendix E: Cascading Style Sheets Reference . . . . . . . . . . . . . . 669 Appendix F: Language Codes Reference . . . . . . . . . . . . . . . . . . 713 Appendix G: Hex Notations Reference . . . . . . . . . . . . . . . . . . . 719 Appendix H: About the CD-ROM . . . . . . . . . . . . . . . . . . . . . . . 723

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 End-User License . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744 CD-Rom Installation Instructions . . . . . . . . . . . . . . . . . . . . . . . 750

xxxv

Introduction

S

ho rt fo r HyperText Markup Language, HTML is o ne o f many markup languages that have appeared in rec ent years. In brief, a markup language pro vides guidelines fo r adding markup — in the fo rm o f spec ial symbo ls — to text do c uments. These symbo ls desc ribe the parts o f the do c ument. Fo r example, yo u c an use a markup language to identify a po rtio n o f the text as an abstract, a brief summary o f the do c ument’s c o ntents. HTML is a markup language designed fo r Internet do c uments.

Introducing markup languages Markup is needed bec ause c o mputers are quite stupid when it c o mes to understanding text. A c o mputer c an’t really tell whether a c ertain po rtio n o f a text is an abstrac t, a title, a heading, o r a paragraph. Witho ut so me kind o f additio nal c o ding, the c o mputer do esn’t kno w ho w to display the text so that it lo o ks like an ac tual do c ument. Wo rd pro c essing pro grams pro vide the nec essary c o ding by means o f pro prietary fo rmatting c o des, but these have a gigantic do wnside: They wo rk o nly if yo u’re lo o king at the do c ument using the same wo rd pro c essing pro gram and type o f c o mputer that c reated it. If yo u ever tried to exc hange a Wo rdPerfec t file with a Mac into sh MS Wo rd user, yo u c an understand the diffic ulties invo lved. Markup languages so lve the file-c o mpatibility pro blem by using no thing but ASCII (plain text) c harac ters and, what’s mo re, by breaking the c o nnec tio n between struc tural markup and presentatio n. In struc tural markup, yo u identify the parts o f a do c ument — in effec t, yo u say this is a title o r this is a he ading — but yo u say no thing abo ut ho w this part o f the do c ument sho uld be presented using spec ific fo rmatting (fo nts, alignment, and so o n). Yo u mark up the do c ument’s struc ture by identifying the do c ument’s parts (title, abstrac t, headings, paragraphs, lists, and so o n). But there’s mo re. Pre se ntatio n — ho w the do c ument is fo rmatted fo r display o r printing — is left entirely up to a bro wse r, a pro gram designed to read the markedup do c ument fo r display o n a spec ific type o f c o mputer hardware. The distinc tio n between struc ture and presentatio n is impo rtant, fo r in it lies the key to a markup language’s c apability to wo rk smo o thly in a c ro ss-platfo rm enviro nment (a c o mputer netwo rk in whic h peo ple are using many different types o f c o m-

xxxviii

Contents

puters). With a markup language, yo u c an c reate just o ne versio n o f a do c ument. Peo ple c an run bro wsers designed to func tio n o n Mac into shes, UNIX c o mputers, and all the vario us versio ns o f Windo ws (3.1, 95, 98, NT, and 2000), and they c an display yo ur do c ument with abso lutely no tro uble. Fo r eac h o f these c o mputers, a bro wser kno ws ho w to display the marked-up do c ument o n a given system. Do es a do wnside exist to markup languages? Yes. If yo u do pure struc tural markup, with no presentatio n at all, yo u give up c o ntro l o ver ho w yo ur do c ument appears. On o ne system, it may appear with blac k Times Ro man text — but, o n ano ther, so me c razy user may have set up his o r her bro wser to display yo ur text in 28-po int Demented Bo ld. And there’s no thing yo u c an do to sto p this user.

HTM L —a hypertext markup language HTML is a markup language with all the advantages o f o ther markup languages when it c o mes to separating struc ture fro m presentatio n. But HTML has so mething mo re: HTML is a hypertext markup language. What’s hypertext? In brief, hype rte xt is a way o f o rganizing info rmatio n so readers c an c ho o se their o wn path thro ugh the material. Instead o f c lic king thro ugh sequentially o rganized pages, a hypertext user c lic ks spec ially highlighted text, c alled a hype rlink (o r just a link fo r sho rt), to go direc tly to info rmatio n o f interest. There’s mo re to say abo ut hypertext but, fo r no w, the impo rtant po int is this: HTML is the first markup language to inc o rpo rate markup fo r hyperlinks. When yo u mark up a do c ument with HTML, yo u c an define so me o f the text as a link, within whic h yo u embed the c o mputer address o f ano ther reso urc e o n the Internet. This c o uld be a do c ument, a mo vie, a so und, an animatio n, o r a file to do wnlo ad.

Eroding the structure/ presentation distinction As yo u just learned, the who le purpo se o f a markup language lies in separating struc ture fro m presentatio n and, in so do ing, enabling c o ntent develo pers to c reate do c uments that c an be displayed faultlessly o n any type o f c o mputer. But this distinc tio n hasn’t fared well. By the time HTML go t to Versio n 3.2, it had been serio usly ero ded. Why did this ero sio n o c c ur? The reaso n lies in the Web’s rapid c o mmerc ializatio n. Ac tually, HTML was initially designed to enable physic s researc hers to make their preliminary papers available to o ther physic s researc hers, and the humdrum appearanc e o f plain-vanilla HTML wasn’t an issue. As the Web migrated to the private sec to r and bec ame an impo rtant way fo r giant c o rpo ratio ns to get their message o ut, Web develo pers c o uldn’t igno re presentatio n anymo re. They needed to emulate the page layo ut designs o f pro fessio nal newsletter and magazine designers. They didn’t like the idea o f a pure markup language, whic h wo uld let so meo ne display Americ a, Inc .’s pages using 28-po int Demented Bo ld fo nt.

Contents

So what did Web develo pers do ? They learned a who le series o f tric ks to fake layo ut. Fo r example, they used tables — initially designed to gro up data in tabular fo rm — to emulate newspaper c o lumns and magazine layo uts. Bro wser publishers, inc luding bo th Netsc ape and Mic ro so ft, tried to expand their market share by c reating bro wsers that suppo rt e xte nsio ns, no nstandard additio ns to HTML that pro vide presentatio n c apabilities. (The mo st egregio us o f these is pro bably Netsc ape’s no to rio us blink extensio n, whic h enables Web autho rs to c reate text that blinks away anno yingly while yo u’re trying to read the page.) What’s the result o f HTML’s c o mmerc ializatio n? In brief, a mess. Yo u c an use the tric ks and extensio ns to fake presentatio n with a Web page, but ho w it’s go ing to lo o k o n a given c o mputer and mo nito r is anyo ne’s guess. HTML pages are c rammed with HTML c o de that’s been elabo rated to a ridic ulo us extent to emulate magazine layo uts, but editing and maintaining these pages is a c o stly nightmare. To c o rrec t erro rs in the text, yo u have to pic k thro ugh reams o f messy c o de. And suppo se yo u c reate a who le series o f pages, but later find they lo o k terrible when displayed o n a Mac into sh. Yo u’d have to go bac k into eac h page and c hange the o ffending c o de. In sho rt, the ero sio n o f the struc ture versus presentatio n distinc tio n has serio usly damaged HTML’s underlying purpo se. What’s wo rse, it’s slo wing do wn the Web’s develo pment. To be sure, c reating a simple page is easier. But the c o st o f c reating and maintaining HTML that generates pro fessio nal-lo o king results is so pro hibitive, many wo uld-be c o ntent pro viders are shying away — a bad sc ene!

HTM L 4 and the HTM L 4 Way Realizing that so mething drastic had to be do ne to resc ue HTML, the Wo rld Wide We b Co nso rtium (W3C) — the no npro fit, standards-setting bo dy respo nsible fo r HTML — has published a spec ific atio n fo r a new versio n o f HTML, Versio n 4.01. Altho ugh HTML 4.01 is do wnwardly c o mpatible with previo us versio ns o f HTML, the new versio n is designed to resto re the lo st balanc e between struc ture and presentatio n. What’s mo re, it do es so in a way that gives Web-c o ntent develo pers prec isely what they want: to tal c o ntro l o ver do c ument layo ut. The sec ret? Casc ading style sheets (CSS).

Introducing cascading style sheets The W3C-o riginated c asc ading style sheets (CSS) spec ific atio n is a dream c o me true fo r Web-c o ntent develo pers. To understand why it’s suc h a big deal, think abo ut wo rd pro c essing. The earliest wo rd pro c esso rs gave yo u fo rmatting c o mmands, but made yo u use them o ver and o ver. Fo r example, suppo se yo u wanted to fo rmat a paragraph with a first-line indent, do uble line spac ing, and Times Ro man text. With early pro grams,

xxxix

xl

Contents

yo u had to apply three different fo rmatting c o mmands to every paragraph yo u typed. What a hassle! Then alo ng c ame Mic ro so ft Wo rd. Wo rd enabled yo u to define a named style. Yo u c o uld c reate a style c alled Bo dy Text, and then define this style with all the fo rmats yo u want. Yo u then apply this style to any paragraph yo u type. When yo u apply the style, Bingo ! Yo u get all the fo rmats yo u assigned to the style. Onc e yo u’ve tried this, yo u c an never go bac k — and that’s o ne reaso n Mic ro so ft Wo rd has an o verwhelming market share in the wo rd-pro c essing wo rld.

Harnessing the power of styles Casc ading style sheets bring the po wer o f styles to HTML and the Web. Using CSS, yo u define styles, whic h tell Web bro wsers ho w to display the text yo u marked up with HTML. Suppo se, fo r example, yo u marked up so me o f the text as a heading. With CSS, yo u c an define the heading so it appears with the fo llo wing fo rmats: c entered, 12 po ints abo ve and belo w, 14-po int Helvetic a, and bo ld. The marked-up text is c lean, struc ture-o nly HTML — no go bbledygo o k designed to hassle HTML into a presentatio n language. And what’s mo re, yo u get all the benefits o f styles. Make o ne c hange to the underlying style definitio n and yo u c hange every instanc e o f text to whic h the style is assigned. Even mo re po werfully, yo u c an use external style sheets, whic h define the styles appearing in do zens o r even tho usands o f do c uments. One little c hange to the underlying style and all the linked do c uments are c hanged, to o . CSS is easy to learn, easy to use, and — o nc e yo u grasp what CSS c an do — to tally indispensable. And the benefits are amazing. By remo ving the presentatio n fro m HTML, yo u let HTML do what it do es best — namely, define struc ture. Yo ur HTML will be c leaner, muc h mo re readable, and muc h easier to edit. What’s mo re, CSS do es a far better jo b o f presentatio n than HTML ever c o uld. Fo r example, the latest versio n o f CSS enables abso lute po sitio ning, in whic h yo u c an nail do wn the prec ise lo c atio n o f text o r graphic s o n the page. Yo u c an c reate newspaper-c o lumn effec ts, and even superimpo se text o n graphic s.

What about the structure versus presentation distinction? Wait a minute! Do esn’t CSS vio late the struc ture versus presentatio n distinc tio n? In so me ways, yes. Admittedly, it’s a c o mpro mise, but an elegant c o mpro mise. The CSS autho rs rec o gnized Web develo pers wanted and needed to c o ntro l their do c uments’ presentatio n aspec ts. But they wanted to give autho rs presentatio n c o ntro l witho ut harming the basic benefit o f a markup language, namely, the ability to c reate do c uments that func tio n well in a c ro ss-platfo rm enviro nment. CSS do es enable yo u to define presentatio n — in fac t, that’s its po int. With CSS, yo u c an, indeed, define presentatio n aspec ts suc h as fo nts, and a CSS-c o mpatible

Contents

bro wser respec ts yo ur c ho ic e. The guy who wants to lo o k at yo ur page with 28-po int Demented Bo ld sees yo ur Times Ro man instead. Unlike a wo rd pro c esso r’s fo rmatting c o des, tho ugh, CSS do esn’t lo c k users into a rigid straightjac ket. If Times Ro man isn’t available, the bro wser lo o ks fo r fo nts yo u listed as likely alternates. And, if these aren’t available, the bro wser defaults to a fallbac k fo nt. All this is to tally auto matic , so no o ne is prevented fro m reading yo ur page. In sho rt, CSS pulls o ff so mething wo rd pro c essing pro grams c an’t: CSS c reates ric hly fo rmatted do c uments that are easily exc hanged and used in a c ro ss-platfo rm enviro nment. What’s mo re, CSS enables yo u to mo ve the presentatio n o ut o f HTML. To be sure, yo u c an inc lude CSS style spec ific atio ns within yo ur HTML, but this bo o k do esn’t rec o mmend this prac tic e. It’s muc h better to mo ve the style spec ific atio ns o ut o f the HTML entirely, either in a gro uped style spec ific atio n within the do c ument’s header o r (better yet) in a separate file. With the presentatio n c o de o ut o f the way, yo u c an write pure, struc ture-o nly HTML. And this is prec isely the c o ntro lling theme o f the HTML 4 revisio n.

Back to pure structure with HTM L 4 Altho ugh HTML 4 suppo rts the vario us presentatio n features and extensio ns sho eho rned into previo us versio ns o f HTML, this new versio n’s real signific anc e lies in its reassertio n o f pure struc ture. By mo ving the presentatio n to CSS, yo ur HTML go es bac k to what it sho uld be: c lean, easy to read, inexpensive to maintain, quic k to pro c ess and display, and — mo st o f all — ideal fo r a c ro ss-platfo rm enviro nment.

The HTM L 4 Way This bo o k teac hes an entirely new appro ac h to HTML, o ne yo u wo n’t find in c o mpeting bo o ks that explo re HTML as extensively as this o ne. It’s c alled the HTML 4 Way. The HTML 4 Way takes full advantage o f the exc iting new po ssibilities o f HTML and CSS, and c alls fo r learning bo th, fro m the beginning. That’s why this bo o k’s appro ac h is unique. Almo st all HTML bo o ks begin with HTML, teac h all tho se ho rrible presentatio n tric ks that have ac c umulated o ver the years, and then thro w in a c hapter o n CSS as an aftertho ught. No t so with this bo o k. As yo u’ll see, yo u begin by writing pure struc tural HTML, with abso lutely no presentatio n inc luded. Yo u then learn ho w to weave CSS into yo ur do c uments to o btain to tal, impressive c o ntro l o ver every aspec t o f yo ur do c uments’ presentatio n. Yo u pro duc e c o de that’s beautifully simple and c lear, easy and inexpensive to maintain, and abso lutely stunning o nsc reen.

xli

1

C H A P T E R

HTM L 4 Basics

W

hen yo u learn a language, yo u need to learn rules, c alled syntax . Unless yo u fo llo w these rules, yo ur statements do n’t have any meaning. Co nsider this statement, fo r instanc e: “Extra! Pizza, with a bring peppero ni me; c heese.” The wo rd o rder is o ut o f whac k and so is the punc tuatio n. Yo u c an say this to a waiter, but go o d luc k getting yo ur pizza! Like any language, HTML has syntax rules. Fo rtunately, they’re simple and easy to learn. Befo re yo u start trying to write HTML, yo u’ll be wise to spend a little time learning these rules. It do esn’t take lo ng and there’s a huge payo ff: Yo u’ll avo id c o nfusio n and find it muc h easier to trac k do wn yo ur erro rs. This c hapter intro duc es the basic building blo c ks o f HTML, inc luding elements, attributes, and entities. (Do n’t wo rry abo ut defining these terms right no w; that’s do ne in this c hapter.) Yo u also learn the basic s o f nesting tags and abo ut the basic , underlying struc ture o f every HTML do c ument. Onc e yo u learn these c o nc epts, yo u’re ready to starting writing HTML.

Introducing the Basic Building Blocks: Elements When yo u write yo ur HTML, yo u use e le me nts to define the struc ture o f the do c ument, to define the presentatio n o f yo ur do c ument, to define links to o ther do c uments, and to spec ify desired behavio r. Examples o f elements are: HEAD, BODY, P, BLOCKQUOTE, and UL. When yo u ac tually go to insert these elements into yo ur text, yo u surro und them with < (less than) and > (greater than) symbo ls, whic h are c o llec tively referred to as angle bracke ts. Onc e yo u have do ne this, yo u have , ,

, , and

. These are no lo nger c alled elements; they are no w c alled tags.

✦

✦

✦

✦

In This Cha pter An intro ductio n to elements Attributes: Having it yo ur way Entities: Using special characters Adding co mments Standards fo r writing HTML Avo iding syntax erro rs Understanding nesting Basic HTML structure

✦

✦

✦

✦

4

Part I ✦ HTM L 4 Quick Start

Who makes the rules? Every organization has its ow n rule-m aking body. In the case of the Web, the rule-m aking body is the World Wide Web Consortium (W3C). The W3C is com posed of representatives from over 400 m em ber com panies w ho w ant to have a say in the standards. The W3C tries to balance the interests of the academ y, the com panies producing the Web brow sers (notably Netscape and Microsoft), and the technology. The W3C pulls together com m ittees w ith representatives from interested m em bers and puts the specifications in w riting for HTML, CSS, XML, and other essential technologies. If the W3C w eren’t m aintaining a standard, all brow sers m ight eventually be unable to talk to all Web servers. You can visit their Web site at http://www.w3c.org.

Elements versus tags The Wo rld Wide Web Co nso rtium (W3C) uses the wo rd e le me nts in two ways, whic h is rather c o nfusing. Yo u may have no tic ed this bo o k do es the same thing. In this c hapter, we disc uss elements in the tag sense o f the wo rd. The o ther kind o f element is the e le me nt o f structure o f a do c ument (fo r example, title, paragraph, blo c kquo te).

Even elements have parts Unlike the elements in the Perio dic Table, elements in HTML usually have three parts: start tags, c o ntent, and end tags. Mo st elements have start tags and end tags. The start tag is the element name surro unded by angle brac kets: , ,

, , and

. The e nd tag is the element name, prec eded by a / (c alled a fo rward slash), surro unded by angle brac kets: , ,
, , and
. When the bro wser sees a start tag, it kno ws the text to c o me will all be o f the type defined by the start tag. No t until the bro wser sees an end tag do es it sto p expec ting the text to be o f that type. Bec ause elements c an o ften be nested — no t all elements c an be nested within all o ther elements, but there are valid element nestings — it do esn’t auto matic ally assume a different start tag indic ates the previo us element type has ended. In fac t, the bro wser assumes no thing. Fo rget abo ut the benefit o f the do ubt. The bro wser takes everything yo u send it abso lutely literally. Note

Definition

To add another layer of confusion, som e elem ents w ill display correctly w ithout their end tag, as long as the end of an elem ent can be clearly determ ined from other surrounding elem ents. For exam ple, the LI (list item ) and P (paragraph) tag don’t require end tags, since their end can be clearly determ ined by the beginning of the next elem ent. Still, you w on’t go w rong by alw ays including end tags.

Nesting. Placing elem ents w ithin other elem ents. For exam ple, in a table, the row s are nested w ithin the table elem ent, and the cells are nested w ithin the row elem ents.

Chapter 1 ✦ HTM L 4 Basics

Recap: This stuff is really important! Every elem ent has a name. The start tag is the elem ent nam e surrounded by angle brackets. The end tag alw ays starts w ith a slash, has the elem ent nam e, and is surrounded by angle brackets. Most elem ents have content, w hich occurs betw een the start and the end tags. Som e elem ents have no content. Som e elem ents have no end tags.

So me elements do n’t take any c o ntent, suc h as BR, whic h fo rc es a line break. So me elements have o ptio nal end tags, suc h as LI and P, whic h are list item and paragraph elements. When we explain an element, we tell yo u whether it has any c o ntent and whether it has a required end tag. Elements are c ase-insensitive: , , and are all the same to the bro wser. To make reading yo ur markup easier, tho ugh, we rec o mmend yo u write yo ur element names in all c aps. This is the c o nventio n this bo o k uses. Between the start tag and the end tag, yo u plac e the co nte nt. In reality, yo u usually write the c o ntent first and put the start tag befo re yo ur c o ntent, and then put yo ur end tag after yo ur c o ntent. A majo r c ause o f erro rs in HTML do c uments is fo rgetting the slash in the end tag. Be c areful when yo u type yo ur HTML and be sure yo u spell yo ur tag names c o rrec tly, inc lude bo th angle brac kets, and inc lude yo ur slash. Three examples o f syntac tic ally c o rrec t HTML fo llo w:

This is the bolded title of the page This statement will be in bold. This statement will be in italics.

Understanding Your Options: Attributes Elements have attributes that give yo u flexibility in writing yo ur HTML. Eac h element has its o wn unique attributes. Yo u see patterns, but yo u c an’t just apply any o ld attribute to any o ld element.

Couples only Attributes have values. In fac t, they c o me in pairs. If yo u are go ing to inc lude an attribute, yo u have to inc lude the value fo r that attribute. The value fo r the attribute

5

6

Part I ✦ HTM L 4 Quick Start

is always enc lo sed in do uble quo tatio n marks. Examples o f attribute-value pairs are as fo llo ws:

align=”center” width=”33%” size=”12” name=”first_name”

Always shop from a list The values fo r so me attributes c o me fro m a list o f ac c eptable values that the W3C c reates, when it sets the standards. In the c ase o f valign (an attribute frequently used to tell the bro wser where o n the page yo u want an image o r a table to appear, relative to text), yo ur c ho ic es are to p, middle, bo tto m, and baseline. In the next c hapter, yo u learn the sho rthand fo r the element rules.

Please take a number So me attributes take numbers as their values. In so me c ases, the numbers c an be either a set number (usually o f pixels, whic h are just the do ts o n yo ur sc reen — c o mparable to dpi, the measurement fo r do ts o n yo ur printer) o r a perc entage. Fo r example, when yo u define a table, yo u may want the first c o lumn to be 25 perc ent o f the sc reen width, the sec o nd c o lumn to be 50 perc ent o f the sc reen width, and the third c o lumn to be 25 perc ent o f the sc reen width. Regardless o f ho w the sc reen is sized, it c hanges size to fit in pro po rtio nately. If yo u were to assume the sc reen was 636 pixels and divide it yo urself, the last c o lumn o f the table may no t be visible if the visito r to yo ur page didn’t have the bro wser o pen in full-sc reen mo de. Fo r a fo rm, ho wever, when yo u indic ate the siz e (o ne o f the attributes fo r text fields) o f a field, yo u are indic ating the number o f c harac ters. Fo r an image, when yo u indic ate the width (o ne o f the attributes fo r o bjec t elements), yo u are indic ating the number o f pixels.

The colors of the world In bo th the HTML do c ument itself and in the style sheet, so me attributes take a c o lo r fo r a value. As yo u may have no tic ed, c o lo rs do n’t appear the same fro m o ne mo nito r to the next. Yo u c an, ho wever, say a lo t with c o lo rs. Fo r example, take a page where everything is in seafo am green o r watermelo n; this page says be ach. CrossReference

Not only do colors not look the sam e from one m onitor to the next, Macs and PCs actually use different system palettes. Chapter 37 covers this topic in detail.

Just as with everything else, an HTML way exists to c o nvey info rmatio n abo ut c o lo rs. HTML gives yo u two c ho ic es: the name o f the c o lo r (fro m their appro ved list) and the hex (hexadec imal) representatio n o f the c o lo r. Only 16 named c o lo rs

Chapter 1 ✦ HTM L 4 Basics

exist, so if yo u are pic ky abo ut the c o lo r yo u use, then yo u’ll want to find the hex representatio n o f that c o lo r. Ano ther thing yo u sho uld kno w abo ut c o lo rs o n the c o mputer is that c o lo rs are c o mpo sed o f red, green, and blue, thus the RGB scale . In hex, the first two digits are the amo unt o f red, the next two are green, and the next two are blue. So FF0000 wo uld be pure red. Did we mentio n the highest any digit c an go is F ? We disc uss this next. One mo re thing: 000000 is blac k; FFFFFF is white. That’s no t very intuitive, so yo u just have to remember when yo u add c o lo r to the sc reen, it gets lighter. Unlike paper, whic h is white when blank, the sc reen is blac k when blank. When yo u indic ate the value o f an attribute is a c o lo r and yo u use hex representatio n, yo u need to prec ede the hex value with a # ( po und sign ). The 16 named c o lo rs are listed in Table 1-1 with their hex names. If yo u kno w yo u want a c o lo r between two o f the c o lo rs in the c hart, try selec ting the value between the two hex values. First, yo u must kno w ho w to c o unt in hex. Hex c o unts fro m 1 to 9, then A, B, C, D, E, and F. If yo u need to add 1 to F, yo u go to 10 (that’s o ne-zero , no t ten). Try this math pro blem alo ng with us: 5 plus 6 is B. Plus 5 is 10. Plus 7 is 17. Minus 9 is E. That’s no t to o hard, is it? Fo rtunately, we do n’t need to multiply o r divide in hex!

Table 1-1 Color Codes in Hex Color Name

Hex Representation

Black

# 000000

Green

# 008000

Silver

# C0C0C0

Lim e

# 00FF00

Gray

# 808080

Olive

# 808000

White

# FFFFFF

Yellow

# FFFF00

Maroon

# 800000

Navy

# 000080

Red

# FF0000

Blue

# 0000FF

Purple

# 800080

Teal

# 008080

Fuchsia

# FF00FF

Aqua

# 00FFFF

7

8

Part I ✦ HTM L 4 Quick Start

Recap: M ore important stuff! Attributes are specific to the elem ents they m odify. Attributes alw ays have values. Attribute values m ust be enclosed in double quotation m arks. Attribute values can be one from a list, a num ber, a percentage, or a nam e of your creation.

Creativity counts Fo r so me elements, the attribute value is so mething yo u make up yo urself. Fo r example, if yo u want to c reate a fo rm and yo u want peo ple to enter their first names, yo u assign the value o f the attribute name to be “first_name.” No rmally, when yo u are wo rking with fields, so me server-side sc ripting is go ing o n. Yo ur field names sho uld matc h the names yo u expec t in yo ur sc ript.

Using Special Characters: Entities Ano ther example o f the W3C’s penc hant fo r ac ademic vo c abulary, e ntitie s are simply c harac ters yo u may want to display that do n’t appear o n yo ur keybo ard o r are c harac ters with spec ial signific anc e to HTML (no tably ,&, and “). The mo st c o mmo n o f these are ( © ) (c o pyright) and ( ™ ) (trademark). Three ways exist to write a c o de fo r an entity in yo ur HTML. Whic hever way yo u c ho o se, yo u will find all entities begin with an ampersand (&) and end with a semic o lo n ( ; ) :

✦ Using c harac ter no tatio n. While this is the easiest way to sho w an entity, there isn’t a c harac ter no tatio n fo r every single entity. Fo r the mo st c o mmo n o nes, there are c harac ter representatio ns. Fo r example, © is the entity fo r the c o pyright symbo l. Charac ter no tatio n to indic ate entities is o ne o f the rare parts o f HTML that is c ase-sensitive.

✦ Using dec imal no tatio n. The dec imal representatio n o f a c o pyright symbo l is ©. Sure, yo u knew that!

✦ Using hex no tatio n. Pro grammers dig this metho d. Instead o f &c o py; to indic ate the c o pyright symbo l, they get to type ©, whic h is o bvio usly way c o o ler. Fo r the rest o f the po pulatio n, kno wing A9 in hex (hexadec imal no tatio n) equals 169 in the dec imal system is useful. All hex numbers are prec eded by a lo werc ase x . Entities exist fo r many fo reign languages, mathematic al symbo ls, and English symbo ls that either c an’t be pro duc ed o n a no rmal keybo ard o r are spec ial to HTML.

Chapter 1 ✦ HTM L 4 Basics

Fo r example, if yo u wanted to write “Go o d idea” in Greek, but the bulk o f yo ur do c ument was English, yo u’d write:

Καληηδεα whic h wo uld render as: Καληιδεα. Table 1-2 has the entities yo u will need mo st o ften, if yo u aren’t planning to inc lude fo reign languages in yo ur pages to any great extent. A c o mplete list o f entities c an be fo und in Appendix D.

Table 1-2 Common Entities Character notation

Hex notation

Entity created

 

&# 160;

nonbreaking space

¡

&# 161;

inverted exclam ation m ark

¢

&# 162;

cent sign

£

&# 163;

pound sign

¤

&# 164;

currency sign

¥

&# 165;

yen sign

¦

&# 166;

broken bar

§

&# 167;

section sign

&um l;

&# 168;

Diaeresis

©

&# 169;

copyright sign

ª

&# 170;

fem inine ordinal indicator

«

&# 171;

left-pointing double-angle quotation m ark

¬

&# 172;

not sign

­

&# 173;

discretionary hyphen

®

&# 174;

registered tradem ark sign

&m acr;

&# 175;

Macron

°

&# 176;

degree sign

&plusm n;

&# 177;

plus or m inus sign

²

&# 178;

superscript tw o Continued

9

10

Part I ✦ HTM L 4 Quick Start

Table 1-2 (continued) Character notation

Hex notation

Entity created

³

&# 179;

superscript three

´

&# 180;

acute accent

&m icro;

&# 181;

m icro sign

¶

&# 182;

paragraph sign

¹

&# 185;

superscript one

º ;

&# 186;

m asculine ordinal indicator

»

&# 187;

right-pointing double-angle quotation m ark

¼

&# 188;

fraction one quarter

½

&# 189;

fraction one half

¾

&# 190;

fraction three quarters

¿

&# 191;

inverted question m ark

Adding Comments to Your HTM L Yo u have spent so muc h time with yo ur HTML, no way c o uld yo u ever fo rget what yo u were thinking when yo u wro te it, right? Maybe, maybe no t. Mo st peo ple c an’t remember where they put the bank statement they meant to balanc e fro m last mo nth. Ho w c an yo u expec t to remember what yo u were thinking if yo u have to mo dify yo ur HTML in six mo nths? Realistic ally, yo u want to use c o mments in yo ur HTML to tell yo urself — and anyo ne who inherits yo ur files — basic info rmatio n abo ut what yo u are do ing in there. Fo r example, putting a c o mment line near the to p o f yo ur do c ument telling who c reated the file and o n what date is pretty standard. If yo u expec t yo ur HTML to be a teac hing to o l at all, with peo ple viewing the so urc e to see ho w yo u did things, then yo u want to have espec ially helpful c o mments. Begin yo ur c o mment with
• Add your logo, set the background color or graphic to match the rest of your Web site