e-pixs.com - HTML Tutorial....Making Links and Mailto Links

The Anchor Tag
<A></A>	The tag on the left is called the Anchor tag. It must have an opening and a closing tag. In the table below are the attributes that can be used with an Anchor tag. For beginners to HTML you will be most interested in the HREF= and MAILTO: attributes. Take a look at the other attributes if you want to get a basic understanding of them.
Here's a quick and dirty example of an Anchor tag (the tag is red, the attribute is blue and the URL¹ is green): Go to the <A HREF=http://www.e-pixs.com/practice.html>practice board</A> and try it. The above HTML code when viewed on a web page will look like this: Go to the practice board and try it. Remember, you can copy and paste examples into the practice board to try them out. There are explanations of many of the ANCHOR tag attributes in the next table. ¹ URL stands for Uniform Resource Locator. It is the digital equivalent to a postal address. The URL of any file lets the web page you are viewing know where to go to download and/or display the file(s).

The Anchor Tag

<A></A>

The tag on the left is called the Anchor tag. It must have an opening and a closing tag. In the table below are the attributes that can be used with an Anchor tag. For beginners to HTML you will be most interested in the HREF= and MAILTO: attributes. Take a look at the other attributes if you want to get a basic understanding of them.

Here's a quick and dirty example of an Anchor tag (the tag is red, the attribute is blue and the URL¹ is green):

Go to the <A HREF=http://www.e-pixs.com/practice.html>practice board</A> and try it.

The above HTML code when viewed on a web page will look like this:

Go to the practice board and try it.

Remember, you can copy and paste examples into the practice board to try them out.

There are explanations of many of the ANCHOR tag attributes in the next table.

¹ URL stands for Uniform Resource Locator. It is the digital equivalent to a postal address. The URL of any file lets the web page you are viewing know where to go to download and/or display the file(s).

The Anchor Tag Attributes

Attribute Req. or Opt. Purpose
HREF= Optional The HREF= attribute lets the web page know where to get the resource from. The resource could be another web site/page or an image file or a file to download etc. If the resource is from a remote server you must use the absolute URL. The absolute URL is just the full URL of a web site or a web page etc, usually starting with HTTP://. For example, the URL of eBay is: HTTP://www.ebay.com. You can use a relative URL if the resource is called from a local directory. A relative URL might look like: <A HREF=practice.html> (the URL of our HTML Practice board) or <A HREF=pics/bye.gif> (the URL of the little guy waving bye on the Using Images tutorial page.
MAILTO: Optional This is the attribute to use to create an email link on a web page. It is used in conjunction with the HREF= attribute. Here is an example:
Send email to <A HREF=MAILTO:kevin@e-pixs.com>kevin@e-pixs.com</A>
The above example when viewed on a web page will look like this:
Send email to kevin@e-pixs.com
Just substitute your email address in place of my example, and change the wording to anything that suits you. Don't forget the colon (:) after MAILTO:
NAME= Optional Anchor tags sometimes need specific and unique names to identify them from all other anchor tags on the same web page or document. Mostly used for a "jump to" link. A jump to link is a link that is usually on the same page as the ANCHOR tag but not always. You see it alot at the bottom of a web page, it might have a link that says: back to the top.
TARGET= Optional The most interesting use of the TARGET attribute is to force the link to open in a new window. It's vey easy to do. You can just put: TARGET=_BLANK in the ANCHOR tag. Like this:
<A HREF=beginners.html TARGET=_blank>Text and Fonts</A> will get you: Text and fonts. The new window may open full size or in a reduced size depending on which browser the viewer is using and how their settings are configured. The new window will not allow the back or forward buttons to be used. So a viewer must close, resize or minimize the new window to get back to the original window. It's good to use because viewers are not transported out of your web site/pages when viewing the contents of the new window.
SHAPE= Optional Used when a section or sections of an image are being used as an imagemap to link to other resources. You define the the shape as RECT, CIRCLE, POLY, DEFAULT. I'm not going to go into details here. This is for more advanced users but now you know what it means anyway if you run across it while viewing the source code (HTML) of a web page.
COORDS= Optional Short for coordinates, its used to set the size and location of shapes that are defined by the SHAPE attribute above.

The Anchor Tag Attributes
Attribute	Req. or Opt.	Purpose
HREF=	Optional	The HREF= attribute lets the web page know where to get the resource from. The resource could be another web site/page or an image file or a file to download etc. If the resource is from a remote server you must use the absolute URL. The absolute URL is just the full URL of a web site or a web page etc, usually starting with HTTP://. For example, the URL of eBay is: HTTP://www.ebay.com. You can use a relative URL if the resource is called from a local directory. A relative URL might look like: <A HREF=practice.html> (the URL of our HTML Practice board) or <A HREF=pics/bye.gif> (the URL of the little guy waving bye on the Using Images tutorial page.
MAILTO:	Optional	This is the attribute to use to create an email link on a web page. It is used in conjunction with the HREF= attribute. Here is an example: Send email to <A HREF=MAILTO:kevin@e-pixs.com>kevin@e-pixs.com</A> The above example when viewed on a web page will look like this: Send email to kevin@e-pixs.com Just substitute your email address in place of my example, and change the wording to anything that suits you. Don't forget the colon (:) after MAILTO:
NAME=	Optional	Anchor tags sometimes need specific and unique names to identify them from all other anchor tags on the same web page or document. Mostly used for a "jump to" link. A jump to link is a link that is usually on the same page as the ANCHOR tag but not always. You see it alot at the bottom of a web page, it might have a link that says: back to the top.
TARGET=	Optional	The most interesting use of the TARGET attribute is to force the link to open in a new window. It's vey easy to do. You can just put: TARGET=_BLANK in the ANCHOR tag. Like this: <A HREF=beginners.html TARGET=_blank>Text and Fonts</A> will get you: Text and fonts. The new window may open full size or in a reduced size depending on which browser the viewer is using and how their settings are configured. The new window will not allow the back or forward buttons to be used. So a viewer must close, resize or minimize the new window to get back to the original window. It's good to use because viewers are not transported out of your web site/pages when viewing the contents of the new window.
SHAPE=	Optional	Used when a section or sections of an image are being used as an imagemap to link to other resources. You define the the shape as RECT, CIRCLE, POLY, DEFAULT. I'm not going to go into details here. This is for more advanced users but now you know what it means anyway if you run across it while viewing the source code (HTML) of a web page.
COORDS=	Optional	Short for coordinates, its used to set the size and location of shapes that are defined by the SHAPE attribute above.

Examples using the Anchor Tag

Common link to another web page or web site
The HTML Code Visit <A HREF=http://www.ebay.com>eBay</A>
Go to the practice board and try the above code.
The results as viewed on a web page Visit eBay
Email link
The HTML Code Substitute your email address in place of mine
Send email to <A HREF=MAILTO:kevin@e-pixs.com>kevin@e-pixs.com</A>
Go to the practice board and try the above code.
The results as viewed on a web page Send email to kevin@e-pixs.com
Jump to link
The HTML Code There are two parts to this link. The first part creates the clickable link that displays on the web page. The second part is an invisible link that the web page jumps to when the first part is clicked on.

First Part: <A HREF=#mail>How to make an email link</A>
Second Part: <A NAME=mail></A>
You can change the name part in red to anything you want. Each seperate jump to link on the same web page must have a unique name or all the links will jump to the same place. You just insert the second part into the HTML code of your web page/document at the position where you want the link to jump to. You may have to experiment with the positioning of the second part of the jump to link to get it to jump to where you want it to.
The results as viewed on a web page How to make an email link
A "View My Other Auctions" link for eBay members
The HTML Code Substitute your eBay user name in place of the red X's.
View my other <A HREF=HTTP://cgi3.ebay.com/aw-cgi/eBayISAPI.dll?MfcISAPICommand=ViewListedItems&userid=XXXXX>auctions</A>
Go to the practice board and try the above code.
The results as viewed on a web page View my other auctions
Making an image file into a clickable link
The HTML Code <A HREF=HTTP://www.e-pixs.com/links.html>
<IMG SRC=http://www.e-pixs.com/pics/epixs3_small.gif BORDER=0></A>
If you don't include the BORDER=0 attribute, there will be a blue border around the image file to indicate that it is a hyper link like the example below right.
Go to the practice board and try the above code.
The results as viewed on a web page

Examples using the Anchor Tag
Common link to another web page or web site
The HTML Code	Visit <A HREF=http://www.ebay.com>eBay</A> Go to the practice board and try the above code.
The results as viewed on a web page	Visit eBay
Email link
The HTML Code	Substitute your email address in place of mine Send email to <A HREF=MAILTO:kevin@e-pixs.com>kevin@e-pixs.com</A> Go to the practice board and try the above code.
The results as viewed on a web page	Send email to kevin@e-pixs.com
Jump to link
The HTML Code	There are two parts to this link. The first part creates the clickable link that displays on the web page. The second part is an invisible link that the web page jumps to when the first part is clicked on. First Part: <A HREF=#mail>How to make an email link</A> Second Part: <A NAME=mail></A> You can change the name part in red to anything you want. Each seperate jump to link on the same web page must have a unique name or all the links will jump to the same place. You just insert the second part into the HTML code of your web page/document at the position where you want the link to jump to. You may have to experiment with the positioning of the second part of the jump to link to get it to jump to where you want it to.
The results as viewed on a web page	How to make an email link
A "View My Other Auctions" link for eBay members
The HTML Code	Substitute your eBay user name in place of the red X's. View my other <A HREF=HTTP://cgi3.ebay.com/aw-cgi/eBayISAPI.dll?MfcISAPICommand=ViewListedItems&userid=XXXXX>auctions</A> Go to the practice board and try the above code.
The results as viewed on a web page	View my other auctions
Making an image file into a clickable link
The HTML Code	<A HREF=HTTP://www.e-pixs.com/links.html> <IMG SRC=http://www.e-pixs.com/pics/epixs3_small.gif BORDER=0></A> If you don't include the BORDER=0 attribute, there will be a blue border around the image file to indicate that it is a hyper link like the example below right. Go to the practice board and try the above code.
The results as viewed on a web page

Quick Start
What is HTML?
Text and Fonts
Using Images
Making Links and Mailto Links
Making Lists
Tables, the key to well designed HTML documents
Examples of Tables
Color Chart by Name
Hexadecimal Color Chart

Practice board

The Joy of HTML

Making Links and Mailto Links