Build Your Own Website The Right Way Using HTML

CSS 2nd Edition Ian Lloyd download

https://ebookgate.com/product/build-your-own-website-the-right-
way-using-html-css-2nd-edition-ian-lloyd/

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

 Get Your Digital Files Instantly: PDF, ePub, MOBI and More
Quick Digital Downloads: PDF, ePub, MOBI and Other Formats

Build Your Own Database Driven Website Using PHP and

MySQL 3rd Edition Kevin Yank

https://ebookgate.com/product/build-your-own-database-driven-
website-using-php-and-mysql-3rd-edition-kevin-yank/

Rails Novice to Ninja Build Your Own Ruby on Rails

Website 3rd Edition Goodrich

https://ebookgate.com/product/rails-novice-to-ninja-build-your-
own-ruby-on-rails-website-3rd-edition-goodrich/

Rails Novice to Ninja Build Your Own Ruby on Rails

Website 3rd Edition Glenn Goodrich

https://ebookgate.com/product/rails-novice-to-ninja-build-your-
own-ruby-on-rails-website-3rd-edition-glenn-goodrich/

Sell Your Own Damn Movie 1st Edition Lloyd Kaufman

https://ebookgate.com/product/sell-your-own-damn-movie-1st-
edition-lloyd-kaufman/
Head First HTML and CSS 2nd Edition Elisabeth Robson

https://ebookgate.com/product/head-first-html-and-css-2nd-
edition-elisabeth-robson/

Consulting Contracting and Freelancing Be Your Own Boss

2nd Edition Ian Benjamin

https://ebookgate.com/product/consulting-contracting-and-
freelancing-be-your-own-boss-2nd-edition-ian-benjamin/

Build Your Own Smart Home 1st Edition Anthony Velte

https://ebookgate.com/product/build-your-own-smart-home-1st-
edition-anthony-velte/

Mastering Integrated HTML and CSS 1st Edition Virginia

Debolt

https://ebookgate.com/product/mastering-integrated-html-and-
css-1st-edition-virginia-debolt/

HTML XHTML and CSS Bible 3rd Edition Pfaffenberger B.

https://ebookgate.com/product/html-xhtml-and-css-bible-3rd-
edition-pfaffenberger-b/
Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
1. Setting Up Shop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2. Your First Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3. Adding Some Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
4. Shaping Up Using CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
5. Picture This! Using Images on Your Web Site . . . . . . . . . . . . . . . . . . . . . . . 177
6. Tables: Tools for Organizing Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
7. Forms: Interacting with Your Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
8. Launching Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
9. Adding a Blog to Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
10. Pimp My Site: Cool Stuff You Can Add for Free . . . . . . . . . . . . . . . . . . . . 377
11. Where to Now? What You Could Learn Next . . . . . . . . . . . . . . . . . . . . . . . 407
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
BUILD YOUR OWN
WEB SITE THE
RIGHT WAY USING
HTML & CSS
BY IAN LLOYD
2ND EDITION
iv

Build Your Own Web Site The Right Way Using HTML & CSS
by Ian Lloyd

Copyright © 2008 SitePoint Pty. Ltd.

Managing Editor: Chris Wyness Editor: Kelly Steele

Technical Editor: Andrew Tetlaw Index Editor: Fred Brown
Technical Editor: Julian Carroll Cover Design: Alex Walker
Technical Director: Kevin Yank Cover Image: Lucas Chan
Printing History:
First Edition: April 2006
Second Edition: November 2008

Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case
of brief quotations embodied in critical articles or reviews.

Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein.
However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any
damages to be caused either directly or indirectly by the instructions contained in this book, or by the
software or hardware products described herein.

Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only
in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of
the trademark.

Published by SitePoint Pty. Ltd.

48 Cambridge Street
Collingwood VIC Australia 3066
Web: www.sitepoint.com
Email: [email protected]

ISBN 978-0-9804552-7-4
Printed and bound in the United States of America
 v

About the Author

Ian Lloyd is a senior web designer/developer who works full time for a major financial services
organisation in the UK on their various web sites. He is the author or co-author of a number
of web development books, including SitePoint’s Ultimate HTML Reference. He has also
contributed articles to industry-leading sites such as A List Apart, Vitamin and .Net magazine.
Ian has spoken at several high profile web conferences—including South By Southwest
(SXSW) in Austin, Texas and @media in London— on his area of expertise, web accessibility,
and is responsible for the respected online accessibility resource Accessify
(http://accessify.com/).

Ian lives in Swindon, UK, a town that is known only for two things:

■ the famous “magic roundabout”—a mega roundabout that comprises five individual but
joined roundabouts

■ for being that place from the television show The Office (thus making it second in dullness
only to Slough)

That said, Ian does his best to get out of Swindon in his treasured air-cooled VW camper van
(http://vwkombi.com/) whenever the opportunity (or notoriously grim British weather) allows.

Ian is married to Manda, who doesn’t share the Volkswagen fascination to quite the same
level but enjoys the weekend trips it affords. He takes too many photos, most of them of his
dog ‘Fraggle’ (a mischievous Cairn Terrier), and is still waiting on that elusive lottery win
which will allow them all to head off on travels around the world again.

About The Technical Editors

Andrew Tetlaw has been tinkering with web sites as a web developer since 1997. Before that,
he worked as a high school English teacher, an English teacher in Japan, a window cleaner,
a car washer, a kitchen hand, and a furniture salesman. He is dedicated to making the world
a better place through the technical editing of SitePoint books and kits. He is also a busy
father of five, enjoys coffee, and often neglects his blog at http://tetlaw.id.au/.

Julian Carroll has been designing for the Web since 1996. He manages the SitePoint Solutions
(http://www.sitepoint.com.au/) team, and is a keen sampler of wine. Prior to his career as a
web designer, he played bass in a rock 'n' roll band.
vi

About SitePoint

SitePoint specializes in publishing fun, practical and easy-to-understand content for web
professionals. Visit http://www.sitepoint.com/ to access our books, newsletters, articles and
community forums.
For Manda, my “better half”. This
book would not have been
possible without your continued
support. All my love, Lloydi.
Table of Contents

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
What is a Browser? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Who Should Read This Book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
What You’ll Learn from This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
How You’ll Learn to Build Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . xxiv
HTML, Markup, CSS… Welcome to Your First Bits of Jargon! . . . . xxiv
Building the Example Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvi
What You Can Expect from the Example Web Site . . . . . . . . . . . . xxvi
What This Book Won’t Tell You . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvi
What’s in This Book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvii
The Book’s Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
The Code Archive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
Updates and Errata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxx
The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxx
Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxi
Acknowledgements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxi
Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxii

Chapter 1 Setting Up Shop . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

The Basic Tools You Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Windows Basic Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Mac OS X Basic Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Beyond the Basic Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Windows Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Mac OS X Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Not Just Text, Text, Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
x

Windows Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Mac OS X Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Creating a Spot for Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Chapter 2 Your First Web Pages . . . . . . . . . . . . . . . . . . . 19

Nice to Meet You, XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Anatomy of a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Viewing the Source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Basic Requirements of a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . 22
The Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
The html Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
The head Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
The title Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
meta Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Other head Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The body Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The Most Basic Web Page in the World . . . . . . . . . . . . . . . . . . . . . . . 31
Headings and Document Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
For People Who Love Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Commenting Your HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Diving into Our Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
The Homepage: the Starting Point for All Web Sites . . . . . . . . . . . . 41
Splitting Up the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Linking Between Our New Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
 xi

The blockquote (Who Said That?) . . . . . . . . . . . . . . . . . . . . . . . . . 66

The cite Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
strong and em . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Taking a Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Chapter 3 Adding Some Style . . . . . . . . . . . . . . . . . . . . . . 71

What is CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Adding Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
The span Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Embedded Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Jargon Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Why Embedded Styles Are Better than Inline Styles . . . . . . . . . . . . 77
External Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Why External Style Sheets Are Better than Embedded Styles . . . . . 78
Creating an External CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Linking CSS to a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Starting to Build Our Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Stylish Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
A Mixture of New Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
A New Look in a Flash! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
A Beginner’s Palette of Styling Options . . . . . . . . . . . . . . . . . . . . . . . 91
Recap: the Style Story so Far . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Looking at Elements in Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Contextual Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Grouping Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Which Rule Wins? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Recapping Our Progress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Styling Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
xii

Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Styling Partial Text Using span . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Chapter 4 Shaping Up Using CSS . . . . . . . . . . . . . . . . 117

Block-level Elements vs Inline Elements . . . . . . . . . . . . . . . . . . . . . . . . . 118
Block-level Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Inline Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Inline Begets Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Inline Elements Can Never Contain Block-level Elements . . . . . . . 122
Recap: Block-level and Inline Elements . . . . . . . . . . . . . . . . . . . . . . 123
Styling Inline and Block-level Elements . . . . . . . . . . . . . . . . . . . . . 123
Sizing Up the Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Setting a Width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Setting a Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Adding Borders to Block-level Elements . . . . . . . . . . . . . . . . . . . . . . . . . 128
Example Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Styling Individual Sides of an Element . . . . . . . . . . . . . . . . . . . . . . 133
Shorthand Border Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Border Styles You Can Use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Recap: What Have We Learned? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Shaping and Sizing Our Diving Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Adding Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Introducing Padding to the Project Site . . . . . . . . . . . . . . . . . . . . . 144
Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
The Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Positioning Elements Anywhere You Like! . . . . . . . . . . . . . . . . . . . . . . . . 148
Showing the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
What We’ve Achieved: Full CSS Layout . . . . . . . . . . . . . . . . . . . . . . . . . . 162
 xiii

Other Layout Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

More Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Relative Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Floated Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Styling Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Chapter 5 Picture This! Using Images on

Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Inline Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Anatomy of the Image Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Web Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
GIF vs JPG vs PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
PNG: King of Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Adding an Image Gallery to the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Updating the Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Adding the New Gallery Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Adding the First Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Formatting the Picture using CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Captioning the Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Basic Image Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Image Cropping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Special Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Resizing Large Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Other Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Filling up the Gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Sourcing Images for Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Background Images in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Repeated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
xiv

Non-repeating Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

Shorthand Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Fixed Heights and Widths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Setting a Background for Our Navigation . . . . . . . . . . . . . . . . . . . 218
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Chapter 6 Tables: Tools for Organizing

Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
What is a Table? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Anatomy of a Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Styling the Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Borders, Spacing, and Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Making Your Tables Accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Linearization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Captioning your Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Adding an Events Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Stylish Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Advanced Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Merging Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Advanced Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Chapter 7 Forms: Interacting with Your

Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Anatomy of a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
A Simple Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
The Building Blocks of a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
 xv

The form Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

The fieldset and legend Elements . . . . . . . . . . . . . . . . . . . . . . 254
The label Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
The input Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
The select Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
The textarea Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Submit Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
The Default Control Appearance . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Building a Contact Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Editing the Contact Us Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Adding a form and a fieldset Element . . . . . . . . . . . . . . . . . . . 270
Styling fieldset and legend with CSS . . . . . . . . . . . . . . . . . . . 272
Adding Text Input Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Tidying up label Elements with CSS . . . . . . . . . . . . . . . . . . . . . . . 278
Adding a select Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Adding a textarea Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Adding Radio Buttons and Checkboxes . . . . . . . . . . . . . . . . . . . . . . 284
Completing the Form: a Submit Button . . . . . . . . . . . . . . . . . . . . . 286
What Have We Achieved? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Processing the Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Signing Up for Form Processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Inserting the Form Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Feedback by Email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Chapter 8 Launching Your Web Site . . . . . . . . . . . . 307

The Client–Server Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Web Hosting Jargon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Hosting Your Web Site—Finding Server Space . . . . . . . . . . . . . . . . . . . . 309
Free Hosting—with a Catch! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
xvi

Free Hosting—with a Domain Name at Cost . . . . . . . . . . . . . . . . . . 311

What is Web Forwarding? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
The Downsides of Web Forwarding . . . . . . . . . . . . . . . . . . . . . . . . . 312
Paying for Web Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Hosting Essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
FTP Access to Your Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Adequate Storage Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
A Reasonable Bandwidth Allowance . . . . . . . . . . . . . . . . . . . . . . . . 317
Hosting Nice-to-haves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Email Accounts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Server Side Includes (SSIs) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Support for Scripting Languages and Databases . . . . . . . . . . . . . . 319
Pre-flight Check—How Do Your Pages Look in Different Browsers? . . . 321
Uploading Files to Your Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
FTP Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Uploading with FileZilla for Windows . . . . . . . . . . . . . . . . . . . . . . . 322
Uploading with Cyberduck—Mac OS X . . . . . . . . . . . . . . . . . . . . . . 327
Other Uploading Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Recap—Where’s Your Site At? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Checking Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Validating Your Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Promoting Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Submit Your Web Site to Search Engines . . . . . . . . . . . . . . . . . . . . 336
Tell Your Friends and Colleagues . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Craft an Email Signature with Your Web Site Details . . . . . . . . . . 337
Post on a Related Forum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Link Exchange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
 xvii

Chapter 9 Adding a Blog to Your Web Site . . . 339

Where to Set up a Blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Signing up for Blogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
How Blogger Creates a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Customizing Your Blogger Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Merging the Blogger Code with Your Existing Web Page . . . . . . . 358
Tidying up the Blogger Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Blog Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Validating Your Blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Managing Your Blogger Posts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Encouraging Others to Contribute to Your Blog . . . . . . . . . . . . . . . . . . . 374
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376

Chapter 10 Pimp My Site: Cool Stuff You Can

Add for Free . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Getting the Low-down on Your Visitors . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Choosing a Statistics Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Registering a Google Account . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Adding the Statistics Code to Your Web Pages . . . . . . . . . . . . . . . 386
A Search Tool for Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Searching by Genre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Adding a Blogroll to Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Signing up for a Blogroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Integrating the Blogroll with Your Web Site . . . . . . . . . . . . . . . . . 402
Discussion Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
xviii

Chapter 11 Where to Now? What You Could

Learn Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Improving Your XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
The Official Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Other Useful XHTML Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Advancing Your CSS Knowledge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
The Official Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
The Ultimate CSS Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
HTML Dog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
CSS Discussion Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Other CSS Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
The CSS Discuss List’s Companion Site . . . . . . . . . . . . . . . . . . . . . . 418
Learning JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Learning Server-side Programming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Scripting Languages in Brief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Learning PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Where Can You Learn PHP? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Preface
Congratulations on buying this book. Oh, wait a minute—perhaps you haven’t yet.
Perhaps you’ve just picked up the book in your local bookshop, and are trying to
decide whether it’s right for you. Why should this be the book that makes it into
your shopping basket? The answer can be found in the title of the book. It’s all about
getting it right the first time and not learning bad habits—bad habits that you have
to unlearn at a later date—for the purpose of a quick result.

Let’s take a step back for a moment, and look at another skill that many people learn
at some point in their lives: learning to drive. Apologies if that particular experience
is also new to you, but stick with me. For many people, their first driving lessons
can be very confusing; they have to figure out which pedals to press, in what order,
and manage to drive off without hitting anything. Meanwhile, other more experi­
enced people just jump into their cars, start the engine, and drive from A to B without
really thinking about what they’re doing. These drivers may have picked up a few
bad habits along the way, but if they learned with a proper driving instructor, the
chances are they were taught properly from the beginning—following a strict set of
rules to ensure they stayed safe.

The driving instructor tells you to check your mirrors diligently, observe speed
limits, and avoid cutting corners (literally as well as metaphorically!). Imagine,
though, if the instructor told you not to worry about the speed limit signs, to put
your foot down because the road is clear, or told you that the one-way sign “wasn’t
all that important at that time of night.” It’d be a miracle if you passed your driving
test, and the chances are that those bad habits would stay with you (so long as you
could manage to keep your license).

Learning to build web pages can be a bit like that.

I’ve been designing and building web sites for around ten years now, but I can
clearly remember the joy of creating my first site. Admittedly, in hindsight, it was
a pretty nasty-looking web site, but it achieved the goal at the time—I had published
a web site, and I was able to create it with the bare minimum of tools. It gave me
an enormous sense of achievement, and made me want to learn more and create
even better web sites.
xx

At the time, there was a limited amount of books available that seemed to provide
what I wanted, but I lapped up everything I could find, learning some tricks from
books, and gaining other ideas from visiting web sites. But then I discovered that
I’d been doing it all wrong. The books I had learned from had given me what later
turned out to be poor advice; the web sites I’d visited had been built by people
learning from the same sources and hence, making use of similar, bad techniques.
So, what had gone wrong?

In the early days of the web, when people first started properly to embrace the
technology, to publish homepages, and to develop online corporate presences for
their companies, they all realized fairly quickly that the medium was limited. Ne­
cessity is the mother of invention, though. So, web developers began to coax tricks
and displays out of their web pages that were never intended by the technologies
they used; the browsers helped them along the way by adding features that offered
even more opportunities for this kind of behavior.

Numerous books have been written on the topics of web design and programming,
as have many free tutorials that you can read on the web. Many of them were written
during those heady years, and were based on what seemed like best practices back
then; however, their authors were constrained by browsers that often rendered the
same well-designed pages in vastly different ways. This meant that the tutorials’
authors needed to resort to abusing various features of those browsers, such as using
data tables to lay out pages. This certainly encouraged many people to build their
first web pages, but it ensured that bad habits were ingrained at an early stage, and
many people are still using these bad practices years later.

Web developers the world over have learned bad habits (myself included) and must
now try to unlearn them all. There’s no longer a need for these practices—they often
produce pages that are inflexible, slow to download, and difficult to maintain—but
like the badly taught driver who insists on flouting the rules because it’s worked
for him so far, many developers find these outdated habits difficult to break.

I saw the light many years ago, and have tried to educate as many people as possible
since. But for the eager beginner, those same old books are still peddling the same
bad old ideas. This just has to stop. And it stops here and now.

You’re not going to learn any bad habits in this book. Not one.
 xxi

In this book, you’ll learn the right way to build a web site. If there’s a wrong way
to do things—a way that cuts corners to save time but encourages bad techniques—we
won’t even tell you about it. Not even as a “by the way, you might try this…” You
won’t need to avert your eyes—we’ll take care of that for you!

What is a Browser?
If you use Microsoft Windows XP or Vista, the browser is probably what you know
as the “little blue e on the desktop” (shown in Figure 1), but is commonly called
Internet Explorer. The majority of people don’t stray beyond using this program for
the purposes of viewing web pages—for many, Internet Explorer is the Internet.

Figure 1. Internet Explorer—the “little blue e on the desktop”

Internet Explorer (or IE, as we’ll refer to it from now on) is the most commonly used
browser, largely because Microsoft included it as part of the Windows operating
system as far back as Windows 95. (This was later to come back and haunt Microsoft:
it became the catalyst for a massive anti-trust trial, which ruled that the company
had stifled competition by bundling IE with the operating system to the exclusion
of all others.)

However, there are other browsers that you can use instead of IE. Still riding a wave
of popularity is Firefox,1 an alternative browser with a number of attractive features
that aren’t available in IE (at the time of writing), and handles the features of some
web pages better than IE can. Firefox is also available for Windows, Mac OS X, and
Linux operating systems; IE, however, is only available for Windows operating
systems. The screen shots you’ll see in this book were taken using Firefox on Win­
dows XP, unless stated otherwise. Because of the cross-platform nature of Firefox
and the excellent standards support, I recommend that you download a copy of
Firefox for the purposes of working through the exercises in this book.

1
http://www.mozilla.com/firefox/
xxii

Alternatively, you might like to try another browser that supports web standards
(we’ll cover this soon) well. For Windows users, Opera’s web browser2 offers excel­
lent standards support and its own unique set of features (it also has a very loyal
following) and, like Firefox, it can be freely downloaded. Mac users can also use
the Opera browser, the Firefox-like Camino3, or simply stick with the Apple browser
that is installed by default, Safari4, which again offers excellent support for web
standards. A selection of Mac browser icons appears in Figure 2.

Finally, there’s one more browser that you may want to try out—or perhaps you’re
already putting it through its paces—and that browser is Chrome,5 courtesy of
Google. As I sit writing and updating this chapter, Chrome is the newest, freshest
browser available; it’s even has that “new browser smell.” Okay, so it’s not quite
the same as a new car smell! But the point is that this browser is literally just days
old as I write, and currently only available for Windows XP/Vista. By the time you
read this, there may also be versions available for Mac OS X and Linux (Google has
promised they’re on the way), and initial reviews of the browser seem very good
too.

Figure 2. There are numerous browsers that you can try for free, as shown by the Mac dock in the image below

Happy with the browser you’re currently using? Well, if you’re a Windows user and
don’t want to try a different browser just yet, you can still use IE—as indeed the
majority of people using the web still do. In fact, you can be sure that everything
you read here will work in all recent browsers, whatever your choice, without any
real hiccups.

2
http://www.opera.com/download/
3
http://caminobrowser.org/
4
http://apple.com/safari/
5
http://www.google.com/chrome/
 xxiii

Who Should Read This Book?

Does this sound like you?

■ an absolute beginner—at least as far as creating web pages go

■ confident with using a computer, but not necessarily a power user
■ someone who uses the Web a lot, enjoys other people’s web sites, and would
like to create your own for one of your hobbies, or for a community you belong
to
■ quickly put off by the techno-babble that computer people tend to speak when
you try to discuss a technical problem
■ perhaps a little daunted about learning this new skill, but still keen to learn
(with some friendly hand-holding)

If any of the above descriptions strikes a chord with you, then this is the book to
put in your shopping cart. We’ll ease you in gently, and have you building web
pages like a pro in no time!

There’s no need to worry if you feel the terminology that your 15-year-old nephew
keeps spouting is beyond you when you ask him about building web sites. I’ve as­
sumed no prior knowledge of any of these terms, and I’ll be guiding you all the way
through the process of creating a web site from scratch. By the end of this book,
you’ll know how to build the site, obtain some hosting, promote the site, and keep
it running once it’s live.

The best part is this: what you learn in this book, you’ll never have to unlearn.
You’ll be learning how to build sites the right way from the get-go.

What You’ll Learn from This Book

By the time you finish reading this book and trying out the exercises contained
within, you’ll be able to build a complete web site—the right way—without incurring
any costs for expensive software or web hosting.

Using an example web site, I’ll guide you through the process of developing web
pages from scratch. From these humble beginnings, great things will evolve! By the
end of the book, you’ll be able to create a web site that includes the following fea­
tures:
xxiv

■ easy-to-use navigation
■ a professional-looking site header
■ a regularly updated news/events section
■ a Contact Us page
■ tables—the presentation of data in neatly organized grids
■ attractive web page forms
■ a simple image gallery
■ a search engine that covers your site, as well as related sites
■ simple statistics that you can use, for example, to see who’s using your site, how
they found your site, and so on

You’ll also learn how to manage your web site effectively, without it becoming a
chore or too technical. I’ll show you how you can:

■ establish your own dot-com (or dot-net, dot-org, or the like) web address
■ find a place to host your web site
■ upload your files to your web site
■ gain feedback from visitors while avoiding spam emails

How You’ll Learn to Build Your Web Site

This book will take you through each new topic using a step-by-step approach. It
provides a mixture of examples and practical exercises that will soon have you
feeling confident enough to try a little HTML for yourself.

HTML, Markup, CSS… Welcome to Your First Bits of

Jargon!
From here on in, you’re going to see these phrases more and more. But what do they
mean?

HTML
HTML stands for HyperText Markup Language. It’s the primary language that’s
used to create web pages, so you’ll come to know it very well through the course
of this book. We’ll be using XHTML syntax in the example web site, an updated
 xxv

version of HTML (the difference between HTML and XHTML is explained in

the SitePoint HTML Reference6).

Markup
Imagine, if you will, that you’re a newspaper editor. You’ve been passed a news
story, but the text—from the heading through to the conclusion—is all the same
size, and the headings, paragraphs, quotes, and other features of the text are not
clearly indicated. It’s just one big block of text. For starters, you’d probably want
to emphasize the headline, maybe by displaying it in bold or italic text (or in
caps with an exclamation mark if you were working for a tabloid). As an editor,
you’d probably grab a pen and start scribbling annotations on the printout: an
h here to signify a heading, a p here, there, and everywhere to show where
paragraphs start and end, and a q to denote quotations.

This is essentially what markup is—a set of simple tags that suggest the structure
of a document: this section is a heading, paragraph, quote, and so on. We’ll
cover the various tags that HTML uses in detail a little later.

Markup isn’t Computer Code

Markup is not the same as code. Often, people incorrectly refer to markup as
code, but code goes beyond the basic abilities of markup. With code, you can
create programs, and make your web page more dynamic, while markup
simply deals with the page’s structure. So, if you want to impress your friends
and relatives, refer to it as markup rather than code. See, we told you we’d
teach you good habits!

CSS
CSS stands for Cascading Style Sheets. We’ll be using a combination of XHTML
and CSS to create web sites. CSS is a language that lets you control how your
web pages look, but we’ll go over that in more detail later. For now, it’s important
that you know what the abbreviation stands for.

Web Standards
Web Standards advocate best practices for building web sites. Whilst the term
Web Standards may be used to describe a range of philosophies and specifica­

6
http://reference.sitepoint.com/html/html-vs-xhtml
xxvi

tions, most frequently we are referring to the recommendations published by

the World Wide Web Consortium (W3C).

At a practical level, compliance (or adherence) to web standards, refers to the

development of web pages that validate according to the W3C recommendations,
like those for HTML, XHTML or CSS, or to the guidelines for accessibility.

Building the Example Site

All examples presented in this book are backed up with a sample of the markup
you need to write, and a screen shot that shows how the results should look.

Each example is complete: nothing’s missing. You’ll see the picture build gradually,
so you won’t be left trying to guess how the example web site arrived at the point
it’s at. The files we’ll use in all the examples are provided in a separate code archive
(described in more detail in a moment).

What You Can Expect from the Example Web Site

■ a fun web site project that will be built up through the chapters
■ a complete web site that demonstrates all the features you’re likely to need in
your own web site
■ all the XHTML and CSS used to build the site in a single download

You can pick up the project at any point, so mistakes you might have made in a
previous chapter’s exercises won’t come back to haunt you!

What This Book Won’t Tell You

While it might be tempting to cram everything into one book and claim that the
reader will learn everything in 24 hours, the truth is that this isn’t necessarily the
right approach for everyone.

This book won’t try to force-feed you everything there is to know about creating
web pages; instead, it focuses on the most useful aspects that you’ll find yourself
using over and over again.

This book does not cover:

■ JavaScript
 xxvii

■ server-based programming/scripting languages, for example, ASP, PHP, Ruby

■ advanced CSS techniques
■ search engine optimization techniques

By the time you’ve finished this book and have had a chance to tackle your own
web site, you might want to take the next steps to increasing your site-building
knowledge. I’ll make recommendations where appropriate throughout the book,
and suggest other resources that you might like to check out.

So, this is where the introductory bits end and the process of learning begins—learn­
ing how to build web sites the right way. So step this way, ladies and gentlemen …

What’s in This Book?

Chapter 1: Setting Up Shop
In this chapter, we’ll make sure that you have all the tools you’re going to need
to build your web site. I’ll explain where you can access the right tools—all of
them for free! By the chapter’s end, you’ll be ready to get cracking on your first
web site.

Chapter 2: Your First Web Pages

Here, we’ll learn what makes a web page. We’ll explore XHTML, understand
the basic requirements of every web page, and investigate the common elements
that you’ll see on many web pages. Then, you’ll start to create pages yourself.
In fact, by the end of this chapter, you’ll have the beginnings of your first web
site.

Chapter 3: Adding Some Style

Now we’ll start to add a bit of polish to the web pages we created in Chapter 2.
You’ll learn what CSS is, and why it’s a good technology, before putting it into
action for yourself. As the chapter progresses, you’ll see the project web site
start to take shape as we apply background and foreground colors, change the
appearance of text, and make web links look different according to whether
they’ve been visited or not.

Chapter 4: Shaping Up with CSS

This chapter builds on Chapter 3’s introduction to the color and text-styling
abilities of CSS to reveal what CSS can do for border styles and page layouts in
xxviii

general. First, we’ll review the full range of border effects that you can apply to
elements such as headings and paragraphs. We’ll experiment with dotted borders,
and big, bold borders, as well as some slightly more subtle effects. In the second
half of the chapter, we’ll learn how it’s possible to use CSS to position the ele­
ments of a web page—including blocks of navigation—anywhere on the screen.

Chapter 5: Picture this! Using Images on Your Web Site

As the chapter title suggests, this one’s all about images. We’ll discover the
difference between inline images and background images, and look into the issue
of making images accessible for blind or visually impaired web surfers. We’ll
also learn how to adjust pictures to suit your web site using the software that
we downloaded in Chapter 1. Then we put all this knowledge together in a
practical sense to create a photo gallery for the project site.

Chapter 6: Tables: Tools for Organizing Data

Here, we’ll learn when tables should be used and, perhaps more importantly,
when they should not be used. Once the basics are out of the way, I’ll show
how you can breathe life into an otherwise dull-looking table—again, using
CSS—to make it more visually appealing.

Chapter 7: Forms: Interacting with Your Audience

In Chapter 7, we learn all about forms—what they’re used for, what’s required
to build a form, and what you can do with the data you collect through your
form. I’ll teach you what the different form elements—such as text inputs,
checkboxes, and so on—do, and show you how to use CSS to make a form look
more attractive. Finally—and other books may not explain this—I’ll show you
how you can use a free web service to have the data that’s entered into your
form emailed to you.

Chapter 8: Launching Your Web Site

It’s all well and good to build a web site for fun, but you need a way for people
to see it—that’s what this chapter is all about. We’ll learn about hosting plans,
discuss the pros and cons of using free services, and look at the tools you’ll
need in order to transfer your files from your computer at home to a web server
for the world to see.
 xxix

Chapter 9: Adding a Blog to Your Web Site

Blogging’s one of the best ways to keep your web site’s content fresh and ever-
changing. In this chapter, you’ll learn what a blog is (that’s always a good start),
and how you can set one up for yourself. We’ll also spend some time making
sure it looks consistent with the rest of your web site.

Chapter 10: Pimp My Site: Cool Stuff You Can Add for Free
You’ve heard of the MTV reality program Pimp My Ride, right? No? Well, every
week, these guys take an everyday car and transform it—with some well-placed
and carefully executed cosmetic touches—into a real head-turner of a vehicle.
And that’s the aim of this chapter for your web site! You’ll discover that there
are all kinds of tools, plugins, and add-ons that you can build into your web
site to make it even more useful for you and your visitors. Among the tools on
offer we’ll find site search facilities, statistics programs, and online discussion
forums.

Chapter 11: Where to Now? What You Can Learn Next

In this final chapter, we summarize the skills that you’ve learned in this book,
then consider your options for expanding on these. I’ll recommend web sites
that I feel can take you to that next level, and books that really should be on
your bookshelf—or rather, open on your desk next to your computer! I want to
ensure you continue to learn the good stuff once you’ve put this book down.

The Book’s Web Site

Located at http://www.sitepoint.com/books/html2/, the web site supporting this
book will give you access to the following facilities:

The Code Archive

As you progress through the text, you’ll note a number of references to the code
archive. This is a downloadable ZIP archive that contains complete code for all the
examples presented in the book. It also includes a copy of the Bubble Under web
site, which we use as an example throughout the book.

Updates and Errata

No book is perfect, and I expect that watchful readers will be able to spot at least
one or two mistakes before the end of this one. The Errata page, at
xxx

http://www.sitepoint.com/books/html2/errata.php on the book’s web site, will al­

ways have the latest information about known typographical and code errors, and
necessary updates for new browser releases and versions of web standards.

The SitePoint Forums

If you’d like to communicate with me or anyone else on the SitePoint publishing
team about this book, you should join the SitePoint Forums.7 In fact, you should
join that community even if you don’t want to talk to us, because there are a lot of
fun and experienced web designers and developers hanging out there. It’s a good
way to learn new stuff, have your questions answered (unless you really enjoy
waiting on a corporate tech support line), and just have fun.

The SitePoint Newsletters

In addition to books like this one, SitePoint offers free email newsletters.

The weekly SitePoint Tech Times covers the latest news, product releases, trends,
tips, and techniques for all technical aspects of web development. The long-running
SitePoint Tribune is a weekly digest of the business and moneymaking aspects of
the Web. Whether you’re a freelance developer looking for tips to score that dream
contract, or a marketing major striving to keep abreast of major search engine changes,
this is the newsletter for you. The SitePoint Design View is a monthly compilation
of the best in web design. From new CSS layout methods to subtle Photoshop
techniques, SitePoint’s chief designer shares his years of experience in its pages.
The SitePoint Community Crier is the newsletter of the SitePoint Forums, where
over 150,000 web professionals and enthusiasts keep abreast of all SitePoint com­
munity matters. Finally, The SitePoint Market Watch comes out twice a month with
a focus on purchasing and selling web real estate.

Browse the archives or sign up to any of SitePoint’s free newsletters at

http://www.sitepoint.com/newsletter/.

7
http://www.sitepoint.com/forums/
 xxxi

Your Feedback
If you can’t find your answer through the forums, or you wish to contact me for any
other reason, the best place to write is [email protected]. We have a well-staffed
email support system set up to track your inquiries, and if our support staff are
unable to answer your question, they send it straight to me. Suggestions for improve­
ment, as well as any mistakes you may find are especially welcome.

Acknowledgements
While writing a book sometimes seems like a solitary process, the truth is that there
are a lot of people who indirectly guide—or have guided—the hands that type the
words on these pages. None of this would have been possible had I not been pointed
in the direction of influential and persuasive web sites like webmonkey.com8, whose
CSS tutorial first made me see the light, and individuals such as Jeffrey Zeldman,
Molly Holzschlag, and Eric Meyer, whose pioneering work has benefited me (and
many others) greatly. However, if I were to list the names of all the people who have
inspired me in any way, shape, or form in the last few years, this section would end
up looking more like an index! You folks know who you are, keep up the good
work!

I would like to acknowledge the work undertaken by the Web Standards Project (of
which I am also a member, albeit a pretty inactive one for the last couple of years),
and give a little shout-out to my fellow Britpackers—wear those Union Jack pants
with pride, folks!

Thanks to all those at SitePoint who have helped me in the crafting of this book,
particularly to Simon Mackie, my main point of contact and sounding board, and
my expert reviewer for the first edition, Marc Garrett—your comments were always
on target. Thanks to Matthew Magain, Andrew Tetlaw, and Julian Carroll, who tech
edited the book—I hope I didn’t leave you much to correct or find fault with! And
then of course there’s Georgina Laidlaw and Kelly Steele, who ensured that any
peculiarly British turns of phrases were removed, despite my best efforts to sneak
a few in.

8
http://www.webmonkey.com/
xxxii

Finally, thanks to Manda for putting up with me when deadlines loomed and I all
but shut myself off from civilization to have the chapters in on time. Social life? Oh
that! I remember … At those times it seemed like it would never end, but finally
we can both see the fruits of my labor.

Conventions Used in This Book

You’ll notice that we’ve used certain typographic and layout styles throughout this
book to signify different types of information. Look out for the following:

Markup Samples
Any markup—be that HTML or CSS—will be displayed using a fixed-width font,
like so:

webpage.html (excerpt)

<h1>A perfect summer's day</h1>

<p>It was a lovely day for a walk in the park. The birds were
singing and the kids were all back at school.</p>

If the code may be found in the book’s code archive, the name of the file will appear
at the top of the program listing, like this:

example.css

.footer {
background-color: #CCC;
border-top: 1px solid #333;
}

If only part of the file is displayed, this is indicated by the word excerpt:

example.css (excerpt)

border-top: 1px solid #333;

If additional code is to be inserted into an existing example, the new code will be
displayed in bold:
 xxxiii

.footer {
background-color: #CCC;
border-top: 1px solid #333;
padding: 5px;
}

Also, where existing code is required for context, rather than repeat all the code, a
vertical ellipsis will be displayed:

.footer {
⋮
margin: 5px;
}

Some lines of code are intended to be entered on one line, but we’ve had to wrap
them because of page constraints. A ➥ indicates a line break that exists for formatting
purposes only, and should be ignored:

URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she
➥ets-come-of-age/");

Menus
When you need to select an option from a menu, it’ll be written as File > Save; this
means “select the Save option from the File menu.”

Tips, Notes, and Warnings

Hey, You!
Tips will give you helpful little pointers.

Ahem, Excuse Me …
Notes are useful asides that are related—but not critical—to the topic at hand.
Think of them as extra tidbits of information.
xxxiv

Make Sure You Always …

… pay attention to these important points.

Watch Out!
Warnings will highlight any gotchas that are likely to trip you up along the way.
 1
Chapter

Setting Up Shop
Before you dive in and start to build your web site, we need to take a little time to
get your computer set up and ready for the work that lies ahead. That’s what this
chapter is all about: ensuring that you have all the tools you need installed and are
ready to go.

If you were to look at the hundreds of computing books for sale in your local
bookstore, you could be forgiven for thinking that you’d need to invest in a lot of
different programs to build a web site. However, the reality is that most of the tools
you need are probably sitting there on your computer, tucked away somewhere you
wouldn’t think to look for them. And if ever you don’t have the tool for the job,
there’s almost certain to be one or more free programs available that can handle the
task.

We’ve made the assumption that you already have an Internet connection, most
likely broadband (or similar). Don’t worry if you have a slower connection: it won’t
affect any of the tasks we’ll undertake in this book. It will, however, mean that some
of the suggested downloads or uploads may take longer to complete, but you probably
knew that already.
2 Build Your Own Web Site The Right Way Using HTML & CSS

Planning, Schmanning
At this point, it might be tempting to look at your motives for building a web site.
Do you have a project plan? What objectives do you have for the site?

While you probably have some objectives, and some idea of how long you want
to spend creating your site, we’re going to gloss over the nitty-gritty of project
planning to some extent. This is not to say that project planning isn’t an important
aspect to consider, but we’re going to assume that because you’ve picked up a
book entitled Build Your Own Web Site The Right Way, you probably want to just
get right into the building part.

As this is your first web site and it will be a fairly simple one, we can overlook
some of the more detailed aspects of site planning. Later, once you’ve learned—and
moved beyond—the basics of building a site, you may feel ready to tackle a larger,
more technically challenging site. When that time comes, proper planning will
be a far more important aspect of the job. But now, let’s gear up to build our first,
simple site.

The Basic Tools You Need

As I mentioned earlier, many of the tools you’ll need to build your first web site are
already on your computer. So, what tools do you need?

■ The primary—and most basic—tool that you’ll need is a text editor; a program
that allows you to edit plain text files. You’ll use this to write your web pages.

■ Once you’ve written a web page, you can see how it looks in a web
browser—that’s the application you use to view web sites.

■ Finally, when you’re happy with your new web page, you can put it on the
Internet using an FTP client—a utility that allows you to transfer files across the
Internet using the File Transfer Protocol. Using FTP may seem a little complicated
at first, but thankfully you won’t need to do it too often. We’ll discuss FTP clients
in detail in Chapter 8.

You’ve already got most of these programs on your computer, so let’s go and find
them.
 Setting Up Shop 3

Windows Basic Tools

In the following section—and indeed the rest of this book—where we refer to the
Windows operating system, that’s really a shorthand way of saying Windows Vista
(in all its confusing varieties). Any instructions and screen shots will be with Vista
in mind. However, we are not going to shut out all you Windows XP users—and
there are many people out there who use XP in preference to Vista, much to Micro­
soft’s displeasure—so where instructions provided for Vista are not the same for
XP, we’ll cover the differences for you.

Your Text Editor: Notepad

The first tool we’ll consider is the text editor. Windows comes with a very simple
text editor called Notepad. Many professional web designers who use complicated
software packages first started out many years ago using Notepad; indeed, many
professionals who have expensive pieces of software that should be time-savers
still resort to using Notepad for many tasks. Why? Well, because it’s so simple, little
can go wrong. It also loads much more quickly than fully-featured web development
programs. Bells and whistles are definitely not featured.

You can find Notepad in the Start menu: go to Start > All Programs > Accessories.

Shortcut to Notepad
To save yourself navigating to this location each time you want to open Notepad,
create a shortcut on your desktop. With the Start menu open to display Notepad’s
location, hold down the Ctrl key, click and hold down the mouse button, then
drag the Notepad icon to your desktop. When you release the mouse button, a
shortcut to the application will appear on your desktop, as in Figure 1.1.

Figure 1.1. Creating a shortcut to Notepad

Notepad is the most basic of applications, as you can see from Figure 1.2.
4 Build Your Own Web Site The Right Way Using HTML & CSS

Figure 1.2. Notepad: a contender for the world’s plainest program?

Your Web Browser: Internet Explorer

Once you’ve created a web page using Notepad, you’ll need a way to view the results
of your handiwork. You’ll remember that in the preface to this book, we mentioned
Internet Explorer (IE). Well, that’s your viewer. As Figure 1.3 shows, Internet Explorer
sits right there in the Start menu, also in the Programs folder (accessed via All Programs
from the Start menu), in the Quick Launch area (bottom left of the Start menu, near
the Windows logo), and a shortcut may also lurk on your desktop.

Figure 1.3. Internet Explorer: there’s no hiding this browser!

 Setting Up Shop 5

Mac OS X Basic Tools

Like Windows, the Mac operating system (specifically OS X; we won’t be looking
at previous versions of the Mac OS) has a number of tools that you can use straight
out of the box. These tools are virtually equivalent to the Windows programs men­
tioned above.

Your Text Editor: TextEdit

While Windows has Notepad, the Mac has TextEdit, which can be found in the
Applications folder, as Figure 1.4 illustrates.

Figure 1.4. TextEdit comes as part of Mac OS X’s default installation

Unlike Notepad, TextEdit works as a rich text editor by default, which means we
can work with fonts, make text bold and italic, and so on. However, we want to
work with TextEdit as a plain text editor, so you’ll need to adjust some of TextEdit’s
preferences. Start TextEdit, then select TextEdit > Preferences from the menu to bring
up the Preferences screen. Select Plain text within New Document Attributes, then
close the Preferences screen. The next time you create a new file in TextEdit, it will
be a plain text document.

Your Web Browser: Safari

The default browser for Mac users is Safari. You can usually find Safari in the dock
(the dock is the bar of icons at the bottom of your screen), but you can also access
it through the Applications folder, as Figure 1.5 illustrates.
6 Build Your Own Web Site The Right Way Using HTML & CSS

Figure 1.5. Safari is available via Mac’s Applications folder

Stick It in the Dock

Just as you can drag shortcuts to programs onto the Windows desktop, you can
add programs to the dock in Mac OS X. To add a program to the dock, just drag
its icon from the Applications folder onto the dock, and presto! The application
is now easily accessible whenever you need it.

If you are using a slightly older Mac, you may also have a copy of Internet Explorer
installed. Our advice for Internet Explorer for Mac? Send it to Trash. The Mac version
of IE was abandoned by Microsoft many years ago, so it’s considerably outdated
and is rarely supported or used in the wider world; no new Macs come with this
application preinstalled. It also bears no real resemblance to its Windows counter­
part, for those more comfortable using IE.

Beyond the Basic Tools

You can certainly make a good start using the tools mentioned above. However,
once you’re dealing with a handful of web pages and other resources, you may want
to go beyond these basic tools. We’ll show you how to use some slightly more ad­
vanced applications later in the book.

Countless other text editors and web browsers are available for download, and many
of them are free. Obviously, we don’t have time to describe each and every one of
 Setting Up Shop 7

them, so I’ve settled on a few options that have worked for me in the past, and which
you might like to download and have at your disposal. And remember, they’re all
free!

Windows Tools
NoteTab
NoteTab’s tabbed interface lets you have many different files open simultaneously
without cluttering up your screen, as Figure 1.6 illustrates. Files that you’ve opened
are remembered even after you close the program and open it again later, which is
very useful when you’re working on a batch of files over many days. You can
download the free NoteTab, or its Light version, from http://www.notetab.com/.

Figure 1.6. NoteTab Light’s tabbed interface

Firefox
As mentioned in the Preface, Firefox is a very popular alternative to Internet Explorer
and, as we proceed through this book, it will be our browser of choice for a number
of reasons. As with NoteTab, Firefox offers a tabbed interface that helps keep your
computer free from window clutter. You can download Firefox from
http://www.mozilla.com/firefox/; the browser is depicted in Figure 1.7.
8 Build Your Own Web Site The Right Way Using HTML & CSS

Figure 1.7. Firefox—this creature is worth hunting down

Mac OS X Tools
It is true that there are fewer free programs available for the Mac operating system
than there are for Windows. However, there are a few programs that you might like
to consider as you move beyond the basics.

TextWrangler
TextWrangler is a free, simple text editor made by BareBones Software. As with
NoteTab for Windows, TextWrangler can tidy up your workspace by allowing sev­
eral text files to be open for editing at the same time (the documents are listed in a
pull-out drawer to one side of the interface, rather than in tabs). You can download
TextWrangler, shown in Figure 1.8, from the BareBones Software web site.1

1
http://www.barebones.com/products/textwrangler/
 Setting Up Shop 9

Figure 1.8. TextWrangler, a free text editor from BareBones Software

Firefox
Firefox is popular not just among Windows users, but also with Mac users, many
of whom prefer to use it instead of Safari (often because of the extra features—known
as add-ons—that can be bolted on to the browser). A web page viewed in Firefox
should display the same regardless of whether the browser is installed on a PC
running Windows XP or Vista, on a Mac running OS X, or on Linux, a free, open
source operating system (generally favored by highly technical people who like to
tinker with their computers a lot). The predictability of Firefox is a welcome change
from the bad old days of endless browser competition, and is one very good reason
why we will mainly use Firefox in the examples included in this book.

Not Just Text, Text, Text

You can build an entire web site using just the tools mentioned above, but it won’t
be the sexiest site on the Web. The missing element here is images: so far, the pro­
grams we’ve mentioned are used to manipulate plain text or view web pages. If your
web site is going to be visually appealing, you’ll need to be able to create and ma­
nipulate images, either from scratch using photos you’ve taken, or using images
that you have the legal right to use on your web site.

Unfortunately, when it comes to image editing software, that old saying, “You get
what you pay for,” applies. A professional image editing program, like Photoshop
or Fireworks, costs hundreds of dollars. While these programs offer some excellent
capabilities, we can’t really recommend that you go out and pay for them unless
you’re sure that they’re right for you. If you already have a copy of one of these, or
a similar image editing program, by all means use it and experiment with it. Programs
10 Build Your Own Web Site The Right Way Using HTML & CSS

like Paint Shop Pro or Photoshop Elements (a cut-down version of Photoshop) are
more reasonably priced. However, for the purposes of this book, we’ll look only at
tools that are free to download and offer enough functionality to give you an idea
of what’s possible.

Keep an eye open for free image editors that are included on disks attached to the
covers of Internet, computing, and design magazines. Software vendors often give
away older versions of their software in the hope that users might be tempted to
upgrade to a new version at a later date. Look out for Paint Shop Pro, or any image
editor that supports layers—a way to construct an image by stacking 2 or more
layers, one on top of the other. While we’ll keep our image editing fairly simple
throughout this book, it’s certainly worth keeping an eye open for free (and full-
featured) image editing software, as these offers will not always be available.

Taking the Big Boys for a Spin

The most commonly used image editing packages are available for trial download.
They are large downloads (hundreds of megabytes) and may need to be left to
download overnight, even on a broadband connection.

These trial versions are typically available for 30 days’ use; after that time you
can decide whether you want to pay for the full software or stop using the program.
However, those 30 days might just be enough time for you to use the software
while you work through this book.

Adobe Photoshop A trial of the latest version of Photoshop is available for

download.2 If you’d rather try the lighter Photoshop Ele­
ments, trial versions are available for Windows3 and Mac.4

Adobe Fireworks You can download a trial version of Fireworks from the
Adobe web site.5

Paint Shop Pro Paint Shop Pro is available for Windows only. To download
a trial version, visit the Paint Shop Pro site,6 and click the
Free Trial link.

2
http://www.adobe.com/products/photoshop/
3
http://www.adobe.com/products/photoshopelwin/
4
http://www.adobe.com/products/photoshopelmac/
5
http://www.adobe.com/products/fireworks/
6
http://www.corel.com/paintshoppro/
 Setting Up Shop 11

Windows Tools
A standard Windows install has not always been blessed with image editing software.
Certainly this was the case with Windows XP (although if you bought the computer
as a bundle with PC, scanner, or digital camera all together, you might be lucky and
find some image editing software included in the deal; scout around in your Start
> All Programs menu to see what you can uncover).

In Windows Vista, the Photo Gallery application has seen some big improvements
over its previous XP incarnation and now includes some basic, but still useful, image
manipulation tools, including cropping, color, and contrast adjustment. The Photo
Gallery application can be found directly in the Start menu.

Figure 1.9. Vista’s Photo Gallery application

Picasa
If you’re using Vista, the tools offered in Photo Gallery may do everything that you
need; if you’re using XP, you’ll almost certainly need to use an extra application.
With that in mind, you might like to try out an excellent image management tool
that Google offers for free download. The program is called Picasa, and it’s extremely
Discovering Diverse Content Through
Random Scribd Documents
—Vamos a hacer una cosa—propuso el sainetero amigo de Casares.
—¿Qué?—preguntó Julio.
—Vamos a casa de Villasús. Pura habrá salido del teatro ahora.
Villasús, según le dijeron a Andrés, era un autor dramático que tenía
dos hijas coristas. Este Villasús vivía en la Cuesta de Santo Domingo.
Se dirigieron a la Puerta del Sol; compraron pasteles en la calle del
Carmen esquina a la del Olivo; fueron después a la Cuesta de Santo
Domingo, y se detuvieron delante de una casa grande.
—Aquí no alborotemos—advirtió el sainetero, porque el sereno no
nos abriría.
Abrió el sereno, entraron en un espacioso portal, y Casares y su
amigo, Julio, Andrés y el director de El Masón Ilustrado, comenzaron
a subir una ancha escalera hasta llegar a las guardillas,
alumbrándose con fósforos.
Llamaron en una puerta, apareció una muchacha que les hizo pasar
a un estudio de pintor y poco después se presentó un señor de
barba y pelo entrecano, envuelto en un gabán.
Este señor Rafael Villasús era un pobre diablo autor de comedias y
de dramas detestables en verso.
El poeta, como se llamaba él, vivía su vida en artista, en bohemio;
era en el fondo un completo majadero, que había echado a perder a
sus hijas por un estúpido romanticismo.
Pura y Ernestina llevaban un camino desastroso; ninguna de las dos
tenía condición para la escena; pero el padre no creía más que en el
arte, y las había llevado al Conservatorio, luego metido en un teatro
de partiquinas y relacionado con periodistas y cómicos.
Pura, la mayor, tenía un hijo con un sainetero amigo de Casares, y
Ernestina estaba enredada con un revendedor.
El amante de Pura, además de un acreditado imbécil, fabricante de
chistes estúpidos, como la mayoría de los del gremio, era un
granuja, dispuesto a llevarse todo lo que veía. Aquella noche estaba
allí. Era un hombre alto, flaco, moreno, con el labio inferior colgante.
Los dos saineteros hicieron gala de su ingenio, sacando a relucir una
colección de chistes viejos y manidos. Ellos dos y los otros, Casares,
Aracil y el director de El Masón Ilustrado, tomaron la casa de Villasús
como terreno conquistado e hicieron una porción de horrores con
una mala intención canallesca.
Se reían de la chifladura del padre, que creía que todo aquello era la
vida artística. El pobre imbécil no notaba la mala voluntad que
ponían todos en sus bromas.
Las hijas, dos mujeres estúpidas y feas, comieron con avidez los
pasteles que habían llevado los visitantes, sin hacer caso de nada.
Uno de los saineteros hizo el león, tirándose por el suelo y rugiendo,
y el padre leyó unas quintillas que se aplaudieron a rabiar.
Hurtado, cansado del ruido y de las gracias de los saineteros, fué a
la cocina a beber un vaso de agua y se encontró con Casares y el
director de El Masón Ilustrado. Este estaba empeñado en ensuciarse
en uno de los pucheros de la cocina y echarlo luego en la tinaja del
agua.
Le parecía la suya una ocurrencia graciosísima.
—Pero usted es un imbécil—le dijo Andrés bruscamente.
—¿Cómo?
—Que es usted un imbécil, una mala bestia.
—¡Usted no me dice a mí eso!—gritó el masón.
—¿No está usted oyendo que se lo digo?
—En la calle no me repite usted eso.
—En la calle y en todas partes.
Casares tuvo que intervenir, y como sin duda quería marcharse,
aprovechó la ocasión de acompañar a Hurtado diciendo que iba para
evitar cualquier conflicto. Pura bajó a abrirles la puerta, y el
periodista y Andrés fueron juntos hasta la Puerta del Sol. Casares le
brindó su protección a Andrés; sin duda, prometía protección y
ayuda a todo el mundo.
Hurtado se marchó a casa mal impresionado. Doña Virginia,
explotando y vendiendo mujeres; aquellos jóvenes, escarneciendo a
una pobre gente desdichada. La piedad no aparecía por el mundo.
 IV

LULÚ

La conversación que tuvo en el baile con Lulú, dió a Hurtado el

deseo de intimar algo más con la muchacha.
Realmente la chica era simpática y graciosa. Tenía los ojos
desnivelados, uno más alto que otro, y al reir los entornaba hasta
convertirlos en dos rayitas, lo que le daba una gran expresión de
malicia; su sonrisa levantaba las comisuras de los labios para arriba,
y su cara tomaba un aire satírico y agudo.
No se mordía la lengua para hablar. Decía habitualmente horrores.
No había en ella dique para su desenfreno espiritual, y cuando
llegaba a lo más escabroso, una expresión de cinismo brillaba en sus
ojos.
El primer día que fué Andrés a ver a Lulú después del baile, contó su
visita a casa de doña Virginia.
—¿Estuvieron ustedes a ver a la comadrona?—preguntó Lulú.
—Sí
—Valiente tía cerda.
—Niña—exclamó doña Leonarda-, ¿qué expresiones son esas?
—¿Pues qué es, sino una alcahueta o algo peor?
—¡Jesús! ¡Qué palabras!
—A mí me vino un día—siguió diciendo Lulú—preguntándome si
quería ir con ella a casa de un viejo. ¡Qué tía guarra!
A Hurtado le asombraba la mordacidad de Lulú. No tenía ese
repertorio vulgar de chistes oídos en el teatro; en ella todo era
callejero, popular.
Andrés comenzó a ir con frecuencia a la casa, sólo para oir a Lulú.
Era, sin duda, una mujer inteligente, cerebral, como la mayoría de
las muchachas que viven trabajando en las grandes ciudades, con
una aspiración mayor por ver, por enterarse, por distinguirse, que
por sentir placeres sensuales.
A Hurtado le sorprendía; pero no le producía la más ligera idea de
hacerle el amor. Hubiera sido imposible para él pensar que pudiera
llegar a tener con Lulú más que una cordial amistad.
Lulú bordaba para un taller de la calle de Segovia, y solía ganar
hasta tres pesetas al día. Con esto, unido a la pequeña pensión de
doña Leonarda, vivía la familia; Niní ganaba poco, porque, aunque
trabajaba, era torpe.
Cuando Andrés iba por las tardes, se encontraba a Lulú con el
bastidor en las rodillas, unas veces cantando a voz en grito, otras
muy silenciosa.
Lulú cogía rápidamente las canciones de la calle y las cantaba con
una picardía admirable. Sobre todo, esas tonadillas encanalladas, de
letra grotesca, eran las que más le gustaban.
El tango aquel que empieza diciendo:

Un cocinero de Cádiz, muy afamado,

a las mujeres las compara con el guisado

y esos otros en que las mujeres entran en quinta, o tienen que ser
marineras, el de la ¿Niña qué?, o el de las mujeres que montan en
bicicleta, en el que hay esa preocupación graciosa, expresada así:
 Por eso hay ahora
mil discusiones,
por si han de llevar faldas
o pantalones.

Todas estas canciones populares las cantaba con muchísima gracia.

A veces le faltaba el humor y tenía esos silencios llenos de
pensamientos de las chicas inquietas y neuróticas. En aquellos
instantes sus ideas parecían converger hacia adentro, y la fuerza de
la ideación le impulsaba a callar. Si la llamaban de pronto, mientras
estaba ensimismada, se ruborizaba y se confundía.
—No sé lo que anda maquinando cuando está así—decía su madre
—; pero no debe ser nada bueno.
Lulú le contó a Andrés que de chica había pasado una larga
temporada sin querer hablar. En aquella época el hablar le producía
una gran tristeza, y desde entonces le quedaban estos arrechuchos.
Muchas veces Lulú dejaba el bastidor y se largaba a la calle a
comprar algo en la mercería próxima, y contestaba a las frases de
los horteras de la manera más procaz y descarada.
Este poco apego a defender los intereses de la clase les parecía a
doña Leonarda y a Niní una verdadera vergüenza.
—Ten en cuenta que tu padre fué un personaje—decía doña
Leonarda con énfasis.
—Y nosotras nos morimos de hambre—replicaba Lulú.
Cuando obscurecía y las tres mujeres dejaban la labor, Lulú se metía
en algún rincón, apoyándose en varios sitios al mismo tiempo. Así
como encajonada, en un espacio estrecho, formado por dos sillas y
la mesa o por las sillas y el armario del comedor, se ponía a hablar
con su habitual cinismo, escandalizando a su madre y a su hermana.
Todo lo que fuera deforme en un sentido humano la regocijaba.
Estaba acostumbrada a no guardar respeto a nada ni a nadie. No
podía tener amigas de su edad, porque le gustaba espantar a las
mojigatas con barbaridades; en cambio, era buena para los viejos y
para los enfermos, comprendía sus manías, sus egoísmos, y se reía
de ellos. Era también servicial; no le molestaba andar con un chico
sucio en brazos o cuidar de una vieja enferma de la guardilla.
A veces, Andrés la encontraba más deprimida que de ordinario;
entre aquellos parapetos de sillas viejas solía estar con la cabeza
apoyada en la mano, riéndose de la miseria del cuarto, mirando
fijamente el techo o alguno de los agujeros de la estera.
Otras veces se ponía a cantar la misma canción sin parar.
—Pero, muchacha, ¡cállate!—decía su madre—. Me tienes loca con
ese estribillo.
Y Lulú callaba; pero al poco tiempo volvía con la canción.
A veces iba por la casa un amigo del marido de doña Leonarda, don
Prudencio González.
Don Prudencio era un chulo grueso, de abdomen abultado. Gastaba
levita negra, chaleco blanco, del que colgaba la cadena del reloj
llena de dijes. Tenía los ojos desdeñosos, pequeños, el bigote corto y
pintado y la cara roja. Hablaba con acento andaluz y tomaba
posturas académicas en la conversación.
El día que iba don Prudencio, doña Leonarda se multiplicaba.
—Usted, que ha conocido a mi marido—decía con voz lacrimosa—.
Usted, que nos ha visto en otra posición.
Y doña Leonarda hablaba con lágrimas en los ojos de los
esplendores pasados.
 V

MÁS DE LULÚ

Algunos días de fiesta, por la tarde, Andrés acompañó a Lulú y a su

madre a dar un paseo por el Retiro o por el Jardín Botánico.
El Botánico le gustaba más a Lulú por ser más popular y estar cerca
de su casa, y por aquel olor acre que daban los viejos mirtos de las
avenidas.
—Porque es usted, le dejo que acompañe a Lulú—decía doña
Leonarda, con cierto retintín.
—Bueno, bueno, mamá—replicaba Lulú—. Todo eso está de más.
En el Botánico se sentaban en algún banco, y charlaban. Lulú
contaba su vida y sus impresiones, sobre todo de la niñez. Los
recuerdos de la infancia estaban muy grabados en su imaginación.
—¡Me da una pena pensar en cuando era chica!—decía.
—¿Por qué? ¿Vivía usted bien?—le preguntaba Hurtado.
—No, no; pero me da mucha pena.
Contaba Lulú que de niña la pegaban para que no comiera el yeso
de las paredes y los periódicos. En aquella época había tenido
jaquecas, ataques de nervios; pero ya hacía mucho tiempo que no
padecía ningún trastorno. Eso sí, era un poco desigual; tan pronto se
sentía capaz de estar derecha una barbaridad de tiempo, como se
encontraba tan cansada, que el menor esfuerzo la rendía.
Esta desigualdad orgánica se reflejaba en su manera de ser
espiritual y material. Lulú era muy arbitraria; ponía sus antipatías y
sus simpatías sin razón alguna.
No le gustaba comer con orden, ni quería alimentos calientes; sólo le
apetecían cosas frías, picantes, con vinagre, escabeche, naranjas...
—¡Ah!, si yo fuera de su familia, eso no se lo consentiría a usted—le
decía Andrés.
—¿No?
—No.
—Pues diga usted que es mi primo.
—Usted ríase—contestaba Andrés—; pero yo la metería en cintura.
—¡Ay, ay, ay, que me estoy mareando!—contestaba ella, cantando
descaradamente.
Andrés Hurtado trataba a pocas mujeres; si hubiese conocido más y
podido comparar, hubiera llegado a sentir estimación por Lulú.
En el fondo de su falta de ilusión y de moral, al menos de moral
corriente, tenía esta muchacha una idea muy humana y muy noble
de las cosas. A ella no le parecían mal el adulterio, ni los vicios, ni
las mayores enormidades; lo que le molestaba era la doblez, la
hipocresía, la mala fe. Sentía un gran deseo de lealtad.
Decía que si un hombre la pretendía, y ella viera que la quería de
verdad, se iría con él, fuera rico o pobre, soltero o casado.
Tal afirmación parecía una monstruosidad, una indecencia a Niní y a
doña Leonarda. Lulú no aceptaba derechos ni prácticas sociales.
—Cada cual debe hacer lo que quiera—decía.
El desenfado inicial de su vida le daba un valor para opinar muy
grande.
—¿De veras se iría usted con un hombre?—le preguntaba Andrés.
—Si me quería de verdad, ¡ya lo creo! Aunque me pegara después.
—¿Sin casarse?
—Sin casarme, ¿por qué no? Si vivía dos o tres años con ilusión y
con entusiasmo, pues eso no me lo quitaba nadie.
—¿Y luego?...
—Luego seguiría trabajando como ahora, o me envenenaría.
Esta tendencia al final trágico era muy frecuente en Lulú; sin duda le
atraía la idea de acabar, y de acabar de una manera melodramática.
Decía que no le gustaría llegar a vieja.
En su franqueza extraordinaria, hablaba con cinismo. Un día le dijo a
Andrés:
—Ya ve usted: hace unos años estuve a punto de perder la honra,
como decimos las mujeres.
—¿Por qué?—preguntó Andrés, asombrado, al oir esta revelación.
—Porque un bestia de la vecindad quiso forzarme. Yo tenía doce
años. Y gracias que llevaba pantalones y empecé a chillar; si no...
estaría deshonrada—añadió con voz campanuda.
—Parece que la idea no le espanta a usted mucho.
—Para una mujer que no es guapa, como yo, y que tiene que estar
siempre trabajando, como yo, la cosa no tiene gran importancia.
¿Qué había de verdad en esta manía de sinceridad y de análisis de
Lulú?—se preguntaba Andrés—. ¿Era espontánea, era sentida, o
había algo de ostentación para parecer original? Difícil era
averiguarlo.
Algunos sábados por la noche, Julio y Andrés convidaban a Lulú, a
Niní y a su madre a ir a algún teatro, y después entraban en un café.
 VI

MANOLO EL CHAFANDÍN

Una amiga, con la cual solía prestarse mutuos servicios Lulú, era una
vieja, planchadora de la vecindad, que se llamaba Venancia.
La señora Venancia tendría unos sesenta años, y trabajaba
constantemente; invierno y verano estaba en su cuartucho, sin cesar
de planchar un momento. La señora Venancia vivía con su hija y su
yerno, un chulapo a quien llamaban Manolo el Chafandín.
El tal Manolo, hombre de muchos oficios y de ninguno, no trabajaba
más que rara vez, y vivía a costa de la suegra.
Manolo tenía tres o cuatro hijos, y el último era una niña de pecho
que solía estar con frecuencia metida en un cesto en el cuarto de la
señora Venancia, y a quien Lulú solía pasear en brazos por la galería.
—¿Qué va a ser esta niña?—preguntaban algunos.
Y Lulú contestaba:
—Golfa, golfa—u otra palabra más dura, y añadía: Así la llevarán en
coche, como a la Estrella.
La hija de la señora Venancia era una vaca sin cencerro, holgazana,
borracha, que se pasaba la vida disputando con las comadres de la
vecindad. Como a Manolo, su hombre, no le gustaba trabajar, toda la
familia vivía a costa de la señora Venancia, y el dinero del taller de
planchado no bastaba, naturalmente, para subvenir a las
necesidades de la casa.
Cuando la Venancia y el yerno disputaban, la mujer de Manolo
siempre salía a la defensa del marido, como si este holgazán tuviera
derecho a vivir del trabajo de los demás.
Lulú, que era justiciera, un día, al ver que la hija atropellaba a la
madre, salió en defensa de la Venancia, y se insultó con la mujer de
Manolo; la llamó tía zorra, borracha, perro y añadió que su marido
era un cabronazo; la otra le dijo que ella y toda su familia eran unas
cursis muertas de hambre, y gracias a que se interpusieron otras
vecinas, no se tiraron de los pelos.
Aquellas palabras ocasionaron un conflicto, porque Manolo el
Chafandín, que era un chulo aburrido, de estos cobardes, decidió
pedir explicaciones a Lulú de sus palabras.
Doña Leonarda y Niní, al saber lo ocurrido, se escandalizaron. Doña
Leonarda echó una chillería a Lulú por mezclarse con aquella gente.
Doña Leonarda no tenía sensibilidad más que para las cosas que se
referían a su respetabilidad social.
—Estás empeñada en ultrajarnos—dijo a Lulú medio llorando—.
¿Qué vamos a hacer, Dios mío, cuando venga ese hombre?
—Que venga—replicó Lulú—; yo le diré que es un gandul y que más
le valía trabajar y no vivir de su suegra.
—¿Pero a ti qué te importa lo que hacen los demás? ¿Por qué te
mezclas con esa gente?
Llegaron por la tarde Julio Aracil y Andrés y doña Leonarda les puso
al corriente de lo ocurrido.
—Qué demonio; no les pasará a ustedes nada—dijo Andrés—; aquí
estaremos nosotros.
Aracil, al saber lo que sucedía y la visita anunciada del Chafandín, se
hubiera marchado con gusto, porque no era amigo de trifulcas; pero
por no pasar por un cobarde, se quedó.
A media tarde llamaron a la puerta, y se oyó decir:
—¿Se puede?
—Adelante—dijo Andrés.
Se presentó Manolo el Chafandín, vestido de día de fiesta, muy
elegante, muy empaquetado, con un sombrero ancho torero y una
gran cadena de reloj de plata. En su mejilla, un lunar negro y rizado
trazaba tantas vueltas como el muelle de un reloj de bolsillo. Doña
Leonarda y Niní temblaron al ver a Manolo. Andrés y Julio le
invitaron a explicarse.
El Chafandín puso su garrota en el antebrazo izquierdo, y comenzó
una retahila larga de reflexiones y consideraciones acerca de la
honra y de las palabras que se dicen imprudentemente.
Se veía que estaba sondeando a ver si se podía atrever a echárselas
de valiente, porque aquellos señoritos lo mismo podían ser dos
panolis que dos puntos bragados que le hartasen de mojicones.
Lulú escuchaba nerviosa, moviendo los brazos y las piernas,
dispuesta a saltar.
El Chafandín comenzó a envalentonarse al ver que no le
contestaban, y subió el tono de la voz.
—Porque aquí (y señaló a Lulú con el garrote) le ha llamado a mi
señora zorra, y mi señora no es una zorra; habrá otras más zorras
que ella, y aquí (y volvió a señalar a Lulú) ha dicho que yo soy un
cabronazo, y ¡maldita sea la!... que yo le como los hígados al que
diga eso.
Al terminar su frase, el Chafandín dió un golpe con el garrote en el
suelo.
Viendo que el Chafandín se desmandaba, Andrés, un poco pálido, se
levantó y le dijo:
—Bueno; siéntese usted.
—Estoy bien así—dijo el chulo.
—No, hombre. Siéntese usted. Está usted hablando desde hace
mucho tiempo, de pie, y se va usted a cansar.
Manolo el Chafandín se sentó, algo escamado.
—Ahora, diga usted—siguió diciendo Andrés—qué es lo que usted
quiere, en resumen.
—¿En resumen?
—Sí.
—Pues yo quiero una explicación.
—Una explicación, ¿de qué?
—De las palabras que ha dicho aquí (y volvió a señalar a Lulú)
contra mi señora y contra este servidor.
—Vamos, hombre, no sea usted imbécil.
—Yo no soy imbécil.
—¿Qué quiere usted que diga esta señorita? ¿Que su mujer no es
una zorra, ni una borracha, ni un perro, y que usted no es un
cabronazo? Bueno; Lulú, diga usted eso para que este buen hombre
se vaya tranquilo.
—A mí ningún pollo neque me toma el pelo—dijo el Chafandín,
levantándose.
—Yo lo que voy a hacer—dijo Andrés irritado—es darle un silletazo
en la cabeza y echarle a puntapiés por las escaleras.
—¿Usted?
—Sí; yo.
Y Andrés se acercó al chulo con la silla en el aire. Doña Leonarda y
sus hijas empezaron a gritar; el Chafandín se acercó rápidamente a
la puerta y la abrió. Andrés se fué a él; pero el Chafandín cerró la
puerta y se escapó por la galería, soltando bravatas e insultos.
Andrés quería salir a calentarle las costillas para enseñarle a tratar a
las personas; pero entre las mujeres y Julio le convencieron de que
se quedara.
Durante toda la riña Lulú estaba vibrando, dispuesta a intervenir.
Cuando Andrés se despidió, le estrechó la mano entre las suyas con
más fuerza que de ordinario.
 VII

HISTORIA DE LA VENANCIA

La escena bufa con Manolo el Chafandín hizo que en la casa de doña

Leonarda se le considerara a Andrés como a un héroe. Lulú le llevó
un día al taller de la Venancia. La Venancia era una de estas viejas
secas, limpias, trabajadoras; se pasaba el día sin descansar un
momento.
Tenía una vida curiosa. De joven había estado de doncella en varias
casas, hasta que murió su última señora y dejó de servir.
La idea del mundo de la Venancia era un poco caprichosa. Para ella
el rico, sobre todo el aristócrata, pertenecía a una clase superior a la
humana.
Un aristócrata tenía derecho a todo, al vicio, a la inmoralidad, al
egoísmo; estaba como por encima de la moral corriente. Una pobre
como ella, voluble, egoísta o adúltera le parecía una cosa
monstruosa; pero esto mismo en una señorona lo encontraba
disculpable.
A Andrés le asombraba una filosofía tan extraña, por la cual el que
posee salud, fuerza, belleza y privilegios tiene más derecho a otras
ventajas que el que no conoce más que la enfermedad, la debilidad,
lo feo y lo sucio.
Aunque no se sabe la garantía científica que tenga, hay en el cielo
católico, según la gente, un santo, San Pascual Bailón, que baila
delante del Altísimo, y que dice siempre: Más, más, más. Si uno
tiene suerte, le da más, más, más; si tiene desgracias le da también
más, más, más. Esta filosofía bailonesca era la de la señora
Venancia.
La señora Venancia, mientras planchaba, contaba historias de sus
amos. Andrés fué a oirla con gusto.
La primera ama donde sirvió la Venancia era una mujer caprichosa y
loca, de un humor endiablado; pegaba a los hijos, al marido, a los
criados y le gustaba enemistar a sus amigos.
Una de las maniobras que empleaba era hacer que uno se
escondiera detrás de una cortina al llegar otra persona, y a ésta le
incitaba para que hablase mal del que estaba escondido y le oyese.
La dama obligaba a su hija mayor a vestirse de una manera pobre y
ridícula, con el objeto de que nadie se fijara en ella. Llegó en su
maldad hasta esconder unos cubiertos en el jardín y acusar a un
criado de ladrón y hacer que lo llevaran a la cárcel.
Una vez en esta casa, la Venancia velaba a uno de los hijos de la
señora que se encontraba muy grave. El niño estaba en la agonía, y
a eso de las diez de la noche murió. La Venancia fué llorando a
avisar a su señora lo que ocurría, y se la encontró vestida para un
baile. Le dió la triste noticia, y ella le dijo: Bueno, no digas nada
ahora. La señora se fué al baile, y cuando volvió comenzó a llorar,
haciéndose la desesperada.
—¡Qué loba!—dijo Lulú al oir la narración.
De esta casa la señora Venancia había pasado a otra de una
duquesa muy guapa, muy generosa, pero de un desenfreno terrible.
Aquella tenía los amantes a pares—dijo la Venancia—. Muchas veces
iba a la iglesia de Jesús con un hábito de estameña parda, y pasaba
allí horas y horas rezando, y a la salida la esperaba su amante en
coche y se iba con él.
—Un día—contó la planchadora—estaba la duquesa con su querido
en la alcoba; yo dormía en un cuarto próximo que tenía una puerta
de comunicación. De pronto oigo un estrépito de campanillazos y de
golpes. Aquí está el marido—pensé. Salté de la cama y entré por la
puerta excusada en la habitación de mi señora. El duque, a quien
había abierto algún criado, golpeaba furioso la puerta de la alcoba;
la puerta no tenía más que un pestillo ligero, que hubiera cedido a la
menor fuerza; yo la atranqué con el palo de una cortina. El amante,
azorado, no sabía qué hacer; estaba en una facha muy ridícula. Yo le
llevé por la puerta excusada, le dí las ropas de mi marido y le eché a
la escalera. Después me vestí de prisa y fuí a ver al duque, que
bramaba furioso, con una pistola en la mano, dando golpes en la
puerta de la alcoba. La señora, al oir mi voz, comprendió que la
situación estaba salvada y abrió la puerta. El duque miró por todos
los rincones, mientras ella le contemplaba tan tranquila. Al día
siguiente, la señora me abrazó y me besó, y me dijo que se
arrepentía de todo corazón, que en adelante iba a hacer una vida
recatada; pero a los quince días ya tenía otro amante.
La Venancia conocía toda la vida íntima del mundo aristocrático de
su época; los sarpullidos de los brazos y el furor erótico de Isabel II;
la impotencia de su marido; los vicios, las enfermedades, las
costumbres de los aristócratas las sabía por detalles vistos por sus
ojos.
A Lulú le interesaban estas historias.
Andrés afirmaba que toda aquella gente era una sucia morralla,
indigna de simpatía y de piedad; pero la señora Venancia, con su
extraña filosofía, no aceptaba esta opinión; por el contrario, decía
que todos eran muy buenos, muy caritativos, que hacían grandes
limosnas y remediaban muchas miserias.
Algunas veces Andrés trató de convencer a la planchadora de que el
dinero de la gente rica procedía del trabajo y del sudor de pobres
miserables que labraban el campo, en las dehesas y en los cortijos.
Andrés afirmaba que tal estado de injusticia podía cambiar; pero
esto para la señora Venancia era una fantasía.
—Así hemos encontrado el mundo y así lo dejaremos—decía la vieja,
convencida de que su argumento no tenía réplica.
 VIII

OTROS TIPOS DE LA CASA

Una de las cosas características de Lulú era que tenía reconcentrada

su atención en la vecindad y en el barrio de tal modo, que lo
ocurrido en otros puntos de Madrid para ella no ofrecía el menor
interés. Mientras trabajaba en su bastidor llevaba el alza y la baja de
lo que pasaba entre los vecinos.
La casa donde vivían, aunque a primera vista no parecía muy
grande, tenía mucho fondo y habitaban en ella gran número de
familias. Sobre todo, la población de las guardillas era numerosa y
pintoresca.
Pasaban por ella una porción de tipos extraños del hampa y la
pobretería madrileña. Una inquilina de las guardillas, que daba
siempre que hacer, era la tía Negra, una verdulera ya vieja. La pobre
mujer se emborrachaba y padecía un delirio alcohólico político, que
consistía en vitorear a la República y en insultar a las autoridades, a
los ministros y a los ricos.
Los agentes de seguridad la tenían por blasfema, y la llevaban de
cuando a la sombra a pasar una quincena; pero al salir volvía a las
andadas.
La tía Negra, cuando estaba cuerda y sin alcohol, quería que la
dijeran la señora Nieves, pues así se llamaba.
Otra vieja rara de la vecindad era la señora Benjamina, a quien
daban el mote de Doña Pitusa. Doña Pitusa era una viejezuela
pequeña, de nariz corva, ojos muy vivos y boca de sumidero.
Solía ir a pedir limosna a la iglesia de Jesús y a la de Montserrat;
decía a todas horas que había tenido muchas desgracias de familia y
pérdidas de fortuna; quizá pensaba que esto justificaba su afición al
aguardiente.
La señora Benjamina recorría medio Madrid pidiendo con distintos
pretextos, enviando cartas lacrimosas. Muchas veces, al anochecer,
se ponía en una bocacalle con el velo negro echado sobre la cara, y
sorprendía al transeunte con una narración trágica, expresada en
tonos teatrales; decía que era viuda de un general; que acababa de
morírsele un hijo de veinte años, el único sostén de su vida; que no
tenía para amortajarle ni encender un cirio con que alumbrar su
cadáver.
El transeunte a veces se estremecía, a veces replicaba que debía
tener muchos hijos de veinte años, cuanto con tanta frecuencia se le
moría uno.
El hijo verdadero de la Benjamina tenía más de veinte años; se
llamaba el Chuleta, y estaba empleado en una funeraria. Era chato,
muy delgado, algo giboso, de aspecto enfermizo, con unos pelos
azafranados en la barba y ojos de besugo. Decían en la vecindad
que él inspiraba las historias melodramáticas de su madre. El
Chuleta era un tipo fúnebre; debía ser verdaderamente desagradable
verle en la tienda en medio de sus ataúdes.
El Chuleta era muy vengativo y rencoroso, no se olvidaba de nada; a
Manolo el Chafandín le guardaba un odio insaciable.
El Chuleta tenía muchos hijos, todos con el mismo aspecto de
abatimiento y de estupidez trágica del padre y todos tan mal
intencionados y tan rencorosos como él.
Había también en las guardillas una casa de huéspedes de una
gallega bizca, tan ancha de arriba como de abajo. Esta gallega, la
Paca, tenía de pupilos, entre otros, un mozo de la clase de disección
de San Carlos, tuerto, a quien conocían Aracil y Hurtado; un
enfermero del Hospital General y un cesante, a quien llamaban don
Cleto.
Don Cleto Meana era el filósofo de la casa, era un hombre bien
educado y culto, que había caído en la miseria. Vivía de algunas
caridades que le hacían los amigos. Era un viejecito bajito y flaco,
muy limpio, muy arreglado, de barba gris recortada; llevaba el traje
raído, pero sin manchas, y el cuello de la camisa impecable. Él
mismo se cortaba el pelo, se lavaba la ropa, se pintaba las botas con
tinta cuando tenían alguna hendidura blanca, y se cortaba los flecos
de los pantalones. La Venancia solía plancharle los cuellos de balde.
Don Cleto era un estoico.
—Yo, con un panecillo al día y unos cuantos cigarros vivo bien como
un príncipe—decía el pobre.
Don Cleto paseaba por el Retiro y Recoletos; se sentaba en los
bancos, entablaba conversación con la gente; si no le veía nadie,
cogía algunas colillas y las guardaba, porque, como era un caballero,
no le gustaba que le sorprendieran en ciertos trabajos menesteres.
Don Cleto disfrutaba de los espectáculos de la calle; la llegada de un
príncipe extranjero, el entierro de un político constituían para él
grandes acontecimientos.
Lulú, cuando le encontraba en la escalera, le decía:
—¿Ya se va usted, don Cleto?
—Sí; voy a dar una vueltecita.
—De pira ¿eh? Es usted un pirantón, don Cleto.
—Ja, ja, ja—reía él—. ¡Qué chicas éstas! ¡Qué cosas dicen!
Otro tipo de la casa muy conocido era el Maestrín, un manchego
muy pedante y sabihondo, droguero, curandero y sanguijuelero. El
Maestrín tenía un tenducho en la calle del Fúcar, y allí solía estar con
frecuencia con la Silveria, su hija, una buena moza, muy guapa, a
quien Victorio, el sobrino del prestamista, iba poniendo los puntos. El
Maestrín, muy celoso en cuestiones de honor, estaba dispuesto, al
menos así lo decía él, a pegarle una puñalada al que intentara
deshonrarle.
Toda esta gente de la casa pagaba su contribución en dinero o en
especie al tío de Victorio, el prestamista de la calle de Atocha,
llamado don Martín, y a quien por mal nombre se le conocía por el
tío Miserias.
El tío Miserias, el personaje más importante del barrio, vivía en una
casa suya de la calle de la Verónica, una casa pequeña, de un piso
solo, como de pueblo, con dos balcones llenos de tiestos y una reja
en el piso bajo.
El tío Miserias era un viejo encorvado, afeitado y ceñudo. Llevaba un
trapo cuadrado, negro, en un ojo, lo que hacía su cara más sombría.
Vestía siempre de luto; en invierno usaba zapatillas de orillo y una
capa larga, que le colgaba de los hombros como de un perchero.
Don Martín, el humano, como le llamaba Andrés, salía muy
temprano de su casa y estaba en la trastienda de su
establecimiento, siempre de vigilancia. En los días fríos se pasaba la
vida delante de un brasero, respirando continuamente un aire
cargado de óxido de carbono.
Al anochecer se retiraba a su casa, echaba una mirada a sus tiestos
y cerraba los balcones. Don Martín tenía, además de la tienda de la
calle de Atocha, otra de menos categoría en la del Tribulete. En esta
última su negocio principal era tomar en empeño sábanas y
colchones a la gente pobre.
Don Martín no quería ver a nadie. Consideraba que la sociedad le
debía atenciones que le negaba. Un dependiente, un buen
muchacho al parecer, en quien tenía colocada su confianza, le jugó
una mala pasada. Un día el dependiente cogió un hacha que tenían
en la casa de préstamos para hacer astillas con que encender el
brasero, y abalanzándose sobre don Martín, empezó a golpes con él,
y por poco no le abre la cabeza.
Después el muchacho, dando por muerto a don Martín, cogió los
cuartos del mostrador y se fué a una casa de trato de la calle de San
José, y allí le prendieron.
Don Martín quedó indignado cuando vió que el Tribunal, aceptando
una serie de circunstancias atenuantes, no condenó al muchacho
más que a unos meses de cárcel.
—Es un escándalo—decía el usurero pensativo—. Aquí no se protege
a las personas honradas. No hay benevolencia más que para los
criminales.
Don Martín era tremendo; no perdonaba a nadie; a un burrero de la
vecindad, porque no le pagaba unos réditos, le embargó las burras
de leche, y por más que el burrero decía que si no le dejaba las
burras sería más difícil que le pagara, don Martín no accedió.
Hubiera sido capaz de comerse las burras por aprovecharlas.
Victorio, el sobrino del prestamista, prometía ser un gerifalte como el
tío, aunque de otra escuela. El tal Victorio era un Don Juan de casa
de préstamos. Muy elegante, muy chulo, con los bigotes retorcidos,
los dedos llenos de alhajas y la sonrisa de hombre satisfecho, hacía
estragos en los corazones femeninos. Este joven explotaba al
prestamista. El dinero que el tío Miserias había arrancado a los
desdichados vecinos pasaba a Victorio, que se lo gastaba con
rumbo.
A pesar de esto, no se perdía, al revés, llevaba camino de
enriquecerse y de acrecentar su fortuna.
Victorio era dueño de una chirlata de la calle del Olivar, donde se
jugaba a juegos prohibidos, y de una taberna de la calle del León.
La taberna le daba a Victorio grandes ganancias, porque tenía una
tertulia muy productiva. Varios puntos entendidos con la casa
iniciaban una partida de juego, y cuando había dinero en la mesa,
alguno gritaba:
—¡Señores, la Policía!
Y unas cuantas manos solícitas cogían las monedas, mientras que
los agentes de Policía conchabados entraban en el cuarto.
A pesar de su condición de explotador y de conquistador de
muchachas, la gente del barrio no le odiaba a Victorio. A todos les
Welcome to Our Bookstore - The Ultimate Destination for Book Lovers
Are you passionate about books and eager to explore new worlds of
knowledge? At our website, we offer a vast collection of books that
cater to every interest and age group. From classic literature to
specialized publications, self-help books, and children’s stories, we
have it all! Each book is a gateway to new adventures, helping you
expand your knowledge and nourish your soul
Experience Convenient and Enjoyable Book Shopping Our website is more
than just an online bookstore—it’s a bridge connecting readers to the
timeless values of culture and wisdom. With a sleek and user-friendly
interface and a smart search system, you can find your favorite books
quickly and easily. Enjoy special promotions, fast home delivery, and
a seamless shopping experience that saves you time and enhances your
love for reading.
Let us accompany you on the journey of exploring knowledge and
personal growth!

ebookgate.com