The power of the Internet is perhaps best seen its ability to allow people to move quickly from one place to another.
It is the essence of interactive programming:
if you want to do 1, go to Fresno; if you want to do 2, go to Yosemite; otherwise stay where you are.
The Internet is user friendly. A person is looking at a webpage on a website in Los Angeles, clicks on an underlined word in blue and the screen changes to a webpage in London or Tokyo. The words that we click on are called hyperlinks.
There are three kinds of hyperlinks:
- Links that take you to other words or images in the same webpage
- Links that take you to other files in the same directory or folder in that website
- Links that take you to files in different website, whether from a different directory in the same website or to a website on the other side of the world.
- Links to open an e-mail window
How do you put in these links?
First, you need to create a bookmark or anchor to mark where in the webpage you want the hyperlink to jump to. Note that in the list of the three kinds of hyperlinks above, you can click on "same webpage." The cursor is moved to the beginning of this paragraph. It is not magic. The HTML code that produces this webpage has this code <a name="First,">First,</a>:
<a name="anyname"> is a tag that identifies the name to use used in the hyperlink code (in this case "First,")
First, is the text [or image] to the hyperlink will jump to
</a> turns off the tag
Next you insert the hyperlink code, in this case before and after "same webpage": <a href="#First,">same webpage</a>
<a href="" is the basic code that starts all the hyperlinks. It stands for a hyperlink reference. You place the location or filename inside the parentheses.
"#First," is the form for a hyperlink within a document. Note the pound sign # which indicates that it is a reference to a bookmark name within the document.
</a> turns off the tag
Let's say we want to put a link to the homepage for this workshop, which is at in the same directory.
The code underneath this hyperlink looks like:
<a href="neh-12dec-1.htm">same directory.</a>
This hyperlink reference code means
<a href="" is the basic code that starts all the hyperlinks. It stands for a hyperlink reference. You place the location or filename inside the parentheses.
"neh-12dec-1.htm"> is the code to identify another file within the same directory.
same directory. is the text that is the hyperlink appearing on the screen, usually underlined and in blue. Note in this case that the period is included within the hyperlink text.
</a> turns off the tag
Perhaps you'll want to jump to a list of websites that can teach you more about making HTML files and using webpages in instruction.
Now we want to put a link to a website in Hong Kong with tools for using the World Wide Web in K-12 instruction.
In the same pattern as above, the code underneath this hyperlink looks like:
<a href="http://edutools.cityu.edu.hk/wwwtools/">tools for using the World Wide Web in K-12 instruction</a>
This hyperlink reference code means
<a href="" is the basic code that starts all the hyperlinks. It stands for a hyperlink reference. You place the location or filename inside the parentheses.
"http://edutools.cityu.hk/www/tools/"> is the Internet's URL address for this website. http:// stands for HyperText Transfer Protocol and precedes URL. The next part of the URL identifies by alias the computer server on which the file is located; actually, its official designation is a string of numbers, but you don't want to get into that.
tools for using the World Wide Web in K-12 instruction is the text that is the hyperlink appearing on the screen. Actually, selecting short descriptive words are better than this example.
</a> turns off the tag
Another useful hyperlink is designed to facilitate communicatons between people directly. You can put an e-mail link on your page so students can ask you questions, make comments, answer questions, etc. Via e-mail, additionally, people may attach files, such as a term paper written in Microsoft Word.
It is simple to do. It is exactly the same as an http link to another website, except the address is mailto:johnca@csufresno.edu. [That is my e-mail address, but you can put any address in. You could create faculty directory for all the Foreign Language teachers at Bullard High School, for example, or a class roster.] The HTML code for my e-mail link at the bottom of this webpage is:
<a href="mailto:johnca@csufresno.edu">John A. Cagle</a>
If you've finished the three webpages on text content, images, and links, you know about 90% of what you need to know to create an attractive and useful instructional website. Inserting links to sound or video files, getting into such things as cgi and Java scripting, and making image maps--these web design tasks add dramatic impact and functionality, and they are certainly advanced topics for another day. But you can use the tools you have learned today to make a homepage with a welcome and a table of contents linking to other webpages.
Get Started, either individually
or in teams: