Basic HTML Tutorial: URLs

Home > Build > Programming > HTML > Basic HTML Tutorial

2.1 URLs

A URL (Uniform Resource Locator) is the path of either a local (your computer) or remote (on the internet) file. You've seen several types of URL's already and probably don't know it. The URL to our home page is:

http://www.w3nation.com

The 'http' is the protocol. It tells the browser how to display the file it will be opening. There are plenty of other protocols, such as FTP (File Transfer Protocol), News (Newsgroups), Gopher (Searching), and Mailto (Send e-mail). Protocols are usually separated by a colon (:) and 2 slashes (//). The exceptions are News and Mailto, which are followed just by one colon.

'www.w3nation.com' is the server that the file is located at. The browser will look for the file on the www, at the w3nation.com domain, which itself points to an IP address. An IP address is a series of 4 numbers that identifies a user on the internet. Mostly everyone connected uses an IP address. The default file of most web pages is 'index.html', and that is the first file displayed when someone visits w3nation.com.

Here is the URL you are currently at:

http://www.w3nation.com/learning/html/Basic/2_1.htm

Notice the forward slashes. Many people who use Windows are confused by this because Windows uses backslashes ("\" to separate it's file system).

After the server, the URL points to the exact path and filename where the file is located. This is how the web browser locates every file it comes across.

URL's can also be used locally, which you will find out soon enough when you begin creating your own web pages. It might seem to be quite a chore to have to enter the full path of the url everytime you create a new page and make a link. Luckily, there is a way around that.

There are two types of URLs, Absolute and Relative. The current URL as it is displayed in your browser and as it was displayed just above, is an Absolute URL. An Absolute URL is the full URL path. Your browser will always display Absolute URLs.

If you have a UNIX server and have a top level domain name, you can use a different type of Absolute URL. You can use forward slashes ("/") from the root directory for your URLs. For example, the absolute URL of this page would be:

/resources/learning/html/url.htm

The / specifies the root directory. Resources/learning/html/ are all directories. We know this because they all have a trailing forward slash. Think of these URLs as 'from the top' URLs. This makes it easier to move files around and not have to deal with all the problems of absolute URLs while working locally.

The 'from the top' Absolute URL to the home page would be:

/index.html

The forward slash is the top and 'index.html' is the filename. Notice there was no trailing slash after the filename.

Relative URLs are a little different, and are what most web developers use. With a relative URL, you navigate from the current URL, either backwards and forwards.

'../' (2 periods) - means back one level. If we were at http://www.w3nation.com/learning/index.html - then using the ../ would bring us back into the main directory.
/ (forward slash) - means forward one level, and the directory name must be specified.

So, if I was working on the w3nation.com home page, located at:

http://www.w3nation.com/index.html

and wanted to create a new link to the learning center, I would use this as the link:

resources/learning/

(the trailing forward slash isn't necessary, but is recommended. If there is no forward slash, the browser doesn't know you are looking for a directory and will first look for a file. The forward slash defines that as being a directory, which does reduce server time a little.)

Now, if I wanted to link back to my home page from my learning page, I would use this as a link:

../../index.html

That's it.

In order to proceed, you must understand URL's entirely, because that is how you will link documents and graphics to your site.

Chapter 2 Index

Tutorial Index

2.2 Adding Graphics to Your Page