- Introduction to the HTML Document and Uploading a Picture 2:39
- Editing Your HTML 2 objectives
- HTML Comments and JavaScript 2:08
- Changing Keywords 4 objectives
- Linking an External Style Sheet 2:15
- External Style Sheets 3 questions
- Background Color, Margin, and Padding 1:19
- Background Color, Margin, and Padding 3 objectives
- CSS Selectors 1:30
- CSS Selectors 3 questions
- What's JavaScript? 3:33
- What's JavaScript? 5 questions
- How to Get an Image Respectfully 2:46
- How to Get Images Legally on the Web 3 questions
Preview
Video Player
00:00
00:00
Introduction to the HTML Document and Uploading a Picture
2:39In this video you are going to be learning about some new features in HTML and how to upload a picture.
[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