Tải bản đầy đủ

OReilly head first HTML with CSS and XHTML dec 2005 ISBN 059610197x

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.Meettheelement
Section3.8....andcheckoutthetestdrive...
Section3.9.Five-MinuteMystery:TheCaseoftheElementsSeparatedatBirth
Section3.10.LooooongQuotes
Section3.11.Addinga

Section3.12.Five-MinuteMysterySolved
Section3.13.Therealtruthbehindtheand
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.Usingtheelementtocreateadestination
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.: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.Addingatagtospecifythecontenttype
Section6.11.Makingthevalidator(andmorethanafewbrowsers)happywitha
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
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.Addingsinthreeeasysteps
Section11.28.Stepsoneandtwo:addingthes
Section11.29.Stepthree:stylingthes
Section11.30.Testdrivingthespans
Section11.31.therearenoDumbQuestions
Section11.32.The
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

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.BacktogettingthoseelementsintoyourXHTML
Section14.15.Aform-altestdrive
Section14.16.Addingsomemoreinputelementstoyourform
Section14.17.Addingtheelement
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-9938orcorporate@oreilly.com.
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,
MozillaCorporationhttp://dbaron.org/
"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,schmitt@christopher.org
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,


http://sally.com.
"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
Entertainmenthttp://www.acmcie.org


"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




×