WEBVTT 0 00:00.170 --> 00:04.490 Now, a website would be pretty boring if it had no images on it, right? 1 00:04.490 --> 00:11.330 So in this lesson we're going to learn how we can add images to our website using the image element. 2 00:11.720 --> 00:13.430 Now this is what it looks like. <img src="url" /> 3 00:13.430 --> 00:14.660 It's pretty simple. 4 00:14.660 --> 00:20.630 And you'll notice that similar to the anchor tag or the anchor element that we learned about in the 5 00:20.630 --> 00:27.950 last lesson, the main component of an image tag that renders the image is this attribute, which is 6 00:27.950 --> 00:30.410 called source or src. 7 00:30.950 --> 00:38.810 And what this does is it tells the image element what is the source of the image. 8 00:39.710 --> 00:47.510 And that's why after the equal sign, the value is going to be the location of the image. 9 00:48.650 --> 00:56.300 One last thing to notice about the image tag is, unlike the anchor tag, it doesn't have a closing 10 00:56.330 --> 00:56.960 tag, 11 00:56.960 --> 01:03.540 instead, it is a self-closing tag, also known as a void element. 12 01:03.570 --> 01:09.390 Remember, previously we learned about void elements where we learnt that you can have a horizontal rule 13 01:09.390 --> 01:12.540 element, you can also have break elements, 14 01:12.540 --> 01:19.230 and similarly the image element is also a void element that doesn't have a closing tag. 15 01:19.230 --> 01:23.150 Because if you think about it, what is the text content of an image? 16 01:23.170 --> 01:24.390 Doesn't really make sense, right? 17 01:24.390 --> 01:29.970 The main content is actually the image that will be rendered from the source. 18 01:30.390 --> 01:31.800 What does this look like? 19 01:31.800 --> 01:39.810 Well, here's an example image element where we've set the source to a real life live photo on the Internet. 20 01:40.110 --> 01:44.940 Now, when this code is rendered in a website, it will display a random image. 21 01:44.940 --> 01:48.570 So in this case, the random image I got was a forest. 22 01:48.780 --> 01:56.430 And the reason why it's random is because I'm getting these photos from a source called picsum.photos. 23 01:56.430 --> 02:02.460 So if you type this into your browser, you should see a website and the idea is kind of like the Lorem 24 02:02.460 --> 02:05.310 ipsum for placeholder photos. 25 02:05.310 --> 02:11.220 So when you don't really care what the photo is, but you need a photo on your website as you're creating 26 02:11.220 --> 02:17.070 it in order to see what it would look like, then you could use this website and you could put in the 27 02:17.100 --> 02:21.390 URL, which is the standard one like here. 28 02:21.390 --> 02:26.040 And then after a forward slash, you can add in the size of your image. 29 02:26.040 --> 02:32.640 So in this case, I'm saying I want a square that is 200 pixels by 200 pixels. 30 02:32.880 --> 02:38.400 It gives me a random image from its data bank, for example, in this case of a forest. 31 02:38.670 --> 02:47.160 The other attribute for an image tag that's super important and one that you should always have is the 32 02:47.160 --> 02:48.480 "alt" attribute. 33 02:48.690 --> 02:53.820 And the alt attribute stands for Alternative Text Description. 34 02:54.030 --> 02:59.910 This is really important because people who are blind or visually impaired, they don't look at the 35 02:59.910 --> 03:01.440 Internet the same way we do. 36 03:01.440 --> 03:03.780 They often use something called a screen reader. 37 03:03.780 --> 03:10.830 And what the screen reader is going to do when it hits an image is it will look at the alternative text 38 03:10.830 --> 03:11.760 provided. 39 03:11.760 --> 03:17.460 So in this case, I've provided that this is a forest at sunset or sunrise. 40 03:17.460 --> 03:22.830 I'm not quite sure, but that means that the person with visual impairment will get this read out to 41 03:22.830 --> 03:26.760 them and it will help them understand what the website's all about. 42 03:26.790 --> 03:29.400 So what is this process like? 43 03:29.610 --> 03:36.840 As an example, I'm using the Silktide Toolbar, which is a Chrome browser extension, to simulate what 44 03:36.870 --> 03:40.530 a person with visual impairment might hear as they're browsing, 45 03:40.530 --> 03:42.420 in this case, the BBC website. 46 03:42.510 --> 03:48.300 As I click through next, you can see it describes the different things that are on screen. 47 03:48.300 --> 03:53.670 And if I go over to the image, it describes the image for me. 48 03:55.380 --> 03:58.740 "Item 2, Dolphin leaping from the sea - Image." 49 03:58.770 --> 04:01.470 So where is it getting this description from? 50 04:01.470 --> 04:08.070 Well, if we right-click on the image and Inspect it, and if we look for the image, which I think 51 04:08.100 --> 04:14.490 should be down here, you can see as I highlight different parts, it shows me which part. 52 04:14.490 --> 04:22.350 So in this element, I'm probably going to find an image at the end right here and you can see the alt 53 04:22.380 --> 04:25.590 text saying, "Dolphin leaping from the sea," 54 04:25.590 --> 04:30.630 and that is what gets read out from the screen reader helping somebody with blindness 55 04:30.660 --> 04:33.570 be able to understand what's on this website. 56 04:34.410 --> 04:40.860 Now, if you want to check out this tool, it's a Chrome browser extension called Silktide and it should 57 04:40.860 --> 04:48.030 be a free plugin, but it might only work on Mac or certain versions of Windows, but it's not so much 58 04:48.030 --> 04:55.590 about the tool, but I wanted to show you how important it is the alt text that you provide for accessibility 59 04:55.590 --> 04:58.620 and for disabled users browsing your website. 60 04:58.710 --> 04:59.730 Now let's try 61 04:59.780 --> 05:02.930 an exercise and create some images of our own. 62 05:03.080 --> 05:10.280 Download the zipped file from this current lesson and go ahead and drag it into your Web Development Project 63 05:10.280 --> 05:13.400 folder and open it inside VS Code. 64 05:13.610 --> 05:21.110 If you take a look inside the index.html, you can see I've provided to you two image URL examples that 65 05:21.110 --> 05:22.320 you can use. 66 05:22.340 --> 05:28.610 And what we're aiming for is to find out if you're a cat person or if you're a dog person. 67 05:28.760 --> 05:34.430 I want you to create a h1 that says, "I'm a cat person," or "I'm a dog person." 68 05:34.430 --> 05:39.350 And also I want you to add an image element straight afterwards. 69 05:39.380 --> 05:44.970 Now, you can use the URL for the dog or for the cat. 70 05:44.990 --> 05:50.960 It doesn't really matter at the end of the day, as long as you've understood how to create images. 71 05:51.140 --> 05:52.640 That's the challenge. 72 05:52.670 --> 05:55.760 Pause the video and give that a go. 73 05:58.260 --> 05:58.680 All right. 74 05:58.680 --> 06:02.280 So personally, I'm more of a dog kind of person. 75 06:02.280 --> 06:08.680 And if you're also a dog person, then you might see my little Easter egg that I've buried in there. 76 06:08.700 --> 06:16.570 So first, let's go ahead and create our h1, and then we're going to create our image. 77 06:16.590 --> 06:22.530 Remember, we create an image tag and it's a self-closing tag. 78 06:22.560 --> 06:33.630 Then we add in our source as the image source, and we're going to put our URL right inside there. 79 06:34.110 --> 06:40.650 Now, already, if we go ahead and Show Preview, you can see our little dog digging in the sand 80 06:40.680 --> 06:46.350 because if you've noticed, this is actually a gif image. 81 06:46.620 --> 06:52.200 GIF images work exactly the same way as normal images, JPEGs or PNGs. 82 06:52.230 --> 06:57.780 As long as you put it into the source, it will be rendered in a website and it will start animating 83 06:57.880 --> 06:58.990 all by itself. 84 06:58.990 --> 07:01.810 And you get a cute little dog digging through the sand. 85 07:02.110 --> 07:08.500 Now if you're a cat person, then this is just a static jpeg because cats are more chill. 86 07:09.790 --> 07:12.880 So I hope you managed to get that part right. 87 07:13.120 --> 07:17.530 But we haven't finished creating our image element yet. 88 07:17.560 --> 07:20.530 Remember what I said about the alt tag? 89 07:20.530 --> 07:25.990 It's a good idea to always add an alt tag to describe our image when we can. 90 07:26.020 --> 07:31.990 Now, there are some cases where you don't create an alt tag because it's not really relevant to somebody 91 07:31.990 --> 07:36.400 reading through the content of a website and you can in fact leave it blank. 92 07:36.850 --> 07:38.710 But in this case, it's very simple, 93 07:38.710 --> 07:43.630 we've got a puppy who is digging through the sand. 94 07:44.800 --> 07:51.970 And now when we take a look at our Preview, then nothing visually for us changes, 95 07:51.970 --> 07:57.550 but behind the scenes, we will help our visually impaired friends to be able to understand our website 96 07:57.550 --> 07:58.900 just a little bit better. 97 07:59.230 --> 08:03.310 So I hope you managed to achieve either of these goals. 98 08:03.310 --> 08:09.130 And once you're ready, we can head over to the next lesson where we've got the final project to create 99 08:09.160 --> 08:14.410 a birthday invite website using all the skills that we've learned so far. 100 08:14.410 --> 08:16.250 So all of that and more, 101 08:16.270 --> 08:17.110 I'll see you there.