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

Comments

Post a Comment

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 ...
257 comments
Read More >>

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...
26 comments
Read More >>

IIITB : Preparing for the Interview

Congratulations if you cleared the Written Exam. Just one more step and you are through. Interview is the most important part in any selection process. It is here that you get the chance to prove yourself in front of the professionals. So if you are confident of your knowledge and presentability then there is no need to worry. Interview is conducted for three days in a row for all the MTech students(There are around 1000 students called for interview). You will be allotted a day and will be asked to report to the college on the specified day. The process will basically cover the whole day with many events like Document clarifications, Biometric Scans, Interview etc. The Interview is a one-to-one process where you will be interviewed by a Professor of the college. The interview will last for around 20 minutes where you will be asked several questions which you need to answer precisely. The questions will be all typical interview questions like:       ...
9 comments
Read More >>