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

of the sound file <EMBED Src=”flourish.mid”>

AutoStart Specifies whether

the sound should be played automatically or not.

<EMBED Src=”flourish.mid” Autostart=True>

Loop Specifies whether

the music should be played indefinitely or only once. If the value assigned is true, it will be played indefinitely. Otherwise, it will be played only once.

<EMBED Src=”flourish.mid” Loop=True>

Width Specifies the width of the sound control.

<EMBED Src=”flourish.mid” Width=”45”>

Height Specifies the height

of the sound control.<EMBED 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 1: Open D8_1.html in Internet Explorer. The following code will be present in D8_1.html.

Lab Exercise

<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:\HTML\Unit 8\Hands on\Animation.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



page.

2.

echnical Terminologies ration of various media elements such as

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

1. Create a Web page that explains how to add multimedia objects in a

Web page as shown in Figure 2.8.5 Save the HTML file as Activity1.html.

Self-Check Exercise 2.8.1

Activity 2.8.1

Figure 2.8.5: A Web page explaining Multimedia Objects

TMultimedia - Multimedia is an integ

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 learnt that

bjects can be added to the Web pages using the

g Flash, a Multimedia

Answer the following questions:

ed to add music to a Web page. .

ge.

In this unit, you The multimedia o<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 usinSoftware, can be embedded in a HTML document.

Assignment

I.

1. Name the tag and attribute us2. Name any 3 attributes of <EMBED> tag and state their function3. Write briefly how will you add a movie and animation to a Web pa



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.


Date post:	22-Nov-2014
Category:	Technology
Upload:	intan-jameel
View:	1,796 times
Download:	0 times

Unit 2.8 Multimedia Objects

Technology