Hyperlinks

1
Hyperlinks Overview The real power of the Worl
d Wide Web is the ability to move from one page
to another and from one site to another with a
click of the mouse button. This lesson
focuses on how to create the hyperlinks that
allow that to happen.
2
Objectives After completing the lesson, students
will be able to ? Differentiate between absolute
and relative URLs, including when each is to be
used ? Write the correct syntax for email links,
links to web pages, and links to FTP sites
? Use the a element appropriately when
hard-coding HTML, including the href, name, and
target attributes ? Create within-page, within-we
b, and external hyperlinks ? Set hyperlink colors
by two different methods (a) the body element
attributes link, vlink, and alink and (b) the st
yle element properties alink, avisited, and
aactive State at least three significant dos an
d donts of linking
3
Key terms Absolute URLs Anchor Hyperlink Name
Relative URLs Target
4
Activity 1 1 Hyperlinks allow you to jump from on
e web page to another by clicking the hyperlinked
text or graphics. The most common hyperlink uses
the a element (also called the anchor element)
with a destination and a label.
The destination specifies what happens when you
click the link (for example, display a new page,
send an email, download a file, and so on). In
the example below, the href"page2.html" refers t
o linking to a web page named page2.html.
5
In addition to the destination and the label, a
hyperlink may also have a target. The target
indicates where the destination page will be
displayed (for example, in the same browser
window or in a new window). The target status is
often omitted because the default for most browse
rs is to open new pages in the same browser
window. In the following example, the "target_bl
ank" indicates that the linked web page will open
in a new browser window.
6
2 There are four general types of site structure
. (These are discussed in greater detail later on
in the course.) ? Linear A sequential structure
in which the audience is limited to going forward
or backward one page at a time
? Hierarchical Based on a top-down design of
categories and subcategories with direct links
from the home page to each of the main topics of
the course ? Random access Allows users to move
from wherever they are to any other place on the
website ? Mixed Integrates various aspects of th
e other types, making it the least limiting of
the structures
7
Each of these types of site structure has strong
implications for what types of hyperlinks must be
included on the individual web pages within the
site. Two things to consider are
? Make sure you always include a way back from
each page so that you ensure that there are no
dead-end or static pages. ? Navigation bars can b
e used to provide efficient navigation within the
site structure.
8

• 3 Student Guide Link Destinations.
• There are three different types of link
  destinations.Within-web links (intrasystem links)
  link to a different page within the same website.
  In the Link Destinations example, clicking the
  Guitar hyperlink on the Instruments page takes
  the viewer to the Guitar web page within the same
  website.
• Within-page links (sometimes called intrapage
  links) link to another location on the same page.
  In the Link Destinations example, clicking the
  Acoustic hyperlink on the Guitar web page takes
  the viewer to the Acoustic section of the same
  web page.
• External links (intersystem links) link to a
  different page in a different website, quite
  possibly on a different server. In the Link
  Destinations example, clicking the MandoMagic
  hyperlink on the Mandolin web page takes the
  viewer to a web page outside of the current
  website.

9
The image shows a three-page website on the left
captioned Your Site and a twopage website on
the right captioned Another Site. Your Site
on the left has a home page entitled Instruments
that connects to two other pages entitled Guitar
and Mandolin. The Instruments page has hyperlinks
to both of the other pages. A grey arrow connects
the Guitar link on the Instruments page to the
Guitar page, and that arrow is labeled
within-web (intrasystem) link.
The Guitar page has Acoustic and Electric
links at the top of the page with Acoustic and
Electric subsections below the links. A grey
arrow connects the Acoustic link to the
Acoustic subsection, and that arrow is labeled
within-page (intrapage) link.
The Mandolin page has a MandoMagic link under
its Resources heading. A grey arrow connects that
link with the home page of the website on the
right, and that arrow is labeled external
(intersystem) link.
10
4 Hyperlinks are inserted using the a element.
Either text or images (or both) can be used as
anchors to link to other locations. (This lesson
covers text links. Image links are covered in
another lesson.) The anchor element requires use
of an attribute that specifies the destination
location of the link. The a element may be used i
nside (but not outside) another container
element, for example, inside a p or h1 element.
Example Correct use of the a element Visit
the ID 4 the Web Web
site. Incorrect use of the a element ref"id4theweb.com"ID 4 the Web has much to
offer teachers and students.
11
5 The href attribute is used to link to a
specific URL. The basic syntax for the href attri
bute is label text Exampl
e Visit the rg/" WOW Web site . renders as Visit
the WOW website.
12
6 View the Student Guide Link Destinations
graphic. How would you code the link for the Man
dolin pages MandoMagic link, assuming the URL
is mandomagic.com.
13
The correct response is omagic.com/"MandoMagic
Ended on tuesday
14
Activity 2 To use the href attribute correctly, y
ou must know the difference between absolute and
relative URLs. 1 Absolute URLs give the full addr
ess, including protocol, host (server), path, and
filename like the following http//www.mrmuzik.c
om/instruments/guitar/ Absolute URLs must be us
ed for all external links. Ending an absolute URL
with the path (directory) and a trailing forward
slash (as in the preceding example) tells the
browser to display that directorys default or
home page (even if you dont know its
name). Using absolute URLs within a website can
wreak havoc. The absolute URL reference will
always point to the specified location. If that
location no longer exists or has
changed names or folders, the link will appear as
a dead link when the viewer attempts to display
the page. In addition, if the link refers to a
specific location on a local computer, the link
will also be dead.
15
2 Relative URLs start from the current directory
(the directory or folder in which the active web
page resides). Use relative URLs for links within
your own site (including on the same page). The
following examples assume a web directory
structured as follows Main web directory listin
g lesson1.htm lesson2.htm lesson3.htm
/practice (a folder in the current
directory) file.htm (inside t
he /practice folder) The following is an example
of a link to a different page within the same
directory as the current page
16
Example The following is an example of a link to
a page in a subdirectory of the active
directory Example From the lesson3.htm pag
e, link to lesson1.htm (note that lesson1.htm
is in the same directory as the current page, le
sson3.htm) Lesson 1
17
Example From the lesson1.htm page, link to fil
e.htm (note that file.htm is in the
subdirectory named practice) ile.htm"File page
18

• The following is an example of a link to a page
  in the parent directory of the active directory
  
• Example
• Advise students to use relative URLs whenever
  possible. They are usually faster than absolute
  URLs and it makes it easier to maintain a site
  (for example, if you change the directory name).
• 3 Ask students to view the Student Guide Link
  Destinations again. Ask them to describe the
  types of hyperlinks (absolute or relative) that
  would need to be included on each page to
  properly link to the destinations referenced in
  the graphic.
• The correct answers are
• From the Instruments page Guitar link to the
  Guitar page Relative URL
  
• m From the Guitar page Acoustic link to the
  Guitar page Acoustic section Relative URL
  
• m From the Mandolin page MandoMagic link to the
  MandoMagic website Absolute URL
  

19
Activity 3 1 The name attribute allows you to set
a specific location on a page so that you can
link to it. (This is very useful for within-page
links.) In the example shown, the Subject 1
location within the page is where you want the
Subject 1 link within the Table of Contents (TOC)
to take the user. Notice the pink arrow showing
the connection between the TOC link and the
Subject 1 location within the page.
From the file.htm page, link to lesson2.htm
(note that file.htm is in the /practice
subdirectory, but lesson2.htm is in the main
directory) Lesson 2
(Note the ".." means to move up/back one level.
)
20
Why use within-page links? One answer is that
within-page links allow the user to get to
specific locations within a long page more
efficiently. In addition, within-page links can
assist the user in navigating section-by-section
if desired. Another common use
for within-page links is top of page links,
links that allow the user to return to the top of
the current page quickly. Since navigation bars
are most frequently found at the top of a page,
the practice of providing top of page links at
appropriate places within your pages increases
your sites usability. The basic syntax for creat
ing a name anchor you can link to is
anchor name text
The basic syntax for creating the link that takes
you to a name anchor on the same page is
label text
The octothorp () indicates that the reference
that follows the href is an anchor name.
21
Using the previous example (with a top of page
link added), explain that this is how the name
anchor and the href anchor should be coded. Note
that the pagetop name anchor element doesnt
enclose any text between its start and end tags
(it is not required to)
When checking within-page links, you may find
that they dont appear to be working. You should
keep in mind that, if the page is very short,
clicking the links wont appear to do anything.
This is because the links destination is already
visible onscreen and/or the page isnt long
enough to jump to anywhere that causes the page
to shift onscreen. To link to a specific name anc
hor on a different page, append the anchorname
to the absolute URL for that page. In that case,
the correct syntax is com/path/page.htmanchorname" label text
22
2 View the Student Guide Link Destinations
graphic again. How would you code the link for
the Guitar pages Acoustic link (both the name
anchor and the href anchor).
23
The correct answers are The Acoustic link in t
he Table of Contents at the top of the Guitar
page should look like this Acoustic The name anchor should be applied
to the Acoustic heading at the top of the
Acoustic section of the Guitar page as follows
Acoustic
24
Activity 4 1 The target attribute is used to spec
ify where the clicked link will open, that is,
which window. If you do not specify a target
window, most browsers default to opening the
linked page in the same browser window.
If you want to display the linked page in a new
window, insert the target attribute after the
href attribute using the following syntax
label texta (Note The underscore character must precede t
he word blank.)
25
Do the following practice activity. Exercise A in
the Student Exercise Unit 2, Lesson 5 includes t
hese steps. Exercise A 1. Using TextEdit, open t
he file previously saved as play.htm.
2. Choose Save As from the File menu and save the
new file as index.htm. 3. Repeat step 2 three mor
e times, saving the files as who.htm, what.htm,
and where.htm. 4. Using TextEdit, open the file y
ou just saved as who.htm. 5. Remove everything fr
om the file that has to do with the other two
questions. 6. Save the file as who.htm. 7. Repea
t these steps with where.htm and what.htm.
26
8. Using TextEdit, open the file just saved as
index.htm. 9. Remove everything from the file tha
t answers any of the questions, leaving you with
just the questions and the page header.
10. Create links out of the three topic area
questions that link to the appropriate page.
These should all be relative links.
11. On the saved index.htm page, create a link to
your school or districts home page. Save the
file. 12. Open each of the pages and create lin
ks on each that return the user to index.htm.
Save each of these files. 13. Display the files
in a browser.
27
Activity 5 1 The href attribute is used in conjun
ction with the mailto phrase to create a link th
at, when clicked, initiates an email message to
the specified address. The syntax for an email li
nk is label text
Example 2 Do the following practice activity.
Exercise B in the Student Exercise Unit 2,
Lesson 5 includes these steps.
3 The href attribute can be used to link to an F
TP download site (using the FTP protocol, just as
it is used to link to a web page using the HTTP
protocol). The syntax for an FTP link is f"ftp//ftp.site.com/path"label text
28
4 The href attribute can also be used to link to
a specific file, including program files, sounds,
movies, and other files (including PDF files).
When the link is clicked, the browser attempts to
open the helper application appropriate to
viewing, hearing, or watching the file.
The syntax for a file link is /www.site.com/path/file.ext"label text
The .ext is the file extension. For example., a
movie might have the extension .avi, .mov,
.mpg, or .qt, while an Adobe Acrobat file has
a .pdf extension.
29
Example file link The following example would re
nder as E-mail Jim Bob. ome.com"E-mail Jim Bob. Exercise B 1. Usi
ng TextEdit, open the file previously saved as
index.htm. 2. Add an email link at the bottom of
the page to allow users to send email to you.
3. Repeat step 2 three more times, adding the
email link to the who.htm, what.htm, and
where.htm files. 4. View the files in a browser.
Desi
gn Document (.pdf file)
30

• Activity 6
• 1 There are two ways to designate the colors of
  your clickable text (hyperlinks) to be something
  other than the following default colors
  
• Blue for unvisited links
• Purple for visited links
• Red for active links (currently selected links)

31

• 2 The old, deprecated way of setting link colors
  is to use the following attributes of the body
  element
  
• link (for unvisited links)
• vlink (for visited links)
• alink (for active links)
• For example, here is an opening tag using
  these attributes
  
• alink"fuchsia"
  
• As you can see, link colors can be set using
  standard color names or hexadecimal values
  preceded by an octothorp.

32

• 3 The newer, preferred way to set link colors is
  by using the style element. Theyve already seen
  how the style element can be used to set an HTML
  documents default text characteristics
  (typeface, size, and color). The following
  properties (used inside the head sections style
  element) are used to specify hyperlink colors
• Alink (for unvisited links)
• Avisited (for visited links)
• Aactive (for active links)

33
For example, the following style element sets
hyperlinks to the same colors as does the
deprecated example above title te
xt ... Note Whil
e it is possible to set hyperlink colors, it is
not recommended. For example, because blue is the
standard color for unvisited links, your site's
visitorsmay not recognize other colors as
hyperlinks and thus may never click them.Whenever
you stray from these standards, you risk
confusing your audience.
34

• Activity 7
• There are several linking dos and donts
• Whether using absolute or relative URLs, it is
  best to use all lowercase letters because some
  servers are case-sensitive.
  
• Use key words for your links label text rather
  than whole sentences.
  
• Do not use click here as your label text. It
  tells the user nothing about where the click will
  lead.
  
• Dont overdo the use of links, especially links
  embedded in paragraph text. It can be very
  distracting for users.
  
• Check your links frequently to make sure they
  are still good.
  
• Avoid static or dead-end web pages. These are
  web pages that dont lead anywhere, that is, they
  dont contain any links back to other locations
  within your website.
• On longer pages, include links to the top of the
  page at appropriate intervals.

35
Background resources For more information about t
hese particular tags, visit A Beginners Guide to
HTML http//archive.ncsa.uiuc.edu/General/Inte
rnet/WWW/HTMLPrimer.html Click Printable Versi
on, then scroll down to the Linking section.