Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Treehouse Club: JavaScript

Well done!

You have completed Treehouse Club: JavaScript!

Sign up for Treehouse Back to Library

Introduction to the HTML Document and Uploading a Picture

2:39 with Joy Kesten

In this video you are going to be learning about some new features in HTML and how to upload a picture.

Code for copy/paste:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">
    <title>Car Sounds</title>

<!--Style Sheet link-->
    <link href="css/style.css" rel="stylesheet">
  </head>

<body>
  <!--Car image -->
  <img src="images/car1.png" class="car" alt="car">


  <!--Buttons-->
  <a href="javascript:startCar();"><img src="images/key.png" alt="key"></a>
  <a href="javascript:honkHorn();"><img src="images/steering-wheel.png" alt="steering wheel"></a>
  <a href="javascript:peelOut();"><img src="images/nos.png" alt="nos"></a>


 <!--Audio Files-->
  <audio id="startCar" src="sounds/startCarA.wav" preload="auto"></audio>
  <audio id="honkHorn" src="sounds/honkHorn.wav" preload="auto"></audio>
  <audio id="peelOut" src="sounds/peelOut.wav" preload="auto"></audio>


 <!--Javascript-->
  <script type="text/javascript">
function startCar() {
  document.getElementById('startCar').play();
}
function honkHorn() {
  document.getElementById('honkHorn').play();
}
function peelOut() {
  document.getElementById('peelOut').play();
}
  </script>  
</body>
</html>

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    today we're gonna be learning more about HTML and CSS. 0:00
    And add a new language called JavaScript. 0:01
    Some of the features you're going to work with will be buttons, images and sounds. 0:05
    Let's check it out. 0:10
    The structure of an HTML document can be thought of like a tackle box. 0:12
    The HTML element encompasses the whole document. 0:17
    The head element is like the label on the box. 0:20
    It says who it was made by and who it belongs to. 0:23
    The head is purely informative. 0:26
    Inside the body element you have everything else like your headlines, 0:28

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up