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, contd.

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, theres 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

Its 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. Typically when you create and edit Web pages in FrontPage, you dont have to know too much about HTML.

A Web page and its underlying HTML code

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

Whats behind the hyperlink

Hyperlinks arent 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

Whats behind the hyperlink

You dont have to get caught up in what the HTML means. Just pay attention to the part thats enclosed in quotation marks.
Thats called a URL, and thats where the link takes you when you click it.

A hyperlink and its underlying HTML code

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, youre 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
Heres an explanation of the different parts of the syntax: 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

Components of a URL

U is for uniform
Heres an explanation of the different parts of the syntax: 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.

Components of a URL

Hyperlink basics

U is for uniform
Heres an explanation of the different parts of the syntax: 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.

Components of a 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 arent just for hyperlinks theyre 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 arent 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

default.htm products/ball.htm products/pricing/list.htm ../hat.htm

Given that URLs are used so frequently, its important to understand that there are two kinds of URLs: absolute and relative.

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 contains four examples of relative URLs. These URLs look drastically shorter. But dont be fooled by their meager appearance. Even though theyre shorter, there are significant advantages to using them.

Figure 2: Examples of relative URLs

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 thats 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 elses site for additional information, youd use an absolute URL for that link.

Hyperlink basics

Relative URLs
Relative URLs are shorterthey dont contain every part of the URL syntax. For the parts of the syntax that arent specified, the browser uses the parts of the current page.
A relative URL locating a page in the same folder

This is why theyre 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: Theyre 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 dont 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. For example, the following URL points to a file thats further down in the folder hierarchy:
default.htm

Browser destination given a relative URL products/ball.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). Then, since products is a folder, the browser finds ball.htm inside that folder.

Browser destination given a relative URL products/ball.htm

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 youve 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 thats 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
Whats 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 doesnt. 2. A relative URL contains the entire URL syntax, and the absolute URL doesnt. 3. An absolute URL contains the entire URL syntax, and a relative URL doesnt.

Hyperlink basics

Test 2, question 1: Answer

An absolute URL contains the entire URL syntax, and a relative URL doesnt.

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 isnt 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
Lets 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. 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

Examples of hyperlink destinations

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. To start with: When a link goes to another site, FrontPage calls it an external link since it goes to a destination thats external, or outside your site.

Using an absolute URL, hyperlinks can go to other sites.

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. 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.

Using an absolute URL, hyperlinks can go to other sites.

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. Its important to use relative URLs within your Web site. If you end up moving a group of pages, you wont have to change all the URLs if the pages are in the same relative position to each other.

Using a relative URL, hyperlinks can go to pages within your site.

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. 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.

A hyperlink can point to a specific place in a different page.

Hyperlink basics

Link to an e-mail address

A link to an e-mail address is an exception to the other types of links youve seen so far. This link doesnt take you to a page or file. Instead, the option creates a new e-mail message window in the Web visitors default e-mail program and automatically puts an e-mail address in the To: line.

A link to an e-mail address

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. You can also link to a file on your computer or a network server. But keep in mind that if people dont have access to those locations, they may get an error message when trying to access the file.

Hyperlinks going to files on a local computer and on a network server

Hyperlink basics

Link to any kind of file

For example, lets 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 wont 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 dont 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 youve 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. FrontPage makes this process easier and lets you update links across many Web pages automatically, provided the Web site youre working with is a FrontPage Web site.
Hyperlink basics

A FrontPage Web site, with the Web Site tab appearing at the top

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, youll see this message.
This tells you that although youre moving a file, FrontPage is now renaming the location of that file for you in all pages that link to it.

This message indicates what happens when you move a file.

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. Recalculating hyperlinks will allow FrontPage to catch up with the changes you made to the site.

1. Click the Tools menu. 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 dont 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 hyperlinkslinks that dont go anywhereare 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. You can catch broken hyperlinks before you publish your Web site by using the Broken Hyperlinks Report.

Two error messages that result from a broken hyperlink

Hyperlink basics

How to fix broken hyperlinks

Before you run the Broken Hyperlinks Report, you must first open a FrontPage Web sitethe report cannot be run on individual pages. When youre 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. 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.

Broken Hyperlinks Report

Hyperlink basics

How to fix broken hyperlinks

Any internal link that goes to a missing or misspelled page will have Broken status. Heres 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 cant 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 hasnt 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 hasnt been verified by FrontPage yet.

Hyperlink basics

Test 5, question 3: Answer

It means that the link is an external link, and hasnt 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