HTML Image Full Tutorial with example.

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.
![]() 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.
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.![]() ![]() 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 🙂