HTML documents allows you to link to have the ability to link them to other HTML documents. Links are those words or image in the HTML pages which when you click on them, another HTML page will be displayed. You also can use link to connect to other files like images, executable files, zipped files and so forth. There are basically four types of links:
The list above is just is just to give you a rough idea what of kind of links are available.
The <A> tag is used in linking HTML pages together. You will use the attribute HREF to link your pages together. If your page is on another site, you will need to include the full address of the page you want to link to. Example, if you are linking to www.whatever.com/index.html, you will write the code as follows:
<A HREF="http://www.whatever.com/index.html">Click here to whatever site</A>.
Okay, please remember you need to include the 'http://' if you are providing the full address of a site as above. Then enclose the site with two quotation marks.
Linking with the same directory is much more easier than linking to another site. All you need to provide with the HREF attribute is just the HTML page name which will be enclosed with two quotation marks. Let's look at the following example:
<HTML>
<HEAD>
<TITLE>Listing 6.2 Simple Link</TITLE>
</HEAD>
<BODY>
Follow this link to <A HREF="http://www.whatever.com/index.html">whatever site</A>
<P>
To go to another page, follow this <A HREF="next.html">link</A>
</BODY>
</HTML>
Figure 6.2
Click on the link to see the result. You will see 'whatever site' is underlined. Any text within the <A> and the </A> is clickable and it is underlined. The line below is a link to another HTML page which is on the same directory. You can see that all you need is just to provide the name of the HTML page you want to link to. Please remember any text which is enclosed by the <A> and </A> will be underlined and your visitors can click on it to link to another HTML page.
We have seen how to link to another HTML page, now let's look into how to link within a HTML page. To link within a HTML page, you need two things. First, an anchor in the HTML page so that the link will go to here. Second, the link itself. To set an anchor, you will write your code as <A NAME="HERE"></A>. Note, I assume that the name of the anchor is 'HERE'. You will put that line of code in the HTML document where your link will go to. Then another part within the same HTML document, you will link to 'HERE' like this, <A HREF="#HERE">link here</A>. By clicking on this link, you will be brought to 'HERE'. Let's see an example:
<HTML>
<HEAD>
<TITLE>Listing 6.3 Link Within A HTML Page</TITLE>
</HEAD>
<BODY>
<A NAME="HERE"></A><BR>
<H1>HEAD HERE</H1>
<HR>
<H2>HEAD 2</H2>
<HR>
<P>
This is line 1.
This is line 2.<BR>
This is line 3.<BR>
<P>
A new paragraph.<BR>
<P>
Another paragraph.<BR>
<HR>
<H1>LAST HEAD</H1>
<HR>
<P>
Another paragraph to make this page longer!
<P>
This will do.
<P>
Click here to go to the <A HREF="#HERE">TOP</A>
</BODY>
</HTML>
Figure 6.3
Remember that this kind of link is link within the same page, it will be only useful if your HTML page is really long. Imagine you let the viewer to click a link near the bottom of the page so that he can go back to the top. This will save his scrolling time and your page won't give him a hard time nagivating it!
Imagine you have a website but with many directories. Let's say your website is www.whatever.com. If you want to link to a page within your website but different directory, how will you do so? You might think you will write the full address, that is www.whatever.com/here/example1/example.html like this. You are correct! But there are better way to do this.
Let's say the HTML page you want to link to is in a directory within your current directory. Then you will use <A HREF="example1/example.html">, instead of <A HREF="http://www.whatever.com/here/example1/example.html">. Both are correct but the second one is more troublesome. Typing the address in full is known as absolute address. While the first method is known as relative address because you are refering in relative to your current directory. You might ask, how would you refer to anothe directory which has the same level as your current one? Let's say that directory which contain the HTML page which you want to link to is www.whatever.com/there/there.html, then you will write your code as follow:
<A HREF="../there/there.html">.
This link is using the relative addressing method. The '..' means one directory up, then go to the '/there' directory where the 'there.html' file is located. Relative addressing method is a bit harder to be understood comparing with absolute addressing method. But it provides a shorter way to link to the HTML page required!
After discussing above relative and absolute addresses. We will see how are we going to link from one HTML page to another specific part of another HTML page. It is almost the same as linking within the same HTML page, but instead of just writing '#HERE' alone, you will provide the HTML page name you want to link to.
<HTML>
<HEAD>
<TITLE>Listing 6.5 Advance Linking</TITLE>
</HEAD>
<BODY>
<A NAME="HERE"></A><BR>
<H1>HEAD HERE</H1>
<HR>
<H2>HEAD 2</H2>
<HR>
<P>
This is line 1.
This is line 2.<BR>
This is line 3.<BR>
<P>
A new paragraph.<BR>
<P>
Another paragraph.<BR>
<HR>
<H1>LAST HEAD</H1>
<HR>
<P>
Another paragraph to make this page longer!
<P>
This will do.
<P>
Click here to go to another site page's <A HREF="www.whatever.com/another.html#HERE">TOP</A><BR>
Click here to go to another page's <A HREF="another.html#HERE">TOP</A><BR>
Click here to go to the <A HREF="#HERE">TOP</A><BR>
</BODY>
</HTML>
Figure 6.5
Click on the link to see the result of Listing 6.5. Note that you must also provide the anchor on the HTML page where you want your link to go to. If you did not provide the anchor on that specific HTML page, your link will bring you to the top of that page.
You can achieve the same result above using relative addressing too. Please note that the '/' is used instead of the '\' backslash in DOS. And also remember that if your page is on the web server, it will be case sensitive. That is mean 'Another.html' is not the same as 'aNother.html' or 'another.html'. So, check carefully if the link is working by clicking on it.