How To Add Images In HTML? – POFTUT

How To Add Images In HTML?

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.

Add Simple Image with src Attribute

Add Simple Image with src Attribute

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.

LEARN MORE  How To Remove Docker Images

Add Alternative Text with alt Attribute

Add Alternative Text with alt Attribute

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.

Resize or Set Size For Image with style, width, height Attribute

Resize or Set Size For Image with style, width, height Attribute

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 .

LEARN MORE  What Is Webpage?

Show Border For Image

Show Border For Image

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.

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.

Add Images From Other Web Sites/Servers

Add Images From Other Web Sites/Servers

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.

LEARN MORE  Linux dd Command To Backup with Examples

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)