Complete Idiot's Guide to Creating HTML Web Page

Chapter 7 Making the Jump to Hyperspace:
Adding Links

CONTENTS

The URL of Net: A Cyberspace Address Primer
Getting Hyper: Creating Links in HTML
Creating an E-Mail Link
The Least You Need to Know

There is, of course, no shortage of buzzwords buzzing around the Internet community.

Words such as bandwidth, domain, and protocol are bandied about like so many linguistic Ping-Pong balls.

My vote for the current champ in the Most Overused Buzzword category is interactive.

Everything's "interactive this" or "interactive that." Sheesh! These people must hate watching TV,

because they can't interact with it (or else they sit on their couches with

visions of interactive TV set-top boxes and Gilligan's Island reruns on-demand dancing in their heads).

Still, as a Web page publisher, you've gotta give the people what they want, right? Unfortunately,

truly interactive Web pages are still on the bleeding edge of Web technology

(I'll talk about some of this stuff in Chapter 14, "Hack to the Future: What's Ahead for HTML and the Web").

And the semi-interactive Web pages that are quite common (they're called forms) can't be created without

recourse to some heavy-duty programming, and so are well beyond the scope of this book

(aren't you glad to hear that).

However, there is a way to throw at least a small interactive bone to the readers of your Web

creations: give 'em a few hypertext links that they can follow to the four corners of the Web

world (or even just to another part of your own cyberspace plot). It's an easy way to give your

pages a dynamic feel that'll have people coming back for more. This chapter explains links and

shows you how to put the "hypertext" into HTML.

The URL of Net: A Cyberspace Address Primer

Before the hypertext festivities commence, there's a bit of background info

I need to slog through for you. As I mentioned in Chapter 2 a hypertext link is

a special word or phrase in a Web page that, when the user clicks on it, takes her to

a different Web document (or to an FTP site, or whatever). I also mentioned in Chapter 2

that each Web page (and, indeed, any Internet resource) has its own address,

called a Uniform Resource Locator (or URL, for short).

When you combine these two factoids, you realize that for a hypertext

link to work properly, you need to know the correct address of the resource

to which you're linking. And to do that, you need to understand the anatomy

of these URL things. Unfortunately, the whole URL concept seems to have been

invented by some insane Geek of Geeks who never believed normal human beings

would actually use the darn things. They're long, they're confusing, they're messy,

and they're almost impossible to type correctly the first time. Not to worry, though;

I've gone mano a mano with this URL foofaraw, and I've come up with a plan that's

designed to knock some sense into the whole mess.

The idea is that, like journalists and their 5 Ws (who, what, where, when, and why),

you can reduce any URL to 3 Ws (who, what, and where) and an H (how). So the basic

form of any URL ends up looking like so:

How://Who/Where/What

Hmm. I'm definitely talking serious weirdness here, so let's see what the heck I mean by all that:

How The first part of a URL specifies how the data is going to be transferred across Net lines.

This is called the protocol and, luckily, mere mortals like you and I don't need to concern

ourselves with the guts of this stuff. All you need to know is which protocol each resource

uses, which is easy. For example, the World Wide Web uses something called HTTP

(I'll tell you which protocols other resources use later in this chapter). So the "how"

part of a URL is the protocol, followed by a colon (:) and two slashes (//).

(I told you this stuff was arcane; it makes alchemy look like "The Cat In the Hat.")

So a Web page URL always starts like so (lowercase letters are the norm, but they're not necessary):

http://

Who  Calling the next part the "who" of a URL is, I admit, a bit

of a misnomer because there's no person involved. Instead,

it's the name of the computer where the resource is located-in geek circles,

this is called the host name. (This is the part of an Internet address that has all

those dots you're always hearing, such as ncsa.uiuc.edu or www.yahoo.com.) For example,

 my home page is located on a computer named www.logophilia.com.

You just tack this "who" part onto the end of the "how" part, as shown here:

http://www.logophilia.com

Where  The next part of the address specifies where the resource is

located on the computer. This generally means the directory the resource is

 stored in; the directory may be something like /pages or /pub/junk/software.

 My home page is in my personal directory, which is /Home. (To get your own directory,

 you need to sign up with a company that puts pages on the Web; see Chapter 9 for details.)

 So now you just staple the directory onto the URL and then add another slash on the end, for good measure:

http://www.logophilia.com/Home/

What  Almost there. The "what" part is just the name of the file you want to use.

For a Web page, you use the name of the document that contains the HTML codes and text.

 The file containing my home page is called homepage.html, so here's the full URL:

http://www.logophilia.com/Home/homepage.html

Make Sure You're on the Case

I mentioned earlier that you can use uppercase or lowercase letters (the latter are normally used) for the "how" part of a URL. The same is true for the "who" part, but case is crucial when entering the directory and filename. Most Internet computers use an operating system called UNIX, which is notoriously finicky about uppercase versus lowercase. If you enter even a single letter in a directory or filename in the wrong case, you won't get to where you want to go.

Got all that? Yeah, I know-it's as clear as mud. Well, have no fear. If you can keep the how, who, where, and what idea in your head, it'll all sink in eventually.

Getting Hyper: Creating Links in HTML

Okay, with that drivel out of the way, it's time to put your newfound know-how to work (assuming, that is, I haven't scarred you for life!). To wit, this section shows you how to use HTML to add hypertext links to your Web page.

The HTML tags that do the link thing are <A> and </A>. (Why "A"? Well, as you'll find out later on-see the section "Anchors Aweigh: Internal Links"-you can create special

links called anchors that send your readers to other parts of the same document, instead of to a different document.) The <A> tag is a little different from the other tags you've seen (you just knew it would be). Specifically, you don't use it by itself but, instead, you shoehorn into it the URL of your link. Here's how it works:

<A HREF="URL">

Here, HREF stands for Hypertext REFerence. Just replace URL with the actual URL of the Web page you want to use for the link (and, yes, you have to enclose the address in quotation marks). Here's an example:

<A HREF="http://www.logophilia.com/Home/homepage.html">

Now you can see why I made you suffer through all that URL poppycock earlier: it's crucial for getting the <A> tag to work properly.

You're not done yet, though; not by a long shot (insert groan of disappointment here). What are you missing? Right, you have to give the reader some descriptive link text on which to click. Happily, that's easier done than said because all you do is insert the text between the <A> and </A> tags, like so:

<A HREF="URL">Link text goes here</A>

Need an example? You got it (see the file LINK2.HTM on the disk):

Why not head to my 

<A HREF="http://www.logophilia.com/Home/homepage.html">home page</A>?

Here's how it looks in a Web browser. Notice how the browser

highlights and underlines the link text and when I point my mouse at the link,

the URL I specified appears in the status bar.

Hypertext links are generally divided into two categories: external and internal. An external link is one that sends the person who clicks it to a different document. You have two choices here:

you can link to a Web page in a different directory or on a different system (I call this a "faraway" link), or you can link to a Web page in the same directory as the current page (I call this a "nearby" link). An internal link (an anchor) sends the reader to a different part of the same document. The next few sections describe each type of link.

External Links to Faraway Pages

The most common type of link is one that whisks the reader off to a page at some other Web site. Many Webmeisters use these kinds of external links to provide their readers with a quick method of surfing to related sites. For example, if you're putting together a page extolling the virtues of, say, the Helsinki Formula, you may want to include some links to pages about Helsinki or Finland or even The Man From U.N.C.L.E. For these types of links, make sure your <A> tag includes the full address of the new location, as described in the preceding section.

Lots of pages also include links that point to the author's fave rave Web sites and to those sites that the author deems "cool." These so-called "hot lists" are a popular item on home pages, and they can be fun for surfers (providing, of course, they share the Web page creator's taste in what's cool).

An Easy Way to Create a "Hot Links" Page

Most modern browsers enable you to store your favorite Web pages as bookmarks that you can call up anytime. The good news is that these browsers usually store all your bookmarks in an HTML document! (In Netscape, for example, bookmarks are stored in a file named BOOKMARK.HTM. In NCSA Mosaic version 2, the Advanced Hotlist Manager's File menu has an Export to HTML File command.) You can use this document as a starting point for your hot links page.

External Links to Nearby Pages

When putting together Web pages, the operating principle is "Bet you can't create just one!" That is, people usually get so juiced by getting a page on the Web that they're inspired to do it once more from the top. It's not at all unusual for a prolific Websmith to have five, ten, or even 20 different pages!

Chances are that if you create more than one Web page at least a few of your pages will be related, so you'll probably want to include links that take your readers to other examples of your Web handiwork. You'll probably store all your Web pages in the same directory,

so the how, who, and where parts of the URL will be the same as the current document. For example, compare the URL of my home page with the URL of another HTML file I use called guestbook.html:

http://www.logophilia.com/Home/homepage.html

http://www.logophilia.com/Home/guestbook.html

As you can see, the two addresses are identical right up to (but not including) the filenames. This is good because if I want to include a link to guestbook.html in my home page, I only have to include the filename in the <A> tag. That's right: if you're creating a link to a document in the same directory, you can simply lop off the how, who, and where parts of the URL. Here's how such a link looks:

Please sign my <A HREF="guestbook.html">Guest Book</A>

Anchors Aweigh: Internal Links

Most of your HTML pages will probably be short and sweet, and the Web surfers who drop by will have no trouble navigating their way around. But if, like me, you suffer from a bad case of terminal verbosity combined with bouts of extreme longwindedness, you'll end up with Web pages that are lengthy, to say the least. Rather than force your readers to scroll through your tome-like creations,

you can set up links to various sections of the document. You can then assemble these links at the top of the page to form a sort of "hypertable of contents."

Unlike the links you've looked at so far, internal links don't connect to a different document. Instead, they link to a special version of the <A> tag-called an anchor-that you've inserted somewhere in the same document. To understand how anchors work, think of how you might mark a spot in a book you're reading. You might dog-ear the page, attach a Post-It note, or place something between the pages such as a bookmark or your cat's tail.

An anchor performs the same function: it "marks" a particular spot in a Web page, and you can then use a regular <A> tag to link to that spot.

I think an example is in order. Suppose I want to create a hypertext version of this chapter. (As a matter of fact, I did! Look for the file named CHAPTER7.HTM on the disk.) To make it easy to navigate, I want to include a table of contents at the top of the page that includes links to all the section headings. My first chore is to add anchor tags to each heading. Here's the general format for an anchor:

<A NAME="Name">Anchor text goes here</A>

As you can see, an anchor tag looks a lot like a regular hypertext link tag. The only difference is that the HREF part is replaced by NAME="Name"; Name is the name you want to give the anchor. You can use whatever you like for the name, but most people choose relatively short names to save typing. For example, this chapter's first section is titled "The URL of Net: A Cyberspace Address Primer." If I want to give this section the uninspired name Section1, I use the following anchor:

<A NAME="Section1">The URL of Net: A Cyberspace Address Primer</A>

Now, when I set up my table of contents, I can create a link to this section by using a regular <A> tag (with the HREF thing) that points to the section's name. And, just so a Web browser doesn't confuse the anchor name with the name of another document, I preface the anchor name with a number sign (#). Here's how it looks:

<A HREF="#Section1">The URL of Net: A Cyberspace Address Primer</A>

Just so you get the big picture, here's an excerpt from the HTML file for this chapter (the figure shows how it looks in a browser):

<H3>Hypertable of Contents:</H3>

<DL>

  <DD><A HREF="#Section1">The URL of Net: A Cyberspace Address Primer</A>

  <DD><A HREF="#Section2">Getting Hyper: Creating Links in HTML</A>

  <DL>

    <DD><A HREF="#Section2a">External Links to Faraway Pages</A>

    <DD><A HREF="#Section2b">External Links to Nearby Pages</A>

    <DD><A HREF="#Section2c">Anchors Aweigh: Internal Links</A>

  </DL>

  <DD><A HREF="#Section3">Creating an E-Mail Link</A>

  <DD><A HREF="#Section4">The Least You Need to Know</A>

</DL>

<HR>

[Rambling introduction goes here]

<A NAME="Section1"><H2>The URL of Net: A Cyberspace Address Primer</H2></A>

Dropping Anchor in Other Pages

Although you'll mostly use anchors to link to sections of the same Web page, there's no law against using them to link to specific sections of other pages. All you do is add the appropriate anchor to the other page and then link to it by adding the anchor's name (preceded, as usual by #) to the end of the page's filename. For example, here's a tag that sets up a link to a section named Grumpy in an HTML file named dwarves.html:

<A HREF="dwarves.html#Grumpy">Info on Grumpy</A>

Creating an E-Mail Link

As I mentioned earlier, there's no reason a link has to lead to a Web page. In fact, all you have to do is alter the "how" part of a URL, and you can connect to most other Internet services, including FTP and UseNet.

In this section, however, I'll concentrate on the most common type of non-Web link: e-mail. In this case, someone clicking on an e-mail link will be presented with a screen (assuming their browser supports this kind of link, which most recent browsers do) they can use to send a message to your e-mail address. Now that's interactive!

This type of link is called a mailto link because you include the word mailto in the <A> tag. Here's the general form:

<A HREF="mailto:YourEmailAddress">The link text goes here</A>

Here, YourEmailAddress is your Internet e-mail address. For example, suppose I want
to include an e-mail link in one of my Web pages. My e-mail address is paul@logophilia.com, so I'd set up the link as follows:

You can write to me at my 

<A HREF="mailto:paul@mcfedries.com">e-mail address.</A>

The next figure shows how it looks in NSCA Mosaic.

How to Link to Other Net Resources
If you want to try your hand at linking to other Net resources, here's a rundown of the type of URLs to use:
Resource	URL
FTP (directory)	ftp://Who/Where/
FTP (file)	ftp://Who/Where/What
Gopher	gopher://Who/
UseNet	news:newsgroup.name
Telnet	telnet://Who
Note that who, where, and what are the same as I defined them earlier in this chapter. Also, newsgroup.name is just the name of the newsgroup that has articles you want to see. Note that not all browsers support all of these resources.

The Least You Need to Know

This chapter gave you the lowdown on using HTML to include hypertext links in your Web pages. Here's a review of today's top stories:

To make URLs easier to figure out, you can break them down into four sections: how (the protocol, such as http, followed by ://); who (the host name,

such as www.logophilia.com); where (the directory, such as /Home/); and what (the filename, such as homepage.html).