HTML Tutorial: Links
Links are vital to a website, so this is what the tutorial is about. You can create simple text links, or even image links. This way you can link many pages together to make them more interactive and obviously navigable.
Text Links
Text links are good because you don’t need to have the web address to be clicked, you can change it to ‘click here’ or whatever tickles your fancy.
<a href="URL HERE">YOUR TEXT HERE</a>
The code above may look a bit scary compared to what you’ve learnt but it’s nothing much. a href means that you want to create a link and use an address. This particular command will probably pass your mind pretty quickly, but read it out aloud and you will be getting it in no time.
Of course, you type the website address into the quotation marks. If you wanted to link to my site you would type http://heartdrops.org in the quotation marks. If you wanted that link to say my name, you would type Georgina in between the tags, like so:
<a href="http://heartdrops.org">Georgina</a>
You can put any text you like when you link to a certain page on the internet.
When you are linking to a website like Google, you cannot put www.google.com in the quotation marks. You must put http://www.google.com as it is not a page located on your website.
If you are linking to a different page on your website, such as page2.html, you can simply type <a href="page2.html">Page two</a>. If this page is in another folder, don’t forget to include the folder name as part of the URL.
Image links
Instead of placing text within the link tag, you can place an image, so the image will link to a new website. This is handy if you are linking websites with a banner or button.
<a href="URL HERE"><img src="IMAGE URL HERE" border="0" alt="alternative text"></a>
You will have noticed that I have added an attribute to make no border. You will normally, automatically get a thin border around your image. Often it isn’t attractive, which is why I added the no border attribute. You can take it out as you wish or make it bigger.
Targeting
You might want links to open in a new window rather than in the same window. This is what the target attribute is for.
<a href="URL HERE" target="_blank">YOUR TEXT HERE</a>
It’s pretty simple, it says ‘target’. Where you want it to go! Typically what I have included above will open the link in a new window.
Email links
So we all like an alternative, huh?
<a href="mailto:you@site.com">email me!</a>
The problem with this link… well, personally, I don’t like it. If the visitor were to click on that link, it would generally take them to their default email provider (as specified by their browser). Sometimes people also don’t bother with these. They usually will go to their email and type in the address or copy and paste it.
Another problem is that it is easy to get spam by doing this, which is why some people do this:
<a href="mailto:you[at]site.com">email me!</a>
And then, they notify visitors to ‘replace [at] with @’. It prevents the spam. (As does putting NOSPAM after the @ sign.)
Anchors
An anchor is the special name for a place inside a document that can be linked to. You may have noticed links such as “top of page” to skip to a different part of the page.
If you would like to create a link like this, choose the part of the page you would like to link to. Let us assume that it is a heading reading “Books”. The following code, using name, names the anchor. The visitor will not be able to see this name unless they see your source code.
<a name="books">Books</a>
To make things easy, we have named the anchor “books” as well.
To link to this part of the document, we would use the following syntax:
<a href="#books">Skip to "Books" section</a>
As we have put something between the tags, it actually makes the word “Books” seem like a link but is not. If you hover over the text just before this sentence you will see what I mean.
To prevent this, we don’t place anything between the tags. We place the link tag just before the text.
<a name="books"></a>Books
Summing Up
Links are not bad, huh? Make sure you know how to do these!
- add links to different places, both on and off your site
- link an image to a page, if you like
- open links in new windows
- use links to move to other parts of the page.
- use links to move to the top of your page
- credit people appropriately – by linking them