The Complete Idiot's Guide to Creating a Web Page (5th Edition)

409 Pages·2002·8.36 MB·English

Creating a
Web Page
Fifth Edition
by Paul McFedries
A Pearson Education Company
Copyright © 2002 by Pearson Education, Inc.
All rights reserved. No part of this book shall be reproduced, stored in a retrieval
system, or transmitted by any means, electronic, mechanical, photocopying, re-
cording, or otherwise, without written permission from the publisher. No patent
liability is assumed with respect to the use of the information contained herein.
Although every precaution has been taken in the preparation of this book, the pub-
lisher and author assume no responsibility for errors or omissions. Neither is any
liability assumed for damages resulting from the use of information contained
herein. For information, address Alpha Books, 201 West 103rd Street, Indianapolis,
IN 46290.
THE COMPLETE IDIOT’S GUIDE TO and Design are registered trademarks
of Pearson Education, Inc.
International Standard Book Number: 0-02-864316-X
Library of Congress Catalog Card Number: 2001099416
04 03 02 8 7 6 5 4 3 2 1
Interpretation of the printing code: The rightmost number of the first series of
numbers is the year of the book’s printing; the rightmost number of the second
series of numbers is the number of the book’s printing. For example, a printing
code of 02-1 shows that the first printing occurred in 2002.
Printed in the United States of America
Note:This publication contains the opinions and ideas of its author. It is intended
to provide helpful and informative material on the subject matter covered. It is sold
with the understanding that the author and publisher are not engaged in rendering
professional services in the book. If the reader requires personal assistance or
advice, a competent professional should be consulted.
The author and publisher specifically disclaim any responsibility for any liability,
loss, or risk, personal or otherwise, which is incurred as a consequence, directly or
indirectly, of the use and application of any of the contents of this book.
Publisher:Marie Butler-Knight
Product Manager: Phil Kitchel
Managing Editor: Jennifer Chisholm
Acquisitions Editor: Eric Heagy
Development Editor: Clint McCarty
Production Editor: Katherin Bidwell
Copy Editor: Susan Aufheimer
Technical Editor: Don Passenger
Illustrator:Chris Eliopoulos
Cover/Book Designer: Trina Wurst
Indexer:Tonya Heard
Layout/Proofreading:Gloria Schurick, Kimberly Tucker
Contents at a Glance
Part 1: Creating Your First Web Page 1
1 A Brief HTML Primer 3
HTML? Hard? Hah! Here’s proof.
2 Laying the Foundation: The Basic Structure of a Web Page 15
Pouring the concrete for that dream home page you’ve always wanted to build.
3 From Buck-Naked to Beautiful: Dressing Up Your Page 29
HTML fashion tips that’ll turn your web page into a real looker!
4 The Gist of a List: Adding Lists to Your Page 47
Compulsive list-makers will be happy to know that HTML includes
no less than three types of lists. This chapter takes you through the tags.
5 Making the Jump to Hyperspace: Adding Links 59
A web page without links is like a room without windows. This chapter
shows you how to keep your pages from becoming claustrophobic.
6 A Picture Is Worth a Thousand Clicks: Working with Images 69
Image is, apparently, everything, so this chapter shows you
how to give your pages that graphic touch.
7 The Host with the Most: Choosing a Web Hosting Provider 85
Who can you possibly trust to serve your precious pages out to the public?
This chapter will help you decide.
8 Publish or Perish: Putting Your Page on the Web 95
Now, at long last, you get to foist your web page masterpiece on an
unsuspecting world.
Part 2: A Grab Bag of Web Page Wonders 109
9 Images Can Be Links, Too 111
The quick pic click shtick: how to turn an image into a hypertext link.
10 Table Talk: Adding Tables to Your Page 123
Complete coverage of the HTML tags that enable you to turn the
tables on your web pages.
11 Making Your Web Pages Dance and Sing 139
Animations, sounds, video, and other multimedia marvels.
12 Need Feedback? Create a Form! 149
This chapter shows you how to slap up a form for feedback, back talk,
replies, responses, retorts, or rejoinders.
13 Fooling Around with Frames 167
The Compartment Department: How to divide the browser window
into separate areas, each with its own web page!
Part 3: High HTML Style: Working with Style Sheets 181
14 A Beginner’s Guide to Style Sheets 183
Style sheets are rapidly redefining how folks design web pages.
This chapter shows you what all the fuss is about.
15 Sheet Music: Styles for Fonts, Colors, and Backgrounds 195
Using style sheets to make page formatting ridiculously easy
(and to perform a few new formatting tricks).
16 The Box Model: Styles for Dimensions, Borders, Margins,
and More 211
Lots more style sheet shenanigans to keep you busy.
Part 4: Working with JavaScripts and Java Applets 225
17 The Programmable Page: Adding JavaScripts to Your Pages 227
Learn what this JavaScript stuff is all about and how to add scripts
to your pages.
18 More JavaScript Fun 243
A fistful of scripts to put your pages into a higher gear.
19 Caffeinating Your Pages: Adding Java Applets 259
How to give your web pages a jolt by adding Java applets.
Part 5: Rounding Out Your HTML Education 267
20 Web Page Doodads You Should Know About 269
How to add nifty page perks such as a search feature, chat room,
or bulletin board.
21 The Elements of Web Page Style 281
A truckload of HTML do’s and don’ts to make sure you always put
your best web foot forward.
22 Some HTML Resources on the Web 297
Billions of web locales for graphics, style guides, and lots more.
Part 6: Show Me the Money: Turning Your HTML Skills Into Cash 309
23 Turning Pro: Becoming a Paid Web Designer 311
Everything you need to know to become a professional web designer.
24 Joint Ventures: Working with Ads and Affiliate Programs 321
Tips and techniques for making money from bannerads and affiliate
programs.
25 Selling Stuff Online 333
A primer on setting up your site to do the e-commerce thing.
Appendixes
A Speak Like a Geek Glossary 343
A crash course in techno-babble.
B Frequently Asked Questions About HTML 353
A long list of common HTML posers, conundrums, stumpers,
and mysteries (and, of course, their answers).
C The CD: The Webmaster’s Toolkit 367
Descriptions of the resources, examples, and programs that
have been stuffed onto the CD.
Index 375
Contents
Part 1: Creating Your First Web Page 1
1 A Brief HTML Primer 3
Okay, so just what is HTML? ........................................................................3
What can you do with HTML? ....................................................................5
You can format text. ....................................................................................5
You can create lists of things. ........................................................................6
You can set up links to other pages. ................................................................6
You can insert images. ..................................................................................7
You can format information in tables. ............................................................7
Pages from All Walks of Web Life ................................................................8
The Personal Touch: Personal Home Pages ....................................................8
Hobbyists do it themselves with HTML. ........................................................9
Not for Bathroom Reading: Electronic Magazines ......................................10
Corporate culture hits the web. ....................................................................11
Helping Hands: Government and Public Service Pages ..............................12
From Student to Savant: Professional Web Designers ..................................13
2 Laying the Foundation: The Basic Structure of a Web Page 15
Getting Started ............................................................................................16
First, crank out a new text file. ..................................................................16
Notes About Saving HTML Files ..............................................................17
The Edit-Save-Browse Cycle ......................................................................18
Tag Daze—Understanding HTML’s Tags ..................................................20
And Now, Some Actual HTML ..................................................................20
A Page by Any Other Name: Adding a Title ..............................................22
The <TITLE> Tag ....................................................................................22
Title Do’s and Don’ts ..................................................................................23
Fleshing Out Your Page with Text ..............................................................23
How to Do Paragraphs ................................................................................24
Help! The browser shows my tags! ............................................................25
3 From Buck-Naked to Beautiful: Dressing Up Your Page 29
Sprucing Up Your Text ................................................................................30
Some Basic Text Formatting Styles..............................................................30
Combining Text Formats ............................................................................32
Accessorizing: Displaying Special Characters ..............................................32
A Few Formatting Features You’ll Use All the Time ................................33
Sectioning Your Page with Headings ..........................................................34
Aligning Paragraphs ..................................................................................35
Handling Preformatted Text ......................................................................36
Them’s the Breaks: Using <BR> for Line Breaks ........................................38
Inserting Horizontal Lines ..........................................................................39
vi The Complete Idiot’s Guide to Creating a Web Page, Fifth Edition
Textras: Fancier Text Formatting ................................................................40
The <FONT> Tag, Part I: Changing the Size of Text ................................40
The <BASEFONT> Tag ............................................................................41
The <FONT> Tag, Part II: Changing the Typeface ....................................42
Some Notes About Working with Colors ......................................................43
Changing the Color of Your Page Text ........................................................45
Changing the Color of Your Links................................................................45
The <FONT> Tag, Part III: Another Way to Change
Text Color ................................................................................................45
4 The Gist of a List: Adding Lists to Your Page 47
Putting Your Affairs in Order with Numbered Lists ..................................48
Using a Different Numbering Scheme ........................................................50
Scoring Points with Bulleted Lists ..............................................................52
Changing the Bullet Type............................................................................53
Defining Definition Lists ............................................................................54
Combining Lists Inside Lists ......................................................................56
5 Making the Jump to Hyperspace: Adding Links 59
The URL of Net: A Cyberspace Address Primer ......................................60
Getting Hyper: Creating Links in HTML ................................................62
Site Organization: Dealing with Directories................................................63
Anchors Aweigh: Internal Links ................................................................64
Creating an E-mail Link ..............................................................................66
6 A Picture Is Worth a Thousand Clicks: Working with Images 69
Images: Some Semi-Important Background Info........................................70
No, images aren’t text, but that’s okay.........................................................70
Graphics formats:Can’t we all just get along?..............................................70
How do I get graphics?................................................................................71
Converting Graphics to GIF or JPEG ........................................................73
The Nitty-Gritty at Last:The <IMG> Tag ................................................74
Help! The #%@*&! browser won’t display my images! ................................75
Specifying Image Height and Width............................................................76
Aligning Text and Images............................................................................77
Handling Graphically Challenged Text Browsers..........................................79
SeparatingText and Images..........................................................................79
Good Uses for Images on Your Web Page..................................................80
Changing the Page Background....................................................................80
Using a Color as the Background ................................................................81
Using an Image as the Background..............................................................81
A Special Image:The Pixel Shim (spacer.gif)..............................................82
Giving a GIF a Transparent Background ....................................................82
7 The Host with the Most: Choosing a Web Hosting Provider 85
What in the name of Sam Hill is a web hosting provider? ........................86
Use your existing Internet provider. ............................................................86
Try to find a free hosting provider. ..............................................................87
Sign up with a commercial hosting provider. ..............................................87
Contents vii
A Buyer’s Guide to Web Hosting ................................................................87
A List of Lists: Sites That Offer Lists of Web Hosts ................................91
Lists of Free Web Hosts ..............................................................................91
Lists of Commercial Web Hosts ..................................................................92
8 Publish or Perish: Putting Your Page on the Web 95
What does your web home look like? ..........................................................96
The Relationship Between Your Directory and Your
Web Address ............................................................................................96
Making Your Hard Disk and Your Web Home Mirror
Images of Each Other ..............................................................................97
A Pre-Trip Checklist ....................................................................................98
Okay, ship it! ..............................................................................................100
Adding Your Web Host’s FTP Site ............................................................100
Sending the Files via FTP ........................................................................101
Creating a New Directory ........................................................................103
Making Changes to Your Web Files ..........................................................104
“Hey, I’m over here!” Getting Your Site on the Search Engines ............104
Submitting Your Site ................................................................................105
Using the <META> Tag to Make Search Engines Notice Your Site ..........106
Tips for Composing Search Engine-Friendly <META> Tags ......................106
Part 2: A Grab Bag of Web Page Wonders 109
9 Images Can Be Links, Too 111
Turning an Image into a Link ....................................................................111
Why should I use an image as a link? ........................................................113
Example 1: A Web Page Toolbar ..............................................................113
Example 2: Navigation Buttons ................................................................114
Example 3: Creating Image Thumbnails ..................................................115
The Ins and Outs of Image Links ..............................................................116
Images can be maps, too. ............................................................................117
Step 1: Determine the Map Coordinates ..................................................118
Step 2: Use <MAP> to Define the Image Map..........................................119
Step 3: Add the Image Map to Your Web Page ..........................................120
10 Table Talk: Adding Tables to Your Page 123
What is a table? ..........................................................................................124
Web Woodworking: How to Build a Table ..............................................125
The Simplest Case: A One-Row Table ......................................................125
Adding More Rows ..................................................................................127
Creating a Row of Headers ......................................................................127
Including a Caption ..................................................................................128
Table Refinishing—More Table Tidbits ....................................................128
Aligning Text Within Cells ......................................................................129
Spanning Text Across Multiple Rows or Columns ......................................130
A Whack of Table Attributes ....................................................................132
Using a Table to Set Up a Page with a Margin ........................................136
viii The Complete Idiot’s Guide to Creating a Web Page, Fifth Edition
11 Making Your Web Pages Dance and Sing 139
Sound Advice: Adding Sounds to Your Page ............................................140
First, Some Mumbo Jumbo About Sound Formats ....................................140
Sounding Off with Sound Links ..............................................................141
Embedding Sound Files ............................................................................141
Another Way to Add a Background Sound ................................................142
Do-It-Yourself Disney: Animated GIF Images ........................................142
Creating a Marquee ....................................................................................145
Redirecting Browsers with Client Pull ......................................................146
12 Need Feedback? Create a Form! 149
What is a form, anyway? ............................................................................150
Creating a Form ........................................................................................150
Making It Go: The Submit Button ..........................................................151
Starting Over: The Reset Button ..............................................................153
Using Text Boxes for Single-Line Text ......................................................153
Using Text Areas for Multiline Text ..........................................................156
Toggling an Option On and Off with Check Boxes ................................157
Multiple Choice Options: Radio Buttons ..................................................159
Selecting from Lists ..................................................................................161
Oh say, can you CGI? ................................................................................163
A Service Exclusively for Readers ..............................................................163
Ask your provider. ....................................................................................163
The CGI-Joe Route ..................................................................................163
Check out the web’s CGI resources. ............................................................164
13 Fooling Around with Frames 167
What’s with all the frame fuss? ..................................................................168
Forging a Frameset Page ............................................................................170
The Basic Frame Tags ..............................................................................170
Dividing the Screen Horizontally ..............................................................171
Dividing the Screen Vertically ..................................................................172
Filling the Frames with Content Pages ....................................................173
Teaching Frames and Links to Get Along ................................................174
Ready-Made Names for Frames ................................................................176
Specifying a Default Target ......................................................................176
Frame Frills and Frippery ..........................................................................176
Handling Frame-Feeble Browsers ............................................................177
Fancier Frames ..........................................................................................178
Part 3: High HTML Style: Working with Style Sheets 181
14 A Beginner’s Guide to Style Sheets 183
What’s a style, and what’s a sheet? ............................................................183
Styles in the Web Universe ......................................................................184
Sheets: Collections of Styles ........................................................................187
What About Browser Support? ..................................................................187
Some Style Basics ......................................................................................187
Contents ix
Three Sheets to the Web: Style Sheets and HTML ................................188
Method #1: The <STYLE> Tag ................................................................188
Method #2: Linking to an External Style Sheet ........................................189
Method #3: Inline Styles ..........................................................................190
Applying a Style to a Section ....................................................................191
Applying a Style to a Word or Phrase ........................................................192
Working with Style Classes ......................................................................192
15 Sheet Music: Styles for Fonts, Colors, and Backgrounds 195
Using Styles to Control Fonts ..................................................................196
Font Size Styles ........................................................................................196
Font Family (Typeface) Styles ..................................................................197
Font Weight Styles (Bolding) ....................................................................200
Font Style Styles (Italics) ..........................................................................201
Textstyles: More Ways to Format Text ......................................................202
Indenting the First Line of a Paragraph....................................................202
Aligning Text ..........................................................................................203
Using the Text Decoration Styles ..............................................................205
Working with Uppercase and Lowercase Letters..........................................206
Coloring Your Web World with Color Styles ..........................................207
Using Background Styles ..........................................................................207
16 The Box Model: Styles for Dimensions, Borders, Margins, and More 211
Thinking Outside the Box: Understanding the Box Model ....................212
Box Blueprints: Specifying the Dimensions ..............................................213
Cushy Content: Adding Padding to the Inside of the Box ......................214
The Box Revealed: Setting Borders ..........................................................216
Room to Breathe: Specifying Margins Around the Box ..........................219
Where the Box Goes: Working with Position Styles ................................221
Positioning In the Third Dimension ..........................................................222
Part 4: Working with JavaScripts and Java Applets 225
17 The Programmable Page: Adding JavaScripts to Your Pages 227
Using the <SCRIPT> Tag ..........................................................................228
Inserting the Script ..................................................................................229
Using an External JavaScript File............................................................229
Some JavaScript Examples ........................................................................230
Displaying a Message to the User ..............................................................230
Writing Data to the Page..........................................................................231
Hiding Your E-mail Address from a Spam Crawler ..................................233
Putting the Date and Time Into a Page ....................................................234
Understanding JavaScript Functions ........................................................237
Displaying Messages in the Status Bar ......................................................238
Detecting the User’s Browser ....................................................................240