Links
Links are the building blocks of the web. They're probably the most important thing you need to know about. Fortunately, they're also very easy to get the hang of. A link (short for 'hyperlink') takes you from one place on the Internet to another. You can make a link in your website by putting in a bit of HTML called an anchor. The anchor tag tells the browser where to go when someone clicks on it.
Adding links
Links are what the web is made of. A link lets you move from one location on the web to another. It's the 'hyper' in hypertext. The tag that we use for links is called an anchor, and it looks like this:
<a href="http://www.google.com"> Click here to search the web </a>
As with all other tags, it has an opening and closing part - the <a> and the </a>, and similar to the image tag it has an attribute in the opening tag called href (which stands for Hypertext REFerence), which tells the browser where the links should go. Like most tags (although not the image tag), you wrap it round the thing that you want it to apply to - in this case the text, "Click here to search the web". So let's add a link to our page:
<html>
<body>
<h1>
Hello, I've just had a really big idea!
</h1>
<p>
Here's a picture of it:
</p>
<a href="frankenstein.html">
<img src="images/my_big_idea.jpeg"
style="width:100px;
height:100px;
border: 2px solid red;">
</img>
</a>
</body>
</html>
In this case, I have applied the link to the image, and it points to another page. (Notice how the anchor tag wraps round the image tag - that's proper nesting for you!). Of course, if you were to click on the linked image you wouldn't go anywhere, because I haven't created a file called frankenstein.html yet.
- HTML tags tell the browser how to format the document. Tags can have attributes which give the browser extra information about that particular bit of your page, for example, the size of an image, or the target of a link
- Remember to close all your tags. Think of the tags wrapping round your content
- Remember to nest your tags properly. Sets of tags should enclose each other like Russian Dolls; you should close the set you most recently opened before moving onto the next set
- If your page doesn't display in a browser properly, carefully check you haven't made any mistakes copying the code here. A missing > or " could be enough to confuse your browser. Or have a look at our troubleshooting section
- Annoyingly, most browsers will actually let you get away with quite a few mistakes before they give up rendering your page. But it's best to get it right first time to avoid more complicated problems arising later on
Linking to other sites
If you want to link to another website, just open up that site in a browser, go to the page you want to link to and copy its address (URL) from the address bar of the browser. Then you can paste that URL into the src part of your <a> tag. Wrap your anchor tag around the text or image that you want people to click on and you're done!
When links break
Sites go down, pages move, people make typing mistakes. The result of all this is that a lot of links don't actually work when you click on them. So remember to test your links before you launch your site. And if people are linking to your site, try not to move your pages around as it will break all their links and make both you and them look bad!
A comprehensive guide to links:
http://www.cwru.edu/help/introHTML/TCh6.html
Cool URIs don't change:
http://www.w3.org/Provider/Style/URI
