Lesson 4 - Links

Lesson 4 - LINKS

Links are what the Internet is all about. Links are used to connect pages within your own site and to allow viewers to surf to other places on the Internet.

There are two parts of a link. First is the DESTINATION - where the link will take you. Second is the LABEL - the visible text that makes up the link. The tag used to define a link is the <A> tag, which stands for Anchor. The anchor tag has an attribute called HREF. HREF stands for HyperText Reference. Remember from Lesson 1 that HyperText means 'link'? This is the destination part of the link. Anything between the beginning <A> tag and the ending </A> tag will become the label, or what is clicked on.

<A HREF="webpage.html">Go to a webpage</A>
would display
Go to a webpage

The destination, or HREF is webpage.html, so this link would take you to a page with that name. Notice that the destination is not visible in the browser window. You can look in the status bar at the bottom of the browser when your mouse is over the link to see what the destination is.

ABSOLUTE AND RELATIVE URL'S

If you click on the previous link, it won't take you anywhere because I have not created a webpage called webpage.html. I have given this link a nonexistent destination. Go ahead and click on it to see what it does.

Just like images, the destination part of a link is relative to the directory that the current html document is found in. The link above would cause the browser to look in the same directory that contains this webpage for the file called webpage.html. To make the browser look in directories below (folders within the current folder) use something like "mypages/webpage.html" as the destination. For directories above this one (folders containing the current folder), use "../webpage.html" to have the browser move to the parent directory.
HINT: IT IS (AS ALWAYS) EASIEST TO STORE ALL OF YOUR SITE'S FILES IN THE SAME DIRECTORY.

I can also create absolute URL destinations by stating the entire address within the destination part of the link.

Go to the <A HREF="http://smithplanet.com/batc/">class homepage.</A>
would display

Go to the class homepage.

This absolute URL did not specify a specific file to look for. The trailing slash (/) at the end of the URL tells the browser to look for one of the default homepages - index.htm(l) or default.htm(l). I have named the class homepage index.htm, so the browser will automatically display it. If no default page exists at that URL, then either nothing will be displayed (a 404 server errror) or a listing of the files in that directory will be displayed. I could have also written the link like this:

OR, because this HTML file (day4.htm) and the index.htm file are in the same directory, I could have written it relatively like this, with the same results:

All three of the preceding destinations would link to the same webpage, the class homepage.
HINT: RELATIVE URL'S WILL LOAD FASTER THAN ABSOLUTE URL'S. WHY? A RELATIVE URL TELLS YOUR BROWSER THAT IT IS ALREADY CONNECTED TO THE SERVER THAT CONTAINS THE FILE. AN ABSOLUTE URL WILL CAUSE THE BROWSER TO GO BACK ONTO THE INTERNET AND SEARCH FOR THE COMPUTER CONTAINING THAT FILE, EVEN IF IT IS THE SAME ONE IT WAS ALREADY READING FROM.

ANOTHER HINT: KEEP YOUR LABELS SHORT AND DESCRIPTIVE. FEW PEOPLE CLICK ON LINKS HAVING NO IDEA WHERE THEY WILL TAKE THEM. THIS PARAGRAPH IS EXACTLY WHAT YOU SHOULD NOT DO.

FORMATTING LINKS

I can also use any text formatting tags around or within the link.

Search with
<A HREF="http://www.yahoo.com/">YAHOO!</A>
would display

Search with YAHOO!

Notice that the FONT COLOR attribute did not change the color of the label. Labels are, by default, blue if they have not been clicked, red if they have. We will change these default colors later.

HINT: TRY NOT TO INCLUDE SPACES AT THE BEGINNING OR ENDING OF YOUR LABEL. UNDERLINED SPACES LOOK A LITTLE SCREWWY.

ANOTHER HINT: YOU CAN CHANGE THE COLOR OF A LINK'S LABEL BY PLACING THE TAG INSIDE OF THE ANCHOR TAG.

OPENING A NEW BROWSER WINDOW

To open a link's destination in a new browser window, add the TARGET="_blank" attribute to the anchor tag. That's an underscore before the word blank.

Open <A HREF="http://www.hotbot.com/" TARGET="_blank">HOTBOT</A> in a new browser window.
would display

Open HOTBOT in a new browser window.

Go ahead and click on it, but be sure to close that new browser window to return here. Notice that I did not use spaces within the label, but instead on both sides of the anchor tags.

OTHER KINDS OF LINKS

In the following examples, I will specify the HREF, or destination part of the link only.

To download a file with a link, use - HREF="http://www.site.com/filename.ext" where filename.ext is the exact file name that you want to download, such as report.wpd, bitmap.bmp, or program.exe.

To link to an FTP site, use HREF="ftp://ftp.site.com/" An example is this, HREF="ftp://ftp.microsoft.com/". Check out this FTP site. FTP stands for File Transfer Protocol and is used for quickly transporting files across the Internet. We'll FTP later.

To open a Telnet session, use HREF="telnet://site.com" An example is HREF="telnet://cc.usu.edu"
A Telnet link will open a new application window. Try it. Telnet is used to remotely control a computer. You usually need a username and password in order to access the computer. Try it with you ISP and see if they have Telnet access.

To open a newsgroup, use HREF="news:newsgroupname" An example is HREF="news:netscape.public.general"
Notice that a news link does not have the two slashes (//). News links open a helper application (a newgroup reader - usually Netscape Messenger or Microsoft Outlook). If the news reader is not set up correctly, it will not work. Try to access Netscape's Newsgroup.

To send an E-mail, use HREF="mailto:address@site.com" An example is HREF="mailto:jared@myemail.com"
Mailto also does not have the two slashes. An E-mail link will open the computers default E-mail program and insert the specified E-mail address in the TO: field.
You can also specify the SUBJECT field of the E-mail, by including ?subject=PUT SUBJECT HERE after the E-mail address.

<A HREF="mailto:jared@myemail.com?subject=Mail from links lesson">E-mail me</A>
would display

E-mail me

Click on the E-mail link to see how it works. Notice that the To: and Subject: fields are completed with those stated in the anchor tag.

USING IMAGES AS LINKS

To make an image a clickable link, just insert the image where you would normally type the label.

<A HREF="http://www.ducks.com/"><IMG SRC="duck.jpg"></A>
would make the duck.jpg image a link to www.ducks.com like this:

Be sure to remember the trailing / on the URL. Notice that the browser adds a border around an image that is also a link. You can remove the border by inserting the BORDER="0" attribute to the IMG tag. You will usually want to include a text description of where the graphical link will take the visitor, as well as a text label to the link.

Click the duck to go to <A HREF="http://www.ducks.com/">ducks.com
<IMG SRC="duck.jpg" BORDER="0" ALT="ducks.com"></A>
would display
Click the duck to go to ducks.com.

Notice that the image AND "ducks.com" are the label of this link. They are both between the opening and closing <A> tags. I also removed that border and added alternate text to inform the viewer of where the link will take them.

CHANGING THE DEFAULT LINK COLORS

Add any, or all, of the following attributes to the <BODY> tag:
LINK="color" changes the color of unvisited links.
VLINK="color" changes the color of visited links.
ALINK="color" changes the color of the link as it is being clicked.

Example: <BODY LINK="#FF00FF" VLINK="green" ALINK="#FFB79A">

Be careful when changing the colors of links. Links need to be clearly visible and distinguishable as links.

CREATING ANCHORS

Anchors are links to another location within the same document. This is done by linking from one anchor tag (link) to a named anchor within the same document. The first step to creating an anchor is to name an anchor at the place in your HTML document that you want to take the viewer. The second step is to create the link to that anchor.

To create a named anchor use the NAME attribute in place of the HREF attribute.
<A NAME="beginning"></A> would create an anchor with the name of beginning. When this anchor is later linked to, the browser will position the window so that the place in which this anchor is written in the HTML code will be at the top of the browser window. A named anchor does not display anything in the webpage. You can add text between the two tags of an anchor and they will display normally in the page (they will not be underlined).

To create the link to that anchor, you would specify the anchor name in the destination of the link.
<A HREF="#beginning">Go to the beginning</A> would display a link that moves the browser so that the anchor named "beginning" is at the top of the browser window. Notice the # at the beginning of the anchor name in the destination.

To demonstrate this, at the very beginning of this html document, right after the body tag, I named an anchor top, using this code: <A NAME="top"></A>
To create a link to that anchor I would insert
<A HREF="#top">Go to the top.</A>
which would display
Go to the top.

If you click on the link, it will take you to the anchor named top, which is at the top of this document. Go ahead and try it. Hitting the back button will take you back here.

Near the top of this document, there is a section called "Formatting Links". In my HTML document, I have surrounded the heading of that document with an anchor named "formatting". To make a link directly to that anchor I would use
<A HREF="#formatting">Go to Formatting Links.</A>
which would display
Go to Formatting Links.

If you click on that link it would take you to the anchor named "formatting" whose label is the header "Formatting Links". You can also link to anchors in other webpage by using an absolute reference to the anchor. It might look something like this.

Whew! Hopefully that wasn't too confusing! Congratulations, you have now learned the majority of the code that we are going to cover in this class. The majority of the rest of the class will be used for applying what we have learned thus far. Have fun!!

Back to Class Homepage.