If we want to insert an image in the HTML document to show the image on a web page, we have to follow the steps which are given below. Using these steps, we can easily add or insert an image in the document.
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to insert the image.
<!Doctype Html>
<Html>
<Head>
<Title>
Insert an Image
</Title>
</Head>
<Body>
Hello CodeWorld! <br>
Hello User! <br>
How are You?
</Body>
</Html>Step 2: Now, move the cursor to that point where we want to insert an image. And then, type the empty <img> tag at that point.
<!Doctype Html>
<Html>
<Head>
<Title>
Insert an Image
</Title>
</Head>
<Body>
Hello CodeWorld! <br>
<img>
Hello User! <br>
How are You?
</Body>
</Html>Step 3: Now, we have to add the attribute of image tag whose name is “src“. So, type the src attribute within the <img> tag.
<!Doctype Html>
<Html>
<Head>
<Title>
Insert an Image
</Title>
</Head>
<Body>
Hello CodeWorld! <br>
<img src=" ">
Hello User! <br>
How are You?
</Body>
</Html>Step 4: After that, we have to give the path of the image we want to insert. So, type the path of the image in the src attribute. If our image is stored in the same directory in which our HTML file is store, then type the following path:
<img src="filename.extension">
<img src="CodeWorldimage.jpeg"> <br> If our image is stored in any other directory then type the correct path of that image, so that the browser can read the image easily as described in the following block.
<img src="/home/sumit/Desktop/images/jCodeWorldimage.jpeg"> If our image is on the internet, then we can also add the image by using URL, as given in the following screenshot.
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062"> Step 5: After that, we can also set the width and height of that image by using two different attributes as shown in the following block:
<img src="CodeWorldimage.jpeg" width="500" height="200"> Step 6: At last, we have to save the following Html file or Html Code in the text editor.
<!Doctype Html>
<Html>
<Head>
<Title>
Insert an Image
</Title>
</Head>
<Body>
Hello CodeWorld! <br>
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="400" height="200"> <br>
Hello User! <br>
How are You?
</Body>
</Html>
Leave a Reply