ADVERTISEMENT

How to add Image in HTML? Tag in HTML

Telegram Group Join Now

ADVERTISEMENT

How to add Image in HTML

How to add Image in HTML
How to add Image in HTML

 

ADVERTISEMENT

ADVERTISEMENT

 

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

We can style the image size by using the style attribute and adding simple CSS inside it. Check out the code below.

ADVERTISEMENT

<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!

ADVERTISEMENT

Thank You!

ADVERTISEMENT

Written by: @codingporium 

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT