WEBVTT 0 00:00.170 --> 00:00.770 Hey, guys. 1 00:00.770 --> 00:08.210 In this lesson, we're going to understand a bit more about another aspect of HTML, which is their 2 00:08.210 --> 00:13.850 Attributes, and to understand that we're going to learn all about the anchor element, which allows us to 3 00:13.850 --> 00:15.240 create hyperlinks. 4 00:15.260 --> 00:21.620 This is what an anchor element looks like, and similar to previous elements, we've got the opening tag (<a>) 5 00:21.620 --> 00:27.620 and the closing tag (</a>), but there's something a little bit special about this one, because right now if 6 00:27.620 --> 00:32.300 you wrote the code as it is here, this is not an active hyperlink. 7 00:32.330 --> 00:39.590 What you need is to add an additional attribute, and the attribute for an HTML element goes in the 8 00:39.590 --> 00:40.820 opening tag. 9 00:40.820 --> 00:49.490 It goes into the part just after the name of the tag and just before the end of the opening tag where 10 00:49.490 --> 00:51.530 we have the closing angle bracket. 11 00:51.740 --> 00:58.730 And what an attribute does is it adds additional information to this HTML element, such as in this 12 00:58.730 --> 01:01.260 case, where this link should link to. 13 01:01.290 --> 01:05.070 Now, the way that we structure an attribute looks something like this. 14 01:05.070 --> 01:15.270 So we have the name of the element and then we have a space and then we have the name of the attribute. 15 01:15.450 --> 01:18.960 And afterwards, we have an equals sign. 16 01:18.960 --> 01:23.640 And after the equals sign, we have the value of the attribute. 17 01:24.300 --> 01:31.350 Now, you can have as many attributes as you want and all you have to do is simply separate each one of 18 01:31.350 --> 01:37.590 them with a space and make sure that they all go into the opening tag. 19 01:37.860 --> 01:45.600 Now, in the case of our Image Element, if you take a look on the Mozilla Developer Network Documentation 20 01:45.600 --> 01:55.230 for the anchor element, then you can see it has the special attribute of "href," and href is the part 21 01:55.260 --> 02:01.380 where we add the URL that the hyperlink should go to, without the attribute, 22 02:01.380 --> 02:02.820 this is what you would see. 23 02:02.850 --> 02:10.980 It is an anchor element and you do see the content in between the tags, but you do not see an active 24 02:10.980 --> 02:11.970 link, and when you click on it 25 02:11.970 --> 02:13.110 nothing happens. 26 02:13.140 --> 02:13.620 Now, 27 02:13.620 --> 02:20.910 as soon as you add that href attribute and you provide it with, in this case a target, 28 02:20.910 --> 02:25.170 so where should this hyperlink go to, then 29 02:25.170 --> 02:31.980 this link actually gets styled to show you that this is now an active link in the familiar blue with 30 02:31.980 --> 02:32.970 the underline. 31 02:32.970 --> 02:40.710 And at this point, if you click on it, it is going to go straight to this URL that we've specified. 32 02:41.100 --> 02:44.130 In addition to the specific attributes, 33 02:44.130 --> 02:51.720 so for example, in the Anchor Element Documentation, we saw that it has all of these specific attributes 34 02:51.720 --> 02:55.740 which are relevant to this particular element. 35 02:55.770 --> 03:01.920 Now, we're not going to be using all of them and some of them are also deprecated and no longer in use 36 03:01.920 --> 03:03.240 in HTML5. 37 03:03.330 --> 03:09.680 But in addition to these specific attributes, there are also global attributes that every single HTML 38 03:09.690 --> 03:11.370 element has access to. 39 03:12.000 --> 03:18.570 And if you look through some of these, an example is something like draggable, right? 40 03:19.080 --> 03:26.010 And it basically allows us to set true or false to say whether if the element may or may not be dragged, 41 03:26.520 --> 03:31.560 you can apply a global attribute to any given element. 42 03:31.560 --> 03:35.730 So in this case, we can apply it even to our anchor element. 43 03:35.730 --> 03:44.400 Again, we have the name of the attribute, we have the equal sign and we have the value of the attribute. 44 03:44.400 --> 03:50.610 So in this case, the name of the attribute is Draggable, and we've set it equal to true. 45 03:50.820 --> 03:57.930 So once this attribute is set, what happens is you can click and drag that anchor tag around. 46 03:58.020 --> 04:03.510 Now, if that attribute wasn't set, then when you try to drag it, it's just going to highlight the 47 04:03.510 --> 04:06.240 line and it's not going to allow that behavior. 48 04:06.540 --> 04:12.390 So we've learned that there are specific attributes which are reserved for only certain elements, such 49 04:12.390 --> 04:19.530 as the href for the anchor tag, and there are global attributes which can be used on any HTML element. 50 04:19.830 --> 04:27.150 So now let's try an exercise and see if you've understood how to use anchor elements and more specifically, 51 04:27.180 --> 04:32.070 see if you've understood how the HTML attribute is written in HTML code. 52 04:32.400 --> 04:39.390 In this exercise, we're going to create a website that shows our top five favorite websites. 53 04:39.840 --> 04:45.960 I've got the h1 already written for you, but what we're aiming for is something like this. 54 04:45.960 --> 04:54.210 So you have a list here and notice that this is actually an ordered list because it goes from 1 all 55 04:54.210 --> 04:59.850 the way to 5 and the fact that the list is not highlighted. 56 04:59.880 --> 05:09.300 Is in blue should show you that this is actually created using a list element and not a part of the 57 05:09.300 --> 05:10.470 anchor tag. 58 05:10.500 --> 05:12.510 It's not a part of the content. 59 05:12.510 --> 05:15.870 And the anchor tag only starts here. 60 05:16.530 --> 05:24.810 I want you to document your top five all time favorite websites and feel free to Google or check mine 61 05:24.810 --> 05:26.700 if you want to see what they do. 62 05:26.790 --> 05:33.420 These are some of the websites that I go to when I'm bored or when I'm trying to look for some new ideas 63 05:33.420 --> 05:34.800 and new inspiration. 64 05:35.160 --> 05:40.770 So I want you to use what you've learned previously about creating lists, 65 05:40.770 --> 05:47.100 and within those lists, I want you to create five anchor tags, each of them pointing to a different 66 05:47.100 --> 05:48.870 website that you like. 67 05:49.350 --> 05:54.240 And if you've got everything working, then you would end up with a website that looks like the goal. 68 05:54.240 --> 06:00.040 And when you click on any of these links, then they should take you to the correct website. 69 06:00.070 --> 06:00.850 Pause the video 70 06:00.850 --> 06:06.340 now, give this challenge a go, and once you're done, come back here and I'll go through the solution 71 06:06.340 --> 06:07.030 with you. 72 06:12.400 --> 06:12.880 All right. 73 06:12.880 --> 06:14.290 So how did that go? 74 06:14.500 --> 06:18.370 The first thing we wanted to do was to create an ordered list. 75 06:18.400 --> 06:21.330 We already saw how to do this in a previous lesson. 76 06:21.340 --> 06:27.730 We create our ol tags and inside we add our list elements. 77 06:27.880 --> 06:32.260 Inside the list element is where our anchor tag is going to go. 78 06:32.290 --> 06:42.220 It's an anchor tag, which is inside a list element, which is then inside an ordered list. 79 06:42.520 --> 06:46.150 So several layers of nesting that's going on here. 80 06:46.720 --> 06:53.530 Now, once you've created your anchor tag, then in between the open and closing tags, we add the text 81 06:53.530 --> 06:54.590 for our link. 82 06:54.610 --> 07:00.910 So in my case, it will be the name of my website that I'm linking to, which is called Product Hunt. 83 07:01.000 --> 07:07.720 And this is a place where you can see all the latest product launches and great websites and start ups 84 07:07.720 --> 07:09.700 that people are building every day. 85 07:09.940 --> 07:14.950 The important part comes here when we create the attribute for that anchor tag. 86 07:14.960 --> 07:23.840 So remember that the attribute for linking an anchor tag is called the href, and we're going to add 87 07:23.840 --> 07:25.970 it after the equal sign. 88 07:26.520 --> 07:31.640 As you start typing, you might see VS Code start suggesting what you're looking for. 89 07:31.650 --> 07:37.380 So if you pick the href and hit enter, then it will format everything for you ready for you to enter 90 07:37.380 --> 07:38.340 the URL. 91 07:38.730 --> 07:45.690 If you're wondering why there are these quotation marks here, well, that's because it's actually a 92 07:45.690 --> 07:48.950 piece of text that we're going to add in here. 93 07:48.960 --> 07:52.230 So this is treated slightly differently in code. 94 07:52.230 --> 07:59.140 So whenever you have text, normally you will see them enclosed inside a set of double quotes. 95 07:59.160 --> 08:07.050 This is to differentiate from the reserved words like, you know, Ii, or a, or href, 96 08:07.080 --> 08:08.820 these are all special words. 97 08:08.820 --> 08:13.890 And in order to show that you're not creating anything special, you're just pointing to a URL, which 98 08:13.890 --> 08:15.210 is just a piece of text, 99 08:15.240 --> 08:17.670 we have our double quotes around it. 100 08:18.420 --> 08:26.380 Inside here, I'm going to paste in the URL of Product Hunt, and now I have myself a link and if I 101 08:26.380 --> 08:32.590 go ahead and Show Preview, then you should see that we've got our list-item 1, 102 08:32.590 --> 08:39.580 and when I click on it, it goes to the website that I have linked to. 103 08:39.760 --> 08:47.410 You can repeat this process and link to all of your five favorite websites and you should end up with 104 08:47.410 --> 08:50.680 something that looks like this. 105 08:50.680 --> 08:58.510 And as an extra challenge, I want you to head over to the Developer Documentation for the <ol>, 106 08:58.540 --> 09:01.750 which you're using in this current code exercise, 107 09:01.750 --> 09:03.850 and look at the attributes. 108 09:04.000 --> 09:12.130 I want you to see whether if you can change one of the attributes, the "start" attribute, so that your 109 09:12.130 --> 09:17.290 list, instead of starting from 1, starts from 5. 110 09:17.470 --> 09:19.300 This is what you're aiming for. 111 09:19.390 --> 09:23.950 Pause the video, give that a go, and then afterwards we'll go through the solution together. 112 09:26.750 --> 09:28.940 Let's take a look at the documentation. 113 09:28.940 --> 09:31.400 We can see that for the ordered list, 114 09:31.430 --> 09:34.370 one of the attributes is called "start," 115 09:34.460 --> 09:42.680 and in the explanation, it says, all we have to do is to set this attribute to a number for it to 116 09:42.680 --> 09:43.430 start from. 117 09:43.430 --> 09:45.020 So that's pretty simple. 118 09:45.020 --> 09:47.690 But we need to remember where our attributes go. 119 09:47.690 --> 09:55.250 So they go in the starting tag, which is here, and the name of the attribute is start, and we can 120 09:55.250 --> 09:57.140 set it equal to 5. 121 09:57.170 --> 10:02.930 Now once we've done that, if we take a look at our website, you can see the ordered list now starts 122 10:02.930 --> 10:07.970 from 5 and ends at 9 because we've changed that attribute. 123 10:08.390 --> 10:12.680 Hopefully that wasn't too difficult and you managed to get it to work. 124 10:12.710 --> 10:17.390 Have a quick review of the concepts that are covered in this lesson 125 10:17.390 --> 10:21.920 and remember, we're always trying to repeat things that we've learnt before just to make sure that 126 10:21.920 --> 10:25.830 we reinforce those pieces of knowledge from earlier on. 127 10:25.830 --> 10:32.220 And one thing I like to do as I learn is to make some notes on the things that are new to me that I 128 10:32.220 --> 10:33.600 didn't realize before. 129 10:33.600 --> 10:38.700 So if there's something new in this lesson that you want to write down, take a quick note of it and 130 10:38.700 --> 10:42.840 then head over to the next lesson where we talk about Image Elements. 131 10:43.230 --> 10:44.850 For all of that and more, 132 10:44.850 --> 10:45.450 I'll see you there.