/birdpics/owl/ = path
( the path always begins and ends with a forward slash - / )

page.html = file name
(our base document for this example)

We would write < img src="pic01.jpg" >

First, we leave off the host because it is the same as the base document's. If no host is included, the browser will assume it to be the same as the base document's.

Second, we leave off the path because that is also the same as the base document's. Note that we do NOT include a forward slash before "pic01.jpg". Leaving off the forward slash tells the browser to append the base document's path to the file name.

If we were to include the forward slash ("/pic01.jpg") we would be telling the browser that the image url is
http://www.colliope.com/pic01.jpg, which would be incorrect. Think of it this way; if you were to insert that single forward slash, that would be telling the browser the path is "/". By leaving the path off, you are telling the browser to add the base document's path.

We would write < img src="/gifs/groovy14/button.gif" >

Again, we leave off the host because it is the same as the base document's. But we must include the path this time because the path to the image is different than the path to the base document it is on.

We would write < img src="thumbs/pic01.jpg" >

Again, we don't need to include the host because it is the same as the base document's.

The path is the same, but with an additional subdirectory (thumbs) added to the end of it, so by writing "thumbs" with NO forward slash, we are telling the browser to append the base document's path ( /birdpics/owl/ ) to "thumbs/pic01.jpg" giving us "/birdpics/owl/thumbs/pic01.jpg".

you can use a system of "../"s to refer up to those files. I personally find writing the path to be easier than using the "../" method because it is less prone to errors or typos. To learn how to use that method Click Here.