Naming Files & Understanding URLs

Before you begin the task of creating your web pages, you need to understand how naming and organizing these files affects the way they interconnect or link to one another, via the URL. This document gives some recommendations for naming and organizing your files and discusses how Absolute and Relative URLs are used so that your linked files will always work.

Naming Files

• Give your files descriptive, consistent names.
• Give your page files an extension of .htm.
• Even though you may be able to use a longer filename on your computer, we recommend using the 8.3 convention (8 or less character name with a 3 character extension such as 'yourpage.htm'). Filenames become part of the page's URL, and shorter is better!
• Do NOT include special characters (such as #, &, %, ^) or spaces in your filenames.
• Files on the NT Web server are NOT case sensitive; YourPage.htm is the same as yourpage.htm.
• If you name the first page of your website 'index.htm', you do not need to state the filename to reach your site. For instance, if my files reside on the web server in a directory called 'Mydir' and I've named my homepage 'index.htm', readers can reach my page by using the URL: "http://www.uwec.edu/Mydir/".

Organizing Files

• If your collection of web documents is small (up to about 30), storing them in one directory (referred to as folders for Macintosh users) is logical. However, as your collection of files grows, you will want to consider grouping your files into directories.
• The type of directory organization appropriate for you will depend on the type of information that you are publishing. The example below illustrates one possibility.

• In the example above, History is the main level directory. Courses and Graphics are subdirectories below History, but on an equal level with each other. Subdirectories could be created under Courses and Graphics.
• In most cases, the main level directory (Ex: History) will already be created for you on the web server before you move your files.

Absolute and Relative URLs

• Do you want to tell someone about your site? You need to give them a URL. What's a Website without connecting to and from your collective pages? You need to use a URL in the HTML code.
• What is a URL?

  A URL (Universal Resource Locator) is the address or location of a file, whether it be an HTML page, a graphic image or some other Web file. There are three parts to the address. In the example

  "http://www.uwec.edu/tour/tour.html":

  http:// is the Internet Tool Type
  www.uwec.edu/ is the Host Name
  Tour/tour.html is the Path and Filename

• What is an Absolute URL?

  This is the method of using all three parts of the URL to establish the location of the linked file. Absolute URLs are used when giving out your site's location or for connecting to documents outside your directory structure.

• What is a Relative URL?

  This is the method of using only the path (directory names, if any) and filename of the URL to establish the location of a file. Relative URLs are used for files within your directory structure. The importance of relative URLs is that by using them, you can create links between files that will work no matter if they are on your computer or on the web server.

Connecting Files

Let's pull it all together with an example of a directory structure and some sample files.

Assume you have the following files and directories on your computer:

C:\History\index.htm
C:\History\dept.htm
C:\History\Courses\outline.htm
C:\History\Graphics\image.gif

Drawn graphically, they would look like this:

• The URL that connects dept.htm from index.htm is simply:

  "dept.htm"

• The URL connecting outline.htm from index.htm is:

  "Courses/outline.htm"

• The URL that connects image.gif from index.htm is:

  "Graphics/image.gif"

• What if you wanted to connect back to index.htm from outline.htm? You would use the double dot notation to take you back up one directory level, from Courses, like so:

  "../index.htm"

Final Notes

Notice a couple of things about URLs. When used in HTML code, the URL is enclosed in quotation marks. The forward slash (/) is used to separate the directory name(s) from the filename.

For more information on how URLs are used within HTML codes, check out Linking to Internet Resources in the Web Publishing Series, a collection of HTML Editing Guides.