The three types of addressing
The three types of addressing are used in the following places:
  • In the HREF="sometypeofaddress" part of an A tag
  • In the SRC="sometypeofaddress" part of an IMG tag
All of these examples are given using the A tag, but the same logic and rules applies to the IMG tag.
We are at the URL

http://www.meyerconsult.com/student/wpd01/addressing.html

If I wanted to link to the hompage for another student's site, I could do it in one of three ways.


1) Absolute Addressing
Absolute Addressing

Absolute addressing is an address that is completely spelled out with the protocol name, the server name, the directories leading to an html file on that server, and if necessary the file name** itself.

When to use Absolute Addressing:

  • Linking to something not on the same server as your web page
  • Telling a web server's form script what page to use after your form has been submitted
  • Linking to something that requires a different protocol, such as
    • an e-mail link(mailto:)
    • an ftp (ftp://) link
    • secure server link (https://)

 

An example of Absolute addressing used to link to another student's site:


Here is a link to the student found in wpd34 using absolute addressing:

<A HREF="http://www.meyerconsult.com/student/wpd34/">Student wpd34</A>

An example of Absolute addressing used to for an e-mail link:

If trying include an e-mail link E-mail You, you would need to use absolute addressing It would look like this:

<A HREF="yourname@yourisp.com">E-mail me</A>

2) Root Addressing
Root Addressing:

When to use Root Addressing:

  • To link to something on the same web server as your site, but not part of your site (for example, the class syllabus, or another student's site).
  • When a link using root addressing would be shorter and easier to understand than the same link using relative addressing

With Root addressing, you start with an initial slash which puts you at the server root, and from there you detail the directories that lead to the html (or other) file you want to display. If necessary you include the file name. If a file name is not specified then the default file name (if it exists) will display.

Remember: Root addressing cannot be tested locally--you must first publish your page so that the page will be on the same server as the thing that is being linked to.

An example of root addressing


Here is a link to the student found in wpd34using root addressing:

<A HREF="/student/wpd34/">Student wpd34</A>

3) Relative Addressing
Relative Addressing:

When to use Relative Addressing:

  • To link the pages of your site together (that way if you move your site to a different server, all of your links will still work)

Keys to understanding relative addressing

  • ../ takes you to the parent of the directory that the file you are currently viewing resides in. The wpd01 directory or folder is inside the student folder, so using "../" as a link on a page inside of wpd01 will take us to the parent folder of wpd01, which is the student folder:
    Test of ../ as link

  • directoryname/ takes you to the default file for that directory, which is a child of the current directory. If you make subfolders for your final project, you'd be using this style of addressing to link to your final project folder's home page.
    My Final folder

  • filename.html takes you to a file of that name which is in the same folder/directory as the file you are looking at now.
    My image assignment

  • #TOP Takes us to an anchor point on the same page called TOP (at the top of this page, there is an anchorpoint created with the name TOP)
    Go to the top of this page

  • page.html#TOP Takes us to an anchor point on the page named page.html called TOP (for the example below, I've put a TOP anchor on my student index.html page, and have linked to that)
    Go to the top of my student page

Relative addressing is used usually to link to a web page published on the same site as the page you are on, and can also be used for files on the same server but not part of your site.

Example of linking to another student site using relative addressing


Here is a link to the student found in wpd34 using relative addressing:

<A HREF="../wpd34/">Student wpd34</A>

The intitial ".." takes the browser one directory up from the directory we are currently in--we are currently in wpd1 which is inside the student directory, so going one directory up takes us to the student directory, and from there the URL specifies changing to the wpd34 directory.

Example of linking to your final project folder

If trying to link to your final project, you would also use relative addressing. It would look like this:

<A HREF="final/">Final project</A>

**Please note that if no filename is specified, as in all addresses above, that means that the web server will display whatever the default file is for that system, if one has been published in that directory. If no file with a default name has been published, then a list of all the files in that directory will display.

On some systems the default file name is index.html or index.htm, on other systems that default file name might be default.html or home.html. Each server can be setup differently.

Still confused?
read

http://www.stars.com/Authoring/HTML/Tutorial/relative_absolute_links.html--more about relative and absolute links.

http://www.webteacher.org/macnet/navigate/navigation.html--a really handy tutorial, including a diagram of directory structures and the paths used to get from here to there. Their homepage, might have other useful things too.