Toolsblockquote

HTMLandCSSWebStandardsSolutionsAWebStandardistas'ApproachChristopherMurphyNicklasPerssonLeadEditorClayAndresTechnicalReviewerPaulHaineEditorialBoardClayAndres,SteveAnglin,MarkBeckner,EwanBuckingham,TonyCampbell,GaryCornell,JonathanGennick,MichelleLowman,MatthewMoodie,JeffreyPepper,FrankPohlmann,BenRenow-Clarke,DominicShakeshaft,MattWade,TomWelshProjectManagerBethChristmasCopyEditorAmiKnoxAssociateProductionDirectorKariBrooks-CoponyProductionEditorKellyWinquistCompositorDinaQuanProofreaderAprilEddyIndexerJulieGradyArtistAprilMilneInteriorandCoverDesignerKurtKramesManufacturingDirectorTomDebolskiHTMLandCSSWebStandardsSolutions:AWebStandardistas'ApproachCopyright2009byChristopherMurphyandNicklasPerssonAllrightsreserved.
Nopartofthisworkmaybereproducedortransmittedinanyformorbyanymeans,electronicormechanical,includingphotocopying,recording,orbyanyinformationstorageorretrievalsystem,withoutthepriorwrittenpermissionofthecopyrightownerandthepublisher.
ISBN-13(pbk):978-1-4302-1606-3ISBN-13(electronic):978-1-4302-1607-0PrintedandboundintheUnitedStatesofAmerica987654321Trademarkednamesmayappearinthisbook.
Ratherthanuseatrademarksymbolwitheveryoccurrenceofatrademarkedname,weusethenamesonlyinaneditorialfashionandtothebenefitofthetrademarkowner,withnointentionofinfringementofthetrademark.
DistributedtothebooktradeworldwidebySpringer-VerlagNewYork,Inc.
,233SpringStreet,6thFloor,NewYork,NY10013.
Phone1-800-SPRINGER,fax201-348-4505,a)i]ehkn`ano)juanda26Theimportanceofusingthetitleelement.
26Definingyourdocumenttype28ItallstartswithaDOCTYPE.
28AshortQuirksModeinterlude.
28It'sallinanamespace29Justonemorething.
29Youdon'thavetomemorizeallthis.
29HelloWorld!
:DOCTYPEedition30Tagshavestructuretoo:Nestedelements30Makingyourmarkupeasiertofollow.
32Commentingyourmarkup32Whitespace34Summary.
35Homework:Createyourfirstspace-monkey-themedXHTMLpage35Chapter3:StructuredMarkup.
39Addingstructureandmeaning40Whatisstructuredmarkup41Whatissemanticmarkup42Makingmarkupmeaningful42POSHandproud43Signpostsforreading43Creatingstructurewithheadingsandparagraphs44Applyinginformationhierarchy45Casestudy:TheGuardian46CONTENTSixAnintroductiontophraseelements49Whatisanelement49Addingmeaningtofragmentsoftext50Addingemphasis:and50Otherphraseelements51Block-levelandinline-levelelements51Imagineabox.
52Thedifferencebetweenblock-levelandinline-levelelements52Validcodeisbrowser-friendlycode53TheW3CMarkupValidationService.
53Validcodeisnotnecessarilywell-structuredcode58Gettingthesearchmixright58Summary.
60Homework:IntroducingMissBaker60Chapter4:MarkupThatAddsMeaning.
65Lists:First-levelorganizers66Whyuselists66Unorderedandorderedlists.
67Entertheorderedlist68Nestinglists70Definitionlists71Tables:Thegood,thebad,andthealternatives.
73Whatistabulardata74,,and75Improvingtableaccessibility76Addingadescriptivesummarytoatable.
77Quotingtext79What'sa79Citations(or80Quotations(or81OthertagsintheStandardistas'toolbox.
82Abbreviations.
82Makingacaseforrules:and85Markingupchangeswithand86and86Summary.
88Homework:Gordo'sAdventure.
88Chapter5:IncludingImages91Introducingthetag92Antaginaction.
92Addingwidth,height,andtitleattributestoimages96CONTENTSxWorkingwithimages97Whichimageeditor(Orhowlongisapieceofstring98Photoshop98Fireworks99PhotoshopExpress99BringouttheGIMP(anditsfriends)100Imageoptimization100Whycompressingyourfilesisimportant101SaveforWeb102ImageformatsfortheWeb103JPG:Photographs103GIF:Graphicsandtype.
105PNG:Thenew(old)kidontheblock106PNG-8.
107PNG-24.
107Apixelisapixelisapixel109Sizematters109Thelimitationsofbitmaps.
110Vectorgraphics110Findingtherightimage112Low-costimages.
112FlickrandCreativeCommons112Summary.
113Homework:Apictureisworthathousandwords113Chapter6:CreatingLinkswithAnchors117Meet118Usingdescriptivelinktext119Thetitleattribute.
120Let'screatesomelinks!
122Externallinks122Thedreadedampersandandthevalidator123Checkingyourlinks124The(evil)targetattribute124Locallinks.
125Internallinks126E-maillinks.
127Wrappingup128Absolutevs.
relativelinks.
129Structuringyoursite130Organizingyourfilesandfolders130Themagicindexfile.
132Linkingbetweendifferentfoldersinoursite134Linkingwithinafolder.
135Linkingdownintoasubfolder136Linkingupintoa"parent"folder137Linkingupandthenlinkingdown138Summary.
139Homework:Housekeepingfirst;linkssecond.
140CONTENTSxiChapter7:GettingYourSiteOnline145YouraddressontheWeb146Whatisadomainname146What'saTLD147Thinkofaname!
148Registeringadomainname.
149Webhosting150Freewebhosting150Gettingthebalanceright.
151Thingstolookforinahostingcompany151Diskspace151Bandwidth152E-mail152Acontrolpanel152Support152Movingwebhosts153Uploadingyourfiles.
153Localvs.
remote.
153FileTransferProtocol.
154Propagation155Toolswe'reusing155WhichFTPclient156Transferringfilestotheserver:Awalkthrough156Whatyouneed.
156Theaddressoftheserver157Yourusername.
157Yourpassword157Let'sgetstarted157Onlinewalkthrough161Summary.
161Homework:Gettingyoursiteonline162PARTTWO:ADDINGSTYLEWITHCSSChapter8:CSS101167Addingsomestyle169HTML:Abriefrefresher.
169CSSisn'tnew170Tagsouporleanandmean170CSStotherescue.
172MeetCSS172AnatomyofaCSSrule.
173Anoteonformatting.
174Aslightlymorecomplexrule175AddingCSStoawebpage.
176Addinganembeddedstylesheet177CONTENTSxiiAsimplewalkthrough179Gettingcolorful179Stylingthe180Stylingtheheadings:and183Stylingthe186CommentingyourCSS.
187Summary.
191Homework:AddingsomeCSStoGordo'swebpage191Chapter9:StylingText.
195TypographyontheWeb.
196Whatistypography196CSS:Ourflexiblefriend197Makingyourtextaccessible197Inheritanceandspecificity.
198Inheritance198Meetspecificity200SpecifyingtypeontheWeb.
202CoreWebFonts203WritingmorereliableCSSrulestospecifyfonts204Serif205Sansserif206Monospace206Cursive206Fantasy206Sizematters206Sizingtextwithpixels207Sizingtextwithems.
207Writingmoreefficientrules.
209Showandtell:Addingafewmorerules.
211Specifyingatypeface.
211Let'slosesomeweight.
212Texttransform213Letterspacing.
214Stylingparagraphs215Settingalineheight215Addingparagraphindents.
217Aligningtextusingtext-align218Stylinglinks.
220Usingpseudo-classestostylelinks220LoVeHAteyourlinks224Summary.
225Homework:ImprovingGordo'stypography225Chapter10:AOne-ColumnCSSLayout.
229TheCascadeinCascadingStyleSheets.
230Sowhatexactlyisthecascade230TheorderofyourCSSrulesisimportant.
232CONTENTSxiiiIntroducingmargins,borders,andpadding233Meettheboxmodel233Applyingmargins,borders,andpadding234UsingCSSshorthandformargins,borders,andpadding240Stylingour243Dividingupyourdocument.
244Identifyingyourdocument'ssections.
245Usingdivandspanelementswithidandclassattributes246divandspanelements247idandclassattributes248It'sallinaname.
249UsingdivelementstocreateCSSlayouts.
250Aone-columnCSSlayout252Usingdescendantselectorstominimizemarkup.
260Stylingdetailswiththespanelement262Usingaspantostyleinlinecontent262DanCederholm'sillustriousampersand263Stylingwithclassattributes264EnhancingyourdesignbyaddingbackgroundimageswithCSS265Addingabackgroundimagetothebody.
266Usingbackgroundimageswithotherelements.
268Summary.
270Homework:Creatingaone-columnCSSlayout271Chapter11:ATwo-ColumnCSSLayout275Afloat-basedCSSlayout276Floatingdivs277Applyingfloatstolayouts285Creatingourtwo-columnCSSlayout288Calculatingthewidthofyourelements293Ashortboxmodelrecap.
293Whathappenswhenyourelementsaretoowide295Collapsingmargins297Applyingafloattoanimage299FauxColumns.
304WrappingupwithKingKong.
307Summary.
309Homework:AddingasecondcolumntoGordo'swebpage309Chapter12:List-O-Matic.
313Stylinglists315Stylingasimplelist315Stylinganavigationlist321Creatinghorizontallists326Stylingnestedlists329Stylingasitemapwithanestedlist330Stylinganorderedlist337CONTENTSxivSummary.
339Homework:AddingtheFamousPrimateswebsite'snavigation340Chapter13:HarnessingthePowerofExternalStyleSheets343Theheadelementsthatmakeitallhappen344Theimportanceofmetatags345It'sallinaname.
347Speakingaforeignlanguage348ExternalStyleSheets350Embeddedvs.
linkedstylesheets350Linkingtoanexternalstylesheet351Mediatypes351Using@import352CreatingourexternalCSSfile352TherealpowerofCSS.
354Addingaprintstylesheet355Buildingtheprintstylesheet355Stylethebody356Hideunnecessarycontent.
356Styletheheadings356Stylethelinks357ClickPrintandchecktheresults358ConditionalcommentsforInternetExplorer359Aconditionalcommentinaction360Addingafavicon361Addingscripts.
362Testingandtroubleshooting363Testing363Web-basedbrowsertestservices364Buildingaguerillatestingsuite.
366Gradedbrowsersupport.
366Troubleshooting.
368Validate,validate,validate!
368Leanrtospel369Adoptaluridpalette.
370Checkforrepetition370Reducetodeduce371XHTMLrulereference.
371Summary.
372Homework:Linkingtoexternalstylesheets372Chapter14:WheretofromHere377Butreally,wheretofromhere378JavaScriptlibraries381Database-drivensites.
382AJAXandRichInternetApplications.
382CONTENTSxvwww.
webstandardistas.
com383TheWebStandardistas'periodical384Bookreviews384Resources384Tools384Badges385Tea385Toolstomakeyourlifeeasier385FirefoxWebDeveloperAdd-on385Firebug386Toolsforotherbrowsers388Basecamp388Whatelseisoutthere389Recommendedbooks389BulletproofWebDesign390CSSArtistry.
390TheZenofCSSDesign.
390CSSMastery391HTMLMastery391Otherbookswerecommend391Recommendedsites.
392Organizationsandpublications.
392W3C392WebStandardsProject392AListApart393DigitalWebMagazine393Designandinspiration.
393DesignObserver393TheElementsofTypographicStyleAppliedtotheWeb.
394Stylegala.
394CSSZenGarden.
394Accessibility394456BereaStreet394DiveIntoAccessibility395JoeClark.
395NorthTempleJournalofDesign.
395People.
395DanCederholm395JohnGruber396JohnHicks396JeffreyZeldman396Afondfarewell.
396Summary.
397Homework:You'veearnedthebadges—nowusethem!
397Index399xviiABOUTTHEAUTHORSInternationallyrespecteddigitalartistChristopherMurphyhasbeendescribedas"aWilliamMorrisforthedigitalage"(CreativeReview).
CreativelyexploringthepotentialoftheWebsincethemid'90s,heisacofounderofweb-basedartspublishingorganizationFlltPublishing(sss*b]hhp*_ki)andhasworkedwithinthefieldofaudio-relateddesignforoveradecade.
Murphy'sworkhasbeenfeaturedalongsidenumerousinternation-allyrespecteddesignersincludingPeterSaville,TheDesignersRepublic,Tomato,andStefanSagmeisterinavarietyofdesignbooksandmagazines,includ-ingEyemagazine,widelyacknowledgedasoneoftheworld'sleadingdesignjournals.
Aregu-larspeakeratdesignconferencesandworkshopsworldwide,healsoexhibitshisworkinternationally.
InadditiontohisroleasalecturerininteractivedesignattheUniversityofUlsteratBelfast,wherehehasactivelypromotedawebstandards–basedcurriculum,Murphyrunsanestab-lisheddesignconsultancyandhascreatedaward-winningworkforclientsincludingAbsolutVodka,RoyalMail,andtheBritishCouncil.
Whennototherwiseoccupied,hemaintainsthewebsitefordigitalartscollectiveFehler:sss*badhancaoahho_d]bpiep^ao_dn]jgpand]bpqjc*_kiABOUTTHEAUTHORSxviiiApracticingdigitalartistsincethemid'90s,NicklasPerssongradu-atedfromtheUniversityofUlsterin2000withafirst-classBA(Hons)degreeinfineandappliedarts.
Hisworkhasbeenexhibitedinterna-tionallyatnumerousonlineandofflinedigitalartsfestivalsworld-wide.
OngraduationPerssonwasinvitedtoworkforBBCInteractive,aprestigiousrolehereadilyaccepted.
Hesubsequentlymovedtoaroleasseniordeveloperinthewell-respectedBelfast-basedinteractivedesignagencyRadar.
Henowcombinesworkasalecturerininterac-tivedesignattheUniversityofUlsteratBelfastwithworkasafreelancedeveloperanddesigneratSL33P(sss*oh//l*_ki)specializinginthedesignanddevelopmentofwell-craftedwebapplications.
Asaconsequenceofhiscommitmenttohisteaching,heregretsneglectinghisobligationstohislong-establishedwebsite:sss*p]gapa*_kiAbouttheTechnicalReviewerPaulHaineisaclient-sidedevelopercurrentlyworkinginLondonfortheGuardiannews-paper.
HeistheauthorofHTMLMastery:Semantics,Standards,andStyling(friendsofED,2006)andrunsapersonalwebsiteatsss*fka^h]`a*_ki.
xixACKNOWLEDGMENTSWe'regratefultoeveryonewhohassupportedusthroughouttheprocessofwritingthisbook.
We'veverymuchappreciatedthesupportofbothourcolleaguesandourstudents(nottomentionourclients)whilewe'vebeenknee-deepinpaper—thanksforbeingsounderstanding.
Wewouldparticularlyliketothankthefollowingpeoplewhohelpedturnthisbookintoareality.
ClayAndres,oureditor,forbelievinginouroriginalideaandcreativelyguidingusthroughthewritingprocess.
Weappreciateyourencouragementandsupport.
PaulHaine,ourtechnicalreviewer,forhismeticulousattentiontodetail.
Yourinsightfulsug-gestionshelpedimprovethisbookconsiderably.
BethChristmas,ourprojectmanager,whohaskeptthisbookontrackandprovidedinspira-tionthroughoutthedarkermoments!
Wewouldn'thavemadeitthroughthisprocesswith-outyourboundlessenthusiasm.
AmiKnox,ourcopyeditor,whonotonlyimprovedourtextconsiderably,butalsosharesouridiosyncraticsensibilities.
Ifweeverwriteabookagain,we'dlikeyouandyoureagleeyesontheteam!
We'vealsoverymuchappreciatedthehardworkofKellyWinquist,DinaQuan,AprilEddy,andeveryoneatfriendsofED,whohaveworkedunderrelentlesspressure(thankstoafewmisseddeadlinesatourend)todeliverthisbookontime.
ThanksalsotoLeeMunroeforlate-nightTwittersupport,MichaelMcCrory(ourguineapig)forhisfeedbackalongtheway,andDebbieFraserforherunwaveringtolerance(we'llgetthoseprojectsfinishedforyounowDebbie.
.
.
).
Lastly,thankstoyou,forchoosingthisbook.
WehopeyoufinditbothhelpfulandinspiringasyouembarkonyourjourneyasaWebStandardista.
ChristopherMurphyandNicklasPerssonACKNOWLEDGMENTSxxThankstoCaraforyourconstantsupportandunderstandingoverthelastfewmonths(andyears),andtoRossandCaitlínforbeingthere(whenI'vebeenthere).
RollonDonegal2009!
ChristopherMurphyThankstoMargaretforyourenduringsupportandforholdingeverythingupduringthelastfewmonths,andtoTiernanandOskarforstillrememberingmyface.
NicklasPerssonxxiINTRODUCTIONWhydidwechoosetowritethisbookWe'rebothextremelybusy—lecturingbachelor'sdegreeandmaster'sdegreeinteractivedesignstudents,maintainingourownpracticework-ingforclients,andfurtheringourestablishedcareersasartistsexhibitinginternationally—sotheideaofa"howto"bookforwould-bewebdesignerswasn'tarrivedatlightly.
Thatsaid,wefeltthetimewasrightforthissortofbook.
Therearealotofexcellentbooksthatwepointourstudentstoward:DanCederholm'sinspiringWebStandardsSolutions;PaulHaine'smeticulousHTMLMastery;andAndyBudd,CameronMoll,andSimonCollison'sindispensableCSSMastery,tonamebutafew.
Allarefantasticbooksandweurgeourstu-dentstobuyeveryone;however,noneofthemseemedtocovereverythingourstudentsneededtoembarkonawell-grounded,webstandards–basedapproachinonepackage:namely,asolidfoundationinwell-structuredXHTMLcoupledwithacomprehensiveintro-ductiontoCSS.
CueWebStandardistas.
AlittlebackgroundWeteachfinalyearbachelor'sdegreeandmaster'sdegreeinteractivedesignstudentsattheUniversityofUlsteratBelfast,andwe'reproudoftheworkthatmanyofthemdo.
We'veworkedveryhardoverthelastfewyearstodevelopalectureprogramforourstudentsthatcoversallofthefundamentals:asolidgroundinginXHTMLcoupledwithastronggraspofCSS.
Westrivetoensurethatwhenourstudentsleaveourcoursesthey'redoingwebdesigntherightway:creatingwell-designedwebsitesbuiltusingawebstandardsapproach.
Inlate2006wewereinvitedtowriteaneveningcourseforabsolutebeginners,opentoall,nopreviousexperiencerequired.
Werelishedthechallengeandsetaboutwritingawebdesigncoursefromscratchthatcoveredeverythingrequiredtosetupawebsitefromstarttofinish,includingregisteringyourownwebaddressanduploadingyourwebsitetoyourownwebspace—anaspectoftensurprisinglyoverlookedinwebdesignbooks.
INTRODUCTIONxxiiThebookyou'reholdinginyourhandsgrewoutofthatcourseandwasdesignedtohelpanyonegettingstartedontheWebtogetupandrunningasquicklyaspossible:lowbarriertoentry,easytofollow,jargonexplainedinaneasy-to-understandmanner.
WhoisthisbookaimedatWhoisthisbookaimedatAnyone!
AnyonewithaninterestintheWeb.
Anyonewithaninterestinbuildingandmaintaininganeasy-to-updatewebsite.
Moreimportantly,it'saimedatanyonewantingtosetoutontheonetruepath,embracingwebstandards,tobecomeaWebStandardista.
Evenifyou'reanabsolutebeginnerinwebdesign,thisbookwillenableyoutocreatefuture-proofwebsitesthatnotonlylookgreatinallmodernbrowsers,butarealsoaccessibletoawidevarietyofaudiencesacrossarangeofplatforms—fromthosebrowsingoneverydaycomputerstothoseaccessingtheWebonthelatest,emergingmobiledevices.
Across14easy-to-followchapters,weintroduceyoutothefundamentalsofcontemporarywebdesignpractice.
Bybuildingprogressively,chapteruponchapter,weequipyouwithafirmknowledgeofthefundamentalsofwebdesign.
Inshort,everythingyouneedtoknowtomoveforwardinyourlifelongjourneyasaWebStandardista.
Regardlessofyourcomputingplatform—MacOS,Windows,orLinux—werecommendeasy-to-mastertoolsthatare,inmostcases,freeandequipyouwithaknowledgeofthesetoolswithaminimumoftechnicaljargon.
Stepbystepwecoverhowtobuildhandcraftedwebpagesusingwell-structuredXHTMLmarkupandhowtoapplylayoutandstyletothesepagesusingCSS.
Whatthisbookdoesn'trequire:expensivesoftwareoradegreeincomputerscience.
Whatyou'llachieveAsyou'lldiscoverinChapter1,"homework"formsanimportantaspectofthisbook.
We'veincludedaseriesofenjoyablepracticalassignmentsattheendofeachchapter,exercisesforyoutofollowalongwithatyourownpace.
Followingalongwiththehomeworkwillnotonlyensurethatyoufullygraspwhatwecoverineachchapter,butalsoprovideyouwithawell-craftedwebsitethatyoucanbuildononceyou'vecompletedthebook.
Itgetsbetter—we'reevenofferingtheXHTMLandCSSyou'llbecreatingasapartofthebook'shomeworkforfree,underaCreativeCommonslicense.
Completethehomework,andyoucanusethewebsiteyou'vebuiltasaframeworkforyourowncontent,safeintheknowl-edgethatthewebsiteyou'vecreatedisfuture-proofandoptimizedforeveryone:fromthosebrowsingoneverydaycomputers,tothoseaccessingtheWebonthelatestemergingmobiledevices,asshowninFigure1.
INTRODUCTIONxxiiiFigure1.
Thewebsiteyou'llbecreatingasapartofthebook'shomeworkisdesignedtobedisplayedacrossavarietyofdevices.
Byfollowingalongwiththebook'spracticalassignments,you'llbecapableofproducingacomprehensivewebsitethatnotonlylooksgoodineverydaybrowsers,butalsolooksgreatinthelatestbreakthroughInternetcommunicationdevices.
Youcanseethecompletedwebsiteyou'llbecreatingatsss*b]ikqolnei]pao*_kiConventionsusedinthisbookTokeepthisbookasclearandeasytofollowaspossible,thefollowingtextconventionsareusedthroughout.
Importantwordsorconceptsarenormallyhighlightedinboldtype.
Codeispresentedinbeta`)se`pdbkjp.
Neworchangedcodeisnormallypresentedin^kh`beta`)se`pdbkjp.
MenucommandsarewrittenintheformMenuSubmenuSubmenu.
Wherewe'dliketodrawyourattentiontosomething,oroffersomeadditionalsupportingmaterial,we'vehighlighteditlikethis:Remember,onceopened,alltagsshouldbeclosed.
INTRODUCTIONxxivSometimescodewon'tfitonasinglelineinabook.
Wherethishappens,weuseanarrowlikethis:.
Pdeoeo]ranu(ranuhkjcoa_pekjkb_k`apd]podkqh`^asneppaj]hhkjpdao]iahejasepdkqp]^na]g*ThroughoutthisbookweprovideexamplesofmarkupinXHTMLandCSS.
Whereweshowsectionsofrepetitivemarkup,wehaveusedellipses(***)forbrevityasfollows:8qh:8he:GejcGkjc8+he:8he:knjaheqo8+he:***8he:daap]8+he:8+qh:Usingellipsesallowsustoshowyouthemarkupthat'srelevantandthatwe'respecificallyreferringto,enablingyoutofocusonwhatmatters.
AccessingthecodeAllthecodeexamplesandhomeworkfilesusedthroughoutthisbookareavailablefordown-loadatthebook'scompanionwebsite.
Youcanaccessthesefilesalongwithadditionalsup-portingmaterialandlinkstootherresourcesatsss*sa^op]j`]n`eop]o*_kiLet'sgetstarted!