3/1/2016

TeachYourselfHTML3.2in24Hours

Hour1
WhatIsaWebPage?
HowWebPagesWork
Figure1.1.
Figure1.2.
Figure1.3.
TheManyFacesofHTML
Figure1.4.
Figure1.5.
Figure1.6.
Figure1.7.
CreatingHTMLwithaTextEditor
Summary
Q&A
Quiz
Questions
Answers
Activities

Hour1
WelcometoHTML
BeforeyoubegincreatingyourownWebpageswithHTML,youneedsomebackgroundknowledge
aboutwhatWebpagesare,howtheywork,andwhatyoucanexpecttoachievewiththem.Thischapter
providesaquicksummaryofthosebasicsandsomepracticaltipstomakethemostofyourtimeasaWeb
pageauthorandpublisher.ToDo:ThisbookassumesthatyouhavespentsometimeexploringWeb
pagesontheInternet.Ifyouhaven't,pleasetakeatleastacoupleofhourstodosonow.Tryingto
produceyourownWebpageswithouthaving"surfed"theWorldWideWebwouldbeliketryingto
becomeafamousauthorwithouteverhavingseenapieceofpaper!
Here'sareviewofwhatyouneedtodobeforeyou'rereadytousetherestofthisbook:
1.Getacomputer.IusedaWindows95computertocreatethefiguresinthisbook,butyoucan
useanyWindows,Macintosh,orUNIXmachinetocreateyourWebpages.(YoucanlookatWeb
pageswithaTVnowadays,butyoucan'tmakethemwithone...yet!)
2.GetaconnectiontotheInternet.Youshouldbeabletogetonethrougheitheramodemorthe
localnetworkofyourschoolorbusiness.AnoldUNIX"shell"accountwon'tdothetrickithasto
beamodernPPP(PointtoPointProtocol)connection,whichmostInternetserviceproviders(ISP)
nowofferforabout$20permonth.Youraccessspeedshouldbeatleast14.4Kbps,thoughfaster
isbetter.TheISP,school,orbusinessthatprovidesyourconnectioncanhelpyouwiththedetails
ofsettingitupproperly.
3.GetacopyofNetscapeNavigatorand/orMicrosoftInternetExplorer(version3.0orhigher).
https://akmb7t5w56jcfgwf.onion.cab/books/sorted/Macmillan/Teach%20Yourself%20HTML%203.2%20in%2024%20Hours/html/ch01.htm

1/7

3/1/2016

TeachYourselfHTML3.2in24Hours

Together,thesetwoWebbrowserprogramsareusedbyover90percentofthepeoplewholookat
Webpages,soit'sagoodideatogetthemboth.Youcanbuytheminsoftwarestores,orgetthem
freethroughtheInternetathttp://home.netscape.comandhttp://www.microsoft.com.

4.Explore!UseNetscapeNavigatororMicrosoftInternetExplorertolookforpagesthatare
similarincontentorappearancetothoseyou'dliketocreate.Makenotesaboutwhatfrustratesyou
aboutsomepages,whatattractsyouandkeepsyoureading,andwhatmakesyoucomebackto
somepagesoverandoveragain.
JustAMinute:IfyouplantoputyourHTMLpagesontheInternet(asopposedto
publishingthemonCDROMoralocalintranet),you'llneedtotransferthemtoacomputer
thatisconnectedtotheInternet24hoursaday.Thesamecompanyorschoolthatprovides
youwithInternetaccessmayalsoletyouputWebpagesonitscomputerifnot,youmay
needtopayanothercompanyto"host"yourpages.YoucanstartlearningHTMLwiththis
bookrightawayandwaittofindanInternethostforyourpageswhenthey'redone.
However,ifyouwanttohaveaplaceontheInternetreadyforyourveryfirstpageassoonit
isfinished,youmaywanttoreadChapter4,"PublishingYourHTMLPages,"beforeyou
continue.

WhatIsaWebPage?
Onceuponatime,backwhenthereweren'tanyfootprintsonthemoon,somefarsightedfolksdecidedto
seewhethertheycouldconnectseveralmajorcomputernetworkstogether.I'llspareyouthenamesand
stories(thereareplentyofboth),buttheeventualresultwasthe"motherofallnetworks,"whichwecall
theInternet.
Until1990,accessinginformationthroughtheInternetwasarathertechnicalaffair.Itwassohard,infact,
thatevenPh.D.holdingphysicistswereoftenfrustratedwhentryingtoswapdata.Onesuchphysicist,the
nowfamousTimBernersLee,cookedupawaytoeasilycrossreferencetextontheInternetthrough
"hypertext"links.Thiswasn'tanewidea,buthissimpleHypertextMarkupLanguage(HTML)
managedtothrivewhilemoreambitioushypertextprojectsfloundered.
NewTerm:Hypertextmeanstextstoredinelectronicformwithcrossreferencelinksbetween
pages.
By1993,almost100computersthroughouttheworldwereequippedtoserveupHTMLpages.Those
interlinkedpagesweredubbedtheWorldWideWeb(WWW),andseveralWebbrowserprogramshad
beenwrittentoallowpeopletoviewWebpages.Becauseofthepopularityof"theWeb,"afew
programmerssoonwroteWebbrowsersthatcouldviewgraphicsimagesalongwiththetextonaWeb
page.OneoftheseprogrammerswasMarcAndreessenhewentontobecomerichandfamoussellingthe
world'smostpopularWebbrowser,NetscapeNavigator.
Today,HTMLpagesarethestandardinterfacetotheInternet.Theymayincludeanimatedgraphics,
soundandvideo,completeinteractiveprograms,andgoodoldfashionedtext.MillionsofWebpagesare
retrievedeachdayfromthousandsofWebservercomputersaroundtheworld.
TheWebisonthevergeofbecomingamassmarketmedium,ashighspeedInternetconnectionsthrough
TVcables,modernizedphonelines,anddirectsatellitefeedsbecomecommonplace.Youcanalready
browsetheWebusinga$300boxattachedtoyourtelevisioninsteadofusingyourcomputer,andthecost
https://akmb7t5w56jcfgwf.onion.cab/books/sorted/Macmillan/Teach%20Yourself%20HTML%203.2%20in%2024%20Hours/html/ch01.htm

2/7

3/1/2016

TeachYourselfHTML3.2in24Hours

ofsuchdevicesislikelytofallsharplyoverthenextfewyears.
YettheInternetisnolongertheonlyplaceyou'llfindHTML.Mostprivatecorporatenetworksnowuse
HTMLtoprovidebusinessinformationtoemployeesandclients.HTMLisnowtheinterfaceofchoice
forpublishingpresentationsonCDROMandthenewhighcapacitydigitalversatiledisk(DVD)format.
MicrosoftisevenintegratingHTMLdirectlyintotheWindowsoperatingsystem,allowingeverystorage
folderinyourcomputertobeassociatedwithanHTMLpageandhypertextlinkstootherfoldersand
pages.
Inshort,HTMLiseverywhere.Fortunately,you'reintherightplacetofindouthowHTMLWebpages
workandhowtocreatethem.

HowWebPagesWork
WhenyouareviewingWebpages,theylookalotlikepaperpages.Atfirstglance,theprocessof
displayingaWebpageissimple:Youtellyourcomputerwhichpageyouwanttosee,andthepage
appearsonyourscreen.Ifthepageisstoredonadiskinsideyourcomputer,itappearsalmostinstantly.If
itislocatedonsomeothercomputer,youmighthavetowaitforittoberetrieved.
Ofcourse,Webpagescandosomeveryconvenientthingsthatpaperpagescan't.Forexample,youcan't
pointtothewords"continuedonpage57"inapapermagazineandexpectpage57toautomatically
appearbeforeyoureyes.Norcanyoutapyourfingeronthebottomofapaperorderformandexpectitto
reachthecompany'sorderfulfillmentdepartmentfivesecondslater.You'renotlikelytosee
animatedpicturesorhearvoicestalktoyoufrommostpaperpageseither(newfangledgreetingcards
aside).AllthesethingsarecommonplaceonWebpages.
ButtherearesomedeeperdifferencesbetweenWebpagesandpaperpagesthatyou'llneedtobeawareof
asaWebpageauthor.Foronething,whatappearsasasingle"page"onyourscreenmayactuallybean
assemblyofelementslocatedinmanydifferentcomputerfiles.Infact,it'spossible(thoughuncommon)
tocreateapagethatcombinestextfromacomputerinAustraliawithpicturesfromacomputerinRussia
andsoundsfromacomputerinCanada.
Figure1.1showsatypicalpageasseenbyNetscapeNavigator,theworld'smostpopularsoftwarefor
viewingWebpages.AWebbrowsersuchasNetscapeNavigatordoesmuchmorethanjustretrieveafile
andputitonthescreenitactuallyassemblesthecomponentpartsofapageandarrangesthoseparts
accordingtocommandshiddeninthetextbytheauthor.ThosecommandsarewritteninHTML.
NewTerm:AWebbrowserisacomputerprogramthatinterpretsHTMLcommandstocollect,
arrange,anddisplaythepartsofaWebpage.
Figure1.2showsthetext,includingtheHTMLcommandsItypedtocreatethepageinFigure1.1.This
textfilecanbereadandeditedwithanywordprocessorortexteditor.Itlooksabitstrangewithallthose
oddsymbolsandcodewords,butthetextfileitselfdoesn'tincludeanyembeddedimages,boldfacetext,
orotherspecialformatting.
Figure1.1.AWebbrowserassemblesseparatetextandimagefilestodisplaythemasanintegratedpage.
AlltheimagesandformattingyouseeinFigure1.1areaddedbyNetscapeNavigator.Itreadsthecoded
HTMLcommandsinthetext,whichtellittolookforseparateimagefilesanddisplaythemalongwith
thetextitself.Othercommandstellitwhichtexttodisplayinboldfaceandhowtobreakupthelinesof
https://akmb7t5w56jcfgwf.onion.cab/books/sorted/Macmillan/Teach%20Yourself%20HTML%203.2%20in%2024%20Hours/html/ch01.htm

3/7

3/1/2016

TeachYourselfHTML3.2in24Hours

textonthepage.
Figure1.2.ThisisthetextItypedtocreatethepageinFigure1.1.Thewordsbetween<and>are
HTMLtags.
TimeSaver:ToseetheHTMLcommandsforanypageontheWeb,selectView|
DocumentSourceinNetscapeNavigatororView|SourceinMicrosoftInternetExplorer.
ThisisagreatwaytogetanintuitiveideahowHTMLworksandlearnbyother'sexamples.
You'lllearnhowtounderstandandwriteHTMLcommandssoon.Theimportantpointtonoterightnow
isthatcreatingaWebpageisjustamatteroftypingsometext.Youcantypeandsavethattextwithany
wordprocessorortexteditoryouhaveonhand.YouthenopenthetextfilewithNetscapeNavigatoror
MicrosoftInternetExplorertoseeitasaWebpage.
Whenyouwantgraphics,sound,animations,video,orinteractiveprogrammingtoappearonaWebpage,
youdon'tinsertthemintothetextfiledirectly,asyouwouldifyouwerecreatingadocumentinmost
paperorientedpagelayoutprograms.Instead,youtypeHTMLtextcommandstellingtheWebbrowser
wheretofindthemediafiles.Themediafilesthemselvesremainseparate,eventhoughtheWebbrowser
willmakethemlookasifthey'repartofthesamedocumentwhenitdisplaysthepage.
Forexample,theHTMLdocumentinFigure1.2referstothreeseparategraphicsimages.Figure1.3
showsthesethreeimagefilesbeingeditedinthepopulargraphicsprogramPaintShopPro.
Figure1.3.ThoughtextandgraphicsappearintegratedinFigure1.1,thegraphicsfilesareactually
stored,andcanbeedited,separately.
Youcoulduseanygraphicsprogramyouliketomodifyorreplacetheseimagesatanytime.Changing
thegraphicsmightmakeabigdifferenceinhowthepagelooks,evenifyoudon'tmakeanychangesto
theHTMLtextfile.Youcanalsousethesameimageonanynumberofpageswhilestoringonlyone
copyofthegraphicsfile.
You'lllearnmuchmoreaboutincorporatinggraphicsfilesintoWebpagesinPartIII,"WebPage
Graphics."

TheManyFacesofHTML
AsingleWebpagecantakeonmanydifferentappearances,dependingonwhoviewsitandwhatthey
viewitwith.Figure1.4isthesameWebpagepicturedearlierinFigure1.1,asseenwiththetextbased
LynxWebbrowser.Lynxuserscanonlyseetheimagesiftheyclickonthe[IMAGE]linksatthetopof
thepage.
Figure1.4.ThepagefromFigure1.1looksverydifferentintheDOSLynxbrowser.
PeoplewhoareusingdifferentversionsofthesameWebbrowsermayalsoseesignificantdifferencesin
apage.Version1.2ofNetscapeNavigatorwasusedtodisplaythepageinFigure1.5.Noticethatthetitle
graphicplacementisdifferentthandisplayedbyNetscapeNavigatorversion3.0inFigure1.1.
EvenusersofthesameversionofthesameWebbrowsercanalterhowapageappearsbychoosing
differentdisplayoptions.BothNetscapeNavigatorandMicrosoftInternetExplorerallowusersto
https://akmb7t5w56jcfgwf.onion.cab/books/sorted/Macmillan/Teach%20Yourself%20HTML%203.2%20in%2024%20Hours/html/ch01.htm

4/7

3/1/2016

TeachYourselfHTML3.2in24Hours

overridethebackgroundandfontsspecifiedbytheWebpageauthorwiththoseoftheirownchoice.
Screenresolution,windowsize,andoptionaltoolbarscanalsochangehowmuchofapagesomeonesees
whenitfirstappears.
Figure1.5.NetscapeNavigatorversion1.2maydisplaysomepagesdifferentlythanotherversionsofthe
samebrowser.
Youcan'tevenassumethatpeoplewillbeviewingyourWebpagesonacomputerscreen.Thepagein
Figures1.1,1.4,and1.5mightalsobereadonalowresolutiontelevisionscreen(seeFigure1.6)ora
highresolutionpaperprintout(seeFigure1.7).
Figure1.6.Televisionscreensmayblurimages,andTVWebbrowsersusuallyusealargerfonttomake
textreadablefromadistance.
Figure1.7.Webbrowsersusuallychangethebackgroundtowhitewhensendingpagestoaprinter.
AsyoulearntomakeyourownWebpages,rememberhowmanydifferentformstheymaytakewhen
peopleviewthem.SomeWebpageauthorsfallintothetrapoftryingtomakepagesappear"perfect"on
theircomputerandaresorelydisappointedthefirsttimetheydiscoverthatitlooksdifferentonsomeone
else'sscreen.
InPartIV,"WebPageDesign,"you'llfindmanytipsandtricksforensuringthatyourpageslookgreatin
thewidestvarietyofsituations.

CreatingHTMLwithaTextEditor
TherearetwobasicapproachestomakinganHTMLpage:youcantypeoutthetextandHTML
commandsyourselfwithatexteditor,oryoucanusegraphicalsoftwarethatgeneratestheHTML
commandsforyou.
Chapter23,"WebSiteAuthoringTools,"introducessomeoftheHTMLeditingtoolsthatareavailable
anddiscusseswhentouseeachtypeoftool.Fornow,however,Istronglyrecommendthatyoudonotuse
agraphical,"whatyouseeiswhatyouget"Webpageeditor,suchasMicrosoftFrontPageorNetscape
NavigatorGold(whichisadifferentprogramthanNetscapeNavigator).
YouwillbeabletofollowalongwiththisbookandlearnHTMLmuchmoreeasilyifyouworkwithan
editorthatshowstheactualHTMLtext.Anywordprocessorortexteditoryoualreadyhaveeventhe
WindowsNotepadorMacintoshSimpleTexteditorwilldonicely.
CoffeeBreak:Inthisbook,you'llencountermanysampleWebpages.Theaccompanying
24HourHTMLCafWebsite(http://www.mcp.com/sams/books/2358/)hasevenmore
samplepagesforyoutoexplore.Inadditiontoalltheseexamples,youcanfollowthe
developmentofacomplete,sophisticatedWebsitefromthegroundupasyougothroughthe
book.Youmightliketopreviewthis"constructionsite"nowat
http://www.mcp.com/sams/books/2358/cafe1.htm
DoingsowillgiveyouanoverviewofhowthisbookpresentsHTMLandhelpyouplanthe
developmentofyourownpages.Itwillalsohelpyouseewhichchapterscovertheaspectsof
HTMLyou'remostlikelytouseinthepagesyouplantobuild.
https://akmb7t5w56jcfgwf.onion.cab/books/sorted/Macmillan/Teach%20Yourself%20HTML%203.2%20in%2024%20Hours/html/ch01.htm

5/7

3/1/2016

TeachYourselfHTML3.2in24Hours

Summary
ThischapterintroducedthebasicsofwhatWebpagesareandhowtheywork.Youlearnedthatcoded
HTMLcommandsareincludedinthetextofaWebpage,butimagesandothermediaarestoredin
separatefiles.YoualsosawthatasingleWebpagecanlookverydifferent,dependingonwhatsoftware
andhardwareareusedtodisplayit.Finally,youlearnedwhytypingHTMLtextyourselfisoftenbetter
thanusingagraphicaleditortocreateHTMLcommandsforyou.

Q&A
QI'mstillnotquitesurewhatthedifferencebetweena"Webpage"andan"HTMLpage"
is.
AIfyouwanttogettechnical,Isupposea"Webpage"wouldhavetobefromtheInternetinstead
ofadiskonyourowncomputer.Butinpractice,theterms"Webpage"and"HTMLpage"areused
interchangeably.
QI'velookedattheHTML"source"ofsomeWebpagesontheInternet,anditlooks
frighteninglydifficulttolearn.DoIhavetothinklikeacomputerprogrammertolearnthis
stuff?
AThoughcomplexHTMLpagescanindeedlookdaunting,learningHTMLisseveralordersof
magnitudeeasierthanothercomputerlanguageslikeBASIC,C,orJava.Youdon'tneedany
experienceorskillasacomputerprogrammertobeaverysuccessfulHTMLauthor.
QDoyouneedtobeconnectedtotheInternetconstantlywhileyoucreateHTMLpages?
ANo.Infact,youdon'tneedanyInternetconnectionatallifyouonlywanttoproduceWebpages
forpublicationonaCDROM,Ziporfloppydisk,orlocalnetwork.

QuizQuestions
1.DefinethetermsInternet,Webpage,andWorldWideWeb.
2.HowmanyfileswouldyouneedtostoreonyourcomputertomakeaWebpagewithsometext
andtwoimagesonit?
3.CanyoucreateWebpageswithMicrosoftWordorWordPerfect?
Answers
1.TheInternetisthe"networkofnetworks"thatconnectsmillionsofcomputersaroundtheglobe.
AWebpageisatextdocumentthatusescommandsinaspeciallanguagecalledHTMLtoadd
formatting,graphicsandothermedia,andlinkstootherpages.
TheWorldWideWebisacollectivenameforalltheWebpagesontheInternet.
2.Atleastthreefiles:oneforthetext(whichincludestheHTMLcommands)andoneforeach
https://akmb7t5w56jcfgwf.onion.cab/books/sorted/Macmillan/Teach%20Yourself%20HTML%203.2%20in%2024%20Hours/html/ch01.htm

6/7

3/1/2016

TeachYourselfHTML3.2in24Hours

graphicsimage.Insomecases,youmightneedmorefilestoaddabackgroundpattern,sound,or
interactivefeaturestothepage.

3.Yes,orwithanyotherwordprocessoronanycomputer(aslongasthewordprocessorwillsave
"plaintext"or"ASCII"files).Notethatmanywordprocessorsalsonowallowyoutosavetextin
HTMLformat,andtheywillwritesomeoftheHTMLforyou.Chapter23willdiscussthemerits
ofthatfeature,butyoushouldavoidusingitwhileyou'relearningHTMLwiththisbook.Justsave
asplaintextinstead.

Activities
Attheendofeachchapterinthisbook,you'llfindsomesuggestionsforoptionalactivitiesto
reinforceandexpandwhatyoulearnedinthechapter.However,becauseyou'reundoubtedlyeager
togetstartedlearningHTML,let'sskiptheactivitiesrightnowanddiverightintoChapter2,
"CreatingaWebPage."

https://akmb7t5w56jcfgwf.onion.cab/books/sorted/Macmillan/Teach%20Yourself%20HTML%203.2%20in%2024%20Hours/html/ch01.htm

7/7