Hyperlinks

1. Hyperlinks Modified by Linda Kenney 3/23/10 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. 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. • Also, not valid strict XHTML From http://www.htmldog.com/guides/htmlbeginner/links/ Links on the Web

15. 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:linda.kenney@granite.edu">linda.kenney@granite.edu</a>. </p> Links on the Web

16. 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 . Links on the Web

17. 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 faq.html#ExamReview #ExamReview Links on the Web

18. 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

19. 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

20. 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

21. 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

22. 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

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