Professional Documents
Culture Documents
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>
IncorrectlyNested Tags
<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"/>
PathstoFilesHigherinFileHierarchy
Thefilenamedlotionsoap.htmlalsocontainsalinktoshipping.html.Asillustratedin Figure3,thefilesarenotinthesamefolder.Inthiscase,shipping.htmlislocatedina folderhigherthanthecatalogfolderwherelotionsoap.htmlislocated.Thecorrectformat forthepaththenis: ../filename Example: ../ means in
the folder above File name
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:
<imgsrc="image.url"alt="descriptionofimage"/>
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
<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"/>