- [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.