HeadFirstHTMLwithCSS&XHTML
ByElisabethFreeman,EricFreeman
...............................................
Publisher:O'Reilly
PubDate:December2005
PrintISBN-10:0-596-10197-X
PrintISBN-13:978-0-59-610197-8
Pages:694
TableofContents|Index
TiredofreadingHTMLbooksthatonlymakesenseafteryou'reanexpert?Thenit'sabout
timeyoupickedupHeadFirstHTMLwithCSS&XHTMLandreallylearnedHTML.Youwant
tolearnHTMLsoyoucanfinallycreatethoseWebpagesyou'vealwayswanted,soyoucan
communicatemoreeffectivelywithfriends,family,fansandfanaticcustomers.Youalso
wanttodoitrightsoyoucanactuallymaintainandexpandyourWebpagesovertime,
andsoyourWebpagesworkinallthebrowsersandmobiledevicesoutthere.Oh,andif
you'veneverheardofCSS,that'sokay-wewon'ttellanyoneyou'restillpartyinglikeit's
1999-butifyou'regoingtocreateWebpagesinthe21stcenturythenyou'llwantto
knowandunderstandCSS.
LearntherealsecretsofcreatingWebpages,andwhyeverythingyourbosstoldyouabout
HTMLtablesisprobablywrong(andwhattodoinstead).Mostimportantly,holdyourown
withyourco-worker(andimpresscocktailpartyguests)whenhecasuallymentionshow
hisHTMLisnowstrict,andhisCSSisinanexternalstylesheet.
WithHeadFirstHTMLwithCSS&XHTML,you'llavoidtheembarrassmentofthinkingWebsafecolorsstillmatter,andthefoolishnessofslippingafonttagintoyourpages.Bestof
all,you'lllearnHTMLandCSSinawaythatwon'tputyoutosleep.Ifyou'vereadaHead
Firstbook,youknowwhattoexpect:avisually-richformatdesignedforthewayyour
brainworks.Usingthelatestresearchinneurobiology,cognitivescience,andlearning
theory,thisbookwillloadHTML,CSS,andXHTMLintoyourbraininawaythatsticks.
Sowhatareyouwaitingfor?Leavethoseotherdustybooksbehindandcomejoinusin
Webville.Yourtourisabouttobegin.
"Elegantdesignisatthecoreofeverychapterhere,eachconcept
conveyedwithequaldosesofpragmatismandwit."
--KenGoldstein,ExecutiveVicePresident,DisneyOnline
"Thisbookisathoroughlymodernintroductiontoforward-looking
practicesinwebpagemarkupandpresentation."
--DannyGoodman,authorofDynamicHTML:TheDefinitiveGuide
"Whatusedtobealongtrialanderrorlearningprocesshas
nowbeenreducedneatlyintoanengagingpaperback."
--MikeDavidson,CEO,Newsvine,Inc.
"IloveHeadFirstHTMLwithCSS&XHTML--it
teachesyoueverythingyouneedtolearnina'funcoated'format!"
--SallyApplin,UIDesignerandArtist
"Ihaven'thadasmuchfunreadingabook(otherthanHarryPotter)inyears.Andyour
bookfinallyhelpedmebreakoutofmyhaplessso-last-centurywayofcreatingweb
pages."
--ProfessorDavidM.Arnow,DepartmentofComputerandInformationScience,Brooklyn
College
"Ifyou'veeverhadafamilymemberwhowantedyoutodesignawebsiteforthem,buy
themHeadFirstHTMLwithCSSandXHTML.Ifyou'veeveraskedafamilymemberto
designyouawebsite,buythisbook.Ifyou'veeverboughtanHTMLbookandendedup
usingittolevelyourdesk,orforkindlingonacoldwinterday,buythisbook.Thisisthe
bookyou'vebeenwaitingfor.Thisisthelearningsystemyou'vebeenwaitingfor."
--WarrenKelly,Blogcritics.org
HeadFirstHTMLwithCSS&XHTML
ByElisabethFreeman,EricFreeman
...............................................
Publisher:O'Reilly
PubDate:December2005
PrintISBN-10:0-596-10197-X
PrintISBN-13:978-0-59-610197-8
Pages:694
TableofContents|Index
HeadFirstHTMLwithCSSandXHTML
Dedication
PraiseforHeadFirstHTMLwithCSS&XHTML
AuthorsofHeadFirstHTMLwithCSS&XHTML
Intro
Chapter1.TheLanguageoftheWeb
Section1.1.TheWebkilledtheradiostar
Section1.2.WhatdoestheWebserverdo?
Section1.3.WhatdoestheWebbrowserdo?
Section1.4.Whatyouwrite(theHTML)...
Section1.5.Whatthebrowsercreates...
Section1.6.therearenoDumbQuestions
Section1.7.YourbigbreakatStarbuzzCoffee
Section1.8.CreatingtheStarbuzzWebpage
Section1.9.CreatinganHTMLfile(Mac)
Section1.10.CreatinganHTMLfile(Windows)
Section1.11.therearenoDumbQuestions
Section1.12.Meanwhile,backatStarbuzzCoffee...
Section1.13.Savingyourwork...
Section1.14.OpeningyourWebpageinabrowser
Section1.15.Takingyourpageforatestdrive...
Section1.16.MarkupMagnets
Section1.17.1stCongratulations,you'vejustwrittenyourfirstHTML!
Section1.18.Arewethereyet?
Section1.19.Anothertestdrive...
Section1.20.Tagsdissected...
Section1.21.therearenoDumbQuestions
Section1.22.Meetthestyleelement
Section1.23.GivingStarbuzzsomestyle...
Section1.24.Cruisin'withstyle...
Section1.25.Exercise
Section1.26.FirsideChats
Section1.27.HTMLcross
Section1.28.MarkupMagnetsSolution
Section1.29.ExerciseSolutions
Chapter2.Meetingthe'HT'inHTML
Section2.1.HeadFirstLounge,NewandImproved
Section2.2.Creatingthenewlounge
Section2.3.Whatdidwedo?
Section2.4.Whatdoesthebrowserdo?
Section2.5.Understandingattributes
Section2.6.Gettingorganized
Section2.7.Organizingthelounge...
Section2.8.Technicaldifficulties
Section2.9.Planningyourpaths...
Section2.10.Fixingthosebrokenimages...
Section2.11.HTMLcross
Section2.12.TheRelativityGrandChallengeSolution
Chapter3.WebPageConstruction
Section3.1.FromJournaltoWebsite,at12mph
Section3.2.Theroughdesignsketch
Section3.3.Fromasketchtoanoutline
Section3.4.FromtheoutlinetoaWebpage
Section3.5.TestdrivingTony'sWebpage
Section3.6.Addingsomenewelements
Section3.7.Meetthe<q>element
Section3.8....andcheckoutthetestdrive...
Section3.9.Five-MinuteMystery:TheCaseoftheElementsSeparatedatBirth
Section3.10.LooooongQuotes
Section3.11.Addinga<blockquote>
Section3.12.Five-MinuteMysterySolved
Section3.13.Therealtruthbehindthe<q>and<blockquote>mystery
Section3.14.FiresideChats
Section3.15.Meanwhile,backatTony'ssite...
Section3.16.Ofcourse,youcouldusethe
elementtomakealist...
Section3.17.ConstructingHTMLlistsintwoeasysteps
Section3.18.Takingatestdrivethroughthecities
Section3.19.Puttingoneelementinsideanotheriscalled"nesting"
Section3.20.Tounderstandthenestingrelationships,drawapicture
Section3.21.Usingnestingtomakesureyourtagsmatch
Section3.22.Sowhat?
Section3.23.BEtheBrowser
Section3.24.WhoamI?
Section3.25.ElementSoup
Section3.26.HTMLcross
Section3.27.BEtheBrowserSolution
Section3.28.ExerciseSolutions:WhoamI?
Chapter4.ATriptoWebville
Section4.1.GettingStarbuzz(oryourself)ontotheWeb
Section4.2.Findingahostingcompany
Section4.3.HELLO,mydomainnameis...
Section4.4.Howcanyougetadomainname?
Section4.5.Movingin
Section4.6.Gettingyourfilestotherootfolder
Section4.7.AsmuchFTPasyoucanpossiblyfitintwopages
Section4.8.Backtobusiness...
Section4.9.Mainstreet,URL
Section4.10.WhatistheHTTPProtocol?
Section4.11.What'sanAbsolutePath?
Section4.12.BehindtheScenes:Howdefaultpageswork
Section4.13.HowdowelinktootherWebsites?
Section4.14.LinkingtoCaffeineBuzz
Section4.15.Andnowforthetestdrive...
Section4.16.Five-MinuteMystery
Section4.17.Webpagefitandfinish
Section4.18.Thetitletestdrive...
Section4.19.Linkingintoapage
Section4.20.Usingthe<a>elementtocreateadestination
Section4.21.Howtolinktodestinationanchors
Section4.22.Nowthatyou'vegotyourhandsontheirHTML...
Section4.23.Reworkingthelinkin"index.html"
Section4.24.Five-MinuteMysterySolved
Section4.25.Linkingtoanewwindow
Section4.26.Openinganewwindowusingtarget
Section4.27.TheTargetAttributeExposed
Section4.28.HTMLcross
Chapter5.MeetingtheMedia
Section5.1.Howthebrowserworkswithimages
Section5.2.Howimageswork
Section5.3.<img>:it'snotjustrelativelinksanymore
Section5.4.Alwaysprovideanalternative
Section5.5.Sizingupyourimages
Section5.6.therearenoDumbQuestions
Section5.7.Creatingtheultimatefansite:myPod
Section5.8.CheckoutmyPod's"index.html"file
Section5.9.Whoa!Theimageiswaytoolarge
Section5.10.Resizetheimagetofitinthebrowser
Section5.11.Opentheimage
Section5.12.Resizingtheimage
Section5.13.Resizingtheimage,continued...
Section5.14.You'veresizednowsave
Section5.15.Savetheimage
Section5.16.FixingupthemyPodHTML
Section5.17.Andnowforthetestdrive...
Section5.18.MorephotosformyPod
Section5.19.TakingmyPodforanothertestdrive
Section5.20.Reworkingthesitetousethumbnails
Section5.21.Createthethumbnails
Section5.22.ReworktheHTMLtousethethumbnails
Section5.23.TakemyPodforanothertestdrive
Section5.24.Turningthethumbnailsintolinks
Section5.25.Createindividualpagesforthephotos
Section5.26.So,howdoImakelinksoutofimages?
Section5.27.Addtheimagelinksto"index.html"
Section5.28.OpenthemyPodlogo
Section5.29.Whatformatshouldweuse?
Section5.30.Tobetransparent,ornottobetransparent?Thatisthequestion...
Section5.31.SavethetransparentGIF
Section5.32.Wait,whatisthecoloroftheWebpagebackground?
Section5.33.Setthemattecolor
Section5.34.Setthemattecolor,continued
Section5.35.Checkoutthelogowithamatte
Section5.36.Savethelogo
Section5.37.AddthelogotothemyPodWebpage
Section5.38.Andnowforthefinaltestdrive
Section5.39.HTMLcross
Chapter6.SeriousHTML
Section6.1.ABriefHistoryofHTML
Section6.2.Wecan'thaveyourpagesputtingthebrowserintoQuirksMode!
Section6.3.Addingthedocumenttypedefinition
Section6.4.TheDOCTYPEtestdrive
Section6.5.MeettheW3Cvalidator
Section6.6.ValidatingtheHeadFirstLounge
Section6.7.Houston,wehaveaproblem...
Section6.8.Fixingthaterror
Section6.9.We'renotthereyet...
Section6.10.Addinga<meta>tagtospecifythecontenttype
Section6.11.Makingthevalidator(andmorethanafewbrowsers)happywitha
<meta>contenttag...
Section6.12.Thirdtime'sthecharm?
Section6.13.ChangingtheDOCTYPEtostrict
Section6.14.Dowehavevalidation?
Section6.15.Fixingthenestingproblem
Section6.16.Onemorechancetobestrict...
Section6.17.StrictHTML4.01,grabthehandbook
Section6.18.HTMLcross
Section6.19.Solution
Chapter7.Puttingan'X'intoHTML
Section7.1.WhatisXML?
Section7.2.WhatdoesthishavetodowithHTML?
Section7.3.SowhywouldyouwanttouseXHTML?
Section7.4.You'remuchclosertousingXHTMLthanyoumightthink
Section7.5.GoingfromstrictHTMLtoXHTML1.0inthreesteps
Section7.6.therearenoDumbQuestions
Section7.7.Validation:it'snotjustforHTML
Section7.8.Congratulations,you'vejustwrittenyourfirstXHTML!
Section7.9.FiresideChats
Section7.10.HTMLorXHTML?Thechoiceisyours...
Section7.11.MicroXHTMLcross
Section7.12.MicroXHTMLcrossSolution
Chapter8.AddingaLittleStyle
Section8.1.You'renotinKansasanymore
Section8.2.OverheardonWebville's"TradingSpaces"
Section8.3.UsingCSSwithXHTML
Section8.4.GettingCSSintoyourXHTML
Section8.5.Addingstyletothelounge
Section8.6.Cruisingwithstyle:thetestdrive
Section8.7.Styletheheading
Section8.8.Let'sputalineunderthewelcomemessagetoo
Section8.9.Wehavethetechnology:specifyingasecondrule,justforthe
Section8.10.So,howdoselectionsreallywork?
Section8.11.Seeingselectorsvisually
Section8.12.GettingtheLoungestyleintotheelixirsanddirectionspages
Section8.13.Creatingthe"lounge.css"file
Section8.14.Linkingfrom"lounge.html"totheexternalstyle
Section8.15.Linkingfrom"elixir.html"and"directions.html"totheexternalstyle
sheet
Section8.16.Testdrivingtheentirelounge...
Section8.17.It'stimetotalkaboutyourinheritance...
Section8.18.Whatifwemovethefontupthefamilytree?
Section8.19.TestdriveyournewCSS
Section8.20.Overridinginheritance
Section8.21.Testdrive
Section8.22.Addingaclassto"elixir.html"
Section8.23.Creatingaselectorfortheclass
Section8.24.Agreenteatestdrive
Section8.25.Takingclassesfurther...
Section8.26.Theworld'ssmallest&fastestguidetohowstylesareapplied
Section8.27.Whogetstheinheritance?
Section8.28.MakingsuretheLoungeCSSvalidates
Chapter9.ExpandingyourVocabulary
Section9.1.Textandfontsfrom30,000feet
Section9.2.Whatisafontfamilyanyway?
Section9.3.SpecifyingfontfamiliesusingCSS
Section9.4.Howfont-familyspecificationswork
Section9.5.DustingoffTony'sJournal
Section9.6.GettingTonyanewfont-family
Section9.7.TestdrivingTony'snewfonts
Section9.8.therearenoDumbQuestions
Section9.9.HowdoIdealwitheveryonehavingdifferentfonts?
Section9.10.Adjustingfontsizes
Section9.11.So,howshouldIspecifymyfontsizes?
Section9.12.Let'smakethesechangestothefontsizesinTony'sWebpage
Section9.13.Testdrivingthefontsizes
Section9.14.therearenoDumbQuestions
Section9.15.Changingafont'sweight
Section9.16.Sharpenyourpencil
Section9.17.Testdrivethenormalweightheadings
Section9.18.Addingstyletoyourfonts
Section9.19.StylingTony'squoteswithalittleitalic
Section9.20.HowdoWebcolorswork?
Section9.21.HowdoIspecifyWebcolors?Letmecounttheways...
Section9.22.Thetwominuteguidetohexcodes
Section9.23.HowtofindWebcolors
Section9.24.Usinganonlinecolorchart
Section9.25.therearenoDumbQuestions
Section9.26.BacktoTony'spage...We'regoingtomaketheheadingsorange,
andaddanunderlinetoo
Section9.27.TestdriveTony'sorangeheadings
Section9.28.Everythingyoueverwantedtoknowabouttext-decorationsinless
thanonepage
Section9.29.therearenoDumbQuestions
Section9.30.Removingtheunderline...
Section9.31.XHTMLcross
Section9.32.MarkupMagnetsSolutions
Chapter10.GettingIntimatewithElements
Section10.1.GettingIntimatewithElements
Section10.2.Theloungegetsanupgrade
Section10.3.Thenewandimproved,ultra-stylishlounge
Section10.4.Settingupthenewlounge
Section10.5.Startingwithafewsimpleupgrades
Section10.6.Averyquicktestdrive
Section10.7.Onemoreadjustment
Section10.8.Checkingoutthenewlineheight
Section10.9.Gettingreadyforsomemajorrenovations
Section10.10.Acloserlookattheboxmodel
Section10.11.Whatyoucandotoboxes
Section10.12.Meanwhilebackatthelounge...
Section10.13.Creatingtheguaranteestyle
Section10.14.Atestdriveoftheparagraphborder
Section10.15.Padding,border,andmarginsfortheguarantee
Section10.16.Addingsomepadding
Section10.17.Atestdrivewithsomepadding
Section10.18.Nowlet'saddsomemargin
Section10.19.Atestdrivewiththemargin
Section10.20.Addingabackgroundimage
Section10.21.Testdrivingthebackgroundimage
Section10.22.Fixingthebackgroundimage
Section10.23.Anothertestdriveofthebackgroundimage
Section10.24.Howdoyouaddpaddingonlyontheleft?
Section10.25.Arewethereyet?
Section10.26.Howdoyouincreasethemarginjustontheright?
Section10.27.Atwo-minuteguidetoborders
Section10.28.Borderfitandfinish
Section10.29.Congratulations!
Section10.30.TheClassExposed
Section10.31.Theidattribute
Section10.32.ButhowdoIuseidinCSS?
Section10.33.Usinganidinthelounge
Section10.34.Remixingstylesheets
Section10.35.Usingmultiplestylesheets
Section10.36.Stylesheets-they'renotjustfordesktopbrowsersanymore...
Section10.37.therearenoDumbQuestions
Section10.38.XHTMLcross
Section10.39.XHTMLcrossSolution
Chapter11.AdvancedWebConstruction
Section11.1.AcloselookattheelixirsXHTML
Section11.2.Let'sexplorehowwecandivideapageintologicalsections
Section11.3.TherearenoDumbQuestions
Section11.4.Meanwhile,backatthelounge...
Section11.5.Takingthe<div>foratestdrive
Section11.6.Addingaborder
Section11.7.Anover-the-bordertestdrive
Section11.8.Addingsomerealstyletotheelixirssection
Section11.9.Thegameplan
Section11.10.Workingontheelixirwidth
Section11.11.Testdrivingthewidth
Section11.12.TherearenoDumbQuestions
Section11.13.Addingthebasicstylestotheelixirs
Section11.14.Testdrivingthenewstyles
Section11.15.We'realmostthere...
Section11.16.Whatarewetryingtodo?
Section11.17.Whatweneedisawaytoselectdescendants
Section11.18.TherearenoDumbQuestions
Section11.19.Changingthecoloroftheelixirheadings
Section11.20.Aquicktestdrive...
Section11.21.Fixingthelineheight
Section11.22.Lookwhatyou'veaccomplished...
Section11.23.It'stimetotakealittleshortcut
Section11.24.Butthere'smore...
Section11.25.Andevenmoreshorthands
Section11.26.therearenoDumbQuestions
Section11.27.Adding<span>sinthreeeasysteps
Section11.28.Stepsoneandtwo:addingthe<span>s
Section11.29.Stepthree:stylingthe<span>s
Section11.30.Testdrivingthespans
Section11.31.therearenoDumbQuestions
Section11.32.The<a>elementanditsmultiplepersonalities
Section11.33.Howcanyoustyleelementsbasedontheirstate?
Section11.34.therearenoDumbQuestions
Section11.35.Puttingthosepseudo-classestowork
Section11.36.Testdrivethelinks
Section11.37.Isn'titabouttimewetalkaboutthe"cascade"?
Section11.38.Thecascade
Section11.39.Welcometothe"What'smyspecificitygame"
Section11.40.therearenoDumbQuestions
Section11.41.Puttingitalltogether
Section11.42.therearenoDumbQuestions
Chapter12.ArrangingElements
Section12.1.DidyoudotheSuperBrainPower?
Section12.2.Usetheflow,Luke
Section12.3.BEtheBrowser
Section12.4.Whataboutinlineelements?
Section12.5.Howitallworkstogether
Section12.6.Onemorethingyoushouldknowaboutflowandboxes
Section12.7.Howtofloatanelement
Section12.8.Behindthescenesatthelounge
Section12.9.ThenewStarbuzz
Section12.10.Alookatthemarkup
Section12.11.Andalookatthestyle
Section12.12.Let'stakeStarbuzztothenextlevel
Section12.13.Movethesidebarjustbelowtheheader
Section12.14.Setthewidthofthesidebarandfloatit
Section12.15.TestdrivingStarbuzz
Section12.16.Fixingthetwo-columnproblem
Section12.17.Settingthemarginonthemainsection
Section12.18.Testdrive
Section12.19.Uhoh,wehaveanotherproblem
Section12.20.Backtoclearinguptheoverlapproblem
Section12.21.Testdrive
Section12.22.Rightytighty,leftyloosey
Section12.23.Aquicktestdrive
Section12.24.LiquidandFrozenDesigns
Section12.25.Afrozentestdrive
Section12.26.What'sthestatebetweenliquidandfrozen?Jello,ofcourse!
Section12.27.Testdrivingwithatankofjello
Section12.28.Howabsolutepositioningworks
Section12.29.WhattheCSSdoes
Section12.30.Anotherexampleofabsolutepositioning
Section12.31.Usingabsolutepositioning
Section12.32.ChangingtheStarbuzzCSS
Section12.33.Nowwejustneedtoreworkthemain<div>
Section12.34.Timefortheabsolutetestdrive
Section12.35.Whatcanwedo?Or,can'tyoujusttellmehowtodoatwo-column
layoutthatdoesn'tbreak?
Section12.36.Onetradeoffyoucanmaketofixthefooter
Section12.37.Positioningtheaward
Section12.38.Asmallglitch
Section12.39.FiresideChats
Section12.40.Onemorethingyoushouldknowaboutabsolutepositioning
Section12.41.Howdoesfixedpositioningwork?
Section12.42.Puttingthecoupononthepage
Section12.43.Puttingthecoupononthepage
Section12.44.Usinganegativeleftpropertyvalue
Section12.45.Aratherpositive,negativetestdrive
Section12.46.Gettingrelative
Section12.47.Thetestdrive
Section12.48.Tothree-columnsandbeyond...
Section12.49.XHTMLcross
Chapter13.GettingTabular
Section13.1.HowdoyoumaketableswithXHTML?
Section13.2.HowtocreateatableusingXHTML
Section13.3.Whatthebrowsercreates
Section13.4.Tablesdissected
Section13.5.therearenoDumbQuestions
Section13.6.BEtheBrowser
Section13.7.Addingacaptionandasummary
Section13.8.Testdrive...andstartthinkingaboutstyle
Section13.9.Beforewestartstyling,let'sgetthetableintoTony'spage
Section13.10.Nowlet'sstylethetable
Section13.11.Takingthestyledtablesforatestdrive
Section13.12.therearenoDumbQuestions
Section13.13.Gettingthoseborderstocollaspe
Section13.14.Howaboutsomecolor?
Section13.15.Howaboutsomecolorinthetablerows?
Section13.16.DidwementionthatTonymadeaninterestingdiscoveryinTruth
orConsequences,NewMexico?
Section13.17.AnotherlookatTony'stable
Section13.18.Howtotellcellstospanmorethanonerow
Section13.19.Thenewandimprovedtable
Section13.20.therearenoDumbQuestions
Section13.21.Troubleinparadise?
Section13.22.Testdrivingthenestedtable
Section13.23.OverridingtheCSSforthenestedtableheadings
Section13.24.therearenoDumbQuestions
Section13.25.GivingTony'ssitethefinalpolish
Section13.26.Givingthelistsomestyle
Section13.27.Whatifyouwantacustommarker?
Section13.28.And,thefinaltestdrive...
Section13.29.therearenoDumbQuestions
Section13.30.XHTMLcross
Section13.31.ExerciseSolutions
Section13.32.BEtheBrowser
Chapter14.GettingInteractive
Section14.1.Howformswork
Section14.2.Howformsworkinthebrowser
Section14.3.WhatyouwriteinXHTML
Section14.4.Whatthebrowsercreates
Section14.5.Howtheformelementworks
Section14.6.Whatcangoinaform?
Section14.7.Whatcangoinaform?(PartII)
Section14.8.MarkupMagnets
Section14.9.GettingreadytobuildtheBeanMachineform
Section14.10.Figuringoutwhatgoesintheformelement
Section14.11.Addingtheformelement
Section14.12.Howformelementnameswork
Section14.13.therearenoDumbQuestions
Section14.14.Backtogettingthose<input>elementsintoyourXHTML
Section14.15.Aform-altestdrive
Section14.16.Addingsomemoreinputelementstoyourform
Section14.17.Addingthe<select>element
Section14.18.Testdrivingthe<select>element
Section14.19.Punchingtheradiobuttons
Section14.20.Completingtheform
Section14.21.Addingthecheckboxesandtextarea
Section14.22.Thefinaltestdrive
Section14.23.WatchingGETinaction
Section14.24.Therearenodumbquestions
Section14.25.ToTableorNottoTable?That'sthequestion...
Section14.26.Gettingtheformelementsintoatable:ReadyBakeXHTML
Section14.27.Testdrivingaverytabularform
Section14.28.StylingtheformandthetablewithCSS:ReadyBakeCSS
Section14.29.Thefinaltestdrive
Section14.30.Whatmorecouldpossiblygointoaform?
Section14.31.MarkupMagnetsSolution
Section14.32.Sharpenyourpencil:GETorPOST
Section14.33.Congratulations!
AppendixA.TheTopTenTopics(wedidn'tcover)
SectionA.1.#1MoreSelectors
SectionA.2.#2Frames
SectionA.3.#3Multimedia&Flash
SectionA.4.#4ToolsforCreatingWebPages
SectionA.5.#5Client-sideScripting
SectionA.6.#6Server-sideScripting
SectionA.7.#7TuningforSearchEngines
SectionA.8.#8MoreaboutStyleSheetsforPrinting
SectionA.9.#9PagesforMobileDevices
SectionA.10.#10Blogs
Index
HeadFirstHTMLwithCSSandXHTML
byElisabethFreemanandEricFreeman
Copyright©2006O'ReillyMedia,Inc.Allrightsreserved.
PrintedintheUnitedStatesofAmerica.
PublishedbyO'ReillyMedia,Inc.,1005GravensteinHighway
North,Sebastopol,CA95472.
O'ReillyMediabooksmaybepurchasedforeducational,
business,orsalespromotionaluse.Onlineeditionsarealso
availableformosttitles(safari.oreilly.com).Formore
information,contactourcorporate/institutionalsales
department:(800)998-9938or
AssociatePublisher:
MikeHendrickson
SeriesCreators:
KathySierra,BertBates
SeriesAdvisors:
ElisabethFreeman,EricFreeman
Editor:
BrettMcLaughlin
CoverDesigners:
EllieVolckhausen,KarenMontgomery
HTMLWranglers:
ElisabethFreeman,EricFreeman
Structure:
ElisabethFreeman
Style:
EricFreeman
PageViewer:
Oliver
PrintingHistory:
November2005:FirstEdition.
NutshellHandbook,theNutshellHandbooklogo,andthe
O'ReillylogoareregisteredtrademarksofO'ReillyMedia,Inc.
TheHeadFirstseriesdesignations,HeadFirstHTMLwithCSS
andXHTML,andrelatedtradedressaretrademarksofO'Reilly
Media,Inc.
Manyofthedesignationsusedbymanufacturersandsellersto
distinguishtheirproductsareclaimedastrademarks.Where
thosedesignationsappearinthisbook,andO'ReillyMedia,Inc.,
wasawareofatrademarkclaim,thedesignationshavebeen
printedincapsorinitialcaps.
Whileeveryprecautionhasbeentakeninthepreparationofthis
book,thepublisherandtheauthorsassumenoresponsibility
forerrorsoromissions,orfordamagesresultingfromtheuse
oftheinformationcontainedherein.
Inotherwords,ifyouuseanythinginHeadFirstHTMLwithCSS
&XHTMLto,say,runanuclearpowerplant,you'reonyour
own.Wedo,however,encourageyoutovisittheHeadFirst
Lounge.
Noelementsorpropertieswereharmedinthemakingofthis
book.
ThankstoClemensOrthfortheuseofhisphoto,
"applestore.jpg",whichappearsinChapter5.
ISBN:0-596-10197-X
[C]
Dedication
TotheW3C,forsavingusfromthebrowserwars
andfortheirbrillianceinseparatingstructure
(HTML)frompresentation(CSS)...
Browserwars?You'llfindoutinChapter6.
AndformakingHTML,CSS,andXHTMLcomplex
enoughthatpeopleneedabooktolearnit.
PraiseforHeadFirstHTMLwithCSS&
XHTML
"HeadFirstHTMLwithCSS&XHTMLisathoroughly
modernintroductiontoforward-lookingpracticesinWeb
pagemarkupandpresentation.Itcorrectlyanticipates
readers'puzzlementsandhandlesthemjustintime.The
highlygraphicandincrementalapproachpreciselymimics
thebestwaytolearnthisstuff:makeasmallchangeand
seeitinthebrowsertounderstandwhateachnewitem
means."
DannyGoodman
"EricandElisabethFreemanclearlyknowtheirstuff.As
theInternetbecomesmorecomplex,inspiredconstruction
ofwebpagesbecomesincreasinglycritical.Elegantdesign
isatthecoreofeverychapterhere,eachconcept
conveyedwithequaldosesofpragmatismandwit."
KenGoldstein,ExecutiveVicePresident&Managing
Director,DisneyOnline
"TheWebwouldbeamuchbetterplaceifeveryHTML
authorstartedoffbyreadingthisbook."
L.DavidBaron,TechnicalLead,Layout&CSS,
MozillaCorporation />"I'vebeenwritingHTMLandCSSfortenyearsnow,and
whatusedtobealongtrialanderrorlearningprocesshas
nowbeenreducedneatlyintoanengagingpaperback.
HTMLusedtobesomethingyoucouldjusthackawayat
untilthingslookedokayonscreen,butwiththeadventof
webstandardsandthemovementtowardsaccessibility,
sloppycodingpracticeisnotacceptableanymore...froma
businessstandpointorasocialresponsibilitystandpoint.
HeadFirstHTMLwithCSS&XHTMLteachesyouhowto
dothingsrightfromthebeginningwithoutmakingthe
wholeprocessseemoverwhelming.HTML,whenproperly
explained,isnomorecomplicatedthanplainEnglish,and
theFreemansdoanexcellentjobofkeepingevery
conceptateye-level."
MikeDavidson,President&CEO,Newsvine,Inc.
"Theinformationcoveredinthisbookisthesamematerial
theprosknow,buttaughtinaneducationalandhumorous
mannerthatdoesn'tevermakeyouthinkthematerialis
impossibletolearnoryouareoutofyourelement."
ChristopherSchmitt,AuthorofTheCSSCookbook
andProfessionalCSS,
Oh,great.YoumadeanXHTMLbooksimpleenougha
CEOcanunderstandit.Whatwillyoudonext?Accounting
simpleenoughmydevelopercanunderstandit?Next
thingyouknowwe'llbecollaboratingasateamor
something.
JaniceFraser,CEO,AdaptivePath
MorePraiseforHeadFirstHTMLwithCSS&
XHTML
"I*heart*HeadFirstHTMLwithCSS&XHTMLitteaches
youeverythingyouneedtolearnina'funcoated'
format!"
SallyApplin,UIDesignerandFineArtist,
.
"Thisbookhashumor,andcharm,butmostimportantly,it
hasheart.Iknowthatsoundsridiculoustosayabouta
technicalbook,butIreallysensethatatitscore,this
book(oratleastitsauthors)reallycarethatthereader
learnthematerial.Thiscomesacrossinthestyle,the
language,andthetechniques.Learningreal
understandingandcomprehensiononthepartofthe
readerisclearlytopmostinthemindsoftheFreemans.
Andthankyou,thankyou,thankyou,forthebook's
strong,andsensibleadvocacyofstandardscompliance.
It'sgreattoseeanentrylevelbook,thatIthinkwillbe
widelyreadandstudied,campaignsoeloquentlyand
persuasivelyonbehalfofthevalueofstandards
complianceinwebpagecode.Ievenfoundinhereafew
greatargumentsIhadnotthoughtofonesIcan
rememberandusewhenIamaskedasIstillam'what's
thedealwithcomplianceandwhyshouldwecare?'I'll
havemoreammonow!Ialsolikedthatthebooksprinkles
insomebasicsaboutthemechanicsofactuallygettinga
webpageliveFTP,webserverbasics,filestructures,etc."
RobertNeer,DirectorofProductDevelopment,
Movies.com
"Freeman'sHeadFirstHTMLwithCSS&XHTMLisamost
entertainingbookforlearninghowtobuildagreatweb
page.Itnotonlycoverseverythingyouneedtoknow
aboutHTML,CSS,andXHTML,italsoexcelsinexplaining
everythinginlayman'stermswithalotofgreatexamples.
Ifoundthebooktrulyenjoyabletoread,andIlearned
somethingnew!"
NewtonLee,Editor-in-Chief,ACMComputersin
Entertainment
"Mywifestolethebook.She'sneverdoneanyweb
design,sosheneededabooklikeHeadFirstHTMLwith
CSS&XHTMLtotakeherfrombeginningtoend.Shenow
hasalistofwebsitesshewantstobuildforourson's
class,ourfamily,...IfI'mlucky,I'llgetthebookback
whenshe'sdone."
DavidKaminsky,MasterInventor,IBM
"Beware.Ifyou'resomeonewhoreadsatnightbefore
fallingasleep,you'llhavetorestrictHeadFirstHTMLwith
CSS&XHTMLtodaytimereading.Thisbookwakesup
yourbrain."
PaulineMcNamara,CenterforNewTechnologies
andEducation,FribourgUniversity,Switzerland
PreviousPraiseforbooksbytheauthors
FromtheawesomeHeadFirstJavafolks,thisbookuses
everyconceivabletricktohelpyouunderstandand
remember.Notjustloadsofpictures:picturesofhumans,
whichtendtointerestotherhumans.Surprises
everywhere.Stories,becausehumanslovenarrative.
(Storiesaboutthingslikepizzaandchocolate.Needwe
saymore?)Plus,it'sdarnedfunny.
BillCamarda,READONLY
"Thisbook'sadmirableclarity,humorandsubstantial
dosesofclevermakeitthesortofbookthathelpseven
non-programmersthinkwellaboutproblem-solving."
CoryDoctorow,co-editorofBoingBoingandauthor
of"DownandOutintheMagicKingdom"and
"SomeoneComestoTown,SomeoneLeavesTown"
"Ifeellikeathousandpoundsofbookshavejustbeen
liftedoffofmyhead."
WardCunningham,inventoroftheWikiandfounder
oftheHillsideGroup
"Thisbookisclosetoperfect,becauseofthewayit
combinesexpertiseandreadability.Itspeakswith
authorityanditreadsbeautifully.It'soneoftheveryfew
softwarebooksI'veeverreadthatstrikesmeas
indispensable.(I'dputmaybe10booksinthiscategory,
attheoutside.)"
DavidGelernter,ProfessorofComputerScience,
YaleUniversityandauthorof"MirrorWorlds"and
"MachineBeauty"
"ANoseDiveintotherealmofpatterns,alandwhere
complexthingsbecomesimple,butwheresimplethings
canalsobecomecomplex.Icanthinkofnobettertour
guidesthantheFreemans."
MikoMatsumura,IndustryAnalyst,TheMiddleware
CompanyFormerChiefJavaEvangelist,Sun
Microsystems
"Ilaughed,Icried,itmovedme."
DanielSteinberg,Editor-in-Chief,java.net
"Justtherighttoneforthegeeked-out,casual-coolguru
coderinallofus.Therightreferenceforpractical
developmentstrategiesgetsmybraingoingwithouthaving
toslogthroughabunchoftired,staleprofessor-speak."
TravisKalanick,FounderofScourandRedSwoosh
MemberoftheMITTR100
"Iliterallylovethisbook.Infact,Ikissedthisbookin
frontofmywife."
SatishKumar
