How To Insert Image In HTML Using Notepad

Last Updated : Mar 11, 2024

IN - HTML | Written & Updated By - Anjali

In this tutorial we will show you how to insert image in HTML using notepad, Images are generally used to make a webpage more attractive. It helps to improve the design of a webpage. For inserting an image in HTML a <img> tag is used.

HTML <img> tag will declare particular section to show image data, whereas <img> tag is an empty tag, it contains only attributes and not have any closing tag.

Step By Step Guide On How To Insert Image In HTML Using Notepad :-

1. By using HTML <img> tag:

As we know, HTML <img> tag is a singular tag and have no any closing tag. Also, it can be used anywhere in HTML code but only in <body> tag. A general use of image tag with the help of codes is given here...

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
              <img src=”imagepath_is_declared_here”>
          </body>
      </html>

First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
Secondly, the <html> tag is used to indicate the beginning of an HTML document.
As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here we use <img> tag, (which is a singular tag) with attributes type, src...
Here src specifies the source file with its .extensions. Here, we have to give the name of image file if it is present in same folder in which .html file exists also… if not then we have to give proper location with image file name in src tag, to display image in browaser
At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Attributes of embed tag are:

Src - as we already know, src attribute is used to give the image file location in code with its extension like .jpeg, .jpg, .png, etc, etc...
alt – here alt stands for alternative text, it means that if due to some error in any case image is not displayed on browser screen, then this alternative tag is used the text written inside in this tag is displayed when image file in not displayed. So, that the user may able to know about what the image is about.
Height – the height attribute is used in img tag just to give image dimensions about height and it may be in percent and pixel also, height is only used to give height to image.
Width – As height, width attribute is used in img tag just to give image dimensions about width and it may be in percent and pixel also as height, width is only used to give width to image.

2. Now, let us understand a code of <img> tag with all attributes:

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
	<img src="***" alt="logo" width="100px" height="100px">
    <img src="***" alt="logo" style="width: 100%; height:100%;">
              </video>
          </body>
      </html>

First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
Secondly, the <html> tag is used to indicate the beginning of an HTML document.
As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here we use <img> tag, with attributes width, height, src and alt.
A <img> tag is used here, with attributes src, alt, height and width. The description of all these tags already specified.
At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Note: the width and height attributes are used by two ways. At first, we use simple attributes without style tag and secondly we use these in style tag, here both are same, the work done by them is same, but we prefer attributes with style tag because it is more convenient way to use these tags.

And secondly, we can also use an online image without download it, for this we have to specify the image url in src attribute

For, work in notepad:

Open your notepad by searching notepad or notepad++ from search box by pressing window button or clicking on start button.
After, opening of notepad, type your html code having <img> tag.
Then save it by pressing Ctrl+S and save it from file menu.
Now, open this code on your favorite and most preferred browser.

Conclusion :-

At last, we can insert an image in html by using image tag with its attributes like src, alt, height and width. With the help of an image, a webpage looks more attractive. I hope this tutorial on how to insert image in HTML using notepad helps you.

About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪