Author Marlinda1
2016
5
Premium
Rank 418

Hey there!

In this tutorial, I'm going to be showing you how to create links that take actions other than going to another site link. Please be sure to read all of the information below as well as watch the video in full to get a clear understanding of how these processes work.

The main link actions that I'll be showing you are:

  • Email
  • Call
  • Link To A Location on the Same Page

This will take a bit of coding but I challenge you to not feel intimidated by this fact. It can seem a little bit overwhelming but the concepts are pretty straightforward. Make sure that you have a notepad handy to take notes after you have watched the video.

Then rewrite the code a few times. Say out loud what each code means. This will help your brain to gain a clearer understanding of the new information and actually retain it better.

Don't worry about making mistakes and feeling like a newb either. We all had to start from not knowing and progress can't be made without making mistakes. The important part is the learning process. Before you know it, you'll have it down and not even believe you ever struggled in the first place!

Ok, that being said, let's get started!!

Basic HTML Link Code

The basic structure of HTML code for links is as follows:

<a href="yourtarget">Your Link Text</a>

Action Specific HTML Code

Depending on the action that you want to occur, you will use the below terms:

  • Email: mailto
  • Call: tel or callto (Skype)
  • Link to Same Page Location: <a href> + <a name> tags
    • <a href="#yourphrase">click here now.</a>
      <a name="yourphrase"></a>

Email Link

In order to create an e-mail link, lets talk about a few important factors and syntax.

First of all, we need to consider the main elements of an email. These are:

  • To, cc, bcc
  • Subject
  • Body Text

Secondly, we need to define a couple of codes that we are going to be using. These are:

  • & - start a new character reference
  • &amp - and; in other words continuing to add something with the prior information
  • %20 - space; notice that the '%' comes first. This IS NOT the same as twenty percent

Here's how the HTML code for emailing is put together:

  • Basic Setup:
    • <a href="mailto:youremail@yoursite.com">Your Text</a>
  • All Fields:
    • <a href="mailto:youremail@yoursite.com?cc=name@site.com&bcc=name2@site.com

      &subject=Your%20Subject

      &body=Body%20text%20goes%20here">Your Text</a>

Note that I added the space in the last version for clarity purposes. HTML doesn't recognize white space and in some cases leaving the white space may cause rendering issues so it's best to delete it once you've completed filling out each field.

Also keep in mind that you can customize this as you desire. For instance, you can include only the subject and e-mail addresses or omit the subject and include body texts. The choice is up to you. Simply delete the sections that you do not want and keep the sections that you do want.

Phone Link

Phone links are more straightforward because you're only variable is the phone number. The link will either open in your dialer if you're on a phone or Skype if you're on PC and have it setup to do so.

The HTML code for phone linking is <a href="tel:+12345678900">Click To Call Us Today!</a>

You can also replace tel with 'callto' if your visitors are more inclined to use Skype, however tel works fine.

Link to Location On The Same Page

In order to link to a location on the same page, you first need to define your target location. When you have, you are going to need two tags.

  1. Your link tag
    1. <a href="#linktotarget">Your Text</a>
  2. Your marker tag
    1. <a name="linktoyourtarget"></a>

There are two things that you need to keep in mind with these tags. The first being to note that the text link uses a hashtag '#' before the target word while the actual marker does not use one. The second thing to note is that there is no text associated with the marker code.

Wow! That's a lot of information to grasp and I hope it all made sense. You've learned so much in such a little time. Now you know how to create links that forward to:

  1. a blank email
  2. a pre-filled email
  3. calling from a cell phone
  4. calling from Skype
  5. a location on the same page as the link

Great job! Give yourself a pat on the back because you deserve it for coming this far. If you're still struggling to grasp this information, don't worry. The best thing to do at this point is to put it down and come back either in a couple hours or tomorrow. Don't worry, it took me a lot of stress to understand all this coding stuff too!

As always, if you have any questions, comments, or other feedback, feel free to leave them in the comments box below. If you know of any other linking tricks, please share them with us as well in the comments.

Take care and see you next time!

Marlinda

PS. Here are some other training videos you might like:

Join the Discussion
Write something…
Recent messages
eosegueraf Premium
Thanks for the information Marlinda. It was very helpful.
Greetings from México. I am following you now.
Eugenio.
Reply
Triblu Premium
Great tutorial Marlinda!
Tagged for sharing and "Liked".
Reply
Marlinda1 Premium Plus
Thanks girl! I'm glad you enjoyed it :)
Reply
LorrieP Premium
That is a great training and helpful for the WA community. Thanks for sharing.
Reply
Marlinda1 Premium Plus
Hey Lorrie, I'm glad you found value in this information :) tfw!
Reply
Urolin1981 Premium
Hi! Marlinda1,
You fielded a awesome example of effective learning, which I will surely imitate it. Thank you a lot. Appreciate your generosity in sharing.

Best wish to success,


James
Reply
Marlinda1 Premium Plus
Hey James, I'm glad you found value in this information!
Reply
Labman Premium Plus
I'm curious as to what the link to location is all about. ( I already know about this process but don't see why you have included it in this tutorial)
Reply
Marlinda1 Premium Plus
I included the link to page location because some people might not know that it is possible to do it. It also works differently than regular links in that you have to set the target location. So it might not be a link to contact method but it's still a different linking mechanism.

Just because you know something doesn't mean everyone else does and that's exactly why I figured I might as well mention it just in case. I don't really understand why you think I shouldn't include it in this tutorial but I hope this explanation clarifies it for you.
Reply
Top