Organizing a website

Interlinking resources

Once you've got the directory structure in place, you can start creating your documents. And it's in this process that you'll need to know how to reach a particular resource in the structure to, for example, include an image in the document or make a link.

There are two ways to build a link: using full URLs or relative URIs. The easiest way to do this is using the full URL, and this is where we're going start.

Using full URLs

This method of referencing a resource, consists in specifying its complete address (or URL), which includes the computer name. As the address is complete, it doesn't matter if the resource is being referred from the same directory or from another computer across the world: the address is unique and universal. And that's what makes this method a lot easier: you just need to find out what the resource's address is and use it wherever necessary, as is.

Let's see an example of this. Suppose that, in the last analized directory structure, you need to set up a link to Isaac's biography. In such case you should write, looking at the directory structure, every folder you need to go through to make it from the root directory to the "bio.html" file in Isaac's folder, separating folders from each other with a slash ("/"). Carying out this process you'll get "root/artists/isaac/bio.html", but don't believe me and see for yourself.

  • root
    Folder
    • Step 1artists
      Folder
      • Step 2isaac
        Folder
        • images
          Folder
        • Step 3bio.html
          HTML document
        • contact.html
          HTML document
        • images.html
          HTML document
      • me
        Folder
        • images
          Folder
        • bio.html
          HTML document
        • contact.html
          HTML document
        • images.html
          HTML document
      • index.html
        HTML document
    • contact.html
      HTML document
    • index.html
      HTML document

All that's left to do with this path is to replace the root folder by the computer's name preceded by the protocol (normally "http://"). For example, if this structure is hosted in the website "www.hey-this-is-my-art-yo.com", the URL for Isaac's bio would be "http://www.hey-this-is-my-art-yo.com/artists/isaac/bio.html".

This method is good to make links to resources outside the computer hosting the document. But as you may have noted already, its downside for internal linking (between two resources in the same computer) is that it relies on knowing the computer name in order to determine a resource's location. This particularity implies that moving a website to a new server or changing it's domain name, requires updating all links using URLs. The following alternatives will solve this problem.

Using absolute-path references

Sometimes, it could be useful to make a link to a resource in the same computer by its URL, but without having to specify the computer name, as we know it's in the same machine. This could avoid the problems related to changing the domain name of the website we mentioned before.

Luckily, absolute-path references are just about that. With an absolute-path reference you can use the same method for URLs, but instead of replacing the root directory with the computer name and the protocol, you just have to delete it. An absolute-path reference for Isaac's biography would then be "/artists/isaac/bio.html". This path could be used by any document in the same website, regardless of the domain name it's associated with.

Using relative-path references

Relative-path references, also known as relative URIs, aren't just about determining the location of the resource. In this method, it's equally important where the resource is being referred from. This is what makes them relative.

To illustrate this with an example, let's suppose you need to create a link from the index page of the artists section (the "index.html" document in the "artists" directory) to Isaac's images (the "images.html" document in the folder "isaac"). The process is the same we used previously: to traverse the structure, taking note of every folder you go through, until you reach the resource, separating folders from each other with a slash ("/"). The particularity this time is the directory you begin with.

With the previous methods you always start from the root firectory, but in this case you have to start from the folder cointaining the document where the link is. The folder containing the document with the link is, in this case, "artists". The path resulting from this process is "isaac/images.html".

  • root
    Folder
    • artists
      Folder
      • Step 1isaac
        Folder
        • images
          Folder
        • bio.html
          HTML document
        • contact.html
          HTML document
        • Step 2images.html
          HTML document
      • me
        Folder
        • images
          Folder
        • bio.html
          HTML document
        • contact.html
          HTML document
        • images.html
          HTML document
      • index.html
        HTML document
    • contact.html
      HTML document
    • index.html
      HTML document

You may be wondering why the directory where the document with the link is located at isn't included. This is so because the referring document is in that directory and the next thing you need to know to find the resource referred is where to go from there.

There's one special case to consider with relative URIs, that happens when you need to move up in the directory structure. In such case you can't just go taking note of all folders you go through in your way up. This just isn't the right way. To indicate you're moving one level up in the directory structure you use the special directory ".." (two dots), which represents a directory's parent directory.

As there's only one way of going up in the directory structure, URIs use the special directory ".." instead of the folder's name. Also, all directories specified by name are expected to be found by moving downwards.

To exemplify this, suppose you need to make a link to the contact page ("contact.html") from Isaac's biography (document "bio.html" in the folder "isaac"). Starting in the folder containing the document with the link ("isaac"), the path results in "../../contact.html" (yes, we're moving up twice).

  • Step 2root
    Folder
    • Step 1artists
      Folder
      • isaac
        Folder
        • images
          Folder
        • bio.html
          HTML document
        • contact.html
          HTML document
        • images.html
          HTML document
      • me
        Folder
        • images
          Folder
        • bio.html
          HTML document
        • contact.html
          HTML document
        • images.html
          HTML document
      • index.html
        HTML document
    • Step 3contact.html
      HTML document
    • index.html
      HTML document

Prev123Next