SlideShare a Scribd company logo
1 of 10
DIFFERENT TYPES OF MULTIMEDIA IN
HTML DOCUMENTS
LESSON PLAN
OBJECTIVES
a.The students should able to:
i.Identify the different types of
multimedia;
ii.Understand the use and function of
different types of media;
iii.Familiarize the different tags use when
inserting different types of media in an
HTML document;
iv.Apply different media in their HTML
documents
SUBJECT MATTER
a.Title: DIFFERENT TYPES OF MULTIMEDIA IN HTML
DOCUMENTS
b.Materials: Notepad, Notepad++, Komodo Edit,
Computers, Projector, Projector Screen, PowerPoint
presentation, Office Remote using Smartphone and
Computer.
a.Pretest: Multiple choice
b.Recap: To test your memory, provide 5 HTML Input
attribute and their functions.
c.Motivation: show an example of website that uses
multimedia functions like youtube or Facebook as
example then show them an insert music or video in a
html file.
LESSON
PROPER
The teacher will introduce the new topic on the learners.
The learners will learn about common video and audio format with
description and examples of each format.
The learners will learn how to add a video and audio format in a
webpage. By using the <video> and <audio> elements.
During discussion students can also use the example on the PowerPoint
and test if they could run the given examples themselves a sort way for
them to familiarize the function of the given elements in the lesson.
GENERALIZATION
i. Multimedia comes in many different formats. It can be almost
anything you can hear or see. Examples: Images, music, sound,
videos, records, films, animations, and more.
ii.Web pages often contain multimedia elements of different types
and formats. The first web browsers had support for text only,
limited to a single font in a single color. Later came browsers with
support for colors and fonts, and images!
APPLICATION
•Learners will be given a chance to try
out inserting a video and audio file
using notepad, notepad++ and
Komodo by giving them a sample
problem.
EVALUATION
a.HTML Video and Audio
i.Add a heading 1 with the text HTML Video and
Audio. Use Blue as text color also set it in center.
ii.As the background color use your desire color.
iii.For first paragraph, write all the summary of all
the things that you have learned about our lesson
for today HTML Video and Audio. Use 5 as text
size.
EVALUATION
iv. Insert your favorite music video. Use the
control attribute with the width of 600 and for
height is 400. Insert also heading 3 with the
text “MY FAVORITE MUSIC VIDEO”
v.Under the Video put Line Break and Horizontal
rule. Insert your favorite Audio or Music, and set
control attribute for your audio and insert heading
3 with the text “MY FAVORITE MUSIC”
•
RUBRICS
For Activity 1 the students will get total of 30
points. Items
Points
1. Title of the webpage “HTML VIDEO and AUDIO”,
text alignment and font color
5
2. Background color of the whole webpage,
summarized paragraph and text size.
6
3. Inserted Video, use control attribute, put width
and height attribute.
7
4. Put Line break, and Horizontal rule
5
5. Inserted Audio, and use control attribute.
7
TOTAL 30
points

More Related Content

Similar to DIFFERENT TYPES OF MULTIMEDIA IN HTML DOCUMENTS.pptx

ICT MIDTERM WORKSHOP
ICT MIDTERM WORKSHOPICT MIDTERM WORKSHOP
ICT MIDTERM WORKSHOP
Işıl Boy
 
Ch.9 multimediatools
Ch.9 multimediatoolsCh.9 multimediatools
Ch.9 multimediatools
asheralicia
 
Ch9 multimediatools
Ch9 multimediatoolsCh9 multimediatools
Ch9 multimediatools
jhtrespa
 
Developing Speaking and Writing with Technology
Developing Speaking and Writing with TechnologyDeveloping Speaking and Writing with Technology
Developing Speaking and Writing with Technology
Vicky Saumell
 
Technology workshop
Technology workshopTechnology workshop
Technology workshop
tarpeyte
 
Artifacts P P T Gettings
Artifacts P P T GettingsArtifacts P P T Gettings
Artifacts P P T Gettings
LucWrite
 
Writing Distance Materials
Writing Distance MaterialsWriting Distance Materials
Writing Distance Materials
loveroman
 

Similar to DIFFERENT TYPES OF MULTIMEDIA IN HTML DOCUMENTS.pptx (20)

Voicethread as an approach to communication in eTwinning projects
Voicethread as an approach to communication in eTwinning projectsVoicethread as an approach to communication in eTwinning projects
Voicethread as an approach to communication in eTwinning projects
 
Web tools
Web tools Web tools
Web tools
 
ICT MIDTERM WORKSHOP
ICT MIDTERM WORKSHOPICT MIDTERM WORKSHOP
ICT MIDTERM WORKSHOP
 
Engaging Adult Learners Using Interactive Technologies
Engaging Adult Learners Using Interactive TechnologiesEngaging Adult Learners Using Interactive Technologies
Engaging Adult Learners Using Interactive Technologies
 
Multimedia Essentials Tutorial Website
Multimedia Essentials Tutorial WebsiteMultimedia Essentials Tutorial Website
Multimedia Essentials Tutorial Website
 
Effective Ways to Involve and Engage Students with Videos
Effective Ways to Involve and Engage Students with VideosEffective Ways to Involve and Engage Students with Videos
Effective Ways to Involve and Engage Students with Videos
 
How to do accessible social media
How to do accessible social mediaHow to do accessible social media
How to do accessible social media
 
Distributing Information Online
Distributing Information OnlineDistributing Information Online
Distributing Information Online
 
Lesson11
Lesson11Lesson11
Lesson11
 
Ch.9 multimediatools
Ch.9 multimediatoolsCh.9 multimediatools
Ch.9 multimediatools
 
Ch9 multimediatools
Ch9 multimediatoolsCh9 multimediatools
Ch9 multimediatools
 
Developing Speaking and Writing with Technology
Developing Speaking and Writing with TechnologyDeveloping Speaking and Writing with Technology
Developing Speaking and Writing with Technology
 
chapter 9
chapter 9chapter 9
chapter 9
 
Technology workshop
Technology workshopTechnology workshop
Technology workshop
 
Tips for Creating an Accessible & Engaging Virtual Classroom
Tips for Creating an Accessible & Engaging Virtual ClassroomTips for Creating an Accessible & Engaging Virtual Classroom
Tips for Creating an Accessible & Engaging Virtual Classroom
 
Creating Immersive Technology Experiences with Web-based Software & Resources
Creating Immersive Technology Experiences with Web-based Software & ResourcesCreating Immersive Technology Experiences with Web-based Software & Resources
Creating Immersive Technology Experiences with Web-based Software & Resources
 
Creating Immersive Technology Experiences with Web-based Software & Resources
Creating Immersive Technology Experiences with Web-based Software & ResourcesCreating Immersive Technology Experiences with Web-based Software & Resources
Creating Immersive Technology Experiences with Web-based Software & Resources
 
Artifacts P P T Gettings
Artifacts P P T GettingsArtifacts P P T Gettings
Artifacts P P T Gettings
 
Writing Distance Materials
Writing Distance MaterialsWriting Distance Materials
Writing Distance Materials
 
Podcasting the Place: Using Tech to Create Community
Podcasting the Place: Using Tech to Create CommunityPodcasting the Place: Using Tech to Create Community
Podcasting the Place: Using Tech to Create Community
 

Recently uploaded

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Recently uploaded (20)

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 

DIFFERENT TYPES OF MULTIMEDIA IN HTML DOCUMENTS.pptx

  • 1. DIFFERENT TYPES OF MULTIMEDIA IN HTML DOCUMENTS LESSON PLAN
  • 2. OBJECTIVES a.The students should able to: i.Identify the different types of multimedia; ii.Understand the use and function of different types of media; iii.Familiarize the different tags use when inserting different types of media in an HTML document; iv.Apply different media in their HTML documents
  • 3. SUBJECT MATTER a.Title: DIFFERENT TYPES OF MULTIMEDIA IN HTML DOCUMENTS b.Materials: Notepad, Notepad++, Komodo Edit, Computers, Projector, Projector Screen, PowerPoint presentation, Office Remote using Smartphone and Computer.
  • 4. a.Pretest: Multiple choice b.Recap: To test your memory, provide 5 HTML Input attribute and their functions. c.Motivation: show an example of website that uses multimedia functions like youtube or Facebook as example then show them an insert music or video in a html file.
  • 5. LESSON PROPER The teacher will introduce the new topic on the learners. The learners will learn about common video and audio format with description and examples of each format. The learners will learn how to add a video and audio format in a webpage. By using the <video> and <audio> elements. During discussion students can also use the example on the PowerPoint and test if they could run the given examples themselves a sort way for them to familiarize the function of the given elements in the lesson.
  • 6. GENERALIZATION i. Multimedia comes in many different formats. It can be almost anything you can hear or see. Examples: Images, music, sound, videos, records, films, animations, and more. ii.Web pages often contain multimedia elements of different types and formats. The first web browsers had support for text only, limited to a single font in a single color. Later came browsers with support for colors and fonts, and images!
  • 7. APPLICATION •Learners will be given a chance to try out inserting a video and audio file using notepad, notepad++ and Komodo by giving them a sample problem.
  • 8. EVALUATION a.HTML Video and Audio i.Add a heading 1 with the text HTML Video and Audio. Use Blue as text color also set it in center. ii.As the background color use your desire color. iii.For first paragraph, write all the summary of all the things that you have learned about our lesson for today HTML Video and Audio. Use 5 as text size.
  • 9. EVALUATION iv. Insert your favorite music video. Use the control attribute with the width of 600 and for height is 400. Insert also heading 3 with the text “MY FAVORITE MUSIC VIDEO” v.Under the Video put Line Break and Horizontal rule. Insert your favorite Audio or Music, and set control attribute for your audio and insert heading 3 with the text “MY FAVORITE MUSIC” •
  • 10. RUBRICS For Activity 1 the students will get total of 30 points. Items Points 1. Title of the webpage “HTML VIDEO and AUDIO”, text alignment and font color 5 2. Background color of the whole webpage, summarized paragraph and text size. 6 3. Inserted Video, use control attribute, put width and height attribute. 7 4. Put Line break, and Horizontal rule 5 5. Inserted Audio, and use control attribute. 7 TOTAL 30 points