In order to insert images in HTML, you need to make use of the <img> tag.
Tags in HTML are the statements enclosed in <> and </> For instance <strong> peter</strong> makes the word peter appear bold on the web page. You can even have audio and video embedded to your web page using tags.
Well, let us dive right into the code and see how we can insert the image into our web page.
relative reference: <img src="images/pic.jpg"/> absolute reference: <img src="http://www.website.com/images/pic.jpg"/>
Referring to the image from your HTML file
There are different ways in which you can reference an image in a HTML file. The simplest one is placing the image in the same folder as the rest of your HTML files and referencing is by name in the src parameter of the img tag. When you do this, you need to remember to place the image in the same folder while uploading to the server as well.
If you put the image in a sub-folder, you can refer to the image this way:
If the subfolder is in a parent folder, use the .. (two dotes) to indicate parent folder:
Another option is to opt for the absolute path. You will have to enter the full link to the image. This may come in handy when you are linking an image on another site from your page.
Both relative and absolute referencing for the images will show the image regardless of where it is located so your choice will depend on the location of the image. However, when you have your images in one location, relative referencing is the best since you can move your site to a new server without having to change a single line of code.
Width & Height
In addition to the path to the image file, it is better to give the width and height of the image if possible. Any image viewing tool (like irfan view ) can show you the image size in pixels. Giving the size of the image in HTML allows the browser to give enough space for the image as the image is loading (rather than jumping the content once the image is loaded)
<img src="images/pic.jpg" width="302" height="231" />