All About Links

Dissecting a URL

The Parts of a URL explained

Protocol: The first part of a URL is the protocol. On the web, we almost always use Hypertext Transfer Protocol (HTTP). Sometimes it might also be HTTPS, which is simply a secure version of HTTP.
Domain Name: The domain name is the unique identifier of the site. Usually it begins with www, but this is not necessarily always the case.
Absolute Path: The absolute path tells us the path to the requested file on the web server.
Directory Path: This part of the URL tells us what directories the requested file is contained in.
Document: The last part of the URL always ends in a file name, with it's extension.

Review pages 22-23 in Learning Web Design for more information.

Absolute URLs

Absolute URLs use the entire URL, including the protocol (http://), to link to a page. These are usually used to link to an external site or to your home page.

An absolute link is created when the href value is a fully qualified URL, including:

the transfer protocol: http://
domain name: e.g. www.yourdomain.com
and filename: e.g. yourpage.html (may be blank if you're requesting the index.html page)

You must use absolute URLs when you are linking to an external site.

Example: Absolute URLs

To link to the Simmons website home I would use the following:


	<a href="http://www.simmons.edu/">Simmons College</a>

To link to the class home page from this page I would use the following:


	<a href="http://www.simmons.edu/~millera4/">Comm 244</a>

Note: In both examples, we are linking to the index.html page and therefore, the filename can be left out.

Relative URLs

Relative URLs are used to link to a file relative to the current files location.

When we are working with relative URLs, we use the forward slash ( / ) to designate a directory (folder). We use two periods and then a forward slash ( ../ ) to move up one directory.

Go inside a folder: /
Go outside a folder: ../

Root Level: When we say root level or root directory, we are referring to the entry level directory of a website. This directory usually contains the homepage. (read more)

A screenshot of the directory structure of Good Food

The screenshot on the right shows us the directory structure of our sample website, Good Food.

Let's take a minute to get familiar with this structure, since we'll be working on it a lot.

Good Food is a cooking site with tips and recipes on it. There are six top-level pages:

Homepage: index.html
Recipes: recipes/index.html
Tips: tips/index.html
About: about.html
Cookware: cookware.html
Resources: resources.html

There are also folders called recipes and tips, with pages for each contained in them.

Example: Relative URLs

Giving Our Link Titles

We should always make sure to add titles to our links using the title attribute. The title attributes give extra information about what we are linking to. This is especially useful for screen readers.

Example: Linking to the Simmons College website


	<a href="http://www.simmons.edu/" title="View the Simmons College Website">Simmons College</a>

Back to Class Two page »