HTML Images

Images:

  • Images are defined with the <img> tag in HTML.
  • <img> tag contains only attributes.
  • <img> tag does not have closing tag.

ALT

  • alt attribute displays an alternate text for an image
  • If an image is not display, then alt attribute will display the value.

 

Program 1
<img src=”basicofy.png” alt=”basicofy.com”>
Output
basicofy.com

Width & Height

  •  For specifying the width and height of an image we use the style attribute.
Program 2
<img src=”basicofy.png” alt=”basicofy.com”width=”150″ height=”150″>
Output
basicofy.com

Images in Another Folder:

  • It is common to store images in a one folder.
  • You must then include the folder name in the src attribute.
Program 3
<img src=”09/basicofy2.png” alt=”basicofy.com” width=”150″ height=”150″ />
Output
basicofy.com

Image Floating

Program 5

<!DOCTYPE html>
<html>
<body>

<p><strong>Float the image at right:</strong></p>
<p>
<img src=”flower.jpeg” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
The floating image at RIGHT side.
</p>

<p><strong>Float the image at left:</strong></p>
<p>
<img src=”flower.jpeg” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
The floating image at LEFT side. </p>

</body>
</html>

Output

Float the image at right:

Smiley face The floating image at RIGHT side.

Float the image at left:

Smiley face The floating image at LEFT side.

 

Leave a Reply

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