Html tutorial lesson 8: More on Links

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

HTML supports linking 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 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 # symbol, as follows:

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

This link is useful if you have a webpage 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