You can insert an image using the <IMG> tag. This tag does not have an end tag. The basic syntax of <IMG> tag is given below :
Let us discuss the attributes one by one :
SRC : The address or the path to the image is taken as value by SRC attribute. Let us discuss the cases of different addresses that can be accepted by SRC attribute.
Case1
If you have saved “Flower.jpg” in “Documents” folder, then the address would be: “C:\My documents\My Pictures\Flower.jpg”
Case 2
If you have saved “Flower.jpg” in the same folder as the HTML document, then the address would be: “Flower.jpg”
Case 3
If “Flower.jpg” is not in your computer but is saved in folder ‘images’ of the Web server of yahoo, then the address would be: “http://www.yahoo.com/images/flower.jpg”.
Width and Height : The width and the height attribute defines the boundaries of image. The value can be an absolute number (recognized as pixels) or in percentage (in proportion to the size of web window).
For example :
An image of height 150 pixels and width 200 pixels is inserted on webpage as:
The output of the above code displays an image of two white flowers on the web page.
ALT : When the image does not get download (due to heavy traffic or unsupportive browser), the user may expect a description of the image. The “alt” attribute is used for such purposes as shown here:
For example :
Longdesc : If the description is too long, you can even attach an html file, in another attribute called “longdesc”. This attribute is complementary to “alt” attribute as shown:
For example :
Align : You can use the “align” attribute to place the image on left or right side of the webpage. If the align attribute is set to left, the image floats to the left margin. If it is set to right, the image floats to the right margin.
For example :
In the above code the paragraph tag <p> helps in forming the paragraph to be displayed along with the image on the webpage. “Alt” attributes describes the image when the image cannot be displayed by the browser. “Height” and “width” attribute decides the area of the image on the web page and the “align” attribute defines the position of the image on the web page. Since the image is set to the left side, the text flows towards the right side as seen in the output below:
