Scribd
Upload
25 views

Lesson 2.1

This document discusses how to add multimedia like images, video, and audio to web pages using HTML tags. It defines multimedia as any combination of images, video, audio, or animation. It provides the common file formats and extensions for images, video, and audio. It then explains the <img>, <video>, and <audio> tags and their attributes to embed these multimedia types in HTML pages. The objective is to learn to identify multimedia and use the HTML multimedia tags.

Uploaded by

ANIMATION
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views

Lesson 2.1

This document discusses how to add multimedia like images, video, and audio to web pages using HTML tags. It defines multimedia as any combination of images, video, audio, or animation. It provides the common file formats and extensions for images, video, and audio. It then explains the <img>, <video>, and <audio> tags and their attributes to embed these multimedia types in HTML pages. The objective is to learn to identify multimedia and use the HTML multimedia tags.

Uploaded by

ANIMATION
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Lesson 2.

1:Using HTML
Multimedia Tags
▪ I can identify multimedia.
▪ Identify and use the HTML multimedia
tags.
QUESTION:
What makes a web page or a
website more appealing?
What is Multimedia?
▪ Multimedia refers to any visual
representation that has a combination of
image, video, audio, or animation.
▪ When adding a multimedia, we must
remember that all images, video, and
audio are all subject to copyright.
▪ It is also important that we make sure we
specify the correct file name and format
for the image, video, or audio.
Multimedia Formats
File Type File Format File Extension

Image JPG .jpg or .jpeg


PNG .png
GIF .gif

Video MP4 .mp4


WebM .webm
Ogg .ogg

Audio MP3 .mp3


WAV .wav
Ogg .ogg
Image Tag
▪ To add an image to our webpage, we use the <img> tag.
Syntax: <img src = “filename.extensionfile”>
Example: <img src = “myimage.jpg”>
Image Attributes
Attribute Value Description
alt text Means alternate.
Provides alternate text or description for the image we
cannot view or does not load.
height pixels (px) Sets the height of the image.
percent (%)

src URL Means source.


Provides the URL and the file name of the image.
width pixels (px) Sets the width of the image.
percent (%)
Image as a Link
▪ We can use an image as a link. To do this, put the <img> tag
inside the <a> tag.
Syntax: <a href = “URL of the link”>
Video Tag
▪ To show a video on the web page, we use the <video> tag.
Syntax: <video> <source> </video>
Video Attributes
Attribute Value Description
autoplay autoplay Plays the video automatically.
controls controls Adds video controls that includes play, pause, and volume
buttons.
height pixels (px) Sets the height of the video.
percent (%)
loop loop Plays video over again every time it is finished.
muted muted Mutes the audio of the video.

src URL Provides the URL of the video.

width pixels (px) Sets the height of the video.


percent (%)
Audio Tag
▪ To play an audio on the web page, we use the <audio> tag.
Syntax: <audio> <source> </audio>
Audio Attributes

Attribute Value Description


autoplay autoplay Plays the audio automatically.
controls controls Adds audio controls that includes play,
pause, and volume buttons.
loop loop Plays audio over again every time it is
finished.
muted muted Mutes or silences the audio.
src URL Provides the URL of the audio.
Objective/s

I can identify multimedia.

Identify and use the


HTML multimedia tags.

You might also like