Transcript XP - Saddleback College

XP
Tutorial 2
Adding Hypertext Links
to a Web Page
1
XP
Tutorial 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 (FTP servers, newsgroups, etc).
2
XP
Creating a Hypertext Document


Hypertext documents contain hypertext
links, items that you can select to view
another topic or document (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
Creating Anchors



The <a> tag creates an anchor—text that
is specially marked so it links 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>.
6
XP
Creating Anchors (continued)


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
How an Anchor Works
hypertext links
When the user clicks
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
8
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.
9
XP
Creating Links (Continued)



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>.
10
XP
Creating Links (Continued)
After you create
the anchors that
serve as
destinations for
your links, you
need to create the
links themselves.
You should be careful to make
each anchor name unique within a
document.
The <a> tag
you use to create
the anchor and
the href
attribute to
indicate the
location to jump
to.
11
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
12
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.
13
XP
Web Page Structures (Continued)

Examining some of these structures can
help you decide how to design your own
system of Web pages.
14
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
15
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
previous page
third page has three links
second link jumps back to beginning
third link
jumps to next
page
16
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.
17
Hierarchical Structure on
AltaVista Web Page
XP
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.
18
XP
Linear and Hierarchical Structures
This figure shows a hierarchical structure in which each level of
pages is related in a linear structure.
information about the play
information
about the
acts
each level
is linear
the scenes
19
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.
20
Multipage Document with
No Coherent Structure
XP
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.
21
XP
Creating Links Among Documents
Unlike creating hypertext
links between elements on
the same page, this process
does not require you to set
an anchor in a file to link
to it; the filename serves as
the anchor or destination
point.
links to the
conttxt.htm
document,
which contains
contact
information
the chem.htm
document, which is
the document
containing the links.
links to the
linktxt.htm
document, which
contains links to
various Chemistry
Web sites.
22
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.
23
HTML Code that
Links to Other Documents
XP
<a> tags to
point to other
documents
24
Browser Displaying Links
to Other Documents
XP
links to the Contact and Links page
25
Linking to a Section of a
Document

XP
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>
26
Linking to a Section of a
Document (Continued)
XP
<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
27
Adding Links to Specific
Locations in a Page
XP
The pound symbol
(#) in these tags
(shown in red)
distinguishes the
filename from the
anchor name.
28
Adding Links to Specific
Locations in a Page (Example)
XP
links
29
Linking to Documents
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.
XP
30
XP
Absolute Pathnames



An absolute pathname provides a precise
location for a file.
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.
31
XP
Absolute Pathnames (Continued)

After you type the name of the folder or
folders that contains the file, type a final
slash and then the filename itself
/tutorial.02/case/parks.htm.
32
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.
33
XP
Absolute Pathname
This figure shows absolute pathnames for five HTML files.
34
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.
35
XP
Relative Pathnames (Continued)

To reference a file in a folder directly
above the current folder in the folder
hierarchy, relative pathnames use two
periods (..)
../tutorial/chem.htm.
36
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.
37
XP
Relative Pathnames
This figure shows the relative pathnames and their interpretations
for HMTL files and how they would be displayed.
38
Linking to Documents on the
Internet



XP
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.
39
Linking to Documents on the
Internet (Continued)

XP
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
<a href=
http://www.mwu.edu/course/info.htm
l>Course Information</a>.
40
XP
Uniform Resource Locator (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.”
41
Uniform Resource Locator (URL)
XP
(Continued)

Following the communication protocol,
there is typically a separator, such as a
colon and two slashes (://)
http://www.mwu.edu.
42
XP
Interpreting Parts of a
Uniform Resource Locator (URL)
This figure interprets a Web page with the URL
http://www.mwu.edu/course/info.html#majors.
43
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
44
XP
College Board AP Page
Chemistry page
remains open in
the original
browser window
AP page in a
separate browser
window
45
Displaying Linked Documents
in a New Window


XP
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
<a href=“url” target=
“new_window”>Hypertext</a>
46
Displaying Linked Documents
in a New Window (Continued)


XP
<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
47
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
48
XP
External Hyperlinks (Continued)

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
the _blank keyword to the target attribute
<a href=“url” target=
_blank>Hypertext</a>
49
XP
Linking to (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
50
Linking to (FTP) Servers
XP
(Continued)
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
<a href= ftp://
ftp.microsoft.com>Microsoft FTP
server</a>

51
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.
52
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
53
XP
Linking to E-mail (Continued)


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>
54
XP
Mail Message Window
window opens
when the
[email protected]
link is clicked
55
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
56
XP
Tutorial 2 Summary
•
•
Learned how to work with hypertext links.
Learned how to create anchors within a
Web page.
•
•
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.
57