Bypass main content

Organizing a website (page 2)

Interlinking resources

Once you've chosen your directory structure you can start building links. To build a link you need to know the address of the resource you're going to link to, in order to fill the "href" attribute.

First of all, you must understand that the "root" directory will be represented in links by the URL or main directory of the site. Using generic examples, a root directory may be represented by "http://www.mydomain.com" if you own a domain name, or by "http://www.server.com/mysitename" if you don't. This will turn the address "root/img/image1.jpg" into "http://www.mydomain.com/img/image1.jpg" (if you own the domain name).

There are two ways to build a link: using full URLs or using relative URIs (see URI and URL definitions). The easiest way is using the full URL. This way you just write down the whole path without taking care of where the destination resource is referred from. For example to refer to Isaac's biography document in the third example of the directory structure you should write "http://www.mydomain.com/artists/isaac/bio.html" no matter where you're linking from (i.e., the directory where the document containing the link is).

This linking way works fine to link to external resources (located in different computers) or internally if you have a domain name of your own and you intend to keep it that way. But suppose that you decide to change your domain name or you change from a free server (http://www.freeserver.com/mysite) to a paid server where you can have a domain name of your own (http://www.mydomain.com). You can easily see that you will have to correct all the links, replacing the old domain name by the new one.

To avoid this problem you can make use of relative URIs. A relative URI is a part of a full URL, and can be considered as the path you have to cross (through directories) to go from the referring document to the destination resource. To make it clear lets give some examples based on the Directory Structure's third example.

So, lets say that you want to put a link to Isaac's biography in the "artists.html" document. As the referring document is located at the "root" directory, we'll begin from there:

Now we have the path. The only thing left to do in order to get the relative URI, is to separate all this parts with slashes, what results in: "artists/isaac/bio.html". And there is your "href" value.

You may be asking yourself: how do I go back? The way to go back is using the special directory "..", which represents a directory's parent directory. So whenever you want to build a relative URI and you need to "go back" to the previous directory, you must use the ".." directory. Let's see an example where we need to insert a link in my biography page pointing to Isaac's biography page. Again, as the referring document is located in the "me" directory, we'll begin from there.

After separate all with slashes, we get the relative URI: "../isaac/bio.html".

Note how, as we're going back to the parent directory, we don't user the parent's name ("artists"). Instead, we use the special ".." directory.

Uploading files to the server

There are a few basic things that you must consider before moving your files to the server. The first one is that you must know which of the directories in your server acts as "root" for all the public directory structure (container for the files that can be accessed by the public). In most free servers the root directory is easy to identify, because it's the top directory, which means that you can't go upper from there (has no parent). But when you pay for a server you usually get a different directory structure where the directory "public_html" act as root for you website. Anyway, if you can't figure out which directory is the "public", you should ask for support to the service provider.

The other thing to find out is what files your server consider to be index files. An index file is the one that is shown when the request doesn't specify a file (e.g., "http://www.mydomain.com/" or "http://www.mydomain.com/thisfolder/"). Index files varies depending on the server but most of them consider "index.htm" and "index.html" as index files, which is fine to begin with.

Having undertood this information will make it easier for you to handle your files in your server. You should be ready to proceed to the next tutorial.