F.

4 CIT – HTML – Link page 1

Introduction
A HTML document is different from a plain document that certain segments in a HTML document are
connected to other segments within the same document or other documents in the Internet. Therefore,
such web document is called a hypertext. And the segment which is connected to somewhere else is
called the hyperlink (or simply link).
HTML provides two ways of creating hyperlinks: image map (discussed in previous chapter) and
anchor.

Hyperlink and Anchor

Hyperlink:
A hyperlink is an item on a web page which, when selected, transfers the user directly to
another location in a hypertext document or to some other web pages.
Anchor:
An anchor is a marked position in an HTML document, to which the user can jump from
elsewhere, which is properly a hyperlink.
<A> Tag:
In HTML, an anchor point is defined by <A> tag and the hyperlink is enclosed by the <A> tag.
Usage:
<A attr1=”value” attr2=”value”…>Hyperlink</A>
Common Attributes:
name: The name of the anchor point
href: The destination of the hyperlink.
There are three types of location:
1. URL: The absolute or relative URL of the webpage
2. Anchor: The name of the anchor. “#” must be put before the anchor name.
The absolute URL of the webpage which the anchor resides in should also be included. Otherwise,
current document will be referenced.
3. E-mail: The value of href should be expressed in any one of the form:
a. Simple E-mail:
mailto:email_addr
b. Multiple recipients:
mailto:email_addr1, email_addr2, …
c. With a copy/blind copy
mailto:email_addr1?&cc=email_addr2
mailto:email_addr1?&bcc=email_addr2
d. With subject:
mailto:email_addr?&subject=Subject
e. With message
F.4 CIT – HTML – Link page 2

mailto:email_addr?&body=Body
By clicking the E-mail link in the web page, the default E-mail application
software is launched.
title: The title of the link.
target: It controls where the linked page opens.
The possible values of target:
1. _blank: Open in a new browser window
2. _self: Open in the current frame
3. _parent: Open in the parent frameset
4. _top: Open in the main browser window, replacing any or all frames
present
5. name: Open in the frame/window with the specified name
Example:
<p><a href=”#Anchor 5” name=”Anchor 1”>Link 1</a></p>
<p><a href=”http://www.yahoo.com”>Link 2</a></p>
<p><a href=”http://www.yahoo.com#test”>Link 3</a></p>
<p><a href=”http://www.yahoo.com” target=”_blank”>Link 4</a></p>
<p><a href=”#Anchor 5” target=”_blank”>Link 5</a></p>
<p><a href=”mailto:abc@yahoo.com”>Link 6(E-mail)</a></p>
<p><a name=”Anchor 2”>Link 7</a></p>
<p><a name=”Anchor 3”>Link 8</a></p>
<p><a name=”Anchor 4”>Link 9</a></p>
<p><a href=”#Anchor 1” name=”Anchor 5”>Link 10</a></p>
Try to click different links and change the attribute values.

Design Concerns
A web page shows little difference from a plain document if hyperlinks are not created, which the
destined page cannot go to other pages. Therefore, when designing web pages, links that are connected
to other pages must be included. These links should include at least the home or index page, and the
previous page. A better design is to include a navigation bar in the page. The navigation bar provides
links to all other parts of the site and they should be included in every page within the same site.
Navigation bar will be discussed in later chapter.