Intro.
Whoisthisbookfor?
Weknowwhatyourbrainisthinking
Metacognition
Bendyourbrainintosubmission
Technicalreviewers
Acknowledgments
1TheLanguageoftheWeb
TheWebkilledthevideostar
WhatdoestheWebserverdo?
Whatyouwrite(theHTML)...
Whatthebrowsercreates...
YourbigbreakatStarbuzzCoffee
CreatingtheStarbuzzWebpage
CreatinganHTMLfile(Mac)
CreatinganHTMLfile(Windows)
Meanwhile,backatStarbuzzCoffee...
OpeningyourWebpageinabrowser
Takingyourpageforatestdrive...
Tatgsdissected...
Meetthestyleelement
GivingStarbuzzsomestyle...
Whodoeswhat?
FiresideChat
BulletPoints
ExerciseSolutions
2Meetingthe'HT'inHTML
HeadFirstLounge,Newandhnproved
Creatingthenewlounge
Whatdidwedo?
Whatdoesthebrowserdo?
Understandingattributes
Technicaldifficulties
Planningyourpaths...
Fixingthosebrokenimages...
ExerciseSolutions
3WebPageConstruction
FromJournaltoWebsite,at12mph
Theroughdesignsketch
Fromasketchtoanoutline
FromtheoutlinetoaWebpage
TestdrivingTony'sWebpage
Meettheelement
LooooongQuotes
Addinga
Therealtruthbehindtheandmystery
Usetheelementtomakealist...
ConstructingHTMLlistsintwoeasysteps
Puttingoneelementinsideanotheriscalled"nesting"
Tounderstandthenestingrelationships,drawapicture
Usingnestingtomakesureyourtagsmatch
Inlineorblock?
ExerciseSolutions
4ATriptoWebville
GettingStarbuzz(oryourself)ontotheWeb
Findingahostingcompany
Howcanyougetadomainname?
Movingin
Gettingyourfilestotherootfolder
AsmuchFTPasyoucanpossiblyfitintwopages
Backtobusiness...
Mainstreet,URL
WhatistheHTTPProtocol?
What'sanabsolute.path?
Howdefaultpageswork
HowdowelinktootherWebsites?
LinkingtoCaffeineBuzz
Webpagefitandfinish
Linkingintoapage
Usingtheelementtocreateadestination
Howtolinktodestinationanchors
Linkingtoanewwindow
Openinganewwindowusingtarget
ExerciseSolutions
5MeetingtheMedia
Howthebrowserworks,withimages
Howimageswork
Andnowfortheformalintroduction:meettheelement
Alwaysprovideanalternative
Creatingtheultimatefansite:myPod
Whoa!Theimageiswaytoolarge
FixingupthemyPodHTML
Reworkingthesitetousethumbnails
Turningthethumbnailsintolinks
So,howdoImakelinksoutofimages?
Whatformatshouldweuse?
Tobetransparent,ornottobetransparent?Thatisthequestion...
Wait,whatisthecoloroftheWebpagebackground?
Checkout-thelogowithamatte
AddthelogotothemyPodWebpage
ExerciseSolutions
6SeriousHTML
CubicleConversation
AbriefhistoryofHTML
Wecan'thaveyourpagesputtingthebrowserintoquirksmode
Addingthedocumenttypedefinition
MeettheW3Cvalidator
ValidatingtheHeadFirstLounge
Houston,wehaveaproblem...
Addingatagtospecifythecontenttype
Makingthevalidatorhappywithacontenttag..:
Thirdtime'sthecharm?
Changingthedoctypetostrict
Dowehavevalidation?
Fixingthenestingproblem
Onemorechancetobestrict...
StrictHTML4.01,grabthehandbook
FiresideChat
HTMLArcheology
ExerciseSolutions
7Puttingthe'X'intoHTML
WhatisXML?
WhatdoesthishavetodowithHTML?
SowhywouldyouwanttouseXHTML?
TheXHTML1.0checklist
GoingfromstrictHTMLtoXHTML1.0
OldschoolHTML4.01Strict
NewandimprovedXHTML1.0
Validation:it'snotjustforHTML
FiresideChat
HTMLorXHTML?Thechoiceisyours...
ExerciseSolutions..
8AddingaLittleStyle
You'renotinKansasanymore...
OverheardonWebville's"TradingSpaces"
UsingCSSwithXHTML
Let'sputalineunderthewelcomemessage,too
Specifyingasecondrule,justforthe
GettingtheLoungestyleintotheelixirsanddirectionspages
Linkingtotheexternalstylesheet
It'stimetotalkaboutyourinheritance...
Whatifwemovethefontupthefamilytree?
Overridinginheritance
Creatingaselectorfortheclass
Takingclassesfurther...
Theworld'ssmallestandfastestguidetohowstylesareapplied
Whogetstheinheritance?
MakingsuretheLoungeCSSvalidates
ExerciseSolutions
9ExpandingyourVocabulary
Textandfontsfrom30,000feet
Whatisafontfamilyanyway?
SpecifyingfontfamiliesusingCSS
DustingoffTony'sJournal
HowdoIdealwitheveryonehavingdifferentfonts?
So,howshouldIspecifymyfontsizes?
Let'smakethesechangestothefontsizesinTony'sWebpage
Changingafont'sweight
Addingstyletoyourfonts
StylingTony'squoteswithalittleitalic
HowdoWebcolorswork?
HowdoIspecifyWebcolors?Letmecounttheways...
Thetwominuteguidetohexcodes
HowtofindWebcolors
BacktoTony'spage...
Everythingyoueverwantedtoknowabouttext-decorations
Removingtheunderline...
ExerciseSolutions
10GettingIntimatewithElements
Theloungegetsanupgrade
Startingwithafewsimpleupgrades
Checkingoutthenewlineheight
Gettingreadyforsomemajorrennovations
Acloserlookattheboxmodel...
Whatyoucandotoboxes...
Creatingtheguaranteestyle
Padding,border,andmarginsfortheguarantee
Addingsomepadding
Nowlet'saddsomemargin
Addingabackgroundimage
Fixingthebackgroundimage
Howdoyouaddpaddingonlyontheleft?
Howdoyouincreasethemarginjustontheright?
Atwo-minuteguidetoborders
Borderfitandfinish
InterviewwithanHTMLclass.
Theidattribute,1002uses
Usinganidinthelounge
Remixingstylesheets
Usingmultiplestylesheets
ExerdseSolutions
11AdvancedWebConstruction
AcloselookattheelixirsHTML
Let'sexplorehowwecandivideapageintologicalsections
Addingaborder
Anover-the-bordertestdrive
Addingsomerealstyletotheelixirssection
Thegameplan
Workingontheelixirwidth
Addingthebasicstylestotheelixirs
Whatweneedisawaytoselectdescendants
Changingthecoloroftheelixirheadings
Fixingthelineheight
It'stimetotakealittleshortcut...
Addingsinthreeeasysteps
Theelementanditsmultiplepersonalities
Howcanyoustyleelementsbasedontheirstate?
Puttingthosepseudo-classestowork
Isn'titabouttimewetalkaboutthe"cascade"?
Thecascade
Welcometothe"What'smyspecificitygame"
Puttingitalltogether
ExerciseSolutions
12ArrangingElements
DidyoudotheSuperBrainPower?
Usetheflow,Luke
Whataboutinlineelements?
Howitallworkstogether
Howtofloatanelement
Behindthescenesatthelounge
ThenewStarbuzz
Movethesidebarjustbelowtheheader
Setthewidthofthesidebarandfloatit
Fixingthetwo-columnproblem
Settingthemarginonthemainsection
Backtoclearinguptheoverlapproblem
Rightytighty,leftyloosey
Liquidandfrozendesigns
Howabsolutepositioningworks
ChangingtheStarbuzzCSS
Onetradeoffyoucanmaketofixthefooter
Positioningtheaward
Howdoesfixedpositioningwork?
Usinganegativeleftpropertyvalue
Gettingrelative
Tothree-columnsandbeyond...
ExerciseSolutions
13GettingTabular
HowdowemaketableswithHTML?
HowtocreateatableusingHTML
Whatthebrowsercreates
Tablesdissected...
Addingacaptionandasummary
Beforewestartstyling,let'sgetthetablebackintoTony'spage...
Gettingthoseborderstocollapse
Howaboutsomecolor?
Tonymadeaninterestingdiscovery...
AnotherlookatTony'stable
Howtotellcellstospanmorethanonerow
Thenewandimprovedtable
Troubleinparadise?
OverridingtheCSSforthenestedtableheadings
GivingTony'ssitethefinalpolish
ExerciseSolutions
14GettingInteractive
Howformswork
Howformsworkinthebrowser
WhatyouwritetheXHTML
Whatthebrowsercreates
Howtheelementworks
GettingreadytobuildtheBeanMachineform
Addingtheelement
Howelementnameswork
BacktogettingthoseelementsinyourHTML...
Addingsomemoreinputelementstoyourform
Addingthe
Givethecustomerachoiceofwholeorgroundbeans
Punchingtheradiobuttons
Completingtheform
Addingthecheckboxesandtextarea
WatchingGETinaction
ToTableorNottoTable?That'sthequestion...
Gettingtheformelementsintoatable
StylingtheformandthetablewithCSS
ExerciseSolutions
15TheTopTenTopics(wedidn'tcover)
MoreSelectors
Frames
Multimedia&Flash
ToolsforCreatingWebPages
Client-sideScripting
Server-sideScripting
TuningforSearchEngines
MoreaboutStyleSheetsforPrinting
PagesforMobileDevices
Blogs
Index...
ColorInset
鄂公網(wǎng)安備 42010302001612號(hào) 