"Website Basics" was retired on January 6, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML Basics!
You have completed HTML Basics!
Preview
HTML provides elements that add visible descriptions to <img> elements.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
At the end of the previous video,
I suggested that you add the vr-user.jpg
0:00
image inside the article.html file,
located inside the 2017 subfolder.
0:05
If you haven't done that part yet,
that's okay, I'll quickly teach you how.
0:11
So to display the image we need to
reference a file in the image directory
0:14
from inside the articles
in 2017 subfolders.
0:19
So we need to move out of the 2017 and
articles subfolders,
0:22
back up to the root, and
then back down inside the img folder.
0:26
So over in article.html,
0:30
let's add an image element right
below the closing header tag.
0:32
Add the source attribute and
0:43
remember to instruct the browser to go
up one level, out of the current folder,
0:45
we include a ../ in the file path and
0:50
in this case we need two to go
up to the root of the project.
0:54
Then, to reference the image
inside the img folder,
0:59
I'll add the path /img/vr-user.jpg.
1:05
Let's provide some alt text
with the alt attribute.
1:10
And this text will say
User trying a VR headset.
1:15
Click over to our article and
there you go.
1:23
There's our VR user image.
1:27
HTML also provides elements that add
visible descriptions to image elements.
1:29
In magazines, newspapers and
books for example, images and
1:34
illustrations are usually accompanied
by a caption describing them.
1:38
So the figure element provides
a container for images and their caption.
1:42
And the figcaption element lets
you add a caption to an image.
1:46
It associates a caption with
its apparent figure element.
1:50
So now let's add a caption to
the image in the about section.
1:53
So in index.html,
we'll wrap our image tag and figure tags
1:57
Next below the image, we will nest a set
of opening and closing figcaption tags.
2:12
So figcaption is closely related
to the alt attribute you learned
2:22
about in the previous video.
2:26
It's a supporting description
displayed with the image.
2:29
So for this, I'll select and cut
2:32
the text inside the images title attribute
and paste it inside the figcaption.
2:35
And we can also delete the title
attribute from the image tag.
2:40
We'll give this a save.
2:46
Refresh the browser.
2:49
Let's click back to Home.
2:50
And as you can see, by default,
2:53
the browser applies space
around a figure element.
2:54
So now it's indented.
2:58
And you're also able to nest
multiple images within one
3:00
figure element with a single caption,
if they all share the same caption.
3:03
So feel free to add images to the project
and place them inside figure elements and
3:07
apply captions with figcaption.
3:12
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up