Hyperlinks

1
Hyperlinks

• Fall, 2008
• Modified by Linda Kenney
• 2/20/08

2
Overview of links on the Web

• As weve 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.

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.

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.

5
Creating a link

• To create a link, you use the ltagt element to
  establish the source anchor for that link.
• The ltagt 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 links label.
• Often, the contents of the ltagt element will be
  text, but image elements may also be included.

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/acce
  ssWWW.html

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 ltagt elements href attribute.
• Example
• lta href"http//www.yahoo.com/"gt Yahoo!lt/agt

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.

ltpgtSee the lta href"http//pubpages.unh.edu/ltv6/
cs403/"gtCS403 homepagelt/agt for additional
details.lt/pgt
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.

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 browsers 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 ltagt elements
  href attribute.

11
Links to local resources

• Its 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.

ltpgtWhen you are ready, place your lta
href"order.html"gtorderlt/agt.lt/pgt
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.

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.

14
Some additional examples

• Lets use the following illustration

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 dont 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 its typically pronounced dot-dot.

16
Examples using parent directories

• Heres 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.

17
Opening link in a new browser window

• Use target attribute
• lta href "http//www.yahoo.com/" target"_blank"
  gt Yahoo!lt/agt
• 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/li
  nks/

18
Email links

• A link can allow the user to send an e-mail with
  their browsers built-in mail client.
• To do so, use a URL with a mailto scheme
• Although not necessary, its 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.

ltpgtContact me at lta href"mailtoL.Kenney_at_unh.edu
"gtL.Kenney_at_unh.edult/agt. lt/pgt
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.

ltpgtlta href"ftp//someftpserver.net/pub/files/outl
ine.doc"gtDownload now. lt/agtlt/pgt
ltpgtlta href"http//someftpserver.net/pub/files/out
line.doc"gtDownload now.lt/agtlt/pgt
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 page
s/faq.html ../pages/faq.html faq.html
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.htmlExamR
eview pages/faq.htmlExamReview ../pages/faq.html
ExamReview faq.htmlExamReview
ExamReview
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.)

lth1 id"chap2"gtChapter Twolt/h1gt ltimg id"logo"
src"../images/logo.gif" alt"WidgetCo corporate
logo" /gt ltdiv id"footer"gtPlace footer contents
herelt/divgt
23
Creating destination anchors (cont.)

• Commonly, however, when a destination anchor is
  needed, its created using the ltagt element with
  an id attribute.
• If an ltagt 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.

lta id"ExamReview"gtreview for the examlt/agt lta
id"logo"gtltimg src"../images/logo.gif"
alt"WidgetCo corporate logo" /gtlt/agt
24
Examples using fragment identifiers

• Consider the examples in the following
  illustration

25
Accessibility and links

• Links present special challenges to disabled
  users.
• To better accommodate screen readers, you can use
  a title attribute for the ltagt 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.

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 its easier to navigate the Web using a
  keyboard than it is using a mouse.
• The ltagt 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 ltagt 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.

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 its time to move on to some more advanced
  topics.

28
Review questions

1. 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 ltagt 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 doesnt
   specify all the information needed to uniquely
   identify a file?

29
Review questions (cont.)

1. What type of URL is most often used for local
   resources and why?
2. What type of URL is most often used for remote
   resources and why?
3. Explain the concept of a parent directory and
   explain how you would specify one in a relative
   URL.
4. 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.
5. 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?
6. Explain three mechanisms that can be used to make
   links more accessible to disabled users.
7. Write a link that would allow a user to send you
   e-mail when activated.

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
31
XHTML elements presented

• ltagtlt/agt