How to insert images in html

Hi everyone, this tutorial will be on HTML images. We will learn how to insert images on your webpage

A website without an image is somewhat boring; it makes your website more appealing to your visitors and it adds beauty to your site and much more.

So here we go now, so first we’re going to insert an image to our webpage

Inserting an image to your webpage

Let me first show to you the format on inserting an image:

<img src=”locationOfimage” alt=”sometexthere”  height=”10″ width=”10″>

Where:

<img> is the HTML tag that specifies images on your webpage. <img> tag has two basic attributes, the src and alt.

src or the source attribute, it is where the image is located.

“locationOfimage“ is the value of the source attribute, it is the address or url where the actual image is located. The image or file may reside on your web server or you can place the url of the image where it is stored. In this value, you should place the complete url and the exact filename including its file extension (jpg, jpeg, png, bmp,gif, etc.), otherwise the image will not be displayed in the browser.

alt stands for alternate text, the alt attribute specifies the alternate text for the image. The purpose of this attribute is to display the text if the image is can’t be displayed in the browser.

height and width is the attribute in which you can specify the size of your image (in pixels by default) to be displayed in the browser.

Example 1:

<img src="sample.jpg" alt="iNetTutor.com" width="100" height="42">

[wpdm_file id=13]

Example 2:

<img src="http://www.webgeekresources.com/images/stories/inet.jpg" alt="iNetTutor.com" 
width="100" height="42">

Note:

1. In the example (1) above, your html file and the image should be on the same directory, if not the image will not be displayed in the browser.
2. If you want to display the actual size of the image just remove the width and height attribute.
3. But it is recommended that you should always set the height and width of your image.