Including an image in html requires use of <img> tag. To display an image we have to give image path in src attribute image path can be path of image storage in local system or it can be a url.
Syntax
1 | <img src="path of image"/> |
img tag uses following few attributes
- src: This attribute is compulsory it provide path to image(including image name with extension). path may be either url or path of image in directory if image is in same directory where your htlm page is then you have to give image name with extension only.
- alt: It provides alter native text for image. If image is not loaded then browser will display this text message.
- width: We can set the width of image either in pixel value or % wise.
- height: We can set the height of image either in pixel value or % wise.
Tag
1 | <img src="path to image" alt="alternative text" width="width" height="height"> |
Example:
1 2 | <img src="https://static.pexels.com/photos/265987/pexels-photo-265987.jpeg"> |
img with alt attribute
1 2 3 | <img src="https://static.pexels.com/photos/265987/pexels-photo-265987.jpeg" alt="Image"> |
img with alt, width & height attribute
1 2 3 4 5 | <img src="https://static.pexels.com/photos/265987/pexels-photo-265987.jpeg" alt="Image" width="200" height="100"> |
1 2 3 4 5 | <img src="https://static.pexels.com/photos/265987/pexels-photo-265987.jpeg" alt="Image" width="30%" height="50%"> |
Output:
