Images are an important part of the web. HTML is the language used to define, add, insert images in web applications and pages. HTML images are created with the <img> tag and provide some attributes for different cases.
Add Simple Image with src Attribute
First, we will start with a simple example where we will just an image by using <img> tags and specifying its location. src attribute is used to specify the location of the image on the server. Generally, the absolute path is provided like test.jpg or /images/test.jpg.
<html> <body> <h2>Simple HTML Image</h2> <img src="pic_trulli.jpg" > </body> </html>
We can see that this simple image does not seem pretty because we have not set any extra attributes which we will learn later.
Add Alternative Text with alt Attribute
Using images are very attractive and useful for user experience but if the image can not be loaded fro different reasons like network problem, server problem, image rename. Not showing an image is a big problem but we can show some text about the image which can explain it in detail. alt attribute can be used to show some text for the image problem. alt is the short cut for an alternative which is designed for image alternative. In this example, we will show the alternative text Some Holiday.
<html> <body> <h2>Simple HTML Image</h2> <img src="pic_truli.jpg" alt="Some Holiday"> </body> </html>
Resize or Set Size For Image with style, width, height Attribute
By default, images are displayed in their normal sizes with their own width and height. But we can resize or set a new size for the image where it will resize according to the given sizes. The original images original size will not change but only displayed in a different size. We will use some style attribute width and height attributes to set width and height. In this example, we will set different sizes like 42px,100px and 500px.
<html> <body> <h2>Simple HTML Image</h2> <img src="pic_trulli.jpg" style="width:42px;height:42px;"> <img src="pic_trulli.jpg" style="width:100px;height:100px;"> <img src="pic_trulli.jpg" style="width:500px;height:500px;"> </body> </html>
Show Border For Image
Image is also an HTML element and HTML elements have their borders. By default, the border will not be shown. But we can enable to show the obrder of the HTML image element with the border attribute. We can also specify the border thickness with a number. In this example, we will show the border with a thickness 3 .
<html> <body> <h2>Simple HTML Image</h2> <img src="pic_trulli.jpg" border="1"> <img src="pic_trulli.jpg" border="5"> </body> </html>
Add Images From Different Folders
Up to now, we have used the image names from the same folder of the web page. Alternatively, the images can be stored and served from different folders or URIs. We will just change the src attribute to the new URI like /img/pic_trulli.jpg , ../pic_turulli.jpg.
<html> <body> <h2>Simple HTML Image</h2> <img src="/img/pic_trulli.jpg" > <img src="../pic_turulli.jpg" > </body> </html>
Add Images From Other Web Sites/Servers
We can also add some images from other web sites or servers. In order to add an image from other web sites/servers, we have to provide the full URL of the image. In this example, we will use an image from the web site poftut.com.
<html> <body> <h2>Simple HTML Image</h2> <img src="https://www.poftut.com/wp-content/uploads/2019/08/img_5d5eb24e625d8.png" > </body> </html>
Add Image with A Link (Hyperlink/href)
By default, HTML image is used to show or display image. But in some cases for more interactive usage we may want to provide an image with a link where when the image is clicked given link will be open. We will use the <a> tag href attribute to surround the <img> tag where the provided URL will be opened when the image is clicked.
<html> <body> <h2>Simple HTML Image</h2> <a href="https://www.poftut.com"> <img src="https://www.poftut.com/wp-content/uploads/2019/08/img_5d5eb24e625d8.png" > </a> </body> </html>
Thanks.