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