Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,390 --> 00:00:02,240 And welcome back. 2 00:00:02,250 --> 00:00:06,029 In this video we're going to be learning about self-closing tags. 3 00:00:06,030 --> 00:00:14,339 Up until this point we use all tags that have the opening and then the closing which has this slash 4 00:00:14,340 --> 00:00:15,419 in it. 5 00:00:15,420 --> 00:00:22,139 Now there are a few elements that don't have this syntax but they have something called 'self-closing 6 00:00:22,140 --> 00:00:22,800 tags'. 7 00:00:22,950 --> 00:00:29,579 So let's say here between Fuji and Honeycrisp I want to have a bit of a line break. 8 00:00:29,580 --> 00:00:36,430 I can use something like 'br' here and if I save this and I 'refresh', 9 00:00:36,630 --> 00:00:38,680 we have a little line break. 10 00:00:38,700 --> 00:00:41,740 There's also 'hr' which is horizontal line, 11 00:00:42,000 --> 00:00:46,730 so you get a horizontal line for refresh right through here. 12 00:00:46,830 --> 00:00:53,460 'hr' tags just have one single element, self-closing. 13 00:00:53,650 --> 00:01:00,579 You might also see something like this, and that is something from the old version of HTML, which 14 00:01:00,580 --> 00:01:02,420 uses xHTML. 15 00:01:02,800 --> 00:01:08,319 You can read up more about it on your own, but just keep in mind that with HTML5, we are just going 16 00:01:08,320 --> 00:01:09,200 to be using this. 17 00:01:09,340 --> 00:01:12,759 So obviously on web pages there's going to be images. 18 00:01:12,760 --> 00:01:16,250 So would it be nice if there was a picture of a Fuji apple here. 19 00:01:17,250 --> 00:01:18,330 Let's see how we can do it. 20 00:01:18,640 --> 00:01:23,829 So with an image tag, and let's think about this critically if I didn't know what an image tag is and 21 00:01:23,830 --> 00:01:33,119 I wanted to add an image to my HTML file, well if I Google "image HTML tag", again one of the 22 00:01:33,120 --> 00:01:42,750 first websites that pops up is the W3 Schools, and I'll show you exactly how an image tag works. 23 00:01:43,670 --> 00:01:50,009 If I click try yourself you can see it in action you can play around with but you can see here that 24 00:01:50,010 --> 00:01:53,029 an image tag is a self-closing tag. 25 00:01:53,030 --> 00:01:57,130 There's no closing image tags just just one single tag. 26 00:01:57,970 --> 00:02:05,050 And if I do image [img] and we have something called source here and this is something called an attribute 27 00:02:05,980 --> 00:02:11,709 some HTML tags can have something called attributes, which add special properties to the specific 28 00:02:11,710 --> 00:02:12,410 tag. 29 00:02:12,450 --> 00:02:19,949 So an attribute always has a value attached to it and the image source [img src]. 30 00:02:19,950 --> 00:02:24,089 That's what it stands for, tells us where the image is coming from. 31 00:02:24,090 --> 00:02:36,770 So let's find an image of fuji apple let's go, images, oh, I like this one. Let's do 'view image' and give us the link 32 00:02:36,860 --> 00:02:39,109 of where this image is. 33 00:02:39,110 --> 00:02:42,770 So I'm just going to copy that paste it in here. 34 00:02:43,460 --> 00:02:49,729 Let's go back to our example here we can see here that there's a few more attributes that we can add 35 00:02:49,730 --> 00:02:50,860 to an image tag. 36 00:02:51,020 --> 00:02:55,510 But for now we can just leave it here close the tag. 37 00:02:55,520 --> 00:03:05,250 You can see that Sublime Text has the nice highlighting for us and if I save this go back to our website 38 00:03:05,360 --> 00:03:13,700 and I click refresh I get this massive fuji apple, and obviously that's that's too big. 39 00:03:13,770 --> 00:03:20,279 Ideally we can make it a little bit smaller again if we go back to the example you'll see that there 40 00:03:20,280 --> 00:03:29,780 has width and height so we can actually just copy that and add it to the attributes so that we specify 41 00:03:29,800 --> 00:03:30,420 the width. 42 00:03:30,460 --> 00:03:31,420 And this is in pixels [px]. 43 00:03:31,470 --> 00:03:38,160 So I save that, I refresh and look at that we have the fuji apple, it looks very very pretty. 44 00:03:39,440 --> 00:03:42,680 Let's add the picture for honeycrisp as well. 45 00:03:42,790 --> 00:03:44,120 I'm going to do this fast. 46 00:03:44,150 --> 00:03:48,410 You should be able to just copy this image. 47 00:03:48,470 --> 00:03:52,760 And again we want to make it the same size as the previous one so I'm going to leave the width and height 48 00:03:52,820 --> 00:03:53,450 the same. 49 00:03:53,740 --> 00:03:57,599 And let's find a - an image of a honeycrisp apple. 50 00:03:57,600 --> 00:04:07,040 So, 'honeycrisp apple' and 'Images', it looks quite similar doesn't it? 51 00:04:07,220 --> 00:04:16,400 And 'view image' let's copy the source from here going to save that. 52 00:04:16,600 --> 00:04:20,080 Go back to our website and let's refresh and look at that. 53 00:04:20,230 --> 00:04:25,499 We have our apples. So, image tags are very very useful. 54 00:04:25,500 --> 00:04:30,940 You might be asking yourself, "what does the 'alt' attribute mean?" 55 00:04:31,000 --> 00:04:36,189 And this is something that you can actually read up on so if you scroll down if you look over here you 56 00:04:36,190 --> 00:04:41,019 can see that 'alt' specifies an alternate text for an image. 57 00:04:41,020 --> 00:04:47,589 So again, this is something that can be used by screen readers and you can define what the image is of. 58 00:04:47,590 --> 00:04:50,960 So, here the 'alt' is "smiley face". 59 00:04:51,010 --> 00:04:57,249 So when a screen reader reads it, it says, "Oh and this part of the website there is a smiley face". 60 00:04:57,250 --> 00:05:03,000 Just to recap, we learned about self-closing tags - which don't require 61 00:05:03,010 --> 00:05:05,530 two of them, so an opening and closing tag. 62 00:05:05,590 --> 00:05:06,720 Just a single one. 63 00:05:06,880 --> 00:05:10,269 So we use 'br' for line break. 64 00:05:10,270 --> 00:05:18,580 We used 'hr' for a horizontal line, and then we have the image tag that also has to have some attributes. 65 00:05:18,610 --> 00:05:23,100 So, it has a source which tells us where to grab the image from, 66 00:05:23,230 --> 00:05:30,219 it has a width attribute, a height attribute, with a value of 42 pixels, and 42. 67 00:05:30,220 --> 00:05:32,790 All right I'll see you in the next lesson. 7080