United State: +1 (410) 202-8855 | India +91 708-282-5481 hi@satyapsharma.com

A hyperlink (or link) can be found in various forms in nearly all web pages. Website designers use a word, phrase, picture or graphic element as a link, which has been tagged in HTML command containing the specific address of another location. When you move the cursor over a link, (either word or graphic) the arrow will change into a hand. By clicking on it you will be taken to another location within the same document, in another document or somewhere else on the WWW.

Basically, there is one tag format in HTML to create links. Once you’ve learnt it you will know how to create links within the same page, links to another page as well as make pictures into links.

The HTML code for a link is very simple and looks like that:

<a href=”url”>Text</a>


– a – stands for anchor. <a> is a tag which defines a hyperlink;

– herf – stands for Hypertext Reference and is an attribute that specifies the destination of a link

– url – is the full address of the link

– Text – is the text that you want to appear on the page.

– /a – ends the entire link command

If you want to make a picture into a link, the code will be as follows:

<a href=”url”><img src=”picture.jpg”/></a>


– <img src – img is a tag for an image and src is an attribute which indicates its source;

– Picture.jpg – is the picture you want to appear as a link

Changing links colour

By default, there are specific colours used for links on websites:

– Blue and underlined – for an unvisited link

– Purple and underlined – for a visited link

– Red and underlined – for an active link

The default colours can be changed to match your website design. Links can be styled in CSS, which is used to define different elements on the web page, such us text colours, link colour, page background etc. Links can be styled differently depending on their state.

You can use CSS inline, like in HTML or include style sheet within HEAD tags, as shown below:


<STYLE type=text/css>

a:link {COLOR: red;} /*The color of the link*/

a:visited {COLOR: #800080;} /*The color of the visited link*/

a:hover {COLOR: green;} /*The color of the mouse over or ‘hover’ link*/

a:active {COLOUR: #800080;} /*The color of all the other text within the body of the page*/


This is the simple way of creating HTML hyperlinks and changing its colour. Try it yourself.

Source by Bart Dom