HTML Tutorial

Chapter 9: Navigation Within A Document

Navigation Within A Document

Wouldn't it be nice to be able to click a link and move to another area within the same page? Well you can. You will use the normal anchor tag (<A HREF>) except instead of placing another page in the quotes, we will use a named portion of the document, which begins with a #. To name the part of the document, go to the area you want to name, and place <a name="name_of_area">text</a>, then to call a link to that place from somewhere else in the document, use <a href="#name_of_area">text</a> Example:

Go To Section 2

blah
blah
blah
blah
blah
blah
blah

Welcome To The Next Section!

How does it work? Have a look below.

<a href="#section">Go To Section 2</a><br />
blah<br />
blah<br />
blah<br />
blah<br />
blah<br />
blah<br />
blah<br />
<a name="section">Welcome To The Next Section!</a>

Once you have the section named, you can even call it from other documents... for example, if you named a section in index.html called section2, you could call it from bookmarks.html using <a href="index.html#section2">.

Your Own HTML Page

Add the following red text to your HTML page ("index.html")

<html>

<head>

<title> My First Webpage </title>

</head>

<!-- The body starts here - and a background image is loaded -->

<body background="bg.jpg">

<!-- This is a heading, in blue -->

<center><h1><font color="blue">YOURNAME's Home Page</font></h1></center>

<p>This is the home page of <b>YOURNAME</b>.</p>

<!-- My name and the two images are all part of a link - which is a "mailto" link -->

<p>E-Mail me by clicking the mail image. <a href="mailto:youremailaddress"><img src="mail.png" border=0></a></p>

<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>

<!-- This is an ordered list of sections in the document -->

<ol>

<!-- The first item is a link to a section labelled FavLinks -->

<li><a href="#FavLinks">My Favourite Web Sites</a></li>

<!-- The second item is a link to a section labelled Hobbies -->

<li><a href="#Hobbies">My Hobbies</a></li>

</ol>

<!-- This command labels this point as section FavLinks -->

<a name="FavLinks">

<h2>My favourite Web Sites</h2>

</a>

<!-- This list is an unordered list -->

<ul>

<li><a href="http://www.your-name-here.co.uk">Domain Name Registrations</a></li>

<li><a href="http://www.bestdesigns.co.uk">Web Designers In Blackpool</a></li>

<li><a href="http://www.blackpoolhotel.com">Blackpool Hotels</a></li>

</ul>

<!-- This command labels this point as section Hobbies -->

<a name="Hobbies">

<h2>My Hobbies</h2>

</a>

<p>Talk about your hobbies here.</p>

</body>

</html>

Save the text file as "index.html".