HTML Links
HTML uses a hyperlink (or anchor) to link to another document on the Web.
The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:
| <a href="url">Text to be displayed</a> |
The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
This anchor defines a link to the Blue Ridge Website:
| <a href="http://www.brusd.k12.az.us/">Visit the Blue Ridge Website!</a> |
The line above will look like this in a browser:
Examples
Create hyperlinks
This example demonstrates how to create links in an HTML document.
Absolute links - Give the exact location of the linked document(such as http://www.brusd.k12.az.us). They are usually used to link to other websites on the Internet.
Relative links - Give the location of the linked document relative to the current site (such as web1/lessons/tags.htm, which would be the tag web page in the web1/lessons folder). Use relative links to link to pages within your website.
An image as a link
This example demonstrates how to use an image as a link.
The Target Attribute
With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
| <a href="http://www.brusd.k12.az.us/"target="_blank">Visit the Blue Ridge Website!</a> |
Click on this link to see how it works: Visit the Blue Ridge Website!
"_blank" opens the linked document in a new browser window, leaving the current window untouched.
"_top" opens the linked document in the current browser window, replacing all frames.
"_parent" opens the linked document in the parent frameset of the frame the link appears in (when using frames), replacing the entire frameset.
"_self" opens the link in the current frame, replacing the content in that frame (when using frames).
Open a link in a new browser window
This example demonstrates how to link to another page by opening a new window (using the "_blank" value) , so that the visitor does not have to leave your Web site.
The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.
Click on this link to see how an anchor works (this will take you to the top of this page): anchor
Creating an anchor is a two step process. You must create an anchor and then create a link to the anchor.
Below is the syntax for creating an anchor:
| <a name="top"></a> |
The name attribute is the name of the anchor you will link to (in this case "top").
You should notice that a named anchor is not displayed in a special way. It also is not visible when viewing the page, unless you add text to the anchor, like the following:
| <a name="top">This is the top of the page</a> Basic Notes - Useful Tips |
Below is the syntax for creating a link to the anchor:
| <a href="#top">Text to click on for link</a> |
The name attribute is the name of the anchor you will link to. If the anchor is located on a different page, you will have to create a relative link (by including the folders).
Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.
Link to a location on the same page
This example demonstrates how to use a link to jump to another part of a document (or an anchor).
You can also link to the anchor and open the document in a new window using the target attribute within the <a href> tag.
Changing the colors of links
Links are considered to be preactive (not clicked on yet), hovering (when the mouse is over the link), active (while you are clicking on the link), or visited (once you have clicked on the link). You can change the color of any of the link states using the following attributes followed by ="color" withing the <body> tag.
Here is an example: <body link="blue" vlink="purple">. This would make the links that a user can click on be blue and turn purple once they have been clicked on.
| Tag | Description |
|---|---|
| link | Used for the previsited color |
| alink | Used for the active link color |
| hlink | Used for the hover link color |
| vlink | Used for the visited link color |
Email links
You can create links that send an email message to someone, like this email link.
The following examples show you how:
Create a mailto link
This example demonstrates how to link to a mail message (will only work if you have mail installed).
Create a mailto link 2
This example demonstrates a more complicated mailto link.
Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://www.w3schools.com/html/"
If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.