Unit 2.8 Multimedia Objects

2,791 views
2,641 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,791
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
231
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unit 2.8 Multimedia Objects

  1. 1. Programming and Development Tools Web Programming UNIT 2.8Web ProgrammingMultimedia 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
  2. 2. Programming and Development Tools Web ProgrammingLet 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
  3. 3. 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.1Multimedia Objects 2.8-3
  4. 4. Programming and Development Tools Web Programming Figure 2.8.1: A Web page with MusicWhen you open the Web page shown in Figure 2.8.1 in a browser, you cansee the text of our National Anthem scrolling across the screen and hear tothe 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 isassigned to the Src attribute. You heard a wonderful music while opening theabove Web page because of the following tag:<EMBED Src=”National_Anthem.wav”>The attributes that can be used along with <EMBED> tag are explained inTable 2.8.1.Multimedia Objects 2.8-4
  5. 5. Programming and Development Tools Web Programming 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> TagFor 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
  6. 6. Programming and Development Tools Web Programming Lab ExerciseLab Exercise 1: Open D8_1.html in Internet Explorer. The following code will be present inD8_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 MoviesAdding movies to your Web page is as simple as adding music to your Webpage. 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
  7. 7. 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.2When you open the above HTML file in a browser, you can see a control thatplays the movie. The tag that is used to add movies is <EMBED> tag. Src is theattribute used along with this tag. The name of the movie file is assigned tothe Src attribute. The following tag adds a movie to a Web page:<EMBED Src=”Movie1.avi”>2.8.3 AnimationAnimation attracts the users of all age. You can attract the users by addinganimations in your Web pages. Animations created in SWF (Shock Wave File)format using Flash, a Multimedia Software, can be embedded in a HTMLdocument. 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 aredisposed by God <CENTER></BODY></HTML> Code Sample 2.8.3Multimedia Objects 2.8-7
  8. 8. Programming and Development Tools Web ProgrammingThe Web page shown in Figure 2.8.2 is displayed. Figure 2.8.2: A Web page with a movieWhen you open the above HTML file in a browser, you can see a control thatplays 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 fileis assigned to the Src attribute. The following tag is used to add an animationto a Web page:<EMBED Src=”Animation.swf”>where Animation.swf is the name of the flash animation file. Lab ExerciseLab Exercise 3: Write a HTML code to display the output as given in the following Figure 2.8.3using <EMBED> tag. The text shown in the Web page should display in center of theanimation.Multimedia Objects 2.8-8
  9. 9. Programming and Development Tools Web Programming Figure 2.8.3: AnimationLab Exercise 4: Write a HTML code to display the output as given in the following Figure 2.8.4using <EMBED> tag. Figure 2.8.4: AnimationMultimedia Objects 2.8-9
  10. 10. Programming and Development Tools Web Programming 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 ObjectsTechnical TerminologiesMultimedia - 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.Multimedia Objects 2.8-10
  11. 11. Programming and Development Tools Web ProgrammingSummaryIn 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.AssignmentI. 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.Multimedia Objects 2.8-11
  12. 12. Programming and Development Tools Web ProgrammingCriterion - Referenced TestInstruction: Students must evaluate themselves to attain the list of competencies to be achieved.Name:Subject: Programming and Development ToolsUnit: Multimedia ObjectsPlease tick [ √ ] the appropriate box when you have achieved the respectivecompetency. Date Multimedia Objects C1 C2 C3CommentCompetency 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

×