Download Links on the Web

Hyperlinks
Fall, 2008
Modified by Linda Kenney
2/20/08
5/23/2017
Links on the Web
1
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”.


5/23/2017
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
2
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.
5/23/2017
Links on the Web
3
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.
5/23/2017
Links on the Web
4
Creating a link
To create a link, you use the <a> element to
establish the source anchor for that link.



5/23/2017
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
5
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
5/23/2017
Links on the Web
6
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>
5/23/2017
Links on the Web
7
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>
5/23/2017
Links on the Web
8
Links to remote resources (cont.)


5/23/2017
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
9
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.
5/23/2017
Links on the Web
10
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>
5/23/2017
Links on the Web
11
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.

5/23/2017
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
12
Relative URLs
A relative URL contains only a part of the
info a browser needs to access a specific
resource.


5/23/2017
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
13
Some additional examples
Let’s use the following illustration

5/23/2017
Notice that none of these examples goes back up a branch of the tree
Links on the Web
14
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”.
5/23/2017
Links on the Web
15
Examples using parent directories
Here’s another version of the previous illustration that shows
additional examples involving parent directories.

5/23/2017
We can specify any local file from any other using relative URLs.
Links on the Web
16
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
5/23/2017
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.
http://www.htmldog.com/guides/htmlbeginner/links/
Links on the Web
17
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
<p>Contact me at
<a href="mailto:[email protected]">[email protected]</a>.
</p>


5/23/2017
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.
Links on the Web
18
FTP links
Links are also often used to download files
from FTP servers.

To do so, use a URL with an ftp:// scheme
<p><a href="ftp://someftpserver.net/pub/files/outline.doc">Download now. </a></p>

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>
5/23/2017
Links on the Web
19
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
5/23/2017
Links on the Web
20
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.
http://pubpages.unh.edu/~ltv6/pages/faq.html#ExamReview
pages/faq.html#ExamReview
../pages/faq.html#ExamReview
faq.html#ExamReview
 They may also be used as a complete URL if they are
referencing a destination anchor elsewhere in the same
document.
#ExamReview
5/23/2017
Links on the Web
21
Creating destination anchors
Most XHTML elements can be turned into
destination anchors using an id attribute.
<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>

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.)
5/23/2017
Links on the Web
22
Creating destination anchors (cont.)

Commonly, however, when a destination anchor is
needed, it’s created using the <a> element with
an id attribute.
<a id="ExamReview">review for the exam</a>
<a id="logo"><img src="../images/logo.gif" alt="WidgetCo corporate logo" /></a>
 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.
5/23/2017
Links on the Web
23
Examples using fragment identifiers
Consider the examples in the following illustration:
5/23/2017
Links on the Web
24
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.


5/23/2017
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
25
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.

5/23/2017
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
26
Summary
We now know how to create a wide variety of
hyperlinks.



5/23/2017
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
27
Review questions
1. Explain the concept of a hyperlink and why it is central to the
2.
3.
4.
5.
6.
7.
8.
9.
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?
5/23/2017
Links on the Web
28
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.
5/23/2017
Links on the Web
29
Key terms
Absolute URL
Anchor
Destination
Destination anchor
Direction
Directory tree
Fragment identifier
Hyperlink
5/23/2017
Label
Link
Local resource
Named anchor
Navigational link
Parent directory
Path
Relative URL
Remote resource
Links on the Web
30
XHTML elements presented
<a>…</a>
5/23/2017
Links on the Web
31