Thursday, October 16, 2008

How to structure your Links..

As a beginner, it is probably best to leave all files, HTML and graphics, in one directory. That way, when you link to and from your files with you do not need to have the full path.
For example, say you have two pages:
http://www.reallycreativename.com/~YOURNAME/index.html
If you want to place a link from the index.html page to the links.html page, all you need to put is My Links Page. If you are editing your links.html page, and want to link it to the index.html, all you need to type is My Home Page.
Now if you want to get a little more advanced and your host supports directories, things get a little more challenging. Let's say you have a pet and you want it to have a web page at http://www.reallycreativename.com/~YOURNAME/mypet/. So you decide to create a directory on your hard drive as c:\homepage\mypet. Then you (or your pet) writes a home page called index.html and saves it to c:\homepage\mypet\index.html. You log onto your ftp server, and make a directory called mypet. You upload your pet's index.html file into that directory.
Now your File Structure looks like this:
On YOUR index.html page, you want a link to your pet's index.html page in the mypet directory. The most common way to do this is type out the full URL (uniform resource locator) as
OR
But because your index.html is in the directory http://www.reallycreativename.com/~YOURNAME/ you can do it an easier way. Remember how when you linked to links.html from index.html without using the full URL? Well that is because they are in the same directory. Since your pet's home page is only one directory further down, all you need to type for the link is:
OR
Now you have a link to your pet's page... but say you want (or your pet wants) to link to your index.html in /~YOURNAME/. Because the directory is up one directory in the file structure, you can use two periods (..) and then a slash (/) to move back. So you are editing your pet's index.html page in the directory mypet and want to link to your page... here is how you can do it:
OR

No comments: