Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

HTML Basics

Well done!

You have completed HTML Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Adding Images to the Page

5:09 with Guil Hernandez

Images 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