2.4. Class Exercise (10 minutes)

Objective:

The goal of this exercise is to have students apply what they have learned by creating a complete webpage that includes text, an image, and either an audio or video file. This exercise will reinforce their understanding of HTML elements and attributes, as well as the process of embedding media into a webpage.

Instructions for the Exercise:

  1. Open the Existing HTML File:

  • Instruct students to open their previously created HTML file (from earlier lessons) using their preferred text editor (such as Notepad or Visual Studio Code).

  • If they don’t have an existing file, they can create a new one using the basic HTML structure.

  1. Add Text, Image, and Media to the Webpage:

  • Students need to ensure their webpage contains the following elements:

    • Heading and Paragraph: Add a heading and a paragraph with some text describing the content of the webpage.

    • Image: Add an image to the page using the <img> tag. They can use either a public image URL or a local image file.

    • Media File: Add either an audio or video file using the appropriate tag (<audio> or <video>). The media can be embedded from a public source (e.g., an online video or audio link) or a local file stored on their computer.

Example of a complete webpage with all elements: multimedia.html

// Some code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class Exercise Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a webpage created during the class exercise. It includes text, an image, and a media file.</p>

    <!-- Adding an image -->
    <img src="https://www.example.com/sample-image.jpg" alt="A description of the image" width="300">

    <!-- Adding a video -->
    <h2>Embedded Video</h2>
    <video width="320" height="240" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <!-- Alternatively, they could add audio instead of a video -->
    <h2>Embedded Audio</h2>
    <audio controls>
        <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

  1. Save and Test the Webpage:

  • After finalizing the code, ask students to save their HTML file and open it in their browser to check if all elements (text, image, and media) are displayed and functioning correctly.

  • Encourage students to ensure the image loads, the media plays properly, and the text is formatted as expected.

Feedback and Peer Review:

  1. Peer Review Session:

  • Pair students up or form small groups. Each student should share their webpage with a peer or group, either by showing their screen (if working online) or allowing others to view their browser window (if working in person).

  • Each student should give constructive feedback on their peer’s webpage, focusing on the following:

    • Text: Is the text properly formatted (using headings, paragraphs)?

    • Image: Does the image load correctly, and does it have appropriate alt text for accessibility?

    • Media: Does the audio or video play properly? Are the controls visible and functional?

  1. Instructor Feedback:

  • The instructor can select a few webpages for review with the whole class. Provide feedback on:

    • Code structure: Is the HTML code well-organized and easy to read?

    • Content layout: Are the text, image, and media elements correctly placed on the page?

    • Accessibility: Is the alt attribute used for the image, and is the media file accessible to all users?

Reflection:

Once the peer review and feedback session is complete, encourage students to reflect on their learning by answering the following questions:

  • How does the combination of text, images, and media enhance the user experience of a webpage?

  • What challenges did they face while embedding the media or formatting the page?

  • How might they use these skills in future projects to create more interactive or visually appealing websites?

This short exercise not only reinforces the practical skills learned in the previous lessons but also gives students a chance to apply those skills in a collaborative and interactive environment.

Previous2.3. Adding Videos and Audio (25 minutes)NextLecture_3_Links, Lists, and Tables

Last updated