How to insert image in HTML Document from Desktop

HTML is a markup language. People use the language for formatting web pages. There are plenty of web programming languages in the market. But HTML still remains the predominant one. You can add different elements to the HTML web page. Do you want to learn how to insert image in HTML? Want a simple code that can add image in HTML? Go through the complete article to know more about the same.

How to Insert Image in HTML

How to Insert Image in HTML  

HTML allows users to add images to their web page. Images are an essential part of a web page. When you open a website, the first thing that attracts you is the image. Images give an overview of the website to the user. You can add multimedia files like video clips, audio clips, and images to the document. There is a separate tag for adding an image in HTML. Add a picture in between the text or as background. Use the attributes of the image to position the image according to your requirement.

See More: TweakBox Apk

How to Add Image in HTML using NotePad

Search for an image on the internet or use your own image. Images are available free of cost on a lot of websites. Use the following steps for adding an image in HTML.

  • First, search for a notepad on your device. You can click on the start button and use the search bar for the same.
  • Create a HTML document. You will have to save the document with “.html” extension. Always begin with HTML tag for the HTML document. If you already have an HTML document you can use that one.
  • Add “img” tag to a point at which you want image insertion. Make sure you write the tag in brackets. You don’t need to write a closing tag, as this tag is an empty tag.
  • In the img tag, you need to add certain attributes. The first one being “src”. This attribute adds HTML image link. Go to the location of the image. Select and copy the URL. Alternatively, you can right-click on the image and tap on copy image location. This option will copy the URL. For example: <img src=http://www.alphabets.org/a.jpg/>. The attribute would add image to html.

Add Image in HTML

  • Sometimes the image doesn’t appear on the screen. There may be some technical issues in such cases. Add an alt attribute to the tag. The alt is an alternative text that appears when the image doesn’t appear.
  • Width and height attribute plays an important role in the image setting. You can set the size of the image according to the web page. For example- After the src attribute, write width=”200”. Similarly, you can mention the height.
  • Use the class attribute to set the position of the image.
  • Another way of adding attributes to the image tag is using style tag. HTML allows usage of style tag in the head tag. You can set the attributes and reuse them for other images.
  • Press the CTRL and S keys on the keyboard to save the file. This way you can successfully add image to HTML.

Also, check: Pokemon Go Mod

How to Insert Background Image in HTML

The body tag has an attribute called background. Add the URL of the image to the background attribute. The image would then appear in the background. You might have learned by now How to Insert Image in HTML. Now, add images to your HTML page and make it more attractive.

Leave a Reply

Your email address will not be published. Required fields are marked *