[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.27,0:00:01.90,Default,,0000,0000,0000,,- [Voiceover] We've been\Ntalking about rabbits
Dialogue: 0,0:00:01.90,0:00:05.80,Default,,0000,0000,0000,,this whole time, describing\Nthem with paragraphs and lists,
Dialogue: 0,0:00:05.80,0:00:09.23,Default,,0000,0000,0000,,but we could just put a\Npicture on our webpage
Dialogue: 0,0:00:09.23,0:00:12.06,Default,,0000,0000,0000,,and actually show what\Na rabbit looks like.
Dialogue: 0,0:00:12.40,0:00:16.15,Default,,0000,0000,0000,,Well, to insert a picture in\Na webpage, we use the img tag,
Dialogue: 0,0:00:16.15,0:00:19.47,Default,,0000,0000,0000,,which, as you might\Nguess, stands for image.
Dialogue: 0,0:00:19.47,0:00:22.70,Default,,0000,0000,0000,,If we just type "image"\Nthough, we don't see anything.
Dialogue: 0,0:00:22.70,0:00:23.97,Default,,0000,0000,0000,,Why not?
Dialogue: 0,0:00:23.97,0:00:27.51,Default,,0000,0000,0000,,Well, we didn't tell the\Nbrowser which image to show.
Dialogue: 0,0:00:27.51,0:00:29.28,Default,,0000,0000,0000,,There are millions of\Nimages on the internet,
Dialogue: 0,0:00:29.28,0:00:31.47,Default,,0000,0000,0000,,and we certainly don't want\Nit to pick a random one
Dialogue: 0,0:00:31.47,0:00:33.93,Default,,0000,0000,0000,,because it might be something\Ngross that we don't like,
Dialogue: 0,0:00:34.70,0:00:37.77,Default,,0000,0000,0000,,and it also just won't be\Nwhat we want it to be of.
Dialogue: 0,0:00:37.77,0:00:40.92,Default,,0000,0000,0000,,We need to tell it the URL of the image.
Dialogue: 0,0:00:40.94,0:00:43.07,Default,,0000,0000,0000,,The URL is what shows up at the top
Dialogue: 0,0:00:43.07,0:00:44.77,Default,,0000,0000,0000,,of browsers in the address bar,
Dialogue: 0,0:00:44.77,0:00:46.87,Default,,0000,0000,0000,,and that's what it is, an address.
Dialogue: 0,0:00:46.87,0:00:49.30,Default,,0000,0000,0000,,It's a way of finding\Nsome resource on the web,
Dialogue: 0,0:00:50.48,0:00:52.41,Default,,0000,0000,0000,,and it means that we\Ncan only insert an image
Dialogue: 0,0:00:52.41,0:00:54.55,Default,,0000,0000,0000,,if it's already on the internet somewhere.
Dialogue: 0,0:00:54.55,0:00:57.60,Default,,0000,0000,0000,,We can't just insert images\Nthat are only on our computer.
Dialogue: 0,0:00:58.23,0:01:00.77,Default,,0000,0000,0000,,There are many ways to find\Nimages on the internet,
Dialogue: 0,0:01:00.77,0:01:03.14,Default,,0000,0000,0000,,but we're making it easier for you here
Dialogue: 0,0:01:03.14,0:01:06.04,Default,,0000,0000,0000,,by providing an image picker\Nin a photo collection.
Dialogue: 0,0:01:06.25,0:01:07.97,Default,,0000,0000,0000,,To get that to pop up, we need to add
Dialogue: 0,0:01:07.97,0:01:10.74,Default,,0000,0000,0000,,an attribute to our image tag.
Dialogue: 0,0:01:10.74,0:01:12.80,Default,,0000,0000,0000,,An attribute is an additional bit
Dialogue: 0,0:01:12.80,0:01:14.77,Default,,0000,0000,0000,,of information about a tag, and this is
Dialogue: 0,0:01:14.77,0:01:17.11,Default,,0000,0000,0000,,the first attribute that we've seen.
Dialogue: 0,0:01:17.74,0:01:19.71,Default,,0000,0000,0000,,To tell the browser the URL, we're going
Dialogue: 0,0:01:19.71,0:01:22.94,Default,,0000,0000,0000,,to add an attribute with the name, source,
Dialogue: 0,0:01:22.94,0:01:26.49,Default,,0000,0000,0000,,and we'll add a space and then type src.
Dialogue: 0,0:01:28.34,0:01:30.87,Default,,0000,0000,0000,,Now, it stands for source,\Nbut it's very important
Dialogue: 0,0:01:30.87,0:01:32.73,Default,,0000,0000,0000,,that you spell it src because the browser
Dialogue: 0,0:01:32.73,0:01:35.33,Default,,0000,0000,0000,,will ignore it if we misspell it.
Dialogue: 0,0:01:35.73,0:01:38.70,Default,,0000,0000,0000,,Now, I need to put an equal\Nsign so that I can tell
Dialogue: 0,0:01:38.70,0:01:41.40,Default,,0000,0000,0000,,the browser what the attribute value is,
Dialogue: 0,0:01:41.40,0:01:44.92,Default,,0000,0000,0000,,and now I'll add a quote, and the editor
Dialogue: 0,0:01:44.92,0:01:47.29,Default,,0000,0000,0000,,will autocomplete the end quote,
Dialogue: 0,0:01:47.29,0:01:51.05,Default,,0000,0000,0000,,so attribute values are\Nalways wrapped in two quotes.
Dialogue: 0,0:01:51.84,0:01:55.83,Default,,0000,0000,0000,,Okay, so normally, this is\Nwhen we'd start typing our URL,
Dialogue: 0,0:01:55.83,0:01:57.60,Default,,0000,0000,0000,,but here on Khan Academy, that's when
Dialogue: 0,0:01:57.60,0:02:00.14,Default,,0000,0000,0000,,our image picker will pop up.
Dialogue: 0,0:02:00.14,0:02:04.02,Default,,0000,0000,0000,,We'll just pick image, and I\Nwant a picture of a rabbit,
Dialogue: 0,0:02:04.02,0:02:06.63,Default,,0000,0000,0000,,so I'll click the animals tab and select
Dialogue: 0,0:02:06.63,0:02:08.87,Default,,0000,0000,0000,,the adorable rabbit and click okay.
Dialogue: 0,0:02:10.24,0:02:13.09,Default,,0000,0000,0000,,Do you see how there's a\NURL inside our quotes now,
Dialogue: 0,0:02:13.09,0:02:16.30,Default,,0000,0000,0000,,and do you see how that\NURL starts with http?
Dialogue: 0,0:02:16.30,0:02:17.67,Default,,0000,0000,0000,,That's how we know it's pointing
Dialogue: 0,0:02:17.67,0:02:19.67,Default,,0000,0000,0000,,at some image somewhere on the internet.
Dialogue: 0,0:02:19.67,0:02:22.13,Default,,0000,0000,0000,,Hey, look, there's a bunny on my webpage,
Dialogue: 0,0:02:23.23,0:02:26.23,Default,,0000,0000,0000,,but what if the server\Nhosting the image was failing,
Dialogue: 0,0:02:26.23,0:02:28.13,Default,,0000,0000,0000,,and the browser couldn't load the image?
Dialogue: 0,0:02:28.13,0:02:31.09,Default,,0000,0000,0000,,How would the viewer know\Nwhat my amazing image was of?
Dialogue: 0,0:02:31.09,0:02:33.40,Default,,0000,0000,0000,,They'll see nothing\Nand wonder for the rest
Dialogue: 0,0:02:33.40,0:02:35.37,Default,,0000,0000,0000,,of their lives what they missed out on.
Dialogue: 0,0:02:35.87,0:02:39.43,Default,,0000,0000,0000,,That's why image tags have\Nanother attribute, alt,
Dialogue: 0,0:02:39.43,0:02:41.07,Default,,0000,0000,0000,,which we use to tell browsers
Dialogue: 0,0:02:41.07,0:02:44.11,Default,,0000,0000,0000,,what the alternate text for an image is.
Dialogue: 0,0:02:44.11,0:02:46.58,Default,,0000,0000,0000,,To add another attribute,\Nwe just put a space
Dialogue: 0,0:02:46.58,0:02:49.51,Default,,0000,0000,0000,,after the final quote for the last one.
Dialogue: 0,0:02:49.51,0:02:53.64,Default,,0000,0000,0000,,Then we type alt equals quotes,
Dialogue: 0,0:02:53.64,0:02:57.25,Default,,0000,0000,0000,,and inside these quotes, the text will be
Dialogue: 0,0:02:57.25,0:02:58.92,Default,,0000,0000,0000,,some helpful description of the image
Dialogue: 0,0:02:58.92,0:03:03.75,Default,,0000,0000,0000,,like "rabbit with lop ears in barn."
Dialogue: 0,0:03:04.86,0:03:07.20,Default,,0000,0000,0000,,That also helps people who see webpages
Dialogue: 0,0:03:07.20,0:03:09.80,Default,,0000,0000,0000,,but can't really see them, like the blind.
Dialogue: 0,0:03:09.80,0:03:11.50,Default,,0000,0000,0000,,They use an app called a screen reader,
Dialogue: 0,0:03:11.50,0:03:13.61,Default,,0000,0000,0000,,which will literally\Nread a webpage to them,
Dialogue: 0,0:03:13.61,0:03:15.70,Default,,0000,0000,0000,,describing each tag it sees.
Dialogue: 0,0:03:15.70,0:03:18.48,Default,,0000,0000,0000,,When it sees an image tag,\Nit will read off the alt text
Dialogue: 0,0:03:18.48,0:03:21.34,Default,,0000,0000,0000,,since a blind person can't see images,
Dialogue: 0,0:03:21.34,0:03:24.32,Default,,0000,0000,0000,,so you should always, always use alt text
Dialogue: 0,0:03:24.32,0:03:28.08,Default,,0000,0000,0000,,so that the whole world can\Nexperience your webpage.
Dialogue: 0,0:03:28.90,0:03:31.23,Default,,0000,0000,0000,,Okay, back to the image we can see.
Dialogue: 0,0:03:31.23,0:03:32.89,Default,,0000,0000,0000,,It's a little big.
Dialogue: 0,0:03:32.89,0:03:34.26,Default,,0000,0000,0000,,Let's resize it.
Dialogue: 0,0:03:34.26,0:03:36.21,Default,,0000,0000,0000,,We can do that with more attributes
Dialogue: 0,0:03:37.04,0:03:38.96,Default,,0000,0000,0000,,with our width or height.
Dialogue: 0,0:03:38.96,0:03:43.16,Default,,0000,0000,0000,,Let's say, "width equals 100."
Dialogue: 0,0:03:43.98,0:03:47.17,Default,,0000,0000,0000,,Okay, so now it's 100 pixels wide.
Dialogue: 0,0:03:47.17,0:03:49.42,Default,,0000,0000,0000,,That's a little too small.
Dialogue: 0,0:03:49.42,0:03:51.35,Default,,0000,0000,0000,,Let's put our cursor inside and use
Dialogue: 0,0:03:51.35,0:03:53.90,Default,,0000,0000,0000,,the number scrubber to make it bigger.
Dialogue: 0,0:03:54.02,0:03:56.57,Default,,0000,0000,0000,,Okay, that looks a lot better.
Dialogue: 0,0:03:56.57,0:03:58.60,Default,,0000,0000,0000,,Now, let's try adding height.
Dialogue: 0,0:03:58.60,0:04:00.94,Default,,0000,0000,0000,,I'll just say, "height equals 50."
Dialogue: 0,0:04:00.94,0:04:02.61,Default,,0000,0000,0000,,Uh-oh!
Dialogue: 0,0:04:02.61,0:04:05.40,Default,,0000,0000,0000,,I squashed my bunny, poor bunny!
Dialogue: 0,0:04:05.40,0:04:08.76,Default,,0000,0000,0000,,See, that's why you should\Nusually only specify
Dialogue: 0,0:04:08.76,0:04:10.97,Default,,0000,0000,0000,,either width or height, but not both
Dialogue: 0,0:04:10.97,0:04:13.27,Default,,0000,0000,0000,,because you might use the wrong dimensions
Dialogue: 0,0:04:13.27,0:04:16.80,Default,,0000,0000,0000,,and squish your bunnies, so\NI say just let the browser
Dialogue: 0,0:04:16.80,0:04:20.88,Default,,0000,0000,0000,,do the math to decide what the\Nother dimensions should be.
Dialogue: 0,0:04:20.88,0:04:22.50,Default,,0000,0000,0000,,I'm going to delete height.
Dialogue: 0,0:04:22.50,0:04:25.27,Default,,0000,0000,0000,,Now that you can make\Nimages, start thinking
Dialogue: 0,0:04:25.27,0:04:27.97,Default,,0000,0000,0000,,about combining all the tags\Nyou have in your toolbox,
Dialogue: 0,0:04:27.97,0:04:32.97,Default,,0000,0000,0000,,lists with images and paragraphs,\Ntop 10 craziest animals.
Dialogue: 0,0:04:33.30,0:04:35.83,Default,,0000,0000,0000,,Just don't put too many\Nimages on your page
Dialogue: 0,0:04:35.83,0:04:37.58,Default,,0000,0000,0000,,because the person\Nchecking out your webpage
Dialogue: 0,0:04:37.58,0:04:40.01,Default,,0000,0000,0000,,will have to load all of them,
Dialogue: 0,0:04:40.01,0:04:42.94,Default,,0000,0000,0000,,but you can still have a lot of fun.