HTML: Images | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy

HTML: Images | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy


– [Voiceover] We’ve been
talking about rabbits this whole time. Describing them with paragraphs and lists, but we could just put a
picture on our webpage and actually show what
a rabbit looks like. Well, to insert a picture on
a webpage, we use the img tag. Which, as you might
guess, stands for image. If we just type image though, we don’t see anything, why not? Well, we didn’t tell the
browser which image to show. There are millions of
images on the internet, and we certainly don’t want
it to pick a random one, because it might be something
gross that we don’t like. And it also just won’t be
what we want it to be of. We need to tell it the url of the image. The url is what shows up
at the top of the browsers, in the address bar, and
that’s what it is, an address. It’s a way of finding
some resource on the web. And it means we can only insert an image, if it’s already on the internet somewhere. We can’t just insert images
that are only on our computer. There are many ways to find
images on the internet, but we’re making it easier for you here by providing an image picker
and a photo collection. To get that to pop up, we need to add an
attribute to our image tag. An attribute is an additional
bit of information about a tag and this is the first
attribute that we’ve seen. So to tell the browser the url, we’re going to add an
attribute with the name source. And I will add a space, and then type src. Now it stands for source, but it’s very important
that you spell it src, because the browser will
ignore it if we misspell it. Now I need to put in an equal sign so that I can tell the browser
what the attribute value is. And now I’ll add a quote, and the editor will
autocomplete the end quote, so the attribute values are
always wrapped in two quotes. Okay, so normally, this is
when we’d start typing our url, but here on Khan Academy that’s when our image picker will pop up. So I’ll just hit pick image, and I want a picture of a rabbit, so I’ll click the animals tab, and select the adorable
rabbit, and click okay. Do you see how there’s a
url inside our quotes now? And, do you see how that
url starts with HTTP? That’s how we know that
it’s pointing at some image somewhere on the internet. And, hey, look, there’s
a bunny on my webpage. But, what if the server
hosting the image was failing, and the browser couldn’t load the image? How would the viewer know
what my amazing image was of? They’ll see nothing, and wonder
for the rest of their lives what they missed out on. That’s why image tags have
another attribute, alt, which we use to tell browsers what the alternate text for an image is. So, to add another attribute,
we just put a space after the final quote for the last one. Then we type alt equals
quotes, and inside these quotes the text will be some helpful
description of the image. Like, rabbit with lop ears in barn. That also helps people who see webpages, but can’t really see them, like the blind. They use an app called a screen reader, which will literally
read a webpage to them, describing each tag it sees. When it sees an image tag,
it’ll read off the alt text, since a blind person can’t see images. So you should always, always use alt text, so that the whole world can
experience your webpage. Okay, back to the image we can see. It’s a little big. Let’s resize it. We can do that with more attributes. With our width or height. So let’s say width equals 100. Okay, so now it’s 100 pixels wide. That’s a little too small,
let’s put our cursor inside, and use the number
scrubber to make it bigger. Okay, that looks a lot better. Now let’s try adding height. I’m going to say height equals 50. Uh oh, I squashed my bunny, poor bunny. See that’s why I should
usually only specify either width or height, but not both. Because you might use the wrong dimensions and squish your bunnies. So I say just let the
browser do the math to decide what the other dimension should be. I’m going to delete height. Now that you can make images, start thinking about
combining all the tags you have in your toolbox. Lists with images, and paragraphs,
top 10 craziest animals. Just don’t put too many
images on your page, because the person
checking out you webpage will have to load all of them. But, you can still have a lot of fun.

11 thoughts on “HTML: Images | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy”

Leave a Reply

Your email address will not be published. Required fields are marked *