Hypertable of Contents:

The URL of Net: A Cyberspace Address Primer
Getting Hyper: Creating Links in HTML
Site Organization: Dealing with Directories
Anchors Aweigh: Internal Links
Creating an E-mail Link
The Least You Need to Know
As a would-be Web page publisher, you've gotta give the people what they want, right? And what today's modern surfer wants more than anything else is to interact with a Web page. Unfortunately, truly interactive pages require a bit more effort to create. (I'll talk about interaction a bit more in Part 2, "A Grab Bag of Web Page Wonders," and Part 5, "Working with JavaScripts.")

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 youI need to slog through for you. As I mentioned in Chapter 1, "A Brief HTML Primer," a hypertext link is a special word or phrase in a web page that, when the user clicks it, takes him or her to a different web document (or to an FTP site, or whatever). Each web page (and, indeed, any Internet resource) has its own address, which is 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. 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 this:

How://Who/Where/What

Hmmm. We're definitely talking some 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 use something called HTTP (I tell you which protocols are used by other resources 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 misonomer since 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, this book's home page is located on a computer named www.mcfedries.com. You just tack this Who part onto the end of the How part, as shown here:

http://www.mcfedries.com

Where The next part of the address specifies where the resource is located on the computer. This generally means the directory in which the resource is stored; the directory might be something like /pages or /pub/junk/software. This book's home page is in its own directory which is /creatingawebpage. (To get your own directory, you need to sign up with a company that puts pages on the Web; see Chapter 7 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.mcfedries.com/creatingawebpage/

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 this book's home page called index.html, so here's the full URL:

http://www.mcfedries.com/creatingawebpage/index.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 file name in the wrong case, you won't get to where you want to go. That's why I always tell people to use nothing but lowercase letters for directory and file names; it just keeps things simpler (and saves wear-and-tear on your typing fingers by not having to stretch over to the Shift key).

Okay, so lemme ask you another thing. I visit your Web site all the time, but to get there, I only have to enter http://www.mcfedries.com/creatingawebpage/. How come I can get away without entering a file name?

Ah, that's because most Web servers have something they call a default file name. This means that if the user doesn't specify a file name, the server just assumes they want the default file. On most servers, the default file is named index.html, so if you enter this:

http://www.mcfedries.com/creatingawebpage/

what you really get is this:

http://www.mcfedries.com/creatingawebpage/index.html When you sign up with a Web host, you'll need to find out what the default file name is and then be sure to use that name for your main page. (Otherwise, your site visitors will just see an ugly list of all the files in your directory.)

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.mcfedries.com/">

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.

We're not done yet, though; not by a long shot (insert groan of disappointment here). What are we missing? Right: we have to give the reader some descriptive link text to click on. 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 link.htm on the CD):

Why not head to this book's <A HREF="http://www.mcfedries.com/creatingawebpage/index.html">home page</A>?

Here's how it looks in a Web browser.

Why not head to this book's home page?

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 clicker 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.

Site Organization: Dealing with Directories

You may be aware that a directory is a file storage area that's been carved out of a hard disk. If you use Windows or a Mac, you may be more familiar with the term folder, which means the same thing. However, the word "directory" is more often used in Web page publishing circles, so that's what I use throughout this book. Before continuing with the link lesson, let's take a short side trip to understand how directories work in the Web world.

There's no reason why you can't cook up a similar scheme in your Web home. On my site, to give you a for instance, I have a separate directories for many of my books (such as this books' creatingawebpage directory), a directory called ramblings that stores miscellaneous writings, another called toys that has a few online applications, a graphics directory to store all my image files, and so on.

With this type of multi-directory setup, how you reference files in other directories can be a bit tricky. As an example, consider a Web site that has four directories: 

/ (this is the main directory)
things/
stuff/
Here, things and stuff are subdirectories of the main directory. There are three scenarios to watch out for:

Anchors Aweigh: Internal Links

When a surfer clicks a standard link, the page loads and the browser displays the top part of the page. However, it's possible to set up a special kind of link that will force the browser to initially display some other part of the page, such as a section in the middle of the page. For these special links, I use the term internal links, because they take the reader directly to some inner part of the page.

When would you ever use such a link? 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 long windedness, 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. For example, you could then assemble these links at the top of the page to form a sort of "hypertable of contents."

Internal links are also used quite often in the blog world, where the main page is composed of several (possibly dozens of) individual entries. If you want someone to read a specific entry, rather than forcing him or her to scroll through the entire blog, you'd be better off setting up an internal link so that the person can surf directly to the relevant blog entry.

Internal links actually link to a special version of the tag[md]called an anchor[md]that you've inserted somewhere in the same page. 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 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 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 chapter5.htm on the CD.) 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</A>

As you can see, an anchor tag looks a lot like a regular link tag. The major difference is that the HREF attribute 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. Notice, too, that you don't need any text between the <A NAME> tag and the </A> end tag.

Where do you put this tag? The best place is immediately before the start of the section you want to link to. 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"></A>
<H2>The URL of Net: A Cyberspace Address Primer</H2>
Now, when I set up my table of contents, I can create a link to this section by using a regular <A> tag (i.e., with the HREF thingy) 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, you preface the anchor name with a number sign (#). Here's how it looks:

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

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

<H3>Hypertable of Contents:</H3>
<DL>
<DD><A HREF="#Section1">The URL of Net: An Cyberspace Address Primer</A>
<DD><A HREF="#Section2">Getting Hyper: Creating Links in HTML</A>
<DL>
<DD><A HREF="#Section2a">Site Organization: Dealing with Directories</A>
<DD><A HREF="#Section2b">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>
<P>
[The rambling introduction goes here]
<P>
<A NAME="Section1"><H2>The URL of Net: An Cyberspace Address Primer</H2></A>

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 file name. For example, suppose you want to put a link in a page and you want that link to whisk the reader immediately to the "Getting Hyper: Creating Links in HTML" section of chapter5.htm. I gave that section the anchor name Section2, so here's a tag that sets up a link to it:

<A HREF="chapter5.htm#Section2">How to Create a Link</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, the e-mail address of the President of the United States is president@whitehouse.gov. To include an e-mail link for this address in one of your web pages, you'd set up the link as follows:

You can write to the President of the United States at this <A HREF="mailto:president@whitehouse.govwebpages@mcfedries.com">email address.</A>

Here's how it looks in the browser:

You can write to the President of the United States at this e-mail address.

How To Link To Other Net Resources
If you want to try your hand at linking to FTP sites or Usenet newsgroups, here's a run-down of the types of URLs to use: 
Resource          URL
FTP (directory)   ftp://Who/Where/
FTP (file)        ftp://Who/Where/What
Usenet            news:newsgroup.name
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 whose articles you want to see. Note that not all browsers support all of these resources.

The Least You Need to Know