First, let's explain exactly what a hyperlink is and why using hyperlinks is an important part of making webpages..
Hyperlinks are those underlined words that you see on web pages that take you to another page, or another part of the same page, or open up your e-mail client to send a message when you click on them with your mouse.
You can use hyperlinks on text and graphics..including banners. When you click on a banner on a web page, it takes you to another page...right? It is hyperlinked - you have already been using hyperlinks. I'm sure you have also clicked on hyperlinked graphics as well.
Okay. The basic hyperlink, the one that takes you to another page, looks like this:
<a href= "http://www.amazon.com">Amazon.com</a>
When this is displayed in a web browser, it actually looks like this:
When this hyperlink is clicked on, it will take you....you guessed it...to Amazon.com
Pretty simple, huh?
Okay, let me explain what these tags do.
The <a> tag stands for "anchor". This tag tells the web browser that you are about to use a hyperlink...you are about to "anchor" something - as in tie it to another page.
The address is then put into the href="" tag. This tells the web browser where you anchored that something to..whether it be text or a graphic. Href stands for Hypertext Reference and is called an attribute of the <a> tag. Of course, after this tag, you would put the text or the graphic you want to link to. What you want to appear in the web browser.
You then must close the anchor tag with </a>
An important note...The URL must go between the quotation marks in the href="" tag. This is vital.
Now, I'm sure you noticed that we used one tag for two HTML codes. We put the code for "anchor" and the code for "href" into the same tag...meaning we only used one set of brackets (<>) for these two codes. It is often possible to do this, and you will figure out what can and cannot share a tag as you go along. In this case, it was possible because the href= tag is an attribute of the <a> tag...meaning that they go together.
The next most common hyperlink would be a link to another page in your website. In order for this to work, the page must be in the same directory as the page the hyperlink appears on. If it isn't in the same directory, you must use the long-form, as shown above, just like you are hyperlinking to another website.
To link to a page in your website, that is in the same directory, the tag will look like this:
<a href="site_map.htm">Contents</a>
In a web browser, this would look like this:
When the above hyperlink is clicked on, it would take you to the sitemap because this page, and the page named site_map.htm, are both in the same directory.
Next, there is the "jump" link. This is a hyperlink that will take you to another part of the same page when it is clicked on. There are two steps to creating this link.
First you must identify the part of your page that will be "jumped" to. For instance, if I wanted to refer you back to the definition of hyperlinks, I would use the following code in front of the paragraph that defines hyperlinks:
<P ID="definition">
Then, later in my page, I would use a hyperlink to jump back to that definition. For example:
<a href="#definition">This will take you back to - Using hyperlinks</a>
This will give me:
Now, the other use of hyperlinks will be to open up the visitor's e-mail client, with your e-mail address, and possibly a predefined subject already put in for them. This is also done with the href tag...like this:
<a href="mailto:andrew@the-html-tutorial.com">Send E-Mail</a>
This gives you:
Now, if you wanted to pre-define the subject line in your visitor's e-mail, you would use this:
<ahref="mailto:andrew@the-html-tutorial.com?subject=Using Hyperlinks">Send E-Mail</a>
Try it out with your e-mail client...just click this link:
Pretty cool huh?
And that's all there is to know about using hyperlinks!