HTML notes: Multimedia and Interactive Elements
Learning Objectives
By the end of this lesson, students will be able to:
1. Insert and control video and audio in a webpage.
2. Embed YouTube videos using <iframe>.
3. Style elements using class attribute.
4. Create interactive buttons.
5. Design and use basic HTML forms.
Lesson Breakdown (2 Hours)
0-10 mins | Introduction and Recap of Previous Topics
10-30 mins | Embedding Videos and Audio
30-45 mins | Embedding YouTube Videos
45-60 mins | Understanding class Attribute in HTML
60-75 mins | Creating and Styling Buttons
75-100 mins| Building HTML Forms
100-120 mins| Practice Task + Review + Q&A
1. Video in HTML
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Attributes:
- controls - shows video controls
- autoplay - plays video automatically
- loop - repeats video
- muted - starts video with sound off
2. Audio in HTML
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Supported formats: MP3, WAV, OGG
3. YouTube Embed Using <iframe>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen></iframe>
Replace VIDEO_ID with actual YouTube video ID.
4. Using class Attribute
HTML:
<p class="highlight">This is a styled paragraph.</p>
CSS:
.highlight {
color: white;
background-color: blue;
padding: 10px;
}
Use classes to apply the same style to multiple elements.
5. Buttons in HTML
<button class="myButton">Click Me!</button>
CSS:
.myButton {
background-color: green;
color: white;
padding: 10px 20px;
border-radius: 8px;
border: none;
cursor: pointer;
}
6. HTML Forms
<form action="/submit" method="post">
<label>Name:</label><br>
<input type="text" name="username"><br><br>
<label>Email:</label><br>
<input type="email" name="email"><br><br>
<label>Message:</label><br>
<textarea name="message"></textarea><br><br>
<button type="submit">Send</button>
</form>
Form Elements:
- input types: text, email, password, checkbox, radio, file
- textarea
- button (submit/reset)
- select dropdowns
Practice Activity
Ask students to create a webpage with the following:
- An embedded YouTube video
- A local video and audio player
- A button styled using a class
- A form with text, email, and message fields
Homework
1. Create an HTML page with:
- One video from your computer
- One embedded YouTube video
- One audio file
- Two buttons with different styles
- A form that includes a name, email, gender (radio), and comments
2. Save your file as multimedia-form.html and submit it.
Tips
- Always test your video/audio file paths
- Use developer tools to inspect and debug your elements
- Ensure form action and method are defined properly for submission
(can be left empty for local testing)