CSS & HTML

How to do a HTML link – whether linking to a webpage, email or telephone number

Learning some basic HTML can give you more control over your website

This article covers three things:

  • Linking to another website or webpage
  • Making an email address clickable
  • Making a phone number clickable on mobile phones

 Linking to another website or webpage

his is the most straightforward type of HTML link. Most template systems do this for you – i.e. you don’t actually need to learn HTML, for example in WordPress you just click on this link …

.. and WordPress will make the HTML code automatically for you

If you are writing your own code, then to link to another page within your website, you need code like this:<a href=”contact.php”>Contact Us</a>

… which looks like this on screen;

Contact Us

… clicking on the text Contact Us would link to the contact.php page.

To link to a link on a page in an external website, like www.facebook.com, you need to remember to include the http:// part before it, like this;&lt;a href=”<a class=”vglnk” href=”http://www.facebook.com/” rel=”nofollow” style=”color: rgb(194, 28, 66); text-decoration: underline; transition: all 0.5s ease 0s;”><span>http</span><span>://</span><span>www</span><span>.</span><span>facebook</span><span>.</span><span>com</span></a>”&gt;<a class=”vglnk” href=”http://www.facebook.com/” rel=”nofollow” style=”color: rgb(192, 27, 63); text-decoration: none; transition: all 0.5s ease 0s;”><span>www</span><span>.</span><span>facebook</span><span>.</span><span>com</span></a>&lt;/a&gt;

… which looks like this on screen;www.facebook.com

… or this;&lt;a href=”<a class=”vglnk” href=”http://www.facebook.com/” rel=”nofollow” style=”color: rgb(192, 27, 63); text-decoration: none; transition: all 0.5s ease 0s;”><span>http</span><span>://</span><span>www</span><span>.</span><span>facebook</span><span>.</span><span>com</span></a>”&gt;Facebook&lt;/a&gt;

… which looks like this on screen;

Facebook

 Making an Email Address be a Link

First of all, it’s important to note that this only works for your website visitors using a desktop email client like Outlook or Thunderbird (generally these are office workers with a business email address) and does not work for webmail like Gmail or Yahoo (generally these are personal email addresses).&lt;a href=”mailto:info@zonua.ie”&gt;info@zonua.ie&lt;/a&gt;

… which looks like this on screen;

info@zonua.ie

Note that there are no spaces in the telephone number.&lt;a href=”tel:0035317778888″&gt;01-777 88 88&lt;/a&gt;

… which looks like this on screen;01-777 88 88

Note that this only works for mobile phones.

Any questions or requests – Contact Us đŸ˜‰ or look for zonua on any of the Social Networks, especially Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *