Visit Original Non-AMP Page

How to insert image in HTML using notepad [Updated]

Hello guys, Welcome.
In today’s Tutorial, we are going to Discuss How to insert image in HTML using notepad Text Editor.
Let’s get started with the HTML Syntax.

As we all know in That, in HTML we have to use tags to include HTML Elements like Images. So, for inserting images inside HTML Web page we have IMG or Image Tag that.

<img src="ImagePathHere"/>

Next, we have to give Our Image file’s path inside the HTML IMG tag, using HTML’s Source Attribute.
Write SRC anywhere after the tag name and write here Your Image file’s name followed by the Extension.

<img src="myImage.jpg"/>

If you don’t know the Image File’s Extension, then you have to
Right-click on your Image file,
select properties,
inside the General tab,
You can see your Image file’s Extension.

Now save the HTML File.
After saving HTML File Locate and run that file inside a Browser.

After Inserting an Image file in HTML We can
Modify this Image Interface according to our Needs like:
Change HTML image Height and Width,
Customize HTML image Border,
Customize HTML image Border Radius,
Change HTML image Opacity
And
Make HTML Image Click-able.
Now First Thing

Watch Video Tutorial:
how-to-insert-image-in-html-using-notepad

How to Change Image Height and width:

To change Image Height and Width in HTML, we have HTML Attribute and CSS for that.
To change Image Height using HTML’s Height
Width attribute.
We need to write Height and width after the
IMG tag name and assign a New Image Height in Pixels.

Now how to change Images height and width using CSS

First, we need to Write Style tags inside the HTML Head tags to Use CSS in HTML Web page.

<head>
   <style></style>
</head>

Next, we have to Select the HTML Image by using the Tag name And assign here the New height and width for our HTML Images.

<html>
<head>
   <style>
     img{
      height:300px;
      width:300px;
     }
   </style>
</head>
<body>
  <img src="myImage.jpg"/>
</body>
</html>

Now how to change HTML Images border using CSS.

How to change HTML Images border using CSS

To do that we have to Use CSS Border property
Where we have to Assign Border Thickness border type and border Color
We also can change border Radius using CSS Border-radius property.
Were we can assign a single value for all 4 corners, or we can assign different values for the top, right, bottom and left image border radius.

<html>
<head>
   <style>
     img{
      border-radius:3px solid red;
     }
   </style>
</head>
<body>
  <img src="myImage.jpg"/>
</body>
</html>

Now next is how to change HTML image Opacity using CSS.
Using CSS opacity Property, we can assign and change image opacity from 0 to 1.

<html>
<head>
   <style>
     img{
      opacity:0.4;
     }
   </style>
</head>
<body>
  <img src="myImage.jpg"/>
</body>
</html>

And the Final thing is:
Clickable images.

How to Make HTML Images Clickable

We can do that using HTML Anchor tags
and also using JavaScript Function

First, we have to declare HTML Image inside the HTML Anchor tags.

Clickable HTML Image using HTML Anchor Tags

<html>
<body>
 <a href="#">
  <img src="myImage.jpg"/>
 </a>
</body>
</html>

Now if we refresh the Browser
You can see a Clickable Cursor that means Our HTML Image is now a Clickable Image.
Using Anchor tags SRC attribute we can refresh the Web page on a Click.
Or we can redirect our Users to another page on a Single Click.

<html>
<body>
 <a href="https://programminghead.com">
  <img src="myImage.jpg/">
 </a>
</body>
</html>

Next Clickable image using JavaScript.

Create Clickable image using JavaScript

For creating Clickable Images using JavaScript, we need to include JavaScript Tags inside our HTML Document.
We have to write a Function where we will create a JavaScript Alert Box.
Now using HTML’s onClick attribute we can
Run that JavaScript function on a Click.

<html>
<body>
  <img src="myImage.jpg" onClick="clickBtn()"/>
  <script>
   function clickBtn(){
     alert("Thanks for Clicking");
   }
  </script>
</body>
</html>