1
00:00:00,271 --> 00:00:01,900
- [Voiceover] We've been
talking about rabbits

2
00:00:01,900 --> 00:00:05,800
this whole time, describing
them with paragraphs and lists,

3
00:00:05,800 --> 00:00:09,228
but we could just put a
picture on our webpage

4
00:00:09,228 --> 00:00:12,060
and actually show what
a rabbit looks like.

5
00:00:12,400 --> 00:00:16,149
Well, to insert a picture in
a webpage, we use the img tag,

6
00:00:16,149 --> 00:00:19,466
which, as you might
guess, stands for image.

7
00:00:19,466 --> 00:00:22,700
If we just type "image"
though, we don't see anything.

8
00:00:22,700 --> 00:00:23,966
Why not?

9
00:00:23,966 --> 00:00:27,511
Well, we didn't tell the
browser which image to show.

10
00:00:27,511 --> 00:00:29,284
There are millions of
images on the internet,

11
00:00:29,284 --> 00:00:31,469
and we certainly don't want
it to pick a random one

12
00:00:31,469 --> 00:00:33,930
because it might be something
gross that we don't like,

13
00:00:34,699 --> 00:00:37,766
and it also just won't be
what we want it to be of.

14
00:00:37,766 --> 00:00:40,925
We need to tell it the URL of the image.

15
00:00:40,939 --> 00:00:43,073
The URL is what shows up at the top

16
00:00:43,073 --> 00:00:44,770
of browsers in the address bar,

17
00:00:44,770 --> 00:00:46,874
and that's what it is, an address.

18
00:00:46,874 --> 00:00:49,301
It's a way of finding
some resource on the web,

19
00:00:50,485 --> 00:00:52,413
and it means that we
can only insert an image

20
00:00:52,413 --> 00:00:54,552
if it's already on the internet somewhere.

21
00:00:54,552 --> 00:00:57,602
We can't just insert images
that are only on our computer.

22
00:00:58,233 --> 00:01:00,772
There are many ways to find
images on the internet,

23
00:01:00,772 --> 00:01:03,137
but we're making it easier for you here

24
00:01:03,137 --> 00:01:06,037
by providing an image picker
in a photo collection.

25
00:01:06,246 --> 00:01:07,967
To get that to pop up, we need to add

26
00:01:07,967 --> 00:01:10,735
an attribute to our image tag.

27
00:01:10,735 --> 00:01:12,800
An attribute is an additional bit

28
00:01:12,800 --> 00:01:14,772
of information about a tag, and this is

29
00:01:14,772 --> 00:01:17,106
the first attribute that we've seen.

30
00:01:17,736 --> 00:01:19,714
To tell the browser the URL, we're going

31
00:01:19,714 --> 00:01:22,945
to add an attribute with the name, source,

32
00:01:22,945 --> 00:01:26,490
and we'll add a space and then type src.

33
00:01:28,337 --> 00:01:30,866
Now, it stands for source,
but it's very important

34
00:01:30,866 --> 00:01:32,733
that you spell it src because the browser

35
00:01:32,733 --> 00:01:35,333
will ignore it if we misspell it.

36
00:01:35,733 --> 00:01:38,700
Now, I need to put an equal
sign so that I can tell

37
00:01:38,700 --> 00:01:41,400
the browser what the attribute value is,

38
00:01:41,400 --> 00:01:44,925
and now I'll add a quote, and the editor

39
00:01:44,925 --> 00:01:47,286
will autocomplete the end quote,

40
00:01:47,286 --> 00:01:51,053
so attribute values are
always wrapped in two quotes.

41
00:01:51,838 --> 00:01:55,833
Okay, so normally, this is
when we'd start typing our URL,

42
00:01:55,833 --> 00:01:57,600
but here on Khan Academy, that's when

43
00:01:57,600 --> 00:02:00,135
our image picker will pop up.

44
00:02:00,135 --> 00:02:04,024
We'll just pick image, and I
want a picture of a rabbit,

45
00:02:04,024 --> 00:02:06,630
so I'll click the animals tab and select

46
00:02:06,630 --> 00:02:08,871
the adorable rabbit and click okay.

47
00:02:10,238 --> 00:02:13,089
Do you see how there's a
URL inside our quotes now,

48
00:02:13,089 --> 00:02:16,300
and do you see how that
URL starts with http?

49
00:02:16,300 --> 00:02:17,666
That's how we know it's pointing

50
00:02:17,666 --> 00:02:19,666
at some image somewhere on the internet.

51
00:02:19,666 --> 00:02:22,134
Hey, look, there's a bunny on my webpage,

52
00:02:23,226 --> 00:02:26,233
but what if the server
hosting the image was failing,

53
00:02:26,233 --> 00:02:28,133
and the browser couldn't load the image?

54
00:02:28,133 --> 00:02:31,092
How would the viewer know
what my amazing image was of?

55
00:02:31,092 --> 00:02:33,401
They'll see nothing
and wonder for the rest

56
00:02:33,401 --> 00:02:35,367
of their lives what they missed out on.

57
00:02:35,867 --> 00:02:39,433
That's why image tags have
another attribute, alt,

58
00:02:39,433 --> 00:02:41,066
which we use to tell browsers

59
00:02:41,066 --> 00:02:44,108
what the alternate text for an image is.

60
00:02:44,108 --> 00:02:46,579
To add another attribute,
we just put a space

61
00:02:46,579 --> 00:02:49,510
after the final quote for the last one.

62
00:02:49,510 --> 00:02:53,635
Then we type alt equals quotes,

63
00:02:53,635 --> 00:02:57,250
and inside these quotes, the text will be

64
00:02:57,250 --> 00:02:58,922
some helpful description of the image

65
00:02:58,922 --> 00:03:03,746
like "rabbit with lop ears in barn."

66
00:03:04,858 --> 00:03:07,200
That also helps people who see webpages

67
00:03:07,200 --> 00:03:09,805
but can't really see them, like the blind.

68
00:03:09,805 --> 00:03:11,496
They use an app called a screen reader,

69
00:03:11,496 --> 00:03:13,613
which will literally
read a webpage to them,

70
00:03:13,613 --> 00:03:15,701
describing each tag it sees.

71
00:03:15,701 --> 00:03:18,478
When it sees an image tag,
it will read off the alt text

72
00:03:18,478 --> 00:03:21,335
since a blind person can't see images,

73
00:03:21,335 --> 00:03:24,317
so you should always, always use alt text

74
00:03:24,317 --> 00:03:28,076
so that the whole world can
experience your webpage.

75
00:03:28,900 --> 00:03:31,233
Okay, back to the image we can see.

76
00:03:31,233 --> 00:03:32,893
It's a little big.

77
00:03:32,893 --> 00:03:34,263
Let's resize it.

78
00:03:34,263 --> 00:03:36,206
We can do that with more attributes

79
00:03:37,037 --> 00:03:38,960
with our width or height.

80
00:03:38,960 --> 00:03:43,159
Let's say, "width equals 100."

81
00:03:43,975 --> 00:03:47,171
Okay, so now it's 100 pixels wide.

82
00:03:47,171 --> 00:03:49,423
That's a little too small.

83
00:03:49,423 --> 00:03:51,347
Let's put our cursor inside and use

84
00:03:51,347 --> 00:03:53,900
the number scrubber to make it bigger.

85
00:03:54,023 --> 00:03:56,572
Okay, that looks a lot better.

86
00:03:56,572 --> 00:03:58,603
Now, let's try adding height.

87
00:03:58,603 --> 00:04:00,945
I'll just say, "height equals 50."

88
00:04:00,945 --> 00:04:02,608
Uh-oh!

89
00:04:02,608 --> 00:04:05,401
I squashed my bunny, poor bunny!

90
00:04:05,401 --> 00:04:08,764
See, that's why you should
usually only specify

91
00:04:08,764 --> 00:04:10,969
either width or height, but not both

92
00:04:10,969 --> 00:04:13,273
because you might use the wrong dimensions

93
00:04:13,273 --> 00:04:16,800
and squish your bunnies, so
I say just let the browser

94
00:04:16,800 --> 00:04:20,884
do the math to decide what the
other dimensions should be.

95
00:04:20,884 --> 00:04:22,500
I'm going to delete height.

96
00:04:22,500 --> 00:04:25,266
Now that you can make
images, start thinking

97
00:04:25,266 --> 00:04:27,971
about combining all the tags
you have in your toolbox,

98
00:04:27,971 --> 00:04:32,971
lists with images and paragraphs,
top 10 craziest animals.

99
00:04:33,301 --> 00:04:35,833
Just don't put too many
images on your page

100
00:04:35,833 --> 00:04:37,576
because the person
checking out your webpage

101
00:04:37,576 --> 00:04:40,006
will have to load all of them,

102
00:04:40,006 --> 00:04:42,938
but you can still have a lot of fun.