To be able to: use notepad to create HTML code that will add animations and sounds to the webpage(S)
To understand: the links between the HTML code and its webpage. (C)
To know: Where to insert HTML code into to place graphics in the appropriate place. (K)
Success criteria
You will add at least one animation with some help. You might also independently add a second animation and you will possibly add a WMV file
To understand: the links between the HTML code and its webpage. (C)
To know: Where to insert HTML code into to place graphics in the appropriate place. (K)
Success criteria
You will add at least one animation with some help. You might also independently add a second animation and you will possibly add a WMV file
STARTER - quick recap of HTML - click on the button and complete the test
|
Task
You will need to download these sound files and animations to your HTML folder before you can begin. Also you will need to collect a pair of headphones to check if the sounds works
You will need to download these sound files and animations to your HTML folder before you can begin. Also you will need to collect a pair of headphones to check if the sounds works
Open up your Homepage.HTML in notepad that you saved last lesson – find the <BODY> tag at the top of the code, and edit it to look like this:
<BODY BGCOLOR=WHITE TEXT=#3366CC>>
Task 2: Make sure you have the music & cat animations saved into your HTML folder before you start - Type this new code just below the body tag
<TABLE ALIGN=CENTER BORDER=0>
<TR>
<TD WIDTH=250> <IMG SRC="music animation.gif"> </TD>
</TR>
</TABLE>
Save the file as: “Hompage.html” into your HTML folder
Open the webpage in internet explorer to see if adding the music animation has worked, screen shot your page and add some annotations to explain what you have done.
Task 3: Add this new HTML code into your table just below the table data tag <TD> that has the text “HOMEPAGE” to create a new row and add the cat animation to your webpage.
<TR>
<TD ALIGN=CENTER HEIGHT=400>
<IMG SRC="cat animation.gif"<
</TD>
Save the file as: “Hompage.html” into your HTML folder – check your progress & take more screen shots and annotations.
Task 4: Add a sound file for the cat – go to the top of the code and find this code
<BODY BGCOLOR=WHITE TEXT=#3366CC>
then add the new code below:
<EMBED
SRC="Vinnie_01.wav" AUTO LOOP=FALSE ALIGN=CENTER WIDTH=1 HEIGHT=1>
</EMBED>
Save the file as: “Hompage.html” into your HTML folder – check your progress & add further screen shots to your evidence document.
Extension Task – find some other WMV sound clips to add to your webpage – If you set the LOOP parameter to TRUE the sound will play over and over again. AUTOSTART must always = TRUE
However you do not really need to change the width & height because sounds are invisible
Websites for free WMV sound clips
http://www.mediacollege.com/downloads/sound-effects/
http://www.wavsource.com/music/music.htm
<BODY BGCOLOR=WHITE TEXT=#3366CC>>
Task 2: Make sure you have the music & cat animations saved into your HTML folder before you start - Type this new code just below the body tag
<TABLE ALIGN=CENTER BORDER=0>
<TR>
<TD WIDTH=250> <IMG SRC="music animation.gif"> </TD>
</TR>
</TABLE>
Save the file as: “Hompage.html” into your HTML folder
Open the webpage in internet explorer to see if adding the music animation has worked, screen shot your page and add some annotations to explain what you have done.
Task 3: Add this new HTML code into your table just below the table data tag <TD> that has the text “HOMEPAGE” to create a new row and add the cat animation to your webpage.
<TR>
<TD ALIGN=CENTER HEIGHT=400>
<IMG SRC="cat animation.gif"<
</TD>
Save the file as: “Hompage.html” into your HTML folder – check your progress & take more screen shots and annotations.
Task 4: Add a sound file for the cat – go to the top of the code and find this code
<BODY BGCOLOR=WHITE TEXT=#3366CC>
then add the new code below:
<EMBED
SRC="Vinnie_01.wav" AUTO LOOP=FALSE ALIGN=CENTER WIDTH=1 HEIGHT=1>
</EMBED>
Save the file as: “Hompage.html” into your HTML folder – check your progress & add further screen shots to your evidence document.
Extension Task – find some other WMV sound clips to add to your webpage – If you set the LOOP parameter to TRUE the sound will play over and over again. AUTOSTART must always = TRUE
However you do not really need to change the width & height because sounds are invisible
Websites for free WMV sound clips
http://www.mediacollege.com/downloads/sound-effects/
http://www.wavsource.com/music/music.htm