Introduction

HTML stands for Hyper Text Markup Language. HTML is not a programming language, it is a mark-up language. Using HTML to create a web page is very simple and easy. HTML was designed to display in a web browser, and HTML elements are the building blocks of a web page. HTML elements are represented by tags < >.
Requirements
  • Operating System (any operating system)
  • Text editor (Example: Notepad or any code editor)
  • Browser (Example: google chrome)

The <img> tag

The image tag is used to insert an image. It contains only one attribute, and does not have a closing tag. The image URL can be defined by the src attribute.
The HTML image syntax,
<img src=”image.jpg”/>

Image location

You can take any image location for the src attribute, and for the image address, put in a double quotation (i.e. “tee.jpg”.) The image in the HTML folder was in ‘jpg’ format. The image extension is very important.
Example Code
  1. <html>
  2. <head>
  3. <title>Simple Web Page</title>
  4. </head>
  5. <body>
  6. <center>
  7. <h2 style="color: blue">
  8. <i>THIS IS MY FIRST WEB PAGE</i>
  9. </h2>
  10. <img src="nature.jpg"/>
  11. </center>
  12. </body>
  13. </html>

Image Resizing

The resize in a webpage is used to resize the image. Width and height are used for resizing attribute. The resize value is defined by pixel and percentage.
Example code
  1. <html>
  2. <head>
  3. <title>Simple Web Page</title>
  4. </head>
  5. <body>
  6. <centre>
  7. <h2 style="color: blue">
  8. <i>THIS IS MY FIRST WEB PAGE</i>
  9. </h2>
  10. <img src="nature.jpg" height="150px" width="150px" />//pixel value
  13. <br>
  14. <img src="nature.jpg" height="50%" width="50%"/>//percentage value
  17. </centre>
  18. </body>
  19. </html>

Image Border

A normal image has no borders. You can create a border using the border attribute within the image tag to create a border for an image.
Example Code
  1. <html>
  2. <head>
  3. <title>Simple Web Page</title>
  4. </head>
  5. <body>
  6. <centre>
  7. <h2 style="color: blue">
  8. <i>THIS IS MY FIRST WEB PAGE</i>
  9. </h2>
  10. <img src="nature.jpg" height="150px" width="150px" border="5px" />
  11. <br>
  12. <img src="nature.jpg" height="50%" width="50%" border="5%" />
  13. </centre>
  14. </body>
  15. </html>

Conclusion

In this blog, we learned how to display images in a webpage, as well as adjust location, image resizing, and image border. If you work this out in our practice, then it is simply HTML. The style in an image uses CSS. Next, I will write an article on CSS.