Total Pageviews

Tuesday 16 December 2014

MAKING IMAGE AS LINK TO OTHER CONTENTS IN THE WEBPAGE

HOW TO CREATE LINK TO ANY CONTENT IN OUR PAGE AND NAVIGATION TO OTHER PAGES:


HYPERLINKS:

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers:



GENERALLY IN WEBPAGES:
  •  unvisited link is underlined and APPEARS in blue colour..

  • A visited link is underlined and  APPEARS in purple colour..


  • An active link is underlined and red

<A>: MEANS ANCHOR TAG WHICH IS USED TO LINK RELATED NY USING IT </A>


IN HTML HREF(hyper  link reference)  IS ONE OF THE ELEMENT....



*Making an image in to link is quite easier by make use of  href  element which is used to indicate the destination with anchor A as tag....*



Activating An Image: Turning An Image Into a Link

 I showed you how to create a hypertext link. What it did was create blue words on your page so someone could click on them and then jump to another site. Well, here we're going to set it up so an image becomes clickable or "active." The viewer would click on the image, instead of on the hyperlinked words, to make the hypertext link. I'll make a link to my home page using the image above. Here's the format:

<A HREF="http://www.google.com"><IMG SRC="homepage.gif" ALT="Home"></A>



we can create a link to any content in our webpage...

But it follows some attributes of appropriate..

like:


  • Target:is an attribute which to set the target of the to be opened in...it could be either 
  •  _blank
  • Top,
  • Bottom.
  • WE CAN LINK BOTH THE TEXT AND IMAGE AS LINK.



PROCEDURE TO CREATE  IMAGE AS A LINK:

<a href="url" target=""> <img src="url"> </a>

"here url mean the source address"
target attribute indicates where to open the image top,bottom or else in same page.....

//program to illustrating inserting image as a link:

//here i have indicated that href="as blank" you can specify your   url to be directed or page u want...

ex:<a href="e:\1.html"><img src="5.jpg"></a>

<HTML>

<HEAD>
<TITLE>MY WEB</TITLE>
</HEAD>
<BODY>
<a  href="blank"  target="top"><img src="C:\Users\Public\Pictures\Sample Pictures\1.jpg" height=100 width=100 border=2></a>

                                                                  click on the image to open the next link

</BODY>

</HTML>


output:
PROCEDURE TO CREATE  TEXT  AS A LINK:

it is similar to insertion of image As link...
just u need write the text in between anchor tag...

<a href="url">some text</a>

//program to illustrating inserting image as a link:

<HTML>
<HEAD>
<TITLE>MY WEB</TITLE>
</HEAD>
<BODY>
<a href="blank" target="top">click on the image to open the next link</a>
         
     //here i have indicated that href="as blank" you can specify ur   url to be directed or page u want...


</BODY>

</HTML>

output:

conclusion:


Thus by simple href element with anchor tag ...link to pages and images  can be created.....