Html Tutorial Lesson 7: Building Links

Share

[Lesson 6]<<[Contents]>>[Lesson 8]

Links allow us to browse to another section of a webpage, to 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 links in a webpage.

There are three basic types of HTML links, namely 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>

and

<a href=”URL”><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:lliew@vbtutor.net”>Email Me</a>. Now, copy and paste the codes below into your notepad and save the file as link.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:admin@htmltutor.org">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.

[Lesson 6]<<[Contents]>>[Lesson 8]

Share