html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Basics

Lesson 8 - Links

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 opening <body> and closing </body> tags.


<body>
<h1>Links and Hyperlinks</h1>
<h2 id="smallpie">Link To Same Page</h2>
<p>Nothing Beats Chicken pie</p>
<img src="http://htmldoctor.info/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>
<p>Filler text</p>
<p>Filler text</p>
<p>Filler text</p>
<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://htmldoctor.info/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://htmldoctor.info/htmlbasics/lotsofpies.html">Hyperlink</a>
</body>

Reviewing Our Changes

Ok with the changes cut and pasted into the file, your HTML code should now look like the code below.


<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML and CSS 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://htmldoctor.info/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://htmldoctor.info/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://htmldoctor.info/htmlbasics/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.

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.

notepad

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 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.

notepad

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 HTML4 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.

Related Tutorials

HTML4 Intermediate Tutorials - Lesson 5 - More About Links

What's Next?

In the next lesson we wrap up the HTML4 Basics tutorials.



Images  << Prev           Next >>  HTML4 Basics Summary

HTML4 Reference

The <a> anchor tag

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>