Basic Links (HTML <a> Tag)

with No Comments

There is a lot of information on the Internet on how to write html and do links.  However, little information is given as a real beginners guide, without all the gobbledygook, jargon, and special code names.  So when my good friend, Dr. Mike, asked me to help him learn how to link in email, blogs, etc. it gave me the idea for this post.

An Absolute Beginners Guide

I will try to assume nothing.  This is a very simple instruction and will cover:

  1. How to make a basic “link”, also called an “<a> Tag” (say “A Tag”)
  2. How to use a link in a blog post or blog comment.
  3. How to use a link in an email.
  4. How to use a link in an email signature.

So let’s get started…

HTML Terms

It may help us to define a few terms.

HTML = HyperText Markup Language

HyperText = Websters dictionary says Hyper means “extremely active” So “HyperText” would be extremely active text. In the case of a link or A Tag, this text gets from one text to another text in a big hurry!

Markup Language = For hundreds of years printers used “Markup Language” or “Tags” to show where things should be, like the title or a new paragraph. In HTML these tags tell the computer how to display information or what to do with it.

A as in Anchor

The A Tag gets it name from the A in Anchor.

Think of a ship anchor – it ties the ship to a location on the ocean floor. Well an HTML anchor ties one text to a HyperLinked Referance (a location on the Internet).   The place it will go to.  We call this the “href

The Link

Dr. Mike

In the link above I want to point out three things…

  1. The text – “Dr. Mike”
  2. The title – “Healthy Living by Dr. Miguel B. Mercado, Jr.”
  3. The href – “http://health.m143.net/”
  • The text is what you see all the time.
  • The title is what you see when you point your mouse at the text.
  • The href is where you link to (the new page) you get when you click the text.

The Syntax

The way you write the above code is like this:

[php]<a href="http://health.m143.net/"
title="Healthy Living by Dr. Miguel B. Mercado, Jr.">
Dr. Mike
</a>[/php]

Or it could all be on one line like this…

[php] <a href="http://health.m143.net/" title="Healthy Living by Dr. Miguel B. Mercado, Jr.">Dr. Mike</a>
[/php]

Let’s make it shorter (I will change the title attribute) so we can see the parts easy…

Dr. Mike

Notice the title now says: “Health by Dr. Mike” (point your mouse at the new link)

Here is the shorter link code or A Tag:

[php] <a title="Health by Dr. Mike" href="http://health.m143.net/">Dr. Mike</a>
[/php]

The Main Parts of the Link

The main parts of the A Tag or Link are shown in red:

The opening A Tag ~ <a>

<a title="Health by Dr. Mike" href="http://health.m143.net/">Dr. Mike</a>

This is the start of the A Tag or Link

The closing A Tag ~ </a>

<a title="Health by Dr. Mike" href="http://health.m143.net/">Dr. Mike</a>

This is the end of the A Tag or Link and shows the return to normal text.

Most failures are caused by people forgetting the closing A Tag

The href attribute ~ href=”the href

<a title="Health by Dr. Mike" href="http://health.m143.net/">Dr. Mike</a>

The href attribute contains the Internet address you want to link to.

The title attribute ~ title=”the title

<a title="Health by Dr. Mike" href="http://health.m143.net/">Dr. Mike</a>

The title attribute contains the text that will be displayed when you point your mouse at the link text.

The title attribute is also used for text readers for the blind.

On a web page the title attribute is also used by Google for SERP Rank (Search Engine Results Page Rank)

The link text ~ Dr. Mike ~ in this case

<a title="Health by Dr. Mike" href="http://health.m143.net/">Dr. Mike</a>

The link text is what people will see and click on.

How to Use a Link!

Now that we have constructed our link and it looks like this:

[php] <a title="Health by Dr. Mike" href="http://health.m143.net/">Dr. Mike</a>
[/php]

The rest is a simple matter of cutting and pasting it into our email, weblog (blog) or add it to your email signature box so that it is at the bottom of each of your outgoing emails!

For example, say you had a line that said,

Visit my website, Health with Dr. Mike, to get more information.

You could change it to say:

[php]Visit my website, Health with <a title="Health by Dr. Mike" href="http://health.m143.net/">Dr. Mike</a>, to get more information.[/php]

The above would look like:

Visit my website, Health with Dr. Mike, to get more information.

A little change like this:

[php]Visit my website, <a title="Health by Dr. Mike" href="http://health.m143.net/">Health with Dr. Mike</a>, to get more information.[/php]

Would look like:

Visit my website, Health with Dr. Mike, to get more information.

WordPress

Most WordPress Blog comment boxes will usually give you this hint

<a href="" title="">

This is just a hint – a reminder of what you need. More completely it would look like this…

<a href="the href" title="the title">the link</a>

WARNING

Warning: Detail is VERY important. If you were forced to have your left leg amputated due to a car crash, you would not want an instruction to the surgeon to say “cut off a limb!” He might cut off your arm! Not even an instruction that said “cut off a leg” would do, which leg? You would want the instructions to tell exactly which leg, the left one, and exactly where to cut (above the knee, below the knee, above the ankle. etc.)!

The same is true in your link! The computer needs everything to be exactly the way it should be.  Even the double quot marks and spaces should not be changed, unless you know exactly what it will do!

In our link below, the only things you should change are in blue. The black should remain EXACTLY as it is.

<a title="Health by Dr. Mike" href="http://health.m143.net/">Dr. Mike</a>

Every space that is touching anything black is needed and should not be changed!

More Examples

These should be on one line with a space. They are presented here on two lines to make it easy to read…

Francis Kong

<a title="Francis J. Kong"
href="
http://franciskong.acts-29.net/">Francis Kong</a>

=====

New LipHe

<a title="New Life ~ New Health ~ New LipHe"
href="
http://newliphe.org/">New LipHe</a>

=====

FGBMFI.Net Working!

<a title="Full Gospel Business Men's Fellowship International"
href="
http://fgbmfi.net/">FGBMFI.Net Working!</a>

ENJOY!

Leave a Reply