深入浅出HTML与CSS、XHTML

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