in

Understanding HTML Images and How to Insert Them

In this tutorial you will be learning about HTML images. When designing websites, sometimes you might need to add background images to your web page or images to some sections of the website. These images are linked directly to the HTML document using some special tag structures.

READ PREVIOUS TUTORIAL ON: Tutorial #8 | Understanding the HTML Comments and Their Usage

What are HTML IMAGES?

HTML images are images added to a website for the purpose of customizing the website or webpage. Images are very useful during page beautification and in the course of this tutorial you will learn how to add images to your web page easily.

Images are added to a web document using this line of code structure

<img src = "URL of image" ... attributes-listing/>

The HTML image tag is an empty tag which doesn’t carry a closing tag and takes it all properties inside the tag

please note that you need your image and your HTML document to be placed in the same directory for this to work

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <p> Image Insertion HTML</p>
      <img src = "/html/images/testing.jpeg" alt = "Testing Image" />
   </body>
	
</html>

Changing image location

Lets assume the image location have been changed to html/images/firstimage.jpeg we use it this way

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <p> Image Insertion HTML</p>
      <img src = "/html/images/firstimage.jpeg" alt = "Testing Image" />
   </body>
	
</html>

Adjusting the image size

By default the image takes its original size. if this isn’t convenient for you and you intend adjusting the size of the image, you can follow the below example

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
   <p> Image Insertion HTML</p>
   <img src = "/html/images/firstimage.jpeg" alt = "Testing Image" width="your width value" height="your height value" />
   </body>
	
</html>

replace “your height value” with your specified height and “your width value” with your specified width. Height and width are expected to be in numbers

Adding Border to image

If you intend adding border to your image you can achieve this using the HTML code structure below

<img src = "/html/images/firstimage.jpeg" alt = "Testing Image" width="width value" height="height value" border='border size' />

The border size can be any suitable number.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <p> Image Insertion HTML</p>
      <img src = "/html/images/firstimage.jpeg" alt = "Testing Image" border="5" />
   </body>
	
</html>

Setting Image Alignment

By default the image takes the left alignment but you can change it to the left or center using this code structure below.

<img src = "/html/images/firstimage.jpeg" alt = "Testing Image" width="width value" height="height value" align='value' />

change the “value” to your intended value such as left, right or centre

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <p> Image Insertion HTML</p>
      <img src = "/html/images/firstimage.jpeg" alt = "Testing Image" align="middle" />
   </body>
	
</html>

Conclusion

Now you understand the basics of HTML IMAGES and you are really doing great. Lets move on to the next tutorial on   HTML TABLES

What do you think?

html comments

Understanding the HTML Comments and Their Usage

html tables

Understanding HTML Tables and How to Insert Them