Web Design Tutorials
- Make A Simple Page
- Make A Simple List
- Make A Link
- Make An Email Link
- Embed An Image
- Embed A Flash Movie
- Make A Table
- Hide Content
- Error Check Your Page
In This Tutorial, I Show You How To Make An Email Link
One of the nice things about XHTML is how easy it is to make an email link.
If you already know how to make a page link, then you're just about there.
There is one thing that I caution you to do to and I'll get to that later on.
Let's Break This Down
Suppose I want to make an email link to bud@joyofcode.com, which, as it happens, is my email address.
Ready? Here's how to do it:
Code View
<a href="mailto:bud@joyofcode.com">bud@joyofcode.com</a>
Browser View
But You Need To Know 2 Other Things
Thing 1: Let Your Web Visitor See The Actual Email Address
Notice how you see the email address - bud@joyofcode.com - on the page itself. Yes, I know it might not look pretty, but it sure is practical.
Why's that?
If I had set up my email address link as Bud Kraus, it's entirely possible that it would not work for many people. If your visitor is using a web based email program like gmail or Hotmail, then when the address is clicked on, nothing much will happen. That's a bad thing.
Showing the actual email address as the link, gives the visitor the option of copying and pasting the address into the email program if all else fails - and all else usually fails.
Thing 2: Use Cascading Style Sheets To Style Your Email Link
Want to lose that plain old blue-eyes color that most browsers, by default, use for your links?
In the above example, I just let the browser decide what color the email link should be.
Pretty boring.
Enter CSS to provide dashing style to your web page. Below I did a bunch of "CSS-y" things to style my email address. Take your mouse and make sure to hover over this:
I know. You want me to tell you how I did this. You'll just have to send me an email and ask!!
Go Ahead, Try It Yourself
Give it a try. Copy and paste
<a href="mailto:bud@joyofcode.com">bud@joyofcode.com</a>
into the box below or feel free to write your own email link. Then click the "GIVE IT A TRY" box and check it out.
Test Your Code In This Box - The Code Tester
Want To Learn More?
You're at the right place because I will teach you this and much more, one-on-one, in my online web design Workshop, Introduction To XHTML And CSS. Now here's the good news. You can start right now!!
If you want to learn more about CSS, then sign up for my Practical CSS online workshop launch list.