|
|
Are
you confused about web page design and don't
know where to start? Feel free to learn HTML
and how to design your very own web site by
using our FREE Online HTML Tutorial.
HTML Tutorial Part 9:
Navigation Within A HTML Document
Navigation Within A HTML 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.hooverwebdesign.com">Hoover
Web Design</a> </li>
<li> <a href="http://www.hooverwebhosting.com">Hoover
Web Hosting</a> </li>
<li> <a href="http://www.hooverwebtemplates.com">Hoover
Web Templates</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 The Next Page
|
Learn about Web Design. Check out our 
Download Sample Web Templates - Test Your Skills
Before You Buy!! 
