XHTML and CSS - Adding Links to your Webpage
Adding Links to your Webpage
In this tutorial we're going to be covering links, a link is the main concept behind the internet, it's the idea that you could link one page to another, so it's basically a section of text or a picture or something that links to another webpage so let's make a basic link. The first thing you need to make a link, is something that you're going to create a link from, in this tutorial I'm just going to use basic text.
<html> <head> <title> This is the title. </title> </head> <body> This will be a link. </body> </html>
Save that page a load it into your browser and you'll see it's just text on the screen and when you click it it dose nothing. In order to make this a link what we need to do is surround it by tags, the tag name for a link is a, this stands for anchor.
<html> <head> <title> This is the title. </title> </head> <body> <a>This will be a link.</a> </body> </html>
That is going to make your text a link but it's not linked to anything, you need to add a attribute to tell it where to link to. An attribute is basically more information that the tag needs to work. The attribute we need to use is href, href stands for hyper link reference, so anytime you have a attribute write the attributes name, set it equal to something and between the quotation marks, write what you're going to make it equal to.
<html> <head> <title> This is the title. </title> </head> <body> <a href="http://aboredcoder.com">This will be a link.</a> </body> </html>
That's how you link to another website but if you want to link to another page in your website. First we need to create another webpage to link to so create another webpage in the same place as the webpage we have been using and name it page2.html and add the code below into that page.
<html> <head> <title> This is the title of the second page. </title> </head> <body> <p> This is the second page </p> </body> </html>
So now your website has two pages, to make the first page link to the second page change the link to the file name that you want to link to.
<html> <head> <title> This is the title. </title> </head> <body> <a href="page2.html">This will link to our second page.</a> </body> </html>
As long as both files are in the same directory this will link to the second page, if the page you want to link to is in a different directory you will need to write out the path to that file from the webpage you're linking from. Another attribute that is useful in links is the target, you can use this to open the webpage in a new tab.
<html> <head> <title> This is the title. </title> </head> <body> <a href="page2.html" target="_BLANK">This will link to our second page.</a> </body> </html>
You can add a link to a email address using the href attribute with mailto:[email protected] between the quotation marks, this will open up the viewers default mail client with the email address used.
<html> <head> <title> This is the title. </title> </head> <body> <a href="mailto:[email protected]">Email A Bored Coder</a> </body> </html>
You can also add tool tips with the title attribute, tool tips are boxes that popup when you hover over a link.
<html> <head> <title> This is the title. </title> </head> <body> <a href="http://aboredcoder.com" target="_BLANK" title="This is a tool tip.">A Bored Coder</a> </body> </html>

Page generated in 0.0066 seconds.