Hypertext Links Tutorial
Horizontal Bar
Overview:
"Hypertext"?! Sounds like something out of Star Wars to me. When most people are talking about hypertext links, they usually just leave it as a "link" and it serves the same meaning. When we speak of links, we're referring to a piece of text that is manipulated by HTML coding to go to a defined place, whether it be to another page on a web site, within the same page, or to some place on a different server. They all function basically the same. Here, you'll get the basic idea of what links do, and how you can create them yourself. Enjoy! ...
Horizontal Bar
The Basics of Links ~~ "Page Jump" Links ~~ E-Mail Links
Graphics Links ~~ In Summary
Horizontal Bar
The Basics of a Link:
Ah, links. Some people love 'em so much, that they devote an entire page on their site to them, and usually end up accumulating a very large list of the little pieces of click-able text. Linking text to another HTML document or web site is a pretty easy concept to grab hold of. Creating and understanding how Hypertext Links work will prove invaluable as you advance in your HTML skills.
We'll cover the basics of how to put a link together, first, and after you've mastered the HTML code to link text, we'll move on to creating other types of links on your web site. As Luke Skywalker would say, "May the force be with you"...
Horizontal Bar
The Commands:
<A HREF="http://www.whereyouwanttogo.com">Click here to go to _________!</A>
The Results:
Click Here to go to my Home Page!
Back to Top
Horizontal Bar
The Above in Plain English:
Let's talk about a bit of terminology here. After you understand what all the stuff in the code stands for, it should make a bit more sense. See if this clears anything up for ya...
  • <A : Very important, even though it's only two characters long. The A Stands for "Anchor". This part of the code tells the browser that what is between the two anchor tags is supposed to be manipulated in some way by the following parameter, which is what comes next.
  • HREF : This part of the code stands for "Hypertext Reference". You can think of this as telling the browser where you want it to go look for a specific piece of information. When you give a reference, you usually give a location, right? This works the same. The reference that's used here will be a web site address, or what is known as a URL (Uniform Resource Locator).
  • ="http://www.whereyouwanttogo.com"> : Here is where you type in the URL (web site address) that you want the link to go to. This tells the browser where to go to get the information. In other words, it defines the hypertext reference mentioned above. Without this, the link would not function.
  • Click here to go to _________! : This is the actual text that your viewers will click to go where you've specified. You can type *any* text you want here. It's not limited to certain words or phrases, so you can be creative and use the words/phrases you'd like there.
  • </A> : Ends the whole shabang. *Important* Don't forget this ending tag! If you don't put the </A> in there, all text following your link command will actually turn into the link, since there is no defined place for the browser to end it. For some reason, browsers always fail mind reading 101, so you have to specify what you want it to do. Just remember that little ending, and you'll be okay.
Horizontal Bar
"Page Jump" Links
You may have already noticed the little links I have at the top of my page. When you click them, they zip right down to the part of the page indicated by the link name, to get you to the information you want faster. You might also have seen the "Back to Top" links that jump up to the top of the page when clicked. These links are what I like to call Page Jump links, because they jump around the page allowing you to get what you need faster.

These are convenient, in that they let a viewer click to go down the page instead of having to scroll. They also help in organization if your page is really long, and you don't want to have people scroll and scroll until they finally give up and leave. The viewer can find the information they want faster, and will likely return if they don't have to search through a bunch of excess stuff. The codes below will tell you how to create this type of link...
Horizontal Bar
The Commands:
First Code: <A HREF="#codeword">Click here to jump to _______!</A>

Second Code: <A NAME="codeword">
Back to Top
Horizontal Bar
The Above in Plain English:
Let's walk through this step by step. You'll want to pay close attention to the placement of the codes. Here's the above code broken down:

First Code:
  • <A HREF= : You've seen this before, so it shouldn't confuse you. It still stands for Anchor Hypertext Reference as before. Nothing changes there.
  • "#codeword"> : This is the part of the code that changes from the other link code. Here you'll want to remember the # (pound) sign in front of your code word. This is to tell the browser to look for the code word defined in *another* anchor somewhere else in the HTML document. The code word can be any word you want. Try to make your code word something that you'll remember, or something that has relevance to the part that the viewer will click. In other words, if you type in the text "Click to jump to the Books section!" for the viewer to click, you might use the word books as your code word. Still with me?
  • Click here to jump to ________! : As it was before, this is the part the viewer will click, and should be what you base your code word from. I say this because it'll help you keep which links go with what. If you just pick a word out of the blue, it'll be hard to remember, so for organization, you can just use a word that has something to do with what the viewer'll click on your link.
  • </A> : Ends the link command. Remember not to forget that!

Second Code:
  • <A NAME= : This code is the code that will define where you want the above link to jump to. Right here, you're setting a target for the browser, so that it knows where to go. The part that follows this will be the name of the code word that you defined earlier. This code should be placed in the spot that you want the browser to jump to. If the spot that you want to jump to is near the bottom of the page, you'll place this code near the bottom of the page. Make sense?
  • "codeword"> : You'll insert the code word you used above in the first code here. One thing to pay close attention to here is the capitalization and spelling of your code word. You muse use *exact* capitalization and spelling here. It's case-sensitive; for example, if I were to call my code word "Tree" and in my <A NAME> code I typed in "tree", it would not function because the T should be capitalized. Keep that in mind.
Horizontal Bar
E-Mail Links:
I'm sure you've seen these types of links before. When you see a link that says "Click here to e-mail me!", or "Click to give me feedback!", the webmaster has used an e-mail link to tell the browser that when the viewer clicks that text, it should open a new e-mail message. Pretty, cool to say the least. It's also very useful to get your viewer's comments and suggestions on your site. Just another handy thing to keep in your HTML tool box. That said, here's how to do it...
Horizontal Bar
The Commands:
<A HREF="mailto:youre-mailaddress@wherever.com">
Click here to send me e-mail!</A>
The Results:
Click here to send me e-mail!
Back to Top
Horizontal Bar
You should be getting the hang of this <A HREF> stuff by now. This part of the code follows the same concept as before. This time, you want to pay attention to the "mailto:e-mailaddress" part. Don't forget the colon (:) there, and make sure to enter *your* e-mail address in there if you want to get mail. :) If you click the link above that shows the result of the code, it should open a new e-mail message if you have your e-mail program set up correctly. That pretty much does it for e-mail links!
Horizontal Bar
Graphics Links:
The last type of link I'd like to cover here is a graphic link. This is when you use a graphic instead of a line of text to click on. This can be done with any of the above link commands. For simplicity's sake I'm only going to show you a hypertext link on a graphic, but you can use *any* of the above link commands to link a graphic. Here's the scoop...
Horizontal Bar
The Commands:
<A HREF="http://www.whereyouwanttogo.com"><IMG SRC="nameofgraphic.gif"></A>
The Results:
Back to Top
Horizontal Bar
Pretty simple...we're only combining three codes that we already know into one to form what we wanted. If any of that confuses you, you might check out the graphics tutorial for more information concerning graphics.
Horizontal Bar
In Summary:
Well now, wasn't that fun. :) If you can get the hang of this, you're on your way to developing a highly organized web site using links. They're powerful tools to keep handy, so don't forget what you've learned here! If you have further questions, I'm always available to lend a helping hand. Give me a holler at abanc@brightok.net.
Back to Top
Horizontal Bar
Back to Home

1