The hyperlink. The element of interactivity. Where else besides the web -- or games -- can you just click on something and you go somewhere else. Compare this virtual book to a real one: why waste energy turning physical pieces of pressed dried tree pulp when you could just push your mouse a little bit and with little more than a few calories press a hyperlink and access a webpage full of data. The hyperlink also makes the web so much easier to navigate through than the early internet which drove Dr. Berners-Lee crazy. So let's learn about the, huh?

1. The concept of hyperlinks
2. Hyperlinks
   1. Anchor links
   2. Email links
   3. Frame links
3. Anchors

If you're interested in writing HTML, you probably experience in surfing the Web. So you'd know what a hyperlink is. The visual aspect is a area of text or and image that once clicked will let you see a new bunch of content. They "link" together different pieces of your site, such as anchors, additional pages, files, or images. Hyperlinks are the way you navigate a website. If there aren't any hyperlinks, well you're up a virtual creek without a paddle.

Hyperlinks

Now we are going to learn about how to code hyperlinks, OK? Well, it's rather simple. We use the <a> tag to make a hyperlink. Whatever goes between the <a> tag and its endtag will be treated as a hyperlink. Hyperlinks typically tend to be either text or images.
      There is the unusual fact that both hyperlinks and anchors use the same tag, the <a>. That's why just putting in the <a> tag is useless. Nothing will happen. Unless, of course, you add the href= attribute. The href stands for hyperlink reference; after the equals-to symbol you would type in the URL (Uniform Resource Locater) desired. So if you would want to create a hyperlink to the Dilbert Zone^™, you'd type in the following code:

And voila, you get instant link to Dilbert. A few notes on usage. Whatever you type after the href= can be a URL for an HTML file, to an FTP address, to an anchor, or for an email address. When coding your link, specify what type of transfer protocol is being used if you are linking to something other than your HTML files. If it is a normal website, remember to add in the ungainly "http://". If it's ftp, then remember to type in "ftp://". And so on and so forth. If you don't, things can get ugly.

When linking to another of your HTML files, then just put in the path to follow. Remember to include extensions; this may sound unnatural to Mac users, but trust me, you need them. If it's an HTML file, add ".htm" or ".html" to the end of the filename. If it's a JPEG images, add ".jpg" or ".jpeg". And so on.

If you are linking to an anchor within the same file, you must add a pound sign (#) and then the name of the anchor.

And this is how you do it if the anchor is not in the same webpage as the hyperlink. You put first the filename of the page that contains the anchor you are linking to (including extension), and then the pound (#) and the name of the anchor.

You can also make a hyperlink link to an email address. When you do so, once the link is clicked, the reader's email program starts so that they can type a message to the linked email address. This is useful and time-saving for the reader, since they don't have to remember the address and worry about typing it correctly; they just click a link and write.
      When you want to do this, you add a mailto: after the href=. You then type in the email address after the colon. Here's the code for this link: Email the author!

There's only one thing more to learn about hyperlinks. It has to do with frames. So don't be worried if you don't understand it completely (if you don't know what frames are, I suggest you skip this part right now and learn about them).
      What happens if you have a navigation frame and you want the link to open in the main window? Then you use the target= attribute. Remember the name= attribute for frames (again, this is in Chapter 9). The target of a link is the frame that you want the linked item (i.e., a picture) to open in; obviously, you don't want the item to open in teh navigation frame. That would make the navigation frame useless.
      There are also three special values that can be used in conjunction with the targer= attribute. These three give you more control when linking with frames. The first is _top -- the underscore is absolutely necessary. This value will override all the framesets. Don't worry if you don't understand. It's all in Chapter 9. The second is the _parent overrides only the nearest layer of framesets. And finally, the _self value has the linked file display in the same frame as the link.
      So you have the target= attribute. The name of the frame (hey, that rhymes!) is the value that you put after teh equals-sign, like so:

If you had that hyperlink code in the navigation frame, the link would open up a file called "home.htm" in the frame named "main". The "home.htm" file would not open in the navigation frame; unless of course, you named that frame "main", which you shouldn't (I'll tell you why in Chapter 9).

And that's about it. You know something about hyperlinks. Good. Now commit this chart to memory!

Anchors are similar to signs along a hiking path; each sign marks off a section of the path, like an anchor can mark off a part of the webpage. Anchors are elements which provide a place on a page to be linked to. You can't actually see an anchor; they're there so you can provide links that allow people to access only the information they want to. Take for example, if you don't mind, my book. In each chapter, like this one, there is a list of contents that are links. I have anchors positioned before each topic. If you only want to see one topic, you don't have to scroll down the whole page ooking for it; just click the link which will bring you to the anchor that is placed before the topic. Whew!
      As I said, you don't actually see an anchor. Anchors by themselves are totally worthless and a waste of memory. They are useful only if you have a link that goes to the anchor (see linking to anchors). Their effect is for the most part indirect. Putting an anchor anywhere won't help you a bit. You the programmer must put the anchor in a useful spot, and have a hyperlink to it. I know I have been droning on and on, so let's see a table and example, already!