6Multimedia & Canvas
Intermediate25m
Embedding Images
Images are a core part of web pages. The <img> tag allows you to display pictures. Always include the alt attribute for accessibility.
html
<img src="profile.jpg" alt="Person smiling" width="300">
<img src="logo.png" alt="Website logo" height="100">Adding Video and Audio
HTML5 makes embedding multimedia easy. Use <video> for videos and <audio> for sound. Include controls so users can play, pause, or adjust volume.
html
<video src="intro.mp4" controls width="400"></video>
<audio src="music.mp3" controls></audio>💡 Tip: Provide multiple formats (MP4, WebM for video; MP3, OGG for audio) to ensure all browsers can play your media.
The Canvas Element
The <canvas> element lets you draw graphics and animations using JavaScript. Think of it as a blank area where you can paint shapes, lines, or even small games.
html
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'lime';
ctx.fillRect(50, 30, 100, 50);
ctx.strokeRect(50, 30, 100, 50);
</script>You can draw rectangles, circles, lines, and text. Canvas is also used for interactive graphics, charts, and games.
Mini Project Step 6: Interactive Multimedia Profile
Enhance your semantic profile page from Lesson 5 by adding images, video, audio, and a simple canvas graphic.
- Add a profile photo using <img> with alt text.
- Embed a short video introduction using <video> with controls.
- Include an audio clip, like background music or a short voice message.
- Create a <canvas> element that draws a rectangle or circle representing your favorite color or hobby.
- Test all media elements to ensure they load correctly and are accessible.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Profile</title>
</head>
<body>
<header>
<h1>My Multimedia Profile</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hello! Check out my profile with images, video, and audio.</p>
<figure>
<img src="profile.jpg" alt="Person smiling" width="200">
<figcaption>Me at my desk</figcaption>
</figure>
<video src="intro.mp4" controls width="320"></video>
<audio src="music.mp3" controls></audio>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'lightblue';
ctx.fillRect(10, 10, 100, 50);
</script>
</section>
</main>
<footer>
© 2025 Your name
</footer>
</body>
</html>💡 Bonus Challenge: Try adding shapes and text dynamically on canvas using mouse events or simple animations.