<a>).
So to create a hyperlink to some ADDRESS, with some identifying
TEXT, the HTML would look like this:
<a href="ADDRESS">TEXT</a>Now, the ADDRESS and TEXT can be almost anything. Here's an example of a hyperlink to the Department Home page:
You'll notice that the ADDRESS I used was http://www.lpl.arizona.edu and the TEXT I used was LPL. Whatever you put in as the TEXT of the link is what your web browser will write to the page and highlight.
Also you can see that I put a http:// in front of
the Department's web address. This is necessary. Hypertext
references (href) can be all kinds of things: they can be
regular links, they can be FTP links, and they can even be
MAILTO links. So when you put the http:// in front of
the web address, your browswer knows to expect HTML.
Now ADDRESSes can take on a number of different aspects. Above, I used the full or absolute address: www.lpl.arizona.edu . For going to web pages that are not local, the absolute address is required. But what if I'm going to be writing a bunch of pages (like these HTML Class pages) that are all on the same server (namely they're all in www.lpl.arizona.edu somewhere).
In this case, you can use your knowledge of UNIX directory structure to make your life easier by using relative addresses. Let's say that I want to link to an HTML file that is in the same directory as this page is in, say one of our earlier files. In that case, I can write the link like this:
<a href="01.html">The first page</a>
When a web browser is given an address that is just a file name, it looks around in the directory where the current page is for that file. If it can't find it there, it will give you an error. Let's say that we want to link to a file in the directory "above" this one. You'll notice from the address that we are in Resources/htmlclass, what if I want to link to a file called faq.html in Resources? The link would look like this:
<a href="../faq.html">LPL Central Computing FAQ</a>
You'll notice that the ".." tells the web browser to "go up"
one directory, the same way that the UNIX command cd ..
will move you "up" one directory. You can go up more than
one by having more than one set of double periods separated by
a slash (../..). Similarly, web browsers know
what the "root" of the system is. If you were to type
cd / in UNIX you would change directory to the
root directory of the system. Similarly, a web browser
interprets a bare slash as meaning go to the root WEB directory.
So I could rewrite the LPL link above like this:
<a href="/">LPL</a>
The web browser sees just a slash in the address, which tells it to go to the root WEB directory which is just www.lpl.arizona.edu.
These have been examples of going "back" or "up" in the directory structure. What if I have a directory called test in my htmlclass directory with a file called blah.html in it. Well the link is just:
<a href="test/blah.html">Blah</a>
Using the absolute form of the address and the various forms of relative addresses will allow you to link to just about anywhere on the web. I would suggest using relative addresses when you can (i.e. when you're linking to other pages on the local file system), it cuts down on typing, and also makes the pages more portable. Let's say that I wrote the main HTML Class page using the absolute address form for the sub-pages. If I wanted to change the location (or address) of the main HTML Class page from www.lpl.arizona.edu/Resources/htmlclass to www.lpl.arizona.edu/Resources/webclass, in addition to moving all the files, I'd also have to go in and rewrite all of the links. However, if I used the relative forms of the addresses, as long as the files were in the same basic structure relative to each other, I'd just have to move all the files, and the links would still work, because they're relative.
There is one final trick. Notice that the two following links both point to directories:
http://www.lpl.arizona.edu/resources/computing/htmlclass
http://www.lpl.arizona.edu/resources/computing/htmlclass/test
You'll notice that when you go to the first address, you get an HTML page, but when you go to the second address, the browser displays what's in the directory. The difference is because there is a file called index.html in Resources/htmlclass and there isn't in Resources/htmlclass/test. Here's what happens: when a web browser is just given an address that doesn't end in somefile.html, it goes to that address and looks for a file called index.html (or index.htm). If it finds that file, then it displays the HTML in that file, if it doesn't find that file, then it just displays the contents of that directory. For example, the address www.lpl.arizona.edu and the address www.lpl.arizona.edu/index.html will give you the exact same information, because the browser is getting its information, in both cases, from that index.html file.