5. (HyperText) Links

Taking a tour of the the Louvre with the ability to jump to the Britsh Museum to see some related artifact, or loggin on to the Library of Congress catalogue and the catalogues of hundreds of other libraries around the world is the type of thing that sold the World Wide Web to the general public. (The possibility of selling something with a web site sold it to corporate America.) This "linking" is perhaps the greatest feature of the web. It lets you jump to new pages whose content will augment or relate to the page you have been looking at. This is very easily accomplished by just clicking on some highlighted, underlined text.

This "clicking on highlighted, underlined text" causes a LINK to another page on the same web server or to any unrestricted page on the web in the entire world to be activated. That means it brings up in your browser the HTML file of that page. (In fact, these links can be to another place on the same page, or to a particular topic on another page on the same or a different server. Those are called ANCHOR LINKS, and we will deal with them later.)

To make a link, you have to use a tag. This is, after all, HTML! The tag this time is the <A> tag and requires an </A> to complete it . The <A> tag we will use here will be with the ATTRIBUTE "HREF" for "hypertext reference."

An ATTRIBUTE is something added inside the tag which changes the way the tag is executed. You have seen an ATTRIBUTE before in the "Center Paragraph" tag, <P ALIGN=CENTER> . . . </P>. Here the "ALIGN=CENTER" is the attibute and adds the feature of "centering" to the Paragraph tag.

The HREF attribute identifies the destination URL or file on the web server. The text bracketed by the <A> and </A> is rendered in a color (usually blue) if the link has not been used recently and in another color (usually red), if it has. Browsers display text associated with the link to indicate where to click for the browser to execute that (hypertext) link (that is, take you to another page).

The particular tag we are interested in in generally looks like this: (the "quotes" are required around the URL or directory path.)

<A HREF="Some URL or directory pathway">Displayed text which will identify the link</A>

You have used LINKS before in these lessons. The items you click on in the Table of Contents menu on the left side are LINKS to other pages on our server. When you went to Baty's page, you "linked" to pages on this server which are in a different directory, and when you looked at the Character Set page you "linked" to a set of pages on a different server in a different country. Remember that that server was in the Netherlands.

The format of things you put inside the quotes after the "HREF =" vary with the location of the page you are linking to. The easiest is probably linking to a page on a different server. You just use the entire "http://. . ." address of the page or site".

That "address" includes a complete path to the HTML page from the master directory on the targeted web site. It is not necessary for you to know the name of the master directory. If you want it to work correctly, you must know the names of all the directories from there down to the file you want to display. Usually you have viewed that page previously, and so you can simply copy the URL for it and paste it into your <A> tag. Most often, actually, you just go to the basic site using the computers name and domain, (no file needed if they have set up their server correctly), and there will be a page of links that will take you to the particular page you want to view.

Linking from one server to another

You are viewing these lessons on the server newton.uor.edu. The name of the HTML file is "Links.html." It is contained in the directory "BasicHTML" which is a subdirectory of the directory "Courses," which is a subdirectory of the main website directory. You would like to link to the "official" University of Redlands web site, which is on a different web server housed in a different place on campus. It uses the server name "www". Its domain is "redlands.edu." To construct a link to that site, we use the total URL "http://www.redlands.edu" inside the quotes after "HREF =." That means the syntax is:

<A HREF="http://www.redlands.edu">University of Redlands "official" web site</A>

The actual file that is displayed is named "index.htm" even though we didn't include it in our link. You could add "/index.htm" after the URL in the link, but it is not necessary to do that to get to the "home page" of the site. Try it out by clicking on the link below, and after the page appears, change the URL in the location or address line of the browser to "www.redlands.edu/index.htm" and hit return. It should reload the same page. (You will need to use the BACK button to return to this lesson.) This is an illustration of getting to the "home page" on a server not requiring (usually) the name of the home page HTML file.

University of Redlands "official" web site

See how easy that was!

Linking to a particular page on a different server

Suppose we wanted to link to the page named " OutsideLinkTest.html." It is in the directory "Examples" of the webserver whose URL is "field.uor.edu." (This server is at the Jones Center but runs on a different computer from newton.uor.edu. It is used to run a few utility programs for us.) In this case, you don't want to go to the "home page" of field.uor.edu, because there is no link there to take you to the page you want. (Actually, if you used "field.uor.edu" you would get to "www.redlands.edu" since we have the server set to jump anyone going to the "home page" to the "official" web site. But I digress.) To reach this page the syntax requires the server address "http://field.uor.edu," the directory, "Examples," and the name of the file,"OutsideLinkTest.html."

That translates into the following:

<A HREF="http://field.uor.edu/Examples/OutsideLinkTest.html">Check a link to a page in a subdirectory on another server.</A>

Try it:

Check a link to a page in a subdirectory on another server.

The text "Click here for Link Test to another server" is, of course, completely arbitrary, but should give the "surfer" some idea of what the link will connect to.

Linking to a page in the same directory as the page you are viewing

The simplest link is one to an HTML file in the same directory of the same server of the page you are currently viewing. For this example, the file is named "LinkTest.html." All you need to do is put the name of the file inside the quotes of the HREF attribute. Note that there is no "/" in front of the files name. That would have told us to look in the main directory for the file.

Here is the syntax, and the link below demonstrates that it works.

<A HREF="LinkTest.html">Click here for the same director LINK test</A>

Click here for the same directory LINK test

Since the page was linked to ,"LinkTest.html", in the same directory as this page, all we had to do was use the name of the page in the link. There are other possibilities for where the "linked to" page is located, though:

Linking to a page in a subdirectory of the directory of the page you are viewing

If in this case the HTML file is on the same server and in a subdirectory of the directory of the file you are viewing. For this link, you just include a complete path to the HTML page from where you are. Suppose for example that the page, "InsideLinkTest.html" were in the subdirectory "InsideDeepTest" of the directory "InsideLinkTests" of the directory this page is in.
The link syntax would be:

<A HREF="InsideLinkTests/InsideDeepTest/InsideLinkTest.html">Click here for Page in a Subdirectory Link Test</A>

Note that there is no "/" before "InsideLinkTests," as that would tell the browser to jump to the "main directory" and look there for the directory "InsideLinkTests. That would generate an error.

Test the link by clicking on it below.

Click here for Page in Subirectory Link Test

Linking to a page in a directory not a subdirectory of the page you are viewing

When the HTML file is on the same server, but not in the directory of the current file you are viewing or any subdirectory of the current file's directory, we must include a complete path to the HTML page from the master directory of the site. It is not necessary for you know the name of the master directory, but only the names of all the directories from there down to the file you want to display. You tell the <A> tag this by putting a "/" in front of the first directory mentioned. This means, "go out to the master directory to find this first directory and then go down to subdirectories from there until you get to the HTML file."

Suppose that the page, "OutsideLinkTest.html" were in the subdirectory "OutsideDeepTest" of the directory "OutsideLinkTests" , but "OutsideLinkTests" is a totally separate directory from the current directory. Then the link syntax would be:

<A HREF="/OutsideLinkTests/OutsideDeepTests/OutsideLinkTest.html">Click here for Outside Directory Link Test</A>

The "/" at the beginning says "move out to the main directory and search there for the directory OutsideLinkTests."

Test the link by clicking on it below.

Click here for Outside Directory Link Test

Well that is the basic story on simple links. The toughest thing is to define the paths correctly. You can always use the total "http://. . ." address of the page, but you still need the complete path through directories from the main directory down to the file you wish to view. It just slows things down a bit. The example for this particular file would be:

<A HREF="http:''newton.uor.edu/Courses/BasidHTML/Links.html">Click here for Outside Directory Link Test</A>

Try it in a new browser window.

When you are developing your own web site, just remember to put everything into a nicely thought out directory structure that you can easily remember. (LOL)

Exercises 5.

Create a new HTML file and save it as LinkyDinkyDoo.html. Then do the following exercises involving links using the methods learned in this lesson.
  1. You have decided you want to know the mission of the University of Redlands. You know that it is on the "official" website whose name is "www" and whose domain is "redlands.edu." You discover that (spelling aside) it is in an HTML file named MISON.HTM in the directory "general." Make a link with descriptive text saying that the link will take you to the "Mission of the University of Redlands." When the link is clicked, it should take you there.
  2. Boccaccio's 12th century Italian classic, Decameron, is transformed by Brown University into a digital masterpiece. The Website is beautiful and superbly organized. In it we begin to see the Web craft lifted to art as we move seamlessly among literature, history, art, and the pall of "The Plague." There are contemporary images, historical essays and timeline, maps, and the text of the Decameron in English and Italian. The URL of this site is http://www.brown.edu/Departments/Italian_Studies/dweb/dweb.shtml. The extension ".shtml" means that it is a secure site.
    1. What is the name of the web server?
    2. What is the domain of the web server?
    3. Describe in terms of directories and files the path to the page which will appear when you go to this address.
    4. Put a link on your page to this site and then go explore it for a while. What do you think of its description of this site in the first part of this question?
  3. The city of Redlands has a web site with information about the city and activities taking place in the city. You don't know the URL, but figure it must be something logical. Fool around with URLs until you get to the city of Redlands Web Site and then put a link on your page to that site.
  4. You have decided you want to apply for the job of computer lab assistant at the San DIego ANWC regional center. You know that the job description can be found at some page in the Human Resources Subdirectory of the Administration directory on newton.uor.edu. If you use the URL http://newton.uor.edu/Administration/HumanResources, it will produce in your browser a lits of files and sub directories in that directory.
    1. Find the one for the San Diego lab assistant and open it to determine what the URL is that will go directly to it. (If that job is no longer on the site, which is possible, pick a different one.)
    2. Write a link, using "directory" notation, not a full "http://" link. You will need to assume that the page you are writing is in the subdirectory BasicHTML of the directory Courses on newton.uor.edu.
  5. After reading the job description of the San Diego ANWC computer lab assistant, (or one you have picked, if that job is no longer listed.) you have decided to apply. Locate the U or R application form on the web site and put a link directly to it on your page. Again assume that the page you are writing will be in the subdirectory BasicHTML of the directory Courses on newton.uor.edu.
  6. You decide to try something different. You know that the rotating University seal has the name "SealFlipBlue.GIF" and is in the subdirectory "Images" of the "BasicHTML" directory where you page will reside. Write a link which will bring that file into the browser. I know we haven't done anything with graphics, but this will show you that graphics with the format .GIF or .JPEG, or .JPG may be viewed in your browser, and for that matter treated in a link like any other file.
If you want to see my answers, click here.

After reading the answers, to put things back the way they were, use the BACK button or scroll down to the link at the bottom of the "Answers" page.