Lesson 8: Building Hyperlinks within a Document

❮ Previous Lesson Next Lesson ❯
HTML supports hyperlinks within a document which enables readers to go to a particular section of the document easily, instead of having to scroll up and down all the time. We can use the name attribute to serve as identification or bookmark of a particular section.
Tag that creates a target location within a document is as follows:
<A NAME= "section name"></A> 


To create the link to the above section from elsewhere in the document, we use the href element of the anchor element and reference the section name using a # symbol, as follows:
<A HREF= "#section name"></A>






Example 8.1
<!DOCTYPE html>
<html>
<head><Title> MSC</Title></head>
<body bgcolor="blue" link="yellow"  vlink="red"  text ="white">
<A name= "main">
<h1 align="center">Multimedia Super Corridor(MSC)</h1>
<ul>
<P>The MSC is a Mega project to transform  a nation into advance nation in the field of IT. </P>
<h2>MSC  includes the following projects:</h2>
<ul>
<li><h3><a href= "#eg">Electronic Government</h3></a>
<li><h3><a href= "#rd">Research and Development</h3></a>
<li><h3><a href= "#tm">Telemedicine</h3></a>
<li><h3><a href= "#ss">Smart School</h3></a>
<li><h3><a href= "#mc">Multipurpose Card</h3></a>
<li><h3><a href= "#it">IT infrastructure</h3></a>
<li><h3><a href= "#bm">Borderless Marketing</h3></a>
<ul>
<dl>
<dt><A name= "eg"><b> Electronic Government</b>
<dd>A multimedia networked paperless administration linking government agencies within
Putrajaya with government centres around the country to facilitate a collaborative government and
efficient service to business and citizens. It will offers efficient, high quality administrative on-line
services to citizens and businesses.
<a href= "#main">Back to the top</a>
<dt><A name= "rd"><b> Research and Development</b>
<dd>
<a href= "#main">Back to the top</a>
<dt><A NAME= "tm"><b> Telemedicine</b>
<dd>To provide top class medical service especially for the rural people through advance video
conferencing and other network techniques
<a href= "#main">Back to the top</a>
<dt><A NAME= "ss"><b> Smart School </b>
<dd>To develop smart learning environment for all Malaysian students
<a HREF= "#main">Back to the top</a>
<dt><A NAME= "mc"><b>Multipurpose Card </b>
<dd>Smart Card for all Malaysians supporting key government, financial, health care and affiliated
applications.
<a href= "#main">Back to the top</a>
<dt><A name= "it"><b> IT infrastructure </b>
<dd>Open multimedia for network for easy interconnect.
<a href= "#main">Back to the top</a>
<dt><A NAME= "bm"><b> Borderless Marketing </b>
<dd>To make Malaysia  a Regional  Hub for companies to create and deliver marketing messages,
customer services and information products to their multicultural and multinational customers using
multimedia technology.
<a href= "#main">Back to the top</a>
</dl>
</body>
</html>

Try to click some of the links in the following article:

Multimedia Super Corridor(MSC)

The MSC is a Mega project to transform  a nation into advance nation in the field of IT. 
MSC  includes the following projects:

Electronic Government
Research and Development
Telemedicine
Smart School
Multipurpose Card
IT infrastructure
Borderless Marketing


 Electronic Government
A multimedia networked paperless administration linking government agencies within
Putrajaya with government centres around the country to facilitate a collaborative government and
efficient service to business and citizens. It will offers efficient, high quality administrative on-line
services to citizens and businesses.
Back to the top
 Research and Development

Back to the top
 Telemedicine
To provide top class medical service especially for the rural people through advance video
conferencing and other network techniques
Back to the top
 Smart School 
To develop smart learning environment for all Malaysian students
Back to the top
Multipurpose Card 
Smart Card for all Malaysians supporting key government, financial, health care and affiliated
applications.
Back to the top
 IT infrastructure 
Open multimedia for network for easy interconnect.
Back to the top
 Borderless Marketing 
To make Malaysia  a Regional  Hub for companies to create and deliver marketing messages,
customer services and information products to their multicultural and multinational customers using
multimedia technology.
Back to the top

8.2 Using id attribute for Linking
You can also set up a link to another section of a webpage using the anchor link and the id attribute.  To set up a bookmark of  a particular section, use the following syntax

<a id="Intro">Section 1: Introduction</a>
❮ Previous Lesson Next Lesson ❯