ANCHOR TAGS



Page Links

These are probably the thing that HTML is most well renowned for. Anchor tags allow you to define links, that, when clicked on, take you to another page on the web. Here I shall be teaching you the different types of anchor tags, and how they are used. I'll start with a basic hyperlink:

Using the following code, you can define a link to another website:

<a href="http://www.newpage.com/">Link Text</a>

Here, <a> is the anchor tag, and </a> is the end anchor tag. Make sure that you always remember to end an anchor, or everything else on your page after the link is defined will become part of that link.

The anchor tag cannot be used without defining the parameter, which is "href", meaning "hypertext reference". After that you simply place the location of the file or website that you want to link to, type the text that you want to act as the link, and then insert the ending tag.

That's about as hard as anchor tags get.

Mail Links

Here is another useful form of the anchor tag:

<a href="mailto:person@address.com">Mail Me!</a>

Here, instead of putting a URL, we can put an email address, as long as we put the "mailto:" protocol in front of the address. This will attempt to open a new email window in whatever the user's default mail tool is.

Targeting

Later on we will learn to use frames, and then the use of anchor tags can become a little more complex, but in order to make it easier, I'm going to teach you what you need to know about opening links in different sections of the webpage now. All you need to do is use the "target" function. This function can be used outside of a frames page, to open a new browser window in which to view a link. Let me demonstrate:

<a href="http://www.url.com/" target="display">Link</a>

Here, "display" tells the browser to open a new window, and display the link in there.

Indexing your Page

Finally, there's the issue of indexed pages. If you have created a page that is quite long, or has a lot of sections, then you may want to have links at the top of the page to take the reader down to the relevant section, or at the bottom, to take them back to the top. There are two things that you need to know to achieve this. The first is that for a link to work, it must have a location to go to, else it will return an unfound error when you click on it. This means that if you are linking to further down the page that you're already on, then simply putting in the URL of that page is insufficient, because it will always take you to the top of the page. What you have to do, then, is label the section of the page that you wish to link with an anchor tag, thus:

<a name=section>

And in this case, you do not need to use the </a> tag.

What this has done is told the web browser that from that point on in the HTML is part of the section "section", and that if that section is linked to, then to put the next bit of HTML at the top of the page, and then carry on as normal.

To link to this, the second thing that you need to know is that links that occur within a page are written thus:

page.html#section

Where the "#" tells the browser that once it's loaded the page "page.html", it's to look for the section "section". So you would write the following:

<a href="page.html#section">Go to Section</a>

.... Various bits of HTML ...

<a name=section>

...Relevant HTML for section

Note, also, that anchor tags are not just for text, they can be applied to images also. As I said briefly in the previous section, you can turn off the border around images if you've used them as a link. You cannot, though, turn off the underlining of a link in text (except with the use of style-sheets, which we shalln't go into here), it will always appear as you have defined it in the body tag.





Now have a go at the exercise for this section.

Once you have done that, move on to the next tutorial page.


[Index] [Introduction to HTML] [Building an HTML Document Template] [Basic Text Formatting] [Image Includes] [Anchor Tags] [Tables] [Advanced Text Formatting, plus Other Tags] [Lists] [Client-Side Image Maps] [Very Basic JavaScript] [Frames] [Forms] [Conclusion] [Reference List] [Glossary of Terms]

Return to Front Page