HTML Chapter 8 revised 2/27/08

Exercise 1

Linking to Other Files

Linking to other files you have created is called relative linking because all the files will usually be located in the same directory or on the same server. The browser will not have to search very hard to find them.

The tag used to create a link is called an anchor. Anchors tell the browser exactly where to find the file. If the file you want to link to is not in the same directory as your home page, you will need to tell the browser where the file is located.

The tag for creating a link to another file you have created is:

<A HREF=“path/filename.html”>anchor text</A>

The <A HREF> tag creates an anchor (A) to a reference (HREF) location you specify. The path and filename of the document you wish to link to must be in quotation marks. The anchor text is the text the reader clicks on to activate the link. Notice the closing tag is </A> and not </A HREF>. You only need to end the anchor, not the anchor and reference.

For example, if you are currently in a document named “index.html” and you wish to create a link to another file you created called “report.html” the tag would be:

Here is my <A HREF=“report.html”>report</A>on World War II.

The link and text would look like the following:

The anchor text is what the reader clicks on to activate the hypertext link. Notice the anchor text is the only part of the tag that is highlighted and displayed on the screen. The hypertext link above is the word report.

To create links for some of the files you have created, do the following steps:

1. In your text editor, open chap 6 exer 1a lastnameinitial.
2. Add the following after the banana split list:

Here is a list of <A HREF=“chap 6 exer 2 lastnameinitial.html”>computer definitions</A> you should know.

3. Save the document as chap 8 exer 1a lastnameintitial.
4. View the document in your browser.
5. Click the hypertext link (computer definitions).

If your Web page changed to the list of computer definitions, congratulations! You have successfully linked two documents together. If not, check your source code and make sure the tags and filename are correct.

Linking to Other Sites

Linking to files that other people have created is called absolute linking. The tag is called an anchor. With absolute linking, you need to be very specific about where the file is located, which means you need to know the complete address, or URL, of the document you wish to link to.

The tag for creating a link to a Web page on the Internet is:

<A HREF=http://server/path/filename.html.>anchor text</A>

For example to create a link to the Walt Disney home page the tag would read:

<A HREF=http://www.disney.com>Disney</A>

Remember that only the anchor text, Disney will be displayed on the Web page and will be highlighted and underlined to let the reader know where to click.

To create a link to the Walt Disney home page, do the following steps:

6. Add a line break after the last sentence.
7. In your text editor, add the following at the end of the body text:

I went to <A HREF=http://www.disney.com>Disneyland</A> and had a great time.

8. Save the document as chap 8 exer 1b lastnameintitial and refresh your browser.
9. Click the hypertext link (Disneyland).

If your browser displays the Disney home page, congratulations! You’ve successfully linked to a Web page on the Internet.

Linking to the Same File

Creating a link to different places in the same file allows your readers to jump to the part of the page they want to read without having to scroll through the whole document. This is particularly useful when your Web page is really long. Many people create a table of contents at the beginning of their Web page, and each heading in the table of contents will jump to a different location in the document.

To link to a different place in the same file, you have to do two things. First, you must leave a pointer or “bookmark” in the file you want to link to. When you click the hypertext link, it looks for the pointer in the file and moves you to that location.

The pointer tag is <A NAME=“xxxx”>. The link tag is <A HREF= “#xxxx”>anchor text</A>

Note: You must include the pound sign (#) to tell the browser to look for the pointer and not a different file.

To create a link to a different place in your document, do the following steps:

10. Open the file named resort.html and save it to your My Documents folder. This file is located in the templates folder. (Click on Start, Programs, Templates, etc.)

In your text editor open resort.html.

11. In the second sentence, position the insertion point immediately before the word us.
12. Key <A HREF=“#bottom”> before us and then key </A> after us.

The sentence should read: “Then let <A HREF=“#bottom”>us</A> help you plan your next getaway.”

13. Scroll to the end of the document and position the insertion point before the <ADDRESS> tag.
14. Key <A NAME=“bottom”>.

The line should now read “<A NAME=“bottom”><ADDRESS>Fun in the Sun<BR>.”

15. Save the document as chap 8 exer 1c lastnameinitial.html, and then open the file in your browser.
16. Click the hypertext link (us).

If your browser displays the bottom of the page, congratulations! You have successfully linked to a different location in the same document.

Exercise 2

Creating Mail to Links

If you have an e-mail address, you can receive e-mail from people reading your Web page. Many Web pages have a line that says, “If you have comments about this Web page, e-mail them to Heather.” Many webmasters want to hear your comments about their Web pages, and the mail to tag allows you to e-mail from the Web page.

The tag used to insert an e-mail address into a Web page is <A HREF=“mailto: e-mail address”>. For example, if your e-mail address is carrh@microsoft.com, then the tag would be

<A HREF=“mailto:carrh@microsoft.com”>. To complete the tag, key anchor text and the closing tag </A>.

To create an e-mail link on your Web page, do the following steps:

1. In your text editor, open chap 6 exer 3 lastnameinitial.
2. At the bottom of the body text, key the following:

Use your own personal email address or your gaggle email address.

How do you like my Web page? Send your comments to the <A HREF=“mailto:insert your e-mail address”>webmaster</A>.

3. Save the document as chap 8 exer 2 lastnameinitial and change the title.
4. Then view it in your browser.
5. Click the e-mail link (webmaster) and send yourself an e-mail message.

If the link did not work properly, check the tags and make sure they are typed correctly. Also, make sure that you keyed your complete e-mail address and that it is spelled correctly.

Exercise 3

In this exercise you will search for pages on the Internet and use what you have learned to create links to the pages. You will also link to pages you created and create e-mail links.

These tags describe the tags you learned in this chapter.

Pointer	<A HREF=“#xxxx”>anchor text</A> <A NAME=“xxxx”>
Link	<A HREF=“xxxx”>anchor text</A>
Mail to	<A HREF=”mailto:e-mail address”>anchor text</A>

Use the tags in the above table to complete the following steps:

1. In your text editor, open chap 6 exer 3 lastnameinitial
2. Delete any <CENTER> and </CENTER> tags around the unordered list.

Note: If you did not do the challenge for Chapter 6, your source code will not have a <CENTER> tag.

3. Notice the topics you listed for your favorite activities.

Next you will perform a search for pages relating to your favorite activities. For example, if you listed basketball as a favorite activity, you could create a link to the NBA home page at http://www.nba.com

4. Search the Internet for pages that relate to three of your favorite activities.
5. When you find a page you like, write down (or copy and paste) the complete URL since you will have to create absolute links to these pages.
6. Create links to the Internet pages, with the items listed as your favorite activities being the anchor text. For example, the link to the NBA home page would have “basketball” as the anchor text.
7. Create hypertext links to Internet Web pages for at least three of your favorite activities.
8. Create relative links to the 2 files that you created for chapter 3. Write a sentence about these 2 files and then link to them.

Example: If you want to know more about me, click right here.

9. At the bottom of your Web page, add an e-mail link to your e-mail address. Put this between the <ADDRESS> tags.
10. Save the document with the name chap 8 exer 3 lastnameinitial.
11. Click the links to make sure they work correctly.
12. Make any desired changes, resave the document, and then refresh your browser.

Exercise 4

In this exercise you will search for pages on the Internet and use what you have learned to create links to the pages. You will also link to pages you have created and you will create e-mail links.

Use the tags in the above table to complete the following steps:

1. In your text editor, open resort lastnameinitial.
2. Open your browser and search for Web pages relating to travel, cruise ships or tropical islands.

Hint: You could search for any of the islands or activities listed in the resort lastnameinitial.html Web page. There are also many Web pages on cruise ships and travel companies.

3. Create at least three different links for these Web pages. Use the existing text as the anchor.
4. At the bottom of your Web page, add an e-mail link to your e-mail address. Put this between the <ADDRESS> tags.
5. Save the document using the name chap 8 exer 4 lastnameintial.
6. Click the links to make sure they work correctly.
7. Make any desired changes, resave the document, and then refresh your browser.

Challenge

Earlier you used the pointer tag to jump to a specific location in the same document. You can also create a link from one document to a specific location in another document. Using the tags you learned in this chapter, create a link from your chap 8 exer 2 lastnameinitial web page to the bottom of the

chap 8 exer 1c lastnameintial web page. Have the sentence read “Contact us at Fun in the Sun.” Use “Fun in the Sun” as the anchor text.

Hint: Remember that the resort document already has a pointer tag named “bottom” at the end of the document. You will need to reference this tag in your link.

View the chap 8 exer 2 lastnameinitial page in your browser and click the link to make sure it works correctly. You should jump to the bottom of the chap 8 exer 1c lastnameintial Web page.