Assignments for Class 6: Adding images to web pages

Rashmi Mishra
personRashmi Mishra
September 10, 20248 minute read
0

 Assignments for Class 6: 

Adding images to web pages

Assignment 1: Basic Image Insertion

  • Task: Create an HTML page that displays three different images.
  • Instructions:
    • Use the <img> tag to insert the images.
    • Include appropriate alt text for each image.
    • Ensure that one image uses a relative path, one uses an absolute URL, and one is a local file.

Assignment 2: Image Sizing and Resizing

  • Task: Create an HTML page that displays an image in three different sizes.
  • Instructions:
    • Use the width and height attributes to resize the image to small, medium, and large sizes.
    • Ensure that the aspect ratio of the image is maintained in all three versions.
    • Use CSS to set the size of the image using width: 100%; height: auto;.

Assignment 3: Responsive Images

  • Task: Create an HTML page that displays a responsive image.
  • Instructions:
    • Use the srcset attribute to provide different image sizes for different screen resolutions.
    • Include images that display a small version on mobile, a medium version on tablets, and a large version on desktops.
    • Test the page on different devices or use developer tools to simulate different screen sizes.

Assignment 4: Image Formats and Accessibility

  • Task: Create an HTML page that includes images in three different formats: JPEG, PNG, and SVG.
  • Instructions:
    • Insert one photograph (JPEG), one logo (PNG), and one scalable graphic (SVG).
    • Add descriptive alt text for each image.
    • Explain in comments within the HTML code why each format was chosen for the respective image.

Assignment 5: Image Styling and Alignment

  • Task: Create an HTML page that displays an image aligned to the right with text wrapping around it.
  • Instructions:
    • Use CSS to float the image to the right.
    • Add margin around the image to create space between the image and the text.
    • Include a paragraph of text that wraps around the image.

Assignment 6: Image Gallery

  • Task: Create a simple image gallery on a webpage.
  • Instructions:
    • Include at least six images in the gallery.
    • Use CSS to style the images with a consistent size and margin.
    • Ensure that each image has alt text.
    • Optionally, use CSS grid or flexbox to layout the gallery.

Assignment 7: Using External Images with srcset

  • Task: Create a webpage that displays an image sourced from an external URL using the srcset attribute.
  • Instructions:
    • Use an image hosting service or a public image URL.
    • Provide different sizes of the image to be displayed based on the device's resolution.
    • Include the alt text for accessibility.

Assignment 8: Exploring the picture Element

  • Task: Create an HTML page using the <picture> element to display different images based on screen size or format.
  • Instructions:
    • Use the <source> element within the <picture> tag to specify different image sources for different media conditions (e.g., screen size or image type).
    • Provide fallback content using the <img> tag for browsers that don’t support the <picture> element.
    • Include descriptive alt text for the images.

Solutions 

Assignment 1: Basic Image Insertion

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Basic Image Insertion</title>

</head>

<body>

    <h1>Basic Image Insertion</h1> 

    <!-- Image using a relative path -->

    <img src="images/local-image.jpg" alt="A local image using relative path"> 

    <!-- Image using an absolute URL -->

    <img src="https://www.example.com/images/remote-image.jpg" alt="An image from a remote server"> 

    <!-- Image using a local file path -->

    <img src="C:/Users/YourUsername/Pictures/local-file.jpg" alt="A local file image">

</body>

</html> 

 Assignment 2: Image Sizing and Resizing

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Image Sizing and Resizing</title>

</head>

<body>

    <h1>Image Sizing and Resizing</h1> 

    <!-- Small image -->

    <img src="image.jpg" alt="Small version of the image" width="200"> 

    <!-- Medium image -->

    <img src="image.jpg" alt="Medium version of the image" width="400"> 

    <!-- Large image -->

    <img src="image.jpg" alt="Large version of the image" width="600"> 

    <!-- Responsive image using CSS -->

    <img src="image.jpg" alt="Responsive image" style="width: 100%; height: auto;">

</body>

</html> 

 Assignment 3: Responsive Images

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Images</title>

</head>

<body>

    <h1>Responsive Image Example</h1>

     <!-- Responsive image using srcset -->

    <img src="small.jpg"

         srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

         alt="A beautiful landscape">

</body>

</html> 

 Assignment 4: Image Formats and Accessibility

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Image Formats and Accessibility</title>

</head>

<body>

    <h1>Image Formats and Accessibility</h1>

     <!-- JPEG Image -->

    <img src="photo.jpg" alt="A photograph in JPEG format">

     <!-- PNG Image -->

    <img src="logo.png" alt="A logo in PNG format with transparency"> 

    <!-- SVG Image -->

    <img src="graphic.svg" alt="A scalable graphic in SVG format">

</body>

</html> 

 

Assignment 5: Image Styling and Alignment

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Image Styling and Alignment</title>

    <style>

        .image-right {

            float: right;

            margin: 10px;

        }

    </style>

</head>

<body>

    <h1>Image Styling and Alignment</h1>

 

    <img src="image.jpg" alt="An image aligned to the right" class="image-right">

     <p>

        This is a paragraph of text that wraps around the image.

        By floating the image to the right, the text flows around

        it, creating a visually appealing layout.

    </p>

</body>

</html> 

 Assignment 6: Image Gallery

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Image Gallery</title>

    <style>

        .gallery {

            display: flex;

            flex-wrap: wrap;

            gap: 10px;

        }

        .gallery img {

            width: 150px;

            height: 100px;

            object-fit: cover;

        }

    </style>

</head>

<body>

    <h1>Simple Image Gallery</h1>

     <div class="gallery">

        <img src="image1.jpg" alt="Image 1">

        <img src="image2.jpg" alt="Image 2">

        <img src="image3.jpg" alt="Image 3">

        <img src="image4.jpg" alt="Image 4">

        <img src="image5.jpg" alt="Image 5">

        <img src="image6.jpg" alt="Image 6">

    </div>

</body>

</html> 

 Assignment 7: Using External Images with srcset

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>External Images with srcset</title>

</head>

<body>

    <h1>Using External Images with srcset</h1>

 

    <!-- Responsive external image using srcset -->

    <img src="https://example.com/small.jpg"

         srcset="https://example.com/large.jpg 1024w, https://example.com/medium.jpg 640w, https://example.com/small.jpg 320w"

         alt="A beautiful landscape hosted externally">

</body>

</html> 

 Assignment 8: Exploring the picture Element

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Exploring the picture Element</title>

</head>

<body>

    <h1>Responsive Images with the picture Element</h1>

     <picture>

        <source srcset="image.webp" type="image/webp">

        <source srcset="image.jpg" type="image/jpeg">

        <img src="fallback.jpg" alt="A fallback image for unsupported formats">

    </picture>

</body>

</html> 

 

 

 

Tags

You Might Like

Show more
assignments

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post link