How to add Image in HTML from desktop | Add image on HTML.

Add Image in HTML from desktop or Any Location || Add image on HTML

How to add Image in HTML from desktop: Hello Coders, If you are facing issues while adding the Image in HTML pages from the Desktop.

Don’t worry, I will teach you to How to add Image in HTML from Desktop or Computer. So please read this article carefully and follow the steps. After that, you can easily add images to your HTML Documents.

Before starting the article you need to know about the <img> tag and its working, syntax etc.

What is Tag in HTML?

As we know, the tag is everything in HTML. Without the tag, HTML is nothing it would just be like a gun without bullets.

If you want to add elements like (paragraphs, heading, images etc) to your Web Page you need to use the particular HTML tags.

HTML provides lots of tags to display the content on the web page. For each element, HTML has a special tag.

What is <img> Tag in HTML?

HTML has a special tag to display the Image that is <img> tag.

<img> tag is used to display the image into the web page and this is the basic HTML tag. This is Unpair/Self closing tag, It means the <img> tag doesn’t has the special closing tag or pair tag like another tags (<p></p>, <div></div>).

But we can close the <img> tag by adding one extra forward slash at the end of the tag name like but before the closing bracket like this <img/>.

Syntax of <img> Tag in HTML?

As I already told you <img> tag is an unpair or self-closing tag so the syntax of this tag is given below

<img src=”” title=”” alt=””/>

In the above syntax, you can see one extra backslash (“/”) is added at the end of the tag name. This extra backslash is used to close the tag properly.

src, title and alt are the attributes of the <img> tag.

What are the Attributes of Image Tags?

HTML attribute is nothing, It is just a word or keyword that tells the web browser to add characteristics to the HTML elements.

<img> tag has lots of attributes. Some of the attributes are discussed below.

1. src attribute of img tag:

src, attributes specify the source of the image. It means where the image is located. It would be on the live server or on your computer.

<img src=”image source”/>

This is the required or main attribute of the <img> tag. If you didn’t set the height or width of the image tag then, the image will appear on the web page with the actual height and with of the source image. You can set it by using the <img> tag attribute or by using the css.

Example-1

<img src=”http://codescroller.com/wp-content/uploads/2022/04/logo-png.png”/>

Output-1

Note: Must use the complete path (“http://codescroller.com/ wp-content/uploads/2022/04/logo-png.png”) with the image name and proper image extension if the image is not located in your current project file. Otherwise, you can use this method (“./logo-png.png”).

2. title attribute of img tag:

The title attribute specifies the title of the image. The image title will display when the user moves the mouse pointer over the image.

Example-2

<img src=”http://codescroller.com/wp-content/uploads/2022/04/logo-png.png” title=”Image title attribute”/>

Output-2

You can see in the above example the text “Image title attribute” is displayed on the image. It is just a screenshot.

2. alt attribute of img tag:

The alt attribute is specified as alternative text for the image. This text will display when your image is not loaded on the web page for any reason some of the reasons are given below.

• Set the wrong source for the image.
• Image files are corrupted.
• The image is moved to another location.
• You changed the image name.
• The image source line will be broken.

Example-3

<img src=”http://codescroller.com/wp-content/uploads/2022/04/logo” alt=”How to Insert an Image in HTML”/>

Output-3

You can see in the output the alt text “How to Insert an Image in HTML” is displayed because I skip the image extension.

How to add Image in HTML from desktop?

So writing time is over, Now I am sharing the way to add Images in HTML from the desktop. To do this follow the given steps.

1.  Create a HTML document
2. Go to the desktop and select the image which you want to add in HTML
3. copy the complete image path or location with the image name and also image extension
4. add a <img> tag into the HTML document with the copied source image path
5. save the document and open it on the web browser.

If you don’t know how to copy the image path or location from the desktop. Follow these steps.

How to copy the image path from the Desktop?

1. Go to the desktop and select the image
2. Right-click on the selected image and click on the properties.
3. Copy the location and paste it into the notepad.
4. Again select the image and press f2 from the keyboard and copy the image name with the extension
5. Now concrete the image path with the image name by adding “\” forward slash.
6. The image location looks like “C:\Users\mi\OneDrive\Desktop\Go to desktop.png”
7. Now copy the complete path with the name and paste it to the <img> src attribute value.
8. <img src=”C:\Users\mi\OneDrive\Desktop\Go to desktop.png”/>

If you properly follow the above steps you definitely add the image in HTML from the desktop.

How to add Image in HTML from desktop Complete Example?

How to add background image in HTML from desktop

You can add background images in HTML from the desktop by using the same steps which we discuss earlier. But you need to change the little bit of HTML code.

Just add a CSS property “background-image” and paste the complete image path in the url(“”) method.

Example

After writing the above code the image will be displayed on the HTML page.

NOTE:- If the tag in which you want to set the image into the background has no content or less content then must set the height and width value for the tag otherwise the image will not be displayed on the page.

FAQs: How to add Image in HTML from desktop

1) how to insert image in html from desktop?

you can easily insert the image from the desktop. First, you need to copy the source or path or location of the image. like “C:\Users\mi\OneDrive\Desktop”.

Then you need to copy the image name with an extension like “my-image.jpg”.

then contact the path and image name with “\” forward slash like “C:\Users\mi\OneDrive\Desktop\my-image.jpg”.

After that add this complete path into the img src attribute. For Example

<img src=”C:\Users\mi\OneDrive\Desktop\my-image.jpg”/>

Conclusion

I hope you understand the adding image process. If still, you have any queries regarding the “How to add Image in HTML from desktop” then you can ask me using the comment.

I will definitely try to solve your query. Thanks for reading this article.