Web page with all the texts can be very boring. But what if we add some images to the web page? It might seems lots better, right?
And Yes! If you have images on your web page, it will looks a lot better because Images can improve the appearance of a web page. To insert the images to the web page, we use <img> tag to insert it. To insert it to the web page, this is how it looks like in html body element.
<img src="profile_picture.jpg" alt="Profile Picture">To understand it, it check out the word with capitalize below.
<img src="INSERT IMAGE FILE ADDRESS/FILE PATH" alt="INSERT ALTERNATE TEXT FOR THE IMAGE">So, here’s the implementation. I use this blog thumbnail as an example at the code below. Feel free to run it.
<img src="https://blog.jorcus.com/wp-content/uploads/2020/05/How-To-Insert-Images-with-img-in-HTML.jpg" alt="How To Insert Images With <img> in HTML">However, it seems the image looks big right? You can specify the height and width attribute. At here, I set the height as 160px and width 240px.
<img src="https://blog.jorcus.com/wp-content/uploads/2020/05/How-To-Insert-Images-with-img-in-HTML.jpg" alt="How To Insert Images With <img> in HTML" height="160px" width="240px">Now the image become so much smaller! If you want to add border to the image. You can use border attribute. At here I set the border with 15px.
<h2>Without Border</h2>
<img src="https://blog.jorcus.com/wp-content/uploads/2020/05/How-To-Insert-Images-with-img-in-HTML.jpg" alt="How To Insert Images With <img> in HTML" height="160px" width="240px">
<h2>With 15px Border</h2>
<img src="https://blog.jorcus.com/wp-content/uploads/2020/05/How-To-Insert-Images-with-img-in-HTML.jpg" alt="How To Insert Images With <img> in HTML" height="160px" width="240px" border="15px">What if you want to align the image to center or right side?
You can use align attribute to do that. It’s allowed you to move it to left, center and right side.
For example.
<h2>Align Left</h2>
<img src="https://blog.jorcus.com/wp-content/uploads/2020/05/How-To-Insert-Images-with-img-in-HTML.jpg" alt="How To Insert Images With <img> in HTML" height="160px" width="240px" align="left">
<h2>Align Center</h2>
<img src="https://blog.jorcus.com/wp-content/uploads/2020/05/How-To-Insert-Images-with-img-in-HTML.jpg" alt="How To Insert Images With <img> in HTML" height="160px" width="240px" align="center">
<h2>Align Right</h2>
<img src="https://blog.jorcus.com/wp-content/uploads/2020/05/How-To-Insert-Images-with-img-in-HTML.jpg" alt="How To Insert Images With <img> in HTML" height="160px" width="240px" align="right">Thanks for reading! What do you think about this tutorial? Please let me know if you have anything else want to learn!