HTML Images

 11 - Oct - 2021
 XpertPhp
 24

The HTML Image tag defines an image in an HTML page. the <img> tag has two attributes src and alt.

Inserting Images

The HTML Image tag is an empty tag. we can insert an image path using the src attribute in the image tag. so you can see the below syntax. Syntax 
<img src="choose destination path" alt="alternate text" />
Example 
<!DOCTYPE html>
<html>
   <head>
      <title>Inserting Images</title>
   </head>	
   <body>
      <img src="https://w3snippets.com/wp-content/uploads/2020/04/wpt_logo.png" alt="Logo Image" />
   </body>	
</html>

Set the Width and Height

We can set the image width and height using the width and height attributes. if you want to display a limited size of the image, then we will use width and height attributes. Example 
<!DOCTYPE html>
<html>
   <head>
      <title>Set the Width and Height</title>
   </head>	
   <body>
      <img src="https://w3snippets.com/wp-content/uploads/2020/04/wpt_logo.png" alt="Logo Image" width="50px" height="50px" />
   </body>	
</html>

Set Image Border

If you want to set the border of the image, then we will use the border attribute. see below the following example. Example 
<!DOCTYPE html>
<html>
   <head>
      <title>Set Image Border</title>
   </head>
   <body>
      <img src="https://w3snippets.com/wp-content/uploads/2020/04/wpt_logo.png" alt="Logo Image" border="2"/>
   </body>	
</html>

Set Image Alignment

If you want to set the image Alignment, then we will use the align attribute. there are three values of aligning attributes. such as left, right, and center. but the left is by the default set of the image tag. Example 
<!DOCTYPE html>
<html>
   <head>
      <title>Set Image Border</title>
   </head>
   <body>
      <img src="https://w3snippets.com/wp-content/uploads/2020/04/wpt_logo.png" alt="Logo Image" align="center"/>
   </body>
</html>
 

Recent Posts

Popular Posts