Images in html

Images are displayed in html using the img tag.

The img tag has two main attributes. The src attribute gives the path of the image file.

For instance


<img src="pics/rose0.jpg"/>

An alt attribute can be defined and it will be displayed if the image is not found.


<img src="pics/rosvhvhhge0.jpg" alt="Not found"/>

We can also give a web address into the img tag.


<img src="https://www.gardenexpress.com.au/wp-content/uploads/2014/11/Mr_Lincoln_2014.jpg" alt="Rose" />

Rose

HTML5 introduced the picture element for image.


<picture>
<source media="(min-width: 1000px)" srcset="pics/rose0.jpg">
<source media="(min-width: 800px)" srcset="pics/rose1.jpg">
<source media="(min-width: 600px)" srcset="pics/rose2.jpg">
<img src="pics/Capture.JPG"/>
</picture>

This will show different images at different sizes.

 

 

Leave a Reply