| |
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
Return to index
| 123 Hosting & Design ©2004-2009 All
Rights Reserved S. J. & Associates
|
|
|
