Learn to Code Special! | 30% off ALL ACCESS to One Month ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰


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.