HTML Multimedia Tags

Objectives:
1. Explain what is a multimedia
2. Identify the tags and attributes used to
insert a multimedia into the webpage
3. Application of multimedia tags and
attributes into a webpage
What makes a webpage or a
website more appealing?
What is a 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
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.
HTML Youtube Videos
▪ To play a video from youtube, we use the
<iframe> tag.
Syntax: <iframe> <source> </iframe>
Youtube Video Attributes
Attribute Value Description
autoplay autoplay=1 Plays the video automatically.
controls controls=1 Adds video controls that includes play, pause, and
volume buttons.
height pixels (px) Sets the height of the video.
percent (%)
loop loop=1 Plays video over again every time it is finished.
mute mute=1 Mutes the audio of the video.

src URL Provides the URL of the video.

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

percent (%)