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:
- 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>
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
- 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
- & - 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:firstname.lastname@example.org">Your Text</a>
- All Fields:
- <a href="mailto:email@example.comfirstname.lastname@example.orgemail@example.com
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 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.
- Your link tag
- <a href="#linktotarget">Your Text</a>
- Your marker tag
- <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:
- a blank email
- a pre-filled email
- calling from a cell phone
- calling from Skype
- 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!
PS. Here are some other training videos you might like: