Breaking News

How to insert Image in Html using Notepad

Hey, are you learning html? If Yes here we have support for you. Comment us your every question on Html. We will surely reply to you with our best answer. But for now, let's understand "how to insert image in HTML using notepad?"

How to insert image in HTML using notepad


Adding an image to Html makes a webpage attractive. You can easily insert image in html using notepad. Here are the steps for doing so:

  1. First, create a .html file with some code like:
    <!DOCTYPE html>
    
    <html>
    <head>
    <title>HTML Tutorial</title>
    </head>
    
    <body>
    
    
    
    <h1>This is a heading</h1>
    
    <p>This is a paragraph.</p>
    
    
    
    </body>
    
    </html>
    

  2. Then paste this code where you want to add your image.
    <img src="img_name.extension" alt="Img_Details">
  3. Replace the "img_name.extension" with the image name and extension; for example:

    • hello.jgp
    • dance.gif
    • girl.png
  4. Replace the "Img_Details" with a small descriptive text about the image like:
    • yellow flowers
    • the prime minister of India
    • wonders of earth
  5. After doing all the above steps your code will look like:
    <!DOCTYPE html>
    
    <html>
    <head>
    <title>HTML Tutorial</title>
    </head>
    <body>
    
    <h1>This is a heading</h1>
    
    <p>This is a paragraph.</p>
    
    <img src="hello.jpg" alt="Hello">
    </body>
    </html>

  6. Your output will be like this:


Try it now on your desktop, and share your experience on "inserting an image in html using notepad" in our comment section.

Note: To insert an image with this method, the image file should be saved with your html code file in the same folder.

No comments

Please leave your feedback here.