Html tutorial lesson 8: Hyperlinks within a Document

[Lesson 7]<<[Contents]>>[Lesson 9]

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.

<A NAME= “section name”></A> Tag that creates a target location within a document.

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>

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>

To create a link to Section 1, we use the href attribute together with the # symbol, as follows:

<a href=“#intro”>Visit Section 1</a>

This link is useful if you have a web page that is more than one page long.

You can also link to this section from another webpage, the syntax is as follows:

<a href=“http://htmltutor.org/links.html#intro”>Visit the Introduction Section</a>


[Lesson 7]<<[Contents]>>[Lesson 9]

Leave a Reply