31 Deerpark Road
Ballymena, BT44 0DP
02895 811 999
info@ni2u.co.uk
support@ni2u.co.uk

Using Links in HTML

Using Links in HTML

Using Links in HTML

The net wouldn’t be anything if it wasn’t for text links. Website links, or one-way links, are what help to make the web, well, the web. They are the connecting method of obtaining all the trillions and trillions of pages and posts which saves us from typing in the path to each and every single page feasible. In this tutorial, you will learn how to add a hyperlink within your project and control its actions.

Start-up

If you not already done so, open notepad and save it as links.html. Now locate your saved links.html document, double click and open. It will be a blank page.

If you are using NI2U Hosting services you can do this by going to the file manager – public_html and create a new file.

By the way we offer dedicated servers, as well as cloud hosting at unbeatable prices!

Step 1.

The first thing we’ll need stands out as the basic mark-up of a site. It will be relatively empty at first, having said that we will leave that to your own imagination.

Copy the following simple mark-up to have and save it as links.html page:


<html>
<head>
<title>HTML Links</title>
</head>
<body>
</p>
<div><a href=""></a></div>
<p>
</body>
</html>

Notice that we’ve an opening and closing “a” tag with a hyperlink reference set to empty quotes. Note: all links will begin with <a href=” Within these quotes goes the link to your own file or the external directory or site of choice.”> before closing the “a” tag again like this </a>.

Now copy / paste, save and view the file below to your links.html.

<html>
<head>
<title>HTML Links</title>
</head>
<body>
</p>
<div><a href="https://www.ni2u.co.uk"> NI2U Solutions </a></div>
<p>
</body>
</html>

In the above case, we placed the link to our website’s NI2U Solutions. Since it will be an external directory, we placed the full path within the quotes; then again, if it’s a file within the same directory as your index, you are able to simply put the relative path of the file, since everything is internal. Say you wanted to reference a page within that directory; you would place directory/pagename.com within the quotes. The actual wording a person sees is placed between the opening and closing tags, as offered in the computer code above.

We stand behind NI2U Solutions along with their service team. They offer dedicated servers, and they are now offering cloud internet hosting!

Step 2.

Now say you wanted to open the link within your own specified way, it is possible to spot the target attribute to _New, _Blank or _Same. The _New value will give it a new page to load on, _Blank will give it a blank page and _Same will open the link on the same page as the one you are currently on. Here we display the _Blank value for the Target attribute.

<html>
<head>
<title>HTML Links</title>
</head>
<body>
</p>
<div><a href="https://www.ni2u.co.uk" target="_blank">NI2U Solutions</a></div>
<p>
</body>
</html>

In this case we have amended the link to open in a new window. This is done simply with  target=”_blank”. The complete link now is as follows… <a href=”https://www.ni2u.co.uk” target=”_blank”>NI2U Solutions</a>.

No Follow

There are more options available, however the last option we are covering today is rel=”nofollow”. This is a directive championed by Google and is excatly as it sounds. It is telling the search engine spider to not follow this link. Google explains it here.

<html>
<head>
<title>HTML Links</title>
</head>
<body>
</p>
<div><a href="https://www.ni2u.co.uk" target="_blank" rel="nofollow">NI2U Solutions</a></div>
<p>
</body>
</html>

This does not change the link in appearance, but it does tell Google not to pay importance to this link. Situations you may want to use therel=”nofollow” directive are when you don’t have untrusted content, paid links or to prioritise your crawl.

A few Last Words…

Web links are not limited to being phrases; they could be images as well. We discuss using images as web links in a future tutorial.

Thank you for reading and join us next time for additional HTML tutorials.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.