Transcript Document

XP
Adding Hypertext Links to a Web Page
Objectives
XP
• 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
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
XP
Creating Anchors
XP
• 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.
Creating Links
XP
• 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>.
Web Page Structures
XP
• 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.
Linear Structures
XP
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
Augmented Linear Structure
XP
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
Hierarchical Structure
XP
Combination of Linear and Hierarchical
Structures
XP
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
Web Structures Continued
XP
• 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.
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.
XP
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>
• 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
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
Absolute Pathnames
XP
• 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.
Relative Pathnames
XP
• 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.
Relative Pathnames Continued
XP
• 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.
Linking to Documents on the 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>.
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”.
– Following the communication protocol, there is
typically a separator, such as a colon and two slashes
(://) i.e. http://www.mwu.edu.
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.
XP
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 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
External Hyperlinks
XP
• 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>.
Linking to File Transfer Protocol
(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>.
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>.
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>
XP