How to insert image hyperlinks, height, width of image in HTML?

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 height and width of image in HTML, www.programmingtutorial.in

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>