CodeCrunch - http://www.codecrunch.com
HTML For The Newcomer: Part 3
http://www.codecrunch.com/articles/64/1/HTML-For-The-Newcomer-Part-3.html
By Daniel Phillips
Published on 06/25/2006
 
In this part we focus on hyperlinks, linking to web pages, files, and images made easy.

HTML For The Newcomer: Part 3
 In the last installment of this series we talked about background colours, including the use of hex code to make a website look nicer. In this tutorial we are going to discuss something a little more advanced,  one thing that users love in a website is interactive features, and in this tutorial we shall discuss the first basic interactive feature you need to learn.

Hyperlinks - you have seen them before, you click on them and they take you somewhere, be it another website or a file download, in this tutorial im going to talk about what exactly you can do with links and why they are so useful.

Firstly lets take a look at the code for a link:

<a href="http://yourlink.com> link <a>

Confused? lets break this code down!

<a href=

You should remember this part of the link code by thinking of it as a hyperlink reference, this tells the internet that this link is clickable, and when its clicked to take you to the specified location

"http://yourlink.com">

This part of the code is where you specify the URL that the hyperlink will take the clicker to. I strongly advise that you use quotation marks as it looks tidier, and also that you always put the http:// bit in as this avoids complications later.

 link <a>

This part of the code tells the internet how the link should be displayed on a webpage. you can put any amount of text here, and it will all take you to the specified URL if you click it in a browser.
For this reason you need the </a> closing tag, otherwise all of the content below the link code would take you to the specified URL, the </a> tells the document to only link the text in between the > and the </a>.

HTML For The Newcomer: Part 3
 So now you know how to link to another webpage! but how do you link to other content such as pictures or files?

For Files

Its extremely simple!

Say I wanted to link to a file on file.com called file.exe.

The download link for the file is http://file.com/file.exe

SO all I would need to do is put that link in the "" of the hyperlink code like so :

<a href="http://file.com/file.exe> Download this file </a>

How about images?

Well file.com also has a picture that i want my users to be able to see, so i get the link again, this time the link is:

http://file.com/pic.gif

SO  once again all I need to do is insert that URL into a link, and upon clicking that link a user will be taken to a page with the picture on it!

the code for this one would be:

<a href="http://file.com/pic.gif> View this picture! </a>

In Summary

It took me about an hour to get to grips with this the first time I did it so read over it a few times, and get to know the code, in the next tutorial i will be talking about images and what can be done with them.