1 00:00:00,210 --> 00:00:01,043 Instructor: Hey guys. 2 00:00:01,043 --> 00:00:03,600 In this lesson we're gonna understand a bit more 3 00:00:03,600 --> 00:00:08,600 about another aspect of HTML, which is their attributes 4 00:00:09,300 --> 00:00:11,220 and understand that we're gonna learn all 5 00:00:11,220 --> 00:00:12,990 about the anchor element 6 00:00:12,990 --> 00:00:15,540 which allows us to create hyperlinks. 7 00:00:15,540 --> 00:00:18,000 This is what an anchor element looks like. 8 00:00:18,000 --> 00:00:19,620 And similar to previous elements, 9 00:00:19,620 --> 00:00:23,157 we've got the opening tag and the closing tag. 10 00:00:23,157 --> 00:00:25,380 But there's something a little bit special 11 00:00:25,380 --> 00:00:28,560 about this one because right now, if you wrote the code 12 00:00:28,560 --> 00:00:32,640 as it is here, this is not an active hyperlink. 13 00:00:32,640 --> 00:00:36,240 What you need is to add an additional attribute. 14 00:00:36,240 --> 00:00:37,200 And the attribute 15 00:00:37,200 --> 00:00:41,040 for an HTML element goes in the opening tag. 16 00:00:41,040 --> 00:00:44,550 It goes into the part just after the name 17 00:00:44,550 --> 00:00:47,668 of the tag and just before the end 18 00:00:47,668 --> 00:00:52,140 of the opening tag where we have the closing angle bracket. 19 00:00:52,140 --> 00:00:55,790 And what an attribute does is it adds additional information 20 00:00:55,790 --> 00:00:57,990 to this HTML element, 21 00:00:57,990 --> 00:01:01,220 such as in this case where this link should link to. 22 00:01:01,220 --> 00:01:03,450 Now the way that we structure an attribute 23 00:01:03,450 --> 00:01:05,129 looks something like this. 24 00:01:05,129 --> 00:01:08,237 So we have the name of the element 25 00:01:08,237 --> 00:01:13,237 and then we have a space and then we have the name 26 00:01:13,359 --> 00:01:18,359 of the attribute and afterwards we have a equal sign. 27 00:01:19,140 --> 00:01:20,640 And after the equal sign, 28 00:01:20,640 --> 00:01:24,167 we have the value of the attribute. 29 00:01:24,167 --> 00:01:27,390 Now you can have as many attributes as you want 30 00:01:27,390 --> 00:01:31,230 and all you have to do is simply separate each one 31 00:01:31,230 --> 00:01:33,930 of them with a space and make sure 32 00:01:33,930 --> 00:01:37,682 that they all go into the opening tag. 33 00:01:37,682 --> 00:01:41,370 Now in the case of our image element, if you take a look 34 00:01:41,370 --> 00:01:45,750 on the Mozilla Developer Network documentation 35 00:01:45,750 --> 00:01:48,585 for the anchor element, 36 00:01:48,585 --> 00:01:53,267 then you can see it has the special attribute of href 37 00:01:53,267 --> 00:01:56,880 and href is the part where we add the URL 38 00:01:56,880 --> 00:01:59,557 that the hyperlink should go to. 39 00:01:59,557 --> 00:02:02,940 Without the attribute, this is what you would see. 40 00:02:02,940 --> 00:02:06,788 It is an anchor element, and you do see the content 41 00:02:06,788 --> 00:02:11,130 in between the tags, but you do not see an active link. 42 00:02:11,130 --> 00:02:13,350 And when you click on it, nothing happens. 43 00:02:13,350 --> 00:02:17,340 Now, as soon as you add that href attribute 44 00:02:17,340 --> 00:02:21,030 and you provide it with, in this case, a target, 45 00:02:21,030 --> 00:02:24,810 so where should this hyperlink go to, 46 00:02:24,810 --> 00:02:28,650 then this link actually gets styled to show you 47 00:02:28,650 --> 00:02:30,390 that this is now an active link 48 00:02:30,390 --> 00:02:33,150 in the familiar blue with the underline. 49 00:02:33,150 --> 00:02:35,430 And at this point, if you click on it, 50 00:02:35,430 --> 00:02:37,530 it is going to go straight 51 00:02:37,530 --> 00:02:41,190 to this URL that we've specified. 52 00:02:41,190 --> 00:02:44,190 In addition to the specific attributes, 53 00:02:44,190 --> 00:02:47,460 so for example in the anchor element documentation, 54 00:02:47,460 --> 00:02:49,050 we saw that it has all 55 00:02:49,050 --> 00:02:53,280 of these specific attributes which are relevant 56 00:02:53,280 --> 00:02:55,950 to this particular element. 57 00:02:55,950 --> 00:02:58,350 Now, we're not gonna be using all of them 58 00:02:58,350 --> 00:03:00,540 and some of them are also deprecated 59 00:03:00,540 --> 00:03:03,310 and no longer in use in HTML5. 60 00:03:03,310 --> 00:03:06,300 But in addition to these specific attributes, 61 00:03:06,300 --> 00:03:08,220 there are also global attributes 62 00:03:08,220 --> 00:03:11,223 that every single HTML element has access to. 63 00:03:12,270 --> 00:03:14,610 And if you look through some of these, 64 00:03:14,610 --> 00:03:19,290 an example is something like draggable, right? 65 00:03:19,290 --> 00:03:22,920 And it basically allows us to set true or false to say 66 00:03:22,920 --> 00:03:26,700 whether if the element may or may not be dragged. 67 00:03:26,700 --> 00:03:31,650 You can apply a global attribute to any given element. 68 00:03:31,650 --> 00:03:35,790 So in this case, we can apply it even to our anchor element. 69 00:03:35,790 --> 00:03:39,840 Again, we have the name of the attribute, 70 00:03:39,840 --> 00:03:41,700 we have the equal sign, 71 00:03:41,700 --> 00:03:44,550 and we have the value of the attribute. 72 00:03:44,550 --> 00:03:47,820 So in this case, the name of the attribute is draggable 73 00:03:47,820 --> 00:03:51,030 and we've set it equal to true. 74 00:03:51,030 --> 00:03:55,320 So once this attribute is set, what happens is you can click 75 00:03:55,320 --> 00:03:58,230 and drag that anchor tag around. 76 00:03:58,230 --> 00:04:00,096 Now, if that attribute wasn't set 77 00:04:00,096 --> 00:04:02,010 then when you try to drag it, 78 00:04:02,010 --> 00:04:03,810 it's just going to highlight the line 79 00:04:03,810 --> 00:04:06,341 and it's not going to allow that behavior. 80 00:04:06,341 --> 00:04:07,590 So we've learned 81 00:04:07,590 --> 00:04:10,080 that there are specific attributes that are reserved 82 00:04:10,080 --> 00:04:13,380 for only certain elements, such as the href 83 00:04:13,380 --> 00:04:14,790 for the anchor tag 84 00:04:14,790 --> 00:04:17,490 and there are global attributes which can be used 85 00:04:17,490 --> 00:04:20,010 on any HTML element. 86 00:04:20,010 --> 00:04:21,630 So now let's try an exercise 87 00:04:21,630 --> 00:04:23,700 and see if you've understood how 88 00:04:23,700 --> 00:04:27,180 to use anchor elements and more specifically, 89 00:04:27,180 --> 00:04:30,750 see if you've understood how the HTML attribute is written 90 00:04:30,750 --> 00:04:32,610 in HTML code. 91 00:04:32,610 --> 00:04:35,520 In this exercise, we're going to create a website 92 00:04:35,520 --> 00:04:39,510 that shows our top five favorite websites. 93 00:04:39,510 --> 00:04:42,840 I've got the H1 already written for you 94 00:04:42,840 --> 00:04:46,020 but what we're aiming for is something like this. 95 00:04:46,020 --> 00:04:48,840 So you have a list here and notice 96 00:04:48,840 --> 00:04:51,840 that this is actually an ordered list 97 00:04:51,840 --> 00:04:56,840 because it goes from one all the way to five, and the fact 98 00:04:57,450 --> 00:05:02,190 that the list is not highlighted in blue should show you 99 00:05:02,190 --> 00:05:06,420 that this is actually created using a list element 100 00:05:06,420 --> 00:05:10,800 and not a part of the anchor tag. 101 00:05:10,800 --> 00:05:12,750 It's not a part of the content. 102 00:05:12,750 --> 00:05:16,680 And the anchor tag only starts here. 103 00:05:16,680 --> 00:05:20,040 I want you to document your top five 104 00:05:20,040 --> 00:05:22,920 all time favorite websites and feel free 105 00:05:22,920 --> 00:05:27,030 to Google or check mine if you wanna see what they do. 106 00:05:27,030 --> 00:05:30,990 These are some of the websites that I go to when I'm bored 107 00:05:30,990 --> 00:05:33,510 or when I'm trying to look for some new ideas 108 00:05:33,510 --> 00:05:35,430 and new inspiration. 109 00:05:35,430 --> 00:05:38,160 So I want you to use what you've learned previously 110 00:05:38,160 --> 00:05:41,040 about creating lists. 111 00:05:41,040 --> 00:05:43,050 And within those lists, I want you 112 00:05:43,050 --> 00:05:46,260 to create five anchor tags, each of them pointing 113 00:05:46,260 --> 00:05:48,843 to a different website that you like. 114 00:05:49,680 --> 00:05:52,320 And if you've got everything working, then you would end up 115 00:05:52,320 --> 00:05:54,480 with a website that looks like the goal. 116 00:05:54,480 --> 00:05:56,460 And when you click on any of these links, 117 00:05:56,460 --> 00:06:00,150 then they should take you to the correct website. 118 00:06:00,150 --> 00:06:02,790 Pause the video now, give this challenge a go, 119 00:06:02,790 --> 00:06:04,860 and once you're done, come back here 120 00:06:04,860 --> 00:06:06,960 and I'll go through the solution with you. 121 00:06:12,078 --> 00:06:14,760 All right, so how did that go? 122 00:06:14,760 --> 00:06:16,530 The first thing we wanted to do was 123 00:06:16,530 --> 00:06:18,540 to create a ordered list. 124 00:06:18,540 --> 00:06:21,570 We already saw how to do this in a previous lesson. 125 00:06:21,570 --> 00:06:26,570 We create our OL tags, and inside we add our list elements. 126 00:06:28,140 --> 00:06:29,970 Inside the list element is 127 00:06:29,970 --> 00:06:32,520 where our anchor tag is going to go. 128 00:06:32,520 --> 00:06:37,520 It's an anchor tag, which is inside a list element 129 00:06:37,668 --> 00:06:42,427 which is then inside a ordered list. 130 00:06:42,427 --> 00:06:46,653 So several layers of nesting that's going on here. 131 00:06:46,653 --> 00:06:49,920 Now, once you've created your anchor tag, 132 00:06:49,920 --> 00:06:52,110 then in between the open and closing tags, 133 00:06:52,110 --> 00:06:54,930 we add the text for our link. 134 00:06:54,930 --> 00:06:58,320 So in my case, it will be the name of my website 135 00:06:58,320 --> 00:07:01,165 that I'm linking to, which is called Product Hunt. 136 00:07:01,165 --> 00:07:03,840 And this is a place where you can see 137 00:07:03,840 --> 00:07:07,290 all the latest product launches and great websites 138 00:07:07,290 --> 00:07:10,230 and startups that people are building every day. 139 00:07:10,230 --> 00:07:13,650 The important part comes here when we create the attribute 140 00:07:13,650 --> 00:07:15,180 for that anchor tag. 141 00:07:15,180 --> 00:07:17,160 So remember that the attribute 142 00:07:17,160 --> 00:07:21,188 for linking an anchor tag is called the href 143 00:07:21,188 --> 00:07:26,188 and we're going to add it after the equal sign. 144 00:07:26,640 --> 00:07:30,450 As you start typing, you might see VSCode start suggesting 145 00:07:30,450 --> 00:07:31,860 what you're looking for. 146 00:07:31,860 --> 00:07:34,410 So if you pick the href and hit enter, 147 00:07:34,410 --> 00:07:36,750 then it'll format everything for you ready 148 00:07:36,750 --> 00:07:39,000 for you to enter the URL. 149 00:07:39,000 --> 00:07:39,833 If you're wondering 150 00:07:39,833 --> 00:07:42,775 why there are these quotation marks here, 151 00:07:42,775 --> 00:07:46,140 well that's because it's actually a piece 152 00:07:46,140 --> 00:07:49,290 of text that we're going to add in here. 153 00:07:49,290 --> 00:07:52,350 So this is treated slightly differently in code. 154 00:07:52,350 --> 00:07:54,360 So whenever you have text, 155 00:07:54,360 --> 00:07:57,270 normally you will see them enclosed 156 00:07:57,270 --> 00:07:59,430 inside a set of double quotes. 157 00:07:59,430 --> 00:08:03,212 This is to differentiate from the reserved words like 158 00:08:03,212 --> 00:08:08,212 LI or A or href, these are all special words. 159 00:08:09,060 --> 00:08:10,260 And in order to show 160 00:08:10,260 --> 00:08:11,850 that you're not creating anything special, 161 00:08:11,850 --> 00:08:13,650 you're just pointing to our URL, 162 00:08:13,650 --> 00:08:15,480 which is just a piece of text, 163 00:08:15,480 --> 00:08:17,763 we have our double quotes around it. 164 00:08:18,660 --> 00:08:22,560 Inside here I'm going to paste in the URL of Product Hunt. 165 00:08:22,560 --> 00:08:25,980 And now I have myself a link. 166 00:08:25,980 --> 00:08:29,040 And if I go ahead and show preview, 167 00:08:29,040 --> 00:08:32,820 then you should see that we've got our list item one. 168 00:08:32,820 --> 00:08:36,330 And when I click on it, it goes to the website 169 00:08:36,330 --> 00:08:39,929 that I have linked to. 170 00:08:39,929 --> 00:08:42,999 You can repeat this process and link to all 171 00:08:42,999 --> 00:08:46,980 of your five favorite websites and you should end up 172 00:08:46,980 --> 00:08:50,850 with something that looks like this. 173 00:08:50,850 --> 00:08:54,120 And as an extra challenge, I want you to head over 174 00:08:54,120 --> 00:08:58,650 to the developer documentation for the ordered list 175 00:08:58,650 --> 00:09:01,980 which you're using in this current code exercise 176 00:09:01,980 --> 00:09:04,020 and look at the attributes. 177 00:09:04,020 --> 00:09:07,620 I want you to see whether if you can change one 178 00:09:07,620 --> 00:09:12,620 of the attributes, the start attribute, so that your list, 179 00:09:12,660 --> 00:09:17,610 instead of starting from one, starts from five. 180 00:09:17,610 --> 00:09:19,470 This is what you are aiming for. 181 00:09:19,470 --> 00:09:21,240 Pause the video, give that a go. 182 00:09:21,240 --> 00:09:24,190 And then afterwards we'll go through the solution together. 183 00:09:26,940 --> 00:09:29,070 Let's take a look at the documentation. 184 00:09:29,070 --> 00:09:31,650 We can see that for the ordered list, 185 00:09:31,650 --> 00:09:34,980 one of the attributes is called start. 186 00:09:34,980 --> 00:09:37,050 And in the explanation it says all we have 187 00:09:37,050 --> 00:09:40,830 to do is to set this attribute 188 00:09:40,830 --> 00:09:43,620 to a number for it to start from. 189 00:09:43,620 --> 00:09:45,240 So that's pretty simple 190 00:09:45,240 --> 00:09:47,730 but we need to remember where our attributes go. 191 00:09:47,730 --> 00:09:52,730 So they go in the starting tag, which is here, and the name 192 00:09:52,770 --> 00:09:57,510 of the attribute is start and we can set it equal to five. 193 00:09:57,510 --> 00:10:00,930 Now, once we've done that, if we take a look at our website, 194 00:10:00,930 --> 00:10:03,030 you can see the ordered list now starts 195 00:10:03,030 --> 00:10:05,130 from five and ends at nine 196 00:10:05,130 --> 00:10:08,550 because we've changed that attribute. 197 00:10:08,550 --> 00:10:10,350 Hopefully that wasn't too difficult 198 00:10:10,350 --> 00:10:12,930 and you managed to get it to work. 199 00:10:12,930 --> 00:10:14,100 Have a quick review 200 00:10:14,100 --> 00:10:17,640 of the concepts that are covered in this lesson. 201 00:10:17,640 --> 00:10:19,950 And remember, we're always trying to repeat things 202 00:10:19,950 --> 00:10:21,810 that we've learned before just to make sure 203 00:10:21,810 --> 00:10:25,797 that we reinforce those pieces of knowledge from earlier on. 204 00:10:25,797 --> 00:10:29,070 And one thing I like to do as I learn is 205 00:10:29,070 --> 00:10:31,230 to make some notes on the things that are new 206 00:10:31,230 --> 00:10:33,810 to me that I didn't realize before. 207 00:10:33,810 --> 00:10:34,830 So if there's something new 208 00:10:34,830 --> 00:10:37,020 in this lesson that you want to write down, 209 00:10:37,020 --> 00:10:39,300 take a quick note of it and then head over 210 00:10:39,300 --> 00:10:43,500 to the next lesson where we talk about image elements. 211 00:10:43,500 --> 00:10:46,287 For all that and more, I'll see you there.