1 00:00:01,619 --> 00:00:02,854 Welcome back. 2 00:00:02,854 --> 00:00:04,470 In this video, I'm going to show you 3 00:00:04,470 --> 00:00:07,072 how to include images in your webpage 4 00:00:07,072 --> 00:00:09,905 and also what HTML attributes are. 5 00:00:13,212 --> 00:00:15,101 So back to our webpage, 6 00:00:15,101 --> 00:00:17,813 where we want to include some images. 7 00:00:17,813 --> 00:00:22,620 But before we can do that, we need some images, right? 8 00:00:22,620 --> 00:00:26,141 Okay so I will just head here to Google Chrome 9 00:00:26,141 --> 00:00:28,537 and type html5, 10 00:00:28,537 --> 00:00:33,414 'cause that's the language we're using. 11 00:00:33,414 --> 00:00:35,747 And I like this one, 12 00:00:36,614 --> 00:00:39,114 so I will save the image 13 00:00:40,033 --> 00:00:43,600 right into our project folder 14 00:00:43,600 --> 00:00:45,600 and call it logo. 15 00:00:46,604 --> 00:00:48,729 So that's one of the images, 16 00:00:48,729 --> 00:00:53,043 and beside that, I also want an image for the author. 17 00:00:53,043 --> 00:00:57,298 Now you can, of course, use a photo of yourself, 18 00:00:57,298 --> 00:01:01,583 but I will use this very handy website 19 00:01:01,583 --> 00:01:04,833 called RandomUser, 20 00:01:06,160 --> 00:01:10,451 where you can get random profile pictures. 21 00:01:10,451 --> 00:01:12,653 So I will just save this one. 22 00:01:12,653 --> 00:01:15,403 I will call it author. 23 00:01:18,297 --> 00:01:20,297 Okay. 24 00:01:21,763 --> 00:01:24,600 Also, down here, 25 00:01:24,600 --> 00:01:28,267 I will just write the name of this gentleman 26 00:01:29,346 --> 00:01:31,763 so I don't forget it. 27 00:01:33,155 --> 00:01:35,646 Gonzales. 28 00:01:35,646 --> 00:01:38,896 Okay so this is the author of our page. 29 00:01:40,331 --> 00:01:43,228 Now, to put images on our webpage, 30 00:01:43,228 --> 00:01:47,463 we use the img tag, which actually has no closing tag, 31 00:01:47,463 --> 00:01:49,809 so it's just img. 32 00:01:49,809 --> 00:01:52,416 Yeah, that's right, there are some HTML elements 33 00:01:52,416 --> 00:01:56,470 which have only the opening tag and no closing tag, 34 00:01:56,470 --> 00:01:59,387 and the img element is one of them. 35 00:02:02,742 --> 00:02:05,862 Just going to close this, alright. 36 00:02:05,862 --> 00:02:08,362 Now I wanna put the image 37 00:02:09,702 --> 00:02:12,740 here between this first paragraph 38 00:02:12,740 --> 00:02:15,323 and the secondary header. 39 00:02:18,193 --> 00:02:20,360 So <img 40 00:02:21,604 --> 00:02:24,509 and then close it. 41 00:02:24,509 --> 00:02:26,938 And now we're gonna see element attributes 42 00:02:26,938 --> 00:02:29,002 for the first time. 43 00:02:29,002 --> 00:02:33,670 Attributes provide additional information about an element. 44 00:02:33,670 --> 00:02:37,078 Because now, to indicate which image we want to display, 45 00:02:37,078 --> 00:02:40,578 we use the source attribute, which is src. 46 00:02:43,155 --> 00:02:45,072 Src. 47 00:02:46,955 --> 00:02:49,108 And now, Brackets helps us again 48 00:02:49,108 --> 00:02:53,275 and shows all the available files in our project folder. 49 00:02:54,145 --> 00:02:58,787 And here, in this place, I want to see the logo image. 50 00:02:58,787 --> 00:03:01,931 So I just choose this and hit enter. 51 00:03:01,931 --> 00:03:03,598 And, here we go. 52 00:03:04,948 --> 00:03:07,867 Now the same thing with the author. 53 00:03:07,867 --> 00:03:11,174 Go down here and insert the other image. 54 00:03:11,174 --> 00:03:14,887 Okay, <img src 55 00:03:14,887 --> 00:03:17,763 and Brackets predicts what we wanna write, 56 00:03:17,763 --> 00:03:21,930 so hit return and choose the author. 57 00:03:24,296 --> 00:03:27,713 Then close it and now it should be there. 58 00:03:29,744 --> 00:03:31,024 Here it is. 59 00:03:31,024 --> 00:03:33,057 Now, besides the source attribute, 60 00:03:33,057 --> 00:03:37,038 we should also give the img elements an alt attribute, 61 00:03:37,038 --> 00:03:39,895 which is an alternative text for the image, 62 00:03:39,895 --> 00:03:41,479 if the image cannot be displayed 63 00:03:41,479 --> 00:03:44,511 in the browser for some reason. 64 00:03:44,511 --> 00:03:48,021 I will just put here some text, 65 00:03:48,021 --> 00:03:49,581 and the alt text should be some text 66 00:03:49,581 --> 00:03:52,437 which describes the image. 67 00:03:52,437 --> 00:03:55,591 In this case, I will type in 68 00:03:55,591 --> 00:03:59,508 The HTML5 Logo, 69 00:04:01,010 --> 00:04:05,086 and down here, I will say this is the 70 00:04:05,086 --> 00:04:06,858 Author photo. 71 00:04:06,858 --> 00:04:07,691 Now, as you can see, 72 00:04:07,691 --> 00:04:11,154 this text doesn't display on the website. 73 00:04:11,154 --> 00:04:13,897 It's really just in case the image 74 00:04:13,897 --> 00:04:16,859 cannot be displayed for some reason. 75 00:04:16,859 --> 00:04:19,482 So, this was images. 76 00:04:19,482 --> 00:04:21,923 I think that now you know 77 00:04:21,923 --> 00:04:23,695 how you can display images on your website. 78 00:04:23,695 --> 00:04:27,600 It's really easy and straightforward. 79 00:04:27,600 --> 00:04:30,527 Next up, we have a lecture about links. 80 00:04:30,527 --> 00:04:31,694 See you there!