unit 2.8 multimedia objects
Post on 22-Nov-2014
1.803 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Programming and Development Tools Web Programming
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>
Multimedia Objects 2.8-2
Programming and Development Tools Web Programming
<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
Multimedia Objects 2.8-3
Programming and Development Tools Web Programming
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.
Multimedia Objects 2.8-4
Programming and Development Tools Web Programming
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.
Multimedia Objects 2.8-5
Programming and Development Tools Web Programming
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>
Multimedia Objects 2.8-6
Programming and Development Tools Web Programming
<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
Multimedia Objects 2.8-7
Programming and Development Tools Web Programming
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.
Multimedia Objects 2.8-8
Programming and Development Tools Web Programming
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
Multimedia Objects 2.8-9
Programming and Development Tools Web Programming
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.
Multimedia Objects 2.8-10
Programming and Development Tools Web Programming
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
Multimedia Objects 2.8-11
Programming and Development Tools Web Programming
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.
Multimedia Objects 2.8-12
top related