Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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>
[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