Skip to main content

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 !!

Comments

Popular posts from this blog

IIIT Bangalore interview

You would also like Preparing for Interview , Getting into IIITB ,  Preparing for Online Exam , and FAQ on MS in IIITB We reached the campus for the interview 5 minutes before the scheduled time. I attended a lot of interviews before this but the interview at IIITB seemed special. A little bit of tension and the joy to be in Bangalore balanced my psyche as my brother parked the car in the parking lot. He was my cousin’s friend who was there to accompany me as he himself was a student of IIITB . Nevertheless, both of us went to the help desk located at the main gate where I had to verify myself as me. Then we were handed over a paper which listed all the process that was going to be held and was directed to the main building. Impressive as we already knew what all we had to do without any problem. So we headed towards the main building. It looked great from outside with some perfect combination of colors and a large logo at the top. The campus was tidy enough which seemed ...

IIITB : Preparing for the Online Exam

Now here you are, at the most important part-The Preparation. Well there's nothing to be feared or getting tensed. These exams are all about testing your capabilities. If you are pretty sure about what you can do, then you are there. I will be dividing the article in two parts i.e, Online Exam and Interview (Follow the link provided) and I will be short. Online Exam : The first hurdle, and you need to be fast and smart at the same time. If you have not appeared any competitive exams before then take this as a must suggestion. You ought to be fast and value each second in a minute. The exam will be for some odd 2 hours and you will have 3 sections, viz, APTITUDE, MATHS and PROGRAMMING.           Aptitude:  This section consists of some basic English questions(Articles, Prepositions, Sentence Completion, Antonyms, Synonyms etc), Logical questions and some tricky questions. They are easy but needs some practice. As you have limited time for each section...

Banff & Jasper - 4 days ultimate itinerary (Ideal for non hikers)

Alberta is a paradise on Earth which finds a place in every person's bucket list. This province has something to offer for all kind of people (hikers and non-hikers specifically). Banff, Jasper and Yoho perhaps tops the list of all the places in Alberta and everyone atleast needs to visit these places once in their lifetime. We decided to visit Banff, Jasper and Yoho during the Canada day long weekend in 2019. It was a long weekend and we managed to add one more day to make it a 4 day extended long weekend trip from 29 June to 2 July. I had to do a lot of research as I did not want to miss anything in this trip and make the most out of it. After going through numerous websites and travelogues, I finally was able to create an extensive itinerary for Banff and Jasper. To be honest, you would need around 6 days to complete every places mentioned in this itinerary. But if you are adventurous and can go beyond the line, you can definitely do this in 4 days without missing anything....