HTML Dog Patrick Griffiths New Riders 1249 Eighth Street erkeley, CÁ 94710 510/524-2178 800/283-9444 510/524-2221 (fax)
Find us on the Web at: www.newriders.com
To report errors, please send a note to errata@peachpit.com New Riders is an imprint of Peachpit, a division of Pearson Education Copyright © 2007 by Patrick Griffiths
Editor: Doug Adrianson
Production Coordinator: Andrei Pasternak Tech Editor: Joe Marini
Copyeditor: Hope Frazier
Compositor: Maureen Forys, Happenstance Type-G-Rama Indexer: Julie Bess
Cover Design: Aren Howell Cover Photo: Veer/Brian Summers
nterior Design: Maureen Forys Happenstance Type-O-Rama Notice of Rights
All rights reserved, No part of this book may be reproduced or transmitted in any forrn by any means, electronic, mechanica!, photocepying, recording, or otherwise, without the prior written permission of the publisher For infor- mation on getting permission for reprints and excerpts, contact permissions@peachpit.com
Notice of Liability
The information in this book is distributed on an “As is” basis, without warranty While every precaution has been taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability ta any person or antity with respect to any loss or darnage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it
Trademarks
Many of the designations used by rnanufacturers and selers to distinguish their products are claimed as trademarks Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark A!l other product names and services identified throughout this book are used in editoria! fashion only and for the benefit of such campanies with no intention of infringement of the trademark No such use, or the use of any trade name, is intended to convey endorsement or other affilia- tion with this book
ISBN 0-321-31139-6 98/7/6543 2 1
Trang 4Acknowledgements
A good website follows conventions to keep users happy and responsive | can only assume that a good web design book should do the same So here are some people “without whom this would not have been possible.” Or something like that To my mother, for her share of my genetic material and all of the environmental stuff, for buying me my first computer, for putting up with my Kevin & Perry teen- age crap, and, most of all, for forbidding me to get a Michael Jackson perm at the age of 10, ta, Ma
Even though her grasp of language is somewhat limited, for frequently walking across my keyboard Nutmeg, the feline member of the family, should probably have a co-author credit At least blame any typos on her
i am proud to be a member of such an open, intelligent, friendly professional community Andy Budd, Andy Clarke, Jon Hicks, Jeremy Keith, Drew McLellan, Rich Rutter, Mike Stenhouse, and the rest of the Britpack (and the mighty Pub Standards, for that matter} have been an invaluable source of discussion, ideas, and constructive criticism, and have become good friends to boot And there’s a plethora of luminaries further from home who have influenced me, and this book, in one way or another: Doug Bowman, Dan Cederhaim, Joe Clark, Charles Darwin, Moily Holzschlag, Steve Krug, Jakob Nielsen, Valentino Rossi, and Jeffrey Zeldman in particular Through raising awareness, it’s due to many of these peaple (and many more), and organizations like the Web Standards Project (webstandards.crg) that the quality web design landscape is a much lusher one now than it was even a few years ago, so thanks are due not only for their influence, but for making books like this, and interest in them, possible
Trang 5IV | ACKNOWLEDGEMENTS
l’ve had a little something to do with a bash called @media (vivabit.com/atmedia)
for almost as long as the HTML Dog book project Thanks to everyone who has made that possible, including all of those who have attended tt It has been a great example of a genuine appetite for pushing best-practice web design and develop- ment to their limits, and it has kept my enthusiasm and passion for the subject fresh @mecia and HTML Dog are my babies, so they must be related
i have always regarded New Riders as by far the best, mast discerning, and most respectable publisher of Web-related books It has been a roller-coaster ride, but | am very proud to finally be a published New Riders author alongside so many great Web heavyweights So, to the publisher, and extended family and friends, thanks to David Fugate, Linda Bump Harrison, Darcy DiNucci, Marjorie Baer, Nancy Davis, Joe Marini, Doug Adrianson, and everyone else involved in building this quality culturally infused slab of ink-sprinkled reconstituted plant fibers
Trang 6Contents lntroducflon , XV Chapter 1: | cig Sec HIML Synfax l Elements, lIags, and Attributes 2 Common Âttribufes 1
The Basic S†ructure of an HTML Document 8
The Generalist Iags——Div and Špan 16 SSS) ) ng nh ng v ky 17 A ng nh nh àg 17 S6l@CÏ0FS QQQ QQQ ng ng ky 18 Pr0perfleS 23 ValUES Q22 2222 na 25 Applying ÊSS to HTML 32 Chapter 2: Structuring ÏeXỈ 37 Basic Text Elements: Paragraphs, Line Breaks, and Emphasis 39 Headings 40 Quotations 42
Abbreviations and Âcronyms 43
Preformatted Text and Computer Code 44
Editorial Insertions and Deletions 46
Multilanguage and Bidirectional Tef 47
Trang 7vị | CONTENTS Styling Ï@XỈ cà 48 0) Q0 Q0 Q2 ng ng nhà kg nn 48 00) 0) 2 nhà 90 SIZE aaa 90 Line Heighf 53
Bold and ltalics -: o4 Upper and Lower ase 55
The Font Shorthand Properfy 55
Underline and Strikethrough 56
Trang 8CONTENTS | vil
Chapter 5:
The Box Model 94
Width and Height 95 Padding c 97 B0f@FS Q2 nhà 98 Margin 100 The dispLay Pr0perfy 104 Posifi0nig cu 107 1 áa 107 RelAfiVE ng nh nàn 108 AbsolUfe Q22 108 cA Q QQQ ng ng ng ng ng uy àt 110 Floafing Quà 110 Sample Page LayouÌs 119 Creating ÊolUumns - 120 Adding a Page Header 126 Adding a Fo0fer 127 Putting lt All Together 130 Chapter 6: Structuring LisfS 136 Unordered and 0rdered Lists 136 Definition Lisfs 138 Lists as Navigation 140 Presenting Lisfs 142 List Markers—Bullets, Numbers, and lmages_ 142 Horizontal Lisfs : 146 Chapter 7: “12/72 24) 12c JavaScript and the DM 147
Trang 9vn | CONTENTS Event Attribufes 148 Manipulating the DÔM 149 0bjecfs O On nh na 150 Chapter 8: +21)" Basic lableS Q22 156 Merging Cells - 158 Éap[0NS CC na 160 6r0uping R0WS e eens 161 Targeting Êolũmns 162 Âccessibilify Considerations with Tables 164 SUTTAFi@S cv 164 Associating Headers to Cells 165
Associating Êells to Headers_ 165 Presenting I[ables - 187 Border Êollapsing 187 Speedier Tables: the Fixed Layout Algorithm 169 Empty Cells 170 Chapter 9: Form Elemenfs 173
Form Fields and Buttons: input, textarea, and select 174
The name Attribute 174
Trang 11X | CONTENTS <00d6></00602> ences 218 Oe PP Q0 0 g1 ng ng ng n nà ung ng ng kg kg v vo 219 001400086 40010/2017110 S2 2ãN1nẺẽ -<A cee 220 coi 1 5 Má eae 221 6ô 45 nh aưHa4 ad 222 15531 222 Z3 5 a 7 eens 223 UU La eens 224
dt dED cece eens 224 SOME </OMD Áa aaa neers 225 <fieldset></fieldset> 0 eens 225 30101541010 Sa n es 226 <h1></h1>, <h2></h2>, <h3></h3>, <hÁ»</hÁ», <h5></h5>, <hồ>«</HỖ> Q.0 Qua Del <head></Mead> cette ees 228 <htmbo</ATM > ences 229 UNG I cece tere cence tee ene nenes 230 si na aaÁI 23) >7 5 eee eter een eens 232 C200 4100 5 nh ma a ene ee 233 <label></laD6Ï> cece eee eee 233 <degend></legend> occ cece eee va 234 HIND ce eect tnt e eee ees 234
LO 235
Trang 13xu | CONTENTS
HANG cece teen eee bbe etre nnn es 26/ NOH cece ene e beeen beeen nan es 287
oT — R 268
"10 - - renee ttre neers 268
` .Ắ 268
Pseudo-elements 00 teen eee 269 ATE eee eee ence tee e eens 269 DOO 1n am 289 0011 8n -a 289 ¡I0 0 << 2/0 C0) sdaaẢẳaẳiẳiiặa 2/0 COTES 08) 5 TL 270 OT c c c n n nhu nàn nà va và vay 2/0 OT AI 2/4 8001122255 eet ee nbe neces 2/1 backgf0UDỦ cv vn xa 272 background-atlachmefiẰl QC nà 272 backgỹr0Un-C0Ì0T cece eee renee 2/3 back@round-iMage oo -aaa a a & 21Ä background-position 0 ằẶ a 2/5 I1H.14110H11001-112771I NNIaáđáđáầáẳẳẳaảÄẳắắ 275 border, barder-top, border-right, border-bottom, border-left 276 border-collapse 20 cece teen neers 271 border-color, border-top-coler, border-right-color,
border-bottom-colay, border-leff-color cu nào 218 DOPGE-SDACING occ cect teen tes e ne ns 2/8 border-style, border-top-siyle, border-right-siwe,
border-bottom-siyie, border-left-siWle 279 border-width, border-top-width, border-right-width,
00rder-botfom-width, border-leff-wIdi 281
Trang 14CONTENTS | xa CAPHON-SIdG oo ccc erect een e ne nes 282 "0= ened e es 283 | 5 283 06) ar 284 017120101 285 COUNTEI-HICTEMENT ẻ RaHaa na es 286 027//1/10 551 01A 286 CUPSOP ——— a ees 287 ¡n0 0 1 cent teeter ees 289 ¡I0 cece ere e eect renee eeee 289 @Mpty-Cells cece erence teen eve nenee 291 2 291 00 292 font-family 0 cent netet ee nes 293 FONE-SIZO eee ee eee eens 293 font-style cree tent enn eee eas 294 00018000 ẼšẴR&äĂ 295 FOMT-WEIEAT cent teers 295 2010155 e eee b beet teens 296 lett eee eee ee eb ete e eee eens 297 letter-spacing oo ố aaa Haađ 297 Hine-height ch nh nà tk xa 298 Hst-Style cere n ene rene es 299 Hst-Style-image@ ccc cece trees 299 list-style-positign oo cc eee cee ns 300 e1, 0 ete teeny 300 margin, margin-top, margin-right, margin-bottom, margin-lefl oo 301 ip01120112 121555 cece nce tere eens 302 MAX-WHIE eee eee eee t ete eens 303 Min-helght eee eee OOS
Trang 15xiv | CONTENTS
OONANS ccc erence eet een ene nenee 304 0801 01 n es 305 Gutline-color eee eee ee OOD Gutline-StVle cece ete e eee 306 Gutline-width oo cnet es 307 01000 nent eee e nen e deren es 307 padding, padding-top, padding-right, padding-bottom, padding-left 308 page-break-after cee teens 309 page-break-before 00 eee eee eens 309 page-break-inside 0 ce cece teres 310 POSTION cc cece t eee e beeen ens 310
Trang 16
Introduction
THE BEST WAY to build web pages is with web-standards-compliant HTML and CSS HTML lays the foundation by structuring the content, and then CSS dolls it up and presents the page
Using them in the right way—with web standards—leads to web pages that are faster, more manageable, more cross-compatible, and more accessible than web pages built any other “old-school” way
This book is designed to take you through these symbiotic languages, explaining how to use them the web-standard way, comprehensively cov- ering the components that make up a web page and the technical details involved in making those components
HTML Dog?
The HTML Dog (www.htmidog.com) first popped into the world in 2003 Its
mission was to provide short and easy-to-follow guides in (X)HTML and CSS,
following best practices from the ground up (rather than teaching old-school
methods first and then moving on to the right way of doing things), which no
Trang 17xvi | INTRODUCTION fx) HTML Dog The Best Practice Guide To XHTML and CSS Tutorials HTML Beginner CSS Beginner HTML Intermediate CSS Intermediate HTML Advanced CSS Advanced References HTML Tags CSS Properties Articles Examples The Book CSS Training About HTML Dog Link To HTML Dog Contact HTML Dog External Links Site Map 8S [Seareh]
HTML and CSS Tutorials And Stuff
Welcome to HTML Dog, the web designer's resource for everything HTML and CSS, the most common technologies used in making web pages
© Tutorials
Quick and easy-to-follow practical guides to get you up and running with HTML and CSS, following best-practices every step of the way
ences
The reference section, which is cross-linked from throughout HTML Dog, outlines all of the valid XHTML tags and CSS properties available to you
Articles
4 handful of articles expand on the tutorials, going into a few more specific areas and a bit more detail Bare-bone examples complement the tutorials, references, shing the New HTML Dog!
New visuals accompany a whole host of new content, Updated Tutorials, extra Articles, and Examples aplenty! If you find this web site useful, please link to it It's a karma kinda thang
and articles, and should help you to grasp how bits of HTML and CSS work a bit better by seeing them in action
November,
You can pre-order your copy at a discounted price from Amazon.com
Amazon.ca ~, Amazon.fr”, Amazon.de “, or Amazon.co.jp
© Patrick Griffiths, 2003-2006
2 The new HTML Dog book, published by New Riders, will hit the shelves this Building on and complementing the web site, it is a comprehensive (yet concise, and utterly entertainadelic) resource for those who really want to get to grips with (X)HTML and C55, and use them in the best possible way from the outset Logically divided chapters coupled with tag and property appendixes make it a damned fine reference book, too
, Amazon.co.uk ©,
Trang 18
HINTRODUCTION ¡ xvin
So What Are XHTML and CSS?
XHTML (eXtensible HTML) ts the latest, Sly-Stone-funkiest version of HyperText
Markup Language HTML is a simple language used to structure hyperlinking con- tent that is at the core of most web pages The whole idea behind HTML since Day One has simply been to apply meaning to chunks of content and fink them all together, regardiess of platform
in technical terms, XHTML is “HTML reformed as XML,” but to most people, and for the purpose of this book, it simply means a more modern version of HTML (which is
why “HTML” is usually referred to throughout the book rather than “XHTML") with an aver so slightly stricter syntax (explained in Chapter 1, “Getting Started”) AHhough
there are lesser, “transitional” versions of XHTML, this book jumps in at the deep and and follows XHTML Strict-—the purest form of XHTML, which harnesses all of its Intended benefits {f this sounds daunting to you, don’t worry—-it’s really not more difficult to use than other versions, out it is the best one to opt for if you have the ability to do so
CSS (Cascading Style Sheets) is a language used to present a web page that was introduced to remedy the increasing introduction (by browser manufacturers) and use of presentational HTML elements Not only does it lend even greater control over the appearance of a web page, it rernaves the need for presentational elements in the HTML document itself It has taken a while for browsers to cotton on, but most CSS is now supported by a vast majority of browsers Its use is not only a genuine option, but also the best option for presenting web pages As you will see
later in this introduction, this ability to separate content (HTML) and presentation
(CSS) leads to great benefits What are style sheets and how do they cascade? See Chapter 1
Trang 19xvIn | INTRODUCTION
What Are Web Standards?
Web standards are universal rules that dictate how something should be used, inde- pendent of any single thing (such as one particular browser) By utilizing web stan- dards you are helping to ensure universal compatibility and flexibility Because they are based on logical reasoning with no commercial pressure (well, that’s the idea anyway!), following them also tends to lead to greatly optimized solutions
These standards are the creation of the W3C (World Wide Web Consortium, www.w3 org), an independent body that counts Google, Intel, AOL, Apple, various universities, the BBC, Sony, Microsoft, and many more amongst its members and is contributed to by hundreds in the web community The standards are wide-ranging, encompassing a large number of web technologies and initiatives, including HTML and CSS
ƒ WORLD WID VEB
Weconsortium
Leading the Web to Its Full Potential
Activities | Technical Reports | Site Index | New Visitors | About W3C | Join W3C | Contact W3C The World Wide Web Consortium (VV¥3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the VVeb to its full potential WW3C is a forum for inforrnation, commerce, communication, and collective understanding On this page, you'l find VWW3C news, links to W3C technologies and ways to get
involved New visitors can find help in Finding Your Way at W/3C We encourage organizations to learn more about WW3C and about WW3C Membership
WS3C Supporters Program News
indviduls end organics who >» New Editions of Core XML Google
contribute to the Consortium through the Standards Published Search W3C W3C Supporters Program
er mm ae 2006-08-16: The World Wide VVeb Consortium today
published new editions of four core XML standards: the fourth y 5 T g : Current job opportunities at W3C are edition of Extensible Markup Language (XML} 1.0 and Search WSC Malling Lists
- a neers cous Hat second editions of Extensible Markup Language (XML) 1.1,
American business anager, ẹ j
‘Accessibilie Enzinserand the W3e Namespaces in XML 1.0 and Namespaces in XML 1.1
———— ee — These new editions incorporate corrections to all known AME Info FZLLC
Fellows Program ee
E———— | ecrrata Read the press release and visit the XMIL horne page Mobile Web Initiative (News archive)
www.ameinfo.com The goal of the Mobile Web Initiative is to
make Web access from a mobile device as > Compound Document Framework
simple, easy, and convenient as Web AME Info was founded in 1996 and is the
access from a desktop device Read about || and WICD Profiles: Working Drafts leading Middle Bast business resource
MW’ and learn how to sponsor MW covering 14 countries AME Info joined the
| 2006-08-11: Addressing Last Call comments, the W3C to show commitment to open
standards in a drive to make the Web
Compound Document Formats Working Group has released azcossible forall (Member testimaniald four updated VYorking Drafts: Compound Document by
Accessibility Reference Framework, WICD Core 1.0, WICD Full 1.0, and
" WICD Mobile 1.0 The Web Integration Compound Document
(VWICD, pronounced "wicked") is a device independent
i Member Home Page
CCIEE Compound Document profile based on XHTML, CSS and et mm
Compound Document Formats! svc The drafts describe behavior when single documents Si na rionlee
CSS CSS Validator - contain multiple formats Read more about Rich Web Clients —— peas Meetings ==
—— (News archive)
Databinding Fellows Device Independence `
DOM » SVG Tiny 1.2 Is a Candidate
Eliiclenl AWIL Intercnange amet H446 | Recommendation ï W3C Membership Benefits : —= - Reasons to Join W3C
Health Care and Life Sciences) 2906-08-10: W3C is pleased to announce the advancement MBIIEBITIEESS—
HTMI TH Ti ee eee eee eee ee 220: 00 ý 3 Mailing Lists
Trang 20
INTRODUCTION | xEx
HTML standards are based on sernantics This is the process of using tags to apply meaning, such as “this piece of text is a paragraph” or “the HTML in this element makes a table.” It may not sound that important, but it’s at the heart of the first step toward web standards success: separating structure and presentation
Structure and Presentation
This page, and in particular the big fat statement below, is more important than the rest of this book put together
This is the magical key to unlocking better web pages !f you apply this rule when building web pages then you're already halfway toward achieving web standards and the benefits that come with them
A central philosophy of web standards is “separation of content and presentation.” Variations include “separation of meaning and presentation” and “separation of structure and presentation.” There are pedantic arguments why one of these ts bet- ter than another, but all of the phrases are perfectly valid and essentially imply the same thing lf we were more precise (but less snappy), we might say “the separa- tion of [content made meaningful by structure] and [presentation].” What it means is that HTML is for one thing and CSS is for the other HTML should be used solely to construct content and C35 should be used solely to present it
Trang 21xx | INTRODUCTION nh nh án 006nnia An mini Cet ee ea! Laii022a=uAl ee ee eld OE eet een ee Laren See ek) 1 Tl ` cÝn 2m 64r#= tung ai nh nan nu Re ad Ce ee | ne i an Per 1; Ađ!Đ @M #ộ4kc = a 0 như s6 ký ViBr* sa sgbsf so be raken seriously try grantic artists The Zen
traee Carlen ares Fe €x9€, #tyfdtt khố to sộ* pái96pðl0n To begin Wer some of -
© pect decir © the exieting designs in the bet OSching on any one wil bona ene envle eheet into this © a peer man design very page The Code rreriains Ine perme, the ondy thing that hes changed t9 the externas
"14.1 css (le Yex, realy
5@ allows complete anc toca! concrol over the style of a trypertext document The 096 “tây 43 Căn Đ$ (§U7V Àtđ trì à 94šy W5yi @V1ý People Excited le ly Germany wen Focmaves S what It can truly be, once the reins are placed in the hands of those able to Create
Gemonetr ited by structuriete and Codere Deeagnere have yet tn mabe thew mark Thie
sehen th đecơn ven
7g 299%sses needs to change _ưn Sc ote we
Cragnic armete only pleate, You Wve modifying Que page 40 etreng G the exarnpie Mes ned well enowgh that even CO5D neve
j 69ir29% ante tee the CSS Resource Guides for aevanced
Wwtoriels etd tie on morbng wah CSO
$ coenenei
You enay modify the style sheet in awy wey you with, But not the HTML This may
stem #werving st flrst X We Never worked this way before, but fotiow the lined fivks to earn more, aout use the sermete files as a guide
Downto
1 the earnple (IML ie 8nd {4 {Ù 96 99v 00: 3 (00 96A9, Ơftc+ 02 Đưy® your maucterpiece (ket please, dont submit hat-fingemed werk)
eel Cater Under your CONtHee Sere Jý À JT HÀ lộ Coe fle ae if me loaet compien your «se Me ENODEE to Ope It, we wil spider the ated images Final subrmiccions well he pieced On OU Geryet why particie
Making tt cast for C55 0-pentd cesign Thes is sorely needed, even today More and
Ore MARIO! £8 4 PàÊhộ the lean, But Not enough Mave One Sue thet gallery will be
% l0: l‹ M NQsity, That day tf Mottodey
We Old 3064 tả 442 $4 eer CLIT ký 62208192 C{42ÍW emauie be Umeted t4 Widely-supported elements o0 The šýs Zen Garden is wbøqt functional, pracice
oss donot the latest bleetting-edge tr by 2% of the browsing pulite i PEO GUTION, INEDW MEAN, AN % 4‡@0f€* té Cân OE Foret to when
The onty teal reoukernert wet N 55 validates
Uniertunatety, deseyning tee way hignignts tie Passe ee te vanous Impitmentavons Of COSC) Ovtterent teowsers dispdyy Mitferentsy, even Caingeenhy vathd COST at times,
The Resoutces page for @fermation on same of the fheet #48190 oT nd we do net expect Fadl browser
Compbande is sift 20 & pipe dream,
0A0 tết Oo Leet in as many AC you Can I in by Over SON of the to comme up perfect Code 3(!@$% wm feast 1S + (wine aa Morita (
We ki UIỤC VU #UD9YH Grigetal artrOrd, Pease respect Copsrigtt lees Pease hace POTN graginy rH be rerected
Tree 14 & lêÀ@ftS2 $x4//044 34 944l1 ké & demonstration You retin full VOU! graptics (wet lenites excestians, ste ÿ, but we ash you
hee your COSUS Under ạ Creative Commant tenes identi¢a to the wrigie on
£0 Thar others enuy earn fram your work
Bandwtih graciously @anates By Drcamlire Seetigs Wow evatabic Zen 6
buss
Trang 22INTRODUCTION | xxI Tat seas or Cx Demy POT TTT LLL hf | | Èz7777TTUUWNNNN Orly 2 #77 PTT VRS 3 TT] it ⁄⁄.⁄0lIWWSššä z xhươơ) oe x aot tal SH LALLA LW IVVSS
FIGURE 0.4 With exactly the same XHTML, different CSS can achieve radically different designs Design by Samuel Marin
Trang 23
xxII | INTRODUCTION
FIGURE 0.5 The structured content, independent of presentation, is all in place as it should be, and it can be presented however the designer chooses Design by Mikhel Proulx
If there’s anything you’re doing with HTML that even hints at presentation, sfop— CSS can do it better That means everything from using it just to italicize text to using tables for layout And if there’s content that has genuine specific meaning (such as emphasis), making it look different with CSS isn’t enough—HTML should be used to apply that meaning through structure Example Structure or Presentation? A heading Structure Size of a heading Presentation A paragraph Structure Color of the text in a paragraph Presentation A table of figures Structure A border around table cells Presentation An image, such as a portrait photo Structure An image, such as a tessellating background Presentation A group of navigation links Structure The placement of a group of navigation links ona page Presentation HTML or CSS? XHTML CSS XHTML CSS XHTML CSS XHTML CSS XHTML CSS
Trang 24INTRODUCTION | xxIH
practice through using HTML tags as they were intended—to mark up data and apply meaning to it
The majority of the practical benefits of using web standards stem from this philoso- phy It’s a good one It works
The Practicalities of Web Standards
designing with
web standards
Hew »
Riders
Trang 25XXIV | INTRODUCTION
Web standards aren't just some form of Jedi mind trick, and web standards evange- lists tend not {too often) to be loony cult members No one would seriously take any notice of web standards, Jat alone use them, if there weren't real, substantial, prac- tical benefits Here are some of the most important ones:
® Cross-compatibility: What sets web standards apart from the old school
is that there’s nothing specific to one browser or another A common web design problern has been the “necessity” of developing one page for one browser and one page for another Even today, same sites are made to work
solely in Microsoft’s internet Explorer (IE), excluding a small, but significant,
percentage of users But barring a few minor discrepancies, following web standards will ensure that pages will work everywhere No alternative versions needed, no “IE only (we're tao lazy),” no exclusion of users
* Forward compatibility: Thanks to the increased likelihood of cross-compatibility,
web pages will be more likely to work as desired on future browsers than they would be if they depended on the nonstandard proprietary oddities of current browsers
* Gentralized control of presentation: As will be explained in Chapter 1, follow-
ing web standards and using CSS allows a single, or multiple, global file(s) to apply presentation to all web pages across a site Separating out the presen- tation from the HTML in this way makes if much easier and quicker to make site-wide presentational changes, resulting in a more consistent design than a situation in which you have to change every web page individually
® Pevice independence: Think that everyone looking at a web page is staring
Trang 26INTRODUCTION | xxv
@ Search engine optimization: Search engines love web standards They used
to love metadata (data about the web page explicitly written into it by the author} but this subjective tagging was easy to exploit and led to search results that weren’t necessarily that relevant Now search engines are much more sophisticated and use more advanced techniques to rate the relevancy of a page to a search query They tend to analyze the content itself and take special interest in things such as headings and even how close relevant con- tent is to the top of the page So if you’re using font tags to make text look
like headings instead of his and hes (see Chapter 2, “Text”) or if you’ve got
all of that table mess surrounding more table mess surrounding the content, then you re not doing yourself any favors
® Lightweight pages: Perhaps the most immediately impressive advantage is
just how lightweight pages become Lighter pages mean decreases in band- width (reducing hosting costs} and web page loading time (increasing usabil- ity) An equivalent “old-school” page made with tables for layout and fort tags for text decoration is a relatively fat load of markup Without the need far such bulky code or unnecessary graphics (such as transparent “spacer”
images and graphical text that could be replicated with CSS), it isn’t uncom-
mon to produce pages that are as much as 6O or 70 percent lighter
® Accessibility: Making it easier for users with disabilities to access web pages
satisfies a moral duty, opens up your website to a wider market, and helps it to comply with antidiscrimination laws A large proportion of web accessibility issues are technical and are tackled by using good web-standard HTML and
CSS
* Employer and client expectations: {f you're not sold on web standards, plenty of other people are The ability to code to W3C (X}HTML, CSS, and acces-
Trang 27xxvi | INTRODUCTION
A fundamental principle behind web standards is that they are browser-inde- pendent You shouldn't have to create browser-specific code—the whole idea is that if browser manufacturers fully supported the web standards laid out by the W3C, then one page could suit all But we live in the real world and no browser is perfect When you think of all the technical intricacies—their syntax and their behavior—involved in HTML and CSS, it’s little surprise that not every rule is applied 100 percent correctly, if applied at all, by every browser
Does this mean web standards are useless in practical terms? No The great news is that all popular modern browsers support a vast majority of web standards It’s just a few little niggles that sometimes cause irritation A little scratch and they tend to go away
By far the most popular browser out there is Internet Explorer for Windows IE is pretty much universally derided in the web standards community because it has many shortcomings—either lack of support or incorrect interpretations of quite a few web standard rules
More modern browsers, such as Firefox and Safari, are technically superior pieces of software (a statement that few could truthfully argue against—even Microsoft), but unfortunately for the web designer (and to the ultimate detri- ment of the user) there are only a handful of computer users who use anything other than the pre-installed browser on their machine This means predominantly Windows and this means Internet Explorer
Trang 28INTRODUCTION | xxvul
Browser shortcomings will be pointed out where applicable throughout this book, but in general terms there is absolutely no practical reason not to adopt web standards—all modern browsers are more than capable to deal with them We do have to work in a multibrowser world and even the best web makers encounter discrepancies in their pages between browsers They are usually easy to iron out, and as long as you test your pages on multiple browsers to make sure designs work, compatibility issues shouldn’t cause too many headaches
It isn’t true that lots of “hacks” are needed for web standard design In fact, that’s a bit of a contradiction
There is a large quantity of hacks out there (particularly for CSS) that allow you to dish out different code to different browsers, but they are generally just unnecessary quick fixes for something that wasn’t constructed properly in the first place In fact, in practical terms, there isn’t usually a need to use anything other than one simple hack—the box model hack—that is necessary to accom- modate a calculating error in IE 5.x (see Chapter 5, “Layout”)
Working on data collected from the Middle Ages, there are still those who bang on about Netscape 4 “Does it work on Netscape 4? Because Netscape 4’s really important It has to work in Netscape 4.”
Trang 29xxvIn | INTRODUCTION
The first step on judging whether you should accommodate a browser is the number of people who use it The second step is judging to what extent you have to compromise a web design to accommodate that browser
Only a tiny fraction of a percentage of people now use Netscape 4 But even though it could be accommodated (a tiny percentage is still a percentage, after all), it’s not worth it
A confused sage once said “The pinnacle of good web design is a web design that works on all browsers.”
Pifile
Yes, a web design should work on as many browsers as possible, but at what cost? Bending over backwards to accommodate old browsers will be to the detriment of those who use newer browsers What you lose by accommodating old browsers are the practical benefits of web standards, mentioned above Wave goodbye to flexibility, lighter pages, increased accessibility, heightened usability, and lower maintenance You are going to lose more visitors through lack of optimization than you are going to gain through the accommodation of obscure antiques The content of a well-structured HTML document should still be completely accessible on older browsers—those that do not understand CSS or those that are tricked into ignoring it (see “Applying CSS” in Chapter 1) will simply render the HTML in the browser’s default style The design may be lost, but the func- tionality won't be
Trang 30INTRODUCTION | xXxIx
with disabilities and how easy it is for them to access the information on a web page or website
The extent of accessibility considerations can fill a whole book (and they do—see Joe Clark’s excellent Building Accessible Websites (New Riders) or Web Accessibility: Web Standards and Regulatory Compliance (Friends of Ed), for example—but we will explore them a bit here because HTML and CSS are the tools ultimately used to tackle a majority of accessibility issues
BUILDINS |; accessiBle
FIGURE 0.7 Although some years old, Constructing Accessible Websites by Joe Clark is still the best, most comprehensive source for understanding web accessibility and applying accessibility techniques in web design
Trang 31xxx | INTRODUCTION
Who Is This Book For?
This book is for those who want to get to grips with best-practice (X)HTML and
CSS, and for those who want a solid, reliable reference book
Although the topic of web standards may appeal more to interrnediate-to-advanced web designers, the comprehensive nature of the book should suit beginners and axperts alike, both as a guide through how to author components of a web page and as a reference to make sure you're using the correct syntax
i've written something that | myself would find useful now, but something | also would have found very useful back when ! was first getting to grips with HTML, CSS, and web standards
How This Book Works
The book comprehensively works through the various components of a web page (except Chapter 10, which ts slightly different), explaining how to structure them and how to present them Component by component, by the end of the book, all practical web standards (XHTML 1.0 Strict and CSS 2.1) tools will have been covered
Practical Web Standards
Due to the current state of browser compatibility, not every W3C detail is covered in this book because even as we promote the philosophy of using web standards, we must also be practical There’s no point in banging on about a technique that is fine in theory but doesn’t work in a majority of browsers It would be a waste of paper and a waste of your time Be secure in the knowledge that most web standards options are practical and are covered It’s just a baby’s handful of pesky goblins that try to spoil the fun
Note that Appendixes A and B cover every valid (nonpresentational—see below) HTML (XHTML 1.0 Strict} tag, CSS (2.1) property, and every valid attribute and value When browser incompatibilities crop up, a note to that effect will be attached
Trang 32INTRODUCTION | xxx!
structure and presentation here and the practical benefits it brings, so there’s no room for these dated lingerers that are destined for the scrap heap anyway A brief look at some of the commonly used tags and attributes that don’t fit into the philosophy of this book (mainly invalid tags, but also tags such as b and i) are noted in the “Bad Tags” section of Appendix A
www.htmidog.com
There should be enough in this book to make at least a small cluster of your brain cells feel all warm and fuzzy, but part of its design is to work hand-in-hand with the HTML Dog website to give you even more help with HTML and CSS Throughout the book, you will find references to articles, which might go into more detail about certain techniques, for example, and you will also find numerous pointers to “bare- bone” examples These examples were designed to strip away all but the necessary code to demonstrate a small part of HTML or CSS, such as headings, or forms, background images, or vertical alignment Simply view the page source (an option which can be found under the “View” menu item of most browsers) to see what’s going on When they pop up in the book, they'll look a little something like this: CS www.htmldog.com/examples/verticalalign.html A list of the gamut of 70-odd examples can be found at www.htmidog.com/examples/ The Chapters
Neatly nestled into 10 chapters you will find explanations of pretty much every com- ponent of HTML and CSS you'll need, along with a few fancy techniques to add a little bit of pizzazz to your pages
e Chapter 1, “Getting Started”—sets the ball rolling by explaining the syntax of HTML and CSS: what they look like, how they should be used, and how they can be linked together
Trang 33MME | INTRODUCTION
more The chapter then looks at the CS5 that can be used to apply things such as fonts, sizes, italics, and character spacing
Chapter 3, “Links”—fooks at just one tag, but it's such an important one that it has been honored with its own chapter From basic links and page anchors through to making links more accessible and good practices in styling them Chapter 4, “Images”—covers how to add content with the img tag and how to add striking presentation with the powerful CSS background image
Chapter 5, “Layout’—explains how you can achieve various layouts using CSS Chapter 6, “Lists”-—goes over ordered, unordered, and definition lists and how they can be styled to make page components such as navigational tabs
Chapter 7, “Scripts & Objects”-—explains how JavaScript and objects such as
Fiash movies can be incorporated into an HTML page
Chapter 8, “Tables”——covers everything you need to know about haw to mark up tabular data (not how to use tables for layout!), including how to make tables more accessible There are also a few specific CSS techniques thrown in that can be used to make their presentation all the prettier
Chapter 9, “Forms”—covers how to structure and present forms and form fields for user input, and explains the limitations of styling form elements
Chapter 10, “Multiple Media”’—looks at how web pages work in media other
Trang 34chapter Í
Getting Started
GETTING STARTED is often the most difficult thing to do Sometimes It’s easier not to start at the beginning, but rather just jump in halfway and start messing about with images or forms, for example That might get you on the road to a more interesting-looking web page quicker, but your car would probably be in better condition afterwards if you learned how to drive properly first It’s the same as with any other subject—there’s always a whole load of theory to plow through, but getting through it will make life easier and better in the long run
This chapter will tell you pretty much everything you need to know about putting together the basic components of a web page It splits quite neatly into two—how to use HTML and how to use CSS
HTML Syntax
Trang 352 | CHAPTER 1: GETTING STARTED
Elements, Tags, and Attributes
All you are coing with HTML is taking content and defining what each piece of it means by wrapping the pieces in tags To define a few terms, in the following example: <a h >HIML Dog<-d> "4S an opening tag, which defines the start of an element
“<a>” is a closing tag, which defines the end of an element
ref” is an attribute, which is a setting for an element (in this example, “ret” is the destination of a fink—-see Chapter 3, “Links.”)
ae EERE is an attribute value, used to specify what the attribute
66 „0 hrefs°http:,2www,htmldog,com/”“SHPM Boaszas” (fhe whole shebang) ts an ele- ve Ệ wera EE tài SHR ae xố vs NHÀ _- ee wk ee sus Cast s sk W È% VN et Soy 6, cS ft ¿ \ H
There are a few simple rules to follow when it comes to tags (besides using valid tags and attributes, which the chapters will cover)
ie XHTML requires that all tags and attributes must be lowercase <p><,'9>
er
and «blockauotes<blockauotes are valid, but <Ps</Ps and <BLOCKQUOTE
LOCKQUOTES are not Cf you aren’t familiar with some of the tags in this
ở
@
chapter, don’t worry; they are covered later in the book.)
secoricly, all tags must close in the above example, the end of the element is marked by «“a> <his must be closed with an <.his, <divs must be closed with a «divs, and so on There are special cases where an element has no content, such as br or input In these cases there is no explicit closing tag, but rather
character at the end, as in <br > or
4s /”