Hyperlinks

What the Internet is all about...a very long lesson...

Introduction

Link Types

 

Link types

Links have three parts:

Destination
What the link does or where it goes. You can link to text, movies, send an email, programs, etc.
Label
The part the viewer sees when they look at your page. It can be text or an image (or both). Designing links that make people want to click on them is an art form.
Target
A neglected part of the link. Usually is is not used but if used, determines where the destination will be displayed. The target might be a window or frame.

Page Link

For a link to a page on your server within the same directory here is the format:

<a href="page.htm">Click here</a>

Click here

Where "page.htm" is the actual URL to the other page. It might need to include the "http://www." if the page resides on another server:

<a href="http://www.page.htm">Click here</a>

Click here

Also note that the reference might need to include directory notation. Assume that you have a page in another directory that you want to link to:

<a href="dif_directory/page.htm">Click here</a>

Click here

Finally, the link can be in the middle of a sentence:

If you want to find out more click <a href="page.htm"> here</a> or go to "page.htm".

If you want to find out more click here or go to "page.htm".

Link in a new window

Normally when you click on a link it opens in your current window. You can force it to open in a new window by using the "target=_blank" attribute. You can also open a new page with a particular name. Here is an example:

Insurance is <a href="http://www.ebay.com" target="_blank">optional</a>, and is the responsibility of the buyer.

Insurance is optional, and is the responsibility of the buyer. If you are the winning bidder you need to tell me if you wish to insure and prepay. Payment expected within 10 days from end of auction. I describe the items to the best of my ability but it is understood that all items are sold "AS-IS". If you have questions, please feel free to contact me. By bidding you confirm that you have read, understand and accept these terms and conditions. <p>

 

Link to a particular place within the same page

We are starting to get pretty complicated... If you go to the top of the page you will notice that you can click on any of the topics and drop down to the topic further down the page. Here's how we do it. It is a two part process.

Go to the place in the page that you want the link to jump TO. You are going to put in an identifying "anchor" that will tell the browser where to go when you click on the link. Here's what I did with the section title:

Link<a name="samepage"> to a particular place</a> within the same page

Up in the menu at the top of the page I set up a link that looks like this:

<a href="#samepage">Link to a particular place within the same page</a>

Click <a href="#top">here </a> to return to the top of the page.

Link within a different page

By making a minor change you can make your links jump to a particular place in a different page. Just like before, go to the place in the other page that you want the link to jump TO. You are going to put in an identifying "anchor" that will tell the browser where to go when you click on the link. Here's what I did:

Link<a name="difpage"> to a particular place in a different document</a>

The link on this end looks like this, where "page.htm" is the file name for the other page. Remember, if it is in a different directory or on another server the format will need to be adjusted.

<a href="page.htm#difpage">Link to a particular place within the same page</a>

Link to a file

Pretty simple stuff! You can put files of any format out on the Internet for people to download from your site. The format is simple. I have created a Word file that I want people to be able to download. Sometimes it will simply download and open it, other times it will pop up a menu asking what you want to do with it.

To download my file click <a href="wordfile.doc">here</a>.

To download my file click here.

Email Link

This is an easy one...here's the format:

<a href="mailto:person@someplace.com">Label</a>

Label can be a word such as "Email", a picture, such as a mailbox or both. Here's something you probably won't read anywhere else... This is not officially supported by any of the browsers but it seems to work. If you want to include a subject in the email use a slightly modified version of the tag:

<a href="mailto:person@someplace.com ?subject=Mr. Mudd's Fun Class">Label</a>

Assignment

Create a page that has links to four of your favorite sites (as long as they are "decent"). Make two of the links open up in a new window. Using one of your other files create a link to the other file and also make a link to a particular place within another file. Put an email link at the bottom of the page and email the URL of your link page to me.

If I counted correctly this will be a total of seven links

 

Back to the outline.