HTML TUTORIAL

How To Add Images To HTML Web document

HTML IMAGES
Written by ikenna

In this article, we will be looking at HTML images and how to add them on our web page. In our previous tutorial, we looked at HTML comments and how to place single and multi line comments on our web page. If you haven’t gone through the tutorial, you can do so using the link below

PREVIOUS TUTORIAL: How To Structure HTML Comments On A Web Page

Introduction to HTML Images

Structuring HTML web document doesn’t rely on text and codes alone. Most times, you might need to use images on your web document and this can be done easily with the help some HTML codes that allows us to embed images on our web page. Images are easily embedded 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 that doesnt have a closing tag. Example below shows how to insert image in a web document

<!DOCTYPE html>
<html>

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

Changing the image location

Assuming the image location have been changed to html/images/sampleimage.png you can do it this way

<!DOCTYPE html>
<html>

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

Setting the image size

After adding image to your web document, the next step is to set the image size to fit in your web document. We can simply adjust the height, width and other image properties. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Web document</title>
   </head>
	
   <body>
   <p> Image Insertion HTML</p>
   <img src = "/html/images/sampleimage.jpeg" alt = "Sample Image" width="user defined width value" height="user defined height value" />
   </body>
	
</html>

Add the sections where we have “user defined width value” & “user defined height value”, simply put in the expected width and height values you intend assigning to the image

Adding Border to image

The syntax shown below is used to add border to a HTML web document.

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

Example shown below

<!DOCTYPE html>
<html>

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

Adding Alignment To Images

The default image placement is left alignment but with the help of HTML codes,we can place them anywhere we wish.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on A Web Document</title>
   </head>
	
   <body>
      <p> Image Insertion on HTML web document</p>
      <img src = "/html/images/sampleimage.jpeg" alt = "Testing Image" align="middle" />
   </body>
	
</html>

CONCLUSION

The above tutorial explains how to structure images on web documents. if you have questions, kindly let us know using the comment section below

NEXT TUTORIAL: INSERTING TABLES IN HTML

About the author

ikenna

Leave a Comment