HTML Tutorial 08: Creating Email Links And Tool Tips


Welcome to your 8th HTML tutorial, in this tutorial we're going to finish up with talking about links. We need to cover two last things;

1.  How to make a link to e-mail address
2.  How to make something called tooltips, which is when you hover over a link a box pops up, showing tips of what the link is or anything pertaining to the link.

First, let's learn how to create a link to an e-mail address and this maybe useful on the "Contact Us" page.

Let's go ahead and create a link in our text editor, that says "Email TopCrix" that will be the text on the webpage. Now, what we need to do is to add the a or anchor tag, the href and the e-mail address but you don't just type the email address, we need to add emailto: before the email address

As illustrated below

So, let's preview and see what we have, you'll see a link with a text and if you click it, it will automatically open your default email app and trying to send a message to the e-mail address.

NOTE: for you to practice this, you need to preview through your browser because the text editor will only show you error.

The last thing I want to teach you is how to create one of those tooltips.

Let's create a basic link to Google. First of all use 2 line breaks <br><br> at the close tag </a> in other to shift the Google link to the next line (away from email link).

As illustrated below

But I think it will be a good idea if we hover over it a box pops up telling you some information about Google. Let's go ahead and learn how to do that.

You know I said tags need some attributes to know more information about that tag, not only does the a tag have the href attribute but also has a title attribute, if we take and set it equals to "Feeling Lucky"

As illustrated below

This is one of the tutorials we need to practice on a PC because we need to use mouse cursor to hover over it in other to see the function of this attribute but I guess you get the logic, in case you come across such in your text editor, just know it's the tooltip.

You can put more than one attributes inside a tag, just make sure they are not touching each other and has the same formula;

The attribute name e.g title
And set it equal to whatever you want

You now know everything about the link tags. See you in the next tutorial.

You can't wait to become a professional website developer? get ahead of others or would like to  request for the full video tutorial, join our WhatsApp Based Training or visit us today @Shop 9/11 Sower Plaza Asa-Dam road, Ilorin Kwara State.

You don't have time to learn but would love to have a fantastic website for your brand, check out our budget friendly beautiful website packages. Our web design service is awesome and affordable.

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Search