HTML Images (Video Version)

{'type': u'plain'}

- [Voiceover] We've been
talking about rabbits

this whole time, describing
them with paragraphs and lists,

but we could just put a
picture on our webpage

and actually show what
a rabbit looks like.

Well, to insert a picture in
a webpage, we use the img tag,

which, as you might
guess, stands for image.

If we just type "image"
though, we don't see anything.

Why not?

Well, we didn't tell the
browser which image to show.

There are millions of
images on the internet,

and we certainly don't want
it to pick a random one

because it might be something
gross that we don't like,

and it also just won't be
what we want it to be of.

We need to tell it the URL of the image.

The URL is what shows up at the top

of browsers in the address bar,

and that's what it is, an address.

It's a way of finding
some resource on the web,

and it means that we
can only insert an image

if it's already on the internet somewhere.

We can't just insert images
that are only on our computer.

There are many ways to find
images on the internet,

but we're making it easier for you here

by providing an image picker
in a photo collection.

To get that to pop up, we need to add

an attribute to our image tag.

An attribute is an additional bit

of information about a tag, and this is

the first attribute that we've seen.

To tell the browser the URL, we're going

to add an attribute with the name, source,

and we'll add a space and then type src.

Now, it stands for source,
but it's very important

that you spell it src because the browser

will ignore it if we misspell it.

Now, I need to put an equal
sign so that I can tell

the browser what the attribute value is,

and now I'll add a quote, and the editor

will autocomplete the end quote,

so attribute values are
always wrapped in two quotes.

Okay, so normally, this is
when we'd start typing our URL,

but here on Khan Academy, that's when

our image picker will pop up.

We'll just pick image, and I
want a picture of a rabbit,

so I'll click the animals tab and select

the adorable rabbit and click okay.

Do you see how there's a
URL inside our quotes now,

and do you see how that
URL starts with http?

That's how we know it's pointing

at some image somewhere on the internet.

Hey, look, there's a bunny on my webpage,

but what if the server
hosting the image was failing,

and the browser couldn't load the image?

How would the viewer know
what my amazing image was of?

They'll see nothing
and wonder for the rest

of their lives what they missed out on.

That's why image tags have
another attribute, alt,

which we use to tell browsers

what the alternate text for an image is.

To add another attribute,
we just put a space

after the final quote for the last one.

Then we type alt equals quotes,

and inside these quotes, the text will be

some helpful description of the image

like "rabbit with lop ears in barn."

That also helps people who see webpages

but can't really see them, like the blind.

They use an app called a screen reader,

which will literally
read a webpage to them,

describing each tag it sees.

When it sees an image tag,
it will read off the alt text

since a blind person can't see images,

so you should always, always use alt text

so that the whole world can
experience your webpage.

Okay, back to the image we can see.

It's a little big.

Let's resize it.

We can do that with more attributes

with our width or height.

Let's say, "width equals 100."

Okay, so now it's 100 pixels wide.

That's a little too small.

Let's put our cursor inside and use

the number scrubber to make it bigger.

Okay, that looks a lot better.

Now, let's try adding height.

I'll just say, "height equals 50."

Uh-oh!

I squashed my bunny, poor bunny!

See, that's why you should
usually only specify

either width or height, but not both

because you might use the wrong dimensions

and squish your bunnies, so
I say just let the browser

do the math to decide what the
other dimensions should be.

I'm going to delete height.

Now that you can make
images, start thinking

about combining all the tags
you have in your toolbox,

lists with images and paragraphs,
top 10 craziest animals.

Just don't put too many
images on your page

because the person
checking out your webpage

will have to load all of them,

but you can still have a lot of fun.