Week Six | Part Two: Finding and Displaying Files

The Uniform Resource Identifier

The Uniform Resource Identifier (URI), is a string of characters used to identify or name a resource on the Web.

For example, if I wanted to code a hyperlink to my Web site, I would write this:

<a href="http://www.bigplum.com">Visit BigPlum.com</a>

You might now be saying to yourself, "Hey, that's the URL." And you would be right --- before August 2002.

URL (Universal Resource Locator) was a term introduced in late 1990 when Tim Berners-Lee proposed the first specifications for HTML. The idea was to use a short character string to represent a resource that was the target of a hyperlink. Over time the term entered the vernacular and was adopted as the abbreviation for a Web site address.

There was a certain amount of ambiguity regarding the use of the term URL versus the term URI. Technically they are one in the same. So, in August 2002, the W3C URI Interest Group published a memo to clarify and standardize naming scheme protocols. This memo effectively retired the term URL, though its usage continues to this day.

You can read their memo by clicking on this link. It's informative ... and boring.

The syntax for a URI is a scheme name like "http", "ftp", or "mailto" followed by a colon ( : ) and then followed by a scheme-specific part such as a site address or file source. The main purpose of the identification is to enable interaction with representations of a resource over a network. For our purposes, this network is the World Wide Web.

Moving Between Folders

Let's bring an old friend back to help us with the next section of the lecture. Here, Snuffy!

Good dog!

Snuffy appeared to us courtesy of the URI scheme. Technically this is not the actual Snuffy, but (as noted by the 2002 W3C URI Interest Group) the representation of a resource I called 'snuffy.jpg'.

A look at the markup on my page reveals how Snuffy appeared:

<img src="../../images/snuffy.jpg" width="150px" height="150px" alt="Snuffy" title="Snuffy" />

If I translated this line of protocol code into English, it would say:

"Go to the directory called 'images', and in that directory please extract a copy of the file called 'snuffy.jpg'. Present it in my reader's browser window according to the width and height specified. Display the word 'Snuffy' in a pop-up window if the reader mouses over the image."

Simple stuff. But wait ... I don't have a folder called 'images' in my 'lectures' directory; 'images' is a folder in the main 'DES306' directory:

So, how did Snuffy get onto my page? Let's look at his markup code again:

<img src="../../images/snuffy.jpg" width="150px" height="150px" alt="Snuffy" title="Snuffy" />

The answer is found in those two little dots and forward slash that precede the folder 'images'. That bit of code told the URI to go back two folder levels from my Week 6 lecture folder and then look for the 'images' folder and the 'snuffy.jpg' file inside of it.

If I hadn't put in ../../ the URI would have looked in my Week 6 lecture directory for a folder called 'images' ... something that doesn't exist ... and the result would have been a page error.

Errors like that are very common, and can leave a designer scratching his or her head wondering what happened to a particular file. The solution is to know your site structure and the URI scheme.

Would you like to see another example? Here's a picture from my Web site 'Yanks in Blighty' which I worked on from 2002 through 2004:

This was my daughter Elena in February, 2002 just about to start her first day in the British school system ... a proud day!

So, how did her image get to your Web browser? Let's look at the URI source:

<img src="../../../yanksinblighty/0202/images/photo3b.jpg" width="240" height="180" alt="" />

The three sets of ../ told the URI to go back three levels in my site structure to my root directory called 'html' in order to find the folder 'yanksinblighty' and then drill down through the site tree until it found (and then displayed) Elena's picture.

Here's a screen grab of the site structure to help illustrate:

The point of all this is to show you how the URI scheme enables your reader's browser to find and view the files associated with your page design. The URI scheme extends to any file you wish to link --- images, documents, animations, program scripts, or other Web pages.

Integral to the URI scheme is your site structure ... the topic that started this week's lecture. Keep these concepts in mind as you move forward in your design work.