BasicWebsiteMaintenanceTutorial*

Introduction
Youfinallyhaveyourbusinessonline!Thistutorialwillteachyouthebasicsyouneedto knowtokeepyoursiteupdatedandworkingproperly.Itisimportanttonotethatthis tutorialisnotasubstituteforagoodwebdesignerandcannotreplacecomprehensiveweb designtraining.However,youshouldcomeawayfromthetutorialwithan understandingofthesebasicconcepts: 1. 2. 3. 4. 5. 6. 7. 8. Howtocopyyoursitetoyourharddrive. BasicstructureandrequirementsofXHTMLtags Howtoinserttextonawebpage UnderstandingURLsandpaths Howtowritealink Howtoinsertanimageonawebpage Howtoeditawebsitemenu Howtoaddapagetoyoursite

Forinformationonuploadingyourpagestotheserver,seetheFTPtutorial. *ThistutorialiscompatiblewithWindowssystems.

CopyingYourWebsite
Youshouldalwayshaveatleastonebackupcopyofyoursitetopreventitslossor corruptionbypowersurges,systemcrashes,orerrorsyoucreatewhenmakingchangesin thesite.Laterinthetutorialyou'lllearnaboutFTPsoftwareandyouwillbeabletoapply theseconceptsyoulearnnowtocopyyoursitedirectlyfromtheserver.Fornow,you'll learntocopyyoursitefromaCDontoyourharddrive.Itisrecommendedthatyou maintainacopyofyoursiteatalltimes,beforeandafteryoubeginworkingonit.You maywanttocopyyoursitetotwoseparatedirectoriesonethatwillholdyoursafety copyandonethatwillholdyourworkingcopy.

Tocopyyourwebsite:
1. InserttheCDcontainingthefilesforyourwebsiteintoyourCDdrive. 2. FromtheWindowsStartmenu,doubleclickMyComputer. 3. InMyComputerdirectory,doubleclickthedrivewhereyourCDislocated.The CDdirectorywillopen,listingallthefilesontheCD. 4. Clickonafiletohighlightit,thenpressCntlctocopyittothesystemclipboard. Note:Youcancopymorethanonefileatatimebyholdingtheshiftkeyand usingthearrowkeystohighlightadditionalfiles.PressCntlctocopythefilesto thesystemclipboard. 5. FromtheWindowsStartmenu,doubleclickMyDocuments.TheMy Documentsdirectoryopens. 6. CreateanewfolderinMyDocumentsbyclickingMakeaNewFolderinthe menuontheleft(WinXP)orrightclickinganywhereinthedirectoryand selectingNew>Folderfromthepopupmenu.Typeanameinthefolder's highlightedspaceandclickenter. Note:Youcancreatethefolderforyoursiteanywhereonyoursystemfor simplicity,thistutorialusestheMyDocumentsdirectory. 7. Openthefolderyoujustcreatedbydoubleclickingit.Ablankdirectorywill open.ClickanywhereinthedirectoryandpressCntlvtopastethecontentsofthe clipboardintothedirectory.Ifyouweren'tabletocopyallthefilesfromyoursite instep4,gobackandfinishcopyingtheremainingfilesintothenewdirectoryon yourharddrive.

XHTMLTagStructure&Requirements
Wedonotrecommendthatyoualterstylesinyourwebsitedoingsocanliterallymake yourwebsitefallapart.However,youwillneedtoupdateyourcontentfromtimeto time.WhileitisnotthepurposeofthistutorialtoteachyouXHTMLcode,youneedto haveanunderstandingofthebasicstructureandrequirementsofXHTMLtagstokeep yoursitevalidandfunctioningproperly. XHTMListheupgradedversionofHTMLanddemandstheserequirements: 1. XHTMLdoesnotallowpresentationtags,suchas<font><bgcolor="blue">etc. Instead,thesepresentationelementsorstylesareappliedinCSS(CascadingStyle Sheets)and/orinternalstylesintheheadofthedocument. Note:Againwestronglyurgeyounottotinkerwiththestylesinyoursite. 2. AllXHTMLtagsandtheirattributesmustbelowercase. 3. AllXHTMLtagsmustbeclosed.Mosttagscomeinpairssuchasthesetabletags: <table></table> Thefirstbracketopensthetabletag.Theslashcharacter/inthesecondbracket closesthetabletag.Sometagsdonotcomeinpairs,suchasthishorizontalrule tag: <hr/> Insteadofaclosingbracketasinthetabletagsabove,aslashcharacterclosesa singlebrackettagasinthehorizontalruletag.Noticetheclosingslashis precededbyaspace. 4. AllXHTMLdocumentsmusthaveadocumenttypedeclaration.Noticethatevery pageinyourwebsitebeginswiththefollowingrequiredcode: <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> Note:Anynewpagesyoucreateinyoursitemustalsobeginwiththis declaration. 5. Alltagsmustbeproperlynested.Thismeanswhenasetoftagsinenclosedin anothersetoftags,innertagsshouldclosebeforeoutertags,intheoppositeorder inwhichtheywereopened. Example: <p> opens first, closes last CorrectlyNestedTags <span> opens last, closes first

<p><span>Thistextisenclosedinproperlynestedtags</span></p>

<p> opens first, closes first

IncorrectlyNested Tags

<span> opens last, closes last

<p><span>Thistextisenclosedinimproperlynestedtags</p></span>

Ifyouwilladheretotheserulesasyoumakechangesinyourpages,youshouldhaveno difficultymaintainingthevalidityandfunctionofyoursite.

PreparingTheTutorialDocument
Nowyou'regoingtogetsomepracticeinsertingtextintoawebpage.Beforeyoubegin thispartofthetutorial,createafolderintheMyDocumentsdirectoryofyourharddrive whereyou'llsaveallthedocumentsyou'llbecreatingin thetutorial.Namethefolder WebTutorial. Youwillneedatexteditorforthispartofthetutorial.OnaWindowscomputeryoucan useWindowsNotepad.OpenNotepadfromtheStartmenu>AllPrograms> Accessories>Notepad. Note:Donotuseawordprocessingprogram,suchasMicrosoftWord,tocreate HTMLdocuments.Suchprogramsgeneratecodethatyoudonotwantinyour pagesUseonlyatexteditor. Highlightandcopy(Ctrl+c)thecodebelow,beginningwiththetagthatcontainsthe documenttypedeclarationandendingwith</html>.

<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>UntitledDocument</title> <metahttpequiv="ContentType"content="text/htmlcharset=iso88591"/> </head> <body> <p>Quisnostrudexercitationutlaboreetdoloremagnaaliqua.Consecteturadipisicing elit,velitessecillumdoloreinreprehenderitinvoluptate.Eufugiatnulla pariatur.</p> </body> </html>

Pastethecopiedtext(Ctrl+v)intothenewNotepaddocumentandsavethedocumentin theWebTutorialfolderwiththefilenamehello.html.Noticethatyouarereplacingthe default.txtfileextensionwiththehtmlextension.Thisextensioncausesthepageto displayasawebpageinsteadofatextdocument.Afteryousavethefile,closeit. NownavigatetotheWebTutorialfolderanddoubleclickhello.html.Thedocument opensasawebpage.Inthebrowsertoolbar,clickview>viewsource.Youcanalso rightclickandselectviewsource. AHA!TheNotepaddocumentopenstorevealtheHTMLcodethatcreatesyourweb page!Nowyoucanseebothsidesofthewebpage:thepuretextcodethatwillbesent toawebbrowserandthedisplayedwebpagethatresultsfromthecodebeingtranslated bythewebbrowser.

InsertingTextinYourWebPage
Nowthatyou'vecreatedadocumenttopracticeon,let'slearnhowtoreplacetextinthe document. Belowisthecodeyoucopiedintoyourdocument.I'veboldedthetextyouneedto replace.Noticethistextisinsideasetofparagraphtags<p></p>.Inmost circumstances,thetextyouwillchangeinyourownwebpageswillbeenclosedin paragraphtags. <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>UntitledDocument</title> <metahttpequiv="ContentType"content="text/htmlcharset=iso88591"/> </head> <body> <p>Quisnostrudexercitationutlaboreetdoloremagnaaliqua.Consectetur adipisicing elit,velitessecillumdoloreinreprehenderitinvoluptate.Eufugiatnulla pariatur.</p> </body> </html>

Toreplacetheparagraphtext:
1. Clickanddragthemouseorholdtheshiftkeyandusethearrowkeystohighlight thetextinsidetheparagraphtags. 2. Withthetexthighlighted,begintypingyournewtextorpaste(ctrl+v)textyou've copiedfromanothersource. 3. Saveyourdocument(Ctrl+s)andopen hello.htmlThewebpagenowdisplaysthe textyouadded. Note:Youcanundoapasteoranyothercommandbypressingctrl+z.

UnderstandingURLs
Youknowhowtoaddtexttoyourwebpage.Butwhatifyouwanttoaddagraphic? Whatifyouwanttolinktoanotherpageoraddapagetoyourwebsite?Alloftheseare addedbylinkingtothefileswheretheyarecontained.Toaccomplishthesethings,you needtolearnaboutpathsandURLs. TheURL(UniformResourceLocator)tellswhereafileislocatedandwhatthebrowser shoulddowithit.ThetwotypesofURLyouwillbeconcernedaboutinthistutorialare relativeandabsoluteURLs.

AbsoluteURLs
AbsoluteURLsbeginwithhttp://whichtellsthebrowserthatthefileisontheinternet. Thisfilecouldbeanywhereontheinternet,including thesitethatholdsthelink. AbsoluteURLsshowtheentirepathtothefile,includingthescheme(usuallycalledthe protocol),theservername,thecompletepath,andthefilename. Scheme Server Path File

http://ebay/electronics/seller459808/images/toysoldier.jpg

RelativeURLs
RelativeURLstellthebrowserthefilereferencedinthelinkislocatedonthesamesite asthepagecontainingthelink. Inotherwords,absoluteURLstellthebrowserhowtofindthefilefromanywhereonthe internet.RelativeURLstellthebrowserhowtofindthefilerelativetothedocumentthat containsthelink. InordertowritetheURLaccuratelysothebrowsercanfindthecorrectfile,youneedto understandpaths.Inthesimplestterms,apathisafolderbyfoldermaptoafile.A linkedfilecanbelocatedinthesamefolder,inafolderlowerinthefilehierarchy,orin ahigherfolderinthefilehierarchy,dependingonthelocationofthefilecontainingthe link.

PathstoSameFolderFiles
Figure1belowshowsasitemapforatypicalwebsitewithahierarchyoffolders.Thefile calledskin.htmlcontainsalinktoafilecalledshipping.html.Sincethefilesarelocated inthesamefolder,thepathissimplythefilename,shipping.html. Example: Alinkinskin.htmlpointstoshipping.html,locatedinthesamefolder: Path <ahref="shipping.html">Clickfordetails!</a>

Bothfilesarelocated intheloadfolder.

Figure1

PathstoFilesLowerinFileHierarchy
Thefilecalledshipping.htmlcontainsalinktotheimagefilecalledbee.gif.Noticethat bee.gifdoesnotsharethesamefolderasshipping.html.Inthiscase,bee.gifislocatedin afolderlowerthantheloadfolderwhereshipping.htmlislocated.Thecorrectformatfor thepaththenis: Containingfolder/filename Example:
images is the containing folder bee.gif is the file name

Path <imgsrc="images/bee.gif"alt="littlehoneybee"width="35"height="33"/>

shipping.htmlcontainsalinkto bee.gif bee.gifislocatedin thefolderbelow shipping.html

PathstoFilesHigherinFileHierarchy
Thefilenamedlotionsoap.htmlalsocontainsalinktoshipping.html.Asillustratedin Figure3,thefilesarenotinthesamefolder.Inthiscase,shipping.htmlislocatedina folderhigherthanthecatalogfolderwherelotionsoap.htmlislocated.Thecorrectformat forthepaththenis: ../filename Example: ../ means in
the folder above File name

Path <ahref="../shipping.html">Clickfordetails!</a> The../tellsthebrowserthelinkedfileislocatedinafolderonelevelhigherthanthe foldercontainingthecurrentfile. shipping.htmlisinafolderone levelabovelotionsoap.html. lotionsoap.html containsalinkto shipping.html

Figure3 Understandingpathsisimportantforaddinglinkedelementstopages,andforsavingand uploadingfilestotheappropriatefolders.Itisveryimportanttomaintainthehierarchyof thefilesandfolderswhensavinganduploadingfiles.Ifyouinadvertentlychangethefile hierarchywhensavingoruploadingfiles,thepathsinyoursitedocumentswillbe inaccurateandwon'twork.Ifyouarehavingtroublewithdeadlinks,makesurethe pathsinyourlinksreflecttheheirarchyoffilesandfoldersinyoursite.

Linking
Nowthatyouunderstandtheformatrequiredforpaths,youarereadytolearntocreate linksinyourdocuments. Theformatfora linkis: <ahref="filename.html">displayonwebpage</a> Earlierinthetutorialyoucreatedawebpagecalledhello.html.Openhello.html,saveas links.html.Nowyouhavetwodocumentsinthesamefolder.Nowyou'lladdcodeto eachdocumentthatwilllinkonetotheother. 1.Inthelinks.htmlsourcecode,typethefollowing: <ahref="hello.html">MyWelcomePage</a> 2.Savethedocument(Ctrl+s) 3.Openhello.htmlandaddthefollowinginthesourcefile: <ahref="links.html">MyFavoriteLinks!</a> 4.Savethedocument(Ctrl+s) 5.RefreshthebrowserviewofeitherdocumentbypressingF5. Yourpageshoulddisplayoneofthelinksyoujustcreated.Whenyouclickonthelinkit shouldtakeyoutothepagewiththeotherlinkyoucreated.Clickonthatlinkandit shouldreturnyoutothepreviouspage.Ifyouhaveresultsdifferentfromthis,goback andchecktomakesureyoutypedthecodecorrectly.Paycarefulattentiontospelling, brackets<>andclosingmarks/. Whenyou'vesuccessfullycreatedtheselinks,let'screatesomethingwithlinkingthatisa bitmorechallengingbychangingthehierarchyofthefolders.

LinkswithComplexPaths
Asyou'veseen,creatingsimplelinksisastraightforwardprocess.Creatinglinkswith morecomplexpathsisrequiresabitmorecare,butit'snotdifficult.Togetsomepractice inthisnewchallenge,we'llcreateanewfoldernamed"lower"insidetheWebTutorial folder.Dragthelinks.htmldocumentintothelowerfolder.Nowopeneitherthe links.htmldocumentorthehello.htmldocumentandclickonthehyperlink.Both hyperlinksaredeadbecausewechangedthehierarchyofthefoldersandfiles. Nowwe'llchangethepathsinthelinkstoreflectthenewhierarchy.

Thelink.htmldocumentcontainsalinktoafile(hello.html)onelevel aboveit'sown location.Recallthesyntaxforreferringtoafileinthefolderaboveis: ../filename Note:Ifthefilewerelocatedtwolevelsabove,thesyntaxwouldbe: ../../filename Soourhyperlinkcodefromlinks.htmltohello.htmlis: <ahref="../hello.html">MyWelcomePage</a> Thehello.htmldocumentcontainsalinktoafile(links.html)onelevel belowit'sown location.Recallthesyntaxforreferringtoafileinafolderbelowis: Containingfolder/filename Soourhyperlinkcodefromhello.htmltolinks.htmlis: <ahref="lower/links.html">MyFavoriteLinks</a> Replacethecodeforeachhyperlink,savethedocumentsandclickthelinksagain.Your linksshouldonceagainlinkthepageswithouterror.Ifyoudonotgettheseresults,go backandcheckspelling,bracketsandclosingslashes.

AddingImagestoWebPages
Nowthatyouunderstandlinksandtheimportanceofaccuratepaths,youwillfindita verysimpleprocesstoaddimagestoyourwebpages.Itisimportanttonotethatadding imagescanchangeyoursiteinunpredictableways.Itisbesttoreplaceimageswith imagesofasimilarsize.Ifyouareaddinganimagetoanareaofthesitethatpreviously hashadnoimage,becertainthatyouareaddingitwhereitwillnotinterferewith navigationorlogoareas.Itisimportanttoviewyourpagesindifferentbrowserstomake surethepagedesignisstableafteraddinglargeelements(likeimages)thatcaneffectthe design. Thesyntaxforaddinganimageis:

path and filename of the image

<imgsrc="image.url"alt="descriptionofimage"/>

Nowwe'lladdanimagetoeachofourwebpages.Tohello.html,we'lladd aunt_pearl.jpg.Tolinks.html,we'lladdtastee_kreme.jpg.Noticethateachhtml documentoccupiesadifferentlevelinthehierarchyofthesite.Thiswilleffecttheway wewritethepathtotheimagefiles.

Firstwe'lladdanimagetohello.html.Noticetheimagesfolderisonelevelbelowbelow thefolderthatholdshello.html 1. Openthesourcecodeforhello.html. 2. Immediatelyafterthefirst<body>tag,addasetofparagraphtags: <p></p> 3. Betweentheparagraphtags,typethefollowing: <imgsrc="images/aunt_pearl.jpg"alt="pictureofAuntPearlfromGreaterTuna"/> 4. Savethefileandviewitinthebrowser. Nowwe'lladdanimagetolinks.html.Noticetheimagesfolderislocatedalevelabove links.html.However,thispathisabitmorecomplicatedthanfortheimagewejust added.Althoughthefoldernamed"lower"islocatedonthesamelevelasthe"images" folder,theservermustclimbupthelowerfoldertogettotheimagesfolder.Thenitmust climbdownintotheimagesfolder. 1. Openthesourcecodeforhello.html. 2. Immediatelyafterthefirst<body>tag,addasetofparagraphtags: <p></p> 3. Betweentheparagraphtags,typethefollowing: <imgsrc="../images/tastee_kreme.jpg"alt="theTasteeKremegirlsfromTuna,Texas"/> 4.Savethefileandviewitinthebrowser.

EditingWebsiteMenus
Linksarenecessaryforwebsitemenus.Commonly,websitemenusarepresentedinalist format.BecauseHTMLlistsareeasilystyledwithCSS,itisveryeasytoaddorremove menuitemsfrommenulists.

CreatingMenuLists
Tocreateamenulist,copythecodebelowandpasteitintohello.html.
Tag for unordered list Tag for list item

<ul> <li>Home</li> <li>AboutUs</li>

<li>ContactUs</li> <li>Sitemap</li> </ul> Note:Orderedlists,(numberedlists),openwiththe<ol>tagandclosewiththe </ol>tag. Save(Ctrl+s)thedocumentthenrefresh(F5)thebrowserdisplay.Anunorderedlist(list withoutnumbering)displaysonthepage. Tocreateamenufromthelist,wehavetoenteralinkforthelistitems.Forthepurpose ofthistutorial,we'regoingtolinkthemenuitemstopagesthatdon'texist theselinks willlookright,buttheywon'twork.Feelfreetocreatelinkstoactualpagesifyou choose. <ul> <li><ahref="index.html">Home</a></li> <li><ahref="about.html">AboutUs</a></li> <li><ahref="contact.html">ContactUs</a></li> <li><ahref="sitemap.html">Sitemap</a></li> </ul> Afteryoulinkthemenuitemsasshownabove,save(Ctrl+s)thedocumentandrefresh thebrowser(F5). Nowyouhavealistoflinks,oramenu.Inmostsites,menulistswillbestyledand appearmuchmoreattractivethanourswhendisplayedinabrowser.Nevertheless,the codeintheHTMLstyledlistswilllookverysimilartoours.

EditingMenuLists
Nowthatyouhaveamenu,let'sseehoweasyitistochangeit.Forthisexample,we'll addalinksforourhello.htmlandlinks.htmlpages.Wewantthelistitemstodisplay "Welcome"and"Links"inthebrowser.Thelinkforhello.htmlshouldappearafterthe homepageandthelinkforthelinks.htmlshouldappearjustabovethesitemaplink. Toaddanitemtothemenu,you'llneedasetof<li>tagsforthelistitemand<ahref> tagsforthehyperlink: 1. Typeasetoflistitemtagswhereyouwantthenewmenuitemtoappear. <li></li> 2.Typethecodeforthelinkbetweenthe<li>tags. <li><ahref="hello.html"></a></li> 3.Betweenthelinktags,typethetextyouwantdisplayedinthebrowser. <li><ahref="hello.html">Welcome</a></li> 4.Savethedocumentandrefreshthebrowser. Inthistutorialwe'vedonethingsstepbysteptoillustratehowHTMLworks.Butyou cantakesomeshortcutstospeedyourupdatetime.Afastwaytoaddamenuitemisto

copyanexistingitem,pasteitwhereyouwantyournewlink,thenchangethedisplay textandlinkforthenewitem.Dothisnowtoaddthelinks.htmldocumenttothemenu justabovethesitemap.Rememberthelinkcodemustreflectthepathtothelinks.html document! Yournewcodeshouldlooklikethis: <ul> <li><ahref="index.html">Home</a></li> <li><ahref="hello.html">Welcome</a></li> <li><ahref="about.html">AboutUs</a></li> <li><ahref="contact.html">ContactUs</a></li> <li><ahref="lower/links.html">Links</a></li> <li><ahref="sitemap.html">Sitemap</a></li> </ul> Nowlet'sremoveanitemfromthemenu.Asyoumighthaveguessed,thisisaneasy thingtodo.Simplehighlighttheentirelistitemforthatmenuandhitdelete.Remove themenuitemforthesitemap. Yournewcodeshouldlooklikethis: <ul> <li><ahref="index.html">Home</a></li> <li><ahref="hello.html">Welcome</a></li> <li><ahref="about.html">AboutUs</a></li> <li><ahref="contact.html">ContactUs</a></li> <li><ahref="links.html">Links</a></li> </ul> Oneveryimportantthingtorememberwhenyouchangeanymenudetailsonasiteis thatmenusaretypicallyusedacrossentiresites.Ifyouareusingstaticpagesona website,youmustchangeeveryoccurrenceofthemenuinthesite.Thiscanbetime consumingandgreatlyincreasesthelikelihoodoferrorsonyoursite.Soifyoumust changeamenu,changeit,butbeaccurateandconsistentinyourchanges.Dependingon thesizeofyourwebsite,itisoftenmorecostefficienttogetyourwebdesignertomake thesetypesofchanges.Whattakesyouhourscouldtakeawebdesigneramerefew minutes.

AddingandRemovingPagesinYourSite
Nowthatyouunderstandhowtocreatelinksandhowtoeditmenus,it'seasyto understandhowtoaddorremovepagesfromyoursite.

AddingPages
Earlierinthetutorialwecreatedthelinks.htmlpagesimplyby openingthehello.html pageandsavingitwithanewname.Thisdidnotchangethehello.htmlpage,butcreated abrandnewpage,identicaltohello.html.Youcancreateanewpageforyourwebsite usingthissamemethod.Notonlywillyourpagebelaidoutcorrectly,butitwillalso containallthenecessarylinkstostylesheetsandimagesusedinyourpagedesignand menus.

Afteryou'vecreatedanewpagefromanexistingone,allyouhavetodoiseditthe detailsofthecontentsaswehavebeendoingthroughoutthistutorial.

RemovingPages
Removingpagesfromyoursiteisassimpleasremovingthemfrommenusandif necessary,deletingthemfromtheserver. Ofcourse,youshouldbeverycautiousaboutremovingpagesfromyousitebecause othersitesmaylinktoyoursitethroughtheverypageyouremove!Ratherthanremoving apagecompletelyfromtheserver,youmaywanttoaddasimpleredirectinthe <head>sectionofthepage: Number of seconds before user is sent to a different page Page where visitor will be redirected

<metahttpequiv="Refresh"content="5URL=http://www.newpage.url"/>

Whetheryouaddordeletepagesfromyoursite,you'llprobablywantsomeorallofthe menusonyoursitetoreflectthesechanges.Asdiscussedearlier,thiscanbeabigjob dependingonyoursite. Whenyou'vemadeallyourchangestothenewandexistingpagesandchangedyour menusaccordingly,you'lluploadittoyourserver.