1
00:00:00,400 --> 00:00:05,050
At the end of the previous video,
I suggested that you add the vr-user.jpg

2
00:00:05,050 --> 00:00:11,050
image inside the article.html file,
located inside the 2017 subfolder.

3
00:00:11,050 --> 00:00:14,105
If you haven't done that part yet,
that's okay, I'll quickly teach you how.

4
00:00:14,105 --> 00:00:19,065
So to display the image we need to
reference a file in the image directory

5
00:00:19,065 --> 00:00:22,475
from inside the articles
in 2017 subfolders.

6
00:00:22,475 --> 00:00:26,197
So we need to move out of the 2017 and
articles subfolders,

7
00:00:26,197 --> 00:00:30,857
back up to the root, and
then back down inside the img folder.

8
00:00:30,857 --> 00:00:32,784
So over in article.html,

9
00:00:32,784 --> 00:00:37,322
let's add an image element right
below the closing header tag.

10
00:00:43,310 --> 00:00:45,231
Add the source attribute and

11
00:00:45,231 --> 00:00:50,790
remember to instruct the browser to go
up one level, out of the current folder,

12
00:00:50,790 --> 00:00:54,660
we include a ../ in the file path and

13
00:00:54,660 --> 00:00:58,220
in this case we need two to go
up to the root of the project.

14
00:00:59,450 --> 00:01:05,391
Then, to reference the image
inside the img folder,

15
00:01:05,391 --> 00:01:10,288
I'll add the path /img/vr-user.jpg.

16
00:01:10,288 --> 00:01:15,042
Let's provide some alt text
with the alt attribute.

17
00:01:15,042 --> 00:01:17,962
And this text will say
User trying a VR headset.

18
00:01:23,153 --> 00:01:27,240
Click over to our article and
there you go.

19
00:01:27,240 --> 00:01:28,420
There's our VR user image.

20
00:01:29,795 --> 00:01:34,960
HTML also provides elements that add
visible descriptions to image elements.

21
00:01:34,960 --> 00:01:38,280
In magazines, newspapers and
books for example, images and

22
00:01:38,280 --> 00:01:42,350
illustrations are usually accompanied
by a caption describing them.

23
00:01:42,350 --> 00:01:46,623
So the figure element provides
a container for images and their caption.

24
00:01:46,623 --> 00:01:50,840
And the figcaption element lets
you add a caption to an image.

25
00:01:50,840 --> 00:01:53,680
It associates a caption with
its apparent figure element.

26
00:01:53,680 --> 00:01:57,232
So now let's add a caption to
the image in the about section.

27
00:01:57,232 --> 00:02:04,112
So in index.html,
we'll wrap our image tag and figure tags

28
00:02:12,282 --> 00:02:18,570
Next below the image, we will nest a set
of opening and closing figcaption tags.

29
00:02:22,262 --> 00:02:26,706
So figcaption is closely related
to the alt attribute you learned

30
00:02:26,706 --> 00:02:29,030
about in the previous video.

31
00:02:29,030 --> 00:02:32,120
It's a supporting description
displayed with the image.

32
00:02:32,120 --> 00:02:35,130
So for this, I'll select and cut

33
00:02:35,130 --> 00:02:40,800
the text inside the images title attribute
and paste it inside the figcaption.

34
00:02:40,800 --> 00:02:43,353
And we can also delete the title
attribute from the image tag.

35
00:02:46,908 --> 00:02:48,190
We'll give this a save.

36
00:02:49,790 --> 00:02:50,570
Refresh the browser.

37
00:02:50,570 --> 00:02:53,240
Let's click back to Home.

38
00:02:53,240 --> 00:02:54,970
And as you can see, by default,

39
00:02:54,970 --> 00:02:58,470
the browser applies space
around a figure element.

40
00:02:58,470 --> 00:03:00,410
So now it's indented.

41
00:03:00,410 --> 00:03:03,950
And you're also able to nest
multiple images within one

42
00:03:03,950 --> 00:03:07,950
figure element with a single caption,
if they all share the same caption.

43
00:03:07,950 --> 00:03:12,030
So feel free to add images to the project
and place them inside figure elements and

44
00:03:12,030 --> 00:03:13,940
apply captions with figcaption.