Absolute beginner's guide to creating web pages

Absolute

Beginner’s

Guide

to

Creating Web

Pages,

Second Edition

201 West 103rd Street,

Indianapolis, Indiana 46290

Todd Stauffer

00 8958 fm 10/8/02 8:11 AM Page i

Absolute Beginner’s Guide to Creating Web

Pages, Second Edition

Copyright  2003 by Que Publishing

All rights reserved. No part of this book shall be reproduced, stored in a

retrieval system, or transmitted by any means, electronic, mechanical, pho￾tocopying, recording, 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 publisher and author assume no

responsibility for errors or omissions. Nor is any liability assumed for dam￾ages resulting from the use of the information contained herein.

International Standard Book Number: 0-7897-2895-9

Library of Congress Catalog Card Number: 2002113847

Printed in the United States of America

First Printing: November 2002

04 04 03 02 4 3 2 1

Trademarks

All terms mentioned in this book that are known to be trademarks or ser￾vice marks have been appropriately capitalized. Que cannot attest to the

accuracy of this information. Use of a term in this book should not be

regarded as affecting the validity of any trademark or service mark.

Warning and Disclaimer

Every effort has been made to make this book as complete and as accu￾rate as possible, but no warranty or fitness is implied. The information pro￾vided is on an “as is” basis. The author and the publisher shall have

neither liability nor responsibility to any person or entity with respect to

any loss or damages arising from the information contained in this book.

Publisher

Dave Culverwell

Executive Editor

Candace Hall

Acquisitions Editor

Candace Hall

Development

Editor

Sean Medlock

Managing Editor

Thomas Hayes

Project Editor

Tricia Liebig

Copy Editors

Candice Hightower

Sossity Smith

Indexer

Mandie Frank

Proofreaders

Juli Cook

Kellie Cotner

Technical Editor

Lindy Humphreys

Team Coordinator

Cindy Teeters

Interior Designer

Anne Jones

Cover Designer

Anne Jones

Page Layout

Michelle Mitchell

00 8958 fm 10/8/02 8:11 AM Page ii

Contents at a Glance

Introduction 1

Part I Creating Web Pages 7

1 The Fundamentals of Web

Publishing 9

2 A Crash-Course in Web Design

25

3 What You Need to Get Started

41

4 Creating Your First Page 59

Part II Design and Conquer 75

5 Formatting Your Text 77

6 Visual Stimulus—Adding Graphics

97

7 Building Hypertext Links 115

8 Table Basics 131

9 Advanced Table Elements and

Table Design 145

10 Get Splashy: Style Sheets, Fonts,

and Special Characters 175

11 Advanced Web Images and

Imagemaps 203

Part III Building Your Site 217

12 Creating Sites with HTML Frames

219

13 Adding Multimedia and Java

Content 237

14 Site-Wide Styles: Design,

Accessibility, and

Internationalization 257

Part IV Interacting with Your Users

271

15 Adding HTML Forms 273

16 CGIs and Data Gathering 303

17 Forums, Chats, and Other

Add-Ons 319

Index 337

00 8958 fm 10/8/02 8:11 AM Page iii

00 8958 fm 10/8/02 8:11 AM Page iv

Table of Contents

Introduction 1

I Creating Web Pages

1 The Fundamentals of Web Publishing 9

How the Web Works 10

What Is HTTP? 11

What Is HTML? 12

Hypertext and Hyperlinks 13

Uniform Resource Locators 14

The Different Protocols for URLs 15

HTML Versus XHTML 16

Who Sets HTML Standards? 16

Why a New Standard? 17

Which Should You Use? 18

HTML Is Not Programming 18

Markup Fundamentals 19

Decorating with Style Sheets 20

Adding Scripts to the Mix 21

Summary 22

2 A Crash-Course in Web Design 25

The Fundamentals of Page Design 26

Web Design Theory 26

Organizing Your Page 27

Images and Multimedia 29

Interactivity and Scripting 31

What Good Pages Look Like 32

Planning a Site 33

Considering Your Audience 34

Organizing the Site 36

Design Ease and Consistency 38

HTML Trends and Issues 38

Accessibility 39

Internationalization 39

Browser Compatibility 40

Summary 40

3 What You Need to Get Started 41

The Basic Tools 41

Text Editors 43

HTML Editors 44

Other Tools You’ll Want 46

Graphics Editors 46

Animation Tools 47

Multimedia Tools 47

Scripting Resources 48

Finding a Web Server 48

What Is a Web Server? 49

Dealing with an ISP 49

What Software Does Your Server Run?

51

Accessing Your Web Server Space 52

Organizing a Web Site’s Files 53

Types of File Organization 53

Creating the Hierarchy 55

Naming Your Files 55

Updating Your Web Site 56

Summary 58

4 Creating Your First Page 59

Build Your HTML Template 59

Add Document Elements 60

The DTD 61

00 8958 fm 10/8/02 8:11 AM Page v

vi ABSOLUTE BEGINNER’S GUIDE TO CREATING WEB PAGES, SECOND EDITION

The comment Element 63

Create an HTML Template 63

The Document Head 64

Your Web Page’s Title 65

The <base> Element 65

The <meta> Element 66

The Body Section 67

Entering Paragraph Text 68

The <br /> Element 70

Saving, Testing, and Validating 71

Saving Your Page 71

Testing Your Page 72

Validating the Page 73

Summary 74

II Design and Conquer

5 Formatting Your Text 77

Organize the Page 77

Add Headings 78

Horizontal Lines 79

Styling Your Text 80

Physical Style Elements 81

Logical Style Elements 82

Paragraph Style Elements 85

The <pre> Element 85

Using <pre> for Tables 86

The <blockquote> Element 88

The <address> Element 89

Marking Changes: <ins> and <del> 90

Using Lists on Your Web Page 91

Ordered and Unordered Lists 92

Definition Lists 94

Summary 96

6 Visual Stimulus—Adding Graphics 97

Images on the Web 98

What Images Can You Use? 99

What Images Should You Use? 100

Creating and Translating Web Images 101

Using Paint Shop Pro 102

Using GraphicConverter 105

The <img /> Element 108

Alternative Text 109

Aligning Text and Images 110

Right- and Left-Aligning Images 111

Width and Height 112

Summary 113

7 Building Hypertext Links 115

How Hyperlinks Work 115

The Uniform Resource Locator 116

Relative Versus Absolute URLs 116

The <base> Element 119

Creating Links 120

Linking on the Same Page 121

Building Links Using Images 122

Using Special Links 123

Creating a mailto: Link 124

Creating a Link to an FTP Site 125

Gopher Servers 126

Link to Newsgroups 127

Links to Telnet Servers 127

Cool Tricks: Targets and Client-Pull 128

Open a New Window 128

Changing Pages Automatically 129

Summary 130

00 8958 fm 10/8/02 8:11 AM Page vi

8 Table Basics 131

Creating a Table 131

The <table> Element 132

Captions and Summaries 134

Table Rows 135

Table Cell Elements 136

Changing a Cell’s Span 138

Cell and Row Colors 139

Additional Table Attributes 140

The width Attribute 140

The border and align Attributes 141

The cellpadding and cellspacing

Attributes 143

Summary 144

9 Advanced Table Elements and Table

Design 145

Table Design Theory 146

Using Images in Tables 148

Nesting Tables 149

Grouping Columns and Rows 155

Table Row Groupings 155

Column Groupings 157

Frames and Rules 162

Table Design Examples 164

A Row-Centric Table 164

Focusing on Columns 168

Summary 173

10 Get Splashy: Style Sheets, Fonts, and

Special Characters 175

Style Sheets in Theory 176

What Are Style Sheets? 176

Why Use Style Sheets? 177

Understanding CSS and XHTML 178

What Style Sheets Replace 179

CONTENTS vii

Creating Style Sheets 180

The style Attribute 181

The <style> Element 181

Creating Special Classes 183

Using the <span> Element 184

Using the <div> Element 186

Linking Versus Embedding 188

Properties and Styles 189

Text Styles 189

Font Properties 190

Background and Color Properties 192

Alignment and Block Appearance

Properties 193

Styles for Links and Objects 196

First Letter and First Line 197

Special Table Styles 197

Special Characters 200

Summary 201

11 Advanced Web Images and Imagemaps

203

Making Your Images Better 204

Optimizing Web Images 204

Image Compression and Progressive

Encoding 206

Image Transparency 207

Creating Animated Images 209

Jasc Animation Shop 210

VSE Animation Maker 211

Using Imagemaps 211

Creating a Client-Side Imagemap 212

Adding usemap to <img> 212

The <map> and <area> Elements 213

Working with Server-Side Maps 216

Summary 216

00 8958 fm 10/8/02 8:11 AM Page vii

III Building Your Site

12 Creating Sites with HTML Frames 219

The Great Frames Debate 220

What Frames Are 220

What’s Wrong with Frames? 221

When Should You Use Frames? 222

Adding Frames to Your Site 223

Creating the Frameset 223

<frame> and <noframes> 225

Naming and Targeting Frames 227

Options for <frame> 229

Nesting Framesets 229

Advanced Frames 230

Special Targets and Removing Frames

231

Offering Options to Users 232

The <iframe> Element 233

Summary 235

13 Adding Multimedia and Java Content

237

Understanding Multimedia 238

Why Include Multimedia? 239

Understanding Multimedia File Types

239

Linking Versus Embedding 241

Adding Multimedia to Your Pages 243

Adding Hyperlinks 243

Embedding Multimedia 245

Embedding QuickTime 247

Windows Media Movies 250

RealMedia Movies 252

Flash Controls and Movies 254

viii ABSOLUTE BEGINNER’S GUIDE TO CREATING WEB PAGES, SECOND EDITION

Working with Java 254

Java Applets 255

Add Applets Using <object> 256

Summary 256

14 Site-Wide Styles: Design, Accessibility, and

Internationalization 257

The Site-Wide Style Sheet 258

The Basic Site 259

Planning the Styles 260

Style Sheet Power 264

Accessibility Through Style Sheets 266

International Issues 268

lang and <q> 268

Table and Block Directions 268

Summary 269

IV Interacting with Your Users

15 Adding HTML Forms 273

The Basics of HTML Forms 274

The <form> Element 275

Other <form> Attributes 276

Creating the Form 277

Text Fields and Attributes 277

The <input> Element 278

Password Entry Boxes 280

Creating Menus 285

Sample Feedback Form 288

Designing Forms Well 290

Form Design Issues 290

Line Breaks, Paragraphs, and Horizontal

Lines 291

Horizontal Lines 291

Using Paragraphs 293

00 8958 fm 10/8/02 8:11 AM Page viii

Other Elements for Form Formatting 295

Using Lists for Forms 296

Using Tables for Forms 297

Form Structure 297

Accessibility: Labels and Access Keys

300

Summary 300

16 CGIs and Data Gathering 303

What Is CGI? 304

CGI Languages 304

A Simple CGI Script 305

Referencing CGIs 306

How Scripts Work 307

Receiving Form Data 308

The mailto: Option 309

Your Script’s Output 311

Finding and Using Scripts 312

Working with Other’s Scripts 313

Creating Your Own Scripts 315

Summary 317

17 Forums, Chats, and Other Add-Ons 319

Creating and Hosting Forums 320

Forum Types and Technologies 320

Choosing a Server-Side Forum 321

Installing a Server-Side Forum 324

Hosted Forum Solutions 325

Add Live Chat to Your Site 327

Counters and Web Statistics 329

Accessing Your Web Statistics 330

Adding a Web Counter 331

Server-Side Includes 332

Summary 334

Index 337

CONTENTS ix

00 8958 fm 10/8/02 8:11 AM Page ix

About the Author

Todd Stauffer is the author or co-author of more than 25 computing books,

including HTML Web Publishing 6-in-1, HTML by Example with Ann Navarro, and

Creating Your Own AOL Web Page with Andy Shafran. Stauffer has written for a num￾ber of magazines, including Publish magazine, Silicon Alley Reporter, Working Woman,

and MacAddict.

Todd has worked as an advertising writer, technical writer, and magazine editor, all

in consumer-oriented computing. Outside of computing, he’s also a humor colum￾nist and a travel/automotive writer. You can reach him via his Web site, at

http://www.mac-upgrade.com.

Acknowledgments

I’d like to thank Todd Green and Dean Miller, who gave me the opportunity to write

this book, helped develop the outline, managed submissions, and acted as under￾standing taskmasters throughout the process. Thanks also to Tricia Liebig, Sean

Medlock, and Lindy Humphreys for their hard work on the manuscript.

Sections of this book are updated and adapted from my earlier work, HTML Web

Publishing 6-in-1, published in 1997 by Que. I’d like to thank the editorial team who

worked on that book, including Jane Brownlow, Mark Cierzniak, Kate Givens, and

Henry Wolin. The material from that book that survives in this one (a lot has

changed in Web publishing, but not everything) was developed and managed by

those great folks.

As always, thanks to Neil Salkind and the entire staff of the Studio B agency for

keeping me clothed and fed and to Donna Ladd for keeping me going strong.

00 8958 fm 10/8/02 8:11 AM Page x

Tell Us What You Think!

As the reader of this book, you are our most important critic and commentator. We

value your opinion and want to know what we’re doing right, what we could do bet￾ter, what areas you’d like to see us publish in, and any other words of wisdom you’re

willing to pass our way.

As an Associate Publisher for Que, I welcome your comments. You can fax, email, or

write me directly to let me know what you did or didn’t like about this book—as well

as what we can do to make our books stronger.

Please note that I cannot help you with technical problems related to the topic of this book,

and that due to the high volume of mail I receive, I might not be able to reply to every

message.

When you write, please be sure to include this book’s title and author as well as your

name and phone or fax number. I will carefully review your comments and share

them with the author and editors who worked on the book.

Fax: 317-581-4666

Email: [email protected]

Mail: Associate Publisher

Que Publishing

201 West 103rd Street

Indianapolis, IN 46290 USA

00 8958 fm 10/8/02 8:11 AM Page xi

00 8958 fm 10/8/02 8:11 AM Page xii

INTRODUCTION

The Internet has come a long way. In fact, even if you’re only a few

months past 10 years old, you’ve seen the Internet and the World Wide

Web grow up to affect nearly every aspect of global culture—education,

commerce, politics, and entertainment. It’s been a fast change and one

that affects most of us either personally, professionally or both.

One of the results has been the need for Web publishing skills for many

knowledge workers, educators, and professionals. Hobbyists, club

members, and parents can benefit as well from knowing a little some￾thing about Web publishing. In fact, Web publishing may one day be

the “typing” of the future—nearly anyone with a secondary education

will need a firm grasp on the basics.

For now, it’s an important bullet point on many résumés as well as the

key to many plum assignments, both paid and unpaid. If you’re ready

01 8958 intro 10/8/02 8:17 AM Page 1

to put together and manage your own Web site, then it’s time to get a book on the subject and

start learning. The Absolute Beginner’s Guide to Creating Web Pages is the perfect place to start.

Is This The Book for You?

You can divide the study of Web publishing into two approaches—those that focus

on the underlying code-level technologies and those that teach the broad strokes of

Web publishing via graphical Web editors. This book is a friendly guide to the first of

these approaches, showing you how to dig into the HTML and XHTML standards to

build Web pages, manage Web sites, and augment them with further levels of com￾plexity—style sheets and scripting among them. At the end of this book, you’ll

understand many of the more complex issues involved in Web publishing, even if

you don’t have a single Web page to your name.

Let me stress, however, that this book is not for everyone. The Absolute Beginner’s

Guide to Creating Web Pages is designed to take you from basic computer literacy—

you understand how to create files and type in Windows, the Macintosh OS, or a

variant of Unix—and help you build, manage, and maintain your first Web pages

and Web sites. You’ll do this by building, chapter by chapter, an understanding of

the authoring codes (for creating Web pages), the graphical and multimedia tech￾nologies, and eventually the scripting and programming basics necessary for a fully

interactive and interesting Web site.

If you’re interested in Web publishing skills for use in your company, organization,

or education, you should find this book a great place to start. All the principles are

outlined, terms are defined, and fundamentals are explained. And that’s done with￾out the “cutesy” approach that some other beginner series can devolve into.

But I also want to be honest about the approach. If your goal is a “Web Page in a

day,” this book isn’t for you. Likewise, if you plan to begin your foray into Web pub￾lishing using a particular graphical tool, such as Macromedia Dreamweaver, I’d sug￾gest a book that specifically discusses that tool.

I believe that the approach in the Absolute Beginner’s Guide to Creating Web Pages is

the best one, because it’s still very important to understand the underlying code of

today’s Web pages to truly soak up a new skill. Although graphical tools can help,

anyone who wants to really understand Web pages and put together entire Web sites

should consider the code-level approach that is found in these pages. Fortunately,

learning XHTML, style sheets, and the like really isn’t all that tough—in my opin￾ion, a pricey Web editor can sometimes just get in your way!

2 ABSOLUTE BEGINNER’S GUIDE TO CREATING WEB PAGES, SECOND EDITION

01 8958 intro 10/8/02 8:17 AM Page 2