Introduction
Text
Formatting
Links
URL
Anchor Tag
Link Colors
Example
Lists
Images
Tables
Frames
Forms
Conclusion


Anchor Tag
There are three different kinds of links you can have on your website:

  • Internal
  • Local
  • Global
Internal - these are links to anchors on the same page. You want to create these links typically when the content on the page is fairly long and you wish to have users jump to specific sections on the document; an example is a list of questions where each question is a link to its corresponding answer on the same page.

Local - these are links to other pages within your website. In the previous section the URL discusses was the absolute URL. The absolute URL spells out the address completely, the protocol, host, directory and filename. When you have local links an absolute link isn't really necessary. This is where relative URL's come into play, with relative URL's the protocol, site address, and directory are all inferred by those of the current document.

To link to any document within the same folder, the relative url is just the name of the file. To move up a directory, you must type "../" before the file or directory.


Global - these are links to pages outside of your site. They require absolute URL's.

HREF
HREF is just an abbreviation for Hypertext REFerence; basically it gives your browser the address of the file it is referencing. The HREF attribute is where you will place the URL that you want the link to go to. The URL should not contain any spaces. Here is the syntax to a simple link:

<A HREF="http://www.pepmint.com/">Back to Homepage</A>

Mailto
Not all links go to an Internet resource; you may want your link to go to an email address. In order to create a link that will open your browsers email program you will need to use a different protocol, the mailto protocol. There is not a lot of difference here from using the http protocol, except there are no backslashes between the protocol and the address. For the address you just type in the email address right after the colon. Here is the syntax to link an email address:

<A HREF="mailto:patty@pepmint.com">Email</A>

Name
The NAME attribute is used to define an internal link. Once you have named your anchor you can link to it by using the "HREF" attribute as so:

<A HREF="#jump">This link will jump to the anchor named jump</A>
<A NAME="jump">This is where the link will jump to</A>

In order for the "HREF" attribute to know that it is referencing an internal link you must place a pound sign "#" in front of the anchor name. You may also reference an internal anchor from another document. When you want to reference an anchor inside another page then you just include the URL of the page that contains the anchor followed by the pound sign and the name of the anchor. The anchor tag will follow this syntax:

<A HREF="http://www.pepmint.com/index.html#anchor">Linked text goes here</A>

Notice you simply appended the #anchor onto the end of the URL. This tells the browser to first retrieve the document http://www.pepmint.com/index.html and then after retrieving the document jump to the appropriate anchor.

back  next

© Copyright 2000-2002 by Pepmint.com. All Rights Reserved

Search Pepmint.com

home :: tutorial :: portfolio :: links :: hammies :: guestbook :: contact