HTML Images
HTML Images
This is the lesson 6 of 10 in the course HTML - Beginner to Advance

HTML allows us to show images on webpage using <img> tag. HTML Images can be png, gif, jpg, jpeg, or so on. The HTML IMG tag is an empty tag, it has attributes and no closing tag. Image can improve the design and appearance of a website.

Table of Contents

HTML Images

The <img> Tag

The <img> tag is used to insert an image on the webpage. <img> tag does not have a closing tag, It is also known as a self-closing tag. It uses / at the end of the tag.
Here is the syntax of <img> Tag.

<img src="url" alt="alternative Text" />

Basically, <img> tag has 2 main attributes :

The src Attribute:

The src attribute is used to insert the source path of an image.

The alt Attribute:

The alt attribute is used to insert alternative text. When an image does not load on the website, it shows the alternative text.

<!DOCTYPE html>
<html>
<body>

<img src="https://www.nicepng.com/png/detail/769-7692873_download-google-pay-logo-png" alt="Google Pay Logo" width="100" height="100">

</body>
</html>

Insert .png at the end of the src link you will be able to see the logo.


<img src="https://www.nicepng.com/png/detail/769-7692873_download-google-pay-logo-png.png" alt="Google Pay Logo" width="100" height="100">

Height Attribute

the height attribute is used to set the height of an image. We can set the height using CSS also.

<img src="https://lf3cjcqpc8r0.cdn.shift8web.ca/myimg.png" height="100">

Width Attribute

the width attribute is used to set the width of an image.

<img src="https://lf3cjcqpc8r0.cdn.shift8web.ca/myimg.png" width="100">

The Style attribute

As we said we can set the image style property using CSS also. Let’s have a look at the code!

<!DOCTYPE html>
<html>
<body>
<style>
	img{
    	width:100px;
        height:100px;
    }
</style>

<img src="https://www.nicepng.com/png/detail/769-7692873_download-google-pay-logo-png.png" alt="Google Pay Logo" >

</body>
</html>

Image from another folder

In web designing, we need to maintain the code and its files. so we always store the different types of files in different folders as we need to store a logo, we can create an image folder and inside that a logos folder and we will put our mylogo.png image in this folder.
After storing we need to use it on our website so we will write this code.

This type of path is known as The Relative Path.

<img src="images/logos/mylogo.png" >

As we used an image from our website’s folder, we can also use online images through their link. It doesn’t save inside our database, so it saves space.

<img src="https://www.nicepng.com/png/detail/769-7692873_download-google-pay-logo-png.png" alt="Google Pay Logo" width="100" height="100"> 

Here we are using a google pay logo through a link.

This type of path is known as The Absolute Path.

Insert Gif Image

the HTML supports different types of images, here we are using a gif image In the <img> tag. Run the code to see the result!

<!DOCTYPE html>
<html>
<body>
<style>
	img{
    	width:200px;
        height:200px;
    }
</style>

<img src="https://predictivehacks.com/wp-content/uploads/2020/11/mygif-1.gif" alt="The Gif image" >

</body>
</html>

Image in Title Bar | icon in Title Bar

The icon logo is also called a favicon. Favicon stands for Favourite Icon. Nowadays websites are using icons in their title bar. Let’s see how they do it.

Create a link tag in the head section and give the href value as the image location.

<!DOCTYPE html>
<head>

  <title>Text Easing</title>
  <link rel="icon" type="image/gif/png" href="https://www.nicepng.com/png/detail/769-7692873_download-google-pay-logo-png.png">

</head>
<body>

</body>
</html>

In HTML, We can also create an image as a link. For creating an image link we need to create an anchor tag first and write the destination link in href attribute. after that create an IMG tag inside the <a> opening tag and </a> closing tag as shown below:

<!DOCTYPE html>
<html>
<body>
<style>
	img{
    	width:100px;
        height:100px;
    }
</style>
<a href="https://www.google.com" target="_blank">

<img src="https://www.nicepng.com/png/detail/769-7692873_download-google-pay-logo-png.png" alt="Google Pay Logo" >

</a>
</body>
</html>

Click on the image it will redirect you to google in a new window.

Image Alignment

For image alignment, we need to use CSS. In CSS we can use the float property to align our image like this. The default value of the float property is left. float has two properties left and right.

<!DOCTYPE html>
<html>
<body>
<style>
	img{
    	width:100px;
        height:100px;
    }
</style>
<a href="https://www.google.com" target="_blank">

<img src="https://www.nicepng.com/png/detail/769-7692873_download-google-pay-logo-png.png" 
alt="Google Pay Logo" 
style="float:left"
>

<img src="https://www.nicepng.com/png/detail/769-7692873_download-google-pay-logo-png.png" 
alt="Google Pay Logo" 
style="float:right"
>

</a>
</body>
</html>

How to align image in center?

To align an image in the center we will use margin. here we have two ways to use margin for the center alignment of an image. First,

use display: block; then use margin: firstValue secondValue; here in the firstValue the margin will be given from top and bottom and in the secondValue the margin will be given from left and right. So we will set margin: 0px auto; It will center the image. Now Second,
Set the margin-left: auto; and margin-right: auto; it will also align the image in the horizontal center.

<!DOCTYPE html>
<html>
<head>
	<style>
    	img{
        	width:100px;
            height:100px;
            display:block;
            margin:0px auto;
        }
    </style>
</head>
<body>
	<img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-webinar-optimizing-for-success-google-business-webinar-13.png" >
</body>
</html>


Types of Image Format

AbbreviationExtensionType
PNG.pngPortable Network Graphics
GIF.gifGraphics Interchange Format
SVG.svgScalable Vector Graphics
ICO.ico, .curMicrosoft Icon
APNG.apngAnimated Portable Network Graphics
JPEG.jpg, .jfif, .jfifjoint Photographic Expert Group Image
Types of Image formate

Here we learned a lot about HTML Images. Hope you guys liked it, if you are interested in web development then visit our other post also. Link Given Below!

Thank You!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Course Navigation<< HTML FormattingHTML Links >>
Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply