WEBVTT 00:00:00.271 --> 00:00:01.900 - [Voiceover] We've been talking about rabbits 00:00:01.900 --> 00:00:05.800 this whole time, describing them with paragraphs and lists, 00:00:05.800 --> 00:00:09.228 but we could just put a picture on our webpage 00:00:09.228 --> 00:00:12.060 and actually show what a rabbit looks like. 00:00:12.400 --> 00:00:16.149 Well, to insert a picture in a webpage, we use the img tag, 00:00:16.149 --> 00:00:19.466 which, as you might guess, stands for image. 00:00:19.466 --> 00:00:22.700 If we just type "image" though, we don't see anything. 00:00:22.700 --> 00:00:23.966 Why not? 00:00:23.966 --> 00:00:27.511 Well, we didn't tell the browser which image to show. 00:00:27.511 --> 00:00:29.284 There are millions of images on the internet, 00:00:29.284 --> 00:00:31.469 and we certainly don't want it to pick a random one 00:00:31.469 --> 00:00:33.930 because it might be something gross that we don't like, 00:00:34.699 --> 00:00:37.766 and it also just won't be what we want it to be of. 00:00:37.766 --> 00:00:40.925 We need to tell it the URL of the image. 00:00:40.939 --> 00:00:43.073 The URL is what shows up at the top 00:00:43.073 --> 00:00:44.770 of browsers in the address bar, 00:00:44.770 --> 00:00:46.874 and that's what it is, an address. 00:00:46.874 --> 00:00:49.301 It's a way of finding some resource on the web, 00:00:50.485 --> 00:00:52.413 and it means that we can only insert an image 00:00:52.413 --> 00:00:54.552 if it's already on the internet somewhere. 00:00:54.552 --> 00:00:57.602 We can't just insert images that are only on our computer. 00:00:58.233 --> 00:01:00.772 There are many ways to find images on the internet, 00:01:00.772 --> 00:01:03.137 but we're making it easier for you here 00:01:03.137 --> 00:01:06.037 by providing an image picker in a photo collection. 00:01:06.246 --> 00:01:07.967 To get that to pop up, we need to add 00:01:07.967 --> 00:01:10.735 an attribute to our image tag. 00:01:10.735 --> 00:01:12.800 An attribute is an additional bit 00:01:12.800 --> 00:01:14.772 of information about a tag, and this is 00:01:14.772 --> 00:01:17.106 the first attribute that we've seen. 00:01:17.736 --> 00:01:19.714 To tell the browser the URL, we're going 00:01:19.714 --> 00:01:22.945 to add an attribute with the name, source, 00:01:22.945 --> 00:01:26.490 and we'll add a space and then type src. 00:01:28.337 --> 00:01:30.866 Now, it stands for source, but it's very important 00:01:30.866 --> 00:01:32.733 that you spell it src because the browser 00:01:32.733 --> 00:01:35.333 will ignore it if we misspell it. 00:01:35.733 --> 00:01:38.700 Now, I need to put an equal sign so that I can tell 00:01:38.700 --> 00:01:41.400 the browser what the attribute value is, 00:01:41.400 --> 00:01:44.925 and now I'll add a quote, and the editor 00:01:44.925 --> 00:01:47.286 will autocomplete the end quote, 00:01:47.286 --> 00:01:51.053 so attribute values are always wrapped in two quotes. 00:01:51.838 --> 00:01:55.833 Okay, so normally, this is when we'd start typing our URL, 00:01:55.833 --> 00:01:57.600 but here on Khan Academy, that's when 00:01:57.600 --> 00:02:00.135 our image picker will pop up. 00:02:00.135 --> 00:02:04.024 We'll just pick image, and I want a picture of a rabbit, 00:02:04.024 --> 00:02:06.630 so I'll click the animals tab and select 00:02:06.630 --> 00:02:08.871 the adorable rabbit and click okay. 00:02:10.238 --> 00:02:13.089 Do you see how there's a URL inside our quotes now, 00:02:13.089 --> 00:02:16.300 and do you see how that URL starts with http? 00:02:16.300 --> 00:02:17.666 That's how we know it's pointing 00:02:17.666 --> 00:02:19.666 at some image somewhere on the internet. 00:02:19.666 --> 00:02:22.134 Hey, look, there's a bunny on my webpage, 00:02:23.226 --> 00:02:26.233 but what if the server hosting the image was failing, 00:02:26.233 --> 00:02:28.133 and the browser couldn't load the image? 00:02:28.133 --> 00:02:31.092 How would the viewer know what my amazing image was of? 00:02:31.092 --> 00:02:33.401 They'll see nothing and wonder for the rest 00:02:33.401 --> 00:02:35.367 of their lives what they missed out on. 00:02:35.867 --> 00:02:39.433 That's why image tags have another attribute, alt, 00:02:39.433 --> 00:02:41.066 which we use to tell browsers 00:02:41.066 --> 00:02:44.108 what the alternate text for an image is. 00:02:44.108 --> 00:02:46.579 To add another attribute, we just put a space 00:02:46.579 --> 00:02:49.510 after the final quote for the last one. 00:02:49.510 --> 00:02:53.635 Then we type alt equals quotes, 00:02:53.635 --> 00:02:57.250 and inside these quotes, the text will be 00:02:57.250 --> 00:02:58.922 some helpful description of the image 00:02:58.922 --> 00:03:03.746 like "rabbit with lop ears in barn." 00:03:04.858 --> 00:03:07.200 That also helps people who see webpages 00:03:07.200 --> 00:03:09.805 but can't really see them, like the blind. 00:03:09.805 --> 00:03:11.496 They use an app called a screen reader, 00:03:11.496 --> 00:03:13.613 which will literally read a webpage to them, 00:03:13.613 --> 00:03:15.701 describing each tag it sees. 00:03:15.701 --> 00:03:18.478 When it sees an image tag, it will read off the alt text 00:03:18.478 --> 00:03:21.335 since a blind person can't see images, 00:03:21.335 --> 00:03:24.317 so you should always, always use alt text 00:03:24.317 --> 00:03:28.076 so that the whole world can experience your webpage. 00:03:28.900 --> 00:03:31.233 Okay, back to the image we can see. 00:03:31.233 --> 00:03:32.893 It's a little big. 00:03:32.893 --> 00:03:34.263 Let's resize it. 00:03:34.263 --> 00:03:36.206 We can do that with more attributes 00:03:37.037 --> 00:03:38.960 with our width or height. 00:03:38.960 --> 00:03:43.159 Let's say, "width equals 100." 00:03:43.975 --> 00:03:47.171 Okay, so now it's 100 pixels wide. 00:03:47.171 --> 00:03:49.423 That's a little too small. 00:03:49.423 --> 00:03:51.347 Let's put our cursor inside and use 00:03:51.347 --> 00:03:53.900 the number scrubber to make it bigger. 00:03:54.023 --> 00:03:56.572 Okay, that looks a lot better. 00:03:56.572 --> 00:03:58.603 Now, let's try adding height. 00:03:58.603 --> 00:04:00.945 I'll just say, "height equals 50." 00:04:00.945 --> 00:04:02.608 Uh-oh! 00:04:02.608 --> 00:04:05.401 I squashed my bunny, poor bunny! 00:04:05.401 --> 00:04:08.764 See, that's why you should usually only specify 00:04:08.764 --> 00:04:10.969 either width or height, but not both 00:04:10.969 --> 00:04:13.273 because you might use the wrong dimensions 00:04:13.273 --> 00:04:16.800 and squish your bunnies, so I say just let the browser 00:04:16.800 --> 00:04:20.884 do the math to decide what the other dimensions should be. 00:04:20.884 --> 00:04:22.500 I'm going to delete height. 00:04:22.500 --> 00:04:25.266 Now that you can make images, start thinking 00:04:25.266 --> 00:04:27.971 about combining all the tags you have in your toolbox, 00:04:27.971 --> 00:04:32.971 lists with images and paragraphs, top 10 craziest animals. 00:04:33.301 --> 00:04:35.833 Just don't put too many images on your page 00:04:35.833 --> 00:04:37.576 because the person checking out your webpage 00:04:37.576 --> 00:04:40.006 will have to load all of them, 00:04:40.006 --> 00:04:42.938 but you can still have a lot of fun.