1
00:00:00,300 --> 00:00:02,130
Instructor: Now a website would be pretty boring

2
00:00:02,130 --> 00:00:04,620
if it had no images on it, right?

3
00:00:04,620 --> 00:00:07,830
So in this lesson, we're gonna learn how we can add images

4
00:00:07,830 --> 00:00:12,030
to our website using the image element.

5
00:00:12,030 --> 00:00:14,910
Now, this is what it looks like, it's pretty simple.

6
00:00:14,910 --> 00:00:18,840
And you'll notice that similar to the anchor tag

7
00:00:18,840 --> 00:00:20,490
or the anchor element that we learned about

8
00:00:20,490 --> 00:00:24,570
in the last lesson, the main component of an image tag

9
00:00:24,570 --> 00:00:27,570
that renders the image is this attribute,

10
00:00:27,570 --> 00:00:31,350
which is called source or SRC.

11
00:00:31,350 --> 00:00:36,150
And what this does is it tells the image element

12
00:00:36,150 --> 00:00:38,793
what is the source of the image.

13
00:00:40,080 --> 00:00:42,450
And that's why after the equal sign,

14
00:00:42,450 --> 00:00:47,450
the value is going to be the location of the image.

15
00:00:48,930 --> 00:00:51,930
One last thing to notice about the image tag

16
00:00:51,930 --> 00:00:56,930
is unlike the anchor tag, it doesn't have a closing tag.

17
00:00:57,210 --> 00:01:00,720
Instead, it is a self-closing tag,

18
00:01:00,720 --> 00:01:03,780
also known as a void element.

19
00:01:03,780 --> 00:01:06,570
Remember previously we learned about void elements,

20
00:01:06,570 --> 00:01:08,280
where we learned that you can have

21
00:01:08,280 --> 00:01:10,350
a horizontal rule element,

22
00:01:10,350 --> 00:01:12,720
you can also have a break element.

23
00:01:12,720 --> 00:01:17,340
And similarly, the image element is also a void element

24
00:01:17,340 --> 00:01:19,410
that doesn't have a closing tag.

25
00:01:19,410 --> 00:01:20,730
Because if you think about it,

26
00:01:20,730 --> 00:01:23,190
what is the text content of an image?

27
00:01:23,190 --> 00:01:24,390
It doesn't really make sense, right?

28
00:01:24,390 --> 00:01:27,420
The main content is actually the image

29
00:01:27,420 --> 00:01:30,570
that will be rendered from the source.

30
00:01:30,570 --> 00:01:31,800
What does this look like?

31
00:01:31,800 --> 00:01:34,530
Well, here's an example image element

32
00:01:34,530 --> 00:01:38,730
where we've set the source to a real life live photo

33
00:01:38,730 --> 00:01:40,350
on the internet.

34
00:01:40,350 --> 00:01:42,510
Now when this code is rendered in a website,

35
00:01:42,510 --> 00:01:45,090
it will display a random image.

36
00:01:45,090 --> 00:01:49,170
So in this case, the random image I got was a forest.

37
00:01:49,170 --> 00:01:51,060
And the reason why it's random

38
00:01:51,060 --> 00:01:53,010
is because I'm getting these photos

39
00:01:53,010 --> 00:01:56,520
from a source called picsum.photos.

40
00:01:56,520 --> 00:01:58,530
So if you type this into your browser,

41
00:01:58,530 --> 00:02:00,000
you should see a website.

42
00:02:00,000 --> 00:02:03,090
And the idea is kind of like the Lorem Ipsum

43
00:02:03,090 --> 00:02:05,340
for placeholder photos.

44
00:02:05,340 --> 00:02:07,860
So when you don't really care what the photo is

45
00:02:07,860 --> 00:02:11,340
but you need a photo on your website as you're creating it

46
00:02:11,340 --> 00:02:13,260
in order to see what it would look like,

47
00:02:13,260 --> 00:02:15,270
then you could use this website.

48
00:02:15,270 --> 00:02:17,850
And you could put in the URL,

49
00:02:17,850 --> 00:02:21,600
which is the standard one like here.

50
00:02:21,600 --> 00:02:23,910
And then after a forward slash you can add in

51
00:02:23,910 --> 00:02:26,100
the size of your image.

52
00:02:26,100 --> 00:02:28,530
So in this case I'm saying I want a square

53
00:02:28,530 --> 00:02:32,880
that is 200 pixels by 200 pixels.

54
00:02:32,880 --> 00:02:35,640
It gives me a random image from its data bank,

55
00:02:35,640 --> 00:02:38,790
for example in this case, of a forest.

56
00:02:38,790 --> 00:02:43,790
The other attribute for a image tag that's super important

57
00:02:43,830 --> 00:02:48,830
and one that you should always have is the alt attribute.

58
00:02:48,930 --> 00:02:51,270
And the alt attribute stands for

59
00:02:51,270 --> 00:02:54,180
alternative text description.

60
00:02:54,180 --> 00:02:57,660
This is really important because people who are blind

61
00:02:57,660 --> 00:02:58,860
or visually impaired,

62
00:02:58,860 --> 00:03:01,560
they don't look at the internet the same way we do.

63
00:03:01,560 --> 00:03:03,990
They often use something called a screen reader.

64
00:03:03,990 --> 00:03:05,760
And what the screen reader's gonna do

65
00:03:05,760 --> 00:03:09,420
when it hits an image is it will look at

66
00:03:09,420 --> 00:03:11,910
the alternative text provided.

67
00:03:11,910 --> 00:03:15,060
So in this case, I've provided that this is a forest

68
00:03:15,060 --> 00:03:18,240
at sunset or sunrise, I'm not quite sure.

69
00:03:18,240 --> 00:03:21,480
But that means that the person with visual impairment

70
00:03:21,480 --> 00:03:23,370
will get this read out to them

71
00:03:23,370 --> 00:03:27,030
and it'll help them understand what the website's all about.

72
00:03:27,030 --> 00:03:29,790
So what is this process like?

73
00:03:29,790 --> 00:03:33,150
As an example, I'm using the Silktide toolbar,

74
00:03:33,150 --> 00:03:35,430
which is a Chrome browser extension,

75
00:03:35,430 --> 00:03:39,630
to simulate what a person with visual impairment might hear

76
00:03:39,630 --> 00:03:42,690
as they're browsing, in this case the BBC website.

77
00:03:42,690 --> 00:03:44,280
As I click through next,

78
00:03:44,280 --> 00:03:47,070
you can see it describes the different things

79
00:03:47,070 --> 00:03:48,540
that are on screen.

80
00:03:48,540 --> 00:03:51,090
And if I go over to the image,

81
00:03:51,090 --> 00:03:53,583
it describes the image for me.

82
00:03:55,440 --> 00:03:58,950
Voiceover: Item two, dolphin leaping from the sea image.

83
00:03:58,950 --> 00:04:01,470
Instructor: So where is it getting this description from?

84
00:04:01,470 --> 00:04:04,770
Well, if we right click on the image and inspect it,

85
00:04:04,770 --> 00:04:07,020
and if we look for the image,

86
00:04:07,020 --> 00:04:09,780
which I think should be down here,

87
00:04:09,780 --> 00:04:13,050
you can see as I highlight different parts,

88
00:04:13,050 --> 00:04:14,610
it shows me which part.

89
00:04:14,610 --> 00:04:18,329
So in this element, I'm probably going to find an image

90
00:04:18,329 --> 00:04:20,700
at the end right here.

91
00:04:20,700 --> 00:04:23,167
And you can see the alt text saying,

92
00:04:23,167 --> 00:04:25,800
"Dolphin leaping from the sea."

93
00:04:25,800 --> 00:04:28,680
And that is what gets read out from the screen reader,

94
00:04:28,680 --> 00:04:32,010
helping somebody with blindness be able to understand

95
00:04:32,010 --> 00:04:33,423
what's on this website.

96
00:04:34,650 --> 00:04:36,540
Now, if you wanna check out this tool,

97
00:04:36,540 --> 00:04:40,170
it's a Chrome browser extension called Silktide

98
00:04:40,170 --> 00:04:42,330
and it should be a free plugin,

99
00:04:42,330 --> 00:04:44,310
but it might only work on Mac

100
00:04:44,310 --> 00:04:47,070
or certain versions of Windows.

101
00:04:47,070 --> 00:04:49,230
But, it's not so much about the tool

102
00:04:49,230 --> 00:04:51,990
but I wanted to show you how important it is,

103
00:04:51,990 --> 00:04:55,650
the alt text that you provide, for accessibility

104
00:04:55,650 --> 00:04:58,920
and for disabled users browsing your website.

105
00:04:58,920 --> 00:05:00,570
Now let's try and exercise

106
00:05:00,570 --> 00:05:03,270
and create some images of our own.

107
00:05:03,270 --> 00:05:07,230
Download this zip file from this current lesson,

108
00:05:07,230 --> 00:05:08,460
and go ahead and drag it

109
00:05:08,460 --> 00:05:10,890
into your web development project folder

110
00:05:10,890 --> 00:05:13,860
and open it inside VS Code.

111
00:05:13,860 --> 00:05:16,530
If you take a look inside the index.html,

112
00:05:16,530 --> 00:05:21,000
you can see I've provided to you two image URL examples

113
00:05:21,000 --> 00:05:22,680
that you can use.

114
00:05:22,680 --> 00:05:25,470
And what we're aiming for is to find out

115
00:05:25,470 --> 00:05:28,920
if you're a cat person or if you're a dog person.

116
00:05:28,920 --> 00:05:31,987
I want you to create a h1 that says,

117
00:05:31,987 --> 00:05:34,650
"I'm a cat person or I'm a dog person."

118
00:05:34,650 --> 00:05:37,950
And also I want you to add a image element

119
00:05:37,950 --> 00:05:39,720
straight afterwards.

120
00:05:39,720 --> 00:05:44,720
Now, you can use the URL for the dog or for the cat.

121
00:05:45,180 --> 00:05:47,640
It doesn't really matter at the end of the day

122
00:05:47,640 --> 00:05:51,450
as long as you've understood how to create images.

123
00:05:51,450 --> 00:05:52,920
That's the challenge.

124
00:05:52,920 --> 00:05:55,683
Pause the video and give that a go.

125
00:05:58,440 --> 00:06:02,550
All right, so personally, I'm more of a dog kind of person.

126
00:06:02,550 --> 00:06:04,920
And if you're also a dog person

127
00:06:04,920 --> 00:06:07,410
then you might see my little Easter egg

128
00:06:07,410 --> 00:06:09,000
that I've buried in there.

129
00:06:09,000 --> 00:06:11,793
So first, let's go ahead and create our h1.

130
00:06:14,010 --> 00:06:16,770
And then we're going to create our image.

131
00:06:16,770 --> 00:06:21,770
Remember, we create a image tag and it's a self-closing tag.

132
00:06:22,920 --> 00:06:27,920
Then we add in our source as the image source

133
00:06:29,700 --> 00:06:34,290
and we're going to put our URL right inside there.

134
00:06:34,290 --> 00:06:37,470
Now, already, if we go ahead and show preview,

135
00:06:37,470 --> 00:06:40,920
you can see our little dog digging in the sand.

136
00:06:40,920 --> 00:06:45,920
Because if you've noticed, this is actually a GIF image.

137
00:06:46,830 --> 00:06:50,460
GIF images work exactly the same way as normal images,

138
00:06:50,460 --> 00:06:52,380
JPEGs or PNGs.

139
00:06:52,380 --> 00:06:54,240
As long as you put it into the source,

140
00:06:54,240 --> 00:06:56,310
it will be rendered in a website

141
00:06:56,310 --> 00:06:58,950
and it will start animating all by itself,

142
00:06:58,950 --> 00:07:02,310
and you get a cute little dog digging through the sand.

143
00:07:02,310 --> 00:07:03,630
Now, if you're a cat person

144
00:07:03,630 --> 00:07:08,630
then this is just a static JPEG because cats are more chill.

145
00:07:08,702 --> 00:07:09,990
(Instructor laughing)

146
00:07:09,990 --> 00:07:13,350
So, I hope you managed to get that part right.

147
00:07:13,350 --> 00:07:17,670
But we haven't finished creating our image element yet.

148
00:07:17,670 --> 00:07:20,700
Remember what I said about the alt tag.

149
00:07:20,700 --> 00:07:23,430
It's a good idea to always add an alt tag

150
00:07:23,430 --> 00:07:26,250
to describe our image when we can.

151
00:07:26,250 --> 00:07:29,280
Now, there are some cases where you don't create an alt tag

152
00:07:29,280 --> 00:07:31,290
because it's not really relevant

153
00:07:31,290 --> 00:07:33,930
to somebody reading through the content of a website

154
00:07:33,930 --> 00:07:37,020
and you can in fact leave it blank.

155
00:07:37,020 --> 00:07:38,670
But in this case, it's very simple.

156
00:07:38,670 --> 00:07:43,473
We've got a puppy who is digging through the sand.

157
00:07:45,120 --> 00:07:48,840
And now when we take a look at our preview

158
00:07:48,840 --> 00:07:52,110
then nothing visually for us changes,

159
00:07:52,110 --> 00:07:54,210
but behind the scenes we will help

160
00:07:54,210 --> 00:07:56,790
our visually impaired friends to be able to understand

161
00:07:56,790 --> 00:07:59,430
our website just a little bit better.

162
00:07:59,430 --> 00:08:03,450
So I hope you managed to achieve either of these goals.

163
00:08:03,450 --> 00:08:06,120
And once you're ready, we can head over to the next lesson

164
00:08:06,120 --> 00:08:08,190
where we got the final project

165
00:08:08,190 --> 00:08:11,910
to create a birthday invite website

166
00:08:11,910 --> 00:08:14,490
using all the skills that we've learned so far.

167
00:08:14,490 --> 00:08:17,727
So for all of that and more, I'll see you there.