Working with Links
In this chapter, you will learn how to use HTML's most valuable feature: hyperlinks.
Chapter 3.1: What Is a URL?
Chapter 3.2: Hyperlinks
Chapter 3.3: Linking to Email and Files
Chapter 3.4: Linking Within the Same Web Page
What Is a URL?
Ask anyone and they'll tell you that the feature that makes HTML so worthwhile is the ability to hyperlink from one place to another. All Web pages, Internet resources, files, and so on, have an address. That address is known as a Uniform Resource Locator, or URL. Before you can link to another page, you have to know its address. You can find the URL for any resource in the Address box of your browser.
The <a> tag (called an anchor) is used to define hyperlinks. Unlike most other HTML tags, the <a> tag requires an attribute. When you use the <a> tag, you must specify whether you want the enclosed text to link to someplace (with the <a href="the URL you want to link to"> tag) or be linked from someplace (with the <a name=" the place in a document you want to link to" id=" the place in a document you want to link to"> tag). The following section provides some examples.
Hyperlinks
The easiest link to learn is the hyperlink to another location. The <a> tag with the HRef attribute and its closing tag, </a>, surround any text that you want to highlight. The default hyperlink highlighting in HTML is underlined blue text. In the following example, you would click on the words click here to jump (hyperlink) to the document found at the URL inside the quotes (http://www.microsoft.com).
| Please <a href="http://www.microsoft.com">click here</a> to open the Microsoft Web site. |
Did you know that you can copy the URL of any Web page from your browser? Just highlight the address in the Address box (or Location box) and select Edit, Copy (or press Ctrl+C). Then, select Edit, Paste (or press Ctrl+V) to paste the address between the quotes of the href attribute.
Linking to Email and Files
You can use the same HRef attribute to link to email addresses for other pages of your own Web site, or even to other files on your own computer. The hyperlink to point to another file (second.htm) on my own computer, for example, is shown in the following code. In this example, the second.htm file is stored in the same directory as the page linking to it.
| Please <a href="second.htm">click here</a> to open my second Web page. |
If, however, my second.htm file was stored in another directory (for example, the Links directory), the hyperlink would need to include the directory name too, as in the following:
| Please <a href="links/second.htm">click here</a> to open my other page. |
You can force your hyperlink to open a new browser window, if you want to link to someone else's Web site without directing traffic away from your own site. Use the target="_blank" attribute, as in the following example.
| <a href="http://www.somewhere.com/page.htm" target="_blank"> Click here</a> to open a related Web site. |
The HRef attribute changes slightly if you want to link to a file that is not part of your Web site. You need to tell the Web browser that the file is not located on the Web server. You can see how that is accomplished in the following example:
| <a href="file:\\servername\foldername\filename.extension"> Click here</a> to open my favorite file. |
You also can link to an email address by using the mailto prefix, as shown in the following code line. When you click on the words click here, an email window that enables you to type your message to Mickey Mouse appears.
| <a href="mailto:mickey.mouse@disney.com">Click here</a> to send mail to Mickey. |
Linking Within the Same Web Page
Now that you know how to link to other resources, you might want your hyperlinks to be more meaningful. HTML enables you to use hyperlinks to point to a specific spot (or anchor) in an HTML document, instead of just pointing to the entire document. This is easy in HTML. Remember that anchor tags come with three attributes: HRef, and name and id.
Create an Anchor
The <a> tag also enables you to name an anchor (or bookmark) in your document with the name and id attributes. HTML then enables you to use the anchor tag to point directly to that bookmark. Below figure demonstrates how the example in the previous paragraph might look in HTML.
Notice how the href attribute points to the location named by the name and id attributes. Below figure shows that same document in the browser.
The <a> tag with the HRef attribute is highlighted, but the <a> tag with the name and id attributes is not. The <a href> tag includes the same URL format you've seen before, but also includes the # symbol to separate the filename from the named anchor.
Create an Anchor
The <a> tag also enables you to name an anchor (or bookmark) in your document with the name and id attributes. HTML then enables you to use the anchor tag to point directly to that bookmark. Below figure demonstrates how the example in the previous paragraph might look in HTML.
Notice how the href attribute points to the location named by the name and id attributes. Below figure shows that same document in the browser.
The <a> tag with the HRef attribute is highlighted, but the <a> tag with the name and id attributes is not. The <a href> tag includes the same URL format you've seen before, but also includes the # symbol to separate the filename from the named anchor.
Link to an Anchor
Creating a hyperlink to an anchor in another page requires only one more element: the URL. As you learned before, you can link to an anchor in a file on your own Web site, as shown in Below figure, or you can link to a known anchor in a file on another Web site. The keyword in that sentence is known. You can't link to a specific spot on a file unless that spot is already recognized by the Web browser as a named anchor.
Notice that each href attribute includes a folder name (articles), a filename (colors.htm), and the specific anchor name (red). You can use style sheets to add visual interest to your hyperlinks. Next Chapter, "Adding Style," will show you how.
Tiada ulasan:
Catat Ulasan