Learning web design, 3rd edition

www.it-ebooks.info


www.it-ebooks.info

Learning Web Design


www.it-ebooks.info


www.it-ebooks.info

Learning Web Design
Third Edition
A Beginner’s Guide to (X)HTML, Style Sheets, and Web Graphics

Jennifer Niederst Robbins

Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo


www.it-ebooks.info

Learning Web Design, Third Edition

A Beginner’s Guide to (X)HTML, Style Sheets, and Web Graphics

by Jennifer Niederst Robbins
Copyright © 2007 O’Reilly Media, Inc. All rights reserved.
Printed in the United States of America.

Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (safari.oreilly.com). For more information, contact our corporate/institutional sales department: 800-9989938 or

Editor:  Linda Laflamme
Production Editor:  Philip Dangler
Cover Designer:  Mark Paglietti
Interior Designer:  Ron Bilodeau
Print History:
March 2001:

First edition.

June 2003:

Second edition.

June 2007:

Third edition.

The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. “O’Reilly Digital Studio” and related trade dress are
trademarks of O’ReillyMedia, Inc. Photoshop, Illustrator, Dreamweaver, Elements, HomeSite, and Fireworks are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Microsoft and
Expression Web are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other
countries. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’ReillyMedia, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for
errors or omissions, or for damages resulting from the use of the information contained herein.

This book uses RepKoverTM, a durable and flexible lay-flat binding.
ISBN-10: 0-596-52752-7
ISBN-13: 978-0-596-52752-5

[C]


www.it-ebooks.info

CONTENTS
Preface

Part I

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

xiii

Getting Started

Chapter 1
Where Do I Start? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Am I Too Late? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Where Do I Start? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
What Do I Need to Learn? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Do I Need to Learn Java?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
What Do I Need to Buy? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
What You’ve Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Chapter 2
How the Web Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

The Internet Versus the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Serving Up Your Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
A Word About Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Web Page Addresses (URLs) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
The Anatomy of a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Putting It All Together. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Browser Versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

v


www.it-ebooks.info

Chapter 3
The Nature of Web Design. . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

Alternative Browsing Environments.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
User Preferences.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Different Platforms.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Connection Speed.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Browser Window Size and Monitor Resolution.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Monitor Color.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Know Your Audience. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Keeping the Big Picture in Mind.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Part II HTML Markup for Structure
Chapter 4
Creating a Simple Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(HTML Overview)

51

A Web Page, Step by Step. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Before We Begin, Launch a Text Editor.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Step 1: Start with Content.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Step 2: Give the Document Structure.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Step 3: Identify Text Elements.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Step 4: Add an Image.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Step 5: Change the Look with a Style Sheet.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
When Good Pages Go Bad.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
(X)HTML Review:  Document Structure Elements.. . . . . . . . . . . . . . . . . . . . . . . . . . 70

Chapter 5
Marking up Text.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

71

Building Blocks.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Lists.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Adding Line Breaks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
The Inline Text Element Round-up.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Generic Elements (div and span). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Some Special Characters.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Putting It All Together. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
(X)HTML Review: Text Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

vi

Contents


www.it-ebooks.info

Chapter 6
Adding Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

95

The href Attribute.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Linking to Pages on the Web.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Linking Within Your Own Site .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Targeting a New Browser Window.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Mail Links.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
(X)HTML Review:  The Anchor Element.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Chapter 7
Adding Images.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
First, a Word on Image Formats.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The img Element.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Imagemaps.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(X)HTML Review:  Image and Imagemap Elements.. . . . . . . . . . . . . . . . . . . . . .

Chapter 8
Basic Table Markup.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
How Tables Are Used.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Minimal Table Structure.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table Headers.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Spanning Cells.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cell Padding and Spacing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Captions and Summaries.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table Accessibility.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wrapping Up Tables.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(X)HTML Review:  Table Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 9
Forms.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
How Forms Work.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The form Element.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Variables and Content.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Form Accessibility Features.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Great Form Control Round-up.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Form Layout and Design.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(X)HTML Review: Forms.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

115
115
116
123
126

127

129
129
130
134
134
136
138
139
140
142
142

143
143
145
147
148
150
162
162
163
Contents

vii


www.it-ebooks.info

Chapter 10
Understanding the Standards. . . . . . . . . . . . . . . . . . . . . . .
Everything You’ve Wanted to Know About HTML But Were Afraid to Ask
Enter XHTML.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
From the Browser’s Point of View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Declaring the Document Type.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Which One Should You Use?.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Validating Your Documents.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Character Encoding.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Putting It All Together. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

165
165
169
174
174
176
177
180
181
183

Part III CSS For Presentation
Chapter 11
Cascading Style Sheets Orientation. . . . . . . . . . . . . . . .
The Benefits of CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
How Style Sheets Work.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Big Concepts.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Moving Forward with CSS.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 12
Formatting Text .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(Plus More Selectors)

The Font Properties.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Changing Text Color.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A Few More Selector Types.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Text Line Adjustments.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Underlines and Other “Decorations”.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Changing Capitalization.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Spaced Out.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Review: Font and Text Properties.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

viii

Contents

187
187
188
194
200
202

203
204
217

218
222
225
226
227
230
232


www.it-ebooks.info

Chapter 13
Colors and Backgrounds. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(Plus Even More Selectors and External Style Sheets)

Specifying Color Values.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Foreground Color.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Background Color.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Introducing.... Pseudoclass Selectors.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pseudoelement Selectors.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Background Images.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Shorthand background Property.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Finally, External Style Sheets.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Style Sheets for Print (and Other Media).. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Review:  Color and Background Properties.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 14
Thinking Inside the Box.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(Padding, Borders, and Margins)

The Element Box.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Setting the Content Dimensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Padding .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Borders.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Margins.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Assigning Display Roles.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Box Model in Review.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Review: Basic Box Properties.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 15
Floating and Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Normal Flow.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Floating . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Positioning Basics.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Relative Positioning.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Absolute Positioning.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fixed Positioning.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Review: Basic Layout Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

233
233
238
239
240
242
246
254

254
257
259
260

261
261
262
266
269
275
281
282
282
284

285
285
286
295
296
297
307
309
310

Contents

ix

www.it-ebooks.info

Chapter 16
Page Layout with CSS.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Page Layout Strategies.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fixed Layouts.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Elastic Layouts.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Page Layout Templates.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Centering a Fixed Width Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS Layouts in Review.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 17
CSS Techniques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Style Properties for Tables.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Changing List Bullets and Numbers.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Using Lists for Navigation.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Image Replacement Techniques.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS Rollovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wrapping Up Style Sheets.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Review: Table and List Properties.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

311
311
314
316
318
334

335
336

337
337
340
344
347
349
354
354
356

Part IV Creating Web Graphics
Chapter 18
Web Graphics Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Image Sources.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Meet the Formats.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Image Size and Resolution.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Working with Transparency.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Web Graphics 101 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .



Contents

359
359
362

373
377
385
385


www.it-ebooks.info

Chapter 19
Lean and Mean Web Graphics. . . . . . . . . . . . . . . . . . . . . . .
Why Optimize?.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
General Optimization Strategies.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Optimizing GIFs.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Optimizing JPEGs.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Optimizing PNGs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Optimize to File Size.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Optimization in Review.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

387
387
388
390
394
400
401
402
402

Part V From Start to Finish

Chapter 20
The Site Development Process. . . . . . . . . . . . . . . . . . . . .
1.  Conceptualize and Research. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.  Create and Organize Content.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.  Develop the “Look and Feel”.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.  Produce a Working Prototype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.  Test It. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.  Launch the Site.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.  Maintain the Site.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Development Process in Review.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 21
Getting Your Pages on the Web. . . . . . . . . . . . . . . . . . . . .
www.“YOU”.com!.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Finding Server Space.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Publishing Process. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Transferring Files with FTP.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

405
405
407
408
409
410
413
413
413
414

415
415
417
421
423
426

Contents

xi


www.it-ebooks.info

xii

Contents

Appendix A
Answers.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

427

Appendix B
CSS 2.1 Selectors.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

451

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

453


www.it-ebooks.info

PREFACE
Hello and welcome to the third edition of Learning Web Design! When I first
started writing it, I figured, “It’s just an update... I’ll just make a few tweaks
and it will be done in a jiffy.” I couldn’t have been more wrong. As it turns out,
pretty much everything about web design changed since I wrote the second
edition four years ago. Most significantly, web designers as well as browser
developers are finally abiding by the standards for writing and styling web
pages set forth by the World Wide Web Consortium (W3C). You’ll learn a lot
more about these standards throughout the book.
What it means is that using HTML markup for visual effects is out—HTML
for describing the meaning and structure of content is in. Table-based layouts
are out—style sheet-driven layouts are in. And the font element, spacer GIFs,
and other clever hacks of the past... forget about it! They’re all history.
This edition has been completely rewritten to be in compliance with the
standards and modern web design practices. The markup chapters emphasize
using HTML to describe your content accurately, not as a tool for formatting
the appearance of text. And now you will find seven chapters on Cascading
Style Sheets (CSS), where the second edition had just one.

The Companion
Web Site
Be sure to visit the companion
web site for this book at
learningwebdesign.com. It

features materials for the exercises,
downloadable articles, lists of links
from the book, updates, and other
good stuff.

But like the first two editions, this book addresses the specific needs and concerns of beginners of all backgrounds, including seasoned graphic designers,
programmers looking for a more creative outlet, office assistants, recent college graduates, work-at-home moms, and anyone else wanting to learn how
to design web sites. I’ve done my best to put the experience of sitting in my
beginner web design class into a book, with exercises and tests along the way,
so you get hands-on experience and can check your progress.
I start at square one, with answers to common beginner questions and an
explanation of how the Web works. By the end of the book, you’ll have the
skills necessary to create multicolumn CSS layouts with optimized graphic
files, and you’ll know how to get them on the Web. You can start at the very
beginning, or feel free to jump in at any point.

xiii


www.it-ebooks.info
Acknowledgments

Whether you are reading this book on your own or using it as a companion
to a web design course, I hope it gives you a good head start and that you
have fun in the process.

Acknowledgments
Conventions Used
in This Book
The following typographic

conventions are used in this book:

Italic


Used to indicate URLs, email
addresses, filenames, and
directory names, as well as for
emphasis

Colored roman text


Used for special terms that are
being defined and for crossreference.

Constant width
Used to indicate code examples
and keyboard commands
Colored constant width
Used to indicate (X)HTML tags
and attributes, and used for
emphasis in code examples.
Constant width italic
Used to indicate placeholders for
attribute and style sheet property
values.

I want to thank my editors, Brian Sawyer, Chuck Toporek, Linda Laflamme,
and Steve Weiss, for their valuable input to this new edition. A special thank

you goes to my technical reviewer, Aaron Gustafson, for his expert guidance,
generosity, and for keeping on the straight and narrow when it comes to
standards compliance.
Thanks also to the others who contributed hands-on time to the creation of
this book: Ron Bilodeau for the updated interior design, Rob Romano for the
figure production, Chris Reilley for helping me envision some of the more
complex figures, Sohaila Abdulali for copyediting, Reg Aubry for writing the
index, and everyone else who helped with the project.
Finally, I want to thank my Mom, Dad, brother Liam, and the whole Robbins
clan for their inspiration and continued support while I labored to crank
out this edition. And it pleases me greatly, Jeff and Arlo, to tell you that I am
finally done writing. Thanks for putting up with me being half there.

O’Reilly Would Like to Hear From You
Please address comments and questions concerning this book to the publisher:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international/local)
707-829-0104 (fax)
There is a web page for this book, which lists errata and additional information. You can access this page at:
/>To comment or ask technical questions about this book, send email to:

For more information about books, conferences, software, Resource Centers,
and the O’Reilly Network, see the O’Reilly web site at:


xiv

Preface


www.it-ebooks.info

GETTING STARTED

PART

I

IN THIS PART
Chapter 1
Where Do I Start?
Chapter 2
How the Web Works
Chapter 3
The Nature of Web Design


www.it-ebooks.info


www.it-ebooks.info

CHAPTER

1

WHERE DO I

START?
The Web has been around for well over a decade now, experiencing euphoric
early expansion, an economic-driven bust, an innovation-driven rebirth, and
constant evolution along the way. One thing is certain: the Web as a communication and commercial medium is here to stay.

IN THIS CHAPTER

For many people, it’s a call to action—a new career opportunity, an incentive
to keep up with competitors, or just a chance to get stuff out there for the
world to see. But the world of web design can also seem overwhelming.

What do I need to learn?

Through my experience teaching web design courses and workshops, I’ve
had the opportunity to meet people of all backgrounds who are interested in
learning how to build web pages. Allow me to introduce you to just a few:
“I’ve been a print designer for 17 years, and now all my clients want web
sites.”

Am I too late?
Where do I start?

Do I need to learn Java?
What other languages do
I need to know?
What software
and equipment do I
need to buy?

“I work as a secretary in a small office. My boss has asked me to put

together a small internal web site to share company information among
employees.”
“I’ve been a programmer for years, but I want to try my hand at more
visual design. I feel like the Web is a good opportunity to explore new
skills.”
“I am an artist and I want to know how to get samples of my paintings
and sculpture online.”
“I’m a designer who has watched all my colleagues switch to web design
in the last few years. I’m curious about it, but I feel like I may be too
late.”

Whatever the motivation, the first question is always the same: “Where do I
start?” It may seem like there is an overwhelming amount of stuff to learn and
it’s not easy to know where to jump in. But you have to start somewhere.
This chapter attempts to put the learning curve in perspective by answering
the most common questions I get asked by people ready to make the leap. It
provides an introduction to the disciplines, technologies, and tools associated
with web design.
3


www.it-ebooks.info
Am I Too Late?

Am I Too Late?
The first step is
understanding the
fundamentals of how the
Web works.

That’s an easy one—absolutely not! Although it may seem that everyone in
the whole world has a personal web page, or that your colleagues are all lightyears ahead of you in web experience, I can assure you that you’re not late.
The Web has become an essential part of standard business practice. We’re at
the point where we just assume that a business, regardless of its size, will have
a useful web site. It also remains a uniquely powerful tool for self-publishing,
whether to a small circle of friends or to a worldwide audience. We can be
certain that there will be a steady need for web designers and developers.

Where Do I Start?
Your particular starting point will no doubt depend on your background and
goals. However, a good first step for everyone is to get a basic understanding
of how the Web and web pages work. That you are reading this book now
shows that you are already on the right track. Once you learn the fundamentals, there are plenty of resources on the Web and in bookstores for you to
further your learning in specific areas. One way to get up to speed quickly
is to take an introductory web design class. If you don’t have the luxury of a
full-semester course, even a weekend or one-day seminar can be extremely
useful in getting over that first hump.

I Just Want a Blog!
You don’t necessarily need to
become a web designer to start
publishing your words and pictures
on the Web. You can start your own
“blog” or personal journal site using
one of the free or inexpensive blog
hosting services. These services
provide templates that spare you
the need to learn HTML (although it
still doesn’t hurt). These are three of
the most popular as of this writing:


Blogger (www.blogger.com)

TypePad (www.typepad.com)

LiveJournal (www.livejournal.
com)
If you use a Mac, Apple’s iWeb
software makes it simple to publish
blogs (including video) using one of
several stylish templates.



Part I: Getting Started

You’ll learn that the term “web design” has come to encompass many skills,
and you don’t necessarily need to learn all of them (most people don’t). This
chapter introduces the various disciplines and paths you may take.
Similarly, there are many levels of involvement in web design, from just building a site for yourself to making it a full-blown career. You may enjoy being
a full-service web site developer or just specializing in one skill, like Flash
development. There are a lot of ways you can go.
If your involvement in web design is purely at the hobbyist level, or if you
have just one or two web projects you’d like to publish, you may find that a
combination of personal research (like reading this book), taking advantage
of available templates, and perhaps even investing in solid web design tools
(such as Dreamweaver from Adobe) may be all you need to accomplish the
task at hand.
If you are interested in pursuing web design as a career, you’ll need to bring
your skills up to a professional level. Employers may not require a web

design degree, but they will expect to see sample web sites that demonstrate
your skills and experience. These sites can be the result of class assignments,
personal projects, or a simple site for a small business. What’s important is
that they look professional and have clean, working HTML and style sheets
behind the scenes. Getting an entry-level job and working as part of a team is


www.it-ebooks.info
What Do I Need to Learn?

a great way to learn how larger sites are constructed and can help you decide
which aspects of web design you would like to pursue.

What Do I Need to Learn?
This one’s a big question. The short answer is “not everything.” A more accurate answer depends on where you are starting and what you want to do.
As mentioned earlier, the term “web design” has become a catch-all for a
process that actually encompasses a number of different disciplines, from
graphic design to serious programming. We’ll take a look at each of them.
If you are designing a small web site on your own, you will need to wear
many hats. The good news is that you probably won’t notice. Consider that
the day-to-day upkeep of your household requires you to be part-time chef,
housecleaner, accountant, diplomat, gardener, and construction worker—but
to you it’s just the stuff you do around the house. In the same way, as a solo
web designer, you’ll be part-time graphic designer, writer, producer, and information architect, but to you, it’ll just feel like “making web pages.” Nothing
to worry about.

At a G l a n c e

“Web design” actually combines a
number of disciplines, including:


Graphic design

Information design

Interface design

HTML, style sheet, and graphic
production

Scripting and programming

Multimedia

There are also specialists out there whom you can hire to fill in the skills you
don’t have. For example, I have been creating web sites for more than a decade
and I still hire programmers and multimedia developers when my clients
require those features. That allows me to focus on the parts I do well.
Large-scale web sites are almost always created by a team of people, numbering from a handful to hundreds. In this scenario, each member of the team
focuses on just one facet of the site building process. If that is the case, you
may be able to simply adapt your current set of skills and interests to the
new medium.
The following are some of the core disciplines involved in the web design
process, along with brief descriptions of the skills required in each area.

If you are not interested
in becoming a jack-of-alltrades solo web designer,
you may choose to
specialize and work as part
of a team or as a freelance

contractor.

Graphic design
Because the Web is a visual medium, web pages require attention to presentation and design. The graphic designer makes decisions regarding everything
you see on a web page: graphics, type, colors, layout, etc. As in the print
world, graphic designers play an important role in the success of the final
product. If you work as a graphic designer in the web design process, you may
never need to learn any backend programming languages. (I didn’t.)
If you are interested in doing the visual design of commercial sites professionally, I strongly recommend graphic design training as well as a strong
proficiency in Adobe Photoshop (the industry standard). If you are already
a graphic designer, you will be able to adapt your skills to the Web easily.

Chapter 1, Where Do I Start




www.it-ebooks.info
What Do I Need to Learn?

Frontend Versus
Backend
You may hear web designers and
developers say that they specialize in
either the frontend or backend of
web site creation.

Frontend design
“Frontend” refers to any aspect of the
design process that appears in or

relates directly to the browser. This
book focuses primarily on frontend
web design.
The following tasks are commonly
considered to be frontend disciplines:

Graphic design

Interface design

Information design as it pertains
to the user’s experience of the
site

Site production, including HTML
documents, style sheets and
JavaScript

Backend development
“Backend” refers to the programs
and scripts that work on the server
behind the scenes to make web
pages dynamic and interactive. In
general, backend web development
falls in the hands of experienced
program­mers, but it is good for all
web designers to be familiar with
backend functionality.
The following tasks take place on the
backend:


Information design as it pertains
to how the information is
organized on the server

Forms processing

Database programming

Content management systems

Other server-side web
applications using Perl/CGI, PHP,
ASP, JSP, Ruby on Rails, Java and
other programming languages.



Part I: Getting Started

Because graphics are a big part of web design, even hobbyist web designers
will need to know how to use some image-editing software, at minimum.
If you don’t have visual design experience, you may want to do some personal
research on the fundamentals of graphic design. The following books will
give you a good start on rounding out your design skills.
The Non-Designer’s Design Book, Second Edition by Robin Williams (Peachpit
Press, 2003)
The Non-Designer’s Web Book, Third Edition by Robin Williams and John
Tollett (Peachpit Press, 2005)
Design Basics, Sixth Edition by David Lauer and Stephen Pentak (Harcourt

College Publishers, 2004)
Graphic Design Solutions, Third Edition by Robin Landa (Thomson Delmar
Learning, 2005).

Information design
One easily overlooked aspect of web design is information design, the organization of content and how you get to it. Information designers (also called
“information architects”) deal with flow charts and diagrams and may never
touch a graphic or text file; however, they are a crucial part of the creation
of the site.
It is possible to find courses specifically about information design, although
they are likely to be at the graduate level. Again, some personal research and
experience working on a team will go a long way toward rounding out this
skill. If you think you may be interested in this aspect of web development,
check out these books:
Information Architecture for the World Wide Web: Designing Large-Scale Web
Sites, Third Edition by Lou Rosenfeld and Peter Morville (O’Reilly, 2006) for
a good overview.
Information Architecture: Blueprints for the Web, by Christina Wodtke (New
Riders, 2002)

Interface design
If graphic design is concerned with how the page looks, interface design
focuses on how the page works. The concept of usability, how easily visitors
can accomplish their goals on the site, as well as the general experience of
using the site, is a function of the interface design. The interface of a web site


www.it-ebooks.info
What Do I Need to Learn?

includes the methods for doing things on a site: buttons, links, navigation
devices, etc., as well as the functional organization of the page. In most cases,
the interface, information archictecture, and visual design of a site are tightly
entwined.
Often, the interface design falls into the hands of a graphic designer by
default; in other cases, it is handled by an interface design specialist or the
information designer. Some interface designers have backgrounds in software
design. It is possible to find courses on interface design; however, this is an
area that you can build expertise in by a combination of personal research,
experience in the field, and common sense. You may also find these popular
books on web usability helpful:
Don’t Make Me Think, A Common Sense Approach to Web Usability, Second
Edition, by Steve Krug (New Riders, 2005)

O NL I NE R E S O U R CE

The topics of information and
interface design are covered in
more detail in my article “Building
Usable Web Sites”, available
as a PDF download at www.
learningwebdesign.com.

The Elements of User Experience: User-Centered Design for the Web, by Jesse
James Garrett (New Riders, 2002)

Document production
A fair amount of the web design process involves the creation and trouble­
shooting of the documents, style sheets, scripting, and images that make up
a site. The process of writing HTML and style sheet documents is commonly

referred to as authoring.
The people who handle production need to have an intricate knowledge of
HTML (the markup language used to make web documents) and style sheets,
and often additional scripting or programming skills. At large web design
firms, the team that handles the creation of the files that make up the web site
may be called the “development” or “production” department. In some cases,
the tasks may be separated out into specialized positions for CSS designer,
HTML author/coder, and client-side programmer.
This book will teach you the basics of web authoring, including how to
write HTML documents, create style sheets, and produce web graphics.
Fortunately, it’s not difficult to learn. Once you’ve gotten the fundamentals
under your belt, the trick is to practice by creating pages and learning from
your mistakes. There are also authoring tools that speed up the production
process, as we’ll discuss later in this chapter.
In addition to the HTML document and style sheets, each of the images that
appear on the page need to be produced in a way that is appropriate and
optimized for web delivery. Graphics production techniques are covered in
Part IV.

Chapter 1, Where Do I Start




www.it-ebooks.info
Do I Need to Learn Java?

A Little More About
Flash
Adobe Flash (previously Macromedia

Flash, previously FutureSplash) is a
multimedia format created especially
for the Web. Flash gives you the
ability to create full-screen animation,
interactive graphics, integrated audio
clips, even scriptable games and
applications, all at remarkably small
file sizes. Some sites use Flash instead
of (X)HTML for their entire interface,
content, and functionality.
Flash has a number of advantages:

Because it uses vector graphics,
files are small and the movie can
be resized without loss of detail.
Real-time anti-aliasing keeps the
edges smooth.

It is a streaming format, so movies
start playing quickly and continue
to play as they download.

You can use ActionScript to
add behaviors and advanced
interactivity, allowing Flash to
be used as the frontend for
dynamically generated content
or e-commerce functions.

The Flash plug-in is welldistributed, so support is reliable.

On the downside:

The fact that a plugin is required
to play Flash media makes some
developers squeamish.

Content may be lost for
nongraphical browsers. However,
Flash has many features to
improve accessibility.

The software required to create
Flash content is often expensive,
and the learning curve is steep.
Flash is not appropriate for all sites
and it is not poised to replace
(X)HTML. However, when used well,
it can create a big impact and a
memorable user experience.
For more information, look for
“Adobe Flash” at Wikipedia.org.



Part I: Getting Started

Scripting and programming
Advanced web functionality (such as forms, dynamic content, and interactivity) requires web scripts and sometimes special programs and applications
running behind the scenes. Scripting and programming is handled by web
programmers (also called developers). Developers who specialize in the programming end of things may never touch a graphic file or have input on how

the pages look, although they need to communicate well with the information and interface designers to make sure their scripts meet intended goals
and user expectations.
Web scripting and programming definitely requires some traditional computer programming prowess. While many web programmers have degrees
in computer science, it is also common for developers to be self-taught.
Developers I know usually start by copying and adapting existing scripts,
then gradually add to their programming skills on the job. If you have no
experience with programming languages, the initial learning curve may be
a bit steep.
Teaching web programming is beyond the scope of this book. It is possible
to turn out competent, content-rich, well-designed sites without the need
for programming, so hobbyist web designers should not be discouraged.
However, once you get into collecting information via forms or serving
information on demand, it is usually necessary to have a programmer on the
team.

Multimedia
One of the cool things about the Web is that you can add multimedia elements to a site, including sound, video, animation, and Flash movies for
interactivity (see sidebar). You may decide to add multimedia skills to your
web design toolbelt, or you may decide to become a specialist. If you are not
interested in becoming a multimedia developer, you can always hire one.
There is a constant call for professional Flash developers and people who
know how to produce audio and video files that are appropriate for the Web.
Web development companies usually look for people who have mastered the
standard multimedia tools, and have a good visual sensibility and an instinct
for intuitive and creative multimedia design. Professional Flash developers are
also expected to know ActionScript for adding advanced behaviors to Flash
movies and interfaces.

Do I Need to Learn Java?
You’d be surprised at the number of times I’ve heard the following: “I want

to get into web design so I went out and bought a book on Java.” I usually
respond, “Well, go return it!” Before you spend money on a big Java book,


www.it-ebooks.info
Do I Need to Learn Java?

The World Wide Web Consortium
The World Wide Web Consortium (called the W3C for short) is the organization
that oversees the development of web technologies. The group was founded in
1994 by Tim Berners-Lee, the inventor of the Web, at the Massachusetts Institute of
Technology (MIT).
In the beginning, the W3C concerned itself mainly with the HTTP protocol and the
development of the HTML. Now, the W3C is laying a foundation for the future of the
Web by developing dozens of technologies and protocols that must work together
in a solid infrastructure.
For the definitive answer on any web technology question, the W3C site is the place
to go:
www.w3.org
For more information on the W3C and what they do, see this useful page:
www.w3.org/Consortium/

I’m here to tell you that you don’t need to know Java programming (or any
programming, for that matter) to make web sites.
The following is a list of technologies associated with web development. They
are listed in general order of complexity and in the order that you might want
to learn them. Bear in mind, the only requirements are HTML and Cascading
Style Sheets. Where you draw the line after that is up to you.

HTML/XHTML

HTML (HyperText Markup Langage) is the language used to create web page
documents. The updated version, XHTML (eXtensible HTML) is essentially
the same language with stricter syntax rules. We’ll get to the particulars of
what makes them different in Chapter 10, Understanding the Standards. It is
common to see HTML and XHTML referred to collectively as (X)HTML, as
I will do throughout this book when both apply.

At A G l a n c e

Web-related programming
“languages” in order of increasing
complexity:

HTML/XHTML

Style sheets

JavaScript/DOM scripting

Server-side scripting

XML

Java

(X)HTML is not a programming language; it is a markup language, which
means it is a system for identifying and describing the various components of
a document such as headings, paragraphs, and lists. You don’t need programming skills—only patience and common sense—to write (X)HTML.
Everyone involved with the Web needs a basic understanding of how HTML
works. The best way to learn is to write out some pages by hand, as we will

be doing in the exercises in this book.

It is common to see HTML
and XHTML referred to
collectively as (X)HTML.

If you end up working in web production, you’ll live and breathe (X)HTML.
Even hobbyists will benefit from knowing what is going on under the hood.
The good news is that it’s simple to learn the basics.

Chapter 1, Where Do I Start




www.it-ebooks.info
Do I Need to Learn Java?

CSS (Cascading Style Sheets)
N ot e

When this book says “style sheets” it
is always referring to Cascading Style
Sheets, the standard style sheet language
for the World Wide Web.

While (X)HTML is used to describe the content in a web page, it is Cascading
Style Sheets (CSS) that describe how you want that content to look. In the
web design biz, the way the page looks is known as its presentation. CSS is
now the official and standard mechanism for formatting text and page layouts.

CSS also provides methods for controlling how documents will be presented
in media other than the traditional browser on a screen, such as in print and
on handheld devices. It also has rules for specifying the non-visual presentation of documents, such as how they will sound when read by a screen
reader.
Style sheets are also a great tool for automating production, because you can
make changes to all the pages in your site by editing a single style sheet document. Style sheets are supported to some degree by all modern browsers.

The Web Design
Layer Cake
Contemporary web design is
commonly visualized as being made
up of three separate “layers.”
The content of the document with
its (X)HTML markup makes up
the Structure Layer. It forms the
foundation upon which the other
layers may be applied.
Once the structure of the document
is in place, you can add style sheet
information to control how the
content should appear. This is called
the Presentation Layer.
Finally, the Behavior Layer includes
the scripts that make the page an
interactive experience.

Although it is possible to publish web pages using (X)HTML alone, you’ll
probably want to take on style sheets so you’re not stuck with the browser’s
default styles. If you’re looking into designing web sites professionally, proficiency at style sheets is mandatory.
Style sheets are discussed further in Part III.

JavaScript/DOM scripting
Despite its name, JavaScript is not at all related to Java. JavaScript is a scripting language that is used to add interactivity and behaviors to web pages,
including these (just to name a few):
• Checking form entries for valid entries
• Swapping out styles for an element or an entire site
• Making the browser remember information about the user for the next
time they visit
JavaScript is a language that is commonly used to manipulate the elements
on the web page or certain browser window functions. There are other web
scripting languages, but JavaScript (also called ECMAScript) is the standard
and most ubiquitous.
You may also hear the term DOM scripting used in relation to JavaScript.
DOM stands for Document Object Model, and it refers to the standardized list of web page elements that can be accessed and manipulated using
JavaScript (or another scripting language). DOM scripting is an updated term
for what used to be referred to as DHTML (Dynamic HTML), now considered an obsolete approach.
Writing JavaScript is programming, so it may be time-consuming to learn if
you have no prior programming experience. Many people teach themselves

10

Part I: Getting Started