1 1 00:00:00,280 --> 00:00:01,820 Hi guys, and welcome back. 2 2 00:00:01,820 --> 00:00:03,470 In this video, we're going to continue 3 3 00:00:03,470 --> 00:00:05,600 our learning HTML project 4 4 00:00:05,600 --> 00:00:09,700 by adding images and a couple of attributes to our project. 5 5 00:00:09,700 --> 00:00:10,663 Let's get started. 6 6 00:00:11,770 --> 00:00:13,150 So this is what we've got so far. 7 7 00:00:13,150 --> 00:00:15,050 We did this a couple of lectures ago. 8 8 00:00:15,050 --> 00:00:17,380 We've got our HTML document 9 9 00:00:17,380 --> 00:00:18,760 with the HTML element, 10 10 00:00:18,760 --> 00:00:20,700 the head and the body 11 11 00:00:20,700 --> 00:00:21,533 and in the body, 12 12 00:00:21,533 --> 00:00:24,430 We've got the title and two paragraphs. 13 13 00:00:24,430 --> 00:00:27,060 The output of this is shown here on the right. 14 14 00:00:27,060 --> 00:00:30,430 And if you can't remember how to open this project here 15 15 00:00:30,430 --> 00:00:33,030 just right-click, copy the path 16 16 00:00:33,030 --> 00:00:35,090 and then paste it into your browser 17 17 00:00:35,090 --> 00:00:38,500 and that's going to open this HTML document. 18 18 00:00:38,500 --> 00:00:40,050 Let's start with an attribute. 19 19 00:00:40,050 --> 00:00:41,920 An attribute that we normally want to add 20 20 00:00:41,920 --> 00:00:43,520 to the HTML element 21 21 00:00:43,520 --> 00:00:46,770 is the language that the page is written in. 22 22 00:00:46,770 --> 00:00:48,120 And we normally do this, 23 23 00:00:48,120 --> 00:00:49,740 if we want to write English 24 24 00:00:49,740 --> 00:00:54,430 with lang="en" in the HTML tag. 25 25 00:00:54,430 --> 00:00:55,980 Now I want to add an image 26 26 00:00:55,980 --> 00:00:57,530 on top of this title 27 27 00:00:57,530 --> 00:01:00,210 so that I can see who is learning HTML. 28 28 00:01:00,210 --> 00:01:01,720 So I'm gonna add my own image 29 29 00:01:01,720 --> 00:01:04,610 but you guys should add your own image. 30 30 00:01:04,610 --> 00:01:05,900 So once you've found your image 31 31 00:01:05,900 --> 00:01:06,850 all I'm gonna do is 32 32 00:01:06,850 --> 00:01:08,720 I'm gonna drag it over here 33 33 00:01:08,720 --> 00:01:10,920 into the folder, 34 34 00:01:10,920 --> 00:01:13,280 and I'm gonna call it profile.png. 35 35 00:01:13,280 --> 00:01:14,680 Again, it just bring one of your images 36 36 00:01:14,680 --> 00:01:17,860 it doesn't matter if it's a JPEG or PNG. 37 37 00:01:17,860 --> 00:01:18,860 So I've got that there. 38 38 00:01:18,860 --> 00:01:20,870 And now I'm going to close this again 39 39 00:01:20,870 --> 00:01:23,300 which I'm doing with Ctrl + B, by the way 40 40 00:01:23,300 --> 00:01:25,060 just in case you were wondering 41 41 00:01:25,060 --> 00:01:26,950 and now we're going to add the image elements. 42 42 00:01:26,950 --> 00:01:28,677 So the image element is img, 43 43 00:01:29,790 --> 00:01:32,060 then I'm gonna give it a class of profile 44 44 00:01:32,060 --> 00:01:33,590 although you don't have to give it a class 45 45 00:01:33,590 --> 00:01:34,423 if you don't want, 46 46 00:01:34,423 --> 00:01:35,770 this is gonna come in handy later on 47 47 00:01:35,770 --> 00:01:38,030 for targeting with CSS. 48 48 00:01:38,030 --> 00:01:40,190 The important part is the source 49 49 00:01:40,190 --> 00:01:42,410 or what image we're loading. 50 50 00:01:42,410 --> 00:01:45,340 And here we're putting profile.png 51 51 00:01:45,340 --> 00:01:48,240 and a very important attribute for image elements 52 52 00:01:48,240 --> 00:01:49,820 is the alternative text 53 53 00:01:49,820 --> 00:01:51,300 or text that will be shown 54 54 00:01:51,300 --> 00:01:53,890 if the image itself can't be loaded. 55 55 00:01:53,890 --> 00:01:55,570 Or if, for example 56 56 00:01:55,570 --> 00:01:57,960 the person that is looking at these images 57 57 00:01:57,960 --> 00:01:58,920 can't see the image 58 58 00:01:58,920 --> 00:02:02,520 because they have some sort of site disability. 59 59 00:02:02,520 --> 00:02:07,040 So here I'm gonna put Rolf's profile picture 60 60 00:02:07,040 --> 00:02:07,873 just like that. 61 61 00:02:07,873 --> 00:02:09,810 And then we're going to close the image tag. 62 62 00:02:09,810 --> 00:02:12,200 So I'm gonna save this and refresh 63 63 00:02:12,200 --> 00:02:14,110 and now you can see we get that image over there. 64 64 00:02:14,110 --> 00:02:15,720 This is not a very high quality image, 65 65 00:02:15,720 --> 00:02:18,870 I'm sure you can find a better picture of yourselves. 66 66 00:02:18,870 --> 00:02:20,090 But this is still looking a bit bare 67 67 00:02:20,090 --> 00:02:21,070 so what I'm gonna do now 68 68 00:02:21,070 --> 00:02:23,260 is I'm going to add another paragraph, 69 69 00:02:23,260 --> 00:02:25,060 and in this paragraph I'm gonna put 70 70 00:02:25,060 --> 00:02:28,990 this website's code, looks like this, 71 71 00:02:28,990 --> 00:02:31,310 and now I'm going to put an image down here 72 72 00:02:31,310 --> 00:02:34,730 that contains the code that I'm writing. 73 73 00:02:34,730 --> 00:02:35,950 So what I'm gonna do now 74 74 00:02:35,950 --> 00:02:38,650 is I'm going to grab all of this code 75 75 00:02:38,650 --> 00:02:42,330 and we're gonna go to a website that I like very much. 76 76 00:02:42,330 --> 00:02:44,920 So this is carbon.now.sh 77 77 00:02:44,920 --> 00:02:49,030 and unless you create very beautiful pictures of code. 78 78 00:02:49,030 --> 00:02:50,960 So just paste your code in here 79 79 00:02:50,960 --> 00:02:53,290 and that is going to generate a picture 80 80 00:02:53,290 --> 00:02:55,870 for the code that you've got here. 81 81 00:02:55,870 --> 00:02:58,840 So then I'm gonna click on export down here, 82 82 00:02:58,840 --> 00:03:00,320 make sure to select 2X 83 83 00:03:00,320 --> 00:03:02,890 and download as PNG, 84 84 00:03:02,890 --> 00:03:04,060 that is going to download 85 85 00:03:04,060 --> 00:03:07,040 this representation of the code as an image. 86 86 00:03:07,040 --> 00:03:08,930 So then I'm gonna come back to 87 87 00:03:08,930 --> 00:03:11,130 my project here 88 88 00:03:11,130 --> 00:03:13,840 I'm gonna open with Ctrl + B, the sidebar 89 89 00:03:13,840 --> 00:03:15,840 and I'm gonna drag this image into there 90 90 00:03:15,840 --> 00:03:19,620 and I'm just gonna rename it to code.png 91 91 00:03:19,620 --> 00:03:21,180 Okay. So this is what it looks like. 92 92 00:03:21,180 --> 00:03:23,470 Now we can add it into our document as well. 93 93 00:03:23,470 --> 00:03:25,780 Again, the same as before an image tag 94 94 00:03:25,780 --> 00:03:27,310 the class is gonna be code 95 95 00:03:27,310 --> 00:03:29,120 just for targeting later on 96 96 00:03:29,120 --> 00:03:31,140 the source is code.png 97 97 00:03:31,140 --> 00:03:35,040 and the alt is the HTML code for this page, 98 98 00:03:35,040 --> 00:03:37,740 and then we close the tag. 99 99 00:03:37,740 --> 00:03:39,020 Okay, I'll close the sidebar 100 100 00:03:39,020 --> 00:03:40,490 just so you can see this a bit better 101 101 00:03:40,490 --> 00:03:42,140 but that is what that looks like. 102 102 00:03:43,580 --> 00:03:45,460 And now, when We go back to 103 103 00:03:45,460 --> 00:03:46,567 our index.html 104 104 00:03:46,567 --> 00:03:47,890 and we refresh 105 105 00:03:47,890 --> 00:03:50,840 we can see that we get the code in here. 106 106 00:03:50,840 --> 00:03:53,840 This is also an important part of CSS 107 107 00:03:53,840 --> 00:03:54,673 that we learn about 108 108 00:03:54,673 --> 00:03:57,030 later is how to make sure that elements, 109 109 00:03:57,030 --> 00:03:59,410 don't look so massive 110 110 00:03:59,410 --> 00:04:01,850 in comparison to some other small elements. 111 111 00:04:01,850 --> 00:04:03,650 So later on in the next section 112 112 00:04:03,650 --> 00:04:07,530 we're going to learn how to make this website look better. 113 113 00:04:07,530 --> 00:04:08,410 But for now, 114 114 00:04:08,410 --> 00:04:09,750 the image that we've brought in here 115 115 00:04:09,750 --> 00:04:11,230 clearly is much bigger 116 116 00:04:11,230 --> 00:04:13,180 than the rest of the content. 117 117 00:04:13,180 --> 00:04:14,750 And with HTML alone, 118 118 00:04:14,750 --> 00:04:17,430 we can't really alter that, 119 119 00:04:17,430 --> 00:04:20,720 we can't adjust the width and size of this image, 120 120 00:04:20,720 --> 00:04:22,860 we're gonna need to use CSS for that. 121 121 00:04:22,860 --> 00:04:25,060 Remember that HTML is for describing 122 122 00:04:25,060 --> 00:04:27,910 and displaying the content of a page 123 123 00:04:27,910 --> 00:04:30,700 and CSS is for altering what it looks like. 124 124 00:04:30,700 --> 00:04:32,450 So that's why we need CSS for that. 125 125 00:04:33,640 --> 00:04:36,250 All right. But we've added images to our HTML document 126 126 00:04:36,250 --> 00:04:39,140 and we've learned how to use attributes a bit better. 127 127 00:04:39,140 --> 00:04:41,610 So now we're ready to move on to the next lecture. 128 128 00:04:41,610 --> 00:04:43,540 Thank you very much for joining me in this one, 129 129 00:04:43,540 --> 00:04:45,190 and I'll see you in the next one.