51
Stephanie Sullivan HTML & CSS Bootcamp
StephanieSullivan
HTML&CSSBootcamp
Agenda
• WhatisHTML?• WhatareCascadingStyleSheets(CSS)?• Content–theBasics• SemanticHTML• CSSOverview• ProperPageStructure• StylingwithCSS• Q&A(alongtheway)
StephanieSullivan• Founder/Principal‐W3Conversions‐WebStandardsand
Accessibility• SpeakerandCorporateTrainer• Consultant&sub‐contractorforXHTML/CSSdevelopment• AdobeCommunityExpert• DreamweaverTaskForceforWebStandardsProject(WaSP)• Partner‐CommunityMX.com• Author‐DWMX2004Magic,WebDeveloper’s&Designer’s
Journal(formerlyMXDJ),Adobe’sDevNetCenter,andotherwebpublications
• InternationalAdvisoryBoardforWebDeveloper’sandDesigner’sJournal
• ListMomforWebWeavers&moderatorforSEM2.0
HTML–TheBasics
WhatisHTML?
• HTML,orHypertextMarkupLanguage,isasubsetofSGML
• “Ifeelsooomuchsmarter…NOT!”
• What’sthatreallymean?– Hypertextreferstolinks–buttodayisusedtomeanallwebcode
– MarkupLanguagereferstothelanguage(code)usedtoprovidestructure
HTMLDocuments
• AllHTMLdocumentsconsistofthreeparts:– Doctype
• AppearspriortoallotherHTMLmarkup• DescribeswhatHTMLversionisusedinthedocument
– Head• Enclosedinthe<head>element• Containspagetitle,metadata,linkstostylesheets,scriptsandnon‐rendereddata
– Body• Theactualscreencontent• Enclosedinthe<body>element
HTMLDoctypes
• ADoctypeconsistsofthreeparts:– Declaration– Version– DocumentTypeDeclaration(DTD)URI
• HTML4.01– Twotypes“transitional”and“strict”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
• XHTML1.0– Alsotwotypes“transitional”and“strict”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HeadElement
• Appearsimmediatelyfollowingtheopening<HTML>tag
• Firsttagpairis<title>– Describesthecontentofthedocument
– Thistagisrequired
– Let’shavesomefun…Google:“untitleddocument”
HeadElement
• Metadataisinformationaboutthedocument,notthecontent– Author
– Characterencoding
– Description
– Keywords
• ThemythaboutSearchEnginesandmetadata
HeadElement
• Linkelementsareusedto“connect”thedocumenttostylesheetsandjavascriptfiles
<link href="acme.css" rel="stylesheet" type="text/css">
• StyleandScriptelementscanalsobeembeddedintothedocument
<style>a {color: #4C2DA1;font-size: 12px;font-family: Arial, Helvetica, sans-serif}
</style>
BodyElement
• Thebodyelementcontainsalloftheactualcontentofthepagewhichisvisuallyrenderedbytheuseragent(browser)
• Theviewableareaofthepageintheuseragentiscalledthe“viewport”
TagStructure
• Twotypesoftagstructure– Containers(mynameforthem)
– Empty
• Containerelementshaveanopeningandclosingtagandcontainothercontent
<p>This is a paragraph</p>
• Emptyelementsconsistofasingletagwithno“apparent”closingtag
<img src=“logo.gif” width=“100” height=“85” />
TagSyntax
• Aproperlyformattedtagcanconsistofseveralparts• Thenameoftheelement
<table>• Attributes
<tablewidth=“300”height=“400”>• Closingtag–identicaltotheopeningtag
</table>
• Generally,mosttagattributes,suchaswidthandheight,willbedefinedwithintheCSSandnotaspartofthetagitself–butmoreaboutthatlater
ElementRendering
• TherearetwotypesofrenderingforHTMLelements– Block– Inline
• Blockelementsstackverticallyonscreen– Examples:<div>,<h1>,<table>,<p>
• Inlineelementslineuphorizontallyandwrapwhennecessary– Examples:<img>,<strong>,<span>,<code>
ProperNesting
• Elementscanbenestedwithinotherelements
– Blockelementscancontainbothblockandinlineelements
– Inlineelementscanonlycontaininlineelements• However,thetagsmustbeclosedinthereverseorderin
whichtheywereopened
<p>This text is really <em>cool</em></p>• Incorrect:<p>This text is really <em>cool</p></em>
AquickdemonstrationofHTMLsemantics
CascadingStyleSheets(inplainEnglish)
WhatisCSS?• CascadingStyleSheets,orCSS,governtheseparationofstyle
(orpresentation)fromactualcontent
• CascadingStyleSheetsisaW3Cstandard
• CSS1wasratifiedforuseinDecemberof1996• CSS1containspropertiesforfonts,margins,colors,etc.,thatnearlyallprofilesofCSSneed
• CSS2wasratifiedforuseinMayof1998• CSS2includesalloflevel1andaddsabsolutelypositionedelements,pagebreaks,automaticnumbering,right‐to‐lefttextandotherthings
CSSRealityCheck• Aswithmanytechnologies,CSShassufferedfromaslowadoptionrateduetoseveralkeyfactors:
– Limited(andvarying)browsersupport– Limitedtoolsfordevelopment
• Today,allofthemajorbrowserssupportCSS– Implementationstillvaries–butthedifferencesarerelativelyslight,andthey’regettingbetter…
– EvenInternetExplorer(now)doesdecentCSS!!!
TheBenefitsofCSS
• CSSprovidesfourkeybenefitstoHTMLdesignersanddevelopers
– Designsbecomeeasiertomanagethroughtheeliminationofinlinetagssuchas<font>‐aswellasthebenefitofsite‐widechangesthroughtheuseofexternalstylesheets
– Pagesrendermorequickly(whenusingCSSPositioning)throughtheeliminationofnested<table>tags
– Pagedesignscanbeestablishedforprinting,digitaldevices,etc.
– Pagesbecomemoreaccessible(Section508)tovisitorsusingassistivetechnologies
CSSPrimer• Therearethreemaintypesofrules(orselectors)
– Type• Definestheappearanceofeveryinstanceofagivenelement
h1 {font-family: Arial, Helvetica, sans-serif;font-size: 1.4em;font-weight: bold;}
– Class• Definestheappearanceoftheelementtowhichitisassigned
.content {font-size: 1em;margin-right: 12px;margin-left: 12px;}
– ID• Definestheappearanceofauniqueelementonthepage
#navigation {background-color: #999999;width: 750px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #000000;}
• Eachruleconsistsofaselectorname,apairofcurlybracketsandatleastoneproperty:valuedeclaration
WritingEfficientCSS
•WhatmakesCSSmoreefficient?• ClassvsID
• Avoid“classitis”usingtypeanddescendantselectors
• Useshorthand
•Whatisadescendantselector?
• #nava:link
• #content.podh1
• ululli
UnderstandingtheBoxModel
margin border
padding
Contentwithin
AquickdemonstrationoftheBoxModel
DocumentFlow
• The“flow”isthenaturalorderofoccurrenceoftheelementswithintheHTML
• WhenworkingwithCSSforpagelayout,thedocumentflowimpactsthevisualpositionofpageelements–dependinguponthemethodofpositioning
• Don’tfighttheflow,useit!
TypesofPositioning
• ThefourtypesofpositioningavailableusingCSS:
Static
• Thedefaultlocationoftheelementinthedocumentflow
Relative
• Theelement’spositionisrelativetoitspositioninthedocumentflow
Absolute
• A“XY”coordinatebaseduponitsparentcontainer
Fixed
• A“XY”coordinatebasedontheviewport
AquickdemonstrationofPositioning–andpotentialchallenges
PrinciplesofFloating• Afloatmustbegivenawidth• Afloatmustbegivenadirectionalvalueofleftorright
(thereisnotoporbottom)• Ifyouwantafloattoappearalongsideanotherelement,it
mustprecedethatelementinthesourceorderofthedocument
• Afloatnevercoverstextorinlineimages• Avoidusingawidthonablockelementfollowingafloat;
useamarginonthesamesideofthefloatinstead• Sinceafloatistaken"outoftheflow"ofthedocument,a
floatinsideanothercontainermustbeclearedinorderfortheparentcontainertoencloseitproperly
BewareofFloatDrop
• EvidentwhenonedivstartsbelowthelevelofthedivnexttoitCauses:
• Anelement,likeanimage,thatiswiderthancanfitinthespaceprovided.Thedivwillmovedownuntilitcanfitnexttothefloats.(MakesureclientswhoaretakingcareoftheirownsiteswithContributeareawareoftheirsizespecsandlimitations.)
• 3pxtextjoginInternetExplorer(unaccountedforinyourmath)
AquickdemonstrationofFloating
TypesofPageDesigns
• Therearetwobasicstylesofpagedesigns– The“ice”design
• Thepagewidthisfixed• Elementsdonotgrowtofittheviewport
– The“water”design• Thepagewidthisdeterminedbytheviewportortextsize• Contentresizesand“adjusts”toitssurroundings
• Ofcourse,wecancombinethetwoforanicehybriddesigninwhichsomeelementsresizewhileothersremainfixed
Aquickdemonstrationofdesigntypes
PuttingItAllTogether
TheImportanceofContent
• ThesinglebiggestheadacheinCSSbaseddesigniscausedbythe“wrong”workflow
• Youshouldalwaysbeginwiththecontent• Theactualdesignshouldfocusonpresentingthecontent‐nottheotherwayaround
AnalyzingaLayout
• Where do you start?– Analyze page requirements
• Fixed width centered (or left aligned)?• Stretchy !uid page?• Fluid page with "xed-width columns or
elements?
– Analyze graphics• Decide how to slice• What can be pure CSS and still look like a
graphic?
§Beginbythinkinginrectanglesforoveralldivlayoutandflowofthepage
§Later,you’lldropthoseintoyourHTMLdocumentasemptydivs
Header
Main content
Left column
Right column
Footer
CSSConsiderations
• Atypicalbeginnermistakeistorelytooheavilyonimages
• AnumberofpageelementscanbecreatedusingCSSinsteadofimages
• Whattolookfor…– Areasofflatcolor
– Simpleborders
– Commonlyusedfonts
GIF,JPGorPNG?
• gifsshouldbeusedforareasofflatcolorthatcan’tbepureCSS
• jpgsshouldbeusedforphotos,gradientsanddropshadowsorglows
• pngscannowalsobeused(finallysupportedinIE7)
TransparentBackgrounds
• Lookforareaswheretheimagecanbeexportedasatransparentgifandmattedtothecoloritwillbepositionedon
• Then,useCSSforthebackgroundcolorofthedivbelowit
peach,roundedboxonrustbackgroundcolumn
Slice‐peachwithtransparentBackgroundmattedtorustcolor
mattecolor
UsingNegativeSpace• Othercreativeusesfornegativespace‐fakingatransitionbetweentwo
areas
• Makingadivornavigationaldeviceappeartohaveacreativeshape
Background image placedon right side of button - matches color of the column below. Matted to column background
Background image placedon corner of header - meeting with right column. Matted to header background
UsingRepeatingGraphics
• Pagebackgrounds
• Withcentereddesigns‐holdermayhaveadropshadoworglow‐repeatthoseontheyaxis
• Headings‐usuallyrepeatonthexaxis(thoughafixedwidthwithalefttorightgradientmightrepeatontheyaxis)
• Fauxcolumns‐repeatontheyaxis
UsingMultipleWrappers
• Irregularlyshapes(ordecorativeborders)canbecreatedusingtwoormorewrappers‐‐eachwithitsownbackgroundimage
• Thesecanbestaticwidthorstretchy
MoreMultipleWrappers
• Irregularlyshapedcontainersanddecorativeborderscanbeefficientlyslicedandassembled.
wrappertwobackground
wrapperonebackgroundrepeat‐y
wrapperthreebackground
Aquickdemonstrationofanactualdesign
TheBestLaidPlans…
BustingBugsandCodingProblems
• Isitreallyabug?
• Coulditbeacascadeissue?
• ValidateyourHTMLandCSStoverifytheyaretostandardswithnoerrors
• It’ssimplertocodetostandards(usingabrowserlikeFirefoxtotestalongtheway)andhackasneededforIE
DebuggingwiththeBrowser• PlacebackgroundcolorsintheCSS
foreachdiv• UseFirefoxwithChrisPederick’s
WebDeveloper’sToolbar– Outline>OutlineBlockLevel
Elements– Outline>OutlineCustom
Elements– CSS>EditCSS– CSS>ViewStyleInformation
• Createatestcasewithonlythebasicdivs
MostCommonBugs• FloatDropdueto3pxbugordoublingmargins(starfilter)• Listwhitespace,andotherunaccountedforwhitespacedifferences(strip
whitespaceoradddisplay:inline)• IErequiresacontainertohavedimensions(HasLayout)‐Hollyhackwas
previouslyusedandnowzoom:1inanIEConditionalComment(IECC)• VariousIEMacissues(tanhack‐‐http://www.l‐c‐n.comformoreinfo)IF
you’restillworryingaboutacompletelyunsupportedbrowser• Mozilla’sissuewithmarginsprotrudingfromacontainercausingspace
(removetopand/orbottommarginsofelementinside)• DealingwithInternetExplorer7
– manypreviousbugsfixed– Also“fixed”thestarfilterhack‐*html#selectorName‐youcanstilluseittoselectversionsofIE
priortoIE7withinyourIECC
• UsetheAdobeCSSAdvisorsite(availabledirectlyinAdobeDreamweaverCS3)
MagicBullets‐sometimes• Addposition:relative;
• WehavebeenusingtheHollyhack‐butnow,weswitchfrom:
/* Hides from IE5-mac \*/* html .buggybox {height: 1%;}/* End hide from IE5-mac */
To:zoom:1forIE7‐mustbeinIEConditionalCommenttovalidate
<!--[if IE]><style type="text/css">.buggybox {zoom: 1;}</style><![endif]-->
• CommunityMXhasCustombugsnippetsformosteverybrowser.Noneedtomemorizethem.
Q&A
