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.
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.
27 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 🙂
nift diploma courses · August 15, 2023 at 9:07 pm
Thanks for the blog post.
China sourcing agent · August 29, 2023 at 10:44 am
Appreciate you sharing, great blog. Want more.
la plastics · September 16, 2023 at 7:14 am
I appreciate you sharing this blog article.Really looking forward to read more.
Fennel Seeds Agri Koli Masala · September 16, 2023 at 2:38 pm
Thanks again for the post.Really thank you! Want more.
911吃瓜 · October 2, 2023 at 8:04 pm
I appreciate you sharing this post.Thanks Again. Cool.
tongwei polysilicon · October 3, 2023 at 6:22 am
Really informative blog article.
代开医院证明 · October 7, 2023 at 3:39 pm
Thank you for your article post.Really thank you! Cool.
Boron nitride ceramic · October 20, 2023 at 2:04 pm
Enjoyed every bit of your article. Keep writing.
rope netting · October 20, 2023 at 8:36 pm
Fantastic article post.Much thanks again. Really Cool.
soutěže · October 25, 2023 at 9:51 pm
Hi there, after reading this remarkable post i am also delighted to share my familiarity here with colleagues.
India Visa types · October 26, 2023 at 4:15 pm
Say, you got a nice blog.Much thanks again. Awesome.
Gas Valve Manufacturer · October 27, 2023 at 6:15 am
I really liked your blog post.Really looking forward to read more. Really Great.
best hotel in manali for family · October 27, 2023 at 2:36 pm
I really like and appreciate your article.Thanks Again. Much obliged.
Silicone Emulsion · October 27, 2023 at 9:21 pm
Major thanks for the blog article.Really looking forward to read more. Really Great.
kawasaki z900rs cafe for sale · October 28, 2023 at 6:36 am
Thanks for the blog.Much thanks again. Much obliged.
pressure transmitter · October 28, 2023 at 8:23 pm
Thanks so much for the article post.Really thank you! Really Cool.
pet bottle making machine · October 29, 2023 at 10:27 am
This is one awesome blog post.Thanks Again. Really Great.
rotontek · October 29, 2023 at 8:18 pm
Major thankies for the blog.Really thank you! Cool.
#Ethereum · October 31, 2023 at 8:11 am
Major thankies for the blog.Much thanks again. Keep writing.
how to make money as an affiliate · November 5, 2023 at 12:00 am
This is one awesome blog.Much thanks again. Much obliged.
Dongguan Yuehou · November 5, 2023 at 9:53 am
I really liked your post.Really thank you! Awesome.
lairaplus · November 5, 2023 at 11:07 am
Looking forward to reading more. Great article.Really looking forward to read more. Awesome.
lairaplus · November 5, 2023 at 3:18 pm
Muchos Gracias for your post.Much thanks again. Want more.
Brick making machine · November 6, 2023 at 7:31 am
Really appreciate you sharing this article.Really thank you! Much obliged.
kubet · November 7, 2023 at 8:57 am
Thanks again for the blog.Much thanks again. Really Great.