Linking to a Specific Location in a Web Page

by sabitha 2010-09-17 18:33:01

Linking to a Specific Location in a Web Page


When designing a web page, many times you may want to create a link from one section of a web page to another. This isn't a standard link we're referring to, but a link that actually takes you to another section within the same web page. For example, maybe you have information at the top of your web page and would like to link to further information at the bottom of your web page. This html code will enable you to do just that.

You can create a link within the same web page. The example link below is linked to a word at the bottom of this page.

Example Link


Step #1

Select the area of text that you want the link to take you to when clicked on. In the above example, the text we linked to below is HTML, which is located within the "Submit your HTML code snippets" sentence below.

Once you select the word that you would like to link to, you will need to create an anchor link like this:

<A NAME="Text">Text</A>

The text indicated in bold will be the text you select, which in our example on this page was HTML. Although you can change the text indicated in red to whatever you'd like, it's a bit easier to remember if you just use the same text a what you have selected your anchor text to be. So again, in the above example, we used HTML. When we created our anchor, it looked like this: Submit your <A NAME="HTML">HTML</A> code snippets.

Step #2

Your final step will be to create your actual link that when click on will take you to your anchor text:

<A HREF="#Text">Click Here</A>

In the example above, we selected HTML for our anchor text and the 'Example Link' text above was used to create the link. When clicked on, the page will jump to the HTML anchor text we selected below.

When you create your link, you must use the same name within your link as you used in your anchor. In our example, we used HTML within our anchor tag and HTML within our actual link. When we created our link, it looked like this: <A HREF="#HTML">Example Link</A<

Tagged in:

1463
like
0
dislike
0
mail
flag

You must LOGIN to add comments