Links And URL's

A link is a word or image or phrase or a combination of all of these on which a surfer clicks and is then wisked off to someplace else on the web, on your site, or on your page. This is also known as, in the technical sense, a hypertext link. The URL, which is short for Uniform Resource Locator, is the address of the page or document or information you are linking to. Everything on the internet has a URL just like people have street addresses and phone numbers and PO Boxes. How would we find anything or anyone without these addresses. Even within your computer everything has an address or location so that the information stored there can be found and retrieved. Enough about that, you don't have to be a techno junkie to add links to your web pages and make them work!

It does help, however, to become a little familiar with what a URL is saying about it's location. I have thought long and hard about how best to describe this and came to the conclusion that a man named Paul McFedries, the author of the Complete Idiot's Guide to Creating A Web Page, said it best. So here I will paraphrase what he has said and how he explains it. One small note, this man has been my inspiration for putting these pages and web site together. With out his instruction none of this would be possible as I was a complete idiot when it came to creating a web page.

Here is the basic set up of a URL: How://Who/Where/What, looks a bit strange but there is method to the madness.

Understand that the above is about as basic as you can get and if more information is needed then visit Paul McFedries at his site. You will find much more advanced HTML there and also a source to buy one of his many books. Enough of this semi-techno babble and onto the link thing.

HTML Links, Off We Go

Links can take you to three basic places:

Some of the stuff explaining URL's will be useful here in this next section. The tags for a link are <a> and </a>. These tags aren't used alone but rather must have a "URL" of some kind placed in between them like so, <a href="URL">. The href means Hypertext REFerence and yes it is important that you enclose your "URL with quotation marks or it won't work. A link to this web site would look like this:

<a href="http://pageone1.com"></a>.

Now that wasn't so bad was it? The only thing missing is the descriptive text that some one must click on to activate the link. This text is easier said than done because it is placed between the <a> and </a> tags. Here is another example of a link using the descriptive text:

Notice that when you place your cursor over the link my site that the URL appears in the status bar. You can see the same URL thing by placing your cursor over any link on a page. Hypertext links can be basically divided into two categories. The first category is an external link which takes you faraway to another web site or to a nearby page on your own web site. The second category is an internal link or an "anchor" that takes you to a different place on the same page or document.

External Links

These types of links are the most common. The example in Table 1 is a faraway link. Every one wants to share web sites they think are cool or web sites that are related to their own site by content or resource. Most of us have gone off to faraway places from different web sites at some time or another or followed a resource link to the far corners of the web. This site contains a bunch of links to resources and other sites. Many surfers want to be able to "surf" from your site chasing down the many links you provide. Surfing is what they do and some surfing should be provided for them, they will appreciate it.

External links can also take you a little closer to home. Once you learn how to create a web page and then realize that you can create a web page something happens. The phrase, "Bet you can't create just one", becomes very real. Very few people who create web pages can stop at one. Oh, I guess it is possible to make one very long page, but it's not practical. This site could be one long page, but it would be very hard to edit and update any and all information. To this end we have external links to nearby pages. Since you are creating a basic site, you will most likely have all of your pages in the same directory. This makes linking to these pages very easy since the URL is the same for all documents except for the file name. Look at the following examples. One links to a file named index.html and the other links to a file in the same directory named html.html. Here's how it looks:
/
http://users.wfeca.net/emary/index.html

http://users.wfeca.net/emary/html.html

Everything is the same except for the file names. So when linking from one page to another we can leave off the "how, who, and where " parts of the URL and just specify the file or "page" we want to link to. Remember that you must use the exact file name with its appropriate file extension, .html or .htm. Here is how that would look:

You will use this type of link to send surfers back to your "home" page from another of your pages. It can also be used to send someone "back" a page or to the "next page". I use this type of link extensively on these pages to get you from one place to another within this site. You will find this "nearby" link is indispensable when creating more than one page.

Internal Links

Internal links are also known as anchors. They serve the same purpose as a bookmark by marking a spot on the same page that a reader can jump to instead of scrolling all the down to it. The most common anchor is one that takes you to the "top" of a page or to the "bottom" of the page. Anchors are also used to help a reader get to a particular section of a long page or to a sub heading. The <a> tag used for the anchor is just a little different from the one used for a faraway link. The biggest difference is that the anchor link is a two part link. One part is the actual anchor, the spot that you want your surfers to get to, and then the link part that they click that sends them to that spot.

Let's suppose that I wanted to create an anchor to each of the above headings, I would create a table of contents at or near the top of this page. In creating this table of contents I would first add anchor tags to each of the headings like this:

<a name="name">The anchor text goes here</a>

The anchor tags look very much like a hypertext link tag. The "href" part has been replaced by the name="name" part where "name" is the name that you chose for your anchor. That name can be anything you wish but most folks try to keep it short to save on typing. A link to the first heading on this page would look like this:

<a name="section1">HTML Links, Off We Go</a>

Now when we build our table of contents we will link to this first heading by using a regular <a> tag with the "href" thing that will send the browser in the direction of the sections name. We must also tell the browser that the link that we are looking for is not on a different page, but rather on the same page (browsers are easily confused). To accomplish this we add the number sign to the front of the anchor name:

<a name="#section1">HTML Links, Off We Go</a>

This is how a table of contents might appear on a page:

I surrounded each of my headings with the <a name="?"> and the </a> and named each section section1, section2, and section3. When my table of contents was created all I had to do is to point the browser at each section name by using the "<a href=" tag. If you just want to link to a particular spot on a page and don't want to surround any text, you can use the anchor tag without any text between the tags. Look at this example:

<a name="section1"></a>

You would still use the <a href= tags and it would still point your browser to the same anchor name. This is the same type of link that I use to get you from the bottom of this page back to the top.

To take our new found anchor knowledge one step further, we can create an anchor on a different page if you find the need. All that is needed is for you to create an anchor on another page and then place the anchor name immediately behind the file name of the page you are linking to (remember to add the number sign before your anchor name as always). Here is an example of a link to the "definition lists" on the "Low Down On Lists" page:

A refresher on <a href="basichtmlpg6.html#definition">definition lists.

Here's how it looks in the browser:

A refresher on definition lists

An Email Link

Email links follow the same basic format as the rest of our links. In this case when someone clicks on the email link a window will open up allowing them to send you an email. Some browsers do not support this kind of link but most of the recent ones do. This type of link is called a mailto link because the word "mailto" must be included in the <a>tag. this is the basic layout of a "mailto link":

<a href="mailto:YourEmailAddress">Your text link goes here</a>

The "YourEmailAddress" part is your Internet email address. This type of link doesn't work if you have an web based email address like Yahoo or Hotmail. Here is an example of a complete mailto link:

Questions, <a href="mailto:webmaster@pageone1.com">contact me</a> and I'll do my best to get an answer for you.

Here's how it looks in your browser:

Questions, contact me and I'll do my best to get an answer for you.

One final note on this email link. On the web there are critters called web crawlers. They search the web for email addresses and the way they find them is to look for the "mailto" link and to look for the "@" sign. One way to avoid the harvesting of your email address and the subsequent spam it may bring is to use a JavaScript email link. We haven't covered any JavaScript on these pages because this is the basic stuff. You will find JavaScripts and information on my JavaScript Page. JavaScript is a programming language and is used for many other things besides an email link. For those of you who just can't wait, here is the JavaScript for an email link. It is important to note that JavaScript is very particular and this script must be copied exactly as it is written. This script can be used with a text link or an image link (more on images shortly) and can be placed in various positions on your page by using format tags such as "center". Below is an example of the script and how your browser will display it:

Of course you would modify the above JavaScript for you own email address by changing Var addr2 and var addr4 to reflect your own address. One other note that is worth mentioning at this time, did you notice the <!-- and the --> tags? These are used to hide text. Anything between <!-- and the --> will not be displayed by the browser. This is helpful because you can make notes on your pages and the browser won't display them for all the world to see. Here is an example:

We have a new puppy <!--place picture of new puppy here-->named Billy.

We have a new puppy named Billy.

The first line is what you would type and the second line is what your browser will display. You can leave reminders to yourself or instructions on placing text in a certain place or changing text on or after a certain date. It takes a little practice to get comfortable with using links so practice. Create a page and add several anchors on the page. Create two pages and link to each of them and add a link to a favorite web site and see how it all works together. Play around with what you have learned and have some fun. I created several web pages and used them to practice what I had learned as I learned it. After a while you'll feel comfortable enough to start on your first real web page. Again, play with the tags and have fun.