Chapter 1

Introduction
Intheearly1990swhentheWebwasjustgettingstarted,mostcomputermonitorsweren'tcapableof
showingcolors,photos,orfancyprintstyles.TheWebpagesofthedaywereprettydrabacademicpapers
withoutawholelotofpizzazz.TheHTMLlanguageofthetimewassimilartowhatyou'velearnedsofarin
thiscourse(thoughintheearliestdaystherewerenotagsforpicturesortables).

Thingshavechangedalotsincethen.Computersarealotfasterandmoresophisticated.Computer
screensandprinterscandisplayphotos,fancyprintstyles,andcomplexpagelayouts.Peopleaccessthe
WebwithallkindsofmobiledevicesnownotjustWebbrowsersonPCsandMacs.
Tokeepupwithallofthat,HTMLhasevolvedovertheyears.Ofcourse,itdidn'tjustmagicallyevolveonits
own.Peoplehavedriventhatevolution.Specifically,theWorldWideWebConsortium(alsoknownasthe
W3CorW3)hasdriventheevolution,astheyarethepeoplewhodefinethestandards.
Intoday'slesson,you'lllearnaboutthepast,present,andfutureofHTML.Andmoreimportantly,you'lllearn
whatyouneedtodorightnowtomakeyourpagescomplywithcurrentandfuturestandards.
Let'smeetinChapter2andgetstarted!

Chapter2
TheTurnoftheCentury
Intheearlydaysoftheweb,HTMLwasaprettysimplelanguagefordisplayingbasictextdocuments.And
therulesweresomewhatloose.Youcoulduseuppercaseorlowercaselettersforyourtags,andyoucould
leaveofftheclosing</p>,</li>,</h1>tagsformanyelements.Theruleswerelooseandsimple,because
thepageswereplainanddisplayedonlyonmonochromemonitorsthatcouldn'tevenshowpictures,colors,
orfancyprintstyles.

Astheyearswentby,computersandmonitorskeptgettingmoresophisticated.Inthemid1990s,HTML
wentthroughaperiodsometimesreferredtoastheeraofthe
browserwars.D
uringthatphase,software

companiesthatweremakingtheWebbrowserswerealsomakinguptheirownHTMLtagsandattributes,as
wellastheirownrulesabouthowHTMLshouldbewritten.Thiswasnotagoodthing,though.AsaWeb
developer,youmightcreateapagethatlooksgreatinoneWebbrowser,say,InternetExplorerinWindows,
butthenyouseeyourpageinsomeotherWebbrowseronsomeoneelse'scomputer,anditlooks
completelydifferentandnotsogood!

Bythelate1990s,professionalsinthefieldweregoingbacktotheW3Caskingforclearlydefinedstandards
soeveryonecouldplaybythesamerulesandsoaWebdevelopercouldcreateapageinoneWeb
browserandnotworryaboutitlookingcompletelydifferentinotherWebbrowsers.

DeprecatedTagsandAttributes
Rightabouttheturnofthecentury,westartedseeingsomecleaner,betterHTMLspecsinwhat'snow
knownasHTML4.01,XHTML,andHTML5.Thecleanupstartedby
deprecating
sometagsandattributes

thathadfoundtheirwayintothespecsduringthebrowserwars.TheW3Cdeterminedthatthosetagsand
attributesweren'tsuchagoodidea,sotheyrecommendedphasingthemoutofthelanguage.That'swhat

deprecated
means,"nolongerrecommended,"andsoyoushouldavoidusingtheminpagesyoucreate
nowandinthefuture.

Below,I'lllistthedeprecatedtagsandattributesthatyou
shouldnot
usewhencreatingyourWebpages.

(Thelikelihoodisthatthesetagswon'thaveanymeaningtoyou.Ilistthemonlyforthebenefitofthosefew
studentswhomayhavelearnedolder,traditionalHTMLpriortotakingthiscourse.Anddon'tworryyou
don'tneedtoknowwhatthetagsandattributersdo,becauseyouwon'tbeusingthemanyway.)

DeprecatedTags

DeprecatedAttributes

<applet>

(Notethat
align
,
height
,and
width

<basefont/>

areonlypartiallydeprecated.)

<center>

align

<dir>

(deprecatedforallbuttablecells)

<font>

alink

<frame>

background

<frameset>

bgcolor

<isindex>

clear

<menu>

color

<s>

compact

<strike>

face

<u>

height

<xmp>

(deprecatedforallbuttheheightofimages)
hspace
language
link

noshade
nowrap
size
text
version
vlink
width
(deprecatedforallbutthewidthofimagesandtables)

ProperNestingofTags
Asoriginallydefined,theHTMLlanguagedidn'timposemanyrulesabouthowweshouldorganizetags.This
endedupputtingsomeextraburdenontheuseragentsinterpretingthatcode,makingthemdoalotofextra
timeconsumingprocessingindealingwithmissingendtagsorimproperlynestedtags.Sostartingwith
version4ofHTMLatabouttheturnofthecentury,theW3Cstartedaskingauthorstoproperlynest,and
close,allpairedtags.

Tounderstandwhatthatmeans,we'llneedanexample.Let'suseasimple,onelineparagraphoftextthat
containsitalic(emphasized)words.

Paragraph with some italic text

Totagthatparagraphcorrectly,wewouldputbothtagsfortheemphasizedtextinsidethetagsforthe
paragraph.

Reminder
The<p>...</p>tagsmarkthebeginningandendofaparagraph.The<em>...</em>tagsmarktwotypesof
text:textthatisspokenwithemphasisbyscreenreadersfortheblind,andtextshowninitalicsonthe
screenandprintedpage.

Properly nested tags

Wesaythetagsaboveare
properlynested
becausethe<em>...</em>tagsarecontainedwithin(nested
within)the<p>...</p>tags.That'sgoodjustthewayyouwantit.

Thewrongwaytodoitwouldbetoputtheclosingtagfortheemelementoutsidetheclosingparagraphfor
theparagraph.Thedifferencebecomesmoreapparentifyouenvisionlinesconnectingeachopeningtag
withitsclosingtag.


Tags
not
properly nested

Theaboveexampleiswrongbecausetheopening<em>tagisinsidetheparagraph,butitsclosing</em>
tagisoutsidetheparagraph.Inotherwords,theemelementisn'tnestedwithintheparagraph.That'snot
properlynestedandisbadinXHTML.
Ifyougetintothehabitofalwaystypingyourclosingtagrightafteryouropeningtag,youwon'thaveto
worryaboutimpropernesting.Justdon'tforgettoputthecursorbetweenthetwotagsbeforetypingthe
contentthatbelongsbetweenthosetags!
Theturnofthecenturydidmorethandeprecatesometagsandattributesandcleanuptherulesofhowwe
shouldnesttags.ItalsousheredinawholenewversionofHTMLcalled
XHTML
.MeetmeinChapter3,and
we'lldiscusswhatthat'sabout.

Chapter 3
TheSwitchtoXHTML
Aswediscussedinthelastchapter,HTML4.01cleanedupsomeproblemtagsandattributes,aswellas
therulesaboutnestingopeningandclosingtags.Butatthetime,cuttingedgeprogrammerswhowere
creatingnewbrowsersandotheruseragentswerealsoaskingforsometighterrules,sotheirbrowsersand
otheruseragentscouldprocesspagesmoreefficiently.
TraditionalHTMLisbasedonSGML(
StandardizedGeneralizedMarkupLanguage
),whichisheavily

gearedtowardprintdocumentscommonlyfoundinofficeenvironments.Someonesuggestedcreatinga
versionofHTMLbasedonXML,whichstandsfor
eXtensibleMarkupLanguage.
XMLisn'tspecifically
designedfordisplayingcontentonthescreen.Infact,itsmainuseistohelptransferdatabetween

computersthatareotherwiseincompatible.It'sverygoodatdoingthatjob,mainlybecauseitsrulesof
syntax,whichdefinehowyouwritethecode,areveryclearandwelldefined.TheW3Creasonedthat
carryingthosesamerulesovertoHTMLcouldhelpcleanupsomeofthemessinessandunpredictability
thatwashamperingtheprogrammerswhoweretryingtocreatetheneweruseragents.Andthuswasborn
XHTML
eXtensibleHypertextMarkupLanguage
.

Tohearthename,youmightthinkthisissomethingradicallydifferent,requiringyoutolearnaboutXMLor
otherexoticlanguages.Butthat'snotthecaseatall.ThedifferencesbetweentraditionalHTMLandXHTML
areveryfew.Infact,it'sbasicallyjustfourthings:

Tagsandattributesmustappearinlowercaseletters.
Closingtagsarerequiredforalltagpairs.
Emptytagsendwith/>ratherthan>.
XHTMLdocumentsmusthaveonerootelement.

Thefirsttwoitemsareprettystraightforward.IfyoulearnedtraditionalHTMLinthe1990s,youwouldhave
learnedthatitwasokaytouseuppercaseorlowercaselettersinyourcode.Andyoumayhavelearnedthat

it'sokaytoleavethe</p>tagofftheendsofparagraphsandsomeothertags.Forexample,thispagewas
okayinearlytraditionalHTML:

Acceptable code for traditional HTML

Thatpageisn'tacceptablebytoday'sstandards.Theuppercaselettersinthetags(<HTML>,<HEAD>,and
soforth)aren'tallowed.Andit'snotokaytoleaveofftheclosing</h1>and</p>tagsontheheadingand
paragraphs.ToabidebythefirsttworulesofXHTML,thepageabovewouldneedtoberewrittenlikethis:

Lowercase code and closing tags

Fortunately,thosefirsttworulesaren'ttootoughtohandle.Justkeepaneyeonyourkeyboard'sCapsLock
keytomakesureyou'renottypinguppercaseletters.Andwheneveryou'retypingtagsthatcomeinpairs,
typetheclosingtagrightafteryoutypetheopeningtag.Thatwayyouwon'tforgettotypetheclosingtag
later.
ThevastmajorityofXHTMLtagscomeinpairs.Butthereareafewexceptions,andwecallthose
exceptions
emptytags
.That'salittlebitofamisnomersincethetagsaren'tcompletelyemptylike<>is
consideredempty.Rather,they'reemptyinthatthere'snoclosingtag.Thetablebelowliststhemost

commonlyusedemptytags,howtheylookinHTML,andhowtheylookinXHTML.(Wehaven'tdiscussed
allofthesetagsyet,soyoudon'tneedtoknoworunderstandthepurposeofthemnow.Thebrief
descriptionisjustthereforfuturereference.)

HTML

XHTML

Purpose

<br>

<br/>

Linebreak

<hr>

<hr/>

Showsahorizontalrule

<img>

<img/>

Showsagraphicimage

<link>

<link/>

Linkstoanexternalfile

<meta>

<meta/>

Providesinformationaboutthepage

Manypeopletypeaspacebeforethe/>attheendofanemptytag.ThisisbecausewhenXHTMLfirstcame
out,someoldWebbrowsersthatweren'treadyforXHTMLstillworkedokaysolongasyouputinthat
space.Buttechnically,thespaceisn'trequired.Andthoseoldbrowsersarenowextinctandnothingtoworry
about.Soeverythingwillbefinewhetheryouputaspaceinfrontof/>ornot.Butthat'stheonlyextrablank
spacethat'sallowed.Don'tputaspacebetweenthe/and>attheendofthetag!
ThelastruleofXHTMListhateverydocumentmusthaveexactlyone
rootelement
.Itsounds

technicalmaybeevenalittleintimidating.Basically,itmeansthatthewholepagemustbecontainedin
<html>...</html>tags,justlikethepagesyou'vealreadycreatedinthiscourse.Butthere'sactuallyonething
thatgoesabovethefirsthtmltaga
doctypedeclaration
thatletstheuseragent"know"yourcodeiswritten
toXHTMLstandards.

ThereareafewdifferentXHTMLflavors,anddifferentdeclarationsfordifferentflavors.Butdon'tworry
aboutthatfornow.Mostpeoplejustusethefollowingdeclarationatthebeginningoftheirpagetoindicate
thatthey'reusingXHTML.

<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Youmayhavenoticedtheuppercaselettersinthere,whichseemtoconflictwithXHTML'sruleofonlyusing
lowercaseintags.Butthatfirstlineisn'tatag,perse.It'sadocumentdeclarationthathappenstobe
enclosedin<and>characters.Theactualtagsdon'tstartuntilthe<htmltag.
ThehtmltagisalittledifferentinXHTMLtoo.Itcontainsanattributelikethis:

<htmlxmlns="http://www.w3.org/1999/xhtml">
Thexmlnsstandsfor
XMLnamespace
andisrequiredinallXMLbaseddocuments.InaWebpage,it

doesn'treallydoanythingotherthansatisfytherequirementofhavinganamespacedefined.Butinother
kindsofXMLdocuments,thenamespacedefinesthemeaningsoftagsusedintheXMLdocument.
TheheadandbodytagsfromtraditionalHTMLarestillrequiredinXHTMLtoo.Soan"empty"pagein
XHTML(onethatcontainsallthemandatorytags,butnocontent)lookslikethis:

<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>


</head>

<body>

</body>

</html>
It'salottoremember,andtotellyouthetruth,Idon'tknowofanyWebdeveloperswhohaveeventried.
Mostjustsaveallofthattoatextfileontheircomputersomewhere.Then,whentheycreateanewWeb
page,theycopyandpasteallthetagsintothenewpage,ratherthantrytotypethemfrommemory.Copying
andpastingisaloteasier,anditavoidstypographicalerrors.
ButXHTMLisn'ttheendofthestory....

HTML5
In2004,agroupwhocalledthemselves
WHATWG
(WebHypertextApplicationTechnologyWorkingGroup)
beganthinkingaboutwaystoextendtheWebtohostmorethanjusttextandpictures.Theystarted
developingtagsandtechnologiesthatwouldallowforbetterintegrationofvideo,audio,andmore
interactivity,withoutrelyingonpluginplayerslikeAdobeFlash,commonlyusedtoplaycertainkindsof
videosontheweb.

Atthesametime,thefolkswhobroughtyouHTMLandXHTMLwereworkingonanewflavorofXHTML,
referredtosimplyas
XHTML2.0
.

Astheyearswentby,itbecamecleartotheW3Cthatthetwogroupswereduplicatingsomeoftheirefforts.
And,ofcourse,thepointofhavingagroupliketheW3Cdefinestandardsissothatthere'sjust
one
standard
thatanyWebdevelopercanabidebytobesurehisorherproductswilllookandactthesameacross
differentbrandsandversionsofuseragents.SotheW3Cdecidedthatthesolutionwastomergethe
WHATWGandXHTML2.0effortsintoone.Andtomakematterseveneasier,theydecidedtodubthenext
developedlanguagesimply
HTML5
.

HTML5isbasicallyXHTMLwithsomenewtagsfromtheWHATWGgroup.HTML5reached
RecommendationstatusinOctober2014.Thatmeansthelanguagespecificationwillnotchangeinthe
future.Sowebdevelopers,likeyourself,canusethelanguagenowwithouthavingtoworryaboutsomething
withinthatspecificationchanginginthefuture.
Aswediscussed,HTML5isessentiallyXHTMLwithsomenewtagsaddedin.LikeXHTML,anHTML5page
muststartwith<!DOCTYPE.ButthefirsttagsaremuchsimplerthantheyareinXHTML.Andablankpage
inHTML5(again,"blank"meansthatitcontainsallofthemandatorytags,butnocontent)lookslikethis:

<!DOCTYPEhtml>

<html>


<head>

<title></title>

</head>

<body>

</body>

</html>
Sowhatshouldyoudo?EventhoughHTML5isn'tafinalspecyet,themoveinthatdirectionishappening
quickly,andmostofthetagsinHTML5areexactlythesameastheywereinearlierversions.Infact,allthe
tagsyoulearnaboutinthiscoursewillworkinHTML5aswellasearlierversionsofHTML).Butsincethe
doctypeforHTMLissomucheasiertorememberandtypethantheearlierones,andsinceeverythingis
movinginthedirectionofHTML5anyway,I'mgoingtosuggestyouusethenewertagswhenwegettothe
assignmentforthislesson.
KeepinmindtoothatwhenIrefertoHTMLinthiscourse,I'mreallytalkingaboutHTML,XHTML,and
HTML5.Becausethey'reallmostlyjustslightlydifferent"flavors"ofthebasicHTMLlanguage,andthe
similaritiesfaroutweighthedifferences.Isay,"HTML"(asdoeseveryoneinthefield)justbecauseit'stoo
tiresome(andpointless)toalwayssay,"HTML,XHTML,andHTML5"(orsomesuchthing).

ViewingOtherPeople'sCode
YoumayrecallfromearlierlessonsthatthecodethatdefineshowapagelooksinaWebbrowseriscalled
thepage's
sourcecode
.Andwhenyou'reoutontheWebviewingotherpeople'spages,youcantakealook
atthesourcecodeatanytime.InWindows,getthemousepointeronsomeneutralareaofthepage,such

astheblanklinebetweentwoparagraphs(notonapicture,andnotonalink),andrightclickthatspot.Ona
Mac,CTRL+clickthatspot.Then,lookforViewSource(orasimilarlookingoption)ontheshortcutmenu
thatopens.

Tip

Ifyoudon'tseeanoptionforviewingthepagesourceinSafari,choose
Preferences
fromtheSafarimenu,
click
Advanced
,thenselect(check)
ShowDevelopmenuinmenubar
.ClosethePreferencesdialog.
ThenCTRL+clickanyemptyspotonthepageagainandlookfor
ShowPageSource
.


Sample shortcut menu for right-clicking or CTRL + clicking on a Web page

Click
ViewSource
ontheshortcutmenu,andanewwindowopensonthescreen,showingthesourcecode
forthepage.Mostwillprobablyhavea<!DOCTYPEtaguptop,indicatingwhatversionofHTMLtheauthor
usedtocreatethepage.
Eventhoughyoucanseethecode,youcan'tmakeanychangesthatwillaffecttheoriginalsite(you'reonly
allowedtochangethecontentofyourownsite).Soyoucanclosethewindowthat'sshowingthecodeby
pressingitsClosebutton(theredcircleattopleftonaMac,ortheXatthetoprightinWindows).
Whenyoulookatotherpeoples'sourcecode,you'lllikelyseealotofstrangelookingcode.Andnotallofit
isHTMLorXHTML.That'sbecauseeveryWebbrowseriscapableofexecutingmorethanjustHTMLand
XHTML.Thereareotherlanguagestheycanuse.CSSisanimportantone,becauseit'sthelanguagethat
letsyoudoyourstyling(centering,fonts,colors,andsoforth).ReadytofindoutaboutCSS?Takeabreak
tostretchyourlegs,andthenmeetmeinChapter4.

Chapter 4
IntroducingCSS
Backin1999whentheW3Cstarteddeprecatingsometagsandattributes,partoftheirmotivationwasto
achieve
separationofstructureandpresentation.
InEnglish,thathastodowithseparatingthelanguage

thatdescribedwhatanelement
is
fromthelanguagethatdescribedhowit
looks
.Theconceptwasalready
inwidespreaduseinotherformsofelectronicpublishing.Andpeoplewritingwebsiteswantedtoseea
similarimplementationforWebdevelopment.
InWebdevelopment,thelanguageweuseforstructureisHTML(includingXHTML).WeuseHTMLtagsto
definewhatanelementis(forexample,aheading,aparagraph,animage,atable,alist).Forthe
presentationsideofthings,weuseanotherlanguagecalled
CSS
(CascadingStyleSheets).Inotherwords,
weuseCSStodescribehowanelementlooks(likefont,color,andcentering).

CSSisn'tanalternativeto,orareplacementfor,HTMLorXHTML.Youstillcreateyourpagesanddefine
yourelementsusingHTML(orXHTML),justasyou'vebeendoingsincedayoneinthiscourse.Youuse
CSSinadditiontothatlanguagetostyletheappearanceoftheelementsthatmakeupyourpage.
Itmayseemasthoughhavingtwoseparatelanguagesmakesthingsworseandmorecomplicatedfor
developers.Forabeginnerjustgettingstarted,Icancertainlyunderstandwhyitwouldseemthatway.But
therearemanyadvantagestokeepingthelanguagesseparate,aswe'lldiscussthroughoutthiscourse.And

infact,itwastheWebdevelopers,thepeoplecreatingthewebsites,ratherthantheprogrammerswhowere
creatingtheuseragents,whowerethedrivingforcebehindthecreationofCSS.Theconceptisn'tnew
either.Theuseofstylesheetlanguagestocontrolstylinggoesbacktotheearlydaysofelectronic
publishing,longbeforetheWorldWideWebexisted.

CSSHistory
ThehistoryofCSSisrelativelysimplecomparedtoHTML.In1996,theW3Cpublishedthe
RecommendationforCSSLevel1(oftenwrittenasCSS1).Itcontainedpropertiesandvaluesforbasic
thingslikefonts,colors,andtextalignment.In1998,CSS2wasreleasedandincludedsomenewtechniques
forpositioningelementsonpages,aswellasnewpropertiesforaural(audio)mediatocontrolthecomputer
voicespeakingthetextoutloud.
BothCSS1andCSS2gotofftoarockystart,asisoftenthecasewithnewlanguages.Experiencegained
frompracticaluseofthoseearlyversionsledtoCSS2.1,whichistheversionthat'sbeeninwidespreaduse
fornearlyadecadenow.
CSS3isthenextversionofCSSthattheW3Cwillrelease.Itoffersadvancedfeatureslikeroundedcorners,
dropshadows,andotherfeaturesdeveloperswantintheirsite.LikeHTML5,CSS3isnotafinishedproduct
yet.Butlikeitspredecessors,CSS3isdestinedtobecomethepremierstylesheetlanguageforwebdesign.

CSSSyntax
Likeallcomputerlanguages,CSSfollowscertainrulesofsyntax.Youbasicallydefineastyleusingthis
syntax:

property
:
value
Inthissyntax,
property
isanyvalidCSSproperty,and
value
isanyacceptablevalueforthatproperty.

Noticethatyouuseacolon(:)toseparatethepropertyfromthevalue.Youcanputaspaceafterthecolon,
ifyoulike.Somedeveloperstypeaspacetheretomakethecodealittleeasiertoread.Butthatspaceis
optional,neverrequired,andthecodebehavesexactlythesamewithorwithoutthespace.
ThereareacoupleofplaceswhereyoucanputCSSproperty:valuepairs.Inthislesson,we'llfocusonthe
simplest,calledthe
inlinestyle
whereyouputtheproperty:valuepairrightinsidethetagoftheelementyou

wanttostyle,usingastyle=attribute.That'squiteamouthfuloftechnicalterms,solet'sslowdownaminute
anddoalittlereview.
InHTML,youusetagstodefineelements.Sometagsallowyoutouseattributesthatprovideadditional
informationtothetag.Theattributeisawordinsidethetag,followedbyanequalsignandavalueenclosed
inquotationmarks.TheattributeweusetostyleatagwithCSSisthestyle=attribute.Sothegeneralsyntax
ofthetag,withthestyle=attributeinit,lookslikethis(there'snoactualCSSyet,theexampleisallHTML
still):


Tag with style= attribute

The
tag
partrepresentsanytagthatyoumaywanttoapplyastyleto,likebody,h1,h2,p,list,orul.Fora

style=attribute,thevaluebetweenthequotationmarksisoneormoreCSS
property
:
value
pairs.Ifyouwant
tousejustoneproperty:valuepair,itgoesbetweenthosequotationmarkslikethis:

Tag with inline style

Asalwaysinsyntaxchartsliketheoneabove,theitalictextisjustplaceholdertext.Younevertypetheword

property
,literally.Instead,youtypeaCSSpropertythere.Therearemanytochoosefrom,asyou'llsee
shortly.Butthe
value
issimilar.Younevertypetheword
value
there.Ratheryoutypeavaluethat's

appropriateforthepropertyyoutyped.Andtherearelotsofvaluestochoosefromtoo,asyou'llsee.
Youaren'tlimitedtooneproperty:valuepairinsidethestyle=attribute.Youcanusemultipleproperty:value
pairs,solongasyouseparateeachpairwithasemicolon().Takealookatthisexample:

Tag with inline style that has multiple property:value pairs

Youmightnoticeintheexampleabovethatthere'sanextrasemicolonattheendoftheproperty:valuepairs.
Thatoneisoptional.Thecodeworksthesamewithorwithoutit.Butmanypeopletypethesemicolonatthe
endforthisreason:Iflatertheydecidetoaddanotherproperty:valuepair,thesemicolonisalready
therewhichmakesitlesslikelythatthey'llforgettotypeitatthattime.
AswithXHTML,theCSSpropertynamesandvaluesarealwayslowercase.SinceCSSisentirelyseparate
fromHTML,youcan'tuseHTMLtagsornamesaspropertiesorvalues.Youalsocan'tjustmakeupyour
ownpropertynamesandvaluesonthefly.Andit'sprettymuchimpossibletofigurethemoutbyguessing!

Yourbestbetistolearnafewtogetstartedandgetsomepracticewiththesyntax.Andyou'llhaveachance
todothatinafewminutes.Intheassignmentforthislesson,you'llpracticeusingCSStocentertextand
picturesinoursamplepages.
Let'sheadovertoChapter5andwrapthingsup.

Chapter 5
Summary

Intoday'slesson,wecoveredsomehistoricalandcurrentinformationaboutHTMLandCSS.Thisisthekind
ofknowledgethattheprosknowandassumealloftheircolleaguesalsoknowandunderstand.Toa
beginner,itcanseemlikeawholenewworldwithitsownsecretlanguage.It'sreallynotnecessarytoknow
exactdates,orwhendifferentfeatureswerefirstimplemented,oranythingthatspecific.Butit'sgoodtohave
asenseofwhat'sbeengoingoninthepast,andwhat'sgoingonnow.Here'saquicksummary:

TheW3CisthestandardsorganizationthatdefinesallWeblanguages.
TheW3CproducedHTMLversions1through4between1990and1999.
XHTML,aversionofHTMLthatborrowssomesyntacticalrulesfromtheXMLlanguage,hasbeen
aroundsincetheturnofthecentury.
HTML5isthecurrentversionofHTML,andCSS3isthecurrentversionofCSS.Virtuallyall
websitesbeingdevelopedtodayarebeingwritteninthoseversionsofthelanguages.

Intheassignmentforthislesson,andinfuturelessons,you'llputyournewknowledgetoworkbygoing
handsonandaddingsomeCSStoyourWebpages.Seeyouthere!

SupplementaryMaterial
WorldWideWebConsortium
http://en.wikipedia.org/wiki/W3C
Clickthislinkforaquickintroductiontothewho,what,where,when,andwhyoftheW3C.

XHTML
http://en.wikipedia.org/wiki/XHTML
CheckoutthissiteforWikipedia'sencyclopedicdescriptionofXHTMLandrelatedhistory.

HTML5
http://en.wikipedia.org/wiki/HTML5
Hereyou'llfindWikipedia'sarticleonHTML5.

CascadingStyleSheets

http://en.wikipedia.org/wiki/Css
Youguessedit!ClickingthislinktakesyoutoWikipedia'spageonCSS.

FAQs
Q:
I'mnotsuremyindex.htmpageiscurrent.CanIgetacopyofthewholepage?
A:
Sure!Here'sthesourcecodefortheentirepageasthingsstandattheendofthislesson.

<!DOCTYPEhtml>

<html>

<head>

<!Titleinbrowserwindow>

<title>MyWebsite</title>

</head>

<bodystyle="textalign:center">

<!Mainpagetitle>

<h1>WelcometoMySite</h1>

<!Welcomepicture>

<p><imgsrc="welcome.png"alt="Welcome"/></p>

<!Paragraphs>

<p>Thisistextonmyhomepage.Iamasentencethat
containssome<strong>boldface</strong>textandsome<em>italic</em>
text.</p>

<p>Thisisapracticeparagraphthatcontainsmultiple
sentences.Alongerparagraphlikethiswillallowmetosee<em>word
wrap</em>inactioninmyWebbrowser.Wordwrapmeansthatthetextwill

wraptofitthewidthofthebrowserwindow.Solongasthebrowser
windowisareasonablewidth,textwillnotshootoffpasttherightedge
ofthewindowforcingmetoscrolltotherighttoseeit.Thewrapping
occursatspacesbetweenwordsattheendsoflines.Thatpreventsany
individualwordfrombeingsplitacrosstwolines.</p>

<!Linktotherecipepage>

<p><ahref="recipe.htm">SeeMyHotDogRecipe</a></p>

</body>

</html>

Q:
CanIalsogetallofthesourcecodefortherecipe.htmpage?
A:
Youbet.Here'srecipe.htminallitsglory(throughLesson6).

<!DOCTYPEhtml>

<html>

<head>

<!Titleforbrowserwindow>

<title>MyFavoriteRecipe</title>

</head>

<body>

<!Maintitle>

<h1>HotDogs</h1>

<!Hotdogpicture>

<p><imgsrc="hotdog.png"alt="Hotdog"width="100"/></p>


<p>Hereismygourmethotdogrecipe.</p>

<!Subheading>

<h2>Ingredients</h2>

<!Unordered(bulleted)list>

<ul>

<li>Hotdogs</li>

<li>Hotdogbuns</li>

<li>Mustard,relish,choppedonions</li>.

</ul>

<!Subheading>

<h2>Directions</h2>

<!Ordered(numbered)list>

<ol>

<!Specialcharacterfordegreesbelow>

<li>Preheatgrillto350&deg.</li>

<li>Placedogsongrill,rolloccasionallyforeven
cooking.</li>

<li>Placecookeddogsinbuns.</li>

<li>Applymustard,relish,andonionstotaste.</li>


</ol>

<p>EatandEnjoy!</p>

<!Atablewithsinglelinebordersandrightaligned
numbers>

<tableborder="1"cellspacing="0"cellpadding="4">

<!Row1,headercells>

<tr><th>Ingredient</th><th>Calories</th></tr>

<tr><td>HotDog</td><tdalign="right">150</td></tr>

<tr><td>Bun</td><tdalign="right">90</td></tr>

<tr><td>Ketchup</td><tdalign="right">10</td></tr>

</table>

<!Linkstootherpages>

<p><ahref="http://www.allrecipes.com">MoreGreatRecipes</a>
<ahref="index.htm">Home</a></p>

</body>

</html>

Assignment

Theinformationintoday'slessonisimportant,especiallyifyou'rethinkingofgettingintoWebdevelopment
professionally.Butwedidn'tgettodoanythinginthewayofhandson.Solet'srectifythatnow.Tobringour
samplepagesintothe21stcentury,weneedtodefineadoctypeatthetopofeach.Andtogetalittle
handsonpracticewithCSS,we'lluseittocentersometextinyourhomepage.
I'mgoingtosuggestthatyouusetheHTML5documenttype,sinceit'stheeasiesttotype.Youknowthat
HTML5ishighlyexperimentalandnotwidelyusedinproductionwebsites,butdon'tworry.Iwon'thaveyou
useanyexperimentalHTML5tagsinsidethepage.Insidethepagesforthiscourse,we'llsticktothecore
HTMLthat'scommontoXHTMLandHTML5,toensurethateverythinglooksandworksrightonyour
screen.

Foryourindex.htmpage,I'dlikeyoutoadd<!DOCTYPEhtml>astheveryfirstitemonthatpage.Then,
insidethe<body>tagonthatpage,pleaseinsertanattributethatreads(exactly)style="textalign:center"
aftertheword
body
butstillinsidethe>attheendofthetag(seeimagebelow).Don'tremoveanythingfrom
thepage.Justaddthenewcodeshowninboldbelow.Doingthisdoesn'trequireanynewskills,soifyou

candoitwithoutpeekingattheinstructions,great!Butifyouneedhelp,you'llfindsomeinstructionsnear
theendofthisassignment.

ote
N
Intheimagebelow,thecommentsstartingwith<!andendingwith>arefromtheLesson5FAQs.
They'renotrequired.Likeallcomments,they'rejustnotestoyouandarecompletelyoptional.Seethe
Lesson6FAQsforthelatestversionofbothofoursamplepages.

New code to add to index.htm

Afteryou'vemadethechangestoindex.htmandsavedthosechanges,openitinabrowser.The
textalign:centerCSSstylewillcentereverythingonthepage(seeimagebelow).Eventheparagraphtextis
centered.Thatmayormaynotbewhatyouwant.Butdon'tworryaboutthat.You'lllearnhowtogetvery
precisecontrolovertextalignmentinthenextlesson.


Index.htm in a browser after changes

Inrecipe.htm,centeringeverythingwon'tworkouttoowell,becausetherearetoomanydifferentkindsof
elementsonthatpage.Sofornow,wewon'trestyleanything.Butjusttomakesureyou'reusing21stcentury
programmingtechniques,pleaseadda<!DOCTYPEhtml>tagtothetopofthatonetoo.Again,don'tdelete
anythingfromthepage.Justaddthatonetagtothetop.Ifyouneedhelp,seetheinstructionsattheendof
thisassignment.

Top of recipe.htm in a browser after changes

Closerecipe.htmwhenyou'vefinished,andchooseYeswhenaskedaboutsavingyourchanges.Youdon't
needtocheckyouworkinaWebbrowser,becausewedidn'tmakeanystylisticchangestothepage.It'll

stilllookthesameasitdidattheendofLesson5.Inthisassignment,wejustbroughtthesourcecodeinto
the21stcenturybyaddingadoctypedeclarationtothetopofthepage.