Links, sometimes called hyperlinks or hypertext links, are a very useful thing to learn if you don't want all your content to be stuck on one page. I remember when I was trying to learn how to code links, I couldn't for the life of me remember the code (and keep in mind it's only one line long) so I wrote it at the top of a notepad that I also used to do a 2-page flipbook animation of Smiley Man riding a broomstick and chasing the Golden Snitch. Good times.
But anyway, the html link code is a lot easier to remember if you actually know what the different parts mean. For me it made a lot more sense when I knew what everything stood for and I didn't just have to memorize it.
- The a starts and ends all links.
- The href is short for hypertext reference, which tells the computer the code is going to include a website address (links can point to websites, images, flash files, or any other file).
- The Click me! part can be changed to any text (or image, which we'll look at shortly) you want. This is the only part visitors see when they click on a link, and it's recommended if you're linking in the middle of a sentence to use something descriptive instead of just 'click here.' Visitors scanning a page won't know what 'click here' goes to, but if there's a sentence with 'new backgrounds' they'll know exactly what it is. See the difference?
Not as clear: I made some new backgrounds today. click here
Very clear: I made some new backgrounds today.
You can also make a list of links by adding the break tag as such:
<a href="http://www.example.com">Click me!</a><br />
<a href="http://www.example.com">Click me!</a><br />
<a href="http://www.example.com">Click me!</a><br />
Click me!
Click me!
Click me!
Click me!
Page Anchors
Not only is it possible to link to other pages of your site, it's also possible to link to different parts of a single page with page anchors.
Wherever you want to put the links, use this code for each link. One way to use link anchors is for a 'Jump to Bottom' or 'Jump to Top' link, or you can use them to divide up a long article or page.
Then wherever you want the link to direct to, put this code right in that spot (of course you'll have to change the name):
Image Links
Now that we've learned how to make both images and links, we can combine them. All you do is put the image code where the link text would normally be:
The blue (or purple once you've clicked it) border isn't particularly attractive, so we'll get rid of it with a little css. Just add this snippet in the image code before the alt tag (or after, it doesn't really matter):
And now we have a very awesome smiley image link:
