Scribd
Upload
70 views

Lesson Guide PDF

Students will learn to embed multimedia like video, audio, and images into an HTML file using tags like <embed>, <bgsound>, and <object>. They will test how different browsers (Firefox, Chrome, Internet Explorer) handle the embedded multimedia by opening the HTML file in each browser. The lesson also compares the browsers' responsive capabilities and discusses solutions for problems encountered with different multimedia implementations across browsers.

Uploaded by

Kon Kon
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
70 views

Lesson Guide PDF

Students will learn to embed multimedia like video, audio, and images into an HTML file using tags like <embed>, <bgsound>, and <object>. They will test how different browsers (Firefox, Chrome, Internet Explorer) handle the embedded multimedia by opening the HTML file in each browser. The lesson also compares the browsers' responsive capabilities and discusses solutions for problems encountered with different multimedia implementations across browsers.

Uploaded by

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

LESSON GUIDE

Embedding Multimedia
Objectives
Students will be able to:
Insert and display multimedia into browser using HTML tags.
Differentiate browsers responsive capability in terms of multimedia integration.
Use different tags in displaying multimedia to the website.
#
1.

Activity Description
Create an HTML file named Multimedia.html

2.
3.

Download the Video-Audio file from Moodle


Insert the following HTML tags into your file:

Questions
Use TEXTPAD / NOTEPAD / NOTEPAD++ for your
answers.

<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src="/html/yourfile.mid" width="100%"
height="60" >
<noembed><img src="yourimage.gif" alt="Alternative
Media" ></noembed>
</embed>
</body>
</html>

4.
5.
6.

Save and open your file using Firefox as your browser.


Open your file using Google Chrome as your browser.
Open your file using Internet Explorer as your browser.

7.

Change the following code from your HTML tags: (See to


it that your mp4 and html files are in the same directory)

1.
2.
3.
4.

What is the output of your HTML file? (2 points)


What is the output of your HTML file? (2 points)
What is the output of your HTML file? (2 points)
Is/Are there any difference/s of the three browsers
in terms of output? If YES, enumerate. (3 points)

<embed src="BATAWA.mp4" width="500" height="300" >

8.
9.
10.

Save and open your file using Firefox as your browser.


Open your file using Google Chrome as your browser.
Open your file using Internet Explorer as your browser.

11.

Add autostart=false attribute inside your embed tag


after the height attribute.
Save and open your file using Firefox as your browser.
Open your file using Google Chrome as your browser.
Open your file using Internet Explorer as your browser.

12.
13.
14.

15.
16.

5.
6.
7.
8.

What is the output of your HTML file? (2 points)


What is the output of your HTML file? (2 points)
What is the output of your HTML file? (2 points)
Is/Are there any difference/s of the three browsers
in terms of output? If YES, enumerate. (3 points)

9. What is the output of your HTML file? (2 points)


10. What is the output of your HTML file? (2 points)
11. What is the output of your HTML file? (2 points)
12. Is/Are there any difference/s of the three browsers in
terms of output? If YES, enumerate. (3 points)
13. What do you think is the best solution to solve
problem/s encountered using different solutions? (3
points)

Download Audio file from Moodle.


Insert the following code to your file after the </embed
tag>:
<bgsound src="intro.wav ">
<noembed><img src="yourimage.gif" ></noembed>
</bgsound>

17.
18.
19.

Save and open your file using the three browsers (Mozilla
Firefox, Google Chrome and Internet Explorer).
Download HTML file (USB serial.html) from Moodle.
Insert the following code after the </bgsound> tag:
<object data="data/test.htm" type="text/html"
width="300" height="200">
alt : <a href="data/test.htm">test.htm</a>

14. Discuss output of the different browsers. (5 points)

</object>

20.

Save and open your file.

21.
22.

Upload your final HTML file in the Moodle.


Upload your answers in the Moodle named Seatwork with
.txt format using your account.

15. What is the output of your HMTL file? (2 points)


16. How to display the PDF file into your browser? (3
points)
17. How to display the MS WORD file into your browser?
(3 points)
18. How to insert BATAWA.mp4 using object tag? (5
points)
19. How to insert intro.wav using object tag? (5 points)

You might also like