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.<BR><BR>
<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.<BR><BR>
<A HREF=”http://www.computereducationworld.com“>
<IMG SRC=”me.gif”>
</A>
<BR><BR>Without link border : <BR><BR>
<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 <BR>
<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 .<BR>
<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.