HTML Image | HTML Img Tag

HTML Image

HTML Image tag is used to link the image in to the web page. The images were not embedded into the HTML page, they were linked in the HTML pages. That’s why the attributes will be required.

HTML Image Tag

<img src="tulip.jpg">	 

The above syntax is used to linked the image.

Caution:HTML image <img> tag support only .jpg,.png,.bmp.

src Attribute

The src attribute is used to specify the image file name to be embedded in the image element.And that is why src a specification is necessary in the image element.

src Attribute

<img src="tulip.jpg">	 

The above syntax is used to linked the image, using the src attribute.

height and width Attribute for image element

The height and width attribute is used to specify the image height and width which were embedded in the image element.

height and width Attribute

<img src="tulip.jpg" height="200" width="150">	 

The above syntax is used to adjust the height and width of the image, using the height and width attribute.

HTML img tag have alt Attribute

The alt attribute is used to specify the alternate text to that image. When the image is not visible than browser shows alt text in place of image.

image tag example with alt Attribute

<img src="tulip.jpg" alt="I am invisible image">	 

The above syntax is used to show the alt text at the place of the invisible image.

title Attribute

The title attribute is used to specify information about the image when you move your mouse over the image than the title text displayed as tool-tip text.

title Attribute

<img src="tulip.jpg" title="I am an image of the tulip flower.">	 

The above syntax is used to show the information of the image as displayed on the tool-tip.

Full Code Of Image Tag

<html>
    <body>
        <img src="tulip.jpg" height="400" width "300" alt="I am invisible image" title="I am an Image of the tulip flower.">	 
    </body>
</html>	

The complete code to link an image in the HTML Web Page with src, alt, height and width, title.

HTML Image Tag
Fig.1 – HTML Image Tag Or img tag Example with alt attribute.

Caution: It is a normal practice to keep all the images file in the images directory. But in the previous code we are assuming that the image file is exists in the same folder.

scr Attribute

<img src="images/tulip.jpg">	 

The above syntax is used to link the image, but that image is not available in the same directory it is in the images directory.

You can leave a response, or trackback from your own site.

One Response to “HTML Image | HTML Img Tag”

  1. Howdy would you mind sharing which blog platform you’re using?
    I’m looking to start my own blog soon but I’m having
    a hard time making a decision between BlogEngine/Wordpress/B2evolution and Drupal.

    The reason I ask is because your layout seems different then most
    blogs and I’m looking for something completely unique.
    P.S Apologies for getting off-topic but I had to ask!

Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape