Image Exercises
Using the <img> tag with src, alt, width, height attributes and image alignment techniques.
Basic Image Tag
The <img> tag embeds images. It is a self-closing (void) element.
Image with width="300", alt text, and inline border styling.
<img src="images/photo.jpg" alt="A description of the image" width="300" height="180" >
Image as a Link
Wrap an <img> inside an <a> tag to make it clickable:
<a href="https://www.example.com" target="_blank"> <img src="images/photo.jpg" alt="Clickable image"> </a>
Image Sizing & Responsive Images
80 × 80
140 × 100
200 × 130
<!-- Fixed size --> <img src="photo.jpg" width="80" height="80" alt="..."> <!-- Responsive: CSS only --> <img src="photo.jpg" style="max-width:100%;height:auto" alt="..."> <!-- Percentage width --> <img src="photo.jpg" style="width:50%" alt="...">