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.
55 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.
2024 year horoscope · October 31, 2023 at 10:09 pm
I need to to thank you for this good read!! I certainly loved every little bit of it. I’ve got you saved as a favorite to check out new stuff you post…
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.
kubet คาสิโน · December 9, 2023 at 4:22 pm
Appreciate you sharing, great blog post.Much thanks again.
take a look at · December 10, 2023 at 12:26 am
Hi, I do believe this is a great blog. I stumbledupon it 😉 I may return yet again since I book marked it. Money and freedom is the best way to change, may you be rich and continue to help other people.
to learn more · December 11, 2023 at 9:59 am
Your style is very unique in comparison to other people I have read stuff from.Thank you for posting when you have the opportunity, GuessI will just bookmark this blog.
蝦皮壯陽藥 · December 25, 2023 at 7:59 am
I am so grateful for your blog article. Fantastic.
uae tourist visa · December 31, 2023 at 7:56 am
This is one awesome blog article.Really thank you! Keep writing.
fansly downloader · January 2, 2024 at 1:31 pm
Awesome blog article.Thanks Again. Really Cool.
cosmetic · January 2, 2024 at 8:07 pm
Hey, thanks for the article post.Really thank you! Great.
Salons in Nagpur · January 4, 2024 at 7:07 am
Thank you ever so for you blog post.Really looking forward to read more. Keep writing.
car rental agency · January 4, 2024 at 11:18 am
Appreciate you sharing, great blog post.Really looking forward to read more. Fantastic.
health and wellness tips · January 21, 2024 at 1:32 pm
wow, awesome article post.Really thank you!
bounce house rentals · January 23, 2024 at 12:54 pm
yet I never found any interesting article like yours. It’s pretty worth
R编程代做 · January 23, 2024 at 2:17 pm
Looking forward to reading more. Great blog post.Thanks Again. Cool.
vw classic parts · February 2, 2024 at 11:52 pm
I wanted to thank you for this great read!! I definitely loved every little bit of it. I have got you book marked to look at new things you post…
casino plus play · February 4, 2024 at 1:53 pm
I loved your blog article.Thanks Again. Really Great.
3chlorine · February 4, 2024 at 9:38 pm
Thanks for the article.Really looking forward to read more. Really Great.
Acupuncture Menopause in Fairfax · February 5, 2024 at 7:18 am
Really enjoyed this article.Really thank you! Much obliged.
aiチャット · February 5, 2024 at 10:12 pm
Im obliged for the blog article.Thanks Again. Great.
Códigos Lucrativos · February 7, 2024 at 2:04 am
monica lewinsky trốn dưới bàn của bill clinton
https://xparkles.com · February 7, 2024 at 6:47 am
Great blog article.Really thank you! Really Cool.
Cortexi · February 8, 2024 at 1:51 am
Well I sincerely enjoyed reading it. This article offered by you is very constructive for good planning.
ai chatgpt · February 8, 2024 at 7:30 am
Fantastic article.Much thanks again. Really Great.
fitspresso · February 10, 2024 at 11:24 pm
I’m really impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the excellent quality writing, it’s rare to see a nice blog like this one nowadays.
fitspresso · February 11, 2024 at 3:26 am
legacy village apartment homes apartments in fredericksburg va southern oaks apartments
red boost supplement · February 25, 2024 at 12:48 am
I really like and appreciate your blog post.Much thanks again. Much obliged.
His Secret Obsession · February 25, 2024 at 9:15 am
Thanks in favor of sharing such a fastidious thought, piece of writing is good, thats why ihave read it entirely
bingo plus · February 25, 2024 at 10:17 am
Thanks for sharing, this is a fantastic article post.Really thank you! Really Cool.
free chatgpt · February 25, 2024 at 5:38 pm
Hey, thanks for the blog post.Really thank you! Really Great.