Adding Links To Your Webpage
Posted in HTML | Posted on 07-03-2009-05-2008
You might know how to create a web page, but if you want to create a website; you’ll need to know how to create links. When you click on a link, you are taken to another page on the website. Sometimes you might be taken to a page that’s on a whole different website. Linking is actually very easy.
Links are used to navigate a website. Say you have a photography website. You can have links to your “Home page”, “Services page”, “Gallery Page”, and a “Contact Page.”
Let’s go over a few examples. At this point I am going to assume that you know how to make a simple web page. If you don’t please view Creating Your First Web Page.
Linking Two Pages:
Create these two pages. Name them page1.htm and page2.htm. Save them in the same directory or folder.
Save this page as page1.htm
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Adding Links: Page1</title>
</head>
<body>
<p style=”text-align:center”><a href=”page2.htm”>Page 2</a></p>
</body>
</html>
Save this page as page2.htm
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Adding Links: Page2</title>
</head>
<body>
<p style=”text-align:center”><a href=”page1.htm”>Page 1</a></p>
</body>
</html>
When you view page1 in your browser, you should see the underlined link to page2. When you click the link to page2, you should then see a link to page1.
Linking To Another Website:
We are going to modify the code in page1 to this:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Adding Links: Page1</title>
</head>
<body>
<p style=”text-align:center”><a href=”page2.htm”>Page 2</a></p>
<p style=”text-align:center”><a href=”http://www.google.com” target=”_blank”>Google</a></p>
</body>
</html>
When you reopen or refresh page1.htm, you will now see a link that says Google. When you click on that link, a new window will open displaying google.com.
Understanding The Code:
Here we have the code that allows us to link to another page. We simply open an <a> tag.
The href is the page we want to link to. In this case page2.htm.
The text we want displayed as the link simply goes in between the <a></a> tags. In this case it’s “Page 2″.
In this case we can see that our href location is http://www.google.com. Our link text is Google. The attribute and its value that is being introduced here is target=”_blank”. Basically all this does is open the link in a new window.
Final Word:
As you can see, linking isn’t a difficult task. In the examples we went over, we used text for the links. You can also use an image as the link. Just put the image tag between the anchor tags. You will more then likely use links on your website. Another thing to note is that you will definitely want other websites to link to your site.