Microsoft ® Office FrontPage ® 2003 Training

1. Microsoft® Office FrontPage®2003 Training Hyperlink basics

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

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

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

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

6. Lesson 1 Hyperlinks and URLs

7. Hyperlinks and URLs • It’s easy to add hyperlinks to your pages using FrontPage. In fact, it only takes about three steps: • Select either some text or a picture. • Click the Insert menu. • Click Hyperlink. Inserting a hyperlink From there, you have many different options to choose from. Hyperlink basics

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

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

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

11. 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. That’s called a URL, and that’s where the link takes you when you click it. A hyperlink and its underlying HTML code Hyperlink basics

12. 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 Hyperlink basics

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

14. U is for uniform • Here’s an explanation of the different parts of the syntax: • 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. • Web server. This is the server computer that contains the file you want to link to. Components of a URL Hyperlink basics

15. U is for uniform • Here’s an explanation of the different parts of the syntax: • 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. Components of a URL • File name. This is the name of the actual file you want to link to. Hyperlink basics

16. U is for uniform • Here’s an explanation of the different parts of the syntax: • 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

17. Test 1, question 1 • Which of the following is true about a URL? (Pick one answer.) • It only points to files on your hard disk. • It is a unique address for a file on the Internet. • It is a unique way to display blue, underlined text. Hyperlink basics

18. Test 1, question 1: Answer • It is a unique address for a file on the Internet. Hyperlink basics

19. Test 1, question 2 • “URL” stands for which of the following? (Pick one answer.) • United Retail Locator. • Universal Resource Locator. • Uniform Resource Locator. Hyperlink basics

20. Test 1, question 2: Answer • Uniform Resource Locator. Hyperlink basics

21. Test 1, question 3 • Which part of the following URL is the path? (Pick one answer.) http://www.microsoft.com/office/default.htm#section • The whole thing is the path. • office/default.htm#section • office Hyperlink basics

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

23. Lesson 2 Absolute and relative URLs

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

25. 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 1: An absolute URL Figure 2: Examples of relative URLs Hyperlink basics

26. About absolute and relative URLs • 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

27. About absolute and relative URLs • Figure 2 contains four examples of relative URLs. These URLs look drastically shorter. Figure 2: Examples of relative URLs But don’t be fooled by their meager appearance. Even though they’re shorter, there are significant advantages to using them. Hyperlink basics

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

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

30. Relative URLs • One of the most common relative URLs has only a file name, like this: 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. A relative URL locating a page in the same folder Hyperlink basics

31. 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. A relative URL locating a page in the same folder Hyperlink basics

32. 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 that’s further down in the folder hierarchy: Browser destination given a relative URL “products/ball.htm” Hyperlink basics

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

34. 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” Hyperlink basics

35. 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”). Inside that folder, it finds the “pricing” folder. Finally, it opens “list.htm.” Browser destination given a relative URL “products/pricing/list.htm” Hyperlink basics

36. 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” This situation is a little different. Hyperlink basics

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

38. Suggestions for practice • Insert a hyperlink using an absolute URL. • Insert a hyperlink using a relative URL. • Insert an image using a relative URL. Online practice (requires FrontPage 2003) Hyperlink basics

39. Test 2, question 1 • What’s the primary difference between an absolute and a relative URL? (Pick one answer.) • A relative URL links to information that is related to your site, and an absolute URL doesn’t. • A relative URL contains the entire URL syntax, and the absolute URL doesn’t. • An absolute URL contains the entire URL syntax, and a relative URL doesn’t. Hyperlink basics

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

41. 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.) • ../News.htm • News/News.htm • News.htm Hyperlink basics

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

43. Test 2, question 3 • If you click a link that has the URL “../products.htm,” what will the browser do? (Pick one answer.) • The browser will open products.htm, which is two folders up from where the current file is. • The browser will open products.htm, which is one folder up from where the current file is. • The browser will open products.htm, which is inside a hidden folder. Hyperlink basics

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

45. Lesson 3 Hyperlink destinations

46. 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. 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. Examples of hyperlink destinations Hyperlink basics

47. 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 that’s external, or outside your site. Using an absolute URL, hyperlinks can go to other sites. Hyperlink basics

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

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

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