Mailto Email Link and HTML Hyper-Links

Creating Email and HTML Links

Below is a quick tutorial with examples on how to create hyper-links throughout your web site. We will learn to do web site links and email links.Links occur in the <a href> tag, which encloses the destination URL of the hyper-linked text (e.g. <a href=”http://domain-url.com”>Hyper-Linked Text</a>). To start off, let’s do email first to get them out of the way.

Email Link

When you want a link that can allow the viewer to send you an email, use the following:

<A href=”mailto:yourname@host.com”>

So the following code:

<HTML>

<HEAD><TITLE>Links</TITLE></HEAD>

<BODY>

<a href=”mailto:yourname@host.com”>yourname@host.com</a>

</BODY>

</HTML>

Produces the following page:

HTML Hyper Link

When the viewer clicks on the email address, their outlook window pops open a New Email with your address in the To: box. This is not necessarily desirable anymore, since many people do not use outlook express. However, people using web-based email must cut-and-paste email addresses anyway, so it doesn’t hurt if it’s linked. And it may save some people some time.

Hyper-Link

Now let’s learn to link to another page. Let’s say you want to link to WebDesignDevelopment.org. You use the <A HREF> tag to do so. You would use:

<A href=”http://www.webdesigndevelopment.org”>Click Here to go to WebDesignDevelopment.org</A>

Remember, you must terminate the link using the </A> tag. If your page is index.html (the standard first-load page on a web site), and you have a page called links.html, you can link to it in two ways. First, you can use the absolute address, which is the safest way:

<A href=”http://www.webdesigndevelopment.org/links.html”>

Or if it is in the same folder as the index.html, you can just use

<A href=”links.html”>

If it is in a folder called “otherhtml”, you could link to it using:

<A href=”otherhtml/links.html”>

Yep, it’s that easy to create navigable hyper-links throughout your web site!



If you like "Mailto Email Link and HTML Hyper-Links,"
please consider linking to this article:

Leave a Reply




(spam protection)
Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Subscribe without commenting

« Previous
« HTML Tags List and Examples | Up Top | Website Interface And Usability »
Recent Comments
reverse cell phone lookup: Thank you for this nice post you have given us here. Certainly is really a great resource...
cell phone number lookup by name: Thanks for this great site which is very useful to my mobile phone number search...
Web Design: Web design is the process of designing, developing and managing exceptional standard based websites — a...
reverse cell phone lookup: Thank you for this nice post you have given us here. Certainly is a great resource that...
mobile phone number lookup: Thanks for this great site that is very useful to my mobile phone number lookup page
name phone number lookup: Thanks for this great site that’s very useful to my phone number lookup page
SiteInfo: Your site has automatically been added to siteinfo, take a look at what information we have on your site...
amorenlinea: This is the right blog for everyone who really wants to find out about this topic. You realize a whole...