Using Links

What is a Link

A link for the purpose of this discussion is simply a link to another resource. A resource may be a web page, an image, a script, really anything. A hyperlink, which is a link that is made for a user to use can be manipulated in a variety of ways to suit your needs I will not discuss that here.

Linking Pages

Linking pages is the most common and widely used links on the web. In fact, without links to pages, there would be no "web". Here is the basic syntax you will use to link to a page.

Here are the important parts to notice. The <a>(anchor) tag says that the enclosed object(in this case text) is a hyperlink. Basically, everything inside the <a> tag is a clickable object. Everything inside the <a> tag is linked to the href attribute's value. The words "Web site design help" is actually a link to the home page of this site. There could just as well have been an image instead of words in the hyperlink.

The href attribute in the <a> tag holds the value of the resource you can reach by clicking on the object inside. In this case, that object is the home page of this site.

If you want to link to another page, use the syntax above and write in links on your pages. Here might be an example paragraph you might have a link in:

What can Dave's Web Help do for you? Check out this web site help site to find answers to your questions..

This would be your code to make this happen:

Relative vs. Absolute Links

There are two types of links, relative and absolute. A relative link means the resource is located in a place relative to this document. An absolute link means the resource is located specifically at this adress.

You can use either method to link to files in your own web site. If you want to link to a resource outside of your site, you must use an absolute reference. Absolute references are the easiest to use given that you are writing in the exact address of the resource. For example, a link to the contact page on this site from anyone's web site or from any page on this site would look this this as an absolute link:

Similarly, if I wanted to link to an image named "foo.gif" on this site from anywhere, it would look like this:

Now, taking the two examples above, let's say I wanted to link to those two files using relative references. Here is how i would do it. I would look at which directory I was in and see where I needed to go to get to the resource.

In the case of the contact page, I need to go to the top directory of my site and make the url from there. If you look at the URL of this page, you will see that I need to go up two levels to get to my top directory. I have highlighted the two directories I need to go up here:

http://www.daves-web-help.com/site-creation/basics/links.htm

If I go up two directories, I will be in my main directory where I can find the file contact.htm. Relative to the page I am at, I need to up two directories(I don't care what they are called) and then I can access my file. This is my relative link to the contact page from this document. To make the link, I will leave out the protocol and domain name(http://www.daves-web-help/). I will then use the notation ../ for every directory I need to go up. Since I need to go up two directories I use ../../ If I had needed to go up three directories, I would use ../../../ and so on. Once I am at the directory I need to be at, I follow the path to the file I need. In this case, the file is in the directory up two levels, so I just write the file name. Here is the link:

Since the image I was trying to get to before is in the images directory, I need to put in the directory and then the file name, like so:

Is the file in the same directory as your current document? Just link to it using the name of the file or preceed the file name with a ./

or

You can use this technique to reference just about any resource from your web pages. Since a relative link points to your domain, you cannot access any resources outside of your domain using this technique.