1 / 31

Hyperlinks

Hyperlinks. Fall, 2008 Modified by Linda Kenney 2/20/08. Overview of links on the Web. As we’ve already discussed, hyperlinks , or “links,” are what separate XHTML from most other markup languages and make the Web a “web”. Links are simply connections between Web resources.

amena-salinas
Download Presentation

Hyperlinks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Hyperlinks Fall, 2008 Modified by Linda Kenney 2/20/08 Links on the Web

  2. Overview of links on the Web • As we’ve already discussed, hyperlinks, or “links,” are what separate XHTML from most other markup languages and make the Web a “web”. • Links are simply connections between Web resources. • You may find it helpful to think of a link as an active cross-reference. Links on the Web

  3. Overview of links on the Web (cont.) • The overwhelming majority of Web pages are visited as the result of the user following a link from another Web page. • Understanding links is absolutely central to becoming a Web author. • Once we understand links and how to create them we will be able to design and build Web presentations. • Remember, a web presentation is a collection of related Web pages. A useful Web presentation requires the use of links to implement the connections among its component pages. Links on the Web

  4. Anatomy of a link • A link has a label and a destination. • The label is the part of the link that is visible to the user within the Web page. • In many cases, this is the blue, underlined text that the user clicks on in order to activate the link. • The destination is the resource to which the link will take the user when activated. • In the vast majority of cases, the destination of a link is another Web page. • But it might also be a file to download, a sound or video to play, an image or Acrobat file to display, or any number of other possibilities. Links on the Web

  5. Creating a link • To create a link, you use the <a> element to establish the source anchor for that link. • The <a> element is an inline container element, so it does not imply a line break and requires an end tag. • It will surround the page content that will be used as the link’s label. • Often, the contents of the <a> element will be text, but image elements may also be included. Links on the Web

  6. Click here • When constructing a link to another page, HTML authors often use sentences like "Click here to learn about the moon." Unfortunately, they choose to make the words "Click here" the link, and for people using voice output software this can be extremely confusing and uninformative. • This is because screen readers are typically designed to move through Web documents one link at a time. • Writers are advised to incorporate meaningful words into their links. From: http://www.utoronto.ca/atrc/rd/library/papers/accessWWW.html Links on the Web

  7. Creating a link (cont.) • For most links, the destination anchor is assumed to be the top of another Web page. • The destination anchor for the link is specified by assigning the URL of the destination page to the <a> element’s href attribute. • Example: <a href="http://www.yahoo.com/"> Yahoo!</a> Links on the Web

  8. Links to remote resources • Resources which are not part of our presentation are considered remote resources. • Any link whose destination anchor is within another presentation is a link to a remote resource. • When specifying the destination of such a link, we must use an absolute URL. <p>See the <a href="http://pubpages.unh.edu/~ltv6/cs403/">CS403 homepage</a> for additional details.</p> Links on the Web

  9. Links to remote resources (cont.) • An absolute URL is a full and complete URL that contains all the information needed for the browser to retrieve the specified resource. • The only way to specify remote resources is with absolute URLs. Links on the Web

  10. Links to remote resources (cont.) • The most error-free way to obtain the absolute URL of a remote resource is to display that resource in a Web browser. • Select the absolute URL in the browser’s location bar and copy it to the clipboard. • Then, return to your text editor and paste the URL stored in the clipboard into your XHTML source as the quoted value of the <a> element’s href attribute. Links on the Web

  11. Links to local resources • It’s impossible to create a Web presentation without using links to local resources. • Virtually all Web presentations consist of several pages that are under the control of a single author or organization. • From the perspective of any of these pages, all the others would be considered local resources. • Using relative URLs whenever we access a local resource creates presentations that are more flexible and more portable. • All links to local resources should use a relative URL as the value of their href attribute. <p>When you are ready, place your <a href="order.html">order</a>.</p> Links on the Web

  12. Links to local resources (cont.) • Links to local resources are often referred to as navigational links, since they allow a user to navigate among the pages in a presentation. • Since navigational links are the tools that users will use to delve deeper into and explore your presentation, you should carefully consider the label and destination of each and every one. Links on the Web

  13. Relative URLs • A relative URL contains only a part of the info a browser needs to access a specific resource. • The missing parts are assumed to be the same as they were for the resource that contains the relative URL. • In other words, when it gets a relative URL, a browser returns to the same location on the same server from which it retrieved the current page, and uses the relative URL to locate a new resource from that starting place. Links on the Web

  14. Some additional examples • Let’s use the following illustration • Notice that none of these examples goes back up a branch of the tree Links on the Web

  15. Parent directories (folders) • In a directory tree, every directory except the one at the very top has one and only one parent directory. • The parent directory of a directory is whatever directory contains that directory. • In the directory tree below, public_html is the parent directory of pages, and pages is the parent directory of catalog. • We cannot get back to the parent directory of a higher directory simply by using its name. • When we use an explicit name in a path, that name is always assumed to be farther down the branch, never up. • To go up a branch of the tree, we capitalize on the fact that there is only one way up from any given location. • Each directory has one, and only one, parent directory. • We don’t need to reference it by its specific name; we can use a generic name instead. • The generic name we use to specify the parent directory in a relative URL is .. • Type it as two periods with no space between them; it’s typically pronounced “dot-dot”. Links on the Web

  16. Examples using parent directories • Here’s another version of the previous illustration that shows additional examples involving parent directories. • We can specify any local file from any other using relative URLs. Links on the Web

  17. Opening link in a new browser window • Use target attribute <a href= "http://www.yahoo.com/" target="_blank" > Yahoo!</a> • Opens the link in a newly spawned window, rather than replacing the web page the user is on, which at first thought may sound like a good idea as it doesn't take the user away from your site. • There are a number of reasons why you shouldn't do this however. • From a usability point of view, this method breaks navigation. The most commonly used navigation tool on a browser is the "back" button. Opening a new window disables this function. • On a wider, more general usability point, users do not want new windows to be popping up all over the place. If they want to open a link in a new window then they can choose to do so themselves. From http://www.htmldog.com/guides/htmlbeginner/links/ Links on the Web

  18. Email links • A link can allow the user to send an e-mail with their browser’s built-in mail client. • To do so, use a URL with a mailto: scheme • Although not necessary, it’s often useful to repeat the e-mail address as the link label so it remains useful even if the page is printed. • This also makes it useful even if viewed in a browser that has no built-in mail client. <p>Contact me at <a href="mailto:L.Kenney@unh.edu">L.Kenney@unh.edu</a>. </p> Links on the Web

  19. FTP links • Links are also often used to download files from FTP servers. • To do so, use a URL with an ftp:// scheme • Note that this is typically only used on FTP servers that support anonymous FTP access. • Since cisunix does not support anonymous FTP access, this technique cannot be used in your work for this course. • However, if you use a URL with an http:// scheme to access a file that the browser cannot display, most browsers will give the user the opportunity to save that file to a local disk. <p><a href="ftp://someftpserver.net/pub/files/outline.doc">Download now. </a></p> <p><a href="http://someftpserver.net/pub/files/outline.doc">Download now.</a></p> Links on the Web

  20. Destination anchors • You can think of each Web page as starting with an implied destination anchor. • When a link specifies the URL of that page as its destination, this implied anchor is at the top of the document . http://pubpages.unh.edu/~ltv6/pages/faq.html pages/faq.html ../pages/faq.html faq.html Links on the Web

  21. Destination anchors (cont.) • It is possible to specify other destination anchors within a Web page. • To do so, a fragment identifier is added to the end of the URL. • A fragment identifier always starts with a pound sign (#) and indicates a specific destination anchor within a page. • Fragment identifiers may appear at the end of both absolute URLs and relative URLs. • They may also be used as a complete URL if they are referencing a destination anchor elsewhere in the same document. http://pubpages.unh.edu/~ltv6/pages/faq.html#ExamReview pages/faq.html#ExamReview ../pages/faq.html#ExamReview faq.html#ExamReview #ExamReview Links on the Web

  22. Creating destination anchors • Most XHTML elements can be turned into destination anchors using an id attribute. • Certain rules govern the values of your id attributes. • The values of all the id attributes used in a single page must be unique. • The matching between a fragment identifier and the value of an id attribute is case-sensitive. • Avoid spaces and unusual characters in your id attribute values. • The pound sign (#) does not appear in the id attribute value. (It simply indicates the beginning of a fragment identifier in a URL.) <h1 id="chap2">Chapter Two</h1> <img id="logo" src="../images/logo.gif" alt="WidgetCo corporate logo" /> <div id="footer">Place footer contents here</div> Links on the Web

  23. Creating destination anchors (cont.) • Commonly, however, when a destination anchor is needed, it’s created using the <a> element with an id attribute. • If an <a> element does not have an href attribute, it does not get rendered as or act like a hyperlink. • Instead, assuming it has an id attribute, it acts as a named anchor. <a id="ExamReview">review for the exam</a> <a id="logo"><img src="../images/logo.gif" alt="WidgetCo corporate logo" /></a> Links on the Web

  24. Examples using fragment identifiers • Consider the examples in the following illustration: Links on the Web

  25. Accessibility and links • Links present special challenges to disabled users. • To better accommodate screen readers, you can use a title attribute for the <a> elements that define links. • The value of the title attribute should be some text that adds information about the link. • Many screen readers will read this text along with the link label. • Some graphical browsers will display this text as a tool tip when the user moves the mouse pointer over the link label. Links on the Web

  26. Accessibility and links (cont.) • Links can also present challenges for users with limited use of their hands. • A user with limited use of their hands may find that it’s easier to navigate the Web using a keyboard than it is using a mouse. • The <a> element can accept an accesskey attribute that will associate a keyboard shortcut with that link. • Use a single character as the value of the accesskey attribute. • The way in which browsers implement keyboard shortcuts varies, but Windows browsers typically use the Alt key in combination with the specified character. • The <a> element can also accept a tabindex attribute with a value between 0 and 32767. • When the Tab key is used to move among the links within a page, those links with tabindex values will be selected according to the order of those values. Links on the Web

  27. Summary • We now know how to create a wide variety of hyperlinks. • Now we can begin to design and create actual Web presentations. • And that means we can truly consider ourselves Web authors. • Now it’s time to move on to some more advanced topics. Links on the Web

  28. Review questions • Explain the concept of a hyperlink and why it is central to the Web. • Why do we need to learn how to create hyperlinks before we can create Web presentations? • How does the concept of an anchor relate to a hyperlink? • How is the direction of a hyperlink determined in terms of anchors? • Explain the role of the label and the destination in the context of a hyperlink. • For what two purposes is the <a> element commonly used, and why is it a container element? • Distinguish between local and remote resources. • Distinguish between relative and absolute URLs. • How does a relative URL work, since it doesn’t specify all the information needed to uniquely identify a file? Links on the Web

  29. Review questions (cont.) • What type of URL is most often used for local resources and why? • What type of URL is most often used for remote resources and why? • Explain the concept of a parent directory and explain how you would specify one in a relative URL. • Draw a directory tree of an imaginary Web presentation including images and Web pages. For each page, create a list showing how you would create links to every other page and how you would utilize each image. Use one of the images as the label for one of the links. Be sure to use only relative URLs. • What is the role of a fragment identifier in a URL? How would you use one when creating a link? How would you define the destination anchor to which the fragment identifier refers? • Explain three mechanisms that can be used to make links more accessible to disabled users. • Write a link that would allow a user to send you e-mail when activated. Links on the Web

  30. Key terms Absolute URL Anchor Destination Destination anchor Direction Directory tree Fragment identifier Hyperlink Label Link Local resource Named anchor Navigational link Parent directory Path Relative URL Remote resource Links on the Web

  31. XHTML elements presented <a>…</a> Links on the Web

More Related