Interactive HTML Tutorial

Chapter 9: HTML Navigation

BASIC HTML
Chapter 1:
The HTML Basics
Chapter 2:
HTML Tags 1
Chapter 3:
HTML Tags 2
Chapter 4:
HTML Tags 3
Chapter 5:
Fonts and Text Colors
Chapter 6:
Links and Images
Chapter 7:
Lists Bullets etc.
Chapter 8:
Clean HTML Code
Chapter 9:
HTML Navigation
ADVANCED HTML
Chapter 10:
Tables
Chapter 11:
Using Frames
Chapter 12:
Using Meta Tags
Chapter 13:
Forms 1
Chapter 14:
Forms 2
Chapter 15:
Forms 3
Chapter 16:
Counters, Guestbooks
Chapter 17:
Graphics
Chapter 18:
HTML Style Basics
Chapter 19:
Resources

navback.gif (1039 bytes) navhome.gif (1259 bytes) navforward.gif (1051 bytes)

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:

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


Go To Section 2
blah
blah
blah
blah
blah
blah
Welcome To Section 2!

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 to your HTML page ("Home.htm") (the blue text is what to add).

<html>
<head><title>My Home Page</title></head>
<!-- The body starts here - and a background image is loaded -->
<body background="bgnd.gif">

<!-- This is a heading, in blue -->
<center><font color="Blue"><h1>YOURNAME's Home Page</h1></font></center>
<!-- This is a horizontal line -->
<hr>
<!-- My name and the two images are all part of a link - which is a "mailto" link -->
This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="bullet.gif" border=0><b>YOURNAME</b>.<img src="bullet.gif" border=0></a>
<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>

<hr>

<!-- This command labels this point as section FavLinks -->
<a name="FavLinks">
<h2>My favourite Web Sites</h2>
</a>

<br>

<!-- This list is an unordered list -->
<ul>
<li> <a href="http://www.xencon.com">Xenon Web Design</a> </li>
<li> <a href="http://www.microsoft.com">Microsoft</a> </li>
<li> <a href="http://www.sybase.com">Sybase</a> </li>
<li> <a href="http://www.sybase.co.za">Sybase South Africa</a> </li>
</ul>

<hr>

<!-- This command labels this point as section Hobbies -->
<a name="Hobbies">
<h2>My Hobbies</h2>
</a>
Talk about your hobbies here.

</body>
</html>


Save the text file as "Home.htm".

Go To Chapter 10

navback.gif (1039 bytes) navhome.gif (1259 bytes) navforward.gif (1051 bytes)