Preview
Video Player
00:00
00:00
Adding Images to the Page
5:09Images draw users in and bring color and life to your pages. Designers and developers use images to display logos, avatars, photographs, illustrations, charts, and more.
Images draw users in and
bring color and life to your pages.
0:00
Designers and
developers use images to display logos,
0:04
avatars, photographs,
illustrations, charts, and more.
0:07
Browsers support several image formats and
0:10
the most common ones you'll use are JPEG,
GIF, PNG, and SVG.
0:13
You can learn more about these image
formats in the teacher's notes
0:17
for this video.
0:20
And the JPEG format we're using in our
project is commonly used to display
0:20
imagery or photographs that contain
great detail in many different colors.
0:26
Now to keep your files organized, it's
best to place images in a separate folder.
0:31
So let's go over to File,
New Folder to create a new folder, and
0:37
we'll name this folder img or image.
0:42
Now drag all three image
files into the image folder
0:45
Next let's add the featured.jpg
image to our page
0:56
by including it inside the intro
div here in index.html.
1:01
So the image element represents
an image in the document, so
1:07
let's add an image tag
above the paragraph.
1:11
Now the image element is considered
an empty element, meaning it
1:14
does not contain any child content and
it doesn't have a separate closing tag.
1:19
And the image tag requires
a source attribute,
1:24
and source lets the browser
know the location of the image.
1:27
So the value needs to be the path to
the image you want to display and
1:31
featured.jpg is located
inside the image folder.
1:35
So as the value for source, we'll type
the relative URL img/featured.jpg
1:39
Now image elements need to provide
the browser a text description of
1:52
the image via the alt attribute.
1:57
The alt attribute is an important
accessibility attribute that displays
1:59
replacement or alternative text to
users when an image is not available.
2:04
So for example, if the image URL is wrong
or if the image format is not supported by
2:08
the browser or
if the image is not yet downloaded.
2:13
And some users also disable images in
the browser to save on download costs.
2:15
So adding alternative text for
2:20
images is required to make your
site more accessible to users.
2:22
It's a best practice.
2:26
In addition users with visual impairments
use assistive technologies like screen
2:27
readers to read webpages to them,
2:32
and the contents of the alt attribute is
read by these technologies to users.
2:34
So it's important to write alternative
text that describes the contents of
2:39
the image and
that helps describe the image to users.
2:43
So for example, I'll set the alt text of
my featured image to Virtual reality user.
2:46
You can learn more about tips for
writing good and
2:55
meaningful alt texts in
the teacher's notes of this video.
2:57
So now, let's add an image to
the about section of our page.
3:01
So we'll include an image tag
right below the about paragraph,
3:05
and let's set the source
attribute to the path
3:13
img/vr-space.jpg. Now we'll
give the image some alt text.
3:18
So I'll add an alt attribute, and set
the text to user experiencing space in VR.
3:26
Now by default,
3:41
the image element displays an image using
the inherent dimensions of the image file.
3:42
So for example,
featured.jpg is 300 by 300 pixels and
3:47
vrspace.jpg is 500 pixels by 327 pixels.
3:54
Now if you wanna add additional
information about an image to your users,
3:59
you can include a title
attribute inside the image tag.
4:03
So for instance, right after
the alt text for the about image,
4:08
we'll add a title attribute and
inside add the text,
4:12
Virtual reality users can
explore faraway places
4:15
and feel as though they are right
in the middle of the action.
4:26
So we'll give this a save, refresh
the browser, and you'll see that most
4:36
browsers present this information to
the user when they hover over the image.
4:41
And this is refer to as a tool tip.
4:45
All right, so now that you've
had practice with file paths and
4:49
adding images into the page,
why don't you include the vr-user.jpg
4:52
image inside the article file
in the 2017 sub-folder here?
4:59
And you can see how I added
the image in the next video.
5:03