Using Anchors and Links

The general form for a link is:

 <a href="URL">MYTEXT</a>

In this example, URL is any valid URL or filename. My text is the text you want to see on your page.

For example, let's make an item called "click me" that will take us to http://www.google.com.

The html will look like this

<a href="http://www.google.com">Click Me!</a>

And here's what it looks like. You can try it, it should work.

Click Me!

Absolute and Relative Links

A relative link means the destination is relative to the current page. Usually the link will be the name of another page in our website.

For instance, this is a relative link:

<a href="contact_me.html">Click Me!</a>

An absolute link means the destination is relative to the base URL of the website. Absolute links usually start with a backslash ( \ |). For example, this is an absolute link:

<a href="/contact_me.html">Click Me!</a>

In general we don't use absolute links much. It's easier to use relative links, because it makes the code more portable.

Anchors

You can link to a spot in a page, such as the middle or the bottom of a page..

This is a two step process. First you have to insert an anchor point. This is kind of like a target. I'm going to put an anchor point on the next line

I am a target

The html code looks like this:

<a name="mytarget" id="my_target">I am a target</a>

Now we can use this as a hyperlink destination by using the "#" prefix

Click Me!

That may not do much since we are already pretty close to that spot. I have also inserted a link at the top of this page. If you click on the next link it will take you there.

Click Me!

Try it and see if it works. You may have to make your web browser page small so that it has to scroll the page to get to the top. If the whole thing is displayed, then going to the top or bottom isn't going to do much.

Note: it is the pound sign ("#") that tells us that this is a link to a named anchor. Your anchor should NOT have a # in it, but the link must. Look at my examples and you will see what I mean.