Post
Ask Question

How To Display an Image In Web Page using 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" />//pixel value  
  11.   
  12.   
  13.             <br>  
  14.                 <img src="nature.jpg" height="50%" width="50%"/>//percentage value  
  15.   
  16.   
  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.