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
- images
- me
Folder- images
Folder - bio.html
HTML document - contact.html
HTML document - images.html
HTML document
- images
- index.html
HTML document
- Step 2isaac
- contact.html
HTML document - index.html
HTML document
- Step 1artists
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
- images
- me
Folder- images
Folder - bio.html
HTML document - contact.html
HTML document - images.html
HTML document
- images
- index.html
HTML document
- Step 1isaac
- contact.html
HTML document - index.html
HTML document
- artists
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.
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
- images
- me
Folder- images
Folder - bio.html
HTML document - contact.html
HTML document - images.html
HTML document
- images
- index.html
HTML document
- isaac
- Step 3contact.html
HTML document - index.html
HTML document
- Step 1artists