Peninsula Fly Fishers — Editors' Do-It-Yourself — Web Addrressing

Web Addressing

• Absolute URLs
• Relative URLs
• Targets
• Practice Exercises

Absolute URLs

The special feature of web pages is the hyper-reference, that is, the links which allow us to jump from place to place on the web. Each document on the WWW has a unique address. There are millions of pages named index.html. How do we get to the one we want? Let's examine http://www.peninsulaflyfisher.org/index.html. The URL (Universal Resource Locator) has several distinct parts to get us to the right document. (We'll skip the technical names of these parts.) The http tells your browser that this is a hypertext transfer protocol transaction. The www is the name of the server. Almost all servers are named www; we'll get to how that sameness doesn't hinder finding the right one. The peninsulaflyfishers.org is the domain name; this part is key to finding the right server and page. The index.html is the file name; it has two parts: the name and the file type, in this case, an HTML document. Your browser can handle several file types: HTML, stylesheets, scripts, images, audio, and animation/video.

The behind-the-scenes action when you send your browser to a URL involves a detour to name-servers. These servers keep corresponding lists of names, like peninsulaflyfishers.org, and numeric addresses of servers and domains. Your server's request for http://www.peninsulaflyfishers.org/index.html results in a name-server looking up the numeric address, and passing the file request to the server (and the portion of that server reserved for peninsulaflyfishers.org). Your computer has a numeric address, too. Remember when you were setting up your Internet Service Provider account? When the file is found, it finds its way back to you via your numeric address.

Relative URLs

So far this article has dealt with an absolute URL; absolute means the entire, full address—all the parts. For navigation within a website, a shorter address will do. Shorter addresses are called relative URLs. The URL is relative to, in ascending order, the current page, the current directory, or the current website. Following, you'll find instructions for moving around through a website.

A Simple Directory Structure

If all files in a website were in the same directory/folder, linking one file to another would be as simple as just naming the file. Example: Given a directory, these files are in it:

If you are on the index page and click a link to story1.html, the link would be thus: <a href="story1.html">Story 1</a>. All that was necessary was to name the file in the href attribute, because implied in a request that includes only a filename is that the file is in the same directory as the page from which the request originates.

Story 1 has two pictures in it: picture1a.jpg and picture1b.jpg. How does Story 1 find these two pictures? The <img> tag has a src attribute that works like the href attribute in the <a> tag. The two pictures in Story 1 are in the same directory as the .html file calling for them; therefore the filename alone is enough address.

Story 2 has two images as well: picture2a.gif and picture1b.jpg. Even though picture1b.jpg has already been associated with Story 1, Story 1 has no exclusive claim to it. Both of these images are addressed by filename.

Both stories refer to the stylesheet and scripts. All that is necessary to get these files is to use the filename as the address.

A Complex Directory Structure

A more complex directory structure complicates addressing of href and src attributes. Example: Given a directory, these sub-directories and files are in it (Unix servers see both directories and files simply as files; it may help you to think this way too.):

In the first example of a directory, all the files could "see" each other. In this second example, some files can't "see" each other in a direct line-of-sight. These files, all in the top level, can "see" each other: index.html, stylesheet.css, scripts.js, Story_1 (but not the files in this directory), and Story_2 (but not the files in this directory). The sub-directories, Story_1 and Story_2, contain files which can "see" only the other files in their respective sub-directory. The top-level file index.html and the second-level file story1.html can't "see" each other. The second-level file story1.html and the second-level file story2.html can't "see" each other either.

How does Story 2 access stylesheet.css and picture1b.jpg? There is a notation that means "go up one level": ../ (dot, dot, slash). For Story 2 to access stylesheet.css, it has to go up one level to where stylesheet.css is located. The src attribute's value (the address of the stylesheet from story2.html) is ../stylesheet.css.

Getting to picture1b.jpg is a little trickier. Going sideways from a file in one directory to a file in another directory is not possible. A proper address must travel a path that takes it straight up to a level from which it can travel straight down to the wanted file. A concrete example may make that rule a little clearer: From story2.html you want to send your request for picture1b.jpg up one level. There you can "see" the sub-directory Story_1 in which picture1b.jpg resides. Go to that sub-directory; from there you can "see down" to picture1b.jpg. Here's the address/filepath: ../Story_1/picture1b.jpg.

Some relative filepaths/addresses follow longer paths, but they don't do anything that the previous example does. Go up high enough to get over to a straight line-of-sight to the wanted file.

Targets

A link can take a viewer not only to a page, but to a particular place on a page. For this to work, the place on the page has to have an id to be targeted. The other part is an appendix on the URL of the page. Example: Given a page with the URL http://www.somepage/humdinger.html and a section with id="three": go directly to section three with this URL: http://www.somepage/humdinger.html#three The hash mark/pound sign/number sign (#) stands for id in a URL. Don't forget to use it.

Any HTML element may have an id. In our example above, the code might look like this: <p id="three">. Linking to a target can be done from one place on a page to another place on the same page. That case would be the most relative of all URLs. A common use is a table of contents at the top of a page whose listings link to the content they reference. The code below is from the table of contents of this page. The pertinent portion of the code is highlighted in the first content item. Notice that the table of contents has id="tc". The link two sentences preceding refers to this id to target that portion of the web page Mouse over the "table of contents" link and look at the status bar at the bottom of your browser window.

<ul id="tc" class="toc">
<li><a href="#abs">Absolute URLs</a></li>
<li><a href="#rel">Relative URLs</a></li>
<li><a href="#prac">Practice Exercises</a></li>
<li><a href="#tar">Targets</a></li>
</ul>

The headlines referenced in the table of contents all have the appropriate id's. Open this page's source code from your browser and take a look.