In this lesson you will learn how to make anchors. Anchors are basically links to other areas of the same page. You have most likely seen them somewhere. An example is when you are at the bottom of the page, and you see a link that says "Back to Top," or something similar. If you click on it, it does take you back to the top of the page. This is why I refer to them as "inside" links. Other examples are when you are at a large page with a lot of different content, and at the top of the page there is often links to the different parts of the page. Suppose I put all the lessons of this tutorial on one HUGE page. Since people don't want to search for a certain lesson, I would put anchors to all the different lessons at the top for easy access. If they want to view lesson 6, clicking the link will automatically scroll down to the beginning of lesson 6!
There are two parts to an anchor. One part is specifying the area that will be linked to, and the other is the link itself. The order does not matter. If the area you want to link to is at the bottom and you want the link to be at the top, that's fine. If the area you want to link to is at the top and you want the link to be at the bottom, that's fine too.
First I will show you how to specify the area to be linked:
The tag: <A>
The parameter: NAME
The value: "any_name"
Put together: <A NAME="any_name">
Wherever this code is inserted in your page will be the area that is linked. Note that you should replace any_name with whatever you want to call it. Try and use names that make sense, such as top, bottom, etc. Also note that you do not need a closing tag like other HTML you have learned, although it would not hurt. Remember that closing tags are just the tag with a / in front, so the closing tag for this would be </A>.
Now I will show you how to link to the specified area:
The tag: <A>
The parameter: HREF
The value: "#any_name"
The linked text: any text you want
The closing tag: </A>
Put together: <A HREF="#any_name">any text you want</a>
Notice how the link is the exact same format as to another page, which you learned in Lesson 5, except for one thing: the #. You MUST put the # in there, or else the browser will think you are linking to a file called any_name. Putting the # symbol identifies it as an anchor. Note two things:
To help you better understand this, I will put in some example code. The example below will show you the most common use of an anchor, a link to the top. I will also throw in some things from previous lessons, just to refresh your memory.
<HTML>
<HEAD>
<TITLE>Demonstrating Anchors</TITLE>
</HEAD>
<BODY BGCOLOR="White" TEXT="Black">
<P>
<!-- Naming the area for the link -->
<A NAME="top">
This is an example HTML file to demonstrate the use
of anchors. Recall from an earlier lesson that you
may use comments in your page that the browser will
ignore. The way you do that is like this:
<P>
<!-- Your comment... -->
<P>
The above comment will not be seen anywhere on the page
if this is saved as an HTML file and opened in your
browser. To test this, click on the link below this
code.
<!-- Linking to the specified area.
Note that we use # in the link,
but not when naming the area. -->
<P><A HREF="#top">Back to the Top</A>
</BODY>
</HTML>
Click here to see the effect of the above file!
Note that it won't do anything by clicking the link if you open the above file in your browser because the whole thing fits on one screen, so it doesn't have anywhere to move. It's not worth making a huge example for it to work, So you can test it out by clicking the link below, which will take you to the top of THIS page.
Back to top (COME BACK THOUGH!)
I will show you how I did it in this page. At the top of where the page actually starts (which would be right after the <BODY> tag), I inserted this line:
<A NAME="top">
And the code for the link is put wherever you want the link to show up:
<A HREF="#top">Back to top</A>
Ok, we're pretty much done with this lesson except one thing. The last thing you need to know about anchors is that you also may link to other pages at a certain anchor. For example, you may want to link to the bottom of another web page (that page must specify the anchor, though). To do that, just combine what you have learned from this lesson with the previous lesson, and you get this format:
<A HREF="file.html#anchor">linked text</A>
Note that you should replace file with the name of the file (and the address if necessary), and replace anchor with whatever the area you want to link to is specified as. This should make sense. The file should be an HTML file. The extension might not be .html, though. It could be any form of the HTML extensions, which include .html, .htm, and .shtml.