Party Tips! Adding Images with HTML
Day 3 · Lesson 2 ·
Images are beautiful. Let's bring some into our website!
- To finish off this project,
you'll wanna use some images.
I put images down below that you can grab
and everything we do right now
would be exactly what you do
if you saw images anywhere on the Internet
that you wanted to
include in your project.
So, here's the steps, first, find images.
I found them for you, they're below.
Second, grab these images, and let's just
first just drag them into our Desktop
which will save them off of the Internet
and bring them to the Desktop.
The other way that you
probably could do that
is right-click, Save Image As,
and then choose your Desktop,
if that's easier for your computer.
Next what we wanna do
is create a new folder.
So I'm gonna create a new
folder here on my Desktop.
See how clean my Desktop is here.
I'm just gonna call this partytips,
one word, all lowercase,
like that, keeps it easy.
And then from there, I wanna
just drag in everything,
the three images and my html
file into the project, okay?
So check this out, grabbing everything,
bringing it into my project
and there we have it.
So now, everything here
should be in a folder,
looking a little bit like
this, all lined up like that.
Now what you're gonna
need to do at this point
is close out everything
that you've been working on,
I should have made sure that you saved it
before you did that,
hopefully it saves already,
let's just see what happens,
let's close out everything,
because the paths are going
to be a little bit different.
Meaning that because we moved it,
you need to kind of restart
again, but reopening it.
So we're gonna close everything out
and then drag everything
to Sublime now this time.
So did you see what I
did, I took everything
and I dragged it to this here.
Now if you're not on a
Mac and you don't have
a dock down here, you
should be able to also
drag this just straight into Sublime,
and we know we did it right if we do
View, Sidebar, Show Sidebar
like that, give that a try,
and you can see all my stuff here.
Or if none of that works on your computer,
some computers are different,
you can go to Open here and
then kind of surf down to your,
your stuff here, partytips, and
open the whole folder there.
So there's a few different
ways that you can do that,
find the one that works
best for your computer
and then meet me here, make
sure you have your sidebar open.
Once you are here with
me, then we can again
double click this to
open it in the browser,
and now we're back where
we were, which is great.
Or you can drag it into the
browser, same thing, right?
All right, cool, so we
have our stuff here,
it's in the folder, which is great,
now we have the nice project together,
and we have our site up again,
we're back in action, hopefully,
and now we are going to finish this off
by clicking on index, you can
see all of our folders here
should mimic exactly what's
in our window on the desktop.
And we're going to go back to coding,
I'm gonna make mine a little bit smaller.
And it's here that I'm gonna
introduce you to the image tag.
So the image tag is, it's like the tags
that we've seen in html before.
It starts with this, image here,
but unlike the other
tags, there is no closing,
it doesn't even know what it wants to do,
there's no closing image
tag like this, right?
There's no closing image
tag, it's just an opening tag
like this, that's all you need to know.
So there's this image
tag that doesn't close,
it's just this one tag and
it has this thing called
source equals, with quotes,
now just follow along,
and then we put the
name of the image there.
So for the party tip number
one we want penguin-party,
make sure you spell that right, .jpg.
Now what you should see if
you do that, if I go here
and refresh, is that
indeed this should show up.
So there's a few things we did there,
hopefully you're following along,
but all you, you know, you
want to make sure you're
getting this right, you
want to make sure you're
spelling penguin right, all
right, and everything's there,
but if it's, if all your folders are here
and you're sure that
you're in these files,
everything should line up and you should
be able to see this project
here, this image here.
Cool, the one last thing we
want to do in our image tags,
this is just like a small,
kinda nit-picky thing is
you want to do this, just follow
along, alt attribute here.
Now if I do this, and I save and refresh,
I don't actually see anything different,
but the alt attribute
is really just helpful
again for search engine optimization,
for Google, for people
coming to your site.
It describes what is
going on in this image.
Now you could write
anything in here you want,
you could write my penguin
party, it'll still work
just the same, but it's
basically just a description.
Alt stands for alternative text,
so if the image doesn't show up,
or doesn't load correctly,
or you're on a screen reader,
you know, if some people
who are hearing impaired,
or site impaired it will read
it to them, that kind of thing.
It knows how to describe
what is in the image,
'cause Google doesn't yet know
exactly what's in the image.
So that's how that works, so we always
want to have these two things here.
Now I'm gonna invite you
to finish this project up.
All you need to do is include
these last two images here,
so basically you kind of just
copy and paste this like here
and put these images in like that
and then just change out the
source to be the second image
and the alt text to be that,
and if you do all that,
your project should come
together and be amazing.
So go ahead and do that, I'll
see you in the next video.
Well done, you got your
first html css project made.
Congratulations, and yeah,
I hope you're excited for the next project
which we will make our main
project, making the portfolio.
Okay, so I didn't want
to leave you hanging,
in case you got stuck on anything.
These are the final answers
so you can just take
a look at that, and all
your images should show up.
So here is the final
code for this project,
take a look at that if you do get stuck,
just so you have it, okay,
see you in the next video.