Day 3: HTML Multimedia and Embedded Content

Quiz ahead

The concept of multimedia allows us to communicate using various media including text, images, graphs, audio, video, or a combination of them. Multimedia and embedded content can significantly enhance our websites by adding interactivity and engaging elements.

This tutorial will cover how to use images, audio, video, and iframes in a web document.

1. Images

Images are often used to add visual interest or convey information on web pages.

<img src="example.jpg" alt="A descriptive text of the image" width="300">

src: The path to the image file.
alt: Alternative text for accessibility and when the image can't be displayed.
width: Sets the width of the image.

2. Audio

Audio elements allow you to embed sound files that users can play directly on your web documents

<audio src="audio.mp3" type="audio/mpeg"  controls muted autoplay loop>
<p>
Your browser does not support audio tag. 
<a href="audio.mp3" download="audio.mp3">Download</a>
</p>
</audio>

controls: Adds play, pause, and volume controls.
src: The path to the audio file.
type: Specifies the type of audio file.
muted: Mutes the audio
loop: Repeats the audio back to back

3. Video

Videos can be embedded to provide visual and auditory content.

<video width="640" height="360" controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

width and height: Define the size of the video player.
controls: Provides play, pause, and volume controls.
src: The path to the video file.
type: Specifies the type of video file.

4. Iframes

Iframes allow you to embed another HTML page within your page. This can be used for maps, other websites, or external content.

<iframe src="https://www.lancecourse.com" width="600" height="400" frameborder="0">around  Your browser does not support iframes.around</iframe>

src: The URL of the page to embed.
width and height: Define the size of the iframe.
frameborder: Set to 0 to remove the border.

Sample Project: Multimedia Showcase Page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Multimedia and embeded content</title>
</head>
<body>
    <img src="sandals.jpg" width="200" height="200" alt="sandals" />
    <a href="fresh_news.html" target="news_frame">Get fresh news</a>
    <audio src="audio.mp3" controls muted autoplay loop>
        <p>Your browser does not support audio tag. <a href="audio.mp3" download="audio.mp3">Download</a></p>
    </audio>

    <video src="INTRO.mp4" controls muted loop width="300" poster="sandals.jpg"></video>

    <iframe src="news.html" name="news_frame" width="200" height="400" scrolling></iframe>
</body>
</html>

Assignment 3

Objective: Create a personal multimedia gallery page showcasing your favorite media content.

Requirements:
Image Section: Include at least two images of your choice. Use appropriate alt text and set appropriate width and height to make them proportional.
Audio Section: Embed an audio file with controls. Include a title and description.
Video Section: Embed a video file with controls. Include a brief description of the video. Iframe Section: Embed an iframe that displays a website of your choice. Ensure it fits well within the page.
Share: Share a screensho of your result on the WhatsApp group.

Take Quiz

LCC: Web Apps Development Essentials

Course by zooboole,

Last Updated on 2024-09-05 14:50:08