NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,109 Hi guys and welcome back. 2 00:00:01,140 --> 00:00:05,850 In this video, let's learn how we can include images in our HTML document. 3 00:00:05,850 --> 00:00:09,980 And what we're going to include this time is the logo for our microblog. 4 00:00:10,380 --> 00:00:13,740 So I provided the logo to you in the resources section of this lecture. 5 00:00:13,770 --> 00:00:14,850 You can download it there. 6 00:00:15,150 --> 00:00:18,510 But I'm going to guide you through how to download things from Figma as well. 7 00:00:18,510 --> 00:00:19,200 Let's get started. 8 00:00:19,980 --> 00:00:23,520 Here I am in Figma and I've selected the logo element. 9 00:00:24,010 --> 00:00:26,830 Whenever you select any element in Figma, you can go over to the right, 10 00:00:27,150 --> 00:00:30,759 down at the bottom, there's the export element and you can click on it and 11 00:00:30,759 --> 00:00:33,339 then you can export the item here. 12 00:00:33,701 --> 00:00:36,461 You can export in any sort of size you want. 13 00:00:36,461 --> 00:00:40,091 So 1x is going to be the width and height of the element. 14 00:00:40,091 --> 00:00:43,928 So this was 52 by 52, but you can go higher if you want to export 15 00:00:43,978 --> 00:00:48,728 in a size that's multiplied by for example four would be 200 by 200. 16 00:00:48,915 --> 00:00:52,275 I'm going to stick with 1x but instead of PNGs, I'm going to download 17 00:00:52,395 --> 00:00:54,225 SVGs and just click on export. 18 00:00:54,458 --> 00:00:55,358 So that's downloaded. 19 00:00:55,388 --> 00:01:02,428 You can copy that into your project folder and name it logo.svg. 20 00:01:02,019 --> 00:01:05,789 Alright, I've gone ahead and copied that into the microblog and you can see that 21 00:01:05,789 --> 00:01:08,978 the SVG code here looks very strange. 22 00:01:09,198 --> 00:01:14,388 But all of the information here is designed so that an SVG reader essentially 23 00:01:14,568 --> 00:01:19,833 can take this and use this code to recreate the logo that you saw earlier. 24 00:01:20,103 --> 00:01:24,563 And it can do so at any size because all of these here are mathematical functions. 25 00:01:24,583 --> 00:01:28,293 So if we multiply the size of the whole thing by two, it's still going to be 26 00:01:28,383 --> 00:01:31,073 very crisp in terms of the pixel edges. 27 00:01:31,523 --> 00:01:33,263 So this is the SVG code here. 28 00:01:33,653 --> 00:01:37,947 We're going to go back to our home.html, which by the way, I've copied the path 29 00:01:37,947 --> 00:01:41,602 of home.html and opened it in my browser and that's what you're seeing here. 30 00:01:41,722 --> 00:01:42,892 It doesn't look right at the moment. 31 00:01:42,922 --> 00:01:44,662 We need CSS for it to look great. 32 00:01:44,968 --> 00:01:47,158 But this is what we've got so far and what we're going to do 33 00:01:47,158 --> 00:01:48,758 in here is include our image. 34 00:01:48,758 --> 00:01:51,138 That's going to be an img element. 35 00:01:51,528 --> 00:01:57,048 And what we're going to do is type src for source, and that's going to be logo.svg. 36 00:01:57,468 --> 00:02:00,498 And we're also going to add an alt attribute, which 37 00:02:00,498 --> 00:02:02,238 stands for alternative text. 38 00:02:02,538 --> 00:02:05,538 And this is the microblog logo. 39 00:02:06,048 --> 00:02:10,138 Then we're gonna close this element of using this void element notation. 40 00:02:10,398 --> 00:02:14,388 And now when we refresh the page, you can see we've got the logo in there. 41 00:02:14,887 --> 00:02:19,282 . If we renamed the logo to, for example, logo2.svg, and we refresh 42 00:02:19,292 --> 00:02:24,502 the page, you'll get the broken image symbol and the alt text shown here. 43 00:02:24,562 --> 00:02:27,382 So this can happen, for example, if you couldn't download the image for 44 00:02:27,382 --> 00:02:30,202 some reason, or there was a network problem or something like that. 45 00:02:30,502 --> 00:02:34,102 So it's always a good idea to have some alt text in your images. 46 00:02:34,367 --> 00:02:37,367 So you can show something if the image fails to load. 47 00:02:37,367 --> 00:02:40,217 If you don't have anything, you just see the broken image logo and your users will 48 00:02:40,217 --> 00:02:42,277 be left wondering what should be there? 49 00:02:42,827 --> 00:02:44,777 Let's go back to logo.svg. 50 00:02:45,317 --> 00:02:49,187 Instead of svg in the image element, you can put pngs or any 51 00:02:49,187 --> 00:02:50,927 other image type that you want. 52 00:02:50,927 --> 00:02:54,227 I've just gone with svg so we can alter the size a bit more easily. 53 00:02:54,941 --> 00:02:56,651 Alright, that's everything for this video. 54 00:02:56,651 --> 00:02:59,351 I just wanted to show you how to include the image here in the header. 55 00:02:59,531 --> 00:03:03,431 But then we're going to go into more header elements in the next video. 56 00:03:03,431 --> 00:03:05,351 So stay tuned for that and I'll see you there.