In this installment, we'll cover hypertext links, both inside the current page, and to other pages. First, we'll link to another page.
The tags used to link to another page are the <a href=""> and </a> tag pair. Simply put the name of the page to be linked inside the quote marks and surround the area which is going to be clickable with the two tags.
To make a link to another file in the same directory (folder) that your current file is in, just use the file name:
<a href="other_file.html">This is a link to the "other" file!</a>
To make a link to a file on another server, use the full URL:
<a href="http:www.dejanews.com">Click here to go to Dejanews!</a>
Here's a simple web page with links to other sites blow a link to another page in the same directory (folder).
<html> <head> <title>Example web page</title> </head> <body> <h1>Links</h1> <hr> <a href="index.html">Return to top page</a> <hr> <a href="http://www.dejanews.com">Dejanews</a><br> <a href="http://www.slashdot.org">Slashdot</a><br> <a href="http://www.freshmeat.org">Freshmeat</a><br> <hr> </body> </html>
Naturally, to have the first link work, you'll need to have another HTML file in the current directory called "index.html". If your pages are on a server (as opposed to being in a directory on your local machine), the main page in a given directory is usually called "index.html".
Now to link to another point in the same page. This only makes sense if a page is really long, and takes up several screens. Then you might want the user to be able to click on a link to go to a specific spot, or to return to the top. The link is almost the same as above, but the target is a tag inside the file, not another file.
The tag pair that you use to create a target within a document is <a name=""> and </a> The target, like the hypertext reference (link) has a name that is put inside the quote marks. To tell the browser that this is a target inside of a file, an octothorpe (#) is placed before the name. To create a target called "top_of_doc", use the tags <a name="#top_of_doc"> and </a> The <a name=""> and </a> pair are often called an "anchor".
Here's a (very boring) example page:
<html> <head> <title>Another example</title> </head> <body> <h1><a name="top_of_doc">This is another example document</a></h1> <hr> <p> This is a very short paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <p> Another paragraph. <hr> <a href="#top_of_doc">Back to the top</a> <hr> </body> </html>
As you might guess, it's possible to jump to a tag in another file as well. Just combine the file name and the anchor name like this, <a href="file_name.html#point_in_doc">. This will take us to the anchor "point_in_doc" in the file "file_name.html". No example, as this is getting a bit long already...
Next time, I think I'll do something fun and show how colored backgrounds are created.