How do i show an image in html?

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" />  
  11.   
  12.   
  13.             <br>  
  14.                 <img src="nature.jpg" height="50%" width="50%"/>  
  15.   
  16.   
  17.             </centre>  
  18.         </body>  
  19.     </html>  
    How do i show an image in 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.

Why can't I see image in HTML?

You need to either retype your HTML code in upper case: <IMG SRC="MY_IMAGE. GIF"> or you need to rename the file on the server to lower case to coordinate with the HTML page. It is possible that your image files were uploaded correctly to the server, but the server's path to the image is incorrect.

How do I display a JPG image in HTML?

To display an image you need to specify the URL of the image using the src attribute, replacing url with the filename of your image. There are several ways this can be done: src="picture. jpg" - the filename if the image is in the same directory as the html file.