- Link from one Web page to another in the same Web site.
- Link to a Web page on a different Web site.
- Link within one Web page.
- E-mail link.
You will typically use all four of these types of links for your Web site.
Using Links on a Web Page
As you probably know, many Web page elements can serve as links.
When using text links on your Web page, use descriptive text as your “hotspot” (clickable word or phrase). For example, don’t use the words “Click here” as your clickable phrase because these words do not explain the purpose of the link. By contrast, the phrase “Shop for Shoe Sales” indicates that the link connects to a Web page with discounted shoes.
The Anchor Tag <a>
The anchor tag is used to create anchors for the four basic types of links: 1) links to another page in the same Web site, 2) links to a Web pages in external Web sites, 3) links within the same Web page, and 4) links to an e-mail address.
Linking to Another Web Page Within the Same Web Site
<a href = “samplephotos.html”>sample photographs</a>
When the words “sample photographs” are clicked, the visitor links to the sample photos.html Web page–another web page on the same web site. Be sure that you have all of your files for this web page in the same folder.
Linking to a Web Page in Another Web Site
This is just like the previous example, but you must include the entire path name – the complete URL (http://www.nps.gov/state/hi/index.htm) when you link to an external web site.
<a href = “http://www.nps.gov/state/hi/index.htm”>one of our fabulous tour destinations</a>
Linking Within a Web Page
There are two steps to linking within the same web page.
1. Set a target
2. Create a link to that target
Name your target in a way that makes sense for the purpose of the link. For example, if you want a link that will take you from the bottom of the web page to the top of the web page, “To Top” would be a good target name.
<a id = “To Top”>
<a href = “#To Top”> To Top</a>
Notice that you are using the anchor tag just like you did for the previous two examples. Remember, that with this inner-page link, you insert the # before the target id to show that you want to link to the location of the target that you set–it is not necessarily the top of the page.
You will begin to understand as you practice using links on a web page.
Linking to an E-mail Address
Note: If your browser is not configured to send e-mail, the e-mail link will not work.
Again, you are using the anchor tag . In the href attribute, notice that you use the mailto:e-mail address. You may wonder why the e-mail address is listed twice in the code. The first e-mail address is the link itself. The second time, the e-mail address is used as the clickable link. Understand?
Now it’s time to practice using links on a web page. If you have questions about the four basic types of links, let me know.