Table of Contents
Image links in HTML
In our previous post we have seen how to create hypertext link using text. In the similar way you can link images to a link which take the control to other page. Now, we will learn how to use images to create hyperlinks.
It is simple to use an image as hyperlink. An <img> tag is used to insert an image in our code. Images are not actually inserted instead they are linked. The <img> holds space for a referenced image.
<img> tag has two attributes.
src
It specifies a path to an image.
alt
It specifies some text if the image by some reasons is not showing in the result.
We just need to use an image inside hyperlink at the place of text. Let us take an example.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink of an image</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://programmingtutorial.in/" target = "_blank">
<img src = "image url" alt = "Programming tutorial" border = "0"/>
</a>
</body>
</html>
Setting height and width of image in HTML
You can adjust height and width of an image which you are using in your code. This can be easily achieved by image attributes height and width. Let us now write a simple HTML code to show how height and width can be applied to an image.
<!DOCTYPE html>
<html>
<head>
<title>Setting height and width of image</title>
</head>
<body>
<p>Click following link</p>
<img src = "D:\Programming Tutorial\logo.jpg" alt = "Programming tutorial" height="150" width="150"/>
</a>
</body>
</html>
Setting border of an image in HTML
You can set border of an image which you are using in your code. This can be easily achieved by image attribute “border”. You have to mention the width of border while using it in your code as border=”2 or 3 or 4″ as per the width you want to set in your code. The thickness of border is in pixels. Let us now write a simple HTML code to show how border can be applied to an image.
<!DOCTYPE html>
<html>
<head>
<title>Setting height and width of image</title>
</head>
<body>
<p>Click following link</p>
<img src = "D:\Programming Tutorial\logo.jpg" alt = "Programming tutorial" border="2" height="150" width="150"/>
</a>
</body>
</html>
