Online Certificate Courses

What are HTML Images

Images are really important to make our HTML documents as well as to describe many complex concepts in a very simple way on your web page. In this section, we will go through simple steps on how to use images in web pages.

Insert Image

You can put in any image on your web page just by using <img> tag. The following is the simple syntax on how to use this HTML tag.

<img src = "Image URL" ... attributes-list/>

The <img> tag is a void tag, which basically means that it can contain only a number of attributes and does not have a closing tag.

Example

Here is a simple way to use the <img/> tag to bring in an image on our webpage

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify the correct image file name in the src attribute. The image name is always case sensitive.

The alt HTML attribute is a compulsory element attribute that describes an alternate text for the image if the image cannot be displayed due to some network reason.

Set Image Location

Usually, we keep all the images in a different directory. So let's place our HTML file image.html in our home folder and create a subdirectory image inside the home directory where we will keep our image test.png.

Example

Let's Assume that our image location is "image/siitgo.png", try the following example:

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/siitgo.png" alt = "Test Image" />
   </body>
	
</html>

Set Image Width/Height

You can manually specify the width and height of an image based on how you want it to be by making use of the width and height attributes. You can also set the width and height of the image according to either pixels or a percentage of its actual size.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/siitgo.png" alt = "Siitgo Image" width = "150" height = "100"/>
   </body>
	
</html>

Set Image Border

By default, the image will have some sort of border around it, you can manually set the border thickness of the image is based on pixels using border attribute of the <img> tag. For instance, giving an image the thickness of 0 basically means, there will be no border around the image.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
	
</html>

90% Scholarship Offer!!

The Scholarship offer is a discount program to take our Course Programs and Certification valued at $70 USD for a reduced fee of $7 USD. - Offer Closes Soon!!

Copyrights © 2021. SIIT - Scholars International Institute of Technology is a subsidiary of Scholars Global Tech. All Rights Reserved.