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>
  • 0:00

    [MUSIC]

  • 0:04

    Hi and welcome to the Treehouse Club, I'm Joy and

  • 0:07

    today we're gonna be learning more about HTML and CSS.

  • 0:10

    And add a new language called JavaScript.

  • 0:14

    Some of the features you're going to work with will be buttons, images and sounds.

  • 0:19

    Let's check it out.

  • 0:21

    The structure of an HTML document can be thought of like a tackle box.

  • 0:26

    The HTML element encompasses the whole document.

  • 0:29

    The head element is like the label on the box.

  • 0:32

    It says who it was made by and who it belongs to.

  • 0:35

    The head is purely informative.

  • 0:37

    Inside the body element you have everything else like your headlines,

  • 0:41

    paragraphs and images.

  • 0:42

    These are like the smaller boxes and containers that hold lures and hooks.

  • 0:47

    This is what the code looks like in workspaces and

  • 0:51

    this is what it looks like when you preview it in the browser.

  • 0:54

    There's a car which is a static image and

  • 0:56

    won't do anything, and then three buttons down here.

  • 0:58

    A key, steering wheel.

  • 1:01

    And nitrous oxide and these will make sounds when you press on them.

  • 1:05

    Now let's look inside the code and see what's going on.

  • 1:08

    Like always at the top of our HTML document is a head element and

  • 1:13

    below that, is a body element.

  • 1:15

    Inside the head element are some things you should expect, like a meditech.

  • 1:19

    A title tag.

  • 1:21

    And here's a link to our style sheet.

  • 1:23

    This second metatag is new, though.

  • 1:25

    It's going to tell the browser how to size our webpage.

  • 1:28

    It says to make the page the same size as the display it's being shown on.

  • 1:33

    So everything will fit in your browser, phone, or tablet.

  • 1:37

    The first thing you want to change out of the body in a HTML document is the image.

  • 1:42

    In the image folder, I've loaded up a second car picture that you can

  • 1:47

    replace the first car picture with.

  • 1:49

    I'll show you how to do this.

  • 1:51

    I'll look for where it says car1.png, which is the first car image and

  • 1:56

    replace it with car2.png.

  • 1:59

    Then when I save and refresh the page, whoa there's a gigantic car.

  • 2:06

    I like the one our designer did a little bit better, but that's how you do it.

  • 2:09

    [SOUND].

  • 2:11

    Some of the other images you might wanna replace are in

  • 2:14

    the buttons where I've linked the key, steering wheel and nitrous oxide images.

  • 2:20

    So, if you wanna change this whole thing from a car to a bike and have a bell and

  • 2:25

    some skidding tire sounds instead, that's where you're gonna want to start.

  • 2:29

    Now stay tuned for a quick code challenge.

  • 2:32

    And in the next video, we're going to be going over using comments in HTML, and

  • 2:37

    learning about JavaScript.

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

Sign up