Creating Links in HTML

Creating Links - Anchor Tag <a></a>

Anchor tags <a> are used to create links to other documents. The anchor tag <a> has a required attribute. The hyperlink reference attribute href defines the address for the link.
There are four main types of links:
o Internal Link - link to another page on the same website
o External Link - link to an external website
o E-mail Link - link to an email address
o Bookmark Link - link to bookmarked text on the same document

The text typed between the opening <a> and closing </a> anchor tags will display as blue, underlined text; this formatting can be changed with style sheets.

Adding External Links

Anchor tags <a> are used to create links to other documents. The anchor tag <a> has a required attribute. The hyperlink reference attribute href defines the address for the link.

The text typed between the opening <a> and closing </a> anchor tags will display as blue, underlined text; this formatting can be changed with style sheets.

Create a link from the text Berlin Zoo or other appropriate text.

1. Before the text add an opening anchor tag <a>.
2. Add the href attribute equal to the full address of the berlin zoo, <a href="http://www.zoo-berlin.de">, remember the quotes in the surrounding the address.
3. Add the closing anchor tag after the link text, </a>.

4. Preview the page in the browser and test the link to make sure it goes to the appropriate page correctly.

Internal Links

Internal links link pages within a website together. Proper directory paths need to be used if the page is outside the root folder of the current document.
Example:
On index.htm page linking to contact us page in the same root folder.
<a href=”contact.htm”>Contact Us!</a>

Bookmark Links

Bookmark links are used to link text within the same document and are very useful especially in very long documents or site maps. To create a bookmark link code has to be placed in two places.
Step 1: Naming the Destination
To create a destination, use the id attribute to give the target element in the document a unique name, meaning it can only appear once in the document. This is the fragment identifier. The following example will link back to the top of the page.
Example:
<h1 id=”top”>An Introduction to Web Design</h1>

Step 2: Linking to the Destination
With the identifier in place, now we can create a link to it. At the bottom of the page, create a link back to the top using the named identifier preceded by a # pound sign.
Example:
<a href=” #top ”>Return to the top of the page.</a>
Now when someone reaches the bottom of the page they can click on the link and they will reappear at the top by the heading one.

E-mail Links

E-mail links are used to link to a specific email. When the person viewing a page clicks on an e-mail link a popup will appear with the email address filled in.
Example:
<a href=”mailto:training@stedwards.edu”>Contact Training</a>