Lesson: Adding Images and Multimedia

Objective

Students will learn how to enhance a webpage by adding images and embedding videos while ensuring accessibility.

Materials

Computer with internet access
Text editor (e.g., VS Code, Sublime Text)
Web browser
Sample image file (or access to an online image)
YouTube video link

Lesson Outline

1. Introduction

Discuss the importance of multimedia in web design (engagement, visual appeal, and accessibility). Introduce HTML elements: <img> for images and <iframe> for embedding videos.

2. Adding an Image

Basic Syntax:


        <img src="image.jpg" width="400" height="300" alt="Description of the image">

Explanation:

src: Specifies the image source.
width & height: Controls the image size.
alt: Provides alternative text for accessibility.

3. Embedding a YouTube Video

Basic Syntax:


        <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe>

Explanation:

src: The YouTube embed link.
width & height: Controls video size.
allowfullscreen: Enables full-screen mode.

4. Accessibility and Best Practices

Importance of alt text for images.
Video captions and accessibility features.
Ensuring images and videos do not slow down page loading.

5. Wrap-Up and Review

Students present their work and discuss challenges.
Recap key concepts: using <img> and <iframe>.