August's Crash Course

August's HTML Crash Course - Links

The World Wide Web would be nothing more than the My-Hard-Drive-Wide Web if it wasn't for those cool things called Hyper-links. Links are just what they sound like: little bits of code that connect your web page to any of the hundreds of millions out there on the web. They are the way that all the surfers out there are able to navigate without having to know a gigantic mess of odd-looking addresses.

The basic structure of links is pretty easy to follow [although their official title is "Anchor Tags"]. They start out with a nice, simple <A>. That's lovely, isn't it? Nice and short. The reason it's nice and short is because once you get involved in the required attributes, the tag can be huge and cumbersome - because while the people surfing to and from your page don't have to know the long and complex addressess of the places you want to send them, you do. You must know exactly where you are sending your visitors. If even one slash is in the wrong place, then the link will not work at all. In internet jargon, we call this a "dead link" [likewise when pictures don't load properly we call them "broken images"].

The first, most important, and only required attribute of links is the "Hyper-link Reference" attribute, or HREF. That attribute is very much like the SRC attribute in the IMG. All you really need to know is the url. So, if I were linking to my homepage, I would make the code look like this:

<A HREF="http://www.vestige.org">

The thing is, though, you have to wrap the tag around something, like text, or an image. Otherwise if you aren't careful your whole document could become one giant link. So we're going to wrap the link around the word "vestige". So the code would look like this:

<A HREF="http://www.vestige.org">vestige</A>

If you wanted to turn an image into a link, you would just replace the word "vestige" with the IMG tag. Simple, yes? Yes. One thing you have to watch out for, though, is the idea of colour. Links are rendered as blue by default, so if you have a border around an image and also decide to turn that image into a link, then the border for that image will cease to be a nice, elegant black, and turn into a bright, attention-getting blue.

Suppose you don't want to link to somebody else's page on the web just yet, and you want to link to another one of your own, so that you can stop having just a bunch of web pages and start maybe having a web "site". How would you do that? Well, more or less the same way you link to somebody else's page. The only real difference is that you will probably only have to use relative references, instead of absolute references [an absolute reference has the http:// and all that other stuff tacked on to it - reletive references don't]. For example, when I link to other pages in this tutorial, I link to just the page name, like this:

<A HREF="tools.html">tools</A>

The code above indicates a link to the page called "tools.html" in the same directory. If you had to link to a page in another directory, just include the directory before the file name. That's really about it for links. On to colour.

c: august@vestige.org h: http://www.vestige.org