Fromthepen.com: Online Web Site Tutorials

Basic Exercises
· Introduction
· ex. 1 - Make a page
· ex. 2 - Head & Body
· ex. 3 - Attributes
· ex. 4 - Text
· ex. 5 - Colors
· ex. 6 - Hyperlinks
· ex. 7 - Anchors
· ex. 8 - Graphics

Join our mailing list to receive tips and tricks.

HTML TUTORIALS: Ex. 7 - Anchor Hyperlinks

EXERCISE 7: ADDING ANCHOR HYPERLINKS :

Anchor Coding
Linking Within The Same Page
Link Coding "From"	Anchor Coding "To"
<a href="#bottom">some text</a>	<a name="bottom"></a> OR <a name="bottom">Bottom</a>

What are anchors? Simply put, Anchors take you to a section of a webpage without having to scroll. I think the best way to describe them, however, is to actually show them in action. Click on the following link to go to the bottom of this page. When you get to the bottom of the page click on the link that says "go back to top" to return.
Click here.

(Move your mouse over the above link again but don't click. Notice the "status bar" on the bottom left of your browser before you click!!! Notice that it tells you where you will go if you click. In this case, clicking will keep you on this page, but take you somewhere called #bottom. I'll explain that next)

Now that you know what they do, I will try to explain how you can use them. Keep in mind, showing anchors in action is alot easier then explain them, as you will see.

There may come a time in your coding lives that you need to create a very long page, one that requires you to scroll down to read all of the content. When this situation arises, you may find it necessary to provide links to the various sections of the web page. Most likely, if you get a job coding web pages for clients, you may use this technique. However, if you are just going to create pages for yourself, you may never use this tag, ever. In any event, anchors do allow you to jump to specific locations within web pages and can be useful.

What is a real life use for anchors? Well, most people use them when they create a table of contents page. On a table of contents page, the topics of the page are listed first. After the topic headings, the actual content will be displayed. Sometimes these pages can be very long (hundreds of printed pages worth). Scrolling would become very tedious in this situation, so providing anchor links is helpful.

Anchors are also used frequently to jump to the top of a long page, because the navigation links that allow people to jump around a web site are usually placed at the top of the page.

Ex. 7 Figure 1: Anchors in action

Anchors have 2 parts that work together to create the functionality that I described above. 1. The first part is the actual anchor. Anchors are the place that you are linking "TO". Here is example coding:
<a name="bottom"></a> OR <a name="bottom">TEXT</a>

2. The second part is the link that takes you to the anchor. You just have to modify your link so that it knows to go to the spot you want it to. Here is sample coding:
<a href="#bottom"></a>

What I didn't understand when I learned anchors was that you didn't have to actually put text on the page that you wanted to use as the place you were linking to. By not including text on the screen, you are simply linking to a point on the screen. Hope that makes sense.

Most likely when you use anchors you will get confused as to where to put the name="" attribute and where to put the # sign. I created a saying that helped me keep it all straight which goes:
What's the NAME of the place you're going to, when you POUND on the link with your mouse. Remember this and you should be ok.

I think the best way to learn them is to use them, though. So, why don't we just jump right into the exercise below.



<html>
<head>
<title> Links </title>
</head>
<body bgcolor="ffffff" link="0000ff" alink="00ff00" vlink="ff0000">
<a name="top"></a>
 
<a href="#bottom">Go to bottom of page</a>

 
 
 
 
 
 
 
 
 
 

<a name="bottom">Bottom of page</a>
 
<a href="#top">Go back to top</a> </body>
</html>

NOTE: You can use anchors to jump to a section of another page as well. Ex. <a href="exercise3.html#bottom">Go to bottom of page 3</a>. So, the # sign tells the browser when the actual page name ends and where the anchor begins. In our exercise, since we left out a file name, the browser will assume that we are linking to the same page that we are on.

YOU SEE. THE MORE I EXPLAIN THEM, THE MORE CONFUSING THEY CAN GET!! Well, I tried to keep it simple. Some of you may be confused, but don't worry about it. As I mentioned before, you wont use them that much.

In our next exercise you will adding graphics to our pages. Graphics are definately more fun than anchors!!! You'll see.

END OF EX. 7 - ANCHOR HYPERLINKS

<-- Back to Exercise 6: Hyperlinks | Forward to Exercise 8: Graphics-->

Go Back To Top

Home | HTML Tutorials | Color Charts | Practice Area