Creating Cool Web Sites with HTML, XHTML, and CSS

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.3 MB, 44 trang )

Creating Cool

Web Sites with

HTML, XHTML,

and CSS

Dave Taylor

Creating Cool

Web Sites with

HTML, XHTML,

and CSS

Creating Cool

Web Sites with

HTML, XHTML,

and CSS

Dave Taylor

Creating Cool Web Sites with HTML, XHTML, and CSS
Published by
Wiley Publishing, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256
www.wiley.com

Copyright © 2004 by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
Library of Congress Control Number: 2004100892
ISBN: 0-7645-5738-6
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
1B/SQ/QU/QU/IN
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any
means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections
107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or
authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood
Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be
addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317)
572-3447, fax (317) 572-4447, E-Mail:
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESEN
TATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF
THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES
OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR
PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR

EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED
IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE
IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE
PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT
AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL
SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES
THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE.
FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE
CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
For general information on our other products and services or to obtain technical support, please contact our Customer
Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317) 572-3993 or fax (317) 572-4002.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be
available in electronic books.
Trademarks: Wiley, the Wiley Publishing logo and related trade dress are trademarks or registered trademarks of
John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without
written permission. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not
associated with any product or vendor mentioned in this book.
Copyright © 1994-2003 World Wide Web Consortium (Massachusetts Institute of Technology, European Research
Consortium for Informatics and Mathematics, Keio University). All Rights Reserved. />Consortium/Legal/2002/copyright documents 20021231.

About the Author

Dave Taylor has been involved with the Internet since 1980, when he first logged in as an
undergraduate at the University of California, San Diego. Since then, he’s been a research
scientist at Hewlett-Packard Laboratories in Palo Alto, California, reviews editor for SunWorld
magazine, and founder of four companies: The Internet Mall, iTrack.com, AnswerSquad, and
ClickThruStats.com. Currently, Dave is president of Intuitive Systems and is busy launching
an electronic book publishing company called Intuitive Press.
Dave has designed over 50 Web sites, both commercial and nonprofit, and has published

more than 1000 articles about the Internet, Unix, Macintosh, interface design, and business
topics. His books include Learning Unix for Mac OS X Panther (O’Reilly), Wicked Cool Shell
Scripts (No Starch Press), Teach Yourself Unix in 24 Hours (Sams Publishing), and Solaris
For Dummies (Wiley Publishing).
Dave holds a master’s degree in Educational Computing from Purdue University, an M.B.A.
from the University of Baltimore, an undergraduate degree in Computer Science from the
University of California at San Diego, and is an adjunct professor at the University of
Colorado, Boulder, and the University of Phoenix Online.
You can find Dave Taylor online just about any time at or
you can send him electronic mail at

Credits
Senior Acquisitions Editor
Jim Minatel

Project Coordinator
April Farling

Development Editors
Jodi Jensen
Brian Herrmann

Graphics and Production Specialists
Beth Brooks
Jonelle Burns
Jennifer Heleine

Production Editor

Felicia Robinson
Technical Editing
Wiley-Dreamtech India Pvt Ltd
Copy Editor
Mary Lagu
Editorial Manager
Mary Beth Wakefield
Vice President and Executive Group Publisher
Richard Swadley
Vice President and Executive Publisher
Bob Ipsen
Vice President and Publisher
Joseph B. Wikert
Executive Editorial Director
Mary Bednarek

Quality Control Technician
Susan Moritz
Permissions Editor
Laura Moss
Media Development Specialist
Angela Denny
Book Designer
Kathie S. Schnorr
Proofreading and Indexing
Publication Services
Cover Design
Michael Trent

To Kiana, Gareth, and Ashley, my guardian angels

Preface

W

ho should buy this book? What’s covered? How do I read this book? Why should I
read this book? HTML? XHTML? CSS? Sheesh! Why not just use a Web page editor?
Who am I?

Welcome!
“Wow! Another Web book! What makes this one different?”
That’s a fair question. I want you to be confident that Creating Cool Web Sites with HTML,
XHTML, and CSS will meet your needs as well as provide fun and interesting reading. So
spend a minute and breeze through my preface to ensure that this is the book you seek. . . .

What This Book Is About
In a nutshell, Creating Cool Web Sites with HTML, XHTML, and CSS is an introduction to
HTML, XHTML, and Cascading Style Sheets. HTML is the HyperText Markup Language, and
it’s the language that enables you to create and publish your own multimedia documents on
the World Wide Web. Millions of users on the Internet and online services such as America
Online, Earthlink, and the Microsoft Network are spending hours each day exploring the world
of the Web from within their Web browser, be it Internet Explorer, Netscape Navigator, or any of
a variety of other programs. XHTML is the modern “proper” version of HTML and is the future
of the markup language. Cascading Style Sheets are also part of that future, and it’s a rare
modern Web site that doesn’t use at least some element of CSS in its design and layout.
By using all these technologies, you can learn to quickly and easily create attractive docu

ments that are on the cutting edge of interactive publishing. I went through the pain of learn
ing HTML back in 1994, the very dawn of the Web era, precisely because I wanted to spread
my ideas to a global audience. For me, learning was hit or miss because the only references
I could find were confusing online documents written by programmers and computer types.
For you, it will be a lot easier. By reading this book and exploring the software and samples
included on the companion Web site, you can learn not only the nuts and bolts of HTML,
XHTML, and CSS, but also quite a lot about how to design and create useful, attractive Web
sites and spread the word about them on the Net.

Ł
xii

Preface

Before you delve into this book, you should know the basics: what the Internet is, how to get
on it, and how to use your Web browser. If you seek detailed information on these topics, you
can find many interesting and useful books from Wiley Publishing at />compbooks. After you have this basic knowledge, you’ll find that Creating Cool Web Sites with
HTML, XHTML, and CSS is a fun introduction to the art and science of creating interesting—
and, if I may say so, cool—Web sites that you’ll be proud of and that other users will want to
visit and explore.

Why Not Just Use a Web Page Builder?
If you’ve already flipped through this book to see what’s covered, you’ve seen a ton of differ
ent sample listings with lots and lots of < and > instructions. Yet the advertisements in every
computer magazine are telling you that you don’t need to get your hands dirty with HTML
and CSS when you can use a Web page editor. So what’s the scoop?
The scoop—or the problem, really—is that every Web page editor I’ve used is designed to
create pages for a particular Web browser and has at best a limited understanding of the rich,
complex, evolving HTML language. Use Microsoft Front Page 2000, for example, and your

site will almost certainly look best in Internet Explorer (a Microsoft product).
It’s a subtle but insidious problem. One clue to this lurking problem is that surveys of Web
developers invariably demonstrate that almost all the most popular Web sites are coded by
hand, not with fancy page-building systems.
A development company that I occasionally help with online design recently sent me a plea
because they had encountered this inconsistency in browser presentation:
Dave, Help! Everything looks different in the different browsers!! This is turning
out to be a nightmare! How much effect do different browsers have on the
appearance of the site? My customer is using AOL and from the e-mail she sent
me, things are a mess. When I look at the site, it pretty much is ok. There are a
few modifications to make - font, bold - but what’s going on?
That’s one of the greatest frustrations for all Web site designers: Not only do different versions
of Web browsers support different versions of HTML and CSS, but the exact formatting that
results from a given HTML tag or CSS style varies by Web browser, too. It’s why the mantra
of all good Web designers is “test, test, test.”
In fact, if you’re going to get serious about Web development, I would suggest that you con
sider a setup like I have: Before you officially say that you’re done with a project, check all
the pages with the two most recent major releases of the two biggest Web browsers on both a
Mac and a Windows system. (That’s a total of eight different browsers. Right now, I have the
two most recent versions of Internet Explorer and Netscape loaded on both of my computers.)

Preface

Text Conventions Used in This Book

Ł
xiii

Stuff I ask you to type appears in bold, like this: something you actually type. I also use bold

in some lines of HTML source code to point out the specific tag or attribute that the discus
sion is focusing on.
Filenames, directories, URLs, and names of machines on the Net appear in a special type
face, like this: />HTML-formatted source code appears in that same special typeface, but on separate lines,
like this:
<html>
<title>How to Create Cool Web Sites</title>
<img src=”intro.gif” alt=”How To Create Cool Web Sites” />

Icons Used to Help You Navigate
I use the following icons to help you find your way around the text and to point out important
additional information that I want to emphasize.

Ł
Ł
Ł
Ł
Ł
tip

caution

note

x-ref

on the
web

This icon points out some expert tricks and techniques that can help you work

more efficiently.

Pay attention to this icon. It alerts you to possible pitfalls and may help you avoid
trouble.

Check out this icon for additional details that deserve special attention and may
help you work better in the long term.

Jump to the chapters elsewhere in the book that this icon points you to. You’re
bound to run into some good information or more details about the topic at hand.

This icon points you to helpful information or samples on the companion Web site
that accompanies this book ( or to sites
elsewhere on the Net.

Ł
xiv

Preface

Who Should Read This Book?
You can use this book to learn HTML, XHTML, CSS, and the techniques needed to create
cool Web sites. All you need is a simple text editor, such as Notepad (which comes with
Windows) or TextEdit (which is part of the Macintosh operating system), and a Web browser.
If you’re already online and have a Web browser installed on your computer, you can easily
explore all the examples in this book by going to this book’s accompanying Web site at
/>
What’s on the Companion Web Site?
What would a Web book be without a companion Web site? The Creating Cool Web Sites

with HTML, XHTML, and CSS Web site can be found at />coolsites/. The site contains every single example in the book, pointers to every site men
tioned, the extended table of contents for the book, and a sample chapter for your reading
pleasure. In addition, you’ll find an errata page in case any typos or glitches have come to
light between when we wrapped up production and when you picked up this book. From this
site, you can also access my Booktalk weblog, which offers a fun and informal Q&A environ
ment where you can ask me questions about specific issues that might puzzle or confuse you.

Be Productive in No Time!
By the time you’re halfway through this book, you’ll be able to whip up the kind of pages you
see every day, guaranteed. And by the time you finish this book, you’ll know other ways to
organize information to make creating Web versions of print material easy. You’ll also learn
about the nuances of XHTML and the tremendous power and capabilities that Cascading Style
Sheets add to the equation, as well as why it’s crazy not to include at least rudimentary CSS
elements in your everyday site development work.
Want to contact the author? Send e-mail to or visit my home page
on the Web at />If you’re ready, let’s go!

Acknowledgments

N

o writing project can be completed while the author is locked in a room, although if
there’s a good Net connection, we can probably negotiate something! Seriously, a num
ber of Internet folk have proven invaluable as I’ve written the different editions of this book—
some for their direct help and others for simply having produced some wickedly cool Web
pages that inspired me when things were moving a bit slowly.

Special thanks go to my many students at The University of Phoenix Online and elsewhere
who helped clarify what made sense and what didn’t in the previous editions of the book. I

also particularly appreciate the continued assistance of the team at Wiley Publishing, includ
ing notably Sharon Cox and Jodi Jensen, and Dreamtech for the technical edit. My friends
and colleagues John Locke, Bo Leuf, Werner Klauser, Jon Shemitz, Richard Blum, and Jon
Trelfa helped keep the content fresh and accurate and helped to continually remind me that
there’s more to learn. Special thanks also to search engine expert Dan Murray for his help on
Google page ranking algorithms.
Most of the graphics presented in this book were created in GraphicConverter, a wonderful
shareware application for the Macintosh, though I used Adobe Photoshop CS a few times.
Screen shots were done with MW Snap on the PC and Snapz Pro X on the Macintosh. Most of
the book was written on my aging Apple Macintosh G4/450 system (I have to admit, I’m a
Mac guy at heart), and the Windows work was all done on a 900MHz Pentium III box running
Windows XP.
Finally, warm hugs to Linda, Ashley, Gareth, Jasmine, Karma, Angel, and, of course, the
newest member of my family, Kiana, for ensuring that I took sufficient breaks to avoid carpal
tunnel syndrome or any of the other hazards of overly intense typing. The time off would be a
lot less fun without ya!

Contents

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv

Part I: Building a Wicked Cool Web Page

1

Chapter 1: So What’s All This Web Jazz? . . . . . . . . . . . . . . . . . . . . . 3
What Is the Web Anyway? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Linear media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Hypermedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Cool spots on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Introduction to Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Launching Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Changing the default page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
All about URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
URLs to the rescue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Reading a URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
FTP via URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Anonymous FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Nonanonymous FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Ports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Using FTP URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Special characters in URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
E-mail via URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Telnet via URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Usenet news via URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
The heart of the Web: HTTP URLs . . . . . . . . . . . . . . . . . . . . . . . . . 18
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Chapter 2: Building Your First Web Page: HTML Basics . . . . . . . . . . . . 21
Basics of HTML Layout . . . . .
HTML and browsers . . . . . .
If you open it, close it . . . . .
Breaking at Paragraphs and Lines
Building Your First Web Page . .
Launching your HTML editor .
Saving your file as HTML . . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.

.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.

.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.

.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.

.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.

21
22
23
24
28
28
29

Ł
xviii

Contents
Opening the file in Internet Explorer . . . . . . .
Improving the HTML and viewing it in the browser
Breaking Your Document into Sections . . . . . . .
Adding a Title to Your Page . . . . . . . . . . . . .
Adding Footer Material . . . . . . . . . . . . . . .
Defining Section Heads . . . . . . . . . . . . . . .
Using the Horizontal Rule . . . . . . . . . . . . . .
Introducing XHTML . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . .

.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

31
32
32
34
35
37
40
41
42

Chapter 3: Presenting Text Attractively . . . . . . . . . . . . . . . . . . . . . 43

First, a Little History . . . . . . . . . . . . . . .
Helping Readers Navigate with Bold and Italic . .
Underlining, Monospace, and Other Text Changes
Specifying Font Sizes, Colors, and Faces . . . .
Applying Logical Styles . . . . . . . . . . . . .
Putting It All Together . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . .

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

.
.
.
.
.
.
.

.
.
.
.
.
.

.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.

.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

44
44
46
49
52
54

56

Chapter 4: Moving into the 21st Century with Cascading Style Sheets . . . . . 57

Types of CSS . . . . . . . . . . . . .
Inline CSS . . . . . . . . . . . . .
One definition, many references . .
Sharing a single style sheet . . . . .
The Components of CSS . . . . . . .
Classes and IDs . . . . . . . . . . .
Subclasses . . . . . . . . . . . . .
Adding comments within CSS . . .
Compatible style blocks . . . . . .
Text Formatting with CSS . . . . . . .
Bold text . . . . . . . . . . . . . .
Italics . . . . . . . . . . . . . . . .
Changing Font Family, Size, and Color
Typefaces and monospace . . . . .
Changing font size . . . . . . . . .
The color of text . . . . . . . . . .
Additional Neato Text Tricks in CSS . .
Small capitals . . . . . . . . . . . .
Stretching or squishing letter spacing
Stretching or squishing words . . . .
Changing line height . . . . . . . .
Text alignment . . . . . . . . . . .
Vertical text alignment . . . . . . .
Text decorations . . . . . . . . . .
Changing text case . . . . . . . . .
Putting it all together . . . . . . . .

Summary . . . . . . . . . . . . . . .

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

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

.
.

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

.
.
.
.

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

.
.
.
.
.
.

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

.
.
.
.
.
.
.
.

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

.
.
.
.
.
.
.
.
.
.

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

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

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

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

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

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

.
.
.
.
.
.
.
.
.
.
.

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

.
.
.
.
.
.
.
.
.

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

.
.
.
.
.
.
.

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

.
.
.
.
.

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

.
.
.

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

.

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

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

.
.

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

.
.
.
.

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

.
.
.
.
.
.

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

.
.
.
.
.
.
.
.

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

.
.
.
.
.
.
.
.
.
.

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

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

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

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

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

58
58
59
62
62
63
64
65
65
66
66
66
67
67
69
70

71
71
72
73
73
74
74
75
76
76
80

Ł
xix

Contents

Chapter 5: Lists and Special Characters . . . . . . . . . . . . . . . . . . . . 81
Definition Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Good list, bad list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Unordered (Bulleted) Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Ordered (Numbered) Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
List Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Bullet shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
CSS control over lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Counting the CSS way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
List-style shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Character Entities in HTML Documents . . . . . . . . . . . . . . . . . . . . . . . . 96
Nonbreaking Spaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Comments within HTML Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Chapter 6: Putting the Web in World Wide Web: Adding Pointers and Links . . . 103

Pointing to Other Web Pages . . . . . . . . . . . .
Referencing Non-Web Information . . . . . . . . .
Referencing Internal Documents with Relative URLs
Organizing a Web Site . . . . . . . . . . . . . . .
Defining Web Document Jump Targets . . . . . . .
Adding Jump Links to Your Web Pages . . . . . . .
Jumping into organized lists . . . . . . . . . . .
Linking to jump targets in external documents .
Changing Link Colors . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.

.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

103
106
108
109
113
114
117

119
119
120

Chapter 7: From Dull to Cool by Adding Graphics . . . . . . . . . . . . . . 121
Image Formats . . . . . . . . . . . . . . . .
Including Images in Web Pages . . . . . . . .
Text Alternatives for Text-Based Web Browsers
Image Alignment Options . . . . . . . . . . .
Standard alignment . . . . . . . . . . . . .
More sophisticated alignment . . . . . . . .
Background Colors and Graphics . . . . . . .
Where Can You Find Images? . . . . . . . . .
Creating your own . . . . . . . . . . . . . .
Clip art or canned image libraries? . . . . .
Scanned or digital photographs . . . . . . .
Working with digital photographs . . . . . .
Grabbing images off the Net . . . . . . . .
Art today . . . . . . . . . . . . . . . . .
The shock zone . . . . . . . . . . . . . .
But wait! There’s more . . . . . . . . . . .
Transparent Colors . . . . . . . . . . . . . . .
Animated GIF images . . . . . . . . . . . . .
Image-Mapped Graphics . . . . . . . . . . . .
Building an image map . . . . . . . . . . .

.
.
.
.

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

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

.
.
.
.
.
.
.

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

.

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

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

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

.

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

.
.
.
.
.
.
.

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

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

.
.
.
.

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

.
.
.
.

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

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

.
.
.
.
.
.
.

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

.

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

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

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

.

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

.
.
.
.
.
.
.

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

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

.
.
.
.

122
123
127
128
129
130
136
140
140
141
142
144
146
146
146
147
147
149
149
150

Ł
xx

Contents
Audio, Video, and Other Media
Movies all night . . . . . .
Streaming audio and video
Summary . . . . . . . . . .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

Part II: Rockin’ Page Design Strategies

153
154

154
156

157

Chapter 8: Tables and Frames . . . . . . . . . . . . . . . . . . . . . . . . . 159
Organizing Information in Tables . . . . . . . . . .
Basic table formatting . . . . . . . . . . . . . .
Advanced table formatting . . . . . . . . . . .
Table attributes that aren’t 100 percent portable
Modifying edges and grid lines . . . . . . . . .
Tricks with Table Layouts . . . . . . . . . . . . .
Tables within tables . . . . . . . . . . . . . . .
Grouping table elements for faster rendering . .
Grouping tables to speed up display . . . . . . .
Pages within Pages: Frames . . . . . . . . . . . .
The basics of frames . . . . . . . . . . . . . .
Specifying frame panes and sizes . . . . . . . .
More fun with frames . . . . . . . . . . . . . .
Inline Frames . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

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

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

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

.
.
.

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

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

.

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

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

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

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

.
.

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

Chapter 9: Forms, User Input, and the Common Gateway Interface
An Introduction to HTML Forms . . . . . .
Asking for feedback on your site . . . .
Adding drop-down lists and radio buttons
Tweaking the select element . . . . . .
Fancy Form Formatting . . . . . . . . . .
Easy Searching from Your Page . . . . . .
Another Look at Hidden Variables . . . . .
How CGI Scripts Work . . . . . . . . . . .
The world’s simplest CGI example . . . .
Sending information via the environment

Sending and reading data . . . . . . . .
Receiving information from forms . . . .
Learning more about CGI programming .
Summary . . . . . . . . . . . . . . . . .

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

.
.
.
.
.
.
.
.
.
.

.
.
.
.

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

.
.
.
.
.
.
.
.
.
.

.
.
.
.

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

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.

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

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

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

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

159
160
165
168
169
171
171
176
177
181
181
183
189
190
193

. . . . . 195

.

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

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

.

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

196
198
200
201
204
206
208
210
211
213
214
215
216
217

Chapter 10: Advanced Form Design . . . . . . . . . . . . . . . . . . . . . 219

The button Input Type . . . . . . .
Using Labels to Organize User Focus
Dividing Forms into Fieldsets . . .
Tab Key Control on Input . . . . . .
The accesskey Attribute . . . . . .
Disabled and Read-Only Elements .
Summary . . . . . . . . . . . . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.

.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.

.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.

.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.

.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

220
222

224
228
230
231
233

Ł
xxi

Contents

Chapter 11: Activating Your Pages with JavaScript . . . . . . . . . . . . . . 235
An Overview of JavaScript . . . . . . . . . . .
Variables . . . . . . . . . . . . . . . . . .
Where do you put JavaScript? . . . . . . . .
Events . . . . . . . . . . . . . . . . . . . .
Expressions . . . . . . . . . . . . . . . . .
Looping mechanisms . . . . . . . . . . . .
Subroutines, built-in and user-defined . . . .
Built-in functions . . . . . . . . . . . . .
Testing Browser Compatibility . . . . . . . . .
Graphical Rollovers . . . . . . . . . . . . . .
Creating a new image container . . . . . . .
Assigning a URL to the new image container
Changing values on the fly . . . . . . . . .
Telling the time . . . . . . . . . . . . . . .
Time of day, the friendly version . . . . . . .
Locale-specific date and time . . . . . . . .
A built-in clock . . . . . . . . . . . . . . .

Testing Form Values . . . . . . . . . . . . . .
Creating a test condition . . . . . . . . . . .
A Temperature Converter . . . . . . . . . . .
Other Scripting Solutions . . . . . . . . . . . .
Visual Basic Script . . . . . . . . . . . . . .
Java . . . . . . . . . . . . . . . . . . . . .
Referencing Java applets . . . . . . . . .
Online Java applets . . . . . . . . . . .
ActiveX . . . . . . . . . . . . . . . . . . .
XSLT . . . . . . . . . . . . . . . . . . . .
Flash . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . .

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

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

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

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

236
236
237
237
238
239
240
240
241
243
244
244
245
248
249
249
250

251
252
254
255
255
256
257
257
257
258
259
260

Chapter 12: Advanced Cascading Style Sheets . . . . . . . . . . . . . . . . 261
Boxes and Containers . . . . . .
The Different Parts of a Container
Margins . . . . . . . . . . . .
Borders . . . . . . . . . . . .
Multiple value options . . .
Border-style values . . . . .
Padding . . . . . . . . . . . .
Container Dimensions . . . . . .
Setting the container height . .
Text and container flow . . . .
Container Positioning . . . . . . .
Absolute positioning . . . . . .
Relative positioning . . . . . .

.
.

.
.
.
.
.
.
.
.
.
.
.

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

.
.
.
.

.
.
.
.
.
.
.
.
.

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

.
.
.
.
.
.

.
.
.
.
.
.
.

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

.
.
.
.
.
.
.
.

.
.
.
.
.

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

.
.
.
.
.
.
.
.
.
.

.
.
.

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

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

.

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

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

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

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

.
.

.
.
.
.
.
.
.
.
.
.
.

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

.
.
.
.

.
.
.
.
.
.
.
.
.

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

.
.
.
.
.
.

.
.
.
.
.
.
.

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

.
.
.
.
.
.
.
.

.
.
.
.
.

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

.
.
.
.
.
.
.
.
.
.

.
.
.

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

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

.

261
263
263
265
266
267
269
271
272
273
274
275
276

Ł
xxii

Contents
So what’s the point? . . . . . . . . . . . . . .
Fixed positioning . . . . . . . . . . . . . . .
Hide Containers with the Visibility: Attribute . . .
Controlling visibility with JavaScript . . . . . .
The display: attribute controls visibility and flow
Stacking: Using z-indexes for a 3D page . . .
Using JavaScript to change z-index values . .
Summary . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.

277
278
279
280
283
286
287
291

Chapter 13: Site Development with Weblogs . . . . . . . . . . . . . . . . . 293
What Is a Weblog? . . . . . . .
Working with a Weblog . . . . .
Installing a weblog . . . . . .
Configuring a weblog . . . .
Adding a weblog entry . . .
The World of RSS . . . . . . .
Creating Valid XML / RSS Feeds
Validating an RSS feed . . .

Exploring further . . . . . .
Summary . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

Part III: Expanding Your Page into a Web Site

294
297
297
298
300
301
303
305
306
306

307

Chapter 14: Web Sites versus Web Pages . . . . . . . . . . . . . . . . . . . 309
Working with Subdirectories . . . . . . . . .
The subdirectory structure of AnswerSquad
An even bigger site: Intuitive.com . . . . .
Protecting Web Sites and Directories . . . . .
Server-Side Includes . . . . . . . . . . . . .
Useful server-side include options . . . . .
config . . . . . . . . . . . . . . . . . .
include . . . . . . . . . . . . . . . . .
echo . . . . . . . . . . . . . . . . . .
fsize . . . . . . . . . . . . . . . . . .
flastmod . . . . . . . . . . . . . . . .
exec . . . . . . . . . . . . . . . . . .
SSI environment variables . . . . . . . . .

Building a Web site using SSI . . . . . . .
Summary . . . . . . . . . . . . . . . . . .

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

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

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

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.

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

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

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

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

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

.
.
.

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

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

.

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

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

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

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

.
.

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

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

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

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.

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

309
311
311
313
316
317
317

317
317
318
318
318
319
321
322

Chapter 15: Thinking about Your Visitors and Your Site’s Usability . . . . . . 323

What Makes a Site Usable? . . . . .
Amount of information presented
Organize information on the page
Standardize the screen layout . .
Presentation of text and graphics
Choice and uses of color . . . .

.
.
.
.
.
.

.
.
.
.
.