Links

HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. Throughout this HTML tutorial we will cover how to properly make links within HTML.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

Another attribute also exists called “target”. With the target attribute you can define where the linked document will be opened. Let’s take a look at some of the options we have here:

“_blank”
“_parent”
“_self”
“_top”

So let’s use this and put together a simple link:

<a href="http://www.rapidpurple.com" target="_blank">Rapid Purple</a>

This gives us: Rapid Purple which when clicked on would open in a new browser window/tab.

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specified section on a page, instead of letting the user scroll around to find what he/she is looking for.

Syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. The line below defines a named anchor:

<a name="tips">Read the Useful Tips section</a>

You should notice that a named anchor does not display in a special way. Let’s take a closer look at how we can use named anchors in the example below:

<html> <body>

<p> <a href="#C4"> See also Chapter 4. </a> </p>

<p> <h2>Chapter 1</h2> <p>This chapter explains bla bla bla</p>

<h2>Chapter 2</h2> <p>This chapter explains more bla bla bla</p>

<h2>Chapter 3</h2> <p>This chapter explains why the earlier chapters explained only bla bla bla</p> <P> some text here to make the page scroll for instance

Far out in the uncharted backwaters of the western spiral arm lies an small unregarded yellow sun. Orbiting this at a distance of roughly 90 million miles lies an utterly insignificant blue green planet whose ape decended life forms are so amasingly primitive that they still think digital watches are a pretty neat idea!
<BR>
From the HitchHikers Guide to the Galaxy<BR>
By Douglas Adams

<a name=”C4″><h2>Chapter 4</h2></a>
<p>This paragraph has the Anchor tag with the name attribute so when clicked ,you scroll here</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

The above code would give us the following outcome. Take note that clicking on “See also Chapter 4” immediately brings us down the page to where Chapter 4 is.

Chapter 1

This chapter explains bla bla bla

Chapter 2

This chapter explains more bla bla bla

Chapter 3

This chapter explains why the earlier chapters explained only bla bla bla

some text here to make the page scroll for instance Far out in the uncharted backwaters of the western spiral arm lies an small unregarded yellow sun. Orbiting this at a distance of roughly 90 million miles lies an utterly insignificant blue green planet whose ape decended life forms are so amasingly primitive that they still think digital watches are a pretty neat idea!
From the HitchHikers Guide to the Galaxy
By Douglas Adams