Tutorial #5:
Constructing Links

Other tutorials
The Basics
The Basics - Part II
Working With Text
Text - Part II
Making Links
Images
Lists
Tables
CSS
CSS Text Control
CSS-P
Frames
Forms
JSS
Layers
Colors
Marquees

What good is your web site if it is just one page? You have to learn how to make a link, otherwise, you'll have a really bad web page.

Making a link is really easy. There are three different types of links. The first is a link within a page. All you have to do is this:
<a href="home.html">Home Page</a>

A HREF is the HTML way to create a link. the =" " is typical; you've seen it before. The example that I showed you is only good when the page that you are linking to is in the same folder or drive as the page in which the link originating from. For example, let's say that you want to make a link to 'odds&ends.html', but it is in the 'oddballs' folder. In that case, you would put <a href="oddballs/odds&ends.html">. Simple, isn't it?

The second type of link is to another web site.
<a href="http://www.nhlpenguins.com">Pittsburgh Penguins</a>
I think that this is pretty simple and doesn't take much explanation. Just remember to include 'http://', too.

The third type of link is the link to a certain spot within a page. Here's the code:
<a href="#halfwaydown">Half Way Down</a>
But that's not it. Where you want 'Half Way Down' to be, you need to put this on the page:
<a name="halfwaydown">
When you put in the <a name> tag, don't include the number sign. This goes for CSS, something you'll get into later, too. When finished, use the </a> tag.

Now that you know how to create hypertext (that's another name for a link), you need to know how to make a link with an image. Something like this:

Heres the code:
<a href="new.html"><img src="new.jpg"></a>

The a href tag is the same as before. However, where the text would usually be, you put in another tag. This inserts an image into the HTML document. I'll get a little more in-depth with that in the images scetion.

Now you're asking: How do I get rid of that border? It looks UGLY!! It's really simple, actually. Where you put the img src tag, simply add border="0", and voila! Here's what it looks like:

Another thing that can be important is using a target. Take a look:

<a href="whatever.html" target="_top","_blank","_new">

The _top is used with frames. If you want to get out of the frame, you use this. For more on frames, click here.
_blank and _new do the same thing; they open up a new window. What's the difference? I'm not sure, but I'm trying to find out.

The last thing that I want to show you is a link using a button. There are two ways to do this, an HTML way and a JavaScript way. The HTML way is a little bit easier, but you would have to put multiple buttons in a table, or else they will all link to the same link as the first button. Here's the HTML way:

<form>
<input type="button" value="ESPN" action="http://espn.go.com">
</form>

All buttons must be put in <form> and </form> tags. Otherwise, you'll just get text. The part that says Input type="button" is a typical way of defining something. The value is what will be shown on the button. action is obviously the action that the browser will make when the button is clicked.

Here's the JavaScript way:
<form>
<input type="button" value="ESPN" onClick="window.location='http://espn.go.com'">
</form>

Every thing is the same as the first way, except that the action tag is replaced by something else. onClick means that when you click on the button, something is going to happen, and that will be defined in just a second. window.location, in the loosest terms, is the equivalent of the HTML a href tag.

Now it's time to advance to the images section. Go there!