View
218
Download
2
Embed Size (px)
Citation preview
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
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.
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
http://www.microsoft.com/default.htm
Figure 1: An absolute URL
Hyperlink basics
About absolute and relative URLs
Figure 1 shows what a typical absolute URL looks like.
http://www.microsoft.com/default.htm
Figure 1: An absolute URL Notice that it has all the required
parts of the URL syntax shown in the previous lesson.
Hyperlink basics
About absolute and relative URLs
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
http://www.microsoft.com/default.htm
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:
A relative URL locating a page in the same folder
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:
A relative URL locating a page in the same folder
• 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)
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).
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
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.
Hyperlinks going to files on a local computer and on a network server
To solve this problem, make sure that the people using your site have access to that 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.
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
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.
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
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:
Broken Hyperlinks Report
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
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.