Topics Covered on This Page

1. Introduction

2. Demonstration

3. Task

4. Practice

5. CLICK HERE TO GO TO THE NEXT LESSON:  5 Resources

Introduction

You can add sound and video to your web pages by creating a link to them, or by embedding them as a visible or invisible sound/video console. Linking to your sound and video files, is the easiest way to add sound and video to your web pages because it requires that you create a link which points to the sound/video file.  Embedding a sound/video files is a little more difficult for it requires that you insert the <embed> tags into the body of the actual HTML code.

Here is What You Need to Add Sound/Video Files to your Web Page

1. A Sound or Video File

2. The <a href> </a> HTML Tags for Linking Sound/Video Files - or - The <embed> </embed> HTML Tags for Embedding Sound/Video Files.

Return to Top

Demonstration

Creating a Link to a Sound/Video File
Step 1:  
Download the following sound file: go-nogo.wav (Right-click or control-click on the link, select "Save Target as..." or "Save Link as...)

Step 2:  
Open a new HTML File and name it "gonogo.htm"

Step 3:  
Type go-nogo.wav then highlight the text and create a hyperlink to  the go-nogo.wav file.

Step 4:  
Save the file, Preview it, then test the link.

Embedding a Sound/Video File with a visible Sound Console
Step 5:  
Go back to the go-nogo.htm file.

Step 6:  
Cut and paste the following HTML tag into the body of the actual HTML code of the web page.

<embed src="go-nogo.wav" width="128" height="20" autostart="false" loop="false" hidden="false"> </embed>

Step 7:  
Save the file, Preview it, then Click the play button on the Sound Console.

Embedding a Sound/Video File with an invisible Sound Console
Step 8:  
Go back to the go-nogo.htm file.

Step 9:  
Go the the HTML Code View.

Step 10:  
Change the autostart and hidden attributes of the <embed> tag to "true".

Step 11:  
Save the file, Preview it, then Click the play button on the Sound Console.

Return to Top

Task

Download the following sound and video files and create a 4 row by 2 column table. Label one column sound files and the other video files.  Create a link to each of the sound and video files. 2001.mid, energetic.mid, clock.mpg, room.mpg.

Below the table type "Embedded Sound and Video Consoles"  Customize the following embed tag and insert them one at a time below the "Embedded Sound and Video Consoles" title. Embed the 2001.mid and clock.mpg files.  (Note: the standard width and height of the video is width=400 and height=320.)

<embed src="filename" width="128" height="20" autostart="false" loop="false" hidden="false"> </embed>

Return to Top

Practice  

Create a new file and name it "animal sounds.htm".  Find and insert a picture of a dog, cat, pig, and tiger.  Link the picture of the dog and cat to their respective sound files.  Create a visible sound console underneath the pictures for the pig and tiger. [Here are the animal sounds. (dog, cat, pig, tiger)]