Adding Images to the Page5: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.
<img src="img/vr-space.jpg" alt="User experiencing space in VR" title="Virtual reality users can explore faraway places and feel as though they are right in the middle of the action.">
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 In 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.jpe 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 these 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, And 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 far away 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 pads and 4:49 editing images into the page, why don't you include the vr-user.jpg 4:53 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
You need to sign up for Treehouse in order to download course files.Sign up