Links

A hyperlink has an opening <a> and a closing </a> anchor tags plus an attribute called href, which means hypertext reference. The attribute href goes inside the opening anchor tag with a URL(uniform/universal resource locator) value.


Link Syntax

<a href="URL">Link shown on the website</a>

The link can be in an image form or in simple text.


Text Link

To navigate to another website you will need the full website address. For example 'http://www.lillyrobot.com', this is known as absolute URL


<a href="http://www.lillyrobot.com">Lilly Robot Website</a>


Displays

Lilly Robot Website



Link to a webpage on the same website

We can create a link to a webpage on the same website. The full domain name is not needed, provided all the webpages of the website are in the same folder. This is known as relative URL.

<a href="table.html">Go to the table page</a>


Displays

Go to the table page

Link to a section on the same webpage

  1. Inside the opening tag of the section, that you want your viewers to view, insert id=name. The name should be related to the section. For example, if we wanted our viewers to view the section called Text Link then a suitable name value would be id='text'.

    2. <h3 id="text">Text Link </h3>


  2. Then we have to create a hyperlink, which would navigate our viewiers to the section called Text Link. The href attribute must state the same name as the id and it must have a hashtag# in front of the name.

    3. <a href="#text">Go to Text Link</a>

    Displays

    Go to Text Link



An Image Link

An image link can make a web page look more interesting. The image tags are placed between the start and end of the anchor tags. Clicking on the image below will take you to the Introduction page. Try it!


<a href="introduction.html">
<img src="images/tags.jpg" alt="HTML"/>
</a>

Displays

HTML

Thumbnail Images

Thumbnail Images are nice to have on a website especially, if you want to create a gallary full of images. Below we have created a thumbnail image of a water fall. The width and height of the thumbnail is 80px. Clicking on the thumbnail image will display a larger image of the water fall.


<a href="images/waterfall.jpg">
<img src="images/waterfall.jpg" alt="waterfall"
width="80" height="80" />
</a>


waterfall


Email links

An email link is handy to have if you want to communicate with your readers. The href attribute value would start of with 'mailto:' followed by the email address 'email@name.com'.

<a href="mailto:email@name.com">Email Link</a>


Displays

Email Link


Link Colours

The normal colours for unvisted link is blue and visited is purple. The colour changes when you click on it. Below is the html attribute for unvisited and visited links, which allows you to change the link colours.

The attributes link and vlink are
placed inside the start body tag.


<body link="green" vlink="yellow">

You will learn more about styling the links in CSS.



Target Attribute

The target attribute value "_blank" allows you to open a page in a new window or tab. The target attribute is placed inside the start anchor tag; the value starts with an underscore.

<a target="_blank" href="lists.html">Lists</a>


Displays

Lists

You might be interested to know that the other target attribute values are:

The above values are related to frames. Since frames are deprecated in HTML5, we are not going to discuss them.




Now do the Exercise!