HTML Cookbook Basic HTML Course

It's Easy!

Alternate version

Directories and URL's, Part 1

To understand URLs, we need to know a bit about the directory "tree".

Root Directory

The Root directory is your "main" or "home" directory at your web account. It's the directory you see first when you go to work on your pages and files.

Picture your root directory as a tree.

Trees have branches and leaves. Your root directory has subdirectories and files. The subdirectories are represented by folders and the files just have names with extensions (the part after the dot).

Branches on a tree split into other branches with more leaves. Subdirectories can have files (leaves) and other subdirectories (more branches).

In your root directory, the subdirectories are represented by folders and the files just have names.

The terms "directory" and "subdirectory" are interchangeable. We just use "subdirectory" to emphasize the fact that it is a directory within a directory.

As you collect or create files, you need to organize them so you can find them later.

How you do this depends on you and the files you plan to have at your web site.

You may want a folder (subdirectory) for your images. If you have a lot of images, you may want to place (categorize) them in folders (subdirectories), such as "cars", "boats", "pets", "faeries", "scifi", etc.

I like to keep my backgrounds and banners separate from my other images, so my root directory has "bg" and "banners" directories.

You may want a folder for your music, a "midi" subdirectory. I have lots of MIDI files in different styles, so I have subdirectories for them in my "midi" directory.

I have lots of music images. I could have a "music" subdirectory in my "images" directory, but I decided to have a separate "musicimages" directory in my Root directory.

Here's part of my directory tree. I'll use a dot to show a directory. I'll also show a couple of files.

Anatomy of a URL

Now let's look at a URL (Uniform Resource Locator) and break it down into it's pieces, keeping in mind that it is a web "address". The URL tells browsers where to find a file.

Here's our URL
http://www.gnu-bee.com/midi/standards/ourloveishere.mid

http:// stands for Hyper Text Transfer Protocol. It refers to files on the web.
"Go to the web".

www.gnu-bee.com/ is my domain. It's where my files are.
"Go to gnu-bee.com".

midi is a directory in my root directory. The slash at the end identifes it as a directory.
"Go to the midi directory".

standards/ is a directory in my midi directory.
"Go to the standards directory".

ourloveishere.mid is a file in the standards directory. It has a file extension at the end. In this case it is a .mid file, which is defined as a type of audio file.
"Get the file called ourloveishere.mid".

Complete directions:
Go to the web. Go to Gnu-bee.com. Go into the midi directory. From there go to the standards directory and get "ourloveishere.mid".

Here's another URL:
http://www.gnu-bee.com/musicimages/chopin.gif

This means:
Go to the web. Go to Gnu-bee.com. Go into the musicimages directory. Get the file called chopin.gif.

In Part 2, we'll use these files in a page, using both absolute and relative URL's.

In Part 3, we'll make a page in a subdirectory and show how to get to the other directories with relative URL's.

Happy coding!
Gnubee

Links
Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup
HTML Course Contents (Home)

Valid XHTML 1.0!

Valid CSS!