Lesson 7: Building hyperlinks

❮ Previous Lesson Next Lesson ❯

Hyperlinks allow us to browse to another section of a web page view an in-line image, another page within a website, or another website on the Internet. In this lesson, we will show you how to build hyperlinks on a web page.

There are three basic types of HTML links, namely the text link, graphical link and email links.

7.1 Text Link

The element for creating a text link is the a(anchor) element and the attribute to specify the linked source is href. The syntax for linking to a local file is


<a href="filename">text</a>

and the syntax for linking to another website is

<a href="URL">Web site URL </a> .

7.2 Graphical Link

The element is the same, but use an image in the place of text.

<a href="filename"><img src="image.jpg"></a>

7.3 Email Link

This link allows the user to email the person whose email address is specified in the link. The syntax is <a href="mailto:[email protected]">Email Me</a>. Now, copy and paste the codes below into your notepad and save the file as link.html.

<!DOCTYPE html>
<html>
<head>
<title>Links </title>
</head>
<h1>This page contains various types of link</h1> <hr>
<body background="back.gif" link="blue" alink="green" vlink="red">
<a href="image1.gif">Click to view image</a> <br>
<a href="graphic.html">Click to view this web page</a> <br>
<a href="http://www.yahoo.com">Yahoo!, the search engine</a> <br>
<a href="http://www.vbtutor.net">Visual Basic Tutorial</a> <br>
<a href="image3.jpg"><img src="image2.gif"></a><br>
<a href="http://www.htmltutor.org/"><img src="image1.gif"></a>
<hr> <center> <a href="mailto:[email protected]">Email Me</a> </body>
</html>

Note: link="blue" specified within the tag means the link text will appear blue and vlink=red means the link text will appear red after a user has clicked on it(vlink actually means visited link). This is yet another attribute called alink which means an active link that shows the color of the link text when a user is clicking on it. The title attribute provides the screen tip for the user when the mouse pointer is placed over the link. Click on link.html to view the output.

❮ Previous Lesson Next Lesson ❯