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

OCPJP/SCJP - A good way to learn JAVA

    P hew !! After lot of postponing, I finally went for the OCPJP Exam (formerly SCJP) and luckily I got through it. Yes I was quite lucky enough to pass the exam, though the percentage I scored is pretty low compared to most of the people out there. But still I am quite happy with what I have. Scads of tips to score well in the exam will be easily accessible on doing some search in Google, so I am not going for anything like that. This is mostly about how I went for it and finally came out with flying colors. I thought to write this blog just to give a boost to all those people who are planning to write the exam and also those who scored less and are in the notion that they ruined it completely. If you have passed the exam, then you are good. Oracle and previously Sun made it pretty sure that only if you know the basics of the language, you will pass the exam. But nowadays you can get hold of so many dumps which will fetch you more than 95% easily. The ques...