1 / 90

Microsoft ® Office FrontPage ® 2003 Training

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.). Course contents, cont’d.

fawzia
Download Presentation

Microsoft ® Office FrontPage ® 2003 Training

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related