Hypertext Links

Hypertext links, also known as "hyperlinks" and "links", make it convenient to go from the page that you are on to another page without having to type the URL in the address box. The hyperlink feature uses the anchor tag (<A>) with a hyperlink reference (HREF). A browser will usually highlight the link by changing the color of the link and also underlining it.

Links to a Different Page

Writing links is more complicated than any of the other tags I have already shown you. It may seem complicated to you at first, but after you use it a few times you will easily remember what to type. Here are the steps required to make a link, with this example linking to "HTML for People Who Want to Learn":

1. <A
   Called an anchor, this starts the tag and tells the browser to make this a link.

2. HREF=
   This means Hyperlink REFerence. This attribute specifies the location of a Web resource.

3. "http://geocities.datacellar.net/SiliconValley/Vista/2823/"
   This is where you enter the address of the page that you want to link to.

4. >
   Close the starting anchor tag.

5. HTML for People Who Want to Learn
   Now type the text that you want to be the link.

6. </A>
   Now just type the closing anchor tag, and you're all done!

How the anchor tag looks in one piece

<A HREF="http://geocities.datacellar.net/SiliconValley/Vista/2823/">HTML for People Who Want to Learn</A>

How it will look on your page:

HTML for People Who Want to Learn

When you make a link to a page that is in the same directory, you can type just the file name of the page instead of the full URL. For example, when I link back to the starting page of this site, this is what I type:

<A HREF="index.html">Home</A>

And it looks as if I had typed the complete URL:     Home

Remember that file names are case sensitive. If you have a page "MyPage.html" and try to link to it as "mypage.html", that link will not work. You must link to it as "MyPage.html". To help keep things straight, try to keep all file names in lower case.

Links Within the Same Page

If you want to put a link to a specific section on the same page, you use a named anchor, also known as a local hyperlink. To use a named anchor, you name the section that you want the link to go to, and then you put a reference (link) to the section. When this link is activated, the named section will appear at the top of the browser window.

Naming the section

Go to the section and put an anchor around the section heading giving it a name:

<A NAME="sp">Links Within the Same Page</A>

	When naming the section that you want to link to, you do not need to use the actual name of the section. It is faster and easier to use abbreviations or acronyms. I used "sp" as an acronym for "same page".
	Each named anchor on a page must have a unique name. After naming a section ("Links Within the Same Page" in this example), it will not have any visible differences from the way it looked before naming it.

Linking to the named section

To make a link to the named section, write this:

<A HREF="#sp">Links Within the Same Page</A>.

Notice that you just write an anchor with the name of the section you are linking to with a "#" before the name. Now don't forget to put the # before the name because you need to have it in order for the link to work. Since you are not linking to a specific page, you do not put an extension like ".html".

Linking to a target on another page

If you want to make a link to a specific section that is on a different page, include the URL (or just the file name if in the same directory) in the anchor.

<A HREF="htmlchp3.html#sp">     or
<A HREF="http://geocities.datacellar.net/SiliconValley/Vista/2823/htmlchp3.html#sp">.

And this is how it will look on your page:

To learn how to make links within a page, please go to the section named Links Within the Same Page.

Go ahead and click on it. Then scroll back down to read how to make a link to an e-mail address.

Links to E-mail Addresses

"How do I make a link to my e-mail address?"

To make a link to any e-mail address, you use the "mailto" anchor. When a person clicks on a mailto link, their browser's e-mail window will open, with the specified e-mail address already in the "To:" box. The mailto link is like any other anchor, except that the e-mail address takes the place of the URL, and "mailto:" is written before the address.

To put a link to my e-mail address, this is what I write:

<A HREF="mailto:abcs_html@geocities.com"> abcs_html@geocities.com</A>

And this is what it looks like:

abcs_html@geocities.com

Notice that when you put the mouse cursor over a mailto anchor, your status bar reads either "mailto:abcs_html@geocities.com" or "Sends mail to abcs_html@geocities.com", depending on what browser you have.

Last Modified: Friday, 17-Jul-98 18:28:26 PDT
Page URL: http://geocities.datacellar.net/SiliconValley/Vista/2823/htmlchp3.html