Hyperlinks, also know as hotlinks, are a way to let your visitors retrieve another page from your website or even from another website altogether. They can also be used to allow your visitors to download files from your server or to jump from one place on a page to another. Links have two ends called "anchors", the "source" (meaning the text in your document) and the "destination" (meaning the webpage, image, sound clip, etc you want to open).

If you read thru the document we're working on, you'll see references to other pages at Ancientworlds sprinkled throughout the text. You'll also find a list of resources at the bottom of the page. And the second paragraph actually says, "You can download a copy of the blank html file here." Rather than simply mentioning these external files, you can make the references to them more helpful by turning them into hyperlinks (links, for short). They are applied using "anchor" tags. Like this:



We have three different types of links in our document. Let's begin with the links to other webpages.

Link to External Pages - Scan down to the second paragraph of the section called "Signing Up for Lessons" and you'll see the Arachne post "Lesson 04-HTML Syntax, Part Three" referenced. Linking to other pages is the most common use of the hyperlink, so we'll use this for our first example.

Hyperlinks are created using the (for anchor) tag. As with most html tags, anchors require both opening and closing tags.

To create a link, you first need to choose what text you want to use. In this paragraph, we're going to turn "Lesson 04-HTML Syntax, Part Three" into our hotlinked text. So, in your source code, wrap this text with opening and closing anchor tags. Like this:

But this doesn't tell the server where to find the document you want to open. To do this, you must reference the URL of the page you want to open, using the href= attribute. As previously discussed, you can use either absolute URLs or relative URLs, but remember if you use absolute URLs, you must include the scheme (http://). Like this:

You can practice by creating hotlinks to "Lesson 01-What is HTML?" in the section entitled "What's in it for me?" and to the "Tutorial Discussions - HTML/XHTML" thread in the next to the last paragraph. Finally, add links to the Arachne's Web threads listed in the list section at the bottom of the page. The correct URLs for the External Resources section are:

• http://www.w3schools.com/html/default.asp for W3 Schools
• http://www.htmlgoodies.com for HTML Goodies
• http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html for A Beginner's Guide
• http://dir.yahoo.com/Computers_and_Internet/Data_Formats/HTML/ for Yahoo’s HTML links
• http://www.hwg.org/ for The HTML Writer’s Guild

Link to Downloadable Files - To make a target file automatically download (rather than open) when the link to it is clicked, all you need to do is put your target file(s) into a zip file. This can be done using several different programs, the most well-known of which is Winzip. Once you've zipped it and uploaded it to your webspace, create a hotlink exactly like those above, pointing to the .zip file. Look at the second paragraph of our document and you'll find a reference to a file for download. To hotlink this text to the arachne.zip file, your code would look, like this:

You can download a copy of the file here.

Links within a page - Sometimes you will want to link two sections of text on the same page. For example, you could hotlink each entry in a table of contents to the section of the document it references. To do this, you use the anchor tag a little differently. The source link (i.e., a table of contents entry) has an anchor tag very similar to the tags we used above. The only difference is the href= attribute points to the name of a destination link (i.e., the section of the document to be visited) on the same page rather than to an external URL. (Notice the # before the destination name.)


The destination link has a named anchor tag.


First, find the two sections of text you want to link together. In our document, scan down to the third paragraph of "Signing up for lessons" and you will see there is a sentence that reads, "...you can download a copy of this html file above and you won’t have to type it." Rather than simply describing where the download link is, you can turn the word "above" into a hotlink that jumps back to the download link in the second paragraph.

Begin linking the two by deciding which will be the source and which the destination. Since we want the word "above" to cause our visitors to jump to our download hotlink, "above" is the source anchor and the download hotlink is the destination anchor.

1. Return to the download hotlink we created in the second paragraph of the document (see Link to Downloadable Files).



2. In your existing anchor tag, add a second attribute (either before or after the href=) called name="downloads". (I've chosen to name this link "downloads" in order to make it more self-explanatory).

Your destination anchor in the second paragraph should look like this:

You can download a copy of the file here.

3. Now, in the third paragraph of "Signing up for lessons" locate the text that reads, "...you can download a copy of this html file above...." and wrap anchor tags around the word "above".



4. Insert an href= attribute that reads "#downloads". (The pound sign tells the browser that the reference is an anchor name.)

Your source anchor should look like this:

...you can download a copy of this html file and you won’t have to type it....

Now, when visitors to the page click the word "above", the browser window should "jump" so that the link to the downloadable file is at the very top of the viewable portion of the webpage.