Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

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>

[MUSIC] 0:00 Hi and welcome to the Treehouse Club, I'm Joy and 0:04 today we're gonna be learning more about HTML and CSS. 0:07 And add a new language called JavaScript. 0:10 Some of the features you're going to work with will be buttons, images and sounds. 0:14 Let's check it out. 0:19 The structure of an HTML document can be thought of like a tackle box. 0:21 The HTML element encompasses the whole document. 0:26 The head element is like the label on the box. 0:29 It says who it was made by and who it belongs to. 0:32 The head is purely informative. 0:35 Inside the body element you have everything else like your headlines, 0:37 paragraphs and images. 0:41 These are like the smaller boxes and containers that hold lures and hooks. 0:42 This is what the code looks like in workspaces and 0:47 this is what it looks like when you preview it in the browser. 0:51 There's a car which is a static image and 0:54 won't do anything, and then three buttons down here. 0:56 A key, steering wheel. 0:58 And nitrous oxide and these will make sounds when you press on them. 1:01 Now let's look inside the code and see what's going on. 1:05 Like always at the top of our HTML document is a head element and 1:08 below that, is a body element. 1:13 Inside the head element are some things you should expect, like a meditech. 1:15 A title tag. 1:19 And here's a link to our style sheet. 1:21 This second metatag is new, though. 1:23 It's going to tell the browser how to size our webpage. 1:25 It says to make the page the same size as the display it's being shown on. 1:28 So everything will fit in your browser, phone, or tablet. 1:33 The first thing you want to change out of the body in a HTML document is the image. 1:37 In the image folder, I've loaded up a second car picture that you can 1:42 replace the first car picture with. 1:47 I'll show you how to do this. 1:49 I'll look for where it says car1.png, which is the first car image and 1:51 replace it with car2.png. 1:56 Then when I save and refresh the page, whoa there's a gigantic car. 1:59 I like the one our designer did a little bit better, but that's how you do it. 2:06 [SOUND]. 2:09 Some of the other images you might wanna replace are in 2:11 the buttons where I've linked the key, steering wheel and nitrous oxide images. 2:14 So, if you wanna change this whole thing from a car to a bike and have a bell and 2:20 some skidding tire sounds instead, that's where you're gonna want to start. 2:25 Now stay tuned for a quick code challenge. 2:29 And in the next video, we're going to be going over using comments in HTML, and 2:32 learning about JavaScript. 2:37

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

Sign up