Types of Links Absolute, Relative, Internal, E-Mail

Types of Links - Reading URL's

URL - Uniform Resource Locator (an Internet address)

3 parts of a URL

Absolute Links (External)

These links lead the reader to a remote server, somewhere out on the web.

Example: http://web66.coled.umn.edu/

In your .html document:

<a href = "http://kleinoak.kleinisd.net/"> Klein Oak High School Web Site</a>

Relative Links

These links point to a file or image located in the current directory.

Example: page2.html

In your .html document:

<a href = "page2.html"> Go to the next page </a>
<img src = "coolpic.gif">

Internal Links

These links move the reader up and down on the current page.

Sometimes you want to be able to have your reader jump around one long document. In this case, the hyperlinks move you through the document. One example of this: an index at the top of a long document referring to sections below.

Example: You will find all information about Section 1 here.
Go To Section 1

Section 1
This begins the information pertaining to Section 1.

What is going on here: When your browser encounters a # sign in the document, it looks for the matching tag. When it finds the match, it moves that section of the document to the top of the screen.

In your .html document:

<H1>Table of Contents</H1>

<a href = #facultyinfo"> Faculty E-mail Addresses</a>

<a href =#counselorinfo">Counselor's E-mail Addresses</a>

<a href= #studentinfo">Student's E-Mail Addresses</a>


<a name = "facultyinfo"></a><H2> Faculty E-mail Addresses</H2>


<a name = "counselorinfo"></a><H2> Counselor's E-mail Addresses</H2>


<a name = "studentinfo"</a><H2> Student's E-mail Addresses</H2>


E-mail Links

This link activates the users e-mail program and inserts your e-mail address TO: line.

Example: Send me a message!

In your .html document:

<a href ="mailto:myname@serviceprovider.hereÓ> Send me message! </a>

Further thoughts about organizing your web files

Organize, on paper or in your head, the structure your pages will have. In my directory, I have folders for pages depending on the content. I have a folder for all of my C++ pages, another one for my HTML lectures, another for student downloads, another for all my images.

Putting all of my images into a separate folder really helps keep me organized, but it involves a little strategy.

DOS Users -- Please note!

All directories and file names are case sensitive
and all the slashes are going the "other way".
We are in a UNIX world here!

My first page lives at:


(The / means a directory.)

My C++ reference pages live at:


(Notice the new directory that branches from myname.)

I have an image on one of my C++ pages. Since I have my images in a separate directory, I must tell my browser to look in another directory.

<img src = "../Images/mypic.gif">

../ means to move up one level on this tree structure and find a directory called images. Then point to mypic.gif

This page was developed through GirlTECH '97, a teacher training and student technology council program sponsored by the Center for Research on Parallel Computation (CRPC), a National Science Foundation-funded Science and Technology Center.

© June, 2000 Marilyn Turmelle http://www.crpc.rice.edu/CRPC/GirlTECH/marilynt/