Step 13 – Links

Last update: February 16 2019

Nothing is as important as linking on a website, otherwise known as hyperlinking.

In this step, you’ll learn to create an HTML hyperlink:

And please, whatever you do with the knowledge you are about to gain, try to avoid saying “click here” in your text links. Thanks!

Add A Link To A Website In HTML

Let’s add a link to my homepage:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center>
<img src="images/logo.gif" width="400" height="161" alt="logo" />
<h2>A short introduction</h2></center>
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i> and, now,
with her second company,
<i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>This is a short list of the services offered:
<ol>
<li> Web design</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domain registration</li>
<li> Keyword research</li>
<li> SEO</li>
<li> Ad campaigns</li>
</ol>
</p>
<center><p>Take a look at <a href="https://www.noratol.com/">her website for more
information</a>.
<br /><b><font size="4">Or get in touch</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</center>
</body>
</html>

The A-tag stands for Anker. It’s used to link to anything from pages, documents, media, phone numbers and e-mail addresses. The A-tag always needs to be closed.

HREF stands for “hyper referrer”. You write the location of what you want to link to in between the quotes.

Whichever text (or image) you’ve placed between <A> and </A> is what will be referring to the link. So, this will become the link. When you click this, the browser will look for the file specified in the HREF-attribute. In this case, <A HREF=”https://www.noratol.com“>, it’s a website on the Internet.

If you want to link a page in the same directory, the code will be:

<a href="next.html">Next feature</a>

Add A Link To An E-Mail Address

Let’s add a link to an e-mail address:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center>
<img src="images/logo.gif" width="400" height="161" alt="logo" />
<h2>A short introduction</h2></center>
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i> and, now,
with her second company,
<i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>This is a short list of the services offered:
<ol>
<li> Web design</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domain registration</li>
<li> Keyword research</li>
<li> SEO</li>
<li> Ad campaigns</li>
</ol>
</p>
<center><p>Take a look at <a href="https://www.noratol.com/">her website for more
information</a>.
<br /><b><font size="4"><a href="mailto:info@noratol.nl">Or get in touch</a></font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</center>
</body>
</html>

It’s pretty simple:

<a href="mailto:info@noratol.nl">

To create a link to an e-mail address you add the term “mailto:” to the HREF-attribute. By doing so, the browser will open the default mail client. A new message will automatically feature the e-mail address you have filled out after “mailto:”

You can also set a predefined subject, by doing this:
<a href="mailto:info@noratol.nl?subject=reaction to website">

Or a message:

<a href="mailto:info@noratol.nl?subject=reaction to website&body=I love the website.
Great job!">

HTML doesn’t have the ability to actually send an e-mail, which is why e-mail software gets opened. You’ll read more about this in my chapter about forms.

Step 13b – Open A Link In A New Tab

When you link to another website, the new location will usually be opened in the browser tab/window that is open. So, by default a click on your link will replace your web page with the new web page.

In case you don’t want this to happen, you can set a target window.

This is how:

<a href="https://www.noratol.com" target="new">Opens a website in new window</a>

<a href="https://www.noratol.com" target="_blank">Opens a website in new tab</a>

<a href="https://www.noratol.com" target="_self">Opens a website in current window</a>

<a href="https://www.noratol.com" target="_parent">Opens a website in parent window</a> (when not set, the parent window is the current window)

When you’re using javascript for the use of light boxes (pop up windows), the pop up is considered a child window. The main page below is the parent window.

However, when using child windows you’ll probably use your own names for them. You refer to your own window name as the target.

Step 13c-  Add Links To Files For Download

Of course, you can linking to all sorts of files in HTML. Rule of thumb here is, that the browser will handle all it can. If it can open the file you’re linking to, it will open it in a browser window. If it can’t open it, it will download the file.

Link an image:

<a href="image.jpg">Photo</a>

Link to software:

<a href="program.exe">Program</a>

will generate a download prompt.

Link a zip file:

<a href="file.zip">Zip file</a>

will generate a download prompt.

Step 13d – Jump To Another Section Within A Page

When you get a lot of content, it’ll help when people can jump from one section of a page to another. This is called a target link. You need two codes for this. First, the link itself:

<a href="#part2">Read more</a>

As you can see, this is not a URL, but a tag. This means, when the link is clicked, the page will get reloaded and the browser will look for the location of that tag elsewhere on the page. In order to get this to work, you need the tag placed somewhere.

<a name="part2">The rest of my text</a>

You add the tag with the NAME-attribute at the start of the section you want it to jump to. If you don’t want to mark it with text, you don’t have to. This will also work like this:

<a name="part2"></a>

Step 13e – How To Create A Link To Phone Numbers

Names and number used in these examples are random.

For Skype

You can create links especially for Skype users. Use the “callto” definition. The number will be recognized by Skype and called (replace the number with your own):

<a href="callto:01231234567">Call 01231234567</a>

If you replace the number by a Skype name, it will work too Replace skype.name the name of one of your contacts:

<a href="callto:skype.name">Call me on Skype</a>

Please test with your own Skype account or those of people you know!

For Mobile Sites and VOIP software

Other VOIP software and mobile phones have embraced another definition, which you can use to create links for phone numbers:

<a href="tel:01231234567">Call 01231234567</a>

Stap 13f – Link To An Instant Messenger

It’s possible to create links from your website to various chat or messenger programs. These links will only work when the visitor has the chat programs installed. Otherwise the links will generate an error.

In the following examples uses random names. These are not my Messenger names! So replace them with your own account names or account names of those you know!

WhatsApp

You can open WhatsApp for someone to message you by using this link (where you replace 01231234567 with your own number):

<a href="https://wa.me/01231234567">Send me a WhatsApp Message</a>

A link like this will open up WhatsApp for someone. If it’s through a browser, someone would need to activate the web version of WhatsApp.

To add a preset message, you add (and replace 01231234567 with your own number):
<a href="https://wa.me/01231234567?text=Hi%20how%20are%20you">Say 'Hi' in a WhatsApp
Message
</a>

Facebook Messenger

You can open the Facebook messenger with the following link (please release Facebookuser with your username or Facebook page name):

<a href="https://m.me/Facebookuser">Chat with me on Facebook Messenger</a>

MSN (Windows Messenger)

You can have people add you to their MSN contact list. The link to do so is:
<a href="msnim:add?contact=msnaddress">Add me to MSN</a>

Replace msnaddress with your own email address (your login name for MSN or Hotmail).

Your visitor need to have MSN open in order for this link to work!
Microsoft offers you standard buttons, including HTML code.

To open an MSN chat window, use the following code:

<a href="msnim:chat?contact=msnaddress">Send me a message on MSN</a>

Replace msnaddress with your own email address (your login name for MSN or Hotmail).

Step 13g – Make Links Accessible For Speech Tools

Adding the TITLE-attribute to your link makes it possible for speech tools to read your link. Also, make sure your images (buttons) used in links have the alternate text attribute. For a text link, this is what it looks like:
<a href="http://www.noratol.nl" TITLE="Nora's website">www.noratol.nl</a>

The value you place here will also show when you hover the link with your mouse.

When you use buttons, the link should look like this:
<a href="https://www.noratol.nl" TITLE="Nora's website"><IMG SRC="button.jpg" ALT="Nora's
website"
 border=0></a>

It’s rumored there could be an additional benefit to adding the TITLE-attribute. This could help with your search engine position.

Learn more HTML in Step 14. You’re doing well to come this far already!

Bookmark the permalink.

Comments are closed.