Links are what help us and visitors to our web sites navigate our way around the various pages that make up the site. This lesson is all about linking to other documents or parts of documents. Whether it is paragraphs on the same page, other pages on the same website or even external links, we see how to do it here.
The <a> Tag
The <a> tag and its' closing </a> tag are used to define an anchor in two ways:
To another part of the current document using the href attribute in conjunction with the name attribute or the id attribute. For our examples we will be using id attribute, which has other benefits which we will discuss in the CSS tutorials.
This type of anchor is commonly known as a link.
To another document using the href attribute.
This type of anchor is commonly known as a hyperlink.
Open the file with Notepad we created and tested in Lesson: 7 Images
You saved the file to your computer in the C:\_HTMLBasics folder as lesson_7_webpage.html
Copy and paste the following code into the reopened file, overwriting the existing content:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> HTML Tutorials - Basic HTML Lesson 8 - Links </title> </head> <body> <h1>Links and Hyperlinks</h1> <h2 id="smallpie">Link To Same Page</h2> <p>Nothing Beats Chicken pie</p> <img src="http://server2client.com/images/chickenpiesmall.jpg" alt="Chicken Pie" /> <a href="#bigpie">Big Pie Link</a> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <h2 id="bigpie">Link To same Page</h2> <p><strong>Well A Bigger Chicken Pie Might!</strong></p> <img src="http://server2client.com/images/chickenpiesmall.jpg" alt="Same Image But Bigger" width="300" height="200" /> <a href="#smallpie">Small Pie Link</a> <h2>Hyperlink To Another Page</h2> <a href="http://server2client.com/html4basics/lotsofpies.html">Hyperlink</a> </body> </html>
When your file matches the HTML code above, save in the C:\_HTMLBasics folder as lesson_8_webpage.html and close the Notepad.
Viewing Our Changed File
From the C:\_HTMLBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.
Clicking the links next to the pie pictures will move the page to the id identified with the href attribute. If you look at the URL address in the navigation toolbar bar at the top you will see that #smallpie or #bigpie is appended to the URL depending on which link you clicked.
Viewing The Hyperlink
Click on the hyperlink anchor at the bottom of the web page and you should see the following.
Hey presto! We have moved to another document, check the URL, it's the same as the one from our HTML.
Optional Attributes We Used
We used the id attribute to set a target for our internal links.
We used the href attribute to create the anchors to point to our internal and external links.
For a complete list of all the attributes available use the HTML Reference section.
Lesson 8 Complete
In this lesson we learned about how to add links to our web pages using the <a> tag and its' optional attributes href and id.
Try setting more links in the file and maybe even try to link to a page on the HTMLguru site.
In the next lesson we wrap up the HTML4 Basics tutorials.
The <a> anchor tag