HTML Image Full Tutorial with example.

Published by StudyMuch on December 11, 2021December 11, 2021

HTML TUTORIAL (PART-07)

HTML Image Full Tutorial

In HTML (Hyper Text Markup Language), Image help to make a website look beautiful, if the web pages of our website do not have a single image, will the web pages look good? Absolutely not. Image make our webpages look better.
Image help a website become more attractive for visitors.
HTML images are indeed needed or required for ant websites and webpages.

HTML Image Attributes

To insert an image in our website and webpages we need to use simply ‘<img>‘ element with a ‘src‘ attributes. ‘src‘ element used to define the URL of the location of an image. The image <img> element is an inline and empty element.

All Image Attributes in HTML

<img>
<alt>
<src>

HTML alt Attribute

Sometimes in our website the images are not loaded due to some network problem like slow internet connection, slow server, image URL is not loaded, images are deleted directly from the server, wrong URL value etc. and the alt attributes are useful at the same times, the alt attribute provide a alternative text for an image.

Example of HTML alt Attribute with output.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
 <title>StudyMuch,in</title>
</head>
<body>
 <p>Example of Image alt Attribute</p>
 <img src="studymuch.jp"
alt="StudyMuch Website Icon.">
</body>
</html>

Output of above Example.

Example of Image alt Attribute.
StudyMuch Website Icon.

HTML src Attribute

The main purpose of src attribute in HTML, to specify a URL for an external image’s URL, file path and resources.

Example of HTML src Attribute with output.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible"
content="IE=edge">
 <meta name="viewport"
content="width=device-width,
initial-scale=1.0">
 <title>StudyMuch,in</title>
</head>
<body>
   <p>Example of Image src Attribute. </p>
 <img src="studymuch.jpeg"/>
</body>
</html>

Output of above example.

Example of Image src Attribute.

Image Sizing in HTML

To resize an image (Width & Height) in HTML, we just need to use the width attribute for edit image’s width and we just use height attribute for edit image’s height. We use the value of image’s width and height is typically in pixels.

Example of HTML image with Width and Height Attribute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <metahttp-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport"
content="width=device-width, initial-scale=1.0">
 <title>StudyMuch,in</title>
</head>
<body>
 <p>Example of Image sizing</p>
 <img src="studymuch.jpeg"
width="200"
height="200"/>
</body>
</html>

Output of above example.

Example of HTML Image sizing

HTML Image use as a Link

Just we need to use some attributes to use an image to act as a link. We use image as a link in our website and web pages for some important action like Submit Image, Download Image etc. To use image as a link just enclosed the image with an <a> element with its “href” attribute.

Example of HTML image as a Link

<!DOCTYPE html>
<html
lang="en">
<head>
 <metacharset="UTF-8">
 <meta http-equiv="X-UA-Compatible"
content="IE=edge">
 <meta
name="viewport"
content="width=device-width,
 initial-scale=1.0">
 <title>StudyMuch,in</title>
</head>
<body>
 <p>HTML Image as a Link</p>
 <p>When you click image you jump another window.</p>
 <a href="https://www.stydymuch.in">
 <img src="studymuch.jpeg"
width="200" height="200">
 </a>
</body>
</html>

Output of above Example.

HTML Image as a Link When you click an image you jump another window.

Floating HTML Image (Left or Right)

In our website page we can float an image left or right of a text. To achieve this, just we need to use the style attribute. We style this we use float property in CSS, and (left or right) value.

Example of Floating image in HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta
http-equiv="X-UA-Compatible" 
content="IE=edge">
 <meta name="viewport"
content="width=device-width, initial-scale=1.0">
 <title>StudyMuch.in</title>
</head>
<body>
 <p>Floating of Image Left or Right.</p>
 <p><img src="studymuch.jpeg"
style="float:left;
width: 50px; height:50px;">
This image is floated left side</p>
<p><img src="studymuch.jpeg"
style="float:right; w
idth: 50px; height:50px;"> 
This image is floated right side</p>
</body>
</html>

Output of above example.

Floating of Image Left or Right.
Th This image is floated left side. This image is floated left side. This image is floated right side.

This image is floated right side.

In this HTML tutorial we learned about HTML image all attribute and all property of image. In next tutorial we will be learn a new topic of HTML.

Also Learn This-

Html image attributes.
How to insert image in html.
img, src html.
Html image size.
How to align image in html.
How to add image in html from a folder.
Html image floating.
Center image html.

2 Comments

zoritoler imol · July 3, 2022 at 5:47 am

Having read this I thought it was very informative. I appreciate you taking the time and effort to put this article together. I once again find myself spending way to much time both reading and commenting. But so what, it was still worth it!

graliontorile · August 9, 2022 at 4:03 am

I haven’t checked in here for some time as I thought it was getting boring, but the last several posts are great quality so I guess I will add you back to my daily bloglist. You deserve it my friend 🙂