|
|
Hi, I've been waiting for you. Let's dive right in and discover the wonderful world of hyper-links.
You know, the entire intent of the internet initially was a cross-referencing of information -- readily available to researchers. Well, times have changed and now the internet is more like a shopping mall than a laboratory. I think they call this 'progress'.
But no matter what it's used for, it still has the same basic function. That is, allowing you, the surfer, access to a wide range of information and entertainment which is all connected together. Web pages -- yours, mine; all of them standing alone are okay, but the real boon to having the World Web Web is interconnectivity. Each author's web page is an island unto itself, but the internet provides a vast number of 'bridges' which we call hyper-links.
We make hyper-links with a tag called the anchor tag. It is a paired tag, that is, it has a starting and ending command and looks like this:
The <A> tag by itself allows us to move within a document -- which we'll discuss later. For the moment, we're more interested in moving to a completely new document, either another one which we have made or one on a completely different site. Thus we need to add an attribute, the HREF, to the tag so that it now looks like this:
Moving to another location on the web is really quite simple, however you will need to know the address (URL) of the page to which you want the link to take you. Like the <IMG> tag before, if the document you want to take your visitor to is located on your same server and in the same directory as the document which the link is on, you only need enter the file name; like so:
If the document you want the visitor to travel to is not in the same directory as your document with the link on it, or is on a completely different server, you must enter the entire web address. The address is generally (read that as always) preceded by http://, telling the browser which protocol you are using.
Let me show you a couple of examples (they won't go anywhere so don't bother to click on them) to make this a little clearer.
First the link which goes to another document located on your server and within the same directory as the document with the link on it:
This will display as:
Next, a link which goes to another document (say your friend's main page) located on a completely different server. We'll say that he calls his page 'home.htm' and that it's located on the 'Aces' commercial server.
This looks like so:
Good. Now I know that you have a couple of questions burning in your mind. First, what is the text that I entered between the <A HREF> and the </A> tags; and second, why is it underlined and green.
First the text between the tags. Whatever you place between the <A HREF> and the </A> is what will show up on a web browser as 'clickable' -- that is the link -- text. You can put anything you want there. You can even include an image there if you want (I'll show you this in a moment). Note, and this is important, that if you don't put anything there at all, the link will not show up on the browser. It's there, but very, very tiny -- to the point where, in all practicality, it does not exist. Let's look at this as an example:
Here's the code:
And the result:
Nothing there, right? It's there, but good luck finding it -- certainly visitors to your page will never see it. They'll just think you forgot to put a link in.
The link text is green because I specified color #009300 [that's green in hex] as the LINK attribute in the <BODY> tag. Remember that from the last lesson? Once the visitor has clicked on this link and gone to the next page, when he returns, the link will show up in whatever color you specified in the VLINK attribute.
The link text is underlined [at least that's the way it shows up on my browser] because the default setting for NetScape Navigator is to have underlined text links. This setting can be changed by the visitor in his browser, so you can't count on the text being underlined every time someone opens your page.
So now let's look at our 'Oscar the Turtle' code and insert a link. Again, I'm not going to make this link go anywhere so don't bother to click on it. It's just an example. By the way, you've heard the term 'broken link'. That's what we have here. A link which points to an invalid address on the internet and therefore goes nowhere.
We'll make the phrase 'some countries' in the second paragraph into a clickable text link which would take us to another page, presumably listing the countries where pet turtles are available. We'll assume that this other page [we'll call it 'countries.htm'] is ours and exists on our server and directory along with the page we've been working on all this time. Therefore we can use just the new document file name as an address. Look below:
<HEAD>
<title> My Pet Turtle, Oscar </title>
</HEAD>
<BODY BGCOLOR="99FF99">
<CENTER><H1>Oscar, the Painted Turtle</H1></CENTER>
<FONT SIZE=+3 COLOR="BLUE">T</FONT>here seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time<P><IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 ALIGN="left" BORDER=5> when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic <FONT COLOR="LIME">palm tree</FONT> stuck in the center], and the <FONT COLOR="#FF3333">dried insects</FONT> to feed them with.
<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, <A HREF="countries.htm">some countries</A> other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.
<P> Oscar was purchased at a local pet shop here in Korea for the tidy sum of 4,000 won [ that's about 3 dollars, U.S. money ]. He was just a little tyke about the size of a quarter when I bought him and brought him home. I've alway's enjoyed strange and unusual pets and you don't get much stranger than a turtle.
<P> Oscar is a true turtle, as opposed to a tortoise, and spends all of his time in the water. His home consists of a 55 gallon aqarium -- completely filled with water, several rocks to hide under, and some plastic plants. These latter are more for my benefit than his, since he can't eat them [ though he tries ] and I doubt that he appreciates their asethic value.
<P> I've had Oscar for about three years now and am amazed at how he's grown. At the present time he is larger than a grown man's hand -- and still growing. Oscar will eat just about anything, but his favorite food seems to be small green frogs that abound around my neighborhood. Fish are also welcomed, and I can no longer keep tropical fish as pets along with him as I used to. Sooner or later he'll eat them.
<P> Turtles are interesting in several respects -- one being the length of time they can remain completely under water. And so forth and so on ......
</BODY>
</HTML>
The resulting page turns out like so:
Fig 10
Notice that the phrase 'some countries' is now blue and underlined. It is a clickable link though your cursor does not change into a pointing finger over it since fig 10 is just an image I made of the real page. Why is it blue? Remember I told you before that if you don't specify a LINK, VLINK or BGCOLOR in the <BODY> tag, the browser will use the default color. In our example above, we only specified the BGCOLOR attribute. Blue is the default for links in Navigator.
To accomplish this we use the same <A HREF> </A> tags, but instead of putting text between them, we insert an image using the <IMG> tag. Let's see what I mean.
We'll use a sized down image I made of Oscar called 'smturtle.jpg' as our image, and insert that between the <A HREF> </A> tags so that it becomes a clickable link to a mythical HTML document on our server and in our directory called 'turtstat.htm'. The content of this mythical document is unimportant to us right now since it doesn't exist anyway -- we're just using it as an example. Remember, the image link will not take us anywhere in the example I'm using since 'turtstat.htm' doesn't exist.
Here's the code for the image:
<IMG SRC="smturtle.jpg" HEIGHT=96 WIDTH=128 ALT="Small Turtle Image">
And how it looks as an image:
Now we'll insert this in between the <A HREF> </A> tags. Here's the code:
<A HREF="turtstat.htm"><IMG SRC="smturtle.jpg" HEIGHT=96 WIDTH=128 ALT="Small Turtle Image"></A>
And the resulting image link [which I've centered]:
<A HREF="turtstat.htm"><IMG SRC="smturtle.jpg" BORDER=0 HEIGHT=96 WIDTH=128 ALT="Small Turtle Image"></A>
Now the image link looks like this:
The image is still 'clickable' but now the border is gone. By the way. You can not change the border color using the <FONT> tags when you're using the image as a link. It will be the color you specify as the LINK color. Also, don't try to insert multiple <BODY> tags to get around this. The results you could produce are at best, unpredictable. Just live with the color, do without a border, or change the LINK color for the whole document.
I'll use the 'smturtle.jpg' as my thumbnail and link it to the larger image, 'turtle.jpg'. Here's our code:
<A HREF="turtle.jpg"><IMG SRC="smturtle.jpg" HEIGHT=96 WIDTH=128 ALT="Small Turtle Image"></A>
And what we wind up with. Click on the image link to see what happens. Use the 'back' button on your browser to return to this page:
Now that you're back, notice that the border color around the link has changed. It's now the VLINK color for this document since you've 'visited' the hyper-link.
This little example is very useful for people who have lots and lots of pictures they want to show on their web page -- sort of a photo album. You make a small size 'thumbnail' out of the regular picture -- saving both, and link each thumbnail to the larger image. This speeds up loading time tremediously and will keep your visitors from leaving in disgust because of a snail's pace page.
Well, an email link is nothing more than a modified text link that opens an email editor -- already addressed to you -- so that a visitor to your site can communicate with you. Let's look at the generic code:
Don't forget that you must put either text or an image between the <A HREF> </A> tags or the link will not show up. It's generally recommended that you use your email address text in there in case whoever is visiting your site doesn't have the image option enabled; but you can use whatever you want [to include an image].
So let's use a real email address -- mine, so you can write and tell me how much you've learned here -- as an example. Here's the code:
And the resulting link [which I've centered]. Try it and see. Just don't send the mail unless you actually want to communicate with me -- please:
The color of this link is again set by the LINK attribute, but will not change to the VLINK color since all it really does is open your email editor and doesn't go anywhere.
We can get really snazzy and auto-insert a subject. That way, if you provide an email for a specific purpose on a page, you can tell by looking at the subject line of any emails you receive where the email originated from [unless, of course, your visitor edited the subject line in his email editor]. Here's the code:
And the resulting link. Click on it to see the difference [but again, please don't send this to me unless you actually want to communicate].
