HTML Exercises

Create a Responsive Webpage with the <picture> Element

Create a simple registration form with the following fields:

• Create a simple webpage that uses the <picture> element to load different images depending on the screen size.

• Use at least three image variations (e.g., for mobile, tablet, and desktop sizes).

HTML

<!DOCTYPE html>
     <html lang="en">
     <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive Image with Picture Element</title>
     </head>
     <body>
                        
        <h1>Responsive Webpage with Multiple Images</h1>
        <p>This example demonstrates how to use the <code>&lt;picture&gt;</code> element to display different images depending on the screen size.</p>
                        
            <!-- Responsive image with the <picture> element -->
            <picture>
                <!-- Image for large screens (desktop) -->
            <source media="(min-width: 1024px)" srcset="images/large-image.jpg">
                                
                <!-- Image for medium screens (tablet) -->
            <source media="(min-width: 768px)" srcset="images/medium-image.jpg">
                                
                <!-- Image for small screens (mobile) -->
            <source media="(max-width: 767px)" srcset="images/small-image.jpg">
                                
                <!-- Fallback image if the browser doesn't support the <picture> element -->
            <img src="images/default-image.jpg" alt="Responsive image">
            </picture>
                        
            <p>Resize the browser window to see how the image changes based on screen size.</p>
                        
    </body>
    </html>
                        

1. index.html in your browser to view your website.
Online HTML Editor

Feel free to customize the content and structure as you like.

Explanation:

• <picture> element: This element allows you to define multiple sources for a single image, based on screen size or resolution.
• <source> elements: These specify different image sources based on media queries.
  • media="(min-width: 1024px)": Displays the large image for screens wider than 1024px.
  • media="(min-width: 768px)": Displays the medium image for screens between 768px and 1024px.
  • media="(max-width: 767px)": Displays the small image for screens 767px and below (typically mobile devices).
• Fallback image: If a browser doesn’t support the <picture> element, the <img> tag serves as a fallback, ensuring that an image is still displayed.

Task for the Student:

1. Modify the image sources: Replace the srcset values with your own images of different sizes (for desktop, tablet, and mobile).
2. Test responsiveness: Resize the browser window and observe how the image changes as the screen width reaches the defined breakpoints.
3. Explore other media queries: Try changing the media queries to experiment with different breakpoints.