Hyperlinks make the World Wide Web a world of resources. It
is a feature of www that establishes links to other websites, to other pages on
a website and even within a single webpage document.
Anchor Tags
Anchor tags are used to specify hyperlink reference (href)
to a webpage you want to display. The tag used for this is <a>. Each
hyperlink will necessarily begin with <a> and ends with the closing
</a>. The opening and closing anchor tags will surround the text to
perform the hyperlink. E.g. <a> link here</a>
EG:
<a href=”http://unilorin.edu.ng”>
Unilorin Homepage </a>
Unilorin Homepage is displayed in the browser window. By
default, the text is underlined and blue in colour. (Find out if it’s possible
to change colour and underlining
Hyperlinks could be absolute or relative.
Absolute and Relative Links.
Absolute Links.
The link to Unilorin homepage above is an “absolute link”. Notice that the tag
used in its configuration indicates the protocol (http) being used and
continues with the domain name unilorin.edu.ng. This indicates the absolute
location of the web resource. This is used when you are creating links to other
websites.
Relative Links
When you need to link to pages within your site, you use a
Relative Link. The link here does not begin with the http protocol. It contains
only the file name or file name and
folder name of the webpage. The link location is in relation or relative to
the page currently being displayed”. EG. If you have a homepage names index.htm
and wanted to link to another page named cv.htm located in the same folder as
index.htm, the set of tags to achieve this can be written as follows:
<a href=”cv.htm”> My CV </a>
NOTE: the tag must be on the index file(homepage).
There are times when you need to link files in other
folders:
In this case, use both the folder name and the file name in
the relative link.. EG..
<a href=” courses/ics202”> ICS202</a>
OPENING LINK IN A NEW BROWSER WINDOW.
The target attribute can be used on the <a></a>
tag to open a link in a new browser window.
EG < a href=”http://facebook.com” target=”_blank”>
(ASSIGNMENT: Test on diferentf browsers to find out why it opens on a new tab
OR window)
INTERNAL LINKS.
Sometimes called bookmarks named anchors or named fragments.
They can be very useful when you need link to a specific portion of a page.
When using internal links it is important for use to remember that there are
two components to this.
Component 1: the anchor tag that identifies a bookmark or
named fragment of a webpage. This requires two attributes. The id attribute and the name attribute.
Component 2: The anchor tag that links the bookmark or named
fragment of a webpage. This uses the
href attribute.
Accomplishing
bookmark or named fragments can be achieved in 2 steps
Step 1: Establish a target
Type an
anchor tag that uses the id and name attribute i.e <a id= ‘’ name= “” > </a> on a blank line under the
<body> tag. The value of the id and name attributes should describe the
bookmark. The value given top the id attribute should be unique within the
document. <a id=’’top
name=’’top’’><a/> Note: no word between the <a> and </a>
Step 2: Reference Target
At the point of the page where you want to place a link to
the top, type another <a> tag, use the href attribute and place a #
before the name of the bookmark. The config of the tag for a link to the named
anchor ‘’top’’ <a href =
‘’#top’’> Top of page</a>
Note: Page should be twice or thrice the normal page.. Very
long
The use
of the #top must be at the middle or end of the page.
The #
indicates that the browser should search for anchor tag in the same page. If
forgotten, the browser will search for an external file..
EMAIL LINKS
The <a>
tag can also be used to create email links. An email link will automatically
launch the default mail program configures for the browser. It is similar to an
external hyperlink but with 2 exceptions.
Exception 1: It used
mailto: instead of the protocol(http)
Exception 2: It launches the default email application for
the visitors browser
EG <a href = ‘’mailto: info@unilorin,edu.ng’’> Contact
unilorin at info@unilorin.edu.ng<a>
