How to Add images with HTML | Learn to Code For Free

Lesson Notes
Transcript

In this lesson you will learn how to add images to you're HTML project using the (image) tag. The image tag does not have a closing tag. When we add an image with HTML we add the "src" (source) attribute to tell the website where the image is located. And than we add the "alt" (alternative text) attribute to describe the image.

HTML Image

<img src="cat-image.jpg" alt="Cat Image">

The "src" (source) attribute tells you're code where the image is located.

While the "alt" (alternative text) attribute is used to describe the image.

(upbeat music)

- This just in.

World-famous dough guy stayed out in sun too long

and got baked.

When reached for comment,

all he say is, "Me feel crumby."

(saxophone blares)

- Alright, hopefully you got the SNL demo reel in there.

This is my answer, this is what I did here.

Hopefully that's working out for you

and we're gonna go onto the images.

So, to include the images, what do we use, which tag?

We use the image tag, remember?

Okay, I'm gonna make a little space here.

Make it a little bigger.

We use the image tag and to include that,

we use the source, right?

And we just need to find these images.

So over here we have the social Twitter,

is the name of that image.

And we'll pull that in.

And of course, we always wanna put some alternative text

to say this is the Twitter button or something like that.

That should be good.

Now if you refresh and you see

that the image didn't work, that's okay.

It makes sense that it wouldn't work

because we now need to tell it

that it's in the images folder.

Everything is relative to the file you are in.

So if we are in here,

we need to direct it and say go into the images folder,

open that up and then find that file.

So really all we need to do is put the word images here

and it knows where to go.

So now that I have the images here,

boom that works, right?

And we can just copy that

for each of the other links that we have.

So if we also do the Foursquare one,

I can just look over here and see social Foursquare

and then change that here.

Social Foursquare.

And just change the alt text to Foursquare like that.

And now we have the next one.

We can do that for the other two as well.

To add the links,

'cause right now it's not linking

but to add the links, simple.

It's the same thing you've been doing.

All you have to do is surround the image tag now

with those A elements, yeah?

So just a little something like this.

And so if we do that, same thing.

A href equals and I believe I gave you the link,

yes I did.

Me want cookie here.

We put that in here and we send it there.

And of course we'll do the target equals underscore blank.

We're just repeating ourselves again and again

and now this twitter, if I refresh it,

opens up in it's own account.

Boom just like that.

So that's all there is too it.

I want you to go ahead now, on your own,

and do the other four images, right?

So we have those and I outlined them for you.

We have the Twitter, Foursquare, Facebook, Flickr,

all of those, pull them into your projects

so that all four of them are here.

In the next video, I'll give you the answer

and we're going to move on to styling,

the colors, and fonts with CSS.

Alright.

Do that homework now.

Little project now and I'll see you in the next video.