Summary of Image Element Tutorial

All right, let's talk about images. So we got a link there. I'll teach you how to do images. You see images everywhere, pretty much every website today. So the image element is called IMG. So we say less than IMG, greater than. Now, this one is a special kind of element because it's self-closing, meaning we don't need to write a closing tag. You know? So you can just write it like this. Now, the image needs to know, OK, what is the image you're trying to show? So we need a source. Now, that's the attribute. So I have the attribute SRC equals sign double quotes, double quotes. Now, I've got to paste a URL here. Just like we did for anchor tag, it's ref. It needs the image URL or link. Well, I can find one. If you do a search in your search engine and you click images, find any picture you want of whatever you want. I'm going to choose this one. I'm going to click View Image. And I can copy from the address bar that URL. Now, I'm going back here. Now, I'm going to paste that here into the value for the SRC or source attribute. I'm going to click Run now. You can see the image is now here, although very big. Somebody asked the question, are we rejoining the meeting when the timer is up? Yes. Thank you for reminding us. So because Zoom is going to shut down approximately 40 minutes into the meeting, we have to rejoin the same room again. So that's going to happen in about seven minutes. So don't panic. Just rejoin the same room so we can resume this lecture. Thank you for understanding. Now, we added an image, but it's too big. Nobody is going to find this website very usable. So typically, when you add images, you want to make sure to set the width and the height. So we can do that either using an HTML attribute or using CSS. For the purpose of this class, we'll do with an HTML attribute. So the image element can have an attribute for the width. So let's add an attribute here called width, equals sign, double quotes, double quotes. Now, the width is usually in pixels, bx for short. That's the unit we typically use with computers. Let's try 100. See what we get. Now, that's 100 pixels width. Now, you see the height also changed. That's because by default, if you only specify the width, it will try to also change the height and keeping the same aspect ratio between width and height. If you really want to change the height, you can add height here. For example, 20. That's really small. Click Run. You can see the height is now forced to be 20. And that's breaking the aspect ratio. Now, the image is kind of stretched, or it doesn't look very great. So you can either omit the width or the height if you want to let it automatically find out what the other dimension should be to maintain the aspect ratio. Now, that's too small. I'm going to use 200. Maybe that's better. OK. Now, let's say for some reason, this image becomes broken, meaning either whatever the image was coming from is no longer there, or I somehow wrote the wrong source. Let's deliberately write the wrong source, adding a 2 here. Now, I can see nothing appears. That's like a broken image icon. Now, typically, every time we do image today, we want to add an alt attribute to describe what the image is. For example, Dalmatian dog. I think that was what it was. So if I have an alt attribute, whenever the image is broken, I will see the text Dalmatian dog. Oh, that way I know, oh, this image was meant to be about a Dalmatian dog. So always add the alt to describe the image. This is also important for screen reader technologies, accessibility. For example, somebody who is using the internet or accessing a website, but they cannot see very well or they're blind, they typically rely on a screen reader that reads the contents of the website for them. So when they hit this image, they obviously cannot see, but they can hear the description of the image if you add the alt attribute. So they would hear Dalmatian dog and they would understand, OK, this was meant to be an image of a Dalmatian dog. So it's important today to always add an alt attribute to describe the image. OK, I'm going to revert my SRC and remove the two to make it appear again.