Hyperlinks

04/20/23 Links on the Web 1

Hyperlinks

Fall, 2008

Modified by Linda Kenney2/20/08


Overview of links on the WebAs 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.


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.


Anatomy of a linkA 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.


Creating a linkTo 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.


Click hereWhen 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


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 to remote resourcesResources 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 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 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 to local resourcesIt’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 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.


Relative URLsA 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.


Some additional examplesLet’s use the following illustration

Notice that none of these examples goes back up a branch of the tree


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


Examples using parent directoriesHere’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.


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/


Email linksA 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:[email protected]">[email protected]</a>.</p>


FTP linksLinks 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="http://someftpserver.net/pub/files/outline.doc">Download now.</a></p>

<p><a href="ftp://someftpserver.net/pub/files/outline.doc">Download now. </a></p>


Destination anchorsYou 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


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#ExamReviewpages/faq.html#ExamReview../pages/faq.html#ExamReviewfaq.html#ExamReview

#ExamReview


Creating destination anchorsMost 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>


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>


Examples using fragment identifiers

Consider the examples in the following illustration:


Accessibility and linksLinks 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.


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.


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


Review questions1. Explain the concept of a hyperlink and why it is central

to the Web.2. Why do we need to learn how to create hyperlinks

before we can create Web presentations?3. How does the concept of an anchor relate to a

hyperlink?4. How is the direction of a hyperlink determined in terms

of anchors?5. Explain the role of the label and the destination in the

context of a hyperlink.6. For what two purposes is the <a> element commonly

used, and why is it a container element?7. Distinguish between local and remote resources.8. Distinguish between relative and absolute URLs.9. How does a relative URL work, since it doesn’t specify

all the information needed to uniquely identify a file?


Review questions (cont.)10.What type of URL is most often used for local resources

and why?11.What type of URL is most often used for remote

resources and why?12.Explain the concept of a parent directory and explain

how you would specify one in a relative URL.13.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.

14.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?

15.Explain three mechanisms that can be used to make links more accessible to disabled users.

16.Write a link that would allow a user to send you e-mail when activated.


Key termsAbsolute URLAnchorDestinationDestination anchorDirectionDirectory treeFragment

identifierHyperlink

LabelLinkLocal resourceNamed anchorNavigational linkParent directoryPathRelative URLRemote resource


XHTML elements presented<a>…</a>

Documents

Hyperlinks