0% found this document useful (0 votes)
164 views19 pages

Lesson 6

The document provides an overview of the history and evolution of HTML. It discusses how HTML has changed from its early days in the 1990s when pages were plain text to today where it can support complex layouts, images, and mobile access. It describes how the World Wide Web Consortium (W3C) has driven the standardization of HTML to address issues like inconsistent rendering across browsers. It also summarizes the transition from traditional HTML to XHTML which introduced stricter syntax rules to improve processing efficiency.

Uploaded by

api-275924524
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
164 views19 pages

Lesson 6

The document provides an overview of the history and evolution of HTML. It discusses how HTML has changed from its early days in the 1990s when pages were plain text to today where it can support complex layouts, images, and mobile access. It describes how the World Wide Web Consortium (W3C) has driven the standardization of HTML to address issues like inconsistent rendering across browsers. It also summarizes the transition from traditional HTML to XHTML which introduced stricter syntax rules to improve processing efficiency.

Uploaded by

api-275924524
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

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.

You might also like