Unit 2.8 Multimedia Objects

Programming and Development Tools Web Programming

UNIT

2.8
Web Programming
Multimedia Objects

OBJECTIVES
This unit helps you to attract the users by adding Multimedia objects.
At the end of this unit, you will be able to
Add background music to your Web pages.
Add movies to your Web pages.
Add Animation to your Web pages.

Benchmark standard
Create Web pages that contain audio, movie and animation.

Multimedia Objects 2.8-1


Let us Revise!

I. Answer the following questions:
1. Write how you will insert images in your Web page.
2. Name the attributes that are used to change the size of the image in a
Web page.
3. Describe how you will convert an image to a hyperlink.
4. Define Image Map.
5. Write the tag and attribute used to display an image as the background
of a Web page?

Introduction
The Web pages that you design must invite the users. The Web pages can be
enhanced by adding Multimedia objects. Multimedia objects are the objects
that enable the user to listen to music, watch movie, enjoy animation and
much more. Adding music, movie and animation to your Web pages is very
simple. These multimedia objects can be added to the Web pages using the
<EMBED> tag along with Src attribute.

2.8.1 Music
To add a flavour to your HTML Web pages, you can add background music to
them. The user can browse your Web page enjoying the background music.

Hands-On!

The following example illustrates how to add music in your Web page.
Open the HTML file Music.html in Internet Explorer.
The code in Music.html file is given below:
<HTML>
<HEAD>
<TITLE> Music </TITLE>
</HEAD>
<BODY Bgcolor="Firebrick" Text="Lightyellow">
<FONT Size=7>
<H1 Align="Center"> National Anthem </H1>
<CENTER><IMG Src="Mal_Flag.gif"><BR><BR>



<EMBED Src="National_Anthem.wav"></CENTER>
<BR>
<MARQUEE BGColor="Black" Loop=1>
Negaraku -
Tanah tumpahnya darahku -
Rakyat hidup -
Bersatu dan Maju -
Rahmat Bahagia -
Tuhan kurniakan -
Raja Kita -
Selamat bertahta.
Rahmat Bahagia -
Tuhan kurniakan -
Raja Kita -
Selamat bertahta.
</MARQUEE>
</BODY>
</HTML>
Code Sample 2.8.1



Figure 2.8.1: A Web page with Music
When you open the Web page shown in Figure 2.8.1 in a browser, you can
see the text of our National Anthem scrolling across the screen and hear to
the National Anthem. The tag that is used to execute sound files is <EMBED>
tag. Src is the attribute used along with this tag. The name of the sound file is
assigned to the Src attribute. You heard a wonderful music while opening the
above Web page because of the following tag:
<EMBED Src=”National_Anthem.wav”>

The attributes that can be used along with <EMBED> tag are explained in
Table 2.8.1.



Attribute Use Example
Src Specifies the name <EMBED
of the sound file Src=”flourish.mid”>

AutoStart Specifies whether <EMBED
the sound should be Src=”flourish.mid”
played automatically Autostart=True>
or not.

Loop Specifies whether <EMBED
the music should be Src=”flourish.mid”
played indefinitely Loop=True>
or only once. If the
value assigned is
true, it will be played
indefinitely.
Otherwise, it will be
played only once.
Width Specifies the width <EMBED
of the sound control. Src=”flourish.mid”
Width=”45”>

Height Specifies the height <EMBED
of the sound control. Src=”flourish.mid”
Height=”30”>

Table 2.8.1: Attributes of <EMBED> Tag

For example, the following code plays the MIDI file (Sound file) indefinitely.
The height and width of the sound control would be 20 and 30 respectively.
<EMBED Src=”flourish.mid” Loop=True Height=”20”
Width=”30”>

Note

<BGSOUND> tag can also be used to play sound files.



Lab Exercise
Lab Exercise 1: Open D8_1.html in Internet Explorer. The following code will be present in
D8_1.html.
<HEAD>
<TITLE> Music </TITLE>
</HEAD>
<BODY BGCOLOR ="#FFE4B5" >
<FONT SIZE=24 COLOR="#008000">
<MARQUEE> HAPPY BIRTHDAY </MARQUEE><BR><BR>
<CENTER>
<IMG SRC="CAKE.BMP"> <BR><BR>
<EMBED Src="HAPPY_BIRTHDAY.MID" LOOP=FALSE
HEIGHT=20 WIDTH=30>
</CENTER>
</FONT>
</BODY>
</HTML>
1. Identify the tag which is used to add the sound in source code D8_1.html.
2. Locate the attribute which is used to assign the sound file.
3. Name the value of the loop attribute which is used to play the music only once.
4. Identify the value of the autostart attribute which is used to play the music
automatically.

Lab Exercise 2: Open D8_1.html in Internet Explorer.
1. View the code in Notepad.
2. Set the Loop attribute value to True and observe the difference.
3. Set the Autostart attribute value to False and observe the difference.

2.8.2 Movies
Adding movies to your Web page is as simple as adding music to your Web
page.

Hands-On!

The following example illustrates how to add movies in your Web page.
Open the HTML file Movie.html in Internet Explorer.
The code in Movie.html file is given below:
<HTML>
<HEAD>
<TITLE> Movie </TITLE>
</HEAD>



<BODY>
<EMBED Src="Movie1.avi" Height="150" Width="150"
Autostart="False" Loop="True" Controller="True">
</BODY>
</HTML>
Code Sample 2.8.2

When you open the above HTML file in a browser, you can see a control that
plays the movie. The tag that is used to add movies is <EMBED> tag. Src is the
attribute used along with this tag. The name of the movie file is assigned to
the Src attribute. The following tag adds a movie to a Web page:
<EMBED Src=”Movie1.avi”>

2.8.3 Animation
Animation attracts the users of all age. You can attract the users by adding
animations in your Web pages. Animations created in SWF (Shock Wave File)
format using Flash, a Multimedia Software, can be embedded in a HTML
document.

Hands-On!

The following example illustrates how to add animation in your Web page.
Open the HTML file Animation.html in Internet Explorer.
The code in Animation.html file is given below:
<HTML>
<HEAD>
<TITLE> Animation </TITLE>
</HEAD>
<BODY> <FONT Size="6">
<H1 Align="Center"> Man Proposes God Disposes </H1>
<EMBED Src="C:HTMLUnit 8Hands onAnimation.swf"
Align="Left" Height="500" Width="680">
<CENTER><BR><BR><BR><BR>All our disastrous desires are
disposed by God <CENTER>
</BODY>
</HTML>
Code Sample 2.8.3



The Web page shown in Figure 2.8.2 is displayed.

Figure 2.8.2: A Web page with a movie
When you open the above HTML file in a browser, you can see a control that
plays the Flash animation. The tag that is used to add animations is <EMBED>
tag. Src is the attribute used along with this tag. The name of the animation file
is assigned to the Src attribute. The following tag is used to add an animation
to a Web page:
<EMBED Src=”Animation.swf”>
where Animation.swf is the name of the flash animation file.

Lab Exercise

Lab Exercise 3: Write a HTML code to display the output as given in the following Figure 2.8.3
using <EMBED> tag. The text shown in the Web page should display in center of the
animation.



Figure 2.8.3: Animation
Lab Exercise 4: Write a HTML code to display the output as given in the following Figure 2.8.4
using <EMBED> tag.

Figure 2.8.4: Animation



Self-Check Exercise 2.8.1
1. Write the tag to play the music file Song.wav only once in a Web page.
2. Write the tag to play the movie file Clock.avi in a Web page.
3. Write the tag to play the animation file Cartoon.swf in a Web page.

Activity 2.8.1

1. Create a Web page that explains how to add multimedia objects in a
Web page as shown in Figure 2.8.5
2. Save the HTML file as Activity1.html.

Figure 2.8.5: A Web page explaining Multimedia Objects

Technical Terminologies
Multimedia - Multimedia is an integration of various media elements such as
audio, video, text and images.
Animation - Animation is a technique of producing continuous movement
using series of images.
Movie - It is a continuous sequence of video frames that are displayed
in series to illusion of motion.



Summary
In this unit, you learnt that
The multimedia objects can be added to the Web pages using the
<EMBED> tag along with Src attribute.
Autostart attribute of <EMBED> tag specifies whether the sound
should be played automatically or not.
Animations created in SWF format using Flash, a Multimedia
Software, can be embedded in a HTML document.

Assignment

I. Answer the following questions:
1. Name the tag and attribute used to add music to a Web page.
2. Name any 3 attributes of <EMBED> tag and state their function.
3. Write briefly how will you add a movie and animation to a Web page.



Criterion - Referenced Test
Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.

Name:
Subject: Programming and Development Tools
Unit: Multimedia Objects

Please tick [ √ ] the appropriate box when you have achieved the respective
competency.

Date Multimedia Objects
C1 C2 C3

Comment

Competency codes:

C1 = Write a program to add a music to a Web page.
C2 = Write a program to add a movie to a Web page.
C3 = Write a program to add an animation to a Web page.


Unit 2.8 Multimedia Objects

More Related Content

Viewers also liked (20)

Similar to Unit 2.8 Multimedia Objects (20)

More from Intan Jameel (20)

Recently uploaded (20)

Unit 2.8 Multimedia Objects