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

Terrified Surprise !!!

       'R onny...... Ronny.... Wake up'. I could hear a fading voice calling my name to wake up. I somehow opened my eyes and looked at my watch. It was 10:50 PM. Then I could figure out that it was my roommate waking me up to have dinner. My eyes did not like this disruption and forced me to close them again. Within seconds this friend of mine started calling me again and this time handed me my dinner. With no choice left, I woke up and had my dinner. There is a small incident before this one which needs to be depicted before I proceed further. Four friends including me decided to share an apartment as we worked in the same company, were friends for the past 6 months and this would indeed save some bucks for us to enjoy. Once, there was a long vacation of 3 days (Once you join office, 3 days will be like 1 month holiday) and everyone was planning for some trip or the other. But for us it was a normal holiday which meant sitting back home and watchi...