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.