Links are what make the Web a web!! You can add links, or hyperlinks, that will connect your page to any other site on the net...and other sites can link back to your page(s).

In order to create this link you will need the URL of the page you want to link to. URL stands for "Uniform Resource Locator" and is the address of a web page. The URL or address of this pages Index page is: http://www.wcnet.org/~htmlhelp

Notice that just keying in the address, like it is above, does not make it a "hot" link. We need special coding to do this. First, you will need to decide which word or words on your page will act as the "hot" link. "Hot" links are the words that people can click on to go somewhere else.

PLEASE...Please...please do NOT use "Click here" on your page for the links. Most people know when they see an underlined word or phrase, that is a different color, that this is a hot link. "Click here" is redundant! And if you use it every time you create a link...your page will be all "Click here's".

Links are generally underlined and can appear in your browser window as a different color from the rest of the text. The default color for links is blue, but we already know how to change that. (Lesson 4)

See how it works above? You can click on the word Lesson 4 and go to that page to check out how to change the color of your link. The link is coming up on this page as pink and is underlined. This tells you that you can click on it to go to the other page.

If you put your cursor over the word Lesson 4 above (without clicking on it) on the bottom of your browser window will be the URL, or address, of the page this hot link will take you. When you actually click on it, and go to that page, the URL will be on the top line of your browser window. This is where you can write down the address (or bookmark the page) so you will have the URL to use later for your hot link. When you bookmark your page, a screen will pop up with the Title (way back from lesson 3) in the box for your bookmark information. If you don't like this title, you can change it now, to something that means more to you.

The code to create your links is called the Anchor tag...here is what it looks like:
<A HREF="your address here"> </A> Here is the explanation:

• A = Anchor tags    
• HREF = Hypertext REFerence, which tells the browser what file it is referencing and where to find it.
• YES...there must be a space between the A and the HREF for the code to work.
• ="your address here" where it says your address here is where you will key in the address of the page you want to link to. The address of the homepage of this site is: http://wcnet.org/~htmlhelp ...so this is what we would want to key in here. The address must be keyed in exactly (lower case, upper case letters, - or _ (underline), periods, slashes, everything) or it will not go to the place you intend, or your visitor will get an error message. Another tip here: Page address's change a lot more than you may think, making a link on your page no longer valid. You must check your links every so often to make sure they are still good. There are tools online that can help you do this.
• Between these two codes, where you see the space above, is where you will key the word or words you want to use for your hot link...not Click here! BUT...you already know that! and you will not leave any spaces in between these codes....right?
• </A> the closing Anchor tag. This is a must...this is what ends the hot link. If you do not close this out all the rest of your text on your page will be like a hot link (underlined and a different color).

Let's try this out. Let's create a link to the index page of this HTML Help page...here is the code:

<A HREF="http://www.wcnet.org/~htmlhelp">HTML Help page</A>
NO spaces between the >HTML Help page< and the codes.

This is what it will look like:   HTML Help page

Now, let's take this a step further and put it in a sentence:

If you need help learning HTML coding, check out this HTML Help page at the Wood County FreeNet.

This is what the code for the above line looks like:

If you need help learning HTML coding, check out this <A HREF="http://www.wcnet.org/~htmlhelp">HTML Help page</A> at the Wood County FreeNet.

Notice where the spaces are: between this and <A HREF, before the beginning of the code, and between </A> and at, which is after the closing anchor tag. We do not want any spaces inside our codes, except the spaces between the words we are using...not before or after the words we are using.

If we put the spaces inside the code, it will look like this:

If you need help learning HTML coding, check out this HTML Help page at the Wood County FreeNet.

See how the spaces are now part of the hot link? They are underlined, so there is really no spaces between these words.

Add this sentence to your page, creating a "hot" link to the HTML Help page. Try some others if you would like to.

Email Links

Almost all the same rules apply to this code as the above code, except the code is different and now we need to know the email address of the person's email we want to link to. Usually this will be our own email address we are going to put on our page. I will show you how to do this several ways.

First the code we will be using: <A HREF="mailto:"> </A>

Again we are using the anchor tag, but this time the code is starting us out with the mailto: inside the code. So...now all we have to do is key in the email address of the person we want to link to.

<A HREF="mailto:htmlhelp@wcnet.org">Email HTML Help</A>

This is what it will look like on your page.... Email HTML Help

Yes...we do want to stipulate here that this link is an email link. Either use the word Email, use the email address (like the next example), or use a graphic that says Email on it (more later on graphics).

Here is the way to make the link to your email account using the actual address:

<A HREF="mailto:htmlhelp@wcnet.org">htmlhelp@wcnet.org</A>

This is what it will look like:   htmlhelp@wcnet.org   It's not really a good idea to show your email address this way, but some like to. It is better to use words like...Send me Email, Email me, Email HTML Help...whatever.

Now...if you click on one of the above email links (in blue or pink letters, that are underlined) you will get an actual email box come up already addressed to the person's email address. Neat huh?

You can also use a graphic for an email...like I did below. This will be in lesson #8.

Now you need to insert your email address using some words, or the actual email address, on your page. Remember to save your work.

Please use the email link below if you have any questions about your lesson.