Breaking News

How to Add Image in Html from a Folder


Here you will find the best answer for "How to add image in html from a folder?". If you are learning Html, and want to insert an image from a folder that is in your personal lappy, or in your PC, then this post is for you.

How to add image in html from a folder

Here we have given some steps to insert an image in Html. You can insert an image easily with this technique.

Let, you have just created a piece of code in HTML, using notepad. Code looks like this:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>



<h1>My First Heading</h1>

<p>My first paragraph.</p>



</body>

</html>
Code in Notepad - How to add image in html from a folder
Code you created

And when you saved it with "infocompile.html" then you are getting the output as shown below.

Output in Opera - How to add image in html from a folder
Output of your code

Now, if you want to insert image in between "My First Heading" and "My first paragraph" from a folder. Then save your image in the same folder where your .html file is located. You can follow these steps:
  1. Put your image file and source code file in one folder.
  2. Then paste this code where you want your image in Html.
    <img alt="Alt text for image" src="your_image.jpg" />
  3. Replace "Alt text for image" with your image name and "your_image.jpg" with your image name and proper extension.
  4. After replacement, your code will look like:
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    
    <h1>
    My First Heading</h1>
    <img alt="celebrate" src="celebrate.gif" />
    
    My first paragraph.
    
    
    </body>
    </html>
    
  5. Save your code and run it in the browser. The output will be like this:
    How to add image in html from a folder
    Output with image

  6. So, in this way, you can add image in html from a folder. Hope you understand it. For any Query comment us now.

No comments

Please leave your feedback here.