Hyperlink – Linking your web pages all together

Any object such as text, graphic images etc. that leads us to a new page on the web is called a link. Links can point to a page on our site or to a web page on another site. In this lesson we will learn how to make links.

Text links Creating a text link is an easy task. We will use <A> </A> tag to do this. As before we will need extra parameters from this tag. Look at example below :

Example: <HTML> <HEAD> <TITLE>Example</TITLE> </HEAD> <BODY> <A HREF=http://www.computereducationworld.com>Click here to visit Computer Education World</A> </BODY> </HTML>

Above code will create a link that clicking on it will send the user to Yahoo website. We have used HREF parameter to specify destination web page. Text between <A> and </A> is link text which user will click on it to go to destination page.

Image links In previous section we used a text as a link point. It is possible to use an image instead of text. To do this, you must replace link text between <A> and </A> with an <IMG> tag that displays an image file.

<HTML> <HEAD> <TITLE>Example</TITLE> </HEAD> <BODY> Click on below picture to visit my homepage. <A HREF="http://www.computereducationworld.com"> <IMG SRC="me.gif"> </A> </BODY> </HTML>

In above example clicking on picture will bring surfer to the address of <A HREF=".."> tag. If you see the result in a browser you will notice a blue border around the picture. This blue border ais dded to image because it is a default for image links. If you don't want this border, use border=0 parameter.

Example: <HTML> <HEAD> <TITLE>Example</TITLE> </HEAD> <BODY> Click on below picture to visit my homepage. <A HREF="http://www.computereducationworld.com"> <IMG SRC="me.gif"> </A> Without link border : <A HREF="http://www.computereducationworld.com"> <IMG SRC="me.gif" border=0> </A> </BODY> </HTML>

Email links If you have surfed web for a while you have seen links that when you click on them your email program starts a "compose new message" window that its receiver address is entered from web page . This email address is the address you want email to be sent to. Look at example below to see how you can make a link to an email address.

<BODY> Click on below link to send an email to me <A HREF="mailto:xyz@yahoo.com"> Email Me </A> </BODY>

It uses a "mailto:" string before desired email address to convert it into a link address. If you want, you can use a subject for the email. This example will show you how to do this :

Example: <HTML> <HEAD> <TITLE>Example</TITLE> </HEAD> <BODY> Click on below link to send us your comments . <A HREF="mailto:xyz@yahoo.com?subject:comments about your site">Email Me</A> </BODY> </HTML>

Just know that some browsers and email programs do not support subject in email links.

Lists There are times that you want to insert items related to a subject in list form in your web page. HTML provides you with tags to do this. <UL></UL> tags are first choice of these tags.

Example: <HTML> <HEAD> <TITLE>Example</TITLE> </HEAD> <BODY> This is a list of subjects covered in this lesson : <UL> <LI>Text Links <LI>Image Links <LI>Email Links <LI>List of Items </UL> </BODY> </HTML>

Result page will display list items in separate lines started with a small bullet. You see that we have entered list items started with a <LI> tag between <UL></UL> tags. <UL> tag is a part of list tags. If you want the items to start with numbers instead of bullets, you must use <OL></OL> tags instead of <UL></UL> tags.

<OL> <LI>Text Links <LI>Image Links <LI>Email Links <LI>List of Items </OL>

Be sure to write down codes in a file and view it with a browser.

Post Comment