2) 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>