How To Add Image In HTML From A Folder
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you how to add image in HTML from a folder, with the help of Images a page sounds to be 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.
You can insert image in a webpage or in html from internet, directory of your computer, from local drives and from a folder also. Today, we understood how we are able to add an image from a folder.
Step By Step Guide On How To Add Image In HTML From A Folder :-
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. Today, we will specify the concept of adding an image from a folder in HTML.
Here, we say about image from folder. Hence, first thing is that the image should be downloaded or present in your folder. A general use of image tag to add images from a folder 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” width=”200px” height=”150px” alt=”an image is here from local drive”>
</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, height, width and alt etc.
- Here src specifies the source file with its .extensions. Here, we have to give the name of image file that’s present in any folder of your computer. For this, select the image and copy its path from image properties. Now, after copying paste it in src attribute of image tag and its done.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Attributes of embed tag are
- src - as we already know, src attribute is used to give the image file location in code with its extension like .jpeg, .jpg, .png, etc…
- alt - here alt stands for alternative text, it means that if due to some error in any case image is not displayed on browser screen, then this alternative tag is used the text written inside in this tag is displayed when image file in not displayed. So, that the user may able to know about what the image is about.
- Height - the height attribute is used in img tag just to give image dimensions about height and it may be in percent and pixel also, height is only used to give height to image.
- Width - As height, width attribute is used in img tag just to give image dimensions about width and it may be in percent and pixel also as height, width is only used to give width to image.
Conclusion :-
At last, we can insert an image in html by using image tag with its attributes. With the help of an image, a webpage looks more attractive and to insert an image from a folder, we only have to give image path with its name and extension in src attribute.
I hope this tutorial on how to add image in HTML from a folder helps you.
About Pragati
