October 22, 2006 11:49 PM

CHAPTER FOUR:

Links

INDEX: 01) Basic Information Concerning Links; 02) HTML Links; 03) Internal Links; 04) External Links; 05) Email Links

01) BASIC INFORMATION CONCERNING LINKS

A hyper-text link is a word or phrase in a Web page that, when clicked on, takes the user to an entirely different Web page on the same site or to a completely different Web site.

How does it know where to go? Each Web site has its own address, called a Uniform Resource Locator, or URL (which is what you type into the "Address" section of your Web browser to get to a specific site). The correct address must be given to get there and the contents of the address IS case-sensitive, in many cases.

Have you ever looked at a URL? It looks very complicated, doesn't it? Let's break it down into plain English for better understanding by examining the following examples.

http://youniquedesigns.biz

http://quiltingpassion.com/copyright.html

http://rivermoo.com/tidbits/html/chp4.html

A URL can be divided up into different sections, in this order: how://who/where

HOW: The first part of a URL specifies how the data is going to be transferred. This is called the protocol. The protocol is always followed by a colon (:) and two (2) forward slashes (//). Some protocols are:

     http://      (hyper-text transfer protocol)

     https://     (hyper-text transfer protocol secure)

     ftp://       (file transfer protocol)

     telnet://    (telnet protocol)

Sometimes, you may notice that instead of http://, you see https://. The addition of the "s" indicates that you are on a "secure" site, probably one in which you are using sensitive data (for instance, credit card information).

WHO: The next part of the URL is who the browser is attempting to contact. It's not actually a person, though. It's the name of a computer where the source is located (called the HOST NAME). This is the part of the URL that has the dots in it, like:

youniguedesigns.biz or quiltingpassion.com

WHERE: This part indicates where the resource is located on the computer (this generally means the directory, and perhaps even the specific file you are trying to go to).

So, let's look at the examples given above once again:

http://youniquedesigns.biz

http://quiltingpassion.com/copyright.html

http://rivermoo.com/tidbits/html/chp4.html

In the first example, it tells us that we are using a hyper-text transfer protocol (looking for Web pages using HTML) to a specific computer named (or being routed to) youniquedesigns.biz. It might be important to remind you that when there isn't a file name listed at the end, the Internet defaults to the file "index.html", so http://youniquedesigns.biz is the same as http://youniquedesigns.biz/index.html.

The second example tells us that we are using a hyper-text transfer protocol to a specific computer named quiltingpassion.com and it lastly tells us that we are specifically accessing the file copyright.html.

The third example tells us that we are using a hyper-text transfer protocol to a specific computer named rivermoo.com, accessing a specific directory on that computer called "tidbits", then another directory (subdirectory, actually) called, "html", and it lastly tells us that we are specifically accessing the file chp4.html, which just so happens to be the Web page you are reading right now. So, if you look up at the "Address" in your Web page, this third example is the address that you should be seeing.

02) HTML LINKS

The tags for creating links are <A> and </A>, with 'A' coming from the word 'anchor'. The <A> tag is a little different from other tags. It NEVER begins a link with just a plain <A>. It must contain other information, such as the URL being linked. The format for the anchor tag is:

where, HREF stands for Hyper-Text Reference and "URL" is the actual, full address of the link, including the quotation marks (").

The above linking code would take you directly to my Web page on the Quilting With a Passion Web site. But, in order to get there, you would have to have some text on the Web page to click on to get there, right? And so far, in the above code, there is only the location of where you want to go, but didn't give anything to "click" on to get there!

Where does the rest of the tag to click on go? After the <A> tag, but before the </A> tag. The text put between the two tags is what will be highlighted and underlined on the Web page.

<A HREF="http://quiltingpassion.com/sregora.html">Sregora's Web Page</A>

All of the text, 'Sregora's Web Page', will be highlighted and underlined, as shown below, because it is between the <A> and </A>. The code above would show up on a Web page as in the following:

Sregora's Web Page

So, if I wanted the entire sentence:

Would you like to see Sregora's personal Web page?

to show up with only the word Sregora's to be the link part, here's the code, then following the code is the example of what it would show up as on the Web page.

Would you like to see <A HREF="http://quiltingpassion.com/sregora.html">Sregora's</A> personal Web page?

Would you like to see Sregora's personal Web page?

Notice that you can click on the word "Sregora's" above and go directly to that Web page. You only see that word in the clickable area because it is the only word that you have in the <A HREF> </A> tags in the code above. Pretty neat, eh? Also notice that everything you capitalize (or don't) appears just as you put it in the area between the tags.

You can put as few or as many words as you wish to be the actual link between the <A HREF> and </A> tags. Just remember that the less someone sees that is the "click" part, the more organized, and better, it looks. It's also less confusing!

03) INTERNAL LINKS

There are two (2) types of links: Internal and External. Internal links (anchors) sends the reader to a different part of the SAME Web page. You must be asking yourself why someone would want to have a link to the same Web page they are reading. Normally, you wouldn't. But, what if the Web page is extremely long (like some of these in this tutorial)? Rather than scrolling through the entire page to find different sections, it's best to set up a Table of Contents and/or Index at the beginning using internal links. Here are the formats for internal links:

<A HREF="#name">The text you want in the Table of Contents and/or Index goes here</A>

Notice that the difference between those two (2) tags is that one begins with <A HREF and the other begins with <A NAME.

The best way to understand this concept is to see it in action. Here is how the Index for this specific Web page would look:

Index

01) BASIC INFORMATION CONCERNING LINKS
02) HTML LINKS
03) INTERNAL LINKS
04) EXTERNAL LINKS
05) E-MAIL LINKS

The HTML code for the Index of this page would look similar to this:

...
<H3>INDEX</H3>
<P>
<A HREF="#1">01) BASIC INFORMATION CONCERNING LINKS</A>
<A HREF="#2">02) HTML LINKS</A>
<A HREF="#3">03) INTERNAL LINKS</A>
<A HREF="#4">04) EXTERNAL LINKS</A>
<A HREF="#5">05) E-MAIL LINKS</A>
<A NAME="#1">01) BASIC INFORMATION CONCERNING LINKS</A>
<BR>
A hyper-text link is a word or phrase in a *blah blah blah*...
...

The link itself has a number symbol (#) before what you're naming the anchor. Also notice that for every <A HREF="#whatever" text</A> there is a matching <A NAME="#whatever" text</A>. This connects the link with where it's to go within the same Web page. If they do not match, the link will be dead and not work. Think of it like this; <A HREF and <A NAME are married to one another. They work as a team or they don't work. Period.

So, the example of above, when coded, would now look similar to the example below and if you click on one of the internal links below, it will take you to that specific section of this Web page. If you simply roll your mouse over the links, they will show you #1, #2, #3, #4, and #5, which is what we coded them in the <A HREF tags above.

INDEX

01) BASIC INFORMATION CONCERNING LINKS
02) HTML LINKS
03) INTERNAL LINKS
04) EXTERNAL LINKS
05) E-MAIL LINKS

04) EXTERNAL LINKS

There are two (2) types of external links. Those going to a page at another Web site and those going to other Web pages on the current site that you are on at the moment (within the same directory, too... just a different file name for another Web page).

LINKING TO ANOTHER PAGE, SAME SITE, same directory: Rather than putting the whole URL, simply specify the file name of the next page to link to. For instance, the main Web page for this site is located at http://rivermoo.com/ or, as we learned in a previous chapter, http://rivermoo.com/index.html.

The default file when you do not put anything after the last forward slash (/) is always called the "index" file, in this instance, index.html. So, the actual file you see when you go to the URL above is http://rivermoo.com/index.html. Knowing this, when you are creating Web pages and want the default page of a directory to automatically come up without you having to force it to, name the file in that specific directory index.html or index.htm. Both extensions (.html and .htm) work; it's whatever your personal preference is.

<A HREF="http://www.quiltingpassion.com/index.html">My homepage.</A>

Say another Web page is created in the same directory, called pictures.html. The HTML tags would look similar to this:

<A HREF="pictures.html">My favorite pictures.</A>

Did you notice that in the second Web page, the URL isn't given? Why? Because the pictures.html file is in the same directory as index.html, so it isn't needed.

LINKING TO ANOTHER PAGE, DIFFERENT SITE: The <A> tag must include the full address (URL) of the new location.

<A HREF="http://youniquedesigns.biz/index.html">My Business Page.</A>

or, simply:

<A HREF="http://youniquedesigns.biz/">My Business Page.</A>

Both of those URLs will take you to the exact same location. Remember why? Because index.html or index.htm are the defaults for anything after a forward slash (/)!

There are many extensions to URLs now available. Just to name a few:

.com,

.biz,

.org,

.edu,

.info.

05) E-MAIL LINKS

A link doesn't have to lead to another Web page. It can lead to an FTP resource (so that you can download something off of the Internet) or even allow someone to send an e-mail to you. The latter is the most popular.

By clicking on an e-mail link, people can send e-mail right then, via a pop-up window (as long as they have it set up in their browser already). This type of link is called a MAILTO LINK. Here's the format:

The 'E-mail me text goes here' is your highlighted and underlined link. Remember, anything can be said here and a portion of it can even go before and after the <A> and </A> tags. If I wanted it to be in a nice sentence form, I could do this:s:

You can <A HREF="mailto:quilting@quiltingpassion.com">e-mail</A> me right now.

It would look like this on the Web page:e:

You can e-mail me right now.

HTML TUTORIAL

Tutorial Introduction	Introduction
Getting Started	How to Get Started
Table of Contents	Table of Contents
Chapter One	WHAT IS HTML?
Chapter Two	FORMATTING IN HTML
Chapter Three	LISTS
Chapter Four	LINKS
Chapter Five	IMAGES
Chapter Six	TABLES
Chapter Seven	FORMS
Chapter Eight	EXTENSIONS
Chapter Nine	TIPS ON CREATING GREAT WEB PAGES