How To Insert Image In HTML From Local Drive
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Anjali
In this tutorial we will show you how to insert image in HTML from local drive, images are generally used to make a webpage more attractive. It helps to improve the design of a webpage.
For inserting an image in HTML a <img> tag is used. HTML <img> tag will declare particular section to show image data, whereas <img> tag is an empty tag, it contains only attributes and not have any closing tag.
Step By Step Guide On How To Insert Image In HTML From Local Drive :-
1. By using HTML <img> tag
As we know, HTML <img> tag is a singular tag and have no any closing tag. Also, it can be used anywhere in HTML code but only in <body> tag.
Here, we say about image from local drive. Hence, one thing is that the image should be downloaded. A general use of image tag with the help of codes is given here...
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<img src=”imagepath_is_declared_here”>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here we use <img> tag, (which is a singular tag) with attributes type, src...
- Here src specifies the source file with its .extensions. Here, we have to give the name of image file if it is present in same folder in which .html file exists also… if not then we have to give proper location with image file name in src tag, to display image in browser
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
2. Now, let us understand a code of <img> tag with all attributes:
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<img src="***" alt="logo" width="100px" height="100px">
<img src="***" alt="logo" style="width: 100%; height:100%;">
</video>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here we use <img> tag, with attributes width, height, src and alt.
- A <img> tag is used here, with attributes src, alt, height and width. The description of all these tags already specified.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Note: the width and height attributes are used by two ways. At first, we use simple attributes without style tag and secondly we use these in style tag, here both are same, the work done by them is same, but we prefer attributes with style tag because it is more convenient way to use these tags.
And secondly, we can also use an online image without download it, for this we have to specify the image url in src attribute
Conclusion :-
At last, we can insert an image in html by using image tag with its attributes like src, alt, height and width.
With the help of an image, a webpage looks more attractive and to insert an image from local drive, we only have to give image path with its name and extension in src attribute.
I hope this tutorial on how to insert image in HTML from local drive helps you.
About Anjali
