How to add Image in HTML
The <img> tag in Html | Add Image In HTML
Hey friends, today I’ll teach how to Images in HTML. The most simple, easy, and common method to add images in HTML is through the <img> tag. Img actually stands for Image.
However, I honestly find the <img> tag really interesting. This is because usually HTML tags have a start tag and close tag but the <img> tag does not have a close title.
Okay, now that you’ve understood about <img> tag, let’s see how to link it to your image file path.
src attribute
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="https://1.bp.blogspot.com/-0PSY8oWAlAE/YQqjTM34buI/AAAAAAAAAE4/qEZSlzdfppoTMvK4XknFGmcU53Fw2bXVgCLcBGAsYHQ/w400-h225/InShot_20210804_191532666.jpg">
</body>
</html>Inside it, our <img> tag, add the src attribute. Src stands for source. So below is a simple example of how to combine img and src together into an HTML image.
I understand that when you see the example above, you might feel like the image is too large and you want to have some control on the image size.
5+ HTML CSS Projects With Source Code
We can do it with basic inline CSS. Don’t get shocked when you hear that we need to use CSS, because it’s a super simple job.
Styling HTML Image Size
We can style the image size by using the style attribute and adding simple CSS inside it. Check out the code below.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="https://1.bp.blogspot.com/-0PSY8oWAlAE/YQqjTM34buI/AAAAAAAAAE4/qEZSlzdfppoTMvK4XknFGmcU53Fw2bXVgCLcBGAsYHQ/w400-h225/InShot_20210804_191532666.jpg" style="width:50%;height:60px;">
</body>
</html>Output…
And that’s it! You can now add images to your HTML Code to make it better.
Create A Travel Website Using HTML & CSS
comment down below any doubts or suggestions you have. I hope this post was useful and thanks to Code With Random for giving me the chance to write here I hope to see you all in future posts. Goodbye!
Thank You!
Written by: @codingporium
