0:00:00.271,0:00:01.900
- [Voiceover] We've been[br]talking about rabbits

0:00:01.900,0:00:05.800
this whole time, describing[br]them with paragraphs and lists,

0:00:05.800,0:00:09.228
but we could just put a[br]picture on our webpage

0:00:09.228,0:00:12.060
and actually show what[br]a rabbit looks like.

0:00:12.400,0:00:16.149
Well, to insert a picture in[br]a webpage, we use the img tag,

0:00:16.149,0:00:19.466
which, as you might[br]guess, stands for image.

0:00:19.466,0:00:22.700
If we just type "image"[br]though, we don't see anything.

0:00:22.700,0:00:23.966
Why not?

0:00:23.966,0:00:27.511
Well, we didn't tell the[br]browser which image to show.

0:00:27.511,0:00:29.284
There are millions of[br]images on the internet,

0:00:29.284,0:00:31.469
and we certainly don't want[br]it to pick a random one

0:00:31.469,0:00:33.930
because it might be something[br]gross that we don't like,

0:00:34.699,0:00:37.766
and it also just won't be[br]what we want it to be of.

0:00:37.766,0:00:40.925
We need to tell it the URL of the image.

0:00:40.939,0:00:43.073
The URL is what shows up at the top

0:00:43.073,0:00:44.770
of browsers in the address bar,

0:00:44.770,0:00:46.874
and that's what it is, an address.

0:00:46.874,0:00:49.301
It's a way of finding[br]some resource on the web,

0:00:50.485,0:00:52.413
and it means that we[br]can only insert an image

0:00:52.413,0:00:54.552
if it's already on the internet somewhere.

0:00:54.552,0:00:57.602
We can't just insert images[br]that are only on our computer.

0:00:58.233,0:01:00.772
There are many ways to find[br]images on the internet,

0:01:00.772,0:01:03.137
but we're making it easier for you here

0:01:03.137,0:01:06.037
by providing an image picker[br]in a photo collection.

0:01:06.246,0:01:07.967
To get that to pop up, we need to add

0:01:07.967,0:01:10.735
an attribute to our image tag.

0:01:10.735,0:01:12.800
An attribute is an additional bit

0:01:12.800,0:01:14.772
of information about a tag, and this is

0:01:14.772,0:01:17.106
the first attribute that we've seen.

0:01:17.736,0:01:19.714
To tell the browser the URL, we're going

0:01:19.714,0:01:22.945
to add an attribute with the name, source,

0:01:22.945,0:01:26.490
and we'll add a space and then type src.

0:01:28.337,0:01:30.866
Now, it stands for source,[br]but it's very important

0:01:30.866,0:01:32.733
that you spell it src because the browser

0:01:32.733,0:01:35.333
will ignore it if we misspell it.

0:01:35.733,0:01:38.700
Now, I need to put an equal[br]sign so that I can tell

0:01:38.700,0:01:41.400
the browser what the attribute value is,

0:01:41.400,0:01:44.925
and now I'll add a quote, and the editor

0:01:44.925,0:01:47.286
will autocomplete the end quote,

0:01:47.286,0:01:51.053
so attribute values are[br]always wrapped in two quotes.

0:01:51.838,0:01:55.833
Okay, so normally, this is[br]when we'd start typing our URL,

0:01:55.833,0:01:57.600
but here on Khan Academy, that's when

0:01:57.600,0:02:00.135
our image picker will pop up.

0:02:00.135,0:02:04.024
We'll just pick image, and I[br]want a picture of a rabbit,

0:02:04.024,0:02:06.630
so I'll click the animals tab and select

0:02:06.630,0:02:08.871
the adorable rabbit and click okay.

0:02:10.238,0:02:13.089
Do you see how there's a[br]URL inside our quotes now,

0:02:13.089,0:02:16.300
and do you see how that[br]URL starts with http?

0:02:16.300,0:02:17.666
That's how we know it's pointing

0:02:17.666,0:02:19.666
at some image somewhere on the internet.

0:02:19.666,0:02:22.134
Hey, look, there's a bunny on my webpage,

0:02:23.226,0:02:26.233
but what if the server[br]hosting the image was failing,

0:02:26.233,0:02:28.133
and the browser couldn't load the image?

0:02:28.133,0:02:31.092
How would the viewer know[br]what my amazing image was of?

0:02:31.092,0:02:33.401
They'll see nothing[br]and wonder for the rest

0:02:33.401,0:02:35.367
of their lives what they missed out on.

0:02:35.867,0:02:39.433
That's why image tags have[br]another attribute, alt,

0:02:39.433,0:02:41.066
which we use to tell browsers

0:02:41.066,0:02:44.108
what the alternate text for an image is.

0:02:44.108,0:02:46.579
To add another attribute,[br]we just put a space

0:02:46.579,0:02:49.510
after the final quote for the last one.

0:02:49.510,0:02:53.635
Then we type alt equals quotes,

0:02:53.635,0:02:57.250
and inside these quotes, the text will be

0:02:57.250,0:02:58.922
some helpful description of the image

0:02:58.922,0:03:03.746
like "rabbit with lop ears in barn."

0:03:04.858,0:03:07.200
That also helps people who see webpages

0:03:07.200,0:03:09.805
but can't really see them, like the blind.

0:03:09.805,0:03:11.496
They use an app called a screen reader,

0:03:11.496,0:03:13.613
which will literally[br]read a webpage to them,

0:03:13.613,0:03:15.701
describing each tag it sees.

0:03:15.701,0:03:18.478
When it sees an image tag,[br]it will read off the alt text

0:03:18.478,0:03:21.335
since a blind person can't see images,

0:03:21.335,0:03:24.317
so you should always, always use alt text

0:03:24.317,0:03:28.076
so that the whole world can[br]experience your webpage.

0:03:28.900,0:03:31.233
Okay, back to the image we can see.

0:03:31.233,0:03:32.893
It's a little big.

0:03:32.893,0:03:34.263
Let's resize it.

0:03:34.263,0:03:36.206
We can do that with more attributes

0:03:37.037,0:03:38.960
with our width or height.

0:03:38.960,0:03:43.159
Let's say, "width equals 100."

0:03:43.975,0:03:47.171
Okay, so now it's 100 pixels wide.

0:03:47.171,0:03:49.423
That's a little too small.

0:03:49.423,0:03:51.347
Let's put our cursor inside and use

0:03:51.347,0:03:53.900
the number scrubber to make it bigger.

0:03:54.023,0:03:56.572
Okay, that looks a lot better.

0:03:56.572,0:03:58.603
Now, let's try adding height.

0:03:58.603,0:04:00.945
I'll just say, "height equals 50."

0:04:00.945,0:04:02.608
Uh-oh!

0:04:02.608,0:04:05.401
I squashed my bunny, poor bunny!

0:04:05.401,0:04:08.764
See, that's why you should[br]usually only specify

0:04:08.764,0:04:10.969
either width or height, but not both

0:04:10.969,0:04:13.273
because you might use the wrong dimensions

0:04:13.273,0:04:16.800
and squish your bunnies, so[br]I say just let the browser

0:04:16.800,0:04:20.884
do the math to decide what the[br]other dimensions should be.

0:04:20.884,0:04:22.500
I'm going to delete height.

0:04:22.500,0:04:25.266
Now that you can make[br]images, start thinking

0:04:25.266,0:04:27.971
about combining all the tags[br]you have in your toolbox,

0:04:27.971,0:04:32.971
lists with images and paragraphs,[br]top 10 craziest animals.

0:04:33.301,0:04:35.833
Just don't put too many[br]images on your page

0:04:35.833,0:04:37.576
because the person[br]checking out your webpage

0:04:37.576,0:04:40.006
will have to load all of them,

0:04:40.006,0:04:42.938
but you can still have a lot of fun.