HTML - Images
Using <img> tag we can insert any image in our web page specify correct image file name in src attribute. The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.
Syntax
<img src = "Image URL" ... attributes-list/>
Example
<!DOCTYPE html> <html> <head> <title>Image tag Example</title> </head> <body> <img src="assets/img/lem_line.gif"> </body> </html>
Output
| Attribute | Description | HTML Compatibility |
|---|---|---|
| align <img align="left|right|middle|top|bottom"> | Alignment of the image | Deprecated in HTML 4.01, Obsolete in HTML 5 |
| alt | Alternative text to display if image can not be displayed | HTML 4.01, HTML 5 |
| border | Width of the border around the image | Deprecated in HTML 4.01, Obsolete in HTML 5 |
| crossorigin | Enumerated value indicating whether the image must be fetched using CORS. Can be the following values: anonymous - means a cross-origin request is performed with no credentials use-credentials - means a cross-origin request is performed with credentials | HTML 5 |
| height | Height of the image In HTML 4.01, height can be in pixels In HTML 5, height can be in either pixels or as a percentage | HTML 4.01, HTML 5 |
| hspace | White space to insert to the left and right of image (expressed in pixels) | Deprecated in HTML 4.01, Obsolete in HTML 5 |
| ismap | Boolean value indicating whether the image is part of a server-side map | HTML 4.01, HTML 5 |
| longdesc | URL of a description of the image | HTML 4.01 (in HTML 5, use the <a> tag |
| name | Name of the element (use the id attribute instead) | Deprecated in HTML 4.01, Obsolete in HTML 5 |
| src | URL of the image | HTML 4.01, HTML 5 |
| width | Width of the image (expressed in either pixels or percent) | HTML 4.01, HTML 5 |
| usemap | Partial URL of an image map for the element. Partial URL starts with # | HTML 4.01, HTML 5 |
| vspace | White space to insert above and below the image (express in pixels) | Deprecated in HTML 4.01, Obsolete in HTML 5 |
Image Width/Height Attributes
We can set image width and height using width and height attributes. We can specify width and height of the image in terms of either pixels or percentage of its actual size.
Example
<!DOCTYPE html> <html> <head> <title>Set Image Width and Height</title> </head> <body> <img src = "picts/rkt.jpg" alt = "Test Image" width = "150" height = "100"/> </body> </html>
Output
Image Border Attributes
We can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.
Example
<!DOCTYPE html> <html> <head> <title>Set Image Width and Height</title> </head> <body> <img src = "picts/rkt.jpg" alt = "Test Image" width = "150" height = "100" border="2"/> </body> </html>
Output
Image Alignment Attributes
By default, image will align at the left side of the page, but we can use align attribute to set it in the center or right.
Example
<!DOCTYPE html> <html> <head> <title>Set Image Width and Height</title> </head> <body> <img src = "picts/rkt.jpg" alt = "Test Image" align = "center"/> </body> </html>
Output
0 Comments