HTML Image Links

Image Links in HTML

OK, Now you have learnt about links in HTML. You have also learnt about Images. It should be just a matter of seconds to create an Image link using the two markup elements in HTML. Here I will show you how.

Lets now revisit an HTML link.

• This link starts with an <a ..
• We specify the URL to be linked to as the attribute href of this anchor.
• We put some legible, easy to understand text in between the start and end tags on an HTML link. When user clicks on this "legible, easy to understand text" he is taken to the place specified in the href attribute.

Here is how a typical HTML link looks like.
Code
<a href="http://tutorialindia.com">
Visit Tutorial India
</a>
Output
Visit Tutorial India

Now notice the output displays the HTML link (Forget how it looks, for now. That has to do with CSS.)

See here that whatever we write in between the start and end achor tags, the same text is displayed as the text link. To create an HTML Image Link, all we have to do is to replace this text with the markup of an Image. That's it!

This has been illustrated in the example below.

Code
<a href="http://tutorialindia.com">
<img src="logo.gif">
</a>
Output

You are also free to do all the formatting in the world to your image! In the example below the image has been reduced in smaller size.

Code
<a href="http://tutorialindia.com">
<img src="logo.gif" height="20" width="60">
</a>
Output