Downloading & Adding an Image

[00:00:00]
>> Jen Kramer: So those of you who are online, you're already in the HTML Slack room. Those of you here in the classroom, you can go on ahead and hop on here into Slack in the HTML room. Take a look at that picture there. If you click on the link at the top here.

[00:00:18]
That should open up and a new tab where you'll see your picture.
>> Jen Kramer: Okay, if you go on ahead and just hit the download button up here on the top, there's a download button up here over that picture. That puts you in yet another view, okay? And so here all you need to do is now right-click if you're on a Windows computer or Ctrl-click if you're on a Mac.

[00:00:47]
And then just pick Save As, Save Image As.
>> Jen Kramer: And we're gonna save that right into your day1 folder.
>> Jen Kramer: Make a new folder inside of that. Call it images.
>> Jen Kramer: Okay, so make a new folder inside of the day1 folder. Call it images. And once you've done that, go on ahead and save the picture right there.

[00:01:38]
>> Jen Kramer: Depending on how your computer is set up, if you right-click on it and you say Save Image, maybe it goes to your Downloads folder. If it does, look in your Downloads folder and pull it out of there and put it into your images folder inside of your day1 folder, okay?

[00:01:54]
>> Jen Kramer: So by the time you're done here, inside of your day1 folder on your computer, you should have a folder here called images, and inside of that should be your image.
>> Jen Kramer: All right, so if we're gonna link to an image from our computer, we can do that as well.

[00:02:16]
>> Jen Kramer: Let's put it on our hobbies page, just for fun, if you have a hobbies page. If you haven't managed to make a hobbies page yet, don't worry about it. Just put it on your homepage as you're continuing along. And,
>> Jen Kramer: So I'm gonna once again put this up at the top of my document.

[00:02:36]
And so what do I need to type in to put an image into my documents?
>> Speaker 2: IMG.
>> Jen Kramer: IMG, right, then followed by what?
>> Speaker 3: Source.
>> Speaker 4: Source.
>> Jen Kramer: Source, src =. All right, so here's the hard part. What is my source for this image?
>> Speaker 2: Dot dot?

[00:03:03]
>> Jen Kramer: Are there any of those dot dot slashes involved? Take a look at your file structure over here on the side. We're in hobbies.html, where do we wanna go? Hang on a second, where do we wanna go?
>> Speaker 5: We wanna go up.
>> Jen Kramer: Into the images folder, right, which is at the same level.

[00:03:21]
So we don't need any dot dot slashes, right? What do we need here?
>> Speaker 5: Images.
>> Jen Kramer: Images, right, slash?
>> Speaker 5: Filename.
>> Jen Kramer: And the filename, which is blog1.jpg.
>> Jen Kramer: Okay, does everyone understand why the path looks like that? Let's talk about that for a minute. Why does it not start with HTTP?

[00:03:47]
>> Speaker 6: Because it's saved on your computer.
>> Jen Kramer: It's on your computer, it's part of this website, it's in a folder. It's all part of the same website so we don't any need of that HTTP stuff, right? Yes, Dylan?
>> Dylan: Is there an easy way to resize it?
>> Jen Kramer: The best way to resize it will be in your image program whatever it is.

[00:04:04]
>> Dylan: Okay, and then re-save?
>> Jen Kramer: Yes, re-save it, yeah. So if the image is the wrong size, you'll wanna have software on your computer that's designed to resize an image. Or there are lot of websites out there, just Google for image resizing program. And there are tons of websites that will resize that image for you, yes?

[00:04:23]
>> Speaker 2: There are, I don't know if you don't want me to mention this. There are width and height attributes-
>> Jen Kramer: There are.
>> Speaker 2: Is that not the best way to?
>> Jen Kramer: It is not the best way to do it. There are width and height add attributes that are out there for image tags.

[00:04:36]
The reason you don't wanna use them is, say you pull an image off your digital camera. How big is it? It's about this big, how big is your web page? About the big. Okay, so that's huge, right? And it takes megabytes of data to display that picture, right?

[00:04:54]
That's why your camera keeps filling up so fast because of all those pictures you take, right? So when you put that on a website, what happens when somebody comes to visit that web page?
>> Speaker 3: Slow level.
>> Jen Kramer: You have to wait for that whole thing to download. And that's really bad if you happen to be on your phone somewhere, right?

[00:05:11]
Not only does it eat your entire data plan, it takes forever, and you can't even enjoy it. So it's way better to go ahead and resize these things before you put them on the web. Okay, what else do I need here in my image tag?
>> Speaker 6: Alt tag.

[00:05:27]
>> Jen Kramer: Alt tag, alt-'weird alien eating popcorn', because as aliens do I guess. All right, and if you go ahead and save that, you should be able to look at your hobbies page. And hopefully you see a picture just like this.
>> Jen Kramer: Okay, did it work for everybody here in the room?

[00:05:57]
>> Jen Kramer: Everybody good? Fabulous, all right. For those of you online, if it didn't work, make sure that it is in a folder called images. If you called your folder something else, if you called it IMG instead of calling it images, that would be a problem. You'll need to make sure that that's the same thing.

[00:06:15]
Make sure maybe you didn't save your image folder at all. Maybe you saved it right into your folder, in which case you need to adjust that path. Remember we talked a lot about paths and files in the Internet fundamental scores. If you didn't get that, go back and review those videos, and make sure that you've got that right.