Web Standards Solutions: The Markup and Style Handbook, Special Edition

298 Pages·2009·15.19 MB·English

by  Dan Cederholm

CYAN YELLOW
MAGENTA BLACK
C
In this book you’ll learn how to: e
d SPeCIal eDItIon:
Lay out pages easily and effectively er with up-to-date information,
h and bonus chapters online
Use XHTML elements correctly so that your markup is compact and more easily understood o
l
Use CSS to style different elements of a web page m
W
Welcome to the updated and expanded Special Web standards such as XHTML and CSS are now fairly
e
Edition of Dan Cederholm’s best-selling Web well-known technologies, and they will likely be familiar
b
Standards Solutions. Web standards are the standard to you, the web designer—indeed, they are all around

technology specifications enforced by the World Wide you on the Web. However, within web standards still lies S
Web Consortium (W3C) to make sure that web designers a challenge—while the browser’s support for web stan-
t
and browser manufacturers are using the same technology dards is steadily increasing, many web developers and
a
syntax. Utilizing web standards helps deliver content to designers have yet to discover the real benefits of web
n
the widest audience possible, while also ensuring future standards or to respect the need to adhere to them. The
compatibility. These standards also allow content to be more real art is in truly understanding the benefits and imple- D
compatible with different viewing devices, such as screen menting the standards efficiently.
a
readers, mobile phones and handheld devices. HTML,
Web Standards Solutions is broken down into 16 short
XHTML, and CSS are all examples of Web Standards r
chapters, each covering the theory and practice of dif-
technologies. D
ferent web standards concepts and showing multiple
This book is your essential guide to understanding the solutions to given problems for easy learning. You’ll S
advantages you can bring to your web pages by imple- learn about creating multicolumn layouts, using image
S
menting web standards and knowing precisely how to replacement techniques to your best advantage, making
apply them. the best use of tables and lists, and much more. This o
highly modular approach allows you to rapidly digest,
l
understand, and utilize the essentials of web standards.
u
“ Dan Cederholm is no standards zealot.
t He’s a guy on the front line who knows
I that web standards save both time and
also available o
SPeCIal eDItIon: money. This is a real solutions-oriented
with up-to-date information, n guide to using standards-based techniques
and bonus chapters online in your daily work, written by someone
S
who does exactly that. You can’t lose!”
—Drew McLellan, The Web Standards Project
eS
DP
Ie
tC
IoIa
nl
ShelVInG CateGorY
ISBN 978-1-4302-1920-0
53499 Web DeSIGn/DeVeloPment
Dan CeDerholm
uS $34.99
mac/PC/linux compatible Foreword by Jeffrey Zeldman,
Download source files and bonus chapters from: Author, Designing With Web Standards
9 781430 219200 www.friendsofed.com
this print for reference only—size & color not accurate spine = 0.687" 296 page count

Web Standards Solutions
The Markup and Style Handbook
Special Edition
Dan Cederholm
Web Standards Solutions: The Markup and
Style Handbook, Special Edition
Copyright © 2009 by Dan Cederholm
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical,
including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the
copyright owner and the publisher.
ISBN-13 (pbk): 978-1-4302-1920-0
ISBN-13 (electronic): 978-1-4302-1921-7
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name,
we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone
1-800-SPRINGER, fax [phone], e-mail [email protected], or visit www.springeronline.com.
For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705.
Phone [phone], fax [phone], e-mail [email protected], or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and
licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at
http://www.apress.com/info/bulksales.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the
preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or
damage caused or alleged to be caused directly or indirectly by the information contained in this work.
The source code for this book is freely available to readers at www.friendsofed.com in the Downloads section.
Credits
Lead Editor Associate Production Director
Ben Renow-Clarke Kari Brooks-Copony
Technical Reviewer Production Editor
Matt Heerema Laura Cheu
Editorial Board Compositor
Clay Andres, Steve Anglin, Mark Beckner, Lynn L’Heureux
Ewan Buckingham, Tony Campbell, Gary Cornell,
Jonathan Gennick, Jonathan Hassell, Proofreader
Michelle Lowman, Matthew Moodie, Duncan Parkes, Lisa Hamilton
Jeffrey Pepper, Frank Pohlmann, Douglas Pundick,
Ben Renow-Clarke, Dominic Shakeshaft, Indexer
Matt Wade, Tom Welsh Broccoli Information Management
Project Manager Interior and Cover Designer
Richard Dal Porto Kurt Krames
Copy Editor Manufacturing Director
Liz Welch Tom Debolski

CONTENTS AT A GLANCE
Foreword ..................................................................xvii
About the Author ........................................................ xviii
About the Technical Reviewer .......................................... xix
Acknowledgments ......................................................... xx
Introduction ............................................................... xxi
PART ONE GET DOWN WITH MARKUP ........................... 1
Chapter 1 Lists .............................................................. 3
Chapter 2 Headings ........................................................ 17
Chapter 3 Tables are Evil? ................................................ 29
Chapter 4 Quotations ..................................................... 49
Chapter 5 Forms ........................................................... 61
Chapter 6 <Strong>, <Em>, and Other Phrase Elements .............. 83
Chapter 7 Anchors ........................................................103
Chapter 8 More Lists .....................................................119
Chapter 9 Minimizing Markup ...........................................133
iv
PART TWO SIMPLEBITS OF STYLE 147
...............................
Chapter 10 Applying CSS .................................................149
Chapter 11 Print Styles ...................................................167
Chapter 12 CSS Layouts ..................................................179
Chapter 13 Styling Text ..................................................207
Chapter 14 Image Replacement .........................................223
Chapter 15 Styling <body> ..............................................243
Chapter 16 Next Steps ...................................................255
Index ...................................................................... 263
v

CONTENTS
Foreword ..................................................................xvii
About the Author ........................................................ xviii
About the Technical Reviewer .......................................... xix
Acknowledgments ......................................................... xx
Introduction ............................................................... xxi
PART ONE GET DOWN WITH MARKUP 1
...........................
Chapter 1 Lists .............................................................. 3
Let’s go shopping ...............................................................4
Quiz time .....................................................................4
Method A: The <br /> breakdown ..............................................4
It’s a wrap ..................................................................5
Method B: The bullet that bites ................................................6
Validation, please ........................................................6
Method C: Getting closer .....................................................6
Method D: Wrapper’s delight ..................................................8
Summary ......................................................................8
Extra credit ....................................................................9
Bite the bullet ..............................................................9
Getting fancier with custom bullets ............................................10
Lists that navigate ..........................................................11
Mini-tab shapes ............................................................14
Chapter 2 Headings ........................................................ 17
What is the best way to mark up the title of a document? .............................18
Method A: Meaningful? ......................................................18
Method B: The p and b combo ................................................19
Difficult to style .........................................................19
vii
CONTENTS
Method C: Style and substance ................................................19
Easily styled ............................................................19
Default distaste .........................................................20
Search engine friendly. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
An aside on heading order ................................................21
Summary .....................................................................21
Extra credit ...................................................................22
Simple styling .................................................................22
Adding backgrounds ........................................................23
Backgrounds and borders .................................................24
Tiled backgrounds .......................................................24
Swappable icons ...........................................................25
Easy updates ...............................................................25
The chameleon effect .......................................................26
Aligning the <img> element ...............................................26
Wrapping up ..................................................................27
Chapter 3 Tables are Evil? ................................................ 29
Totally tabular .................................................................30
A table that everyone can sit at ..................................................30
Adding a summary .............................................................33
The head(s) of the table ........................................................33
Header and data relationships ....................................................35
Using the abbr attribute ........................................................36
<thead>, <tfoot>, and <tbody> ..................................................37
Are tables evil? ................................................................39
Extra credit ...................................................................39
Creating a grid .............................................................39
Collapsing the gaps .........................................................40
An IE/Mac note .........................................................41
Spaced out .............................................................41
Customizing the headers .....................................................42
Headers with background images ..............................................43
Tiny tile ...............................................................43
The CSS ...............................................................43
Assigning icons to IDs .......................................................44
The icons ..............................................................45
The CSS ...............................................................45
Combining rules for simpler bits ...........................................46
More table style examples .......................................................47
Wrapping up ..................................................................47
Chapter 4 Quotations ..................................................... 49
Method A: Lacks meaning .......................................................50
Method B: A class act? ..........................................................50
Method C: <blockquote> is best ..................................................51
Using a screwdriver to hammer a nail ..............................................51
Summary .....................................................................52
viii