This course will be retired on January 24, 2020. We recommend "Introducing JavaScript" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
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