|
Links |
|
A HYPERLINK, or LINK for short, is a navigation tool you can build into your page which enables your visitor to click on a word, phrase, or image, and be taken to the url you put into the link. It can be done by the anchor tag <a>. |
| The simplest possible anchor starts with <a> and ends with </a>. However, you will never ever use the <a> tag by itself, because it doesn't do anything. You'll need to enhance the <a> tag with attributes like "href" or "name". |
|
| External navigation |
| When you want to build a link, the first thing you need is the URL of the page you're linking to. |
| Then decide which word (or words) on your page will act as the link. The link will be the hot spot, where people can click if they want to go somewhere else. |
| The basic form is: |
| <a href="URL">the text in the link</a> |
|
| The "href" is an abbreviation for Hypertext REFerence. It tells the browser what file it's referencing and where to find it. |
|
| Here is an exanple: |
| <a href="http://www.thinkquest.org/">ThinkQuest</a> |
|
| ThinkQuest |
| In this exmaple, you will go to ThinkQuest's homepage. You need to press the back button of your browser to come back here. |
| Note: Links are generally underlined, and appear on the browser in a different color than the rest of the text. The default colour of link is blue. |
| If you want to show the user a new page without having them leave the present page, you can tell the browser to open new window to display the page. |
| The code is: |
|
<a href="URL of the page" target="_blank">the text in the link</a> |
|
|
| Here is an exanple: |
| <a href="http://www.thinkquest.org/" target="_blank">ThinkQuest</a> |
|
| ThinkQuest |
|
| Internal navigation |
| You can navigate within a page using links paired with "named anchors". |
| If you have a long page that is divided into sections this makes navigation for the user a lot easier. By setting the links at the top area of a page they can easily skip over what they don't want to see and go directly to what they're interested in. Always remember to name your menu and give a link back to it at the bottom of each section. |
|
You first have to write a link to the section you want to go to and give it a name, then insert the target named anchor at the point you want to jump to. |
| <a href="#TARGET NAME">link text</a> |
|
|
This code directs the browser to the named anchor. |
| <a name="TARGET NAME">target text</a> |
|
|
This code defines a target location in a document. It's called an "anchor". |
|
| Here is an example: |
| <a name="top">target text</a> |
|
| We put the above code at the beginning of the page(just below the <body> tag). |
|
|
| TOP |
|
| Mailto links |
| If your browser supports Mailto URLs then selecting a mailto link will bring a mail composition window that will prompt you for a subject and the body of a message. The "To:" field will already be filled. |
| Send a e-mail to: Team 28461 |
| The code is: |
| <a href="mailto:tq28461@advanced.org">TEAM 28461</a> |
|
|
