microsoft ® office frontpage ® 2003 training hyperlink basics

Microsoft® Office FrontPage® 2003 Training

Hyperlink basics

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

Most lessons include a list of suggested tasks and a set of test questions.

• Lesson 5: Fix broken hyperlinks

Hyperlink basics

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.

Overview: Becoming familiar with hyperlinks

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.

Lesson 1

Hyperlinks and URLs

Hyperlink basics

Hyperlinks and URLs

It’s easy to add hyperlinks to your pages using FrontPage. In fact, it only takes about three steps:

Inserting a hyperlink

1. Select either some text or a picture.

2. Click the Insert menu.

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 don’t 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

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.

In the picture, “Microsoft Web site” is an example of a hyperlink. Underneath it is what the HTML looks like for the link.

A hyperlink and its underlying HTML code

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?

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.

An example of a URL

http://www.microsoft.com/default.htm

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.

URLs are uniform because they adhere to a consistent syntax, or format. The URL syntax is shown on the left.

Components of a URL

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


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


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


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


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.

Lesson 2

Absolute and relative URLs

Hyperlink basics

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.

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.

Web page that uses URLs for hyperlinks and for pictures

Hyperlink basics

About absolute and relative URLs

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

Figure 2: Examples of relative URLs

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


Figure 1: An absolute URL

Hyperlink basics


Figure 1 shows what a typical absolute URL looks like.


Figure 1: An absolute URL Notice that it has all the required

parts of the URL syntax shown in the previous lesson.

Hyperlink basics


Figure 2 contains four examples of relative URLs. These URLs look drastically shorter.

Figure 2: Examples of relative URLs

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

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

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.

Example of an absolute URL


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.

This is why they’re called relative URLs, because their location is relative to the current page.

A relative URL locating a page in the same folder

Hyperlink basics

Relative URLs

One of the most common relative URLs has only a file name, like this:


default.htm

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.

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

Browser destination given a relative URL “products/pricing/list.htm”

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.

Browser destination given a relative URL “../default.htm”

../default.htm

This situation is a little different.

Hyperlink basics

Relative URLs that start with ../

Browser destination given a relative URL “../default.htm”

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

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)

http://office.microsoft.com/training/training.aspx?AssetID=RP060867311033&CTT=6&Origin=RP060872971033

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


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


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


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

Lesson 3

Hyperlink destinations

Hyperlink basics

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

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

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.

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.

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.

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.

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

However, if your site moves at any time, the path of the absolute URL might not be correct anymore, and the link might break.

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.

Using a bookmark, a hyperlink can point to a specific place in a page.

The second step is to create the actual link to the bookmark.

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 you’ve seen so far.

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.

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.

A link to an e-mail address

For example, “Contact Us” and “Send us your feedback” are typical phrases to use with these links.

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 don’t 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


For example, let’s say you insert a hyperlink to C:\folder\filename.doc, and you publish your site to another 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


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.

Hyperlink basics


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.



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


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


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


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.

Lesson 4

Update hyperlinks across multiple pages

Hyperlink basics

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.

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.

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

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.

When you click Yes, FrontPage will automatically update all hyperlinks to point to the new name of the file.

This message appears when you rename a file.

Hyperlink basics

Moving files

If you move a file in your FrontPage Web site, you’ll see this message.

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.

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.

1. Click the Tools menu.

2. Click Recalculate Hyperlinks.

Recalculating hyperlinks will allow FrontPage to catch up with the changes you made to the site.

Hyperlink basics


1. Rename a page.

2. Move a file.



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


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


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.

Lesson 5

Fix broken hyperlinks

Hyperlink basics

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.

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


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.

Hyperlink basics


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.

3. Or browse to the correct location.

4. Correct the hyperlink on all pages.

Hyperlink basics


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.


If you choose “Yes,” make sure your Internet connection is intact.

Hyperlink basics


1. Find and fix internal hyperlinks that are broken.

2. Verify external hyperlinks.



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


“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


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


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.

http://office.microsoft.com/training/Training.aspx?AssetID=RP060868851033&CTT=6&Origin=RC060866031033

microsoft ® office frontpage ® 2003 training hyperlink basics

Documents