XP

Lecture 2: Adding Hypertext Links to a

Web Page

1
 XP

Learning Objectives
Create hypertext links between elements within a
Web page
Create hypertext links between Web pages
Review basic Web page structures
Create hypertext links to Web pages on the Internet
Distinguish between and be able to use absolute and
relative pathnames
Create hypertext links to various Internet resources,
including FTP servers and newsgroups

2
 XP

Creating a Hypertext Document

Hypertext documents contain hypertext links,
items that you can select to view another topic or
document, often called the destination of the link.
These links can point to:
another section
the same document
to a different document
to a different Web page
to a variety of other Web objects

3
 XP

Opening A Web Page

This figure shows
that a browser
may only show a
portion of the
web page. The
user must scroll
down to see the
rest of the web
page.

vertical scroll bar

horizontal scroll
bar can also be
shown

4
 XP

Adding Hypertext Links

You can place

hypertext links at
the top of a web
page to make it
easier for the
user to navigate
to a particular
section of the
document instead
of scrolling.

5
 XP

How an Anchor Works

When the user clicks
hypertext links one of the hypertext
links, the link will go
directly to that section
(anchor, which is the
destination of the link)
within the web page.

anchor

6
 XP

Creating Anchors
The <a> tag creates an anchor, text that is specially
marked so that you can link to it from other points in a
document.
Text that is anchored is the destination of a link; it is not
the text you click on.
Each anchor has its own anchor name, using the “name”
attribute i.e. <a name=“cc”>Classes</a>.
An anchor doesn’t have to be text. You can mark an
inline image as an anchor.
Adding an anchor does not change your document’s
appearance in any way. It merely creates locations in
your Web page that become destinations of links.

7
 XP

Creating Links
To create a link to an anchor, use the same <a> tag you used
to create the anchor.
The <a> tags used to create links are sometimes called link
tags.
Use the href attribute, which is short for Hypertext
Reference, to indicate the location to jump to.
href can refer to an anchor that you place in the document or to a
different Web page or a resource anywhere on the Internet
it is important to note that the href attribute is case sensitive
You link to an anchor using the anchor name preceded by a
pound (#) symbol i.e. <a href=“#gra”>Grading</a>.

8
 XP

Creating Links Continued

After you create You should be careful to make
the anchors that each anchor name unique within a
serve as document.
destinations for
your links, you
need to create the
links themselves.

The <a> tag

you use to create
the anchor and
the href
attribute to
indicate the
location to jump
to.

9
 XP

Text Links in the Browser

If the headings do
not appear as text
links, check your
code to make sure
that you are using
the <a> and </a>
tags around the
appropriate text,
the href attribute
within the tag, and
the quotes and #
symbols.
Text formatted as links

10
 XP

Web Page Structures

Storyboarding your Web pages before you create
links helps you determine which structure works
best for the type of information you’re presenting.
You want to ensure that readers can navigate easily
from page to page without getting lost.
You’ll encounter several Web structures as you
navigate the Web.
Examining some of these structures can help you
decide how to design your own system of Web
pages.

11
 XP

Linear Structures
This figure shows one common Web page structure, the linear structure, in which
each page is linked to the next and to previous page, in an ordered chain of pages.

Link to
previous page

In this
structure you
can jump only
from one page
to the next or
previous page

Link to next page

12
 XP

Augmented Linear Structure

This figure shows an augmented linear structure, in which you include a
link in each page that jumps directly back to the first page, while keeping
the links that allow you to move to the next and previous pages.

first link jumps to second link jumps back to beginning

previous page

third link
jumps to
third page has three links next page

13
 XP

Hierarchical Structure
This figure shows the
hierarchical structure,
which starts with a
general topic that
includes links to more
specific topics. Each
specific topic includes
links to yet more
specialized topics, and
so on.

In a hierarchical
structure, users can
move easily from
general to specific and
back, but not from
specific to specific.
14
 Hierarchical Structure on XP

AltaVista Web Page

As with the linear
structure, including a link
to the top of the structure
on each page gives users
an easy path back to the
beginning.

Subject catalogs such as

the AltaVista directory of
Web pages often use this
structure. This figure
shows this site, located at
http://www.altavista.com.

15
 Combination of Linear and XP

Hierarchical Structures
This figure shows a hierarchical structure in which each level of
pages is related in a linear structure.
overall structure is hierarchical

information about the play

informatio
n about
the acts

each
level is
linear
the scenes

16
 XP

Web Structures Continued

A little foresight can go a long way toward
making your Web pages easier to use.
The best time to organize a structure is when you
first start creating pages, when those pages are
small in number and more easily managed.
If you’re not careful, your structure can become
confusing and unmanageable for the user.

17
 Multipage Document with
XP

No Coherent Structure
This structure is
confusing, and it makes it
difficult for readers to
grasp the contents of the
overall Web site.
Moreover, a user who
enters this structure at a
certain page might not be
aware of the presence of
the other pages.

18
 Creating Links Among XP
Documents
Unlike creating hypertext
the chem.htm
links between elements on
document, which is
the same page, this process
the document
does not require you to set
containing the links.
an anchor in a file to link
to it; the filename serves
as the anchor or
destination point.

links to the links to the

conttxt.htm linktxt.htm
document, document, which
which contains contains links to
contact various Chemistry
information Web sites.

19
 XP

Linking to a Document
To create a link to a document, use the
same <a> tag with the href attribute i.e. <a
href=“contact.htm”>Contact
me</a>.
In order for the browser to be able to locate
and open contact.htm, it must be in the
same folder as the document containing the
link.

20
 HTML Code that XP

Links to Other Documents

<a> tags to
point to other
documents

21
Browser Displaying Links XP

to Other Documents

links to the Contact and Links

page

22
 Linking to a Section of a XP

Document
To navigate to a specific location elsewhere in a document,
rather than the top, you can set anchors and link to an
anchor you create within the document.
for example, to create a link to a section in the Web page
home.htm marked with an anchor name of “interests,” you create
an anchor in home.htm in the section on Interests, and then enter
the following HTML code in the current document:
<a href=“home.htm#interests”> View my interests </a>
• the entire text, “View my interests,” is linked to the Interests section in the
home.htm file, via the anchor name “interests”
• the pound symbol (#) in this tag distinguishes the filename from the
anchor name

23
 Adding Links to Specific XP

Locations in a Page
The pound symbol
(#) in these tags
(shown in red)
distinguishes the
filename from the
anchor name.

24
 Links in the Chemistry Page that XP
Point to Anchors in the Links Page

links

25
 Linking to Documents XP

in Other Folders
Browsers assume that if no folder
information is given, the file is in the same
folder as the current document.
When referencing a file located in a
different folder than the link tag, you must
include the location, or path, for the file.
HTML supports two kinds of paths:
absolute paths and relative paths.

26
 XP

Absolute Pathnames
An absolute pathname provides a precise location for a file.
With HTML, absolute pathnames begin with a slash (/) and
are followed by a sequence of folders beginning with the
highest level folder and proceeding to the folder that contains
the file.
Each folder is separated by a slash.
After you type the name of the folder or folders that contains
the file, type a final slash and then the filename itself i.e.
/tutorial.02/case/parks.htm.
HTML also requires you to include the drive letter followed
by a vertical bar (|) i.e. /C|/tutorial.02/case/parks.htm.

27
 XP

Folder Tree
This figure shows five
HTML files that are
located in four different
folders.

The top most folder is the

tutorial.02 folder. Within
the tutorial.02 folder are
the tutorial and case1
folders, and within the
case1 folder is the extra
folder.

28
 XP

Absolute Pathname
This figure shows absolute pathnames for five HTML files.

29
 XP

Relative Pathnames
A relative path specifies the location for a file in
relation to the folder containing the current Web
document.
As with absolute pathnames, folder names are
separated by slashes.
Unlike absolute pathnames, a relative pathname does
not begin with a slash.
To reference a file in a folder directly above the
current folder in the folder hierarchy, relative
pathnames use two periods (..) i.e.
../tutorial/chem.htm.
30
 XP

Relative Pathnames Continued

Relative pathnames make your hypertext
links portable.
Unlike absolute pathnames, If you move your
files to a different computer or server, the
hypertext links will stay intact.
If absolute pathnames are used, each link has
to be revised. This can be a very tedious
process.
31
 XP

Relative Pathnames
This figure shows the relative pathnames and their interpretations
for HMTL files and how they would be displayed.

32
 Linking to Documents on the
XP

Internet
To create a hypertext link to a document on the Internet,
you need to know its URL.
A URL, or Uniform Resource Locator, specifies a
precise location on the Web for a file.
You can find the URL of a Web page in the Location or
Address box of your browser’s document window.
Once you know a document’s URL, you can create a link
to it by adding the URL to the <a> tag along with the href
attribute in your text file i.e. <a href
http://www.mwu.edu/course/info.html>Course
Information</a>.

33
 Uniform Resource Locator XP

(URL)
Each URL follows the same format.
The first portion of the URL identifies the
communication protocol, which is a set of rules that
governs how information is exchanged.
Web pages use the communication protocol HTTP,
short for Hypertext Transfer Protocol, so all Web
page URLs begin with the letters “http”.
Following the communication protocol, there is
typically a separator, such as a colon and two slashes
(://) i.e. http://www.mwu.edu.

34
Interpreting Parts of a XP

Uniform Resource Locator (URL)

This figure interprets a Web page with the URL
http://www.mwu.edu/course/info.html#majors.

35
 XP

Link to Another Page on the Web

As long as your
computer is
connected to the
Internet, clicking
the text within the
tag navigates you
to the document
located at the
specified URL.

Links to the College Board AP Internet page

36
 XP

College Board AP Page

Chemistry page
remains open in
the original
browser window

AP page in a
separate browser
window

37
 Displaying Linked Documents
XP

in a New Window
By default, each Web page you open is displayed in the main
browser window, replacing the one you were viewing last.
To force a document to appear in a new window, instead of the
main browser window, you would use the target attribute in the
href tag i.e. <a href=“url”
target=“new_window”>Hypertext</a>
url is the URL of the page, and new_window is a name assigned to the
new browser window
the value use for the target attribute is used by the browser to identify the
different open windows in the current browser session

38
 XP

External Hyperlinks
You can set up external hyperlinks to open in the same browser
window by using the same value for the target attribute.
if you do, the first hyperlink clicked opens the new window and
displays the contents of the external file
as subsequent external hyperlinks are clicked, they replace the
contents of the already opened window, and the contents of the main
browser window remain unaffected
If you want your external documents to be displayed in their own
browser window, you can assign a unique target value for each
hyperlink, or you can assign the _blank keyword to the target
attribute i.e. <a href=“url”
target=_blank>Hypertext</a>.

39
 Linking to File Transfer Protocol
XP

(FTP) Servers
You can create links to other Internet resources,
such as FTP (File Transfer Protocol) servers.
FTP servers can store files that Internet users can
download, or transfer, to their computers
FTP is the communications protocol these file servers
use to transfer information
URLs for FTP servers follow the same format as those
for Web pages, except that they use the FTP protocol
rather than the HTTP protocol i.e. <a href=
ftp://ftp.microsoft.com>Microsoft FTP
server</a>.

40
 XP

Displaying a FTP Site

Different browsers can display the contents of an FTP site in different ways.
This figure shows what it might look like with Internet Explorer.

41
 XP

Linking to Usenet News

Usenet is a collection of discussion forums called
newsgroups that let users exchange messages
with other users on a wide variety of topics.
The URL for a newsgroup is news:newsgroup.
To access the surfing newsgroup alt.surfing, you
place this line in your HTML file i.e. <a
href=news:alt.surfing>Go to the
surfing newsgroup</a>.

42
 Accessing the alt.surfing XP

Newsgroup
When you click a
link to a newsgroup,
your computer
starts your
newsgroup software
and accesses the
newsgroup.

This figure shows

an example of the
Outlook
Newsreader
program.

43
 XP

Linking to E-mail
Many Web designers include their e-mail addresses on
their Web pages, so that users who access the page can
send feedback.
You can identify e-mail addresses as hypertext links.
when a user clicks the e-mail address, the browser starts a mail
program and automatically inserts the e-mail address into the “To”
field of the outgoing message
The URL for an e-mail address is mailto:e-mail_address.
To create a link to the e-mail address [email protected], the
following code would be entered
<a href=mailto:[email protected]>[email protected]</a>

44
 XP

Mail Message Window

window opens
when the
[email protected]
link is clicked

45
 XP

Adding an Email Link

the address
itself is in the
code for the
mailto: URL

mail message
window opens
with e-mail
address
already
inserted

46
 XP

Summary
• Learned how to work with hypertext links.
• Learned how to create anchors within a Web page.
• Created links to anchors.
• Created hyperlinks within a single document and
links to other Web pages.
• Discussed creating hyperlinks to resources
other than Web pages, such as FTP sites, e-
mail addresses and Gopher servers.

47