Hi folks -

Cynthia Lanius, one of our online workshop mentors, and I have have been
writing back and forth about how to explain relative links to people who
are starting out writing Web pages.  I thought I'd share something I just
wrote her with you.


Why would you want to write a relative URL instead of using the whole path
of a file or image?  Well, relative URLs are shorter, but more important,
if you have to move your Web pages from one server to another you won't
have to rewrite all the links, just move the directory. (This recently
happened to Cynthia when Rice University, where her server is located,
arbitrarily moved her from one server to another, changing the paths of all
her files.)


Cynthia has a top-level directory /~lanius and inside it a directory
/images and a directory /Patterns (with her new geometric fractions unit),
and many more directories and files:

~lanius/images
~lanius/Patterns/index.html
~lanius/Patterns/add.html
~lanius/Patterns/answers.html
~lanius/Patterns/answers2.html      and a WHOLE LOT more.

She puts ALL her gifs into ~lanius/images, so the question is, how can she
write a relative URL that will display a gif that's in /images on
/Patterns/index.html ?

Let's make a tree.


                              /  hexagon.gif
               _____ /images  -- tri.gif
               |              \  smtria.gif, etc.
               |
               |               / add.html
               |____ /Patterns - index.html
               |               \ answers.html
               |
   ~lanius ____|____ /frac
               |
               |
               |____ /pres
               |
               |
               |____ etc., etc., etc., etc.
               |____


A URL is just a way of pointing along a path.  ~lanius is on math.rice.edu
so the full path (or link) to her hexagon.gif is:

  <A HREF="http://math.rice.edu/~lanius/images/hexagon.gif">

The link to the first page in Cynthia's geometric fractions unit is:

  <A HREF="http://math.rice.edu/~lanius/Patterns/index.html">

Those links use "absolute" URLs.


A relative URL, on the other hand, can start at the bottom of the tree
(index.html), crawl up a branch out of its directory, and slide back down
into another directory.  It's the part about crawling up the branch that's
usually hardest to figure out.

Let's go from index.html up out of Patterns and down into /images, and grab
hexagon.gif.

First we'll put in some stairs (two dots) and a the door-left-ajar that
will get us into a directory (the slash):  ../

        (I am making this up as I go along; that's probably the
         only time anybody has called them stairs and a door.)


<A HREF="../          moves you up out of Patterns
                      ready to go into...

<A HREF="../images    images.  Now all we need to do
                      is put in the name of the gif:

<A HREF="../images/hexagon.gif">   except that in order to place the image
                                   on the page we want <IMG SRC> instead:

<IMG SRC="../images/hexagon.gif">  Done!


Another way to handle these gifs would be to put all the images that have
to do with geometric fractions (there are only 5 of them) directly into the
Patterns directory where index.html and the other files could find them
right away because they're all in the same place, and just reference them
as:

  <IMG SRC="hexagon.gif">

But the cross-referencing on Cynthia's pages is so comprehensive and
hypertextual and COMPLICATED that relative URLs can be important for her.

The trick is to get about 3 or 4 of them right, and then go back and look
at them every time you forget what to do.  (That's what I finally did!)
Eventually, like multiplication tables, they start to be something you just
know how to do.

- Sarah

Sarah Seastone
Editor, Archivist, Web Page Designer
The Math Forum
http://mathforum.org/
sarah@mathforum.org