The purpose of this web page is to teach you how to make all your web hyperlinks relative links. What this means is if the file (image or text) is going to be in your folder on the web server, then there is a great advantage if you do not type out the entire URL to create this linkage. Relative links are an easier way for you to link your pages together (and one that will save me a lot of headache when it comes time to save your web pages in the BioServer Archives).
1) Keep the name short and descriptive but do not insert spaces.
2) You must end file names in either .html or .htm for a browser to read them. You must name figures as either .gif or .jpeg for a browser to see them.
3) Do not use dashes (-) or slashes (/ or \ ) or dots (.) in names of files (except as noted in 2) or folders. You can use underlines ( _ ) or squiggles (~) if you want.
4) Don't create a folder unless it helps you keep organized but don't avoid them or else your root folder will get too crazy.
Let's say you wanted to link from your home page (called homepage.html) to your assignment on a gene. You could type in the entire URL <http://bio.davidson.edu/Courses/genomics/username/gene.html>, but that is too much effort and you might make a mistake. Since you are a sophisticated web designer, you will make a relative link. If the methods assignment is in the same folder you simply use the file name <method.html>.
You might decide to keep things orderly, you will create different folders for each of your web assignments. This would require you to link from one folder to another. Again, the best way is to use relative links. Let's say you want to link from your main page to yoru gene.html page which is inside a folder called "gene". The relative link from home to gene would be <gene/gene.html>. You see, the link tells the browser to look inside the current folder for a folder called gene. Inside the gene folder is the file called gene.html.
To link back up from gene.html, you would create a relative link like this: <../home.html>. The double dot and slash tells the browser to look up one level to the parent folder and locate the file called home.html. For each layer up, you add another pair of dots and a slash. For your last assignment, you should link from gene.html to protein.html which is located in a second folder called "protein" and is located inside the same parent folder as the "gene" folder. To link from gene.html to protein.html, you would use this relative link <../protein/protein.html>. It sounds confusing in the abstract, but when you create your own web site, it will be more obvious.
The most important thing to remember is to test your links. Once you have loaded the new files on the Biology Server, use a browser to test out your links. Continue to modify the relative links until they all work. There are programs such as Dreamweaver and GoLive that make all of this much easier, but you have to buy those programs. Netscape Composer is free.
For Help with More Complex Web Sites
Learn How to Access Your Folder on the Biology Web Server
Davidson College Biology Department
© Copyright 2001 Department of Biology, Davidson College, Davidson, NC 28036
Send comments, questions, and suggestions to: macampbell@davidson.edu