Fromthepen.com: Online Web Site Tutorials

Basic Exercises
· Introduction
· ex. 1 - Make a page
· ex. 2 - Head & Body
· ex. 3 - Attributes
· ex. 4 - Text
· ex. 5 - Colors
· ex. 6 - Hyperlinks
· ex. 7 - Anchors
· ex. 8 - Graphics

Join our mailing list to receive tips and tricks.

HTML TUTORIALS: Ex. 6 - Hyperlinks

EXERCISE 6: ADDING HYPERLINKS :

Could you imagine having an entire dictionary on one web page? You would have to scroll down for hours and hours trying to find what you needed. Luckily for us, the World Wide Web was structured so that you could split content into separate, more manageable chunks. We call these chunks web pages.

Yet, with this more manageable structure comes a challenge. How do we connect the pages that relate to each other? Hyperlinks are our answer. Hyperlinks act as a jump point to another file on the World Wide Web. We create hyperlinks using the <a></a> tags, and their href attribute.

SECTION A: ABSOLUTE HYPERLINKS:

What is meant by absolute hyperlink is that you are providing an exact location for the file you are linking to. Each web page gets assigned an address just like houses on your street.

When you send a letter to someone, you have to put the full address or the absolute address. This way there is no confusion as to where you are sending the letter. As long as you know the exact or absolute address to a web page, you can successfully link to it.

An example absolute hyperlink would be:
<a href="http://www.yahoo.com">Yahoo</a>. Below is an explaination:

Ex. 6 Figure 1: Sample hyperlink and structure

A Stands for anchor, but who cares about that. Just know that the a tag lets you link!
href stands for Hyperlink reference, which is a fancy way of saying, "Where my link is going."
"" quotes surround the address of where you are linking to.
http:// is a protocol. Nevermind that jargon, though. Just remember that if you link to a web page, you will need this included. Again, just memorize this stuff!!!
after the http:// comes the URL (the www.yahoo.com part) or the web address of where you are linking to.
TEXT is what goes between the A tags. It's what shows up on the screen.
</a> tells the browser that the link should end.

SECTION B: RELATIVE HYPERLINKS:

Relative links are not as specific as absolute links are. Basically, relative links only state the general location and name of the file in relation to where the page is that you are linking from.

For example, if I wanted to link to another page that was located in the same place as the page I was currently on, it's easier to just type the name of the file inside of my a tag, instead of having to type out the whole address. Absolute addresses can get very long, so using relative addresses makes it easier on us.

I'll use an analogy to further explain: Suppose a family member asked you where their keys were. You could respond to them, "They are in the United States, in Maryland, in Gaithersburg, in our neighborhood, in this house, on the table!"(The absolute method)
OR, you could tell them, "They are on this table." (The relative method)

I hope this makes sense to you! If not, don't worry. HTML is memorization. You will eventually memorize all this stuff anyway.

Ex. 6 Figure 2: Relative Links

All of these exercises that you are doing are located in 1 place within the web space that I have been given by my internet service provider. When you buy space to put a website, you get a directory in which to put all of your files.

All of my files are in the same place, so if you wanted to link to another file, all you would need inside of the hyperlink tag is the name of the file that you wanted to link to. Ex. <a href="exercise3.html">.

However, if I created a folder inside of my main directory called "shane" and put exercise 3 in it, I would link to that file by typing <a href="shane/exercise3.html">. "shane" is another directory inside of the main directory. The "/" let's us know this. So, the above link says, "look in the subdirectory called shane, for a file called exercise3.html.

Note: if you plan on practicing on your own without the use of this online tutorial, I suggest that you save all of your files to a floppy drive. This way, when you link back and forth to the different pages that you create, you can use relative links since all of the files are in the same place, the floppy disk.

For our exercise, I have created a page called exercise6links.html that we will link to. This page is stored in the same place as this exercise and we will use both methods of linking to get to this page. All the page says is, "You have successfully linked to another page. Congratulations." It will have a link that says, "Go back to exercise 6" that you will click on to go back to your page and test the other method of linking so you know that you did it right.

Note: Notice that hyperlinks are underlined and in a different color than the rest of the text. The browser does this to let you know that the underlined words are hyperlinks and will take you somewhere else.

We are also introducing 3 new attributes to the body tag for controlling link colors. link="" controls what color your links will be to start off with. alink="" controls what colors your links will be if you click and hold down your mouse while on a link(totally worthless in my opinion). vlink="" controls what colors your links will be if you have already clicked on them.

Changing the link color helps you keep track of what links you have already clicked on.



<html>
<head>
<title> Links </title>
</head>
<body bgcolor="ffffff" link="0000ff" alink="00ff00" vlink="ff0000">
<a href="exercise6links.html">relative link to exercise 6 links page</a>
<br><br>
<a href="http://www.fromthepen.com/web/exercise6links.html">absolute link to exercise 6 links page</a> </body>
</html>

See. Links aren't so tough. I'm sure that with a little practice linking will be a snap.

NOTE: I didn't mention a topic called "Anchor Hyperlinks". Anchor links allow you to link to different parts of the same page. They are used when the page is very long and all the content can't fit on one screen. Instead of scrolling forever down the page, you can click on an anchor link and go directly to a point in the html page. Our next exercise will deal with anchors. Why did I leave separate anchors? 2 reasons:

For whatever reason, when I first tried to learn anchors, I had a very hard time with them. I can't explain it. I just always remember saying to myself that I wish I had skipped them in the beginning and learned more of the fun stuff.
In the real world of creating web pages, you won't use them that often.
Part of me wanted to skip anchors in these tutorials. However, I will show you how to use them next.

ADDITIONAL ASSIGNMENT:

I'd like for you to do the following steps:

change the color of your 3 link attributes inside the body tag above and see what happens.
Create another link to a web page that you like. For example: <a href="http://www.jellybelly.com">
Have fun.

In our next exercise you will be adding anchor links to your pages.

END OF EX. 6 - HYPERLINKS

<-- Back to Exercise 5: Fun With Colors | Forward to Exercise 7: Anchor Hyperlinks-->

Home | HTML Tutorials | Color Charts | Practice Area