A PNG image is a common image format used on websites.
PNG is useful when you want a sharp image, a logo, an icon,
or an image with a transparent background.
What is a PNG File?
A PNG file normally ends with .png.
For example:
logo.png flower.png button.png background.png
You can use PNG images inside an HTML webpage with the
<img> tag.
Keep All Assets in One Folder
When you are beginning with HTML, it is easy to keep everything
in one folder. Your HTML file and your PNG image can be placed
together in the same folder.
Example folder:
my-webpage/ │ ├── index.html ├── logo.png ├── flower.png └── button.png
In this example, the webpage file and all images are in the same folder.
This makes the image path very simple.
How to Show a PNG Image
If your image is called logo.png, you can show it like this:
<img src="logo.png" alt="My website logo">
The src attribute tells the browser where the image is.
The alt attribute gives a short description of the image.
Complete Example
Here is a simple webpage that uses a PNG image from the same folder:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My PNG Image Page</title> </head> <body> <h1>Welcome to My Webpage</h1> <p>This webpage shows a PNG image.</p> <img src="logo.png" alt="My website logo"> </body> </html>
Important Things to Remember
Make sure the file name is written exactly the same in your HTML.
If your image is called Logo.png, but your HTML says
logo.png, the image may not show.
It is best to use lowercase file names and no spaces.
Good: logo.png myflower.png blue-button.png Not so good: Logo.PNG my flower.png Blue Button Image.png
How to Use This with Windows Kladblok
Open Kladblok in Windows and write your HTML code.
Then save the file as index.html.
Put your PNG image in the same folder as your HTML file.
After that, double-click on index.html.
Your browser will open the webpage and show the PNG image.
Example Steps
1. Create a folder called my-webpage.
2. Put your image logo.png inside that folder.
3. Create a file called index.html with Kladblok.
4. Use this code:
<img src="logo.png" alt="My logo">
5. Save the file and open it in your browser.
Extra Tip
Kladblok is good for simple HTML files. But people can also use
NotePad++ or Microsoft Visual Studio Code because they have more
functions, like colors in the code, better search, line numbers,
and helpful tools for writing HTML, CSS, and JavaScript.