Web Page Tutorial #3
HONR 259J
by Jason Schlauch
The World Wide Web is a pretty big place. There are millions of pages, most of which
are linked together in some way. The first two tutorials demonstrated how to link pages
together, and how to include images. This tutorial will combine those ideas, and
demonstrate how to make images into navigation icons. Also, we will discuss how to use
anchor tags so that visitors to your site can quickly access content.
Simple Navigational Tools
-------------------------
If you've browsed the web for even a short time, you've probably already seen navigation
icons and bars. These simple graphics, such as arrows and bullets, serve as graphical
enhancements to boring text links. Creating a site that is easy to navigate is important.
Using graphics can convey ideas quickly and powerfully.
So, let's start adding navigation power to your class pages. Start by creating a new page.
We'll call this page nav1.html. Create this page by typing "pico nav1.html". In this page,
we'll type the following:
---
Navigation Page 1
---
So far, this page is pretty boring. We'll change that in a second. First, recall that you can
make a text link using the tag. Normally the form of this tag would be:
Some Cool Site
The text between the tags is displayed to the viewer as a link. However, we can spice
this up by replacing the text with a graphic--embedding a graphic within the link, in other
words. For this, we'll use the ![]()
tag AND the
tag.
Let's go back to our sample page. In the page below, enter the URL of your class
homepage in the tag and then type in the URL of the ![]()
command just
as you see it. If you would like to substitute a graphic of your own choosing, just type its
URL instead of the one we've chosen. Remember that we're creating a navigational icon,
so your graphic should be something small.
---
Navigation Page 1
This is a page I wrote, which is linked to my home page. You
can go to my main homepage by clicking on the icon below.
---
Load up Netcape to see the results. If you used our graphic, you should have an icon of a
house that links to your home page.
Many pages have elaborate navigation schemes. You can place these combined
and ![]()
tags in tables to create accurately placed navigation bars.
The following is some HTML code you can use to make a very simple navigation bar.
Once you copy it into a file of your own, you can copy and paste it to the bottom of any
of your HTML pages. You'll have to change the URL's, however.
You'll find lots of graphics to use at Yahoo's Web Page Design and Layout site. The
URL is
http://www.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/Graphics/Icons/
Anchor Tags
-----------
Some pages have lots of content. For example, take a look at:
Readers of this page have a lot of
scrolling to do before they reach the bottom. This could be prevented by using an HTML
feature called anchor tags. Anchor tags are just a modified version of the tag we
have used previously to link to other documents. In this case, we will use the tag to link
to other locations in the *same* document.
For an example of anchor tags, see the class home page:
http://www.otal.umd.edu/~vg/msf99/course2.htm
Clicking on any of the links at the top of the page (Objectives, Requirements, Readings,
etc.) takes you to the appropriate section. Each of these links is an anchor tag.
Anchors have two parts -- a link and a target. First we'll describe the target. First type
the following into a document called "anchor.html". Do this by typing "pico
anchor.html".
IMPORTANT: Note that I've only included a few
tags. You'll need a lot more to
make this work. Where I have five or so
tags, you'll need to put about 20. Unless
you really like typing, I suggest you cut and paste them into your document. If you were
doing your Project I paper, of course, the actual text of each section would substitute for
the multiple
tags we're using here just to demonstrate the anchor tag concept.
---
Anchor Page
identification
evaluation
cultural analysis
interpretation
---
Now that we have content, we need to add the targets. Targets are described by a name.
For example, the tag describes a target named
"identification". Put these in your document at points where you want readers to be able
to jump to. Let's add a few targets to our sample document.
---
Anchor Page
identification
evaluation
cultural analysis
interpretation
---
Now that we have our targets, we need a way to jump to them. This is done by using a
modified version of the familiar tag. In this case, we will change the URL to
link to sections in this document, as opposed to other documents entirely . The format
for this special is , where section is the name you gave your
target. For example, the following would make a link to the to the interpretation section:
Jump to interpretation Basically all that's changed is that
we're using the "#" sign to indicate that we're jumping to a section, and not another
document.
Note that you *can* jump to both another document and another section at the same time.
This is done by using the following:
This will open the document called "document.htm" and jump directly to the section
"section". For now we'll just use the simpler type of anchors in our document. Add the
following to your "anchor.html":
---
Anchor Page
Jump to identification
Jump to evaluation
Jump to cultural
analysis
Jump to interpretation
identification
evaluation
cultural analysis
interpretation
---
That's it. If you click on any of the links at the top, you'll notice how the browser jumps
to the target section.