Microsoft Office
®
FrontPage 2003 Training
®
Hyperlink basics
Course contents
• Overview: Becoming familiar with hyperlinks
• Lesson 1: Hyperlinks and URLs
• Lesson 2: Absolute and relative URLs
• Lesson 3: Hyperlink destinations
(Continued on next slide.)
Hyperlink basics
Course contents, cont’d.
• Lesson 4: Update hyperlinks across multiple
pages
• Lesson 5: Fix broken hyperlinks
Most lessons include a list of suggested tasks and a set of
test questions.
Hyperlink basics
Overview: Becoming familiar with hyperlinks
People use many different words when
referring to hyperlinks: links, hotlinks,
hypertext, or even jumps. Whichever
name you use, there’s no question that
hyperlinks are one of the things that
make the Web unique.
This course covers hyperlink basics,
from identifying and using URLs to
inserting links into pages. It also
shows you time-savers like updating
hyperlinks across many pages and
fixing broken hyperlinks.
Hyperlink basics
Course goals
• Identify and use absolute and relative URLs.
• Insert hyperlinks that go to pages in your Web site and to
pages in other Web sites.
• Insert a hyperlink to a specific place in a page.
• Insert a hyperlink to an e-mail address.
• Update hyperlinks across multiple pages.
• Find and fix broken hyperlinks.
Hyperlink basics
Lesson 1
Hyperlinks and URLs
Hyperlinks and URLs
It’s easy to add hyperlinks to your
pages using FrontPage. In fact, it
only takes about three steps:
1. Select either some text or a
picture.
2. Click the Insert menu.
Inserting a hyperlink
3. Click Hyperlink.
From there, you have many
different options to choose from.
Hyperlink basics
A quick word about HTML
HTML stands for Hypertext
Markup Language. This is a
language commonly used to create
documents for the World Wide Web.
A Web page and its
underlying HTML code
Typically when you create and edit
Web pages in FrontPage, you don’t
have to know too much about
HTML.
Hyperlink basics
A quick word about HTML
You can create documents just like
you would in other Microsoft Office
programs, and FrontPage
automatically creates the HTML code
for you.
A Web page and its
underlying HTML code
Hyperlink basics
What’s behind the hyperlink
Hyperlinks aren’t just blue,
underlined words that magically take
you to another place. Behind them,
in the HTML, is a URL that tells the
browser where to go when you click
the link.
A hyperlink and its
underlying HTML code
In the picture, “Microsoft Web site”
is an example of a hyperlink.
Underneath it is what the HTML
looks like for the link.
Hyperlink basics
What’s behind the hyperlink
You don’t have to get caught up in
what the HTML means. Just pay
attention to the part that’s enclosed
in quotation marks.
A hyperlink and its
underlying HTML code
That’s called a URL, and that’s
where the link takes you when you
click it.
Hyperlink basics
What is a URL?
http://www.microsoft.com/default.htm
An example of a URL
A URL is a unique address for a file
on the Internet. URL stands for
Uniform Resource Locator. Meaning,
URLs can locate a resource like a
Web page, picture, or sound file.
You no doubt have seen URLs in the
Address bar of your Web browser as
you browse the Web. A typical
example of a URL is shown here.
Hyperlink basics
U is for uniform
So once again, URL stands for
Uniform Resource Locator. By now,
you’re probably wondering what the
word “uniform” refers to.
Components of a URL
URLs are uniform because they
adhere to a consistent syntax, or
format. The URL syntax is shown on
the left.
Hyperlink basics
U is for uniform
Here’s an explanation of the
different parts of the syntax:
Components of a URL
1. Protocol. The protocol is usually
http://, which stands for
Hypertext Transfer Protocol. This
is the method used to access a
page or file on the World Wide
Web.
2. Web server. This is the server
computer that contains the file
you want to link to.
Hyperlink basics
U is for uniform
Here’s an explanation of the
different parts of the syntax:
Components of a URL
3. Path. This is the folder or folders
that contain the file you want to
link to. Here, “office” and
“productsinfo” are two folders
that make up the path.
4. File name. This is the name of
the actual file you want to link to.
Hyperlink basics
U is for uniform
Here’s an explanation of the
different parts of the syntax:
Components of a URL
5. Anchor. Also known in FrontPage
as bookmarks, anchors are an
optional item in the syntax. The #
symbol separates the anchor from
the rest of the URL.
Hyperlink basics
Test 1, question 1
Which of the following is true about a URL?
(Pick one answer.)
1. It only points to files on your hard disk.
2. It is a unique address for a file on the Internet.
3. It is a unique way to display blue, underlined text.
Hyperlink basics
Test 1, question 1: Answer
It is a unique address for a file on the Internet.
Hyperlink basics
Test 1, question 2
“URL” stands for which of the following? (Pick
one answer.)
1. United Retail Locator.
2. Universal Resource Locator.
3. Uniform Resource Locator.
Hyperlink basics
Test 1, question 2: Answer
Uniform Resource Locator.
Hyperlink basics
Test 1, question 3
Which part of the following URL is the path? (Pick one
answer.)
http://www.microsoft.com/office/default.htm#section
1. The whole thing is the path.
2. office/default.htm#section
3. office
Hyperlink basics
Test 1, question 3: Answer
office
The path comes after the Web server name (also referred to
as the domain) and before the file name. In this case,
www.microsoft.com is the domain, and default.htm is
the file name.
Hyperlink basics
Lesson 2
Absolute and relative URLs
Absolute and relative URLs
URLs aren’t just for hyperlinks—
they’re also used to display
pictures, play sound files, or
reference any file on the Internet.
Web page that uses
URLs for hyperlinks and
for pictures
Along with three familiar-looking
hyperlinks, this Web page has
pictures. While the pictures appear
seamlessly within the page, they
aren’t embedded or stored within
the page itself. Instead, they are
referenced in the HTML with URLs.
Hyperlink basics
About absolute and relative URLs
http://www.microsoft.com/default.htm
Figure 1: An absolute
URL
Given that URLs are used so
frequently, it’s important to
understand that there are two kinds
of URLs: absolute and relative.
default.htm
products/ball.htm
products/pricing/list.htm
../hat.htm
Figure 2: Examples of
relative URLs
Hyperlink basics
About absolute and relative URLs
http://www.microsoft.com/default.htm
Figure 1: An absolute
URL
Figure 1 shows what a typical
absolute URL looks like.
Notice that it has all the required
parts of the URL syntax shown in
the previous lesson.
Hyperlink basics
About absolute and relative URLs
default.htm
products/ball.htm
products/pricing/list.htm
../hat.htm
Figure 2: Examples of
relative URLs
Figure 2 contains four examples of
relative URLs. These URLs look
drastically shorter.
But don’t be fooled by their meager
appearance. Even though they’re
shorter, there are significant
advantages to using them.
Hyperlink basics
Absolute URLs
http://www.microsoft.com/default.htm
Example of an absolute
URL
Absolute URLs contain absolutely
every piece of the URL syntax
shown earlier (except the anchor,
since that’s optional).
Absolute URLs are good to use when
you need to link to a page outside
your Web page. For example, if you
wanted to link to someone else’s site
for additional information, you’d use
an absolute URL for that link.
Hyperlink basics
Relative URLs
Relative URLs are shorter—they
don’t contain every part of the URL
syntax. For the parts of the syntax
that aren’t specified, the browser
uses the parts of the current page.
A relative URL locating a
page in the same folder
This is why they’re called relative
URLs, because their location is
relative to the current page.
Hyperlink basics
Relative URLs
One of the most common relative
URLs has only a file name, like this:
default.htm
A relative URL locating a
page in the same folder
The browser assumes that the
missing parts of the URL syntax are
the same as the current page. It just
has to find the “default.htm” file in
the same folder as the current page.
Hyperlink basics
Relative URLs
For two reasons, you should always
use relative URLs to link to pages
within your site:
• They’re shorter and therefore
easier to use when inserting
hyperlinks in your Web pages.
A relative URL locating a
page in the same folder
• Most importantly, if you end up
moving a group of pages, then you
don’t have to change all of the
URLs if the pages are in the same
relative position to each other.
Hyperlink basics
Relative URLs that start with a folder name
If your Web site is organized using a
hierarchy of folders, then you need
to know how to make relative URLs
that locate files that are up or down
in the hierarchy.
Browser destination
given a relative URL
“products/ball.htm”
For example, the following URL
points to a file that’s further down in
the folder hierarchy:
default.htm
Hyperlink basics
Relative URLs that start with a folder name
Notice the illustration on the left: If
the current page is “default.htm,”
the browser assumes that
“products” is in the same folder that
“default.htm” is in (“Web site”).
Browser destination
given a relative URL
“products/ball.htm”
Then, since “products” is a folder,
the browser finds “ball.htm” inside
that folder.
Hyperlink basics
Relative URLs that start with multiple folder names
The following URL is a little longer
and points to a file even further
down the hierarchy. It starts with
two folder names and ends with a
file name.
products/pricing/list.htm
Browser destination
given a relative URL
“products/pricing/list.htm”
Hyperlink basics
Relative URLs that start with multiple folder names
Take a look at the illustration: If the
current page is “default.htm,” the
browser assumes that the
“products” folder is in the same
folder that “default.htm” is in (“Web
site”).
Browser destination
given a relative URL
“products/pricing/list.htm”
Inside that folder, it finds the
“pricing” folder. Finally, it opens
“list.htm.”
Hyperlink basics
Relative URLs that start with ../
The following relative URL may look
drastically different from the ones
you’ve seen so far. It starts with two
periods and a forward slash.
../default.htm
Browser destination
given a relative URL
“../default.htm”
This situation is a little different.
Hyperlink basics
Relative URLs that start with ../
As shown on the left, if the current
page is “ball.htm,” the browser
assumes that the “default.htm” file
is one folder up from the folder that
“ball.htm” is in (“products”).
Browser destination
given a relative URL
“../default.htm”
Note: You might see URLs with many
periods and forward slashes, for example,
../../default.htm. Each ../ represents a
folder that’s further up in the hierarchy.
Hyperlink basics
Suggestions for practice
1. Insert a hyperlink using an absolute URL.
2. Insert a hyperlink using a relative URL.
3. Insert an image using a relative URL.
Online practice (requires FrontPage 2003)
Hyperlink basics
Test 2, question 1
What’s the primary difference between an
absolute and a relative URL? (Pick one answer.)
1. A relative URL links to information that is related to
your site, and an absolute URL doesn’t.
2. A relative URL contains the entire URL syntax, and
the absolute URL doesn’t.
3. An absolute URL contains the entire URL syntax,
and a relative URL doesn’t.
Hyperlink basics
Test 2, question 1: Answer
An absolute URL contains the entire URL syntax, and a
relative URL doesn’t.
This is the main difference between absolute and relative
URLs.
Hyperlink basics
Test 2, question 2
If you want to link to a file named News.htm,
and that file is in the same folder as the current
page, then what would the relative URL be?
(Pick one answer.)
1. ../News.htm
2. News/News.htm
3. News.htm
Hyperlink basics
Test 2, question 2: Answer
News.htm
Since no other part of the URL syntax is specified, the
browser would find the News.htm file in the same folder as
the current page.
Hyperlink basics
Test 2, question 3
If you click a link that has the URL
“../products.htm,” what will the browser do?
(Pick one answer.)
1. The browser will open products.htm, which is two
folders up from where the current file is.
2. The browser will open products.htm, which is one
folder up from where the current file is.
3. The browser will open products.htm, which is inside
a hidden folder.
Hyperlink basics
Test 2, question 3: Answer
The browser will open products.htm, which is one folder up
from where the current file is.
The “../” means that the products.htm isn’t in the current
folder, but in the folder containing the current folder (or, one
folder “up” in the hierarchy).
Hyperlink basics
Lesson 3
Hyperlink destinations
Hyperlink destinations
Let’s talk about the different places
hyperlinks can take you and cover
some strategies both for using each
destination option and deciding
which one is right for any given
situation.
Examples of hyperlink
destinations
This lesson will cover some of the
more common destinations:
another Web site, another file on
your site, a specific place within a
page, and an e-mail address.
Hyperlink basics
Link to another Web site
As you know from the previous
lesson, you use absolute URLs to
link to other sites. There are some
important things to keep in mind
when using absolute URLs.
Using an absolute URL,
hyperlinks can go to
other sites.
To start with: When a link goes to
another site, FrontPage calls it an
“external link” since it goes to a
destination that’s external, or
outside your site.
Hyperlink basics
Link to another Web site
Next: Since absolute URLs link to
Web sites that are not under your
direct control, the link could break at
some point.
Using an absolute URL,
hyperlinks can go to
other sites.
Possible reasons for a broken link
could be that the site is unavailable,
or the creator of that site has
renamed the site or file.
Hyperlink basics
Link to another page on your Web site
As you learned in the previous
lesson, if you want to link to another
page in your site, then you should
use a relative URL.
Using a relative URL,
hyperlinks can go to
pages within your site.
It’s important to use relative URLs
within your Web site. If you end up
moving a group of pages, you won’t
have to change all the URLs if the
pages are in the same relative
position to each other.
Hyperlink basics
Link to another page on your Web site
You could use an absolute URL to
link to another page in your site if
you really wanted to.
However, if your site moves at any
time, the path of the absolute URL
might not be correct anymore, and
the link might break.
Using a relative URL,
hyperlinks can go to
pages within your site.
Hyperlink basics
Link to a place within the current Web page
Linking to a specific place within a
page is commonly called linking to
anchors or bookmarks.
These links can be handy when you
want to point to a specific location
other than the very top of the page.
Using a bookmark, a
hyperlink can point to a
specific place in a page.
Hyperlink basics
Link to a place within the current Web page
To link to a bookmark, you must first
open one of your Web pages in
FrontPage and insert the bookmark.
In FrontPage, the bookmark is
represented by a blue flag.
The second step is to create the
actual link to the bookmark.
Using a bookmark, a
hyperlink can point to a
specific place in a page.
Hyperlink basics
Link to a specific place within another Web page
This kind of link is very similar to the
one on the previous slide, although
here the link takes you to a specific
place on another page altogether.
A hyperlink can point to
a specific place in a
different page.
To insert the link, you first open in
FrontPage the page you want to link
to and insert the bookmark. Then,
on the page you want to link from,
you create the actual link to the
bookmark.
Hyperlink basics
Link to an e-mail address
A link to an e-mail address is an
exception to the other types of links
you’ve seen so far.
A link to an e-mail
address
This link doesn’t take you to a page
or file. Instead, the option creates a
new e-mail message window in the
Web visitor’s default e-mail program
and automatically puts an e-mail
address in the To: line.
Hyperlink basics
Link to an e-mail address
You can use this type of link when
you want to solicit e-mail from Web
visitors.
For example, “Contact Us” and
“Send us your feedback” are typical
phrases to use with these links.
A link to an e-mail
address
Hyperlink basics
Link to any kind of file
If you need people to access a file
like a word processing document,
add the file to your Web site (File
menu, Import). That way you can
use a relative URL to link to it.
Hyperlinks going to files
on a local computer and
on a network server
You can also link to a file on your
computer or a network server. But
keep in mind that if people don’t
have access to those locations, they
may get an error message when
trying to access the file.
Hyperlink basics
Link to any kind of file
For example, let’s say you insert a
hyperlink to C:\folder\filename.doc,
and you publish your site to another
server.
Hyperlinks going to files
on a local computer and
on a network server
When visitors to your site click this
link, their browser will try to access
C:\folder\filename.doc on their own
computer. Chances are, they won’t
have the file and they will get an
error message.
Hyperlink basics
Link to any kind of file
The same problem exists when you
link to a file on a network server
that people don’t have access to.
To solve this problem, make sure
that the people using your site have
access to that server.
Hyperlinks going to files
on a local computer and
on a network server
Hyperlink basics
Suggestions for practice
1. Link to a specific place within the current Web page.
2. Link to a specific place within another Web page.
3. Insert a hyperlink to an e-mail address.
Online practice (requires FrontPage 2003)
Hyperlink basics
Test 3, question 1
The best time to use an absolute URL is when
you need to link to a page that is where? (Pick
one answer.)
1. Inside your Web site.
2. Inside another folder within your Web site.
3. Outside your Web site.
Hyperlink basics
Test 3, question 1: Answer
Outside your Web site.
This is the very best situation in which to use an absolute
URL.
Hyperlink basics
Test 3, question 2
Before linking to a specific place in a page, you
must insert which of the following? (Pick one
answer.)
1. Hyperlink.
2. Bookmark.
3. Placeholder link.
Hyperlink basics
Test 3, question 2: Answer
Bookmark.
You need to insert a bookmark before you can link to a
specific place in a page.
Hyperlink basics
Test 3, question 3
If you want to store a Microsoft Office Word
document in your Web site and then link to it,
what should you do first? (Pick one answer.)
1. Convert the Word document into HTML by selecting
Save as Web Page.
2. Publish the Word file to your site by selecting
Publish on the File menu.
3. Just import the file.
Hyperlink basics
Test 3, question 3: Answer
Just import the file.
To import the file, you click Import on the File menu. This
will store the document in the Web site folder and you can
link to it easily from there.
Hyperlink basics
Lesson 4
Update hyperlinks across
multiple pages
Update hyperlinks across multiple pages
Once you’ve created an intricate
web of hyperlinks, it can be
challenging to update all of those
links when you have to rename a
file or move a file in your Web site.
A FrontPage Web site,
with the Web Site tab
appearing at the top
FrontPage makes this process
easier and lets you update links
across many Web pages
automatically, provided the Web
site you’re working with is a
FrontPage Web site.
Hyperlink basics
Renaming files
If you rename a file in your
FrontPage Web site, you will see this
message if one or more pages have
hyperlinks that go to that file.
This message appears
when you rename a file.
When you click Yes, FrontPage will
automatically update all hyperlinks
to point to the new name of the file.
Hyperlink basics
Moving files
If you move a file in your FrontPage
Web site, you’ll see this message.
This message indicates
what happens when you
move a file.
This tells you that although you’re
moving a file, FrontPage is now
renaming the location of that file for
you in all pages that link to it.
Hyperlink basics
Working with files outside of FrontPage
Renaming and moving files in a
FrontPage Web site is really easy.
If, however, you add, edit, rename,
or move files outside of FrontPage,
you could run into some problems
when you reopen the Web site in
FrontPage.
1. Click the Tools menu.
2. Click Recalculate
Hyperlinks.
Hyperlink basics
Working with files outside of FrontPage
In cases where you work with files
outside of FrontPage, we
recommend using the Recalculate
Hyperlinks feature, as shown here.
1. Click the Tools menu.
Recalculating hyperlinks will allow
FrontPage to catch up with the
changes you made to the site.
2. Click Recalculate
Hyperlinks.
Hyperlink basics
Suggestions for practice
1. Rename a page.
2. Move a file.
Online practice (requires FrontPage 2003)
Hyperlink basics
Test 4, question 1
If you had a FrontPage Web site and you added,
renamed, or moved files using another program,
which of the following would let FrontPage
catch up with the changes you made? (Pick one
answer.)
1. The Recalculate Hyperlinks feature.
2. The Broken Hyperlinks report.
3. The Hyperlinks view.
Hyperlink basics
Test 4, question 1: Answer
The Recalculate Hyperlinks feature.
Recalculating hyperlinks will allow FrontPage to catch up
with the changes you made.
Hyperlink basics
Test 4, question 2
If you move a file from one folder to another
within a FrontPage Web site, what will happen?
(Pick one answer.)
1. FrontPage will ask if you want to update the links to
the file.
2. FrontPage will move the file and update all the links
to it, without warning you.
3. FrontPage will warn you, to make sure you don’t
inadvertently move the file.
Hyperlink basics
Test 4, question 2: Answer
FrontPage will move the file and update all the links to it,
without warning you.
When you move something, the links to the file will change
throughout all pages of the site. FrontPage will not warn
you. But, you can always move the file back if you want,
and the links will get updated again.
Hyperlink basics
Lesson 5
Fix broken hyperlinks
Fix broken hyperlinks
Broken hyperlinks—links that don’t
go anywhere—are often caused by
removing a page or by changing
the location of a page. They can
also be caused by mistyping the
page or file name.
Two error messages that
result from a broken
hyperlink
You can catch broken hyperlinks
before you publish your Web site by
using the Broken Hyperlinks Report.
Hyperlink basics
How to fix broken hyperlinks
Before you run the Broken
Hyperlinks Report, you must first
open a FrontPage Web site—the
report cannot be run on individual
pages. When you’re ready, you can
run the report from Reports view.
Broken Hyperlinks Report
Hyperlink basics
How to fix broken hyperlinks
The report checks two kinds of
hyperlinks: internal links and
external links.
Broken Hyperlinks Report
Internal links point to pages within
your Web site, for example
Default.htm or AboutUs.htm.
External links point to sites outside
your Web site. For example, you
might have a link to
http://www.microsoft.com.
Hyperlink basics
How to fix broken hyperlinks
Any internal link that goes to a
missing or misspelled page will have
Broken status. Here’s what to do:
1. Double-click the broken link.
2. Type the correct file name.
Broken Hyperlinks Report
3. Or browse to the correct location.
4. Correct the hyperlink on all pages.
Hyperlink basics
How to fix broken hyperlinks
External links will initially have
Unknown status. When you run the
Broken Hyperlinks Report, FrontPage
will ask if you want to verify external
links. This check ensures that your
external links point to valid and
available sites on the Web.
Broken Hyperlinks Report
If you choose “Yes,” make sure your
Internet connection is intact.
Hyperlink basics
Suggestions for practice
1. Find and fix internal hyperlinks that are broken.
2. Verify external hyperlinks.
Online practice (requires FrontPage 2003)
Hyperlink basics
Test 5, question 1
Which of the following error messages may be
due to a broken hyperlink? (Pick one answer.)
1. “Page cannot be displayed”
2. “Unauthorized”
3. “Service Unavailable”
Hyperlink basics
Test 5, question 1: Answer
“Page cannot be displayed”
This is a typical error message that Web visitors may get
when clicking a broken hyperlink.
Hyperlink basics
Test 5, question 2
What is the difference between an internal link
and an external link? (Pick one answer.)
1. Internal links point to pages, and external links
point to folders.
2. Web visitors can see external links, but they can’t
see internal ones.
3. Internal links go to pages within your Web site, and
external links go outside your site.
Hyperlink basics
Test 5, question 2: Answer
Internal links go to pages within your Web site, and external
links go outside your site.
This is the difference between internal links and external
links.
Hyperlink basics
Test 5, question 3
What does it mean when a hyperlink is marked
as Unknown? (Pick one answer.)
1. It means that the link is an internal link, and hasn’t
been verified by FrontPage yet.
2. It means that the link is an external link, and is
broken.
3. It means that the link is an external link, and hasn’t
been verified by FrontPage yet.
Hyperlink basics
Test 5, question 3: Answer
It means that the link is an external link, and hasn’t been
verified by FrontPage yet.
To verify the link, you can right-click the link. Or, FrontPage
will automatically prompt you to verify it.
Hyperlink basics
Quick Reference Card
For a summary of the tasks covered in this course, view the
Quick Reference Card.
Hyperlink basics