Interactive Media Center http://library.albany.

edu/imc/ 518 442-3608

IntroductiontoHTML/XHTML
HandoutCompanionto theInteractiveMediaCenters OnlineTutorial
ThisdocumentisthehandoutversionoftheInteractiveMediaCentersonlinetutorial IntroductiontoHTML/XHTML.Itmaybefoundat http://library.albany.edu/imc/html_tut/.

AboutHTML/XHTML
HTML(HyperTextMarkupLanguage)anditsmorerecentincarnation,XHTML (ExtensibleHyperTextMarkupLanguage)isthecentralcoreonwhichallWebpagesare built.Althoughtherearenewtypesoftechnologyandcodingoptions,includingPHP, ASP,XMLandothers,traditionalmarkuplanguageistheplacewhere"allthingsWeb" starts. SomeWebeditingsoftwarepublishersclaimthatitisnotnecessarytoknowHTMLif youusetheirprogramstobuildWebpages.However,thisisrarelythecase.Inalmost everyinstanceatleastsomeknowledgeofHTMLandXHTMLishelpful. InthistutorialwewillguideyouthroughthebasicsofwritingHTML/XHTMLcode.Itis importanttorealizethatthereisnobetterwaytolearnandunderstandthecodethanto actuallywriteanduseit.Thistutorialwillgetyoustartedonyourfirststepstoward becomingknowledgeableaboutthecode.

Technique
ManypeopletrytowriteWebpagecodeasiftheywerecreatingatermpaper.Theystart atthebeginningandcontinueonthroughthemiddletotheendinalinearfashion. HTML/XHTMLcodeconsistsoftwotypesoftags.Therearethecontainertagsandthe singleparttags,oftencalled"noncontainer"tags. Containertagshaveaopeningpartandaclosingpartwiththe"stuff"thatthetagcontrols inside.Anexampleisthetagthatcreatesboldtext,<strong></strong>.<strong>isthe openingpartand</strong>istheclosingpart. Ifwewriteacodesnippetitmightlooklikethis,"<strong>Thisisbold</strong>"and youcanseetheboldtextinbetweenthetagparts. Anexampleofasingleparttagisthelinebreak,<br/>whichmerelystopsalineoftext ataspecificpoint.Thisisusedwherealinemustendafteraparticularword.
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

InteractiveMediaCenter http://library.albany.edu/imc/

BecauseWebpageswillhavelotsofcode,tryingtorememberwhichtaghasbeen openedorclosedcanbeextremelydifficult.Thebesttechniqueforwritingcodeisto makeboththeopeningandclosingpartsatthesametime,andTHENinsertthematerial betweenthetags.Thispreventstheproblemsthatarisewhenatagisaccidentallyleft unclosedandisthetechniquethatwillbeusedinthistutorial. Singleparttagscanbeinsertedasrequiredanytime.

Tools
WritingHTMLandXHTMLcodecanbedonesimplewordprocessor.Butitisimportant tonotetheaveragecodewriteshouldneveruseaprocessorsuchasWord,WordPerfect, OpenOffice,orsimilar.These"highend"wordprocessorsaretoosmartandwilltryto inserttheirownformattingcodes. Thebestsoftwaretouseisalsothemostbasic.NotePadisaperfectlysuitabletoolfor writingHTML.SomeprogramsthatarespecificallydesignedtocreateWebpages,such asDreamweaver,havespecialHTMLwritingfunctionsthatallowyoutocreatestraight code. TherearealsoprogramssuchasHTMLKitthatfunctionas"codeinsertion" programswheretheuserdoesn'tnecessarilywritethecode,butratherinstructsthe programtoinsertblocksofHTMLorXHTML.Eventhoughtheseprogramsmake writingcodeeasier,itisstillnecessarytoknowthecode. InthistutorialwesuggestthatyouuseNotePadorasimilarprogram.

Webvs.Print
Weknowthattryingtodothetasksandfollowtheexamplesonlineatthesametimemay bedifficult.Wehaveaprintedversionof thistutorialthatyoumaydownloadhere.You maythenreadprintedversionandperformthestepsonyourcomputer.

GettingStarted
TogetstartedwithyouWebprojectyouneedtosetup yoursitewiththeproperstructure.Sitestructureisvery simple.Yourprojecthasa"rootfolder"thatcontainsall ofthefilesassociatedwiththesite.Insidetherootfolder (which,bytheway,canhaveanynameyouwish,it doesn'thavetobecalled"root")willbesubfoldersfor specifictypesoffiles.WhiletheHTMLWebpageswill be"loose"intherootfolder,alltheimageswillbeinan imagefolder,PDFfilesinaPDFfolder,andsoon.The diagramontherightillustratesastandardWebsite structurewiththreeHTMLpagesandtwosubfolders.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

InteractiveMediaCenter http://library.albany.edu/imc/

Oneyouhaveyoursitesetuponyourcomputerwitharootfolderandthenecessarysub foldersyoucanstarttobuildyourfirstWebpage.Thiswillprobablybeyourhomepage. Unlessinstructedotherwise,yourhomepagewillhaveoneofthesenames: index.htm index.html default.htm default.html TheexactnamewillbespecifiedbyyourWebmastermaintainingthehostserverfor yoursite.MostWebhostingservershaveahierarchyofnames.Whenasitevisitortypes intohisorherbrowsertheURLofaWebsite,thebrowserisdirectedtothehostserver. Thehostserverautomaticallylooksforthenameofthehomepagebasedontheorderof thelist,andwhenitisfounditsendsthepageandallofitsassociatedfilestothevisitor's computerwherethebrowserassemblesitonthescreen. Iftheserverdoesn'tfindthepreferredhomepagenameinthecollectionofHTMLfilesit automaticallylooksforthesecondfilenameinthehierarchy.Ifthatpageisn'tfoundit looksforthethirdpagename,andsoon.Itishelpfultogiveryourhomepagethe preferredhomepagenameonyourhostserversothatthetimelosttothesearchprocess isreduced. OpenanewdocumentwithNotePad(orwhicheverprogramyoudecidetouse)andthen saveitinyourrootfolderwithoneofthehomepagenamesnotedabove. NOTE:ToseeashortFlashvideoofhowthesenextstepsareperformed inNotePad,byvisiting http://library.albany.edu/imc/html_tut/htmltutorial1.htm.

SettingUptheBasicCode
AWebpageconsistsoftwoparts,theheadandthebody.Theheadcontainsinformation aboutthepage,suchasmetatags,whenitwasmade,andthespecificationsofthecode itself.Thebodycontainsthematerialthatisseenwhenthepageisviewed.Thedatain theheadisnotvisible,althoughitmayspecifyhowthe"stuff"inthebodyisdisplayed. Allthetags,includingtheheadandbodytags,arelocatedinsidewhatcanbecalledthe "ultimatecontainertags,"<html></html>,whichtellthebrowserthateverythinginside themisforaWeb page. StartbytypingtheopeningandclosingHTML tags<html></html>asshownintheillustration ontheright. <html> </html>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

InteractiveMediaCenter http://library.albany.edu/imc/

Nowaddtheopeningandclosingtagsforthe headoftheHTMLpagesothatthecodelooks liketheexampleontheright.

<html> <head> </head> </html>

Sofar,sogood.Nowaddthebodytag. Savethefile.

<html> <head> </head> <body> </body> </html>

NowaddsometextintoyourWebpagesothat youhavesomethingtoseewhenyoutestit.It mustbetypedinthebody,betweentheopening andclosingbodytags.

<html> <head> </head> <body> ThisismyfirstWebpage! </body> </html>

NowyoucanstartyourWebbrowser,InternetExplorer,Firefox,Mozilla,Safari,Opera, orwhateveryourfavoriteis.OpenyournewWebpageandviewthefile.Inmost browsersyouwillclickFile>Open(orOpenFile)>thennavigatetoyoursavedWeb pageandclickOK. Theillustrationontherightshowswhat yourpageshouldlooklike.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

InteractiveMediaCenter http://library.albany.edu/imc/

NowyoucanaddsomedatatotheheadpartoftheWebpagethatwillbehelpfultoyour visitors. Insidetheheadtags,createatitletagandtypeina titleforyourpage.Titlesarenotnamesofthefiles. Rather,theyappearinthetopbarofabrowserand helpidentifytothevisitorwhichpageisbeing viewed.Theymayalsobeusedbysearchengines todeterminewhatapageisabout. Saveandviewyourpageagain.Youwillseeyour page'stitleattheverytop ofthebrowser. <html> <head> <title>MyWebPage</title> </head> <body> ThisismyfirstWebpage! </body> </html>

NOTE:Itisn'tnecessarytofollowtheFile>Opensequenceeverytimeyou viewasavedpage.Justmakesureyourpageissavedthenclickthe RefreshorReloadbutton(dependingonwhichbrowseryouareusing.

AddingandFormattingText
InthisnextseriesofstepsyouwilldiscoverhowtoaddnexttoyourWebpageand formatforappearance. Youwillstartbyaddingaparagraphtagtothe bodyofyourWebpage.Thecodeisillustratedon theright. ParagraphsareoneoftheelementsthatHTMLis designedtoidentify.Noticethatparagraphsare specifiedwiththeptag,<p></p>. NOTE:Whatisthattext?Thetext illustratedintheexampleontherightis oftencalled"LoremIpsum"fromthe firsttwowordsinthisoftenquoted sample.Itisapieceofclassical literatureinLatinthatisregularlyused byprinters,graphicartists,andWeb designerswhen"dummy"textis neededtoshowwhatadesign,suchas aWebpageorprintedbrochure,may looklikewhencompleted.Becausethe appearanceofthetextmimicsEnglish, andbecausemostpeoplecannotread Latin,itisausefultoolforshowinghow adesignwilllookwhileatthesame timeavoidingthenaturaltenancyto
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

<html> <head> <title>MyWebPage</title> </head> <body> <p>Loremipsumdolorsitamet, consecteturadipisicingelit,sed doeiusmodtemporincididuntut laboreetdoloremagnaaliqua. Utenimadminimveniam,quis nostrudexercitationullamco laborisnisiutaliquipexea commodoconsequat.Duisaute iruredolorinreprehenderitin voluptatevelitessecillum doloreeufugiatnullapariatur. Excepteursintoccaecat cupidatatnonproident,suntin culpaquiofficiadeseruntmollit animidestlaborum.</p> </body> </html>

InteractiveMediaCenter http://library.albany.edu/imc/

readtextratherthanconcentrateonoverallappearanceandusability.An excellentsourceforLoremIpsumistheWebsitewww.lipsum.comwhere youcanlearnallaboutitandcopyexamples.Forthistutorialyoudonot havetouseLoremIpsum.Youcantypeanythingyouwish. Nodoubtbynowyouhavenoticedapatterntothe waycontainertagsareformed.Theclosingpartof acontainertagalwayshasaforwardleaningslash, /,toit.Thisslashiswhattellsthebrowserthatthe useofthetaghasendedandisclosed. Let'sformatyourtextalittlebitbyaddingsome simpleboldtothefirstfewwordsofthe paragraph.Insertthestrongtagasshownonthe right.Howwillthislookwhenviewedina browser? Savethefileandtestitwithyour browser. Noticethatonlythewordsinsidethestrongtag showupasbold.Thisishowcontainertagswork. <html> <head> <title>MyWebPage</title> </head> <body> <p><strong>Loremipsum dolor</strong>sitamet, consecteturadipisicingelit,sed doeiusmodtemporincididuntut laboreetdoloremagnaaliqua. Utenimadminimveniam,quis nostrudexercitationullamco laborisnisiutaliquipexea commodoconsequat.</p> </body> </html>

Anothercontainertagistheemphasistagthatis usedtodisplaytextasitalics.Thattagis <em></em>.Tryapplyingittoasectionoftext otherthanthepartyouboldedearlier.The exampleontherightwillhowyouhowthismight bedone.YoucanseearealWebpageusingthe emphasistagby clickinghere.

<html> <head> <title>MyWebPage</title> </head> <body> <p><strong>Loremipsum dolor</strong>sitamet, consectetur<em>adipisicing elit</em>,seddoeiusmod temporincididuntutlaboreet doloremagnaaliqua.Utenim adminimveniam,quisnostrud exercitationullamcolaborisnisi utaliquipexeacommodo consequat.</p> </body> </html>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

InteractiveMediaCenter http://library.albany.edu/imc/

NestingTags
Nestingtagsreferstotheorderinwhichtheopeningandclosingpartsoftagsappear whenmultipletagsareappliedtoasinglesegmentoftextoranotherobject.Forinstance, aportionoftextcanbebothboldandinitalics.Propernestingofthestrongandemphasis tagswouldlooklikethis: <strong><em>Thisisboldanditalics</em></strong> Thestrongtagisonthe"outside"whiletheemphasistagisonthe"inside"andthetextis inthemiddle. Youcouldalsomakethetagsnestthusly: <em><strong>Thisisboldanditalics</strong></em> Improperlynestedtagswillnothavetheoutsideinsidemiddlesequence.Anexampleof animproperlynestedsetoftagsis: <strong><em>Thisisboldanditalics</strong></em> Inthe"olddays"oftheWebimproperlynestedtagsusuallydidnotmakemuch difference.But,astheWorldWideWebevolveditbecameincreasinglyimportantfor browserstoadheretocommonstandards. Today'sXHTMLhasbeendescribedasamorestrictversionofHTML.Inmanyways thatiscorrect.XHTMLrulesspecifypropernesting,tagwriting,andotherimportant points.Modernbrowserscomplywiththeserulesclosely.Ifyourcodedoesnotmeetthe rulesofXHTML,itmaynotdisplaycorrectlyonamonitor. TofindoutmoreaboutHTMLandXHTMLrules,visittheWorldWideWeb Consortiumatwww.w3x.org.Thisistheorganizationthatsetsthespecificationofall thingsassociatedwiththeWeb.

AdvancedTextFormatting
Inadditiontocreatingboldanditalicizedtext,you canalsouseHTMLtocontroltheappearancein moreadvancedways.Includedistheabilityto displaytextincolor,controlthefont,andsetthetext size. Fontpresentationiscontrolledusingthefonttag, <font></font>.Intheexampleontheright,fontsize isspecifiedat3.Fontsizesarespecified1through7 <html> <head> <title>MyWebPage</title> </head> <body> <p><fontsize="3">Thistextis fontsize3.</font></p> </body> </html>
InteractiveMediaCenter http://library.albany.edu/imc/

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

with1asthesmallestand7thelargest. Size3isthedefaultsize.Thatisthesizethatis"normal"formostbrowsersundermost circumstances. Youcanexperimentwiththefontsizesbychanging thevalueusing1through7.Thelist belowshowswhatthesesizeslooksimilartowhatisshownbelow.Remember,actual fontsizewilldependonmanyfactors,includingthesizeofthemonitorscreen.

Fontsize1

Fontsize2

Fontsize3

Fontsize4

Font size5

Fontsize6

Fontsize7
Itisalsopossibletospecifyfontsizesrelativetothesettingsinthebrowser.Thisisdone usingfontsizeattributesthatareplacedwith"+"or"".Anexampleisontherightwhere thesize+2isused.Thismeansthatthefontshouldbedisplayed2sizeslargerthanthe browser'sdefaultsize. AccordingtotherulesforHTML,thesefontsizes shouldoverridethesettingsthataresetina visitor'sbrowser.Inotherwords,ifavisitorto yourWebpagehascustomizedhisorherfont sizesinthebrowser,theuseofthesizeattributein thefonttagwill"takeover"andthetextshould appearasyou,thepagebuilder,desire.The exampleontherightillustrateshowafont+size attributecouldbeapplied. <html> <head> <title>MyWebPage</title> </head> <body> <p><fontsize="+2">Thistextis fontsize6.</font></p> </body> </html>

So,whatisa"+"ora""exactly?Youcan'ttell!Becauseeachbrowsercouldhaveany fontsizesetfordefault,itisnotpossibletodetermineexactlywhatthetextwilllooklike becauseitcanvaryfrommachinetomachine.Theexamplesbelowwillgiveyousome idea,buttoseehowtheappearanceyoumaywishtovisitthispagelaterwithanother browsersettingofanothermachine.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

InteractiveMediaCenter http://library.albany.edu/imc/

Thisisfontsize+1

Thisisfontsize+2

Thisisfontsize+3

Thisisfontsize+4 Thisisfontsize+5 Thisisfontsize+6 Thisisfontsize+7

Thisisfontsize 1
Thisisfontsize2 Thisisfontsize3 Thisisfontsize4 Thisisfontsize5 Thisisfontsize6 Thisisfontsize6

Itispossiblethatseveraloftheaboveexampleslookidentical.Thisisbecausesome browserswilllimitjusthowlargeorsmallfontcanbedisplayed.Thereisreallynopoint increatingtextthatisunreadable,whichcanhappenifitistoobigortootiny. Anotherwaytoformattextisbyusingcolor.Colorcanbespecifiedbyusingnames, suchasred,blue,orForestGreen.TheycanalsobedefinedusingtheirRGB(Red,Green, Blue)values.ThemostcommonwayforcolorstobespecifiedontheWebisbytheir hexadecimalvalues.Examplesofeachmethodarebelow. <fontcolor="red">Thisisredspecifiedasacolorname.</font>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

InteractiveMediaCenter http://library.albany.edu/imc/

<fontcolor="255,0,0">ThisisredspecifiedasanRGBvalue.</font> <fontcolor="ff0000">Thisisredspecifiedinhexadecimal.</font>

ColorandtheWeb
ColorplaysanimportantpartofWebpagedesign.Itcanbeusedfordecorativepurposes, suchastomakesomethinglookstylishorflashy,oritcanbeusedtoindicateanactionor function.Forinstance,thelinksonthesepagesareblue,andthatmakesthemeasierto identify. Colorcanbeappliedtotext,backgrounds,andcertainkindsofborders.Itisimportantto understandboththebenefitsandpitfallsthatcolorcanpresent.WhileaWebpagewitha blackbackgroundandgraylettersmaylooksophisticated,itwillbedifficulttoread. ThereareseveralexcellenttoolsontheWebtohelpyouobtainabetterunderstandingof color.Somelinksare:
ColorandtheWeb (http://library.albany.edu/imc/webcolor/index.htm),the

InteractiveMediaCenter'sonlinetutorial. BrowserSafeColorChart(http://library.albany.edu/imc/webcolors.htm),online chartofWebsafecolorsfromtheInteractiveMediaCenter. ColorNamesChart(http://www.w3schools.com/html/html_colornames.asp), onlinechartfromtheW3Schools. TheBrowserSafeColorPallet(http://www.lynda.com/hex.asp#),onlineguide fromLyndaWeinman.

Headings
HeadingsoneoftheobjectsonaWebpagethatHTMLandXHTMLareintendedto identify.Headingstagsthatareusedtospecifyimportanceandaredefinedbyusingthe "h"tag.Therearesixheadingtagsrangingfrom1to6with 1beingthemostimportant and6beingtheleastimportant. Imaginethatyouaremakingatraditionaloutlineforapaperorarticleyouarewriting.It mightlooksomethinglikethis: I.Introduction A.Welcome II.MainMessage A.Part1 WhatIdidonmysummervacation.
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

10

InteractiveMediaCenter http://library.albany.edu/imc/

1.Gettingtotheairport 2.Flyingontheairplane. a.VisitingAlaska. b.Seeingabear. 3.Flyinghome. B.Summingmyvacation. III.Conclusion ThemostimportantpartsoftheoutlineareinRomannumerals,thesecondmost importantpartsarenotedwithcapitalizedletters,andsoon.Headingsfollowasimilar pattern.Themostimportanth1wouldbecomparabletotheRomannumerals,theh2 wouldbesecondmostimportantasisthecapitalizedletters.Thiscontinuesondown throughtheh6tag. Headingtagsarecontainertags,andtheirformatisillustratedbelow. <h1>ThisisheadingH1</h1> Whentheh1tagisusedinaWebpage,thecode willresembletheexampleontheright. <html> <head> <title>MyWebPage</title> </head> <body> <h1>Thisisanexampleofthe h1tag.</h1> </body> </html>

ItasimpleWebpagetheh1tagwould resembletheillustrationontheright.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

11

InteractiveMediaCenter http://library.albany.edu/imc/

Lists
ListsarealsoobjectsthatHTMLandXHTMLareintendedtodefine.Thecodeallows youtospecifytwotypesoflists,orderedlistsandunorderedlists.Theprimarydifference betweenthetypesisthattheorderedlistsindicateimportanceandunorderedlistsonly indicatethatthedataisalist,noimportanceisintended. Thelisttagsarecontainertags,buttheyeachhavetwoparts.Partoneindicateswhether thelistisorderedorunordered.Parttwoistheiteminthelistitself.Belowisanexample ofanorderedlist. 1. Dinnerat8:00pm. 2. Lunchatnoon. 3. Snacksat11:00am. Thislistindicatesthatthemostimportantitemisdinnerat8:00pm,thesecondmost importantislunchatnoon,andtheleastimportantitemissnacksat11:00am.Thecode snippetforthislistisshownbelow. <ol> <li>Dinnerat8:00pm.</li> <li>Lunchatnoon.</li> <li>Snacksat11:00am.</li> </ol> Noticethateachitemisinsidethelistitemtag,<li></li>andthatthewholesetoflist itemsiswithintheorderedlisttag<ol></ol>. Anexampleofanorderedlistisbelow.
Apples Oranges grapes

Thisunorderedlistdoesnotindicatewhichfruitismostimportant.Thecodesnippedfor thislistshownbelow. <ul> <li>Apples</li> <li>Oranges</li> <li>grapes</li> </ul> Theunorderedlisttagis<ul></ul>,andaswiththeorderedlist,eachitemiswithinthe listitemtag,<li></li>.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

12

InteractiveMediaCenter http://library.albany.edu/imc/

Manypeoplewillusetheorderedandunorderedlisttagsforpresentationalpurposes.In otherwords,whentheyarenotinterestedinactuallists,butwantagroupofitemswith bulletsinfrontofthemtheywillusetheunorderedlisttag.Whentheywantnumbers insteadofbulletstheywillusetheorderedlist.ThisisnotgoodWebpractice.Listtags arespecificallyintendedtospecifylistsandnothowsomethinglooks.Thismayseemlike atrivialpoint,buttherearesituations(suchaswithsearchengines)thatusingalisttag incorrectlycancauseproblems. Intheexamplesabove,iftheorderedlisttagisusedinappropriately,thecodewouldbe tellingasearchenginethatorangesarethemostimportantthingonthelistwhenthatis perhapsnotthemessagethatwasdesired.Itmaybethatthepagedesignermerelywanted asetoflineswithnumbersinfrontofeachandhadnointentionofindicatedthe importanceoforanges.Thiscouldcausethepagetocomeupunsatisfactorilywhena searchisperformed.

Links
LinksarethemostimportantpartoftheWeb.Infact,thewholepremiseoftheWorld WideWebistheabilitytolinkfromonedocumenttoanother.Now,ofcourse,linkslead fromonesitetoanother,andtospecificpointswithinasite. Therearetwotypesoflinks,absoluteandrelative.Alllinktagsarecontainertags. Thewaytothinkofanabsolutetagisthatittellsexactlywhereabrowsershouldgoby followingallthenecessarypaths.TheyareusedwhenyoulinkfromoneWebsiteto another.Relativelinks(sometimescalled"locallinks")justtelltheshortcuts. Let'ssaythatwewanttomakeanabsolutelinktotheUniversityatAlbany'sWebsite. ThelinkisinsidetheAtagandwouldlooklikethis: <ahref="http://www.albany.edu">LinktoUAlbany</a> Roughlytranslatedthelinksaysthatthebrowsershouldusehypertexttransferprotocol togototheWorldWideWebandfindtheWebsiteofcalled"albany.edu." WewantedtofindthehomepageofaspecificdepartmentontheUniversity'sWebsite. AnabsolutelinktotheCommunicationDepartment'shomepageis: <ahref="http://www.albany.edu/communication/index.html">Linktothe CommunicationDepartmenthomepage</a> Thislinksaysthatthebrowsershouldusehypertexttransferprotocoltogoontothe WorldWideWebandfindtheUniversity'sWebsite,thenfindtheCommunication Department'ssitewithintheUniversity'ssite,andfinallypresentthepagecalled "index.html."

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

13

InteractiveMediaCenter http://library.albany.edu/imc/

VisittheCommunicationDepartmentgoingtohttp://www.albany.edu/communication. Relativelinksleaveoutallthe"httpstuff."TheysaythatinsteadofgoingtotheWorld WideWebthebrowsershouldjuststay"intheneighborhood"andgetapage.Agood exampleisalinktothepreviouspageofthistutorial.Thisispage5,andlet'ssaythatyou wanttocreatealinktopagefor.Itwouldbe: <ahref="page4.html">PreviousPage</a> Thisrelativelinktellsthebrowsertogoto"page4.html"withoutgoing"out"totheWeb andcomingbackintotheUniversity'sWebsite. YoucanalsolinkinternallytoaWebpagebyusingtheanchortag.Theanchortag allowsyoutojumptoa pointonapage.Wehaveananchorcalled"top"installedonthis page.Thecodefortheanchorpointis: <aname="top"></a> Thelinktoitis: <ahref="#top">Gotothetopofthispage</a> Theexampleontherightshowshowthismight becodedintoaWeb page. Note:Ananchortagalwayshasa "#"atthebeginning. <html> <head> <title>MyWebPage</title> </head> <body> <aname="top"></a> <p>WelcometomyWebpage. Youcangotothetopofthe pageby<ahref="#top">by clickinghere</a></p> </body> </html>

Youcanaddincludeananchorpointinanabsoluteorrelativelink.Therelativelinkto thispage'stopanchorpointis: <ahref="page5.html#top">TopofPage5</a>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

14

InteractiveMediaCenter http://library.albany.edu/imc/

LayoutandTables
ThelayoutofaWebpageisimportant.Placingcomponents,suchastext,images,and headingsiscriticaltonotonlytheappearanceofapage,butalsohowwellthevisitor understandstheinformationpresented.Apoorlayoutwilllookbad,anditwillalsomake theinformationonthepagehardtofindandunderstand. ForinformationonhowtolayoutaWebpage,visitoutour InteractiveMediaCenter WebDesignonlinetutorial athttp://library.albany.edu/imc/webdesign/. Webpages"want"tobedisplayedwithallcomponentsalignedverticallyontheleftside ofthepage.Centerandalignrightattributescanbeappliedtomanyobjects.Beteven thesealignmentsdonotallowforcarefulandspecificplacementofpagecomponents. TheillustrationontherightshowsaWebpagewithno formattingofanykind.

Usingattributestoalignobjectleft,center,orrightcan helpestablishthepositionofobjectsonaWebpage. Anexampleisontheright.Wewillbelearningabout positionattributesandthecentertagindetaillaterin thistutorial. Tablesarethesolutiontotheproblemsthatcausedby thedefaultleftalignmentofstandardHTMLand XHTMLcode.Originallyintendedtopresentdatain "tabular"form,thatiscolumnsandrows,tablesquickly becametheWebpagedesigner's"bestfriend"by allowingaccurateplacementobjectsonapage.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

15

InteractiveMediaCenter http://library.albany.edu/imc/

OntherightisanexampleofaWeb pagethatusesatabletocontrol placementofobjects.Thetableis invisible.

Ontherightisthesamepage,butthis timethetablesbordersareshown.The table'sbordersareeasilyseenandyou willbeabletoobservehowitisusedto positionobjectsonthepage. Thetabletagisacontainertagwiththree mainparts.Tablesconsistofrowsand cells,andthereare tagsforeach.Tables musthaveallthetagswritteninthe properorderforthemtowork.Thetags are:
Thetabletag<table></table> Thetablerowtag <tr></tr> Thetablecelltag<td></td>

Belowisanexampleofasimpletable.

Thistablehasthreerowsandthreecolumns.Tobeginbuildingthetablewewillstart withtheopeningandclosingtabletags. <table></table> Tomakeiteasiertoaddtherestofthetagswewillputtheopeningandclosingtabletags ontwolines. <table> </table>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

16

InteractiveMediaCenter http://library.albany.edu/imc/

Nowweaddthefirsttablerowtags. <table> <tr></tr> </table> Therowisnotcompleteuntilthethreetablecellsareadded. <table> <tr><td></td<td></td><td></td></tr> </table> Nowthetableisbuiltlikethis:

IfyouareusingNotepad,itisasimple"cutandpastejob"toinstalltheothertworows. <table> <tr><td></td<td></td><td></td></tr> <tr><td></td<td></td><td></td></tr> <tr><td></td<td></td><td></td></tr> </table> Nowthetablehasthisstructure:

Whereisthetable?Thetableisreallythere.Butwedidnotapplyanyattributestothe table,soalthoughitexists,itisinvisible.Tomakethetableappearanthescreen,we mustdefinehowitwilllook.Thefirststepwillbetoaddborders.Typein'border="1"' intotheopeningtabletagasshownbelow.Thiscreatestableborders1pixelthick. <tableborder="1"> <tr><td></td<td></td><td></td></tr> <tr><td></td<td></td><td></td></tr> <tr><td></td<td></td><td></td></tr> </table> The tableisnowvisible.Butitlooksverysmallbecausewehavenotappliedanysize attributes. Inaddition,thereisacuriousfeatureofHTMLandXHTMLthatwillcausethetableto lookodd.Unlessthereisanobjectofsomekindinatablecell,mostbrowserswillnot
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

17

InteractiveMediaCenter http://library.albany.edu/imc/

display thecellortheborderaroundit.Thiscancausesomepeculiareffects.Some browserswillnotshowthecell,otherswill.Inthetablebelowthereisanobjectinall cellsexceptthecenterone.Dependingonthebrowseryouareusing,youmayormaynot seethecentercellcorrectly. TextObject

TextObject

NOTE:Doyouseeacentercell,ordoyouseea"pillowlike"effect?Tryviewingthis pagewithanotherbrowser.Whatdoyouseethen? Objectsincellcanbetext,images,orevenothertables.Thesearecalled"nestedtables." Objectscanalsobespecialpiecesofcode.Themostcommonlyusedoneforthispurpose isthe"nonbreakingspace." Thenonbreakingspaceisatrueobjectthatisinvisible.Itisusedtocreateadditional spacinginlinesoftextandasinvisibleobjectsintablecellssothatthecellsarevisiblein allbrowsers.ThenonbreakingspaceisinstalledbytypingasimpleASCIIcodeintothe tablecell. Note:ASCIIcodesarenumericalrepresentationsofcharacters thatarefoundona keyboardandothercharactersforwhichtherearenokeys.IncomputersandtheWeb theyareusedtocauseacharactertodisplayonthescreenwheneitherthereisnokeyor itisnotdesirabletousetheactualkeystrokecharacter.SometimesASCIIcodesareused tohideemailaddressesfromWebrobotsthatcollecttheaddressesforspamming.Details andalistofASCIIcodescanbefoundatwww.asciitable.com. TheASCIIcodeforanonbreakingspaceis&nbsp.Byplacinganonbreakingspacein thecentertablecell,itwillappearcorrectlyontheWebpageasshownbelow. TextObject

TextObject

Aswiththepreviousexample,thiswilldependonyourbrowser.Insomeinstancesyou maynotseeanychangeatallbecausethecellwasalwaysproperlydisplayed.Using

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

18

InteractiveMediaCenter http://library.albany.edu/imc/

objectssuchasthenonbreakingspaceassuresthatyoutableswillalwaysappearonthe pageasyouintend. Wecanaddnonbreakingspacestothetableonwhichwehavebeenworkingsothatthe codelookslikethis: <tableborder="1"> <tr><td>&nbsp</td<td>&nbsp</td><td>&nbsp</td></tr> <tr><td>&nbsp</td<td>&nbsp</td><td>&nbsp</td></tr> <tr><td>&nbsp</td<td>&nbsp</td><td>&nbsp</td></tr> </table> Tocause thetabletobedisplayedlargerwewillgiveitawidthattributeof300pixels. Theexamplebelowshowshowtodothis. <tablewidth="300"border="1"> <tr><td>&nbsp</td<td>&nbsp</td><td>&nbsp</td></tr> <tr><td>&nbsp</td<td>&nbsp</td><td>&nbsp</td></tr> <tr><td>&nbsp</td<td>&nbsp</td><td>&nbsp</td></tr> </table> The"300"referstothewidthofthetableinpixels.Unlessspecifiedotherwise,the defaultmeasurementsarealwaysinpixels.

AdvancedTableFormatting
Youarenotlimitedtoformattingatablebyspecifyingonlyitssizeandborders.There aremanyoptionsthatyoucanusetomakeatableappearthewayyouwantitto. Cellpaddingandcellspacingareimportantattributesthatcanbeassignedtoatable.Cell paddingisthespacebetweenanobjectinatablecellandthesidesofthetablecell. Belowaretwoexamplesthatdemonstratewhatthismeans. Thereisatablewithnocellpadding

Thereisatablewithacellpadding attributeof10pixels. Noticethatinthesecondexamplethereismorespacearoundthetext.Itiseasierread andhasamorepleasingappearance.Thepaddingattributeisplacedintheopeningtable tag.Thecodeforthetableis:

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

19

InteractiveMediaCenter http://library.albany.edu/imc/

<tablewidth="284"border="1"cellspacing="0"cellpadding="10"> <tr> <tdalign="center">Thereisatablewithacellpaddingattributeof10 pixels.</td> </tr> </table> Cellspacingreferstothespacebetweencells.Hereisanexampleofatablewithoutcell spacing:

Nowhereisthesametablewith10pixelsofcellspacing.

Whilethislookslikethebordershaveincreasedinsize,inactualitytheyhavenot.Tosee whatthickerborderslooklikeinatablewithoutcellspacing,examinethesamplebelow:

Tomakethedifferencebetweencellspacingandbordersasclearaspossible,hereisthe sametablewith10pixelscellspacingand5pixelsforthetableborders.

Usingdifferentcombinationsofcellpadding,cellspacing,andbordersallowsyouto controltheappearanceofyourtablessothattheycanbeasusefulaspossible.Hereisa tablethatcombinesallthreeattributes:

CellPadding8 pixels Cellspacingis

Tablebordersare 4pixels Thetableis300

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

20

InteractiveMediaCenter http://library.albany.edu/imc/

10pixels

pixelswide

Thecodeforthistableis: <tablewidth="300"border="4"cellspacing="10"cellpadding="8"> <tr> <td>CellPadding8pixels</td> <td>Tablebordersare4pixels</td> </tr> <tr> <td>Cellspacingis10pixels</td> <td>Thetableis300pixelswide</td> </tr> </table> Note:The3deffectofstandardtablebordersisanoldfashionedstyle. ManyWebpagebuilderstodaywanttousetableborders,butnotthe oldfashioned"pictureframe"sthatweseeabove.Itispossibletocreate bordersinseveralstylesusingCascadingStyleSheets.But,theuseof CSSisbeyondthescopeofthistutorial.Youmaywishtovisitour CascadingStyleSheetonlinetutorial at http://library.albany.edu/csstut/formoreinformation.Examplesof CSSbordersareontheright. Colorisaddedtotablesinthreedifferentways: 1. Tablebackgroundcolor 2. Cellbackgroundcolor 3. Bordercolor Belowisatablewiththebackgroundcolorof#993300.Ithasstandard1pixelborders.

Thecodeforthetableis: <tablewidth="300"border="1"cellpadding="0"cellspacing="0" bgcolor="#993300"> <tr> <td>&nbsp</td> <td>&nbsp</td> </tr> <tr>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

21

InteractiveMediaCenter http://library.albany.edu/imc/

<td>&nbsp</td> <td>&nbsp</td> </tr> </table> Becausethetablebackgroundcolorisanattributethataffectstheentiretable,thecoloris specifiedwithintheopeningpartofthetabletag. Hereisatableinwhichonecellhasthebackgroundcolorof#993366:

Thecodeforthattableis: <tablewidth="300"border="1"cellpadding="0"cellspacing="0"> <tr> <tdbgcolor="#993366">&nbsp</td> <td>&nbsp</td> </tr> <tr> <td>&nbsp</td> <td>&nbsp</td> </tr> </table> Noticethatthebackgroundcolorforthetableisintheopeningpartofthetablecelltag. Wecancreateatablethathasabackgroundcolorandacellthathasadifferent backgroundcolor,suchas:

Examinethecodeforthistableclosely: tablewidth="300"border="1"cellpadding="0"cellspacing="0" bgcolor="#993300"> <tr> <tdbgcolor="#993366">&nbsp</td> <td>&nbsp</td> </tr> <tr> <td>&nbsp</td> <td>&nbsp</td> </tr> </table>
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

22

InteractiveMediaCenter http://library.albany.edu/imc/

Youwillseethatthebackgroundcolorisappliedtotheentiretable,butthebackground colorisspecifiedforonlyonecell.Thisisaveryimportantconceptthatcanbefurther illustratedwiththetablebelow.

Thecodeforthistableis: <tablewidth="300"border="1"cellpadding="0"cellspacing="0" bgcolor="#993300"> <tr> <tdbgcolor="#993366">&nbsp</td> <td>&nbsp</td> </tr> <tr> <tdbgcolor="#FFCC33">&nbsp</td> <tdbgcolor="#0000FF">&nbsp</td> </tr> </table> Threeofthecellshavecolorsspecified,onecelldoesnot.Thecellwithoutacolorallows thetablebackgroundcolortoshowthrough.Thebackgroundcellcolors,ontheother hand,havepriorityoverthetablebackgroundcolor.Thus,eventhoughthetable backgroundcolorisspecified,thecellbackgroundcolorsaredisplayed!Theexample belowillustratesthisabitbetter. CellBackground Color CellBackground Color TableBackground Color CellBackgroundColor

Confused?Thisisaconceptthatmaynotbeeasytograspatfirst.Thefilehere, http://library.albany.edu/imc/html_tut/table_demo.txt,isabasicNotepaddocument withthecodenecessarytocreateatable.Youcanopenthisfile,editit,andthensaveit withthefilenameextension .html.Tryeditingthetablewithdifferentbackgroundcolors andborderstoseewhathappens. Backgroundimagesfollowthesamepriorityrulesascolor.Bothtablesandtablecells canhavebackgroundimages.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

23

InteractiveMediaCenter http://library.albany.edu/imc/

Here'satablewithaclockphotographforabackground:

Noticethattheimagerepeats.Thisrepetitioniscalled"tiling"becausetheplacementof theimageissimilartohowtilesarelaid. Belowisasimilartablewithtworowsandtwocolumns.

Nowoneofthecellshasatoyduckinthebackground.Italsotiles,butonlyinsidethe cell.Thecodeforthistableis: <tablewidth="267"border="0"cellpadding="0"cellspacing="0" background="images/clock_60.jpg"> <tr> <tdwidth="171"background="images/duck_small.jpg">&nbsp</td> <tdwidth="96"></td> </tr> <tr> <td>&nbsp</td> <td>&nbsp</td> </tr> </table> Thebackgroundsinboththetableandthetablecellareaddedasattributes. Thelastpointabouttablesthatmustbetouchedonhereisthattherearefouralignment attributesfortables.Theyaredefault,left,center,andright.Thedefaultcausesthetable tobealignedtotheleftsideofthepageunlessthevisitor'sbrowsercausesitthetableto bealignedotherwise.Leftalignmentmandatesthetableappearontotheleftsideofthe page.Centerspecifiescentering.Rightcausesthetabletobealignedtotherightsideof thepage.Theseattributesareplacedintheopeningpartofthetabletag.Thesyntaxis: <tablealign="left"> <tablealign="center"> <tablealign="right">
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

24

InteractiveMediaCenter http://library.albany.edu/imc/

Defaultalignmentdoesnotrequireanattribute.

Images
ImagesareimportantpartsofWebpages.HTMLandXHTMLallowsyoutoplace imagesinaWebpageandassignattributestocontrolsizeandplacement.Inthisnext sectionyouwilllearnaboutimageandimagecoding. Theimagesourcetagisasingleparttag.Itis: <imgsrc="nameofyouimage.gif"/> Here'san exampleofsimpleimageplacement:

Thecodefortheimageis: <imgsrc="images/dogonhat.jpg"alt=""width="205"height="170"/> Theinformationin thecodetellsusthattheimagenameis"dogonhat.jpg"andthatitis locatedintheimagesfolderoftheWebsite. Thecodealsospecifiesthatthesizeofthe imageis205pixelswideand170pixelshigh. NOTE:TherearethreeimagefiletypesthatcanbeusedontheWeb. TheyareJPG(JointPhotographersExperimentGroup),GIF(Graphics InterchangeFormat),andPNG(PortableNetworksGraphics).Formore informationaboutthesethreetypesoffileformatsvisitAppendix1atthe endofthisdocument. Imagedimensionsarespecifiedasattributes.Specifyingdimensionsassuresthatthe browserwilldisplaytheimageasyouwish.Inaddition,youcanusethedimension attributestomanipulateanimagetoyouradvantage.Forinstance,belowisaverysmall imagedisplayedinits"natural"size,2pixelswideby2pixelshigh:

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

25

InteractiveMediaCenter http://library.albany.edu/imc/

Canyouseeit?Theimageissosmallthatonsomemonitorsitisnearlyinvisible. However,wecancauseittobedisplayedmuchlargerbychangingitsdimensions.Here itis40pixelswideby40pixelshigh:

Thecodeforimageis: <imgsrc="images/orangedot.gif"alt="Orangedot40x40"width="40" height="40"/> Becauseinbothinstancesthesameimageisbeingdisplayed,thereisnodelaycausedby multipledownloadsorbyhavingalargerfilesize. Hereisthesameorangedotdisplayedasaline:

Thecodeis: <imgsrc="images/orangedot.gif"alt="Orangedotasline"width="300" height="4"border="0"/> Note:Changinganimage'sdimensionsintheHTMLcodedoesnotactuallychangethe imageitself.Youareonlytellingthebrowserhowtodisplaytheimage.Causingasmall imagetobedisplayedlargedoesnotincreasefilesizeordownloadtime.Conversely, givealargeimagesmallerdimensionsdoesnotimprovedownloadtimesforfilesize. Bewarewhenmanipulatingphotographs,certaintypesofdrawings,andanyimagethat hasfinelines,fades,feathering,orothersubtleeffects.Makingasmallimagetobe displayedlargerthanit'sdefaultsizerequires"spreading"thedata(intheformofpixels) oftheimageoverabroaderarea.Theresultwillbelossofdetailandpixillation.

Ontherightisaphotographthatisdisplayedatitsdefault dimensions,150pixelswideby100pixelshigh.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

26

InteractiveMediaCenter http://library.albany.edu/imc/

Hereisthesame photographwiththe dimensionattributes setto400pixelswide by267pixelshigh. Notethattheimageis highlypixilated.

Imagescanhavethealignmentattributesofleftandright.Thesyntaxforthealignment is: <imgsrc="yourimage.gif"alt="align="left"/> <imgsrc="yourimage.gif"alt="align="right"/>

Alttagsarespecialattributesthatareappliedtoimagestoexplainwhattheimageisand whatitisabout.Individualswhoarevisuallyimpairedoftenrelyuponascreenreading Webbrowserto"read"thetextofaWebpagetothemoutloud.Animage'salttagwillbe readbythebrowser.Thismakesinimperativethatalttagswerewellformed. Many searchenginesalsousealttagsasancomponentintheiralgorithmsthatcalculate resultplacement.Aswithscreenreadingbrowsers,searchenginesrelyonproperly writtenalttags. Belowisanimagethathasanalttagappliedtoit.

Thealttagforthisimageis"Green1940FordDeluxehotrodautomobile"anditthe entireimagetagis:
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

27

InteractiveMediaCenter http://library.albany.edu/imc/

<imgsrc="images/green40.jpg"alt="Green1940FordDeluxehotrod automobile"width="300"height="261"/>

PuttingItAllTogether
InthissectionofthetutorialyouwillassembleasimpleWebpage.Amongthetasksyou willperformwillbeplacinganimage,placingandformattingtext,creatingatable,and assigningattributestovariousobjects. Theillustrationontheright showswhatthepage shouldlooklikewhen completed.

Thinkingbacktothebeginningofthistutorial,youwillrememberthatyoushouldcreate arootfolderforyourproject.Dothatnow. StartNotePad,ifyouhavenotalreadystartedit,andcreateanewfile.Nameit "index.htm"andsaveitintherootfolder. NowtypeintheopeningandclosingHTMLtags.Theyareshownbelow. <html> </html> AnimportantcomponentoftheopeningHTMLtagisthedoctype(documenttype) statement.Thedoctypestatement"tells"thebrowserimportantdetailsabouttheWeb pageandthecodethatisusedtomakeit.Whileitlookscomplicated,itreallyisn't.Adda doctypestatementjustbeforetheopeningHTMLtagsothatthecodelookslikethis: <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> </html>
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

28

InteractiveMediaCenter http://library.albany.edu/imc/

FurtherinformationaboutthedoctypestatementcanbefoundontheWorldWideWeb Consortium'sWebsiteat www.w3.org/QA/Tips/Doctype. OnelasttechnicaldetailwillhelpmakesureyourWebpageisrenderedproperlybythe browsers.AllyouhavetodoisaddanattributetotheopeningHTMLtagthatrefersto "namespace."ThenamespaceisacomplicatedconceptfornoviceHTMLwritersowe willnotgointodetailhere.Ifyouareinterestedinfurtherinformation,visit www.w3.org/TR/RECxmlnames.AddthenamespaceattributetotheopeningHTML tagsothatitlookslikethis: <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> </html> Nowallthepreparationsarecompletedandyoucanstartthe"meatandpotatoes"ofWeb pagebuilding. Addyouropeningandclosingheadtags.Thenewcodeshouldlooklike: <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> </html> Nowaddtheopeningandclosingbodytags: <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> </body> </html> Ifthisbeginstolookconfusing,addsomespacesbetweentheopeningandclosingtagsof theheadandbody.Thiswillhelpclarifywhereyouwillbeaddingcode.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

29

InteractiveMediaCenter http://library.albany.edu/imc/

<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> </body> </html> SaveyournewWebpage.Youcouldviewthepageinyourbrowseratthispoint, howeverbecauseyouhavenotaddedanyviewabledata,thepagewillappearblank.To testthis,startyourbrowser,clickFile,andthenselectOpenFileorOpen,dependingon whichbrowseryouuse.NavigatetoyournewWebpage,thenclickOKorOpen.Ablank Webpagewillappearonyourscreen.

AddingAnImage
Thenextthingthatyouwilldoistoaddaheaderimagetoyourpage.Youmustfirst downloadandsavetheimageintoyourimagesfolder.Goto http://library.albany.edu/imc/html_tut/download_images/garageheader.jpg toview theheaderimagenamed"garageheader.jpg." Rightclickontheimageinyourbrowser, thenclickSaveImageorSavePictureAs(again,dependingonyourbrowser)tosavethe imageintheimagesfolderinyourproject'srootfolder. YouwillwanttheheaderimagetoappearinthecenterofyourWebpage.Addthecenter tagasshownbelow: <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center></center> </body> </html> Nowaddtheimgsrc(imagesource)tagthatwillplacetheheaderimageintoyourpage. Becauseyouhavesavedthatimageintoyourimagesfolder,thecodewilllooklikethis:

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

30

InteractiveMediaCenter http://library.albany.edu/imc/

<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center><imgsrc="images/garageheader.jpg"/></center> </body> </html> Theimageis800pixelswideand208pixelshigh.Addthedimensionsattributestothe imgsrctag.Don'tforgettoaddanalttag,too.A suggestionis"Sammy'sGarage."The codewillnowlooklikethis: <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center><imgsrc="images/garageheader.jpg"alt="Sammy'sGarage" width="800"height="208"/></center> </body> </html>

AddingASimpleTable
Nowyouwilladdasimpletablewithoutbordersandlimitedattributes.Thistablewillbe usedtoaccuratelyplacethehoursofoperationforSammy'sGarageontheWebpage. Youwillalsoapplysometextformatting. Addthetabletag,tablerowtag,andtablecelltagtoyourWebpageasshownhere:

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

31

InteractiveMediaCenter http://library.albany.edu/imc/

<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center><imgsrc="images/garageheader.jpg"alt="Sammy's Garage"width="800"height="208"/></center> <table> <tr> <td></td> </tr> </table> </body> </html> AddthetexttothetablecellthattellsaboutSammy'shoursofoperation. <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center><imgsrc="images/garageheader.jpg"alt="Sammy'sGarage" width="800"height="208"/></center> <table> <tr> <td>Hours:MondaythroughFriday8:00amto6:00pm<br/> Saturday8:00amto12:00noon</td> </tr> </table> </body> </html> Youcansaveyourpagenowandviewitwithyourbrowser. Youwillnoticethatthetext andtableareontheleftsideofthescreenanddoesnothaveaparticularlypleasing appearance.Thenextstepistoadd someattributestotheopeningtabletagsothatitis centered.Thensetthetabletobe800pixelswideandadd6pixelsofcellpadding.The bordersshouldbesetto0pixelsasshouldthecellspacing.Thecodeshouldlooklike this:
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

32

InteractiveMediaCenter http://library.albany.edu/imc/

<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center><imgsrc="images/garageheader.jpg"alt="Sammy'sGarage" width="800"height="208"/></center> <tablewidth="800"border="0"align="center"cellpadding="6" cellspacing="0"> <tr> <td>Hours:MondaythroughFriday8:00amto6:00pm<br/> Saturday8:00amto12:00noon</td> </tr> </table> </body> </html> Youcansaveandviewyourpagetoseehowaddingtheseattributeshavechangethe appearanceofthetableandtext. Youhavenotformattedthetextyet.Thatwillbeyournextstep.Addtheopeningand closingfonttags"around"thetextwiththeattributetocausethetexttobedisplayedin Arial.Addthelinebreaktag,<br/>sothatthelineendsafter"6:00pm"Thecodewill looklikethis: <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center><imgsrc="images/garageheader.jpg"alt="Sammy'sGarage" width="800"height="208"/></center> <tablewidth="800"border="0"align="center"cellpadding="6" cellspacing="0"> <tr> <td><fontface="Arial>Hours:MondaythroughFriday8:00amto6:00 pm<br/> Saturday8:00amto12:00noon</font></td> </tr> </table>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

33

InteractiveMediaCenter http://library.albany.edu/imc/

</body> </html> Addthestrongtagaroundtheword"Hours." <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center><imgsrc="images/garageheader.jpg"alt="Sammy'sGarage" width="800"height="208"/></center> <tablewidth="800"border="0"align="center"cellpadding="6" cellspacing="0"> <tr> <td><fontface="Arial><strong>Hours:</strong>MondaythroughFriday 8:00amto6:00pm<br/> Saturday8:00amto12:00noon</font></td> </tr> </table> </body> </html>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

34

InteractiveMediaCenter http://library.albany.edu/imc/

Ifyousaveandviewyourpagenowyouwilldiscoverthatthetextisofftotheleft.Add thealigncenterattributetothetablecelltocausethetexttoappearinthecenter.The codesofaris: <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center><imgsrc="images/garageheader.jpg"alt="Sammy'sGarage" width="800"height="208"/></center> <tablewidth="800"border="0"align="center"cellpadding="6" cellspacing="0"> <tr> <tdalign="center"><fontface="Arial><strong>Hours:</strong>Monday throughFriday8:00amto6:00pm<br/> Saturday8:00amto12:00noon</font></td> </tr> </table> </body> </html>

MainBodyInformation
Inthisseriesofstepsyouwilladdthemaintableforthepagethathastheimportant informationaboutSammy'sGarage.Thetablewillhavetheseattributes:

800pixelswide 1pixelborder 10pixelcellpadding 0pixelcellspacing whitebackgroundcolor centeredonthepage Thetablecellalignattributesshouldbe"left"and"top" <tablewidth="800"border="1" align="center" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF"> <tr> <tdalign="left" valign="top"></td> </tr> </table>

Seeifyoucanaddthenecessarycodetomake thattableappearonyourpage.Ifyouarenotsure whatthecodeshouldbe,checktheboxonthe right.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

35

InteractiveMediaCenter http://library.albany.edu/imc/

Nowyoucanaddthetexttothetableandformatitforappearance,withalist,h1 heading,andlinks.Theillustration belowshowshowthetextshouldlook.

Goaheadandtryit.Ifyouarenotsatisfiedwiththeresultsyoucancheckthecodein Appendix2.

FinishingTouches
Thereisverylittlelefttodotocompletetheproject.Asimpleparagraphatthebottomof thepagewiththeaddressofSammy'sGaragewillfinishit.Besuretocenterthe paragrah,applythestrongtagtothetext,andmakethefontArial.Thecodeis: <palign="center"><strong><fontface="Arial>Sammy'sGarage&amp RestorationShop<br/> 1234AirportAvenue<br/> LosAngeles,CA90405</font></strong></p> AllWebpagesshouldhaveatitle.Thistitledisplaysonthetopbarofthebrowserand mayappearinthebookmarks,dependingonthebrowser.Itisalsousedbysearch engines.AddatitletagtotheheadpartoftheWebpage.Thecodeis: <title>SammysGarageDemopageforIMCHTML/XHTML Tutorial</title> ToseethecodefortheentirepagevisitAppendix3. Saveandviewyourpageinyourbrowser. That'sit!Howdoesyourpagelook?

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

36

InteractiveMediaCenter http://library.albany.edu/imc/

IfYouContinueOn...
IfyouelecttocontinuefurtherexplorationofHTMLandXHTMLyouwilldiscoverhow toenhanceyourWebpagesevenmore.Amongthethingsthatyoucandoare:

Addmetatagstohelpmakesearchengineslistyourpage Controltheappearanceoftextandimages Formattablesforappearance Embedmediafiles Addattributestoobjects

TherearenumerousresouresontheWorldWideWeb.Formoreinformation,besureto visit:
TheInteractiveMediaCenter'sIntroductiontoWebDesign onlinetutorial at

http://library.albany.edu/imc/webdesign/
TheIMC'sColorandtheWeb onlineTutorial at

http://library.albany.edu/imc/webcolor
TheIMCHTML/XHTMLtaglistat

http://library.albany.edu/imc/tagsheet.htm
TheWorldWideWebConsortium at http://www.w3.org

GoodluckwithyourWebpagebuilding!

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

37

InteractiveMediaCenter http://library.albany.edu/imc/

Appendix1 ImageFileFormats
TherearethreetypesofimagefilesformatsthatareusedontheWeb.TheyareJPG (JointPhotographersExperimentalGroup),GIF(GraphicsInterchangeFormat),and PNG(PortableNetworksGraphics.(AlthoughtheBMPfileformatisdisplayedbymost browsers,itisnotusedontheWebforpracticalreasons.)JPGandGIFarethe oldestof thethreeformats. TheJPGisacompressedformat.Dataislostasthefileissaved.Thedegreeof compressionissetbytheimageeditingsoftware,suchasPhotoshoporPaintShopPro. JPGisbestsuitedforphotographsbecauseofthewaythatithandlescolors.Many thousandsofcolorscanbedisplayed,althoughtheactualnumberofcolorswillvaryby imagedependingonhowmuchcompressionhasbeenchosen. TheJPGphotographon therighthasbeen preparedusingvery littlecompression.The colorisgoodandthere isahighlevelofdetail intheshadows.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

38

InteractiveMediaCenter http://library.albany.edu/imc/

Thesameimageis displayedontheright. But,inthisexampleit hasbeenhighly compressed.Youwill noticesmall"artifacts" thatsometimesappear asdotsorghosting. Morecompression resultsissmallerfile sizesandquicker downloads.Itis necessarytoselecta compressionlevelthat balancesqualitywith filesizeanddownloadtimes.

TheGIFimageformatis designedforimagesthat havesolidcolors,suchas drawingsandlogos.Itis limitedtonomorethan256 colors,althoughmost softwareallowstheuserto selectlesscolorsforsmall filesizesandquicker downloads.

TheGIFformatdoesnothandlephotographswellbecauseofthelimitednumberof colors.However,itdoeshandlesolidcolorsextremelywell.Theimageontherightisa GIF.Noticethatthetherearenoartifactsofpixilationinthesolidcolors.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

39

InteractiveMediaCenter http://library.albany.edu/imc/

Thephotographontherighthas beensavedasaGIF.Notice thatthereisabandingeffectin thesky.BecauseGIFimages arelimitedtonomorethat256 colors,manyofthecolorsina typicalskyphotowillnotbe viewable.Thosecolorswillbe substitutedby thecloses availableGIFcolor.Theresult willoftenbebanding,stripes, oroccasionallya"moire"or "wateredsilk"effect.

ThePNGformatwasoriginally intendedtoreplacetheGIF format.However,thatdidnot cometopass.PNGimages handlesolidcolorsaswellas GIFsdo,andtheyalsomanage thephotographiccolorwell. Noticethatinthephotograph ontherightthatthecolorsare accurateandtheskydoesnot displayanyofthebanding effectthatappearsintheGIF exampleabove.

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

40

InteractiveMediaCenter http://library.albany.edu/imc/

Appendix2
<h1align="center">WelcometoSammy'sGarageHomePage</h1> <p><strong><fontcolor="#990000"size="4">Sammy'sGarage&ampRestoration Shop</font></strong>hasbeeninbusinesssince1957.Westartedinasmallbuilding justoffofLaCienegaBoulevardwithonlyonebayandlift.Todayweoccupya35,000 squarefootbuildingthatiscentrallylocatedneartheSantaMonicaAirport.Nomatter whatyourautomotiveneedsare,wedoitall!</p> <ul> <li>Fullautomobilerestoration</li> <li>Standardvehicleservice</li> <li>Showqualitydetailing</li> <li>Accidentrepair</li> </ul> <p>Althoughweservicenearlyallmakesandmodels,ourrestorationshopspecializesin AmericanIron.Includedaremodernmanufacturers,suchas<a href="http://www.ford.com">Ford</a>,<ahref="http://www.gm.com">General Motors</a>,and<ahref="http://www.chrysler.com">Chrysler</a>.Longgonemarques suchasAmericanMotors,Willys,Hudson,andStudebakeralsofindcarefulattention hereatSammy's.</p> <p><em>Youareinvitedtoinspectourshopanytimeduringnormalbusiness hours.</em></p>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

41

InteractiveMediaCenter http://library.albany.edu/imc/

Appendix3
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>SammysGarageDemopageforIMCHTML/XHTMLTutorial</title> </head> <body> <center><imgsrc="images/garageheader.jpg"alt="Sammy'sGarage"width="800" height="208"/></center> <tablewidth="800"border="0"align="center"cellpadding="6"cellspacing="0"> <tr> <tdalign="center"><fontface="Arial"><strong>Hours:</strong>Mondaythrough Friday 8:00amto6:00pm<br/> Saturday 8:00amto12:00noon</font></td> </tr> </table> <tablewidth="800"border="1"align="center"cellpadding="10"cellspacing="0" bgcolor="#FFFFFF"> <tr> <tdalign="left"valign="top"><h1align="center">WelcometoSammy'sGarageHome Page</h1> <p><strong><fontcolor="#990000"size="4">Sammy'sGarage&amp Restoration Shop</font></strong>hasbeeninbusinesssince1957.Westartedinasmallbuilding justoffofLaCienegaBoulevardwithonlyonebayandlift.Todayweoccupya35,000 squarefootbuildingthatiscentrallylocatedneartheSantaMonicaAirport.Nomatter whatyourautomotiveneedsare,wedoitall!</p> <ul> <li>Fullautomobilerestoration</li> <li>Standardvehicleservice</li> <li>Showqualitydetailing</li> <li>Accidentrepair</li> </ul> <p>Althoughweservicenearlyallmakesandmodels,ourrestorationshopspecializesin AmericanIron.Includedaremodernmanufacturers,suchas<a href="http://www.ford.com">Ford</a>,<ahref="http://www.gm.com">General Motors</a>,and<ahref="http://www.chrysler.com">Chrysler</a>.Longgonemarques such asAmericanMotors,Willys,Hudson,andStudebakeralsofindcarefulattention hereatSammy's.</p> <p><em>Youareinvitedtoinspectourshopanytimeduringnormalbusiness hours.</em></p></td> </tr> </table> <palign="center"><strong><fontface="Arial,Helvetica,sansserif">Sammy'sGarage &ampRestorationShop<br/>
RogerLipera02/2008V.1 rlipera@uamail.albany.edu

42

InteractiveMediaCenter http://library.albany.edu/imc/

1234AirportAvenue<br/> LosAngeles,CA90405</font></strong></p> </body> </html>

RogerLipera02/2008V.1 rlipera@uamail.albany.edu

43

InteractiveMediaCenter http://library.albany.edu/imc/