Learning Web Design A Beginner s Guide to X HTML

Style Sheets and Web Graphics 3rd Edition

Jennifer Niederst Robbins pdf download

https://ebookname.com/product/learning-web-design-a-beginner-s-
guide-to-x-html-style-sheets-and-web-graphics-3rd-edition-
jennifer-niederst-robbins/

Get Instant Ebook Downloads – Browse at https://ebookname.com

Instant digital products (PDF, ePub, MOBI) available
Download now and explore formats that suit you...

Beginning CSS Cascading Style Sheets for Web Design 3rd

Edition Ian Pouncey

https://ebookname.com/product/beginning-css-cascading-style-
sheets-for-web-design-3rd-edition-ian-pouncey/

The Essential Guide to CSS and HTML Web Design 1st

Edition Craig Grannell

https://ebookname.com/product/the-essential-guide-to-css-and-
html-web-design-1st-edition-craig-grannell/

HTML5 Pocket Reference Fifth Edition Jennifer Niederst

Robbins

https://ebookname.com/product/html5-pocket-reference-fifth-
edition-jennifer-niederst-robbins/

The Parallax View 1st Edition Slavoj Žižek

https://ebookname.com/product/the-parallax-view-1st-edition-
slavoj-zizek/
Delta Green Iconoclasts 1st Edition Adam Scott Glancy.

https://ebookname.com/product/delta-green-iconoclasts-1st-
edition-adam-scott-glancy/

100 Years of Physical Chemistry A Collection of

Landmark Papers 1st Edition Ian W M Smith (Editor)

https://ebookname.com/product/100-years-of-physical-chemistry-a-
collection-of-landmark-papers-1st-edition-ian-w-m-smith-editor/

Unrecognized States in the International System Exeter

Studies in Ethno Politics 1st Edition Nina Caspersen

https://ebookname.com/product/unrecognized-states-in-the-
international-system-exeter-studies-in-ethno-politics-1st-
edition-nina-caspersen/

Handbook of Forensic Neuropsychology Second Edition

Arthur Macneill Horton Jr. Edd Abpp Abpn

https://ebookname.com/product/handbook-of-forensic-
neuropsychology-second-edition-arthur-macneill-horton-jr-edd-
abpp-abpn/

An intimate war an oral history of the Helmand conflict

1978 2012 2014 1st Edition Mike Martin

https://ebookname.com/product/an-intimate-war-an-oral-history-of-
the-helmand-conflict-1978-2012-2014-1st-edition-mike-martin/
Bacterial Artificial Chromosomes Volume 2 Functional
Studies 1st Edition Michael M. Weil

https://ebookname.com/product/bacterial-artificial-chromosomes-
volume-2-functional-studies-1st-edition-michael-m-weil/
Learning Web Design
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

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 avail-
able for most titles (safari.oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-
9938 or corporate@oreilly.com.

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 regis-
tered 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 trade-
marks. Where those designations appear in this book, and O’ReillyMedia, Inc. was aware of a trademark claim, the designa-
tions 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]
CONTENTS

Preface .................................................. xiii

Part I 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
 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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
(HTML Overview)
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
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.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
First, a Word on Image Formats.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
The img Element.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Imagemaps.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
(X)HTML Review: Image and Imagemap Elements.. . . . . . . . . . . . . . . . . . . . . . 127

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

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

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

Part III CSS For Presentation

Chapter 11
Cascading Style Sheets Orientation. . . . . . . . . . . . . . . . 187
The Benefits of CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
How Style Sheets Work.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
The Big Concepts.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Moving Forward with CSS.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Chapter 12
Formatting Text .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
(Plus More Selectors)
The Font Properties.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Changing Text Color.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
A Few More Selector Types.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Text Line Adjustments.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Underlines and Other “Decorations”.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Changing Capitalization.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Spaced Out.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Review: Font and Text Properties.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

viii Contents
Chapter 13
Colors and Backgrounds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
(Plus Even More Selectors and External Style Sheets)
Specifying Color Values.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Foreground Color.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Background Color.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Introducing.... Pseudoclass Selectors.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Pseudoelement Selectors.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Background Images.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
The Shorthand background Property.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Finally, External Style Sheets.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Style Sheets for Print (and Other Media).. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Review: Color and Background Properties.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Chapter 14
Thinking Inside the Box.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
(Padding, Borders, and Margins)
The Element Box.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Setting the Content Dimensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Padding .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Borders.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Margins.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Assigning Display Roles.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
The Box Model in Review.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Review: Basic Box Properties.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Chapter 15
Floating and Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Normal Flow.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Floating . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Positioning Basics.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Relative Positioning.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Absolute Positioning.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Fixed Positioning.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Review: Basic Layout Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

Contents ix
 Chapter 16
Page Layout with CSS.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Page Layout Strategies.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Fixed Layouts.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Elastic Layouts.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Page Layout Templates.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Centering a Fixed Width Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
CSS Layouts in Review.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

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

Part IV Creating Web Graphics

Chapter 18
Web Graphics Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Image Sources.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Meet the Formats.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Image Size and Resolution.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Working with Transparency.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Web Graphics 101 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Test Yourself .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

 Contents
Chapter 19
Lean and Mean Web Graphics. . . . . . . . . . . . . . . . . . . . . . . 387
Why Optimize?.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
General Optimization Strategies.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Optimizing GIFs.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Optimizing JPEGs.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Optimizing PNGs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Optimize to File Size.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Optimization in Review.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
Test Yourself.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Part V From Start to Finish

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

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

Contents xi
 Appendix A
Answers.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

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

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

xii Contents
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 The Companion
are out—style sheet-driven layouts are in. And the font element, spacer GIFs, Web Site
and other clever hacks of the past... forget about it! They’re all history.
Be sure to visit the companion
This edition has been completely rewritten to be in compliance with the web site for this book at
standards and modern web design practices. The markup chapters emphasize learningwebdesign.com. It
features materials for the exercises,
using HTML to describe your content accurately, not as a tool for formatting downloadable articles, lists of links
the appearance of text. And now you will find seven chapters on Cascading from the book, updates, and other
Style Sheets (CSS), where the second edition had just one. good stuff.

But like the first two editions, this book addresses the specific needs and con-
cerns of beginners of all backgrounds, including seasoned graphic designers,
programmers looking for a more creative outlet, office assistants, recent col-
lege 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
 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
I want to thank my editors, Brian Sawyer, Chuck Toporek, Linda Laflamme,
Conventions Used and Steve Weiss, for their valuable input to this new edition. A special thank
in This Book 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
The following typographic
conventions are used in this book:
standards compliance.

Italic 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
Used to indicate URLs, email
addresses, filenames, and figure production, Chris Reilley for helping me envision some of the more
directory names, as well as for complex figures, Sohaila Abdulali for copyediting, Reg Aubry for writing the
emphasis index, and everyone else who helped with the project.
Colored roman text Finally, I want to thank my Mom, Dad, brother Liam, and the whole Robbins
Used for special terms that are clan for their inspiration and continued support while I labored to crank
being defined and for cross- out this edition. And it pleases me greatly, Jeff and Arlo, to tell you that I am
reference.
finally done writing. Thanks for putting up with me being half there.
Constant width
Used to indicate code examples
and keyboard commands O’Reilly Would Like to Hear From You
Colored constant width Please address comments and questions concerning this book to the publisher:
Used to indicate (X)HTML tags O’Reilly Media, Inc.
and attributes, and used for 1005 Gravenstein Highway North
emphasis in code examples. Sebastopol, CA 95472
Constant width italic 800-998-9938 (in the United States or Canada)
Used to indicate placeholders for 707-829-0515 (international/local)
attribute and style sheet property 707-829-0104 (fax)
values.
There is a web page for this book, which lists errata and additional informa-
tion. You can access this page at:
http://www.oreilly.com/catalog/9780596527525
To comment or ask technical questions about this book, send email to:
bookquestions@oreilly.com
For more information about books, conferences, software, Resource Centers,
and the O’Reilly Network, see the O’Reilly web site at:
http://www.oreilly.com

xiv Preface
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
 CHAPTER 1
WHERE DO I
START?
The Web has been around for well over a decade now, experiencing euphoric IN THIS CHAPTER
early expansion, an economic-driven bust, an innovation-driven rebirth, and
constant evolution along the way. One thing is certain: the Web as a com- Am I too late?
munication and commercial medium is here to stay. Where do I start?
For many people, it’s a call to action—a new career opportunity, an incentive What do I need to learn?
to keep up with competitors, or just a chance to get stuff out there for the Do I need to learn Java?
world to see. But the world of web design can also seem overwhelming. What other languages do
Through my experience teaching web design courses and workshops, I’ve I need to know?
had the opportunity to meet people of all backgrounds who are interested in What software
learning how to build web pages. Allow me to introduce you to just a few: and equipment do I
“I’ve been a print designer for 17 years, and now all my clients want web need to buy?
sites.”
“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
 Am I Too Late?

Am I Too Late?
That’s an easy one—absolutely not! Although it may seem that everyone in
The first step is
the whole world has a personal web page, or that your colleagues are all light-
understanding the
years ahead of you in web experience, I can assure you that you’re not late.
fundamentals of how the
Web works. 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 fundamen-
tals, 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.
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
I Just Want a Blog! chapter introduces the various disciplines and paths you may take.
You don’t necessarily need to Similarly, there are many levels of involvement in web design, from just build-
become a web designer to start
ing a site for yourself to making it a full-blown career. You may enjoy being
publishing your words and pictures
on the Web. You can start your own a full-service web site developer or just specializing in one skill, like Flash
“blog” or personal journal site using development. There are a lot of ways you can go.
one of the free or inexpensive blog
hosting services. These services If your involvement in web design is purely at the hobbyist level, or if you
provide templates that spare you have just one or two web projects you’d like to publish, you may find that a
the need to learn HTML (although it combination of personal research (like reading this book), taking advantage
still doesn’t hurt). These are three of
of available templates, and perhaps even investing in solid web design tools
the most popular as of this writing:
(such as Dreamweaver from Adobe) may be all you need to accomplish the
 Blogger (www.blogger.com)
task at hand.
 TypePad (www.typepad.com)
 LiveJournal (www.livejournal. If you are interested in pursuing web design as a career, you’ll need to bring
com) your skills up to a professional level. Employers may not require a web
If you use a Mac, Apple’s iWeb design degree, but they will expect to see sample web sites that demonstrate
software makes it simple to publish your skills and experience. These sites can be the result of class assignments,
blogs (including video) using one of
several stylish templates. 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

 Part I: Getting Started

 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 accu-
rate answer depends on where you are starting and what you want to do.
At a G l a n c e
As mentioned earlier, the term “web design” has become a catch-all for a “Web design” actually combines a
process that actually encompasses a number of different disciplines, from number of disciplines, including:
graphic design to serious programming. We’ll take a look at each of them.  Graphic design
If you are designing a small web site on your own, you will need to wear  Information design
many hats. The good news is that you probably won’t notice. Consider that  Interface design
the day-to-day upkeep of your household requires you to be part-time chef,  HTML, style sheet, and graphic
production
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  Scripting and programming
web designer, you’ll be part-time graphic designer, writer, producer, and infor-  Multimedia
mation architect, but to you, it’ll just feel like “making web pages.” Nothing
to worry about.
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, number- If you are not interested
ing from a handful to hundreds. In this scenario, each member of the team in becoming a jack-of-all-
focuses on just one facet of the site building process. If that is the case, you trades solo web designer,
may be able to simply adapt your current set of skills and interests to the you may choose to
new medium. specialize and work as part
of a team or as a freelance
The following are some of the core disciplines involved in the web design
contractor.
process, along with brief descriptions of the skills required in each area.

Graphic design
Because the Web is a visual medium, web pages require attention to presenta-
tion 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 profes-
sionally, 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 

 What Do I Need to Learn?

Because graphics are a big part of web design, even hobbyist web designers
Frontend Versus will need to know how to use some image-editing software, at minimum.
Backend If you don’t have visual design experience, you may want to do some personal
You may hear web designers and research on the fundamentals of graphic design. The following books will
developers say that they specialize in give you a good start on rounding out your design skills.
either the frontend or backend of
web site creation. The Non-Designer’s Design Book, Second Edition by Robin Williams (Peachpit
Press, 2003)
Frontend design
“Frontend” refers to any aspect of the The Non-Designer’s Web Book, Third Edition by Robin Williams and John
design process that appears in or Tollett (Peachpit Press, 2005)
relates directly to the browser. This
book focuses primarily on frontend Design Basics, Sixth Edition by David Lauer and Stephen Pentak (Harcourt
web design. College Publishers, 2004)
The following tasks are commonly
Graphic Design Solutions, Third Edition by Robin Landa (Thomson Delmar
considered to be frontend disciplines:
Learning, 2005).
 Graphic design
 Interface design
 Information design as it pertains Information design
to the user’s experience of the
site
One easily overlooked aspect of web design is information design, the orga-
nization of content and how you get to it. Information designers (also called
 Site production, including HTML
documents, style sheets and “information architects”) deal with flow charts and diagrams and may never
JavaScript touch a graphic or text file; however, they are a crucial part of the creation
of the site.
Backend development
“Backend” refers to the programs It is possible to find courses specifically about information design, although
and scripts that work on the server they are likely to be at the graduate level. Again, some personal research and
behind the scenes to make web experience working on a team will go a long way toward rounding out this
pages dynamic and interactive. In skill. If you think you may be interested in this aspect of web development,
general, backend web development
falls in the hands of experienced
check out these books:
program­mers, but it is good for all Information Architecture for the World Wide Web: Designing Large-Scale Web
web designers to be familiar with
backend functionality. Sites, Third Edition by Lou Rosenfeld and Peter Morville (O’Reilly, 2006) for
The following tasks take place on the
a good overview.
backend: Information Architecture: Blueprints for the Web, by Christina Wodtke (New
 Information design as it pertains Riders, 2002)
to how the information is
organized on the server
 Forms processing Interface design
 Database programming If graphic design is concerned with how the page looks, interface design
 Content management systems focuses on how the page works. The concept of usability, how easily visitors
 Other server-side web can accomplish their goals on the site, as well as the general experience of
applications using Perl/CGI, PHP,
ASP, JSP, Ruby on Rails, Java and
using the site, is a function of the interface design. The interface of a web site
other programming languages.

 Part I: Getting Started

 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
O NL I NE R E S O U R CE
information designer. Some interface designers have backgrounds in software
design. It is possible to find courses on interface design; however, this is an The topics of information and
area that you can build expertise in by a combination of personal research, interface design are covered in
more detail in my article “Building
experience in the field, and common sense. You may also find these popular
Usable Web Sites”, available
books on web usability helpful: as a PDF download at www.
learningwebdesign.com.
Don’t Make Me Think, A Common Sense Approach to Web Usability, Second
Edition, by Steve Krug (New Riders, 2005)
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 

 Do I Need to Learn Java?

Scripting and programming

A Little More About
Advanced web functionality (such as forms, dynamic content, and interactiv-
Flash ity) requires web scripts and sometimes special programs and applications
Adobe Flash (previously Macromedia running behind the scenes. Scripting and programming is handled by web
Flash, previously FutureSplash) is a
multimedia format created especially programmers (also called developers). Developers who specialize in the pro-
for the Web. Flash gives you the gramming end of things may never touch a graphic file or have input on how
ability to create full-screen animation, the pages look, although they need to communicate well with the informa-
interactive graphics, integrated audio tion and interface designers to make sure their scripts meet intended goals
clips, even scriptable games and
applications, all at remarkably small
and user expectations.
file sizes. Some sites use Flash instead Web scripting and programming definitely requires some traditional com-
of (X)HTML for their entire interface,
content, and functionality. puter programming prowess. While many web programmers have degrees
Flash has a number of advantages: in computer science, it is also common for developers to be self-taught.
 Because it uses vector graphics,
Developers I know usually start by copying and adapting existing scripts,
files are small and the movie can then gradually add to their programming skills on the job. If you have no
be resized without loss of detail. experience with programming languages, the initial learning curve may be
Real-time anti-aliasing keeps the a bit steep.
edges smooth.
 It is a streaming format, so movies Teaching web programming is beyond the scope of this book. It is possible
start playing quickly and continue to turn out competent, content-rich, well-designed sites without the need
to play as they download. for programming, so hobbyist web designers should not be discouraged.
 You can use ActionScript to However, once you get into collecting information via forms or serving
add behaviors and advanced
interactivity, allowing Flash to
information on demand, it is usually necessary to have a programmer on the
be used as the frontend for team.
dynamically generated content
or e-commerce functions.
 The Flash plug-in is well-
Multimedia
distributed, so support is reliable. One of the cool things about the Web is that you can add multimedia ele-
On the downside: ments to a site, including sound, video, animation, and Flash movies for
 The fact that a plugin is required interactivity (see sidebar). You may decide to add multimedia skills to your
to play Flash media makes some web design toolbelt, or you may decide to become a specialist. If you are not
developers squeamish.
interested in becoming a multimedia developer, you can always hire one.
 Content may be lost for
nongraphical browsers. However, There is a constant call for professional Flash developers and people who
Flash has many features to
know how to produce audio and video files that are appropriate for the Web.
improve accessibility.
Web development companies usually look for people who have mastered the
 The software required to create
Flash content is often expensive, standard multimedia tools, and have a good visual sensibility and an instinct
and the learning curve is steep. for intuitive and creative multimedia design. Professional Flash developers are
Flash is not appropriate for all sites also expected to know ActionScript for adding advanced behaviors to Flash
and it is not poised to replace movies and interfaces.
(X)HTML. However, when used well,
it can create a big impact and a
memorable user experience.
For more information, look for
Do I Need to Learn Java?
“Adobe Flash” at Wikipedia.org. 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,

 Part I: Getting Started

 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 At A G l a n c e
are listed in general order of complexity and in the order that you might want
Web-related programming
to learn them. Bear in mind, the only requirements are HTML and Cascading “languages” in order of increasing
Style Sheets. Where you draw the line after that is up to you. complexity:
 HTML/XHTML
HTML/XHTML  Style sheets
 JavaScript/DOM scripting
HTML (HyperText Markup Langage) is the language used to create web page
 Server-side scripting
documents. The updated version, XHTML (eXtensible HTML) is essentially
 XML
the same language with stricter syntax rules. We’ll get to the particulars of
 Java
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.
(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 program-
ming skills—only patience and common sense—to write (X)HTML.
It is common to see HTML
Everyone involved with the Web needs a basic understanding of how HTML
and XHTML referred to
works. The best way to learn is to write out some pages by hand, as we will
collectively as (X)HTML.
be doing in the exercises in this book.
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 

 Do I Need to Learn Java?

CSS (Cascading Style Sheets)

N ot e While (X)HTML is used to describe the content in a web page, it is Cascading
When this book says “style sheets” it Style Sheets (CSS) that describe how you want that content to look. In the
is always referring to Cascading Style web design biz, the way the page looks is known as its presentation. CSS is
Sheets, the standard style sheet language now the official and standard mechanism for formatting text and page lay-
for the World Wide Web. outs.
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 presen-
tation 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 docu-
ment. Style sheets are supported to some degree by all modern browsers.
The Web Design Although it is possible to publish web pages using (X)HTML alone, you’ll
Layer Cake probably want to take on style sheets so you’re not stuck with the browser’s
Contemporary web design is
default styles. If you’re looking into designing web sites professionally, profi-
commonly visualized as being made ciency at style sheets is mandatory.
up of three separate “layers.”
Style sheets are discussed further in Part III.
The content of the document with
its (X)HTML markup makes up
the Structure Layer. It forms the JavaScript/DOM scripting
foundation upon which the other
layers may be applied. Despite its name, JavaScript is not at all related to Java. JavaScript is a script-
Once the structure of the document ing language that is used to add interactivity and behaviors to web pages,
is in place, you can add style sheet including these (just to name a few):
information to control how the
content should appear. This is called • Checking form entries for valid entries
the Presentation Layer.
• Swapping out styles for an element or an entire site
Finally, the Behavior Layer includes
the scripts that make the page an • Making the browser remember information about the user for the next
interactive experience.
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 standard-
ized 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 consid-
ered 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

 Another Random Document on
Scribd Without Any Related Topics
The Project Gutenberg eBook of Lafayette, We
Come!
This ebook is for the use of anyone anywhere in the United States
and most other parts of the world at no cost and with almost no
restrictions whatsoever. You may copy it, give it away or re-use it
under the terms of the Project Gutenberg License included with this
ebook or online at www.gutenberg.org. If you are not located in the
United States, you will have to check the laws of the country where
you are located before using this eBook.

Title: Lafayette, We Come!

Author: Rupert Sargent Holland

Release date: September 29, 2013 [eBook #43843]

Most recently updated: October 23, 2024

Language: English

Credits: Produced by Fred Salzer, Greg Bergquist and the Online

Distributed Proofreading Team at http://www.pgdp.net
(This
file was produced from images generously made available
by The Internet Archive/American Libraries.)

*** START OF THE PROJECT GUTENBERG EBOOK LAFAYETTE, WE

COME! ***
Lafayette Meets Washington
Lafayette, We Come!
The Story of How a Young
Frenchman Fought for Liberty
in America and How America
Now Fights for Liberty in France

By
RUPERT S. HOLLAND
Author of “Historic Boyhoods,” “The Knights
of the Golden Spur,” etc.

PHILADELPHIA
GEORGE W. JACOBS & COMPANY
PUBLISHERS
 Copyright, 1918, by
George W. Jacobs & Company

All rights reserved

Printed in U. S. A.
 To
Those Men of the Great Republic
Who Have Answered
The Call of Lafayette,
Lover of Liberty
 Illustrations

Lafayette meets Washington Frontispiece

Facing page
Lafayette, a Prussian prisoner 226

“America’s Answer” 302

 Foreword
In 1777 the young Marquis de Lafayette, only nineteen years old,
came from France to the aid of the Thirteen Colonies of North
America because he heard their cry for liberty ringing across the
Atlantic Ocean. In 1917 the United States of America drew the sword
in defense of the sacred principle of liberty for which the country of
Lafayette was fighting. The debt of gratitude had never been
forgotten; the ideals of the gallant Frenchman and of the young
Republic of the Western World were the same; what he had done for
us we of America are now doing for him.

It is a glorious story, and one never to be forgotten while men love

liberty and truth. Every boy and girl should know it, for it is the story
of a brave, generous, noble-minded youth, who gave such devoted
service to America that he stands with Washington and Lincoln as
one of the great benefactors of our land. “I’m going to America to
fight for freedom!” he cried; and the cry still rings in our ears more
than a century later. The message is the same one we hear to-day
and that is carrying us across the Atlantic to France. From
Lafayette’s story we learn courage, fidelity to honor, loyalty to
conviction, the qualities that make men free and great. The
principles of “liberty, equality, and fraternity” of France are the same
as those of our own Declaration of Independence, and the men of
the countries of Washington and Lafayette now fight under a
common banner. “Lafayette, we come!” was America’s answer to the
great man who offered all he had to us in the days of 1777.
 Contents

I. The Little Marquis of France. 7

II. “Wake Up! I’m Going to America to Fight for 25

Freedom!”
III. How Lafayette Ran Away to Sea 45

IV. The Young Frenchman Reaches America 63

V. “I Will Fight for American Liberty as a 82

Volunteer!”
VI. Lafayette Wins the Friendship of Washington 102

VII. The Frenchman in the Field Again 123

VIII. The Marquis Aids the United States in France 153

IX. How Lafayette Sought to Give Liberty to France 172

X. Storm-Clouds of the French Revolution 194

XI. Lafayette in Prison and Exile 225

XII. In the Days of Napoleon 248

XIII. The United States Welcomes the Hero 272

XIV. The Lover of Liberty 287

XV. America’s Message to France—“Lafayette, We 302

Come!”
 I

THE LITTLE MARQUIS OF FRANCE

In the mountains of Auvergne in Southern France, in what was for

many centuries called the province of Auvergne, but what is now
known as the department of Haute-Loire, or Upper Loire, stands a
great fortified castle, the Château of Chavaniac. For six hundred
years it has stood there, part fortress and part manor-house and
farm, a huge structure, built piecemeal through centuries, with many
towers and battlements and thick stone walls long overgrown with
moss. Before it lies the valley of the Allier and the great rugged
mountains of Auvergne. Love of freedom is deeply rooted in the
country round it, for the people of Auvergne have always been an
independent, proud and fearless race.

In this old Château of Chavaniac there was born on September 6,

1757, the Marquis de Lafayette. He was baptized the next day, with
all the ceremonies befitting a baby of such high rank, and the
register of the little parish church in the neighboring village records
the baptism as that of “the very noble and very powerful gentleman
Monseigneur Marie-Joseph-Paul-Yves-Roch-Gilbert Dumotier de
Lafayette, the lawful son of the very noble and very powerful
gentleman Monseigneur Michel-Louis-Christophle-Roch-Gilbert
Dumotier, Marquis de Lafayette, Baron de Vissac, Seigneur de Saint-
Romain and other places, and of the very noble and very powerful
lady Madame Marie-Louise-Julie Delareviere.”

A good many names for a small boy to carry, but his family was very
old, and it was the custom of France to give many family names to
each child. He was called Gilbert Motier for short, however, though
he was actually born with the title and rank of Marquis, for his father
had been killed in battle six weeks before the little heir to Chavaniac
was born.

The family name of Motier could be traced back to before the year
1000. Then one of the family came into possession of a farm called
the Villa Faya, and he lengthened his name to Motier of La Fayette.
And as other properties came to belong to the family the men added
new names and titles until in 1757 the heir to the old château had
not only a long string of names but was also a marquis and baron
and seigneur by right of his birth. There were few families in
Auvergne of older lineage than the house of Lafayette.

The little heir’s father, Michel-Louis, Marquis de Lafayette, had been

killed while leading a charge at the head of his regiment of French
Grenadiers in the battle of Hastenbeck, one of the battles of what
was known as the Seven Years’ War in Europe, which took place at
about the same time as the French and Indian War in America.
Although only twenty-four years old Michel-Louis de Lafayette was
already a colonel and a knight of the order of Saint Louis and had
shown himself a true descendant of the old fighting stock of
Auvergne nobles. Now the small baby boy, the new Marquis,
succeeded to his father’s titles as well as to the castle and several
other even older manor-houses, for the most part in ruins, that were
perched high up in the mountains.

For all its blue blood, however, the family were what is known as
“land poor.” The little Marquis owned large farms in the mountains,
but the crops were not very abundant and most of the money that
had come in from them for some time had been needed to provide
for the fighting men. Fortunately the boy’s mother and grandmother
and aunts, who all lived at Chavaniac, were strong and sturdy
people, willing to live the simple, healthy, frugal life of their
neighbors in the province and so save as much of the family fortune
as they could for the time when the heir should make his bow at
court.
Without brothers or sisters and with few playmates, spending his
time out-of-doors in the woods and fields of Chavaniac, the young
Lafayette had a rather solitary childhood and grew up awkward and
shy. He was a lean, long-limbed fellow with a hook nose, reddish
hair, and a very bashful manner. But his eyes were bright and very
intelligent; whenever anything really caught his attention he quickly
became intensely interested in it, and he was devoted to all the birds
and beasts of the country round about his home.

Some of these beasts, however, were dangerous; there was a great

gray wolf that the farmers said had been breaking into sheepfolds
and doing great damage. The boy of eight years old heard the story
and set out, sword in hand, to hunt and slay the wolf. There is no
account of his ever coming up with that particular monster, but the
peasants of the neighborhood liked to tell all visitors this story as
proof of the courage of their young Marquis.

But the family had no intention of keeping the head of their house in
this far-off province of France. He must learn to conduct himself as a
polished gentleman and courtier, he must go to Paris and prepare
himself to take the place at the royal court that belonged to a son of
his long, distinguished line. His family had rich and powerful
relations, who were quite ready to help the boy, and so, when he
was eleven years old, he left the quiet castle of Chavaniac and went
to a school for young noblemen, the College du Plessis at Paris.

Lafayette’s mother’s uncle, taking a liking to the boy, had him

enrolled as a cadet in one of the famous regiments of France, “The
Black Musketeers,” and this gave the boy a proud position at school,
and many a day he took some of his new friends to see the
Musketeers drill and learn something of the Manual of Arms. The
company of other boys, both at the College du Plessis in Paris and
then at the Academy at Versailles, as well as the interest he took in
his gallant Black Musketeers, made Lafayette less shy and awkward
than he had been at Chavaniac, though he was still much more
reserved and thoughtful than most boys of his age. He learned to
write his own language well, and his compositions in school showed
the practical common sense of his country bringing-up. He wrote a
paper on the horse, and the chief point he brought out in it was that
if you try to make a horse do too many things well he is sure to get
restless and throw you, a bit of wisdom he had doubtless learned in
Auvergne.

The boy Marquis was at school in Paris when, in 1770, his devoted
mother and the rich granduncle who had had him appointed a cadet
of the Musketeers both died. The little Lafayette was now very much
alone; his grandmother in the distant castle in the mountains was his
nearest relation, and, though only a boy of thirteen, he had to
decide important questions for himself. But the granduncle had been
very fond of the lad, and in his will he left Lafayette all his fortune
and estates. The fortune was very large, and as a result the boy
Marquis, instead of being only a poor young country nobleman from
Auvergne, became a very rich and important person.

Immediately the proud and luxury-loving society of the French court

took a great interest in Gilbert Motier de Lafayette. Every father and
mother who had a daughter they wished to marry turned their
attention to the boy. And Lafayette, who, like most boys of his age,
paid little attention to girls, was beset with all sorts of invitations to
parties and balls.

In Europe in those days marriages were arranged by parents with

little regard to the wishes of their children. Sometimes babies of
noble families were betrothed to each other while they were still in
the cradle. It was all a question of social standing and of money. So
Lafayette’s guardians put their heads together and looked around for
the most suitable girl for him to marry.

The guardians chose the second daughter of the Duke d’Ayen,

Mademoiselle Marie-Adrienne-Françoise de Noailles, a girl twelve
years old. The Duke was pleased with the proposal; the Marquis de
Lafayette would make a most desirable husband for his daughter.
But the little girl’s mother had strong ideas of her own. When the
Duke told her of the husband selected for Marie-Adrienne she
objected.

“It is too great a risk to run for Adrienne,” she said. “The Marquis de
Lafayette is very young, very rich, and very wilful. He seems to be a
good boy, so far as his standing at school and his conduct in society
are concerned; but with no one to guide him, no one to look after
his fortune and hold him back from extravagance and foolishness,
without a near relative, and with his character as yet unformed and
uncertain, our daughter’s marriage to him is out of the question, and
I will not agree to it.”

Both the Duke and the Duchess were strong-willed; Adrienne’s

father insisted on the match and her mother opposed it more and
more positively. At last they actually quarreled and almost separated
over this question of the marriage of two children, neither of whom
had been consulted in regard to their own feelings. At last, however,
the Duke suggested a compromise; the marriage should not take
place for two years, Adrienne should not leave her mother for three
years, and in the meantime the Duke would look after the education
of the boy and see that he became a suitable husband for their
daughter.

This suited the Duchess better. “If the boy is brought up in our home
where I can see and study him,” she said, “I will agree. Then, having
taken all precautions, and having no negligence wherewith to
reproach ourselves, we need do nothing but peacefully submit to the
will of God, who knows best what is fitting for us.”

The shy boy came to the Duke’s house and met the little girl.
Adrienne was very attractive, sweet-natured, pretty, and delightful
company. Before the two knew the plans that had been made
concerning them they grew to like each other very much, became
splendid companions, and were glad when they learned that they
were to marry some day. As for Adrienne’s mother, the more she
saw of the boy the better she liked him; she took him into her house
and heart as if he were her own son, trying to make up to him for
the loss of his own mother. The Duke kept his agreement. He saw
that Lafayette was properly educated at the Academy at Versailles
where young noblemen were taught military duties and that in
proper time he obtained his commission as an officer in the royal
regiment of the Black Musketeers.

Then, on April 11, 1774, Lafayette and Adrienne were married. The
groom was sixteen years old and the bride fourteen, but those were
quite proper ages for marriage among the French nobility. For a year
the young husband and wife lived at the great house of the Duke
d’Ayen in Paris, still under the watchful eye of the careful Duchess,
and then they took a house for themselves in the capital, going
occasionally to the old castle of Chavaniac in Auvergne.

The boy Marquis never regretted his marriage to Adrienne. Through

all the adventures of his later life his love for her was strong and
enduring. And she was as fine and noble and generous a woman as
Lafayette was a brave, heroic man.

Rich, a marquis in his own right, married to a daughter of one of the

greatest houses of France, Lafayette had the entrance to the highest
circles at court, to the innermost circle in fact, that of the young King
Louis XVI. and his Queen Marie Antoinette. And never was there a
gayer court to be found; the youthful King and his beautiful wife and
all their friends seemed to live for pleasure only; they were gorgeous
butterflies who flitted about the beautiful gardens of the Palace at
Versailles and basked in continual sunshine.

But the boy of seventeen, son of a line of rugged Auvergne fighters,

men of independent natures, did not take readily to the unceasing
show and luxury of court. Balls and dramas, rustic dances and
dinners and suppers, all the extravagant entertainments that the
clever mind of the young Queen could devise, followed in endless
succession. True it was that some of the courtiers had the fashion of
talking a good deal about the rights of man and human liberty, but
that was simply a fashion in a country where only the nobles had
liberty and the talk of such things only furnished polite conversation
in drawing-rooms. To Lafayette, however, liberty meant more than
that; young though he was, he had seen enough of the world to
wish that there might be less suffering among the poor and more
liberality among the wealthy. The constant stream of pleasures at
Versailles often gave him food for thought, and though he was very
fond of the King and Queen and their youthful court, he had less and
less regard for the older nobles, who appeared to him as vain and
stiff and foolish as so many strutting peacocks.

Sometimes, however, for all his thoughtfulness, he joined whole-

heartedly in the revels the Queen devised. On one midsummer night
Marie Antoinette gave a fête at Versailles, and Lafayette led the
revels. The Queen had declared that she meant to have a fête
champêtre in the gardens that should be different from anything the
court of France had ever seen. All her guests should appear either as
goblins or as nymphs. They should not be required to dance the
quadrille or any other stately measure, but would be free to play any
jokes that came into their heads. As Marie Antoinette outlined these
plans to him Lafayette shook his head in doubt.

“What will the lords in waiting say to this?” he asked, “and your
Majesty’s own ladies?”

The pretty Queen laughed and shrugged her shoulders. “Who

cares?” she answered. “As long as Louis is King I shall do what
pleases me.”

Then a new idea occurred to her and she clapped her hands with
delight. “I shall go to Louis,” she said, “and have him issue a royal
order commanding every one who comes to the fête to dress as a
goblin or a nymph. He will do it for me, I know.”
King Louis was too fond of his wife to deny her anything, so he
issued the order she wanted, much though he feared that it might
affront the older courtiers. And the courtiers were affronted and
horrified. The Royal Chamberlain and the Queen’s Mistress of the
Robes went to the King in his workshop, for Louis was always busy
with clocks and locks and keys, and told him that such a
performance as was planned would make the court of France appear
ridiculous.

Louis listened to them patiently, and when they had left he sent for
Marie Antoinette and her friends. They described how absurd the
courtiers would look as nymphs and goblins and the King laughed till
he cried. Then he dismissed the whole matter and went back to the
tools on his work-table.

So Marie Antoinette had her party, and the gardens of Versailles saw
the strange spectacle of tall, stiff goblins wearing elaborate
powdered wigs and jeweled swords, and stout wood-nymphs with
bare arms and shoulders and glittering with gems. The Queen’s
friends, a crowd of hobgoblins, swooped down upon the stately
Mistress of the Robes and carried her off to a summer-house on the
edge of the woods, where they kept her a prisoner while they sang
her the latest ballads of the Paris streets. The court was shocked
and indignant, and the next day there was such a buzzing of angry
bees about the head of the King that he had to lecture the Queen
and her friends and forbid any more such revels.

As the older courtiers regained their influence over Louis the young
Lafayette went less and less often to Versailles. He was too
independent by nature to bow the knee to the powdered and
painted lords and ladies who controlled the court. Instead of seeking
their society he spent more and more time with his regiment of
Musketeers. But this did not satisfy his father-in-law, the Duke
d’Ayen, who was eager for Lafayette to shine in the sun of royal
favor. So the Duke went to the young Count de Segur, Lafayette’s
close friend and cousin, and begged him to try and stir the Marquis
to greater ambition.

The Count, who knew Lafayette well, had to laugh at the words of
the Duke d’Ayen. “Indifferent! Indolent! Faith, my dear marshal, you
do not yet know our Lafayette! I should say he has altogether too
much enthusiasm. Why, it was only yesterday that he almost insisted
on my fighting a duel with him because I did not agree with him in a
matter of which I knew nothing, and of which he thought I should
know everything. He is anything but indifferent and indolent, I can
assure you!”

Pleased with this information, and feeling that he had much

misunderstood his son-in-law, the Duke made plans to have
Lafayette attached to the suite of one of the princes of France, and
picked out the Count of Provence, the scapegrace brother of Louis
XVI. This Prince was only two years older than Lafayette, and
famous for his overbearing manners. As a result, when the Duke told
his son-in-law of the interview he had arranged for him with the
Count of Provence, Lafayette at once determined that nothing
should make him accept service with so arrogant a fellow.

Having decided that he wanted no favors from that particular Prince,

Lafayette set about to make his decision clear. His opportunity soon
came. The King and Queen gave a masked ball at court, and the
youthful Marquis was one of their guests. With his mask concealing
his face he went up to the King’s brother, the Count of Provence, and
began to talk about liberty and equality and the rights of man,
saying a great deal that he probably did not believe in his desire to
make the Count angry.

The plan succeeded beautifully. The Count tried to answer, but every
time he opened his mouth Lafayette said more violent things and
made more eloquent pleas for democracy. At last the young Prince
could stand the tirade no longer. “Sir,” said he, lifting his mask and
staring at his talkative companion, “I shall remember this interview.”
“Sir,” answered the young Marquis, also lifting his mask and bowing
gracefully, “memory is the wisdom of fools.”

It was a rash remark to make to a royal prince, but it had the effect
that Lafayette desired. With an angry gesture the Count of Provence
turned on his heel and made it clear to every one about him that the
Marquis was in disgrace. In later days the Count showed that he had
remembered Lafayette’s words to him.

News of what the Marquis had said quickly flew through the court
and speedily reached the ears of the Duke d’Ayen. He was horrified;
his son-in-law had not only insulted the Prince and so lost his chance
of becoming a gentleman of his suite, but had also made himself a
laughing-stock. The Duke lectured the boy, and told him that he was
throwing away all his chances for worldly advancement. But
Lafayette answered that he cared nothing for princely favor and
meant to follow the dictates of his own nature.

So the Duke, finally despairing of doing anything with so

independent a fellow, had him ordered to join his regiment, and
Lafayette left Paris to seek his fortune elsewhere. Already, although
he was only seventeen, the boy Marquis had shown that he was a
true son of Auvergne, not a parasite of the King’s court, as were
most of his friends, but an independent, liberty-loving man.
 II

“WAKE UP! I’M GOING TO AMERICA TO FIGHT FOR FREEDOM!”

Although the young Marquis had deliberately given up a career at

court, there was every promise of his having a brilliant career in the
army. Soon after his famous speech to the King’s brother, in August,
1775, he was transferred from his regiment of Black Musketeers to a
command in what was known as the “Regiment de Noailles,” which
had for its colonel a young man of very distinguished family,
Monseigneur the Prince de Poix, who was a cousin of Lafayette’s
wife.

The “Regiment de Noailles” was stationed at Metz, a garrison city

some two hundred miles to the east of Paris. The commander of
Metz was the Count de Broglie, a marshal and prince of France, who
had commanded the French armies in the Seven Years’ War, in one
of the battles of which Lafayette’s father had been killed. The Count
de Broglie had known Lafayette’s father and had greatly admired
him, and he did all he could to befriend the son, inviting him to all
the entertainments he gave.

It happened that early in August the Count de Broglie gave a dinner

in honor of a young English prince, the Duke of Gloucester, and
Lafayette, in the blue and silver uniform of his rank, was one of the
guests at the table. The Duke of Gloucester was at the time in
disgrace with his brother, King George the Third of England, because
he had dared to marry a wife whom King George disliked. The Duke
was really in exile from England, and in the company of the French
officers he had no hesitation in speaking his mind about his royal
brother and even in poking fun at some of his plans. And the Duke
made a special point of criticizing King George for his policy toward
the colonists in America.
In that very year of the dinner-party at Metz, in the spring of 1775, a
rebellion had broken out in the colonies, and there had actually been
a fight between American farmers and British regulars at the village
of Lexington in the colony of Massachusetts Bay. The Duke had
received word of the obstinate resistance of the farmers—peasants,
he called them—at Lexington and Concord, and of the retreat of
Lord Percy and his troops to Boston. The Duke told the dinner-party
all about the discomfiture of his royal brother, laughing heartily at it,
and also related how in that same seaport of Boston the
townspeople had thrown a cargo of tea into the harbor rather than
pay the royal tax on it.

The Duke talked and Lafayette listened. The Duke spoke admiringly
of the pluck of the American farmers, but pointed out that it was
impossible for the colonists to win against regular troops unless
experienced officers and leaders should help them. “They are poor,
they are ill led,” said the Duke, “they have no gentlemen-soldiers to
show them how to fight, and the king my brother is determined to
bring them into subjection by harsh and forcible methods if need be.
But my letters say that the Americans seem set upon opposing force
with force, and, as the country is large and the colonies scattered, it
certainly looks as if the trouble would be long and serious. If but the
Americans were well led, I should say the rebellion might really
develop into a serious affair.”

Most of the officers knew little about America; even Lafayette had
only a vague idea about the colonies on the other side of the Atlantic
Ocean. But the Duke’s words stirred him deeply; he sat leaning far
forward, his eyes shining with interest, his face expressing the
closest attention.

Finally, as the guests rose from the table, Lafayette burst forth
impetuously. “But could one help these peasants over there beyond
the seas, monseigneur?” he asked the Duke.
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebookname.com