HTML From the Ground Up

by L. Downs

More Linking, Fragments, and Other Stuff

Last month we starting developing a page with various kinds of links. This month we'll add some more, and show how to jump back and forth within a page (or to a specific spot in another page).

First, let's add a heading to our page, to make it a little more user-friendly. Add this just below the <BODY> tag:
<H1 ALIGN="CENTER">Links of All Kinds</H1>

Second, let's put a graphic into the middle of our page, just to brighten it up. We'll use that Grand Canyon graphic we used earlier. Just above the line that reads "Months of the year" add this code:

<IMG SRC="gcanyon.gif">


<BR><BR>

Next, we're going to digress even further, and talk about lists. (Believe it or not, this will eventually lead back to links. Please be patient.)

You probably already know how useful bulleted and numbered lists are. HTML includes several very easy-to-use commands for working with lists. You simply define the beginning and end of a list with a pair of tags, and precede each item in the list itself with an <LI> tag.

First, for a bulleted list, enclose the list between <UL> and </UL> tags. "UL" stands for Unordered List, which is a perfectly obscure way of saying an unnumbered list. Let's call up last month's file you worked on, and locate the heading "Days of the Week." In the blank line between it and the list of days, add the tag <UL>. At the end of the list (under Sunday) add the tag </UL>. Then, add an <LI> tag in front of each day of the week. When you save your file and load it into your browser, the results should look like this:

Days of the week:

Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday

Now do the same with the list of months of the year, but instead of <UL> and </UL> use <OL> and </OL>. (Don't worry if something seems to be missing.) You should see this on your page:

Months of the year:

January
February
April
May
June
July
August
September
October
November
December

Oh, oops! Well, no harm done. Just add a line containing <LI>March between February and April and try again. As if by magic, the list has renumbered itself.

You can even have lists within lists. Let's break up September into individual weeks. Insert seven blank lines after the line with <LI>September, and add a new list that looks like this:



<UL>


<LI>First week


<LI>Second week


<LI>Third week


<LI>Fourth week


<LI>Fifth week


</UL>

The results should look something like this:

Months of the year:

January
February
April
May
June
July
August
September
- First week
- Second week
- Third week
- Fourth week
- Fifth week
October
November
December

By now your page is starting to get a bit long, requiring scrolling up and down to read everything, and this is where being able to link to a specific part of a page becomes handy. Let's say we want to be able to jump down to our handy list of days of the week from the top of the page, instead of scrolling down. To do this, we need to do two things (Aha! An unordered list!):

Give a name to the place we want to jump to, so our link can find it, and
Create a link to that name.

To give a name to a specific place on a page, we use the same <A> tag that we use to create links, but we use a different attribute--in this case the NAME attribute instead of an HREF attribute. Let's say we want to call our list of days "days" (how clever!). Just before the text "Days of the week" we add this:
<A NAME="days">
and just after it we add an </A> tag. We've now in effect planted a flag at the heading "Days of the week" called "days" so that we can easily find it.

Now, at the top of our page (just below the heading you added a few minutes earlier) add this:
<A HREF="#days">Handy list of days of the week</A>

Note the difference from our previous links: the pound sign (#) tells the browser to look for a "named place" instead of another file. Such a "named place" is called an anchor, and the part of the URL preceded by a pound sign which points to an anchor is a fragment. If all goes well, when you click on this link you should jump directly to the list of days later in your file. (Because the bottom of the page is as far as your browser can go, you may wind up with your list a few lines below the top of the page).

Linking to a specific spot in another page is just as easy, provided that a location has been given a name with the NAME attribute. Just use the URL (or filename) of the page in the HREF attribute like you normally would, but with the name tacked on after the filename and separated from it with a pound (#) sign.

Now take a look at Example 1 for this chapter to see if your finished page looks like ours.

To finish up, we'll cover a much different kind of link, and a very commonly used one. This is a "mailto" link, and actually allows your user to bring up their email client with an already-addressed blank message ready to be filled in. To do this, you create a link in this format:
<A HREF="mailto:[the email address]">[text to display]</A>

For example, if you want to set up an automatic link to Frederic Szyzygy, whose email address is fsyzygy@nowhere.com, you'd use this code:
<A HREF="mailto:fsyzygy@nowhere.com">Fred Syzygy</A>

The catch here is that this only works if the user has configured their browser to bring up their email client (although this is very common, it's not universal). If they haven't, clicking on the link will just bring up an error message. The only way for them to actually get the email address in this case is to either look at the status line at the bottom of their browser (which if it's been turned on should show the address when the user points at the link), or to look at the source code for the page. And, of course, if they're working from a printout they're out of luck. For this reason, you may want to include the email address in the visible text as well, just in case.

In our next lesson we'll take a break from links, and start working with tables.

Terms to know from this lesson

<UL> and </UL> ("unordered list") tags: Enclose an "unordered" (unnumbered) list.

<OL> and </OL> ("ordered list") tags: Enclose an "ordered" (numbered) list.

<LI> ("list item") tag: Precedes each entry in a list.

NAME attribute: Used in an <A> tag to give a name to a specific part of a Web page in order to make it directly linkable.

Fragment: An identifier in a URL that points to a specific part of a document, usually one marked with the <A> tag. In the address http://www.twinplanets.com/tutorial/terms.html#tags, the "#tags" is a fragment.

Anchor: A part of a document enclosed with an <A> tag and given a name so that it can be linked to in a URL using a fragment.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.