note: this site has replaced with an app
This course was developed in much earlier days of the web and has been updated
into Web Design Basics for iPad (also written by me, but much better course!)

Try iPage Web Hosting -- Go Green for only $1.99/month*
*Reviews and recommendations on this web site, including web hosting reviews,
may result in commissions paid to Dave's Site, which helps out a lot.
Follow on Twitter @firstdave - Check Out my new PhoneGap Tutorial / Cordova Tutorial

Domain & Hosting Tutorial
Table of Contents
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under $5

HTML Code MiniChapter 9: Navigation Within A Document

HTML Tutorial Chapters:  

HTML5 Basics - Web Hosting Ideas - CSS, Web Design, HTML, JQuery - Twitter - Learn on your iPad

Navigation Within a HTML Document...

< back to the previous chapter

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>
<a name="section2">Welcome To Section 2!</a>

Go To Section 2
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">.

Using internal page links seems silly on a short page like this, but it definitely pays off on long pages.

HTML Code - Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.

Try typing this:

(Okay, I encourage you to COPY and PASTE this chapter's code into the box instead of typing it!)

<head><title>Navigation is Cool</title>

<a name="section1">This Is Section One</a><hr>
<a href="#section2">Click Here to Go to Section 2!</a>
<a name="section2">This Is Section Two</a><hr>
<a href="#section3">Click Here to Go to Section 3!</a>
<a name="section3">This Is Section Three</a><hr>
<a href="#section1">Click Here to Go to Section 1!</a>
This page Copyright &copy; Little Joe's Pages &amp;

<a href="">Back to The Tutorial!</a>

iPage has the Best Support

has Outstanding Uptime and Performance

HTML An Interactive Tutorial
Continue Next Chapter

Download the app that replaced this guide,
Web Design Basics for iPad to
Learn HTML and CSS Quickly.