1 00:00:02,200 --> 00:00:03,430 Throughout this course, 2 00:00:03,430 --> 00:00:05,740 we're going to build a lot of websites and we're going to 3 00:00:05,740 --> 00:00:08,470 build a lot of websites that have more content and look a 4 00:00:08,470 --> 00:00:10,929 bit nicer than this first basic website. 5 00:00:10,929 --> 00:00:14,037 But there is one type of content which we can add to this 6 00:00:14,037 --> 00:00:16,379 website as well, 7 00:00:16,379 --> 00:00:19,790 which will immediately make it look better because it makes 8 00:00:19,790 --> 00:00:24,350 almost all pages look better. And that would be an image. 9 00:00:24,350 --> 00:00:26,483 Images are extremely important. 10 00:00:28,189 --> 00:00:29,310 If you have a look at some random website, 11 00:00:29,310 --> 00:00:32,700 there is a high chance that it contains a lot of images 12 00:00:32,700 --> 00:00:35,330 because humans like images, 13 00:00:35,330 --> 00:00:38,794 having images on your site makes your site more relatable 14 00:00:38,794 --> 00:00:42,300 and makes it almost automatically look better and more 15 00:00:42,300 --> 00:00:43,182 appealing. 16 00:00:43,182 --> 00:00:45,524 So I want to add an image here as well. 17 00:00:45,524 --> 00:00:49,810 Let's say an image of a trophy since this is still a website 18 00:00:49,810 --> 00:00:52,375 about my daily challenge and attached. 19 00:00:52,375 --> 00:00:55,080 I have an example image for you, 20 00:00:55,080 --> 00:00:55,913 which you can simply download and then drag into your 21 00:00:55,913 --> 00:00:59,110 project folder. 22 00:00:59,110 --> 00:01:00,444 I did it as well, and hence, 23 00:01:00,444 --> 00:01:04,840 I have to challenge his trophy JPEG file this image in my 24 00:01:04,840 --> 00:01:06,396 project folder now in my website folder. 25 00:01:06,396 --> 00:01:10,085 And now we can embed that image into our page. 26 00:01:10,085 --> 00:01:15,085 I go to my body because this will clearly be a visible 27 00:01:15,830 --> 00:01:17,040 content element. 28 00:01:17,040 --> 00:01:20,480 And in there we can add a brand new HTML element, 29 00:01:20,480 --> 00:01:23,440 which is responsible for displaying images. 30 00:01:23,440 --> 00:01:26,870 And the name of that element is well image. However, 31 00:01:26,870 --> 00:01:28,270 not image written like this, 32 00:01:28,270 --> 00:01:32,490 but I am G so shortened version of image. 33 00:01:32,490 --> 00:01:36,630 So to say the interesting thing about image is that just 34 00:01:36,630 --> 00:01:39,610 like link, it's a Wyatt element. 35 00:01:39,610 --> 00:01:42,536 So it doesn't have a closing tag. 36 00:01:42,536 --> 00:01:46,573 It just has an opening tag because just like link image will 37 00:01:46,573 --> 00:01:50,004 have no content between the opening and closing tax. 38 00:01:50,004 --> 00:01:52,283 And hence it has no closing tag. 39 00:01:52,283 --> 00:01:56,360 You could think that image maybe where it's like this, 40 00:01:56,360 --> 00:02:00,232 and you specify the name or the path of your image here 41 00:02:00,232 --> 00:02:02,833 between the opening and closing tags, 42 00:02:02,833 --> 00:02:05,175 but that's simply not how it works. 43 00:02:05,175 --> 00:02:07,113 So instead just like link, 44 00:02:07,113 --> 00:02:09,513 you configure it with attributes only. 45 00:02:09,513 --> 00:02:14,513 And the image element now needs a SRC, a source attribute, 46 00:02:16,575 --> 00:02:18,392 which specifies the, 47 00:02:18,392 --> 00:02:21,255 the path to the image that should be embedded. 48 00:02:21,255 --> 00:02:24,849 Why SRC and not HRF. 49 00:02:24,849 --> 00:02:26,647 It's just what it is. 50 00:02:26,647 --> 00:02:30,595 The image elements simply expects a SRC attribute. 51 00:02:30,595 --> 00:02:34,070 And whilst this might sound very random and hard to 52 00:02:34,070 --> 00:02:34,913 remember, 53 00:02:37,115 --> 00:02:38,800 it's only a couple of elements which have these link 54 00:02:38,800 --> 00:02:40,200 attributes anyways, 55 00:02:40,200 --> 00:02:44,010 and you'll be able to keep in mind which one wants ref and 56 00:02:44,010 --> 00:02:46,011 which one wants source as you gain more and more experience 57 00:02:46,011 --> 00:02:50,996 as a web developer, the image element wants a SRC attribute, 58 00:02:50,996 --> 00:02:55,996 but then just like ref it takes a relative path to local 59 00:02:59,293 --> 00:03:03,347 file or also a URL to an image stored on some other web 60 00:03:03,347 --> 00:03:04,180 server. 61 00:03:04,180 --> 00:03:09,180 But here it's a local file sitting in the same folder as the 62 00:03:09,590 --> 00:03:13,330 index HTML file and Dale for just as we did it for daily 63 00:03:13,330 --> 00:03:16,528 challenge CSS on this link here for this image, 64 00:03:16,528 --> 00:03:20,377 we can now simply repeat that image file name. 65 00:03:20,377 --> 00:03:25,122 And dad will embed this image in displays off the document. 66 00:03:25,122 --> 00:03:30,122 Now, if we saved it and reload, the images here, 67 00:03:31,250 --> 00:03:33,670 it's missing all the styling we might want, 68 00:03:33,670 --> 00:03:36,766 but it is here before we style it, though. 69 00:03:36,766 --> 00:03:40,507 I want to talk about another, a key attribute, 70 00:03:40,507 --> 00:03:44,990 which you should always add when you add an image and that's 71 00:03:44,990 --> 00:03:48,125 the alt attribute. That's an important one. 72 00:03:48,125 --> 00:03:52,190 The alt attribute should specify some texts, 73 00:03:52,190 --> 00:03:55,480 which is shown if loading the image fails, 74 00:03:55,480 --> 00:03:58,330 which could happen because maybe you're fetching it from 75 00:03:58,330 --> 00:03:59,240 some other server, 76 00:03:59,240 --> 00:04:02,970 which is offline or because maybe your server fails to 77 00:04:02,970 --> 00:04:05,390 deliver it for some reason. 78 00:04:05,390 --> 00:04:06,790 But in addition, it's all the, 79 00:04:06,790 --> 00:04:10,570 not just a fallback text showing if the image is not loaded, 80 00:04:10,570 --> 00:04:14,730 but it's also a text that will be read out to people using a 81 00:04:14,730 --> 00:04:15,820 screen reader, 82 00:04:15,820 --> 00:04:18,250 because if a blind person visits your website, 83 00:04:18,250 --> 00:04:21,447 having a image isn't too useful to them. 84 00:04:21,447 --> 00:04:25,080 But having some text that tells them what would be on that 85 00:04:25,080 --> 00:04:27,810 image is, so here, 86 00:04:27,810 --> 00:04:32,314 I'll say a trophy describing what's on the image. 87 00:04:32,314 --> 00:04:35,677 And of course you can add any description of your choice. 88 00:04:35,677 --> 00:04:40,310 So adding this all to attribute won't change what we see on 89 00:04:40,310 --> 00:04:41,143 the screen, 90 00:04:41,143 --> 00:04:43,820 but it's some important piece of extra information, 91 00:04:43,820 --> 00:04:46,593 which you should add for all your image elements.