Html tutorial.02


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html tutorial.02

  1. 1. XPAdding Hypertext Links to a Web Page BY- mynk 1
  2. 2. XP Learning ObjectivesCreate hypertext links between elements within a Web pageCreate hypertext links between Web pagesReview basic Web page structuresCreate hypertext links to Web pages on the InternetDistinguish between and be able to use absolute and relative pathnamesCreate hypertext links to various Internet resources, including FTP servers and newsgroups 2
  3. 3. XPCreating a Hypertext DocumentHypertext documents contain hypertext links, items that you can select to view another topic or document, often called the destination of the link.These links can point to: ◦ another section ◦ the same document ◦ to a different document ◦ to a different Web page ◦ to a variety of other Web objects 3
  4. 4. XPOpening A Web Page This figure shows that a browser may only show a portion of the web page. The user must scroll down to see the rest of the web page. vertical scroll bar horizontal scroll bar can also be shown 4
  5. 5. XP Adding Hypertext LinksYou can placehypertext links atthe top of a webpage to make iteasier for theuser to navigateto a particularsection of thedocument insteadof scrolling. 5
  6. 6. XP How an Anchor Works When the user clickshypertext links one of the hypertext links, the link will go directly to that section (anchor, which is the destination of the link) within the web page. anchor 6
  7. 7. XP Creating Anchors The <a> tag creates an anchor, text that is specially marked so that you can link to it from other points in a document. Text that is anchored is the destination of a link; it is not the text you click on. Each anchor has its own anchor name, using the “name” attribute i.e. <a name=“cc”>Classes</a>. An anchor doesn’t have to be text. You can mark an inline image as an anchor. Adding an anchor does not change your document’s appearance in any way. It merely creates locations in your Web page that become destinations of links. 7
  8. 8. XP Creating Links To create a link to an anchor, use the same <a> tag you used to create the anchor. The <a> tags used to create links are sometimes called link tags. Use the href attribute, which is short for Hypertext Reference, to indicate the location to jump to. ◦ href can refer to an anchor that you place in the document or to a different Web page or a resource anywhere on the Internet ◦ it is important to note that the href attribute is case sensitive Youlink to an anchor using the anchor name preceded by a pound (#) symbol i.e. <a href=“#gra”>Grading</a>. 8
  9. 9. XP Creating Links ContinuedAfter you create You should be careful to makethe anchors that each anchor name unique within aserve as document.destinations foryour links, youneed to create thelinks themselves.The <a> tagyou use to createthe anchor andthe hrefattribute toindicate thelocation to jumpto. 9
  10. 10. XP Text Links in the BrowserIf the headings donot appear as textlinks, check yourcode to make surethat you are usingthe <a> and </a>tags around theappropriate text,the href attributewithin the tag, andthe quotes and #symbols. Text formatted as links 10
  11. 11. XP Web Page StructuresStoryboarding your Web pages before you create links helps you determine which structure works best for the type of information you’re presenting.You want to ensure that readers can navigate easily from page to page without getting lost.You’ll encounter several Web structures as you navigate the Web.Examining some of these structures can help you decide how to design your own system of Web pages. 11
  12. 12. XP Linear StructuresThis figure shows one common Web page structure, the linear structure, in whicheach page is linked to the next and to previous page, in an ordered chain of pages. Link toprevious pageIn thisstructure youcan jump onlyfrom one pageto the next orprevious pageLink to next page 12
  13. 13. XP Augmented Linear Structure This figure shows an augmented linear structure, in which you include a link in each page that jumps directly back to the first page, while keeping the links that allow you to move to the next and previous pages.first link jumps to second link jumps back to beginningprevious page third link jumps tothird page has three links next page 13
  14. 14. XP Hierarchical StructureThis figure shows thehierarchical structure,which starts with ageneral topic thatincludes links to morespecific topics. Eachspecific topic includeslinks to yet morespecialized topics, andso on.In a hierarchicalstructure, users canmove easily fromgeneral to specific andback, but not fromspecific to specific. 14
  15. 15. Hierarchical Structure on XP AltaVista Web PageAs with the linearstructure, including a linkto the top of the structureon each page gives usersan easy path back to thebeginning.Subject catalogs such asthe AltaVista directory ofWeb pages often use thisstructure. This figureshows this site, located at 15
  16. 16. Combination of Linear and XP Hierarchical Structures This figure shows a hierarchical structure in which each level of pages is related in a linear structure.overall structure is hierarchical information about the play informati on about the acts each level is linear the scenes 16
  17. 17. XP Web Structures ContinuedA little foresight can go a long way toward making your Web pages easier to use.The best time to organize a structure is when you first start creating pages, when those pages are small in number and more easily managed.If you’re not careful, your structure can become confusing and unmanageable for the user. 17
  18. 18. Multipage Document with XP No Coherent StructureThis structure isconfusing, and it makes itdifficult for readers tograsp the contents of theoverall Web site.Moreover, a user whoenters this structure at acertain page might not beaware of the presence ofthe other pages. 18
  19. 19. Creating Links Among XP DocumentsUnlike creating hypertext the chem.htmlinks between elements on document, which isthe same page, this process the documentdoes not require you to set containing the anchor in a file to linkto it; the filename serves asthe anchor or destinationpoint. links to the links to the conttxt.htm linktxt.htm document, document, which which contains contains links to contact various Chemistry information Web sites. 19
  20. 20. XP Linking to a DocumentTo create a link to a document, use the same <a> tag with the href attribute i.e. <a href=“contact.htm”>Contact me</a>.In order for the browser to be able to locate and open contact.htm, it must be in the same folder as the document containing the link. 20
  21. 21. HTML Code that XP Links to Other Documents <a> tags topoint to other documents 21
  22. 22. Browser Displaying Links XPto Other Documents links to the Contact and Links page 22
  23. 23. Linking to a Section of a XP Document Tonavigate to a specific location elsewhere in a document, rather than the top, you can set anchors and link to an anchor you create within the document. ◦ for example, to create a link to a section in the Web page home.htm marked with an anchor name of “interests,” you create an anchor in home.htm in the section on Interests, and then enter the following HTML code in the current document: <a href=“home.htm#interests”> View my interests </a>  the entire text, “View my interests,” is linked to the Interests section in the home.htm file, via the anchor name “interests”  the pound symbol (#) in this tag distinguishes the filename from the anchor name 23
  24. 24. Adding Links to Specific XP Locations in a PageThe pound symbol(#) in these tags(shown in red)distinguishes thefilename from theanchor name. 24
  25. 25. Links in the Chemistry Page that XP Point to Anchors in the Links Pagelinks 25
  26. 26. Linking to Documents XP in Other FoldersBrowsers assume that if no folder information is given, the file is in the same folder as the current document.When referencing a file located in a different folder than the link tag, you must include the location, or path, for the file.HTML supports two kinds of paths: absolute paths and relative paths. 26
  27. 27. XP Absolute Pathnames An absolute pathname provides a precise location for a file. With HTML, absolute pathnames begin with a slash (/) and are followed by a sequence of folders beginning with the highest level folder and proceeding to the folder that contains the file. Each folder is separated by a slash. After you type the name of the folder or folders that contains the file, type a final slash and then the filename itself i.e. /tutorial.02/case/parks.htm. HTML also requires you to include the drive letter followed by a vertical bar (|) i.e. /C|/tutorial.02/case/parks.htm. 27
  28. 28. XP Folder TreeThis figure shows fiveHTML files that arelocated in four differentfolders.The top most folder is thetutorial.02 folder. Withinthe tutorial.02 folder arethe tutorial and case1folders, and within thecase1 folder is the extrafolder. 28
  29. 29. XP Absolute PathnameThis figure shows absolute pathnames for five HTML files. 29
  30. 30. XP Relative PathnamesA relative path specifies the location for a file in relation to the folder containing the current Web document.As with absolute pathnames, folder names are separated by slashes.Unlike absolute pathnames, a relative pathname does not begin with a slash.To reference a file in a folder directly above the current folder in the folder hierarchy, relative pathnames use two periods (..) i.e. ../tutorial/chem.htm. 30
  31. 31. XP Relative Pathnames ContinuedRelative pathnames make your hypertext links portable.Unlike absolute pathnames, If you move your files to a different computer or server, the hypertext links will stay intact.If absolute pathnames are used, each link has to be revised. This can be a very tedious process. 31
  32. 32. XP Relative PathnamesThis figure shows the relative pathnames and their interpretations for HMTL files and how they would be displayed. 32
  33. 33. XP Linking to Documents on the Internet To create a hypertext link to a document on the Internet, you need to know its URL. A URL, or Uniform Resource Locator, specifies a precise location on the Web for a file. You can find the URL of a Web page in the Location or Address box of your browser’s document window. Once you know a document’s URL, you can create a link to it by adding the URL to the <a> tag along with the href attribute in your text file i.e. <a href>Cours e Information</a>. 33
  34. 34. XP Uniform Resource Locator (URL)Each URL follows the same format. ◦ The first portion of the URL identifies the communication protocol, which is a set of rules that governs how information is exchanged. ◦ Web pages use the communication protocol HTTP, short for Hypertext Transfer Protocol, so all Web page URLs begin with the letters “http”. ◦ Following the communication protocol, there is typically a separator, such as a colon and two slashes (://) i.e. 34
  35. 35. Interpreting Parts of a XP Uniform Resource Locator (URL)This figure interprets a Web page with the URL 35
  36. 36. Link to Another Page on the XP WebAs long as yourcomputer isconnected to theInternet, clickingthe text within thetag navigates youto the documentlocated at thespecified URL. Links to the College Board AP Internet page 36
  37. 37. XP College Board AP PageChemistry pageremains open inthe originalbrowser window AP page in a separate browser window 37
  38. 38. Displaying Linked Documents XP in a New Window By default, each Web page you open is displayed in the main browser window, replacing the one you were viewing last. To force a document to appear in a new window, instead of the main browser window, you would use the target attribute in the href tag i.e. <a href=“url” target=“new_window”>Hypertext</a> ◦ url is the URL of the page, and new_window is a name assigned to the new browser window ◦ the value use for the target attribute is used by the browser to identify the different open windows in the current browser session 38
  39. 39. XP External Hyperlinks You can set up external hyperlinks to open in the same browser window by using the same value for the target attribute. ◦ if you do, the first hyperlink clicked opens the new window and displays the contents of the external file ◦ as subsequent external hyperlinks are clicked, they replace the contents of the already opened window, and the contents of the main browser window remain unaffected Ifyou want your external documents to be displayed in their own browser window, you can assign a unique target value for each hyperlink, or you can assign the _blank keyword to the target attribute i.e. <a href=“url” target=_blank>Hypertext</a>. 39
  40. 40. Linking to File Transfer Protocol XP (FTP) ServersYou can create links to other Internet resources, such as FTP (File Transfer Protocol) servers. ◦ FTP servers can store files that Internet users can download, or transfer, to their computers ◦ FTP is the communications protocol these file servers use to transfer information ◦ URLs for FTP servers follow the same format as those for Web pages, except that they use the FTP protocol rather than the HTTP protocol i.e. <a href=>Microsoft FTP server</a>. 40
  41. 41. XP Displaying a FTP SiteDifferent browsers can display the contents of an FTP site in different ways. This figure shows what it might look like with Internet Explorer. 41
  42. 42. XP Linking to Usenet NewsUsenet is a collection of discussion forums called newsgroups that let users exchange messages with other users on a wide variety of topics.The URL for a newsgroup is news:newsgroup.To access the surfing newsgroup alt.surfing, you place this line in your HTML file i.e. <a href=news:alt.surfing>Go to the surfing newsgroup</a>. 42
  43. 43. Accessing the alt.surfing XP NewsgroupWhen you click alink to a newsgroup,your computerstarts yournewsgroup softwareand accesses thenewsgroup.This figure showsan example of theOutlookNewsreaderprogram. 43
  44. 44. XP Linking to E-mail Many Web designers include their e-mail addresses on their Web pages, so that users who access the page can send feedback. You can identify e-mail addresses as hypertext links. ◦ when a user clicks the e-mail address, the browser starts a mail program and automatically inserts the e-mail address into the “To” field of the outgoing message The URL for an e-mail address is mailto:e- mail_address. To create a link to the e-mail address, the following code would be entered <a></a> 44
  45. 45. XP Mail Message Window window opens when link is clicked 45
  46. 46. XP Adding an Email Link the addressitself is in the code for themailto: URLmail messagewindow opens with e-mail address already inserted 46
  47. 47. XP Summary• Learned how to work with hypertext links.• Learned how to create anchors within a Web page.  Created links to anchors. • Created hyperlinks within a single document and links to other Web pages. • Discussed creating hyperlinks to resources other than Web pages, such as FTP sites, e-mail addresses and Gopher servers. 47