Tuesday 22 January 2013

Image link in html

How to link an image by using anchor tag in an HTML??

code:


<html>
<title> image link </title>
<body>

<p>Create a link of an image:

<a href="http://www.google.com" target="_blank">
<img border=4 src="e:\google.jpg" alt="google link" width="200" height="100">
</a>


<p>No border around the image, but still a link:
<a href="http://www.w3schools.com">
<img border="0" src="e:\123.jpg" alt="w3schools web page" width="100" height="130"></a></p>

</body>
</html>

Explanation::

write this code in notepad and save this as with ".HTML or .HTM" in any location. IT will be saved as a web browser document. And then go to that location and open that web browser. Then a window will be opened as shown below
     
Then click on images shown in the above figure. Then the related linked web pages will be opened for you.

1. If you click on first image then "google page" will be opened.

2. If you click on second image then "w3schools" web page will be opened.


Code description:

<a>: This is anchor tag.It defines a hyperlink.
         A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.

         href: The href attribute species the destination of a link
           syntax: <a href="url"> link text </a>

         target: The target attribute specifies where to open the linked document.

<img>: In HTML, images are defined with the <img> tag. 
           The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

syntax: <img src="url" alt="some_text">
    
    alt:The required alt attribute specifies an alternate text for an image, if the image cannot
                be displayed
                The value of the alt attribute is an author-defined text:
    And the image tag has width , height an border are as its attributes


1 comment: