LESSON 5: Links To Other Pages/Files

In this lesson you will learn about one of the most important parts of web pages: Links. Every page has them. They are what allow you to "surf the web" easily.

By saying links to "Other Pages/Files," that simply means that the links are to places other than in the current page. The next lesson will teach you how to make links to different areas of the current page. Lesson 7 will teach you some more miscellaneous types of links, such as for e-mail and newsgroups.

Links are pretty simple, just like all HTML you've learned. Just like the Font tags, links consist of the tag, the parameter, and the value. The value is basically the address of the site you're making a link to. You may also have other parameters, such as the TARGET, but we will get into that in a later lesson. Also, you must put in the text that you would like to be linked.

The tag: <A>
The parameter: HREF
The value: "address"
The linked text: any text you want
The closing tag: </A>
Put together: <A HREF="address">any text you want</A>

Make sure you don't forget the closing tag, </A>, which should go right after the end of the text you want linked. If you forget that, it could produce some nasty effects on your page. This is a very common mistake made, and is VERY noticeable. Just as an example, I will make a link and purposely not put the closing tag:
Click here to go Woodchuck's U2 Page! Notice how the current text is still linked to the page. Make sure you don't do this! The best place to put the </A> would probably be after the word "here". Okay, that's enough!

Valid addresses may be the full address, such as "http://www.inconnect.com/~mkbarrus/index.html", or if the site is at the same server and same directory, "index.html". Other variations include when the link is at the same server but in a different directory, like "gzero/index.html", which will go to the directory gzero and open the file index.html. Another kind is "../index.html", which will go back one directory and open the file index.html. Note that all these examples are real pages and all work if you were to click on them. Although they are all use some form of index.html, they are all different pages.

Valid FULL links and a description (these don't work; you must replace server, dir (directory), and file with its proper value:
<A HREF="http://www.server.com/dir/file"> The full address of the site. Takes you there no matter what the current server/directory is.
<A HREF="file"> Takes you to the file file in the current directory (same server).
<A HREF="dir/file"> Goes up to the directory dir and opens the file file.
<A HREF="../file"> Goes back one directory and opens the file file. Note that you may have more than one ../ in a row, such as ../../, which would take you back two directories, or however many ../'s there are.
<A HREF="../dir/file"> Goes back one directory, forward to the directory dir, and opens the file file. This may seem confusing, so here is an example:
Say the current address is http://www.inconnect.com/~mkbarrus/html-05.html, which happens to be this page. The link <A HREF="../~dthornto/index.html"> will first take you back one directory, which would be http://www.inconnect.com, then forward to the directory ~dthornto, to the file index.html.
<A HREF="/file"> Takes you to the base directory, which would be http://www.server.com, and opens the file file.

Note that the link does not have to be index.html, nor does it have to be any html file. You can link to any type of file you want, including zip files, CGI programs, etc. Making a link to a file which is not recognized to your browser, such as a Zip file, will open an alert message where you can tell it to save the file to your hard-drive.

Another important note is that if the link is to some form of index.html, you don't have to have index.html in the link. An example would be my home page, http://www.inconnect.com/~mkbarrus/index.html. Changing the link to say http://www.inconnect.com/~mkbarrus/ would be the exact same. The server recognizes the index.html as the main page, so it automatically transfers you to that page.


Forward to Lesson 6: Anchors ("inside" links)
Back to Lesson 4: Font Size and Color
Back to the Contents

E-mail me.