Transcript from the "Images" Lesson
[00:00:00]
>> Speaker 1: So let's go on ahead back to our index dot html document here. And one of the things I was just saying here right before the break, wouldn't it be nice if we had some images.
>> Speaker 1: Yeah, I mean, it's a really boring webpage, right? And it's really ugly.
[00:00:17]
But at least an image would make it prettier, wouldn't it? Okay, so you may have images from a lot of different places.
>> Speaker 1: But one of the things that you can do with images, there's my web page, is you can get them online. And there are certain websites that are designed for you to just go on ahead and use images as they exist.
[00:00:40]
Important things know about images, right? Is that there's copyright associated with images, yes? Can I just go into Google and Google for cool picture, and just take that picture and drop it in my web page? Am I golden?
>> Speaker 2: [LAUGH]
>> Speaker 1: No, no, that is bad, okay? In the United States, that can get you sued.
[00:01:02]
In other countries, they have copyright laws that are somewhat different. But not only is it just bad, it's just rude, isn't it? If you spent all that time going out there and taking a beautiful picture, wouldn't you at least wanna get credit for it?
>> Speaker 1: And some people make a living on this, and so they'd like to get paid also.
[00:01:19]
So you can't just do that. But there are some websites that are out there and available for you to use their images. And one of these we're gonna take a look at is called PlaceKitten.
>> Speaker 1: Place kitten dot com
>> Speaker 1: And so, these are nice. These are just sort of image placeholders.
[00:01:41]
So when you find your real image, you can put your real image in. But let's go on ahead and start with one of these.
>> Speaker 1: And it'll give you, look at this little bit of code right here. Anybody recognize what this is?
>> Speaker 1: What is this little bit of code right here?
[00:01:57]
>> Speaker 2: A link to a file, isn't?
>> Speaker 1: It's a link to something, right? It's a link to something. So we're gonna need this. Go on ahead and just copy the first line of code right there. The one that say http colon slash slash placekitten dot com slash 200 slash 300, just go ahead and copy that.
[00:02:20]
>> Speaker 1: And then, what we're gonna do is we'll add a picture to our document.
>> Speaker 1: And I'm gonna work on my home page some more. I'm gonna put this up towards the top of the page. So again, you can see it, pretty easily.
>> Speaker 1: And I'm just gonna put in here is a picture of a kitten.
[00:02:43]
[LAUGH] Because my page is boring without a photo. Okay, so little bit of introductory text.
>> Speaker 1: And then, we can go on ahead and put in our picture of our kitten. Anyone wanna take a guess at what tag might put the picture of the kitten in, yes?
>> Speaker 2: I.
[00:03:10]
>> Speaker 1: I, I is a good guess, but not the right one. Anyone else wanna guess?
>> Speaker 2: Image.
>> Speaker 1: Image, spelled how?
>> Speaker 2: img.
>> Speaker 1: img. I-m-g.
>> Speaker 1: Now, the img tag is a little bit unusual in that it is just like this, it is just img. There's no slash img associated with the image tag.
[00:03:34]
I have no idea why that is, but it is that way, okay? It's just img. Then, we're gonna need clearly, if we just put in img, what's gonna show?
>> Speaker 2: Nothing,
>> Speaker 1: Nothing. Why?
>> Speaker 2: There's no link.
>> Speaker 1: We haven't said what to show, right? We just said put an image in here.
[00:03:54]
>> Speaker 1: Computers are good, but they're not that good, all right? We gotta tell them everything. So we need to put in here some kind of what we show. And this is gonna be through src, which stands for, anyone wanna guess?
>> Speaker 2: Source.
>> Speaker 1: Source, okay, so this is the source of the image.
[00:04:13]
>> Speaker 1: And into that, you can paste that placekitten link. So src. So just like Mohammad was noting earlier, all of our attributes have the same kind of formatting. So inside of our image tag, we have src, that's an attribute, equals, and then inside of quotes goes the value of that attribute.
[00:04:32]
In this case, it's the place kitten link. Now, this is good. But what happens if there are a number of people who are out on the Internet who have visual difficulties, they can't see or they have low vision? Or they're a search engine. Can search engines see? No, Google can't see your pretty pictures, all right.
[00:04:59]
Or they have a horrible Internet connection, okay, and they can't get your pictures either, all right? So what we need to do is we need to put in a text description of this image in case somebody can't see it. And that's called alternative text. Alt Text. You may have heard the Alt Text before.
[00:05:20]
So this is Alt is our attribute. And in the quotes here, you put in a description of this picture, cute kitty cat.
>> Speaker 1: Just like that.
>> Speaker 1: So there's your picture.
>> Speaker 1: Yeah?
>> Speaker 2: Do you need to close the tag?
>> Speaker 1: You do not need to close this tag.
[00:05:40]
There is no slash image tag. It's just, this is a weird one, it's kind of like in grammar, sometimes you have exceptions to those grammar rules. This is one of those exceptions to the grammar rules.
>> Speaker 2: Not to get all technical, but it's what's called a self-closing tag.
[00:05:56]
So if you wanna add a slash at the end, you can, but you don't need to.
>> Speaker 1: Right, right.
>> Speaker 1: Okay, everybody good? Go ahead and save, and let's take a look at our web page.
>> Speaker 1: Make sure you're looking at the page where you put the kitty cat.
[00:06:17]
If you're looking at your hobbies page, there may not be a kitty cat there. It worked just fine, you're just looking at the wrong web page.