Week2 || Day1
Multimedia in HTML.
Multimedia elements (audio, video, and images) enhance web content by
making it more interactive and engaging. HTML provides various tags for
embedding multimedia.
1. Images in HTML ( <img> )
Images can be added using the <img> tag.
src → Specifies the image URL.
alt → Alternative text (for accessibility).
width & height → Control image size.
Example: Adding an Image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
Week2 || Day1 1
<title>HTML Image Example</title>
</head>
<body>
<h2>HTML Image Example</h2>
<img src="https://via.placeholder.com/300" alt="Sample Image" width
="300">
</body>
</html>
2. Audio in HTML ( <audio> )
The <audio> tag allows embedding sound files.
controls → Displays play, pause, and volume options.
autoplay → Starts playing automatically.
loop → Repeats audio.
Example: Adding an Audio File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>HTML Audio Example</title>
</head>
<body>
<h2>HTML Audio Example</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Week2 || Day1 2
Note: The <source> tag allows multiple formats (MP3, OGG,
WAV) for better browser compatibility.
3. Video in HTML ( <video> )
The <video> tag is used to embed video files.
controls → Displays play, pause, volume controls.
autoplay → Starts playing automatically.
loop → Repeats the video.
poster → Defines a preview image before playing.
Example: Adding a Video File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>HTML Video Example</title>
</head>
<body>
<h2>HTML Video Example</h2>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Tip: Use different video formats (MP4, WebM, OGG) for
better browser support.
4. Embedding YouTube Videos
Week2 || Day1 3
To embed a YouTube video, use the <iframe> tag.
Example: Embedding a YouTube Video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Embed YouTube Video</title>
</head>
<body>
<h2>Embedded YouTube Video</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0"
allowfullscreen>
</iframe>
</body>
</html>
Key Takeaways
✔ Images ( ) enhance web pages with visuals.
<img>
✔ Audio ( ) supports sound with controls.
<audio>
✔ Video ( ) embeds videos directly into pages.
<video>
✔ YouTube Videos ( ) allow embedding online content.
<iframe>
@MohamedAbdiKaniAhmed 😊
Week2 || Day1 4
