Friday, August 23, 2013

How to create a Hyperlink that links to a particular part of a webpage

Well this requirement is quite well known. Its many time a requirement when you want to set up a link in a web page which points to a particular topic of the same web page or some other web page.

The looks like a very tough job to achieve but believe me it is as easy as filling a glass with water. I will quickly guide you through the steps to achieve this task.

Note:
You must be the owner of the page. Or at least you should be able to embed an html snippet in the destination page where your link should point.

Lets take a simple example and demonstrate how this works. Say I have two html pages viz., page1.html and page2.html. I intend to have a link in page1.html which would point to a particular topic in page2.html.

Page1.html

<html>
    <body>
        <a href="file:///C:/Users/satyamr/Desktop/page2.html">Link</a>
    </body>
</html>

This Link now takes me to the top of page2.html.

Page2.html

<html>
    <body>
        <h1>My Page 2</h1></br>
       
        <h3>Topic 1</h3>
        <p> Some Content </p>

        <h3>Topic 2</h3>
        <p> Some More Content </p>

        <h3>Topic 3</h3>
        <p> Some More Content </p>

        <h3>Topic 4</h3>
        <p> Some More Content </p>
    </body>
</html>


This page will have four subsections. Now say I want the Link in page1.html to point to Topic 3 in page2.html. For this to happen you just need to do two changes one in each page. The changes are marked in red.

Page1.html

<html>
    <body>
        <a href="file:///C:/Users/satyamr/Desktop/page2.html#topic3">Link</a>
    </body>
</html>

This Link now takes me to the top of page2.html.

Page2.html

<html>
    <body>
        <h1>My Page 2</h1></br>
       
        <h3>Topic 1</h3>
        <p> Some Content </p>

        <h3>Topic 2</h3>
        <p> Some More Content </p>

        <h3><a name="topic3">Topic 3</a></h3>
        <p> Some More Content </p>

        <h3>Topic 4</h3>
        <p> Some More Content </p>
    </body>
</html>

In case you want to create such a hyperlink within the same page then the process will be a bit different. In that case you need to do something like this

<html>
    <body>
        <a href="#topic3">Link</a>
    </body>
</html>

That's it. Now refresh your pages and try clicking the Link. Voila !!

No comments:

Post a Comment