CodeCampKidz

Working with Tables & MP3 Audio - Locked

Use the HTML5 < audio > element to add audio to your page. You'll build a page using the HTML Table structures you've learned along with a picture of the beach. Then you will add an audio clip of waves crashing to enhance the effect. When you get to the Playroom you can use the File Uploader and a conversion site to add your own audio clips to your pages.

In 7 easy steps you will build this project and learn:

• How to Add the Container and Styling.
• How to Add the HTML Table Structure.
• How to Add a Header Tag Line.
• How to Add an Image and Horizontal Rule.
• How to Add the Basic MP3 Audio Structure.
• How to Add Controls to the MP3 Audio Clip.
• How to Add an Audio Replay Loop for Continuous Play.

The Tools You Will Use:

HTML5:

<DIV>, <IMG>, <AUDIO>, <SOURCE>

CSS3:

container, row, col-xs-1, col-xs-10, text-center, background-color, border-radius, padding, border

Your Personal Project:

Add your own MP3 Audio Clip to a page. You will convert a YouTube video of your choosing to an Audio clip then use the File Uploader utility to add it to your page.