1
00:00:00,170 --> 00:00:00,770
Hey, guys.

2
00:00:00,770 --> 00:00:08,210
In this lesson, we're going to understand a bit more about another aspect of HTML, which is their

3
00:00:08,210 --> 00:00:13,850
attributes and understand that we're going to learn all about the anchor element, which allows us to

4
00:00:13,850 --> 00:00:15,240
create hyperlinks.

5
00:00:15,260 --> 00:00:21,620
This is what an anchor element looks like and similar to previous elements, we've got the opening tag

6
00:00:21,620 --> 00:00:27,620
and the closing tag, but there's something a little bit special about this one because right now if

7
00:00:27,620 --> 00:00:32,299
you wrote the code as it is here, this is not an active hyperlink.

8
00:00:32,330 --> 00:00:39,590
What you need is to add an additional attribute, and the attribute for an HTML element goes in the

9
00:00:39,590 --> 00:00:40,820
opening tag.

10
00:00:40,820 --> 00: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

11
00:00:49,490 --> 00:00:51,530
we have the closing angle bracket.

12
00:00:51,740 --> 00:00:58,730
And what an attribute does is it adds additional information to this HTML element, such as in this

13
00:00:58,730 --> 00:01:01,260
case where this link should link to.

14
00:01:01,290 --> 00:01:05,069
Now, the way that we structure an attribute looks something like this.

15
00:01:05,069 --> 00: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.

16
00:01:15,450 --> 00:01:18,960
And afterwards we have a equal sign.

17
00:01:18,960 --> 00:01:23,640
And after the equal sign, we have the value of the attribute.

18
00:01:24,300 --> 00: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

19
00:01:31,350 --> 00:01:37,590
them with a space and make sure that they all go into the opening tag.

20
00:01:37,860 --> 00:01:45,600
Now, in the case of our image element, if you take a look on the Mozilla developer network documentation

21
00:01:45,600 --> 00:01:55,230
for the anchor element, then you can see it has the special attribute of href and href is the part

22
00:01:55,260 --> 00:02:01,380
where we add the URL that the hyperlink should go to without the attribute.

23
00:02:01,380 --> 00:02:02,820
This is what you would see.

24
00:02:02,850 --> 00:02:10,979
It is an anchor element and you do see the content in between the tags, but you do not see an active

25
00:02:10,979 --> 00:02:11,970
link when you click on it.

26
00:02:11,970 --> 00:02:13,110
Nothing happens.

27
00:02:13,140 --> 00:02:13,620
Now.

28
00:02:13,620 --> 00:02:20,910
As soon as you add that href attribute and you provide it with in this case a target.

29
00:02:20,910 --> 00:02:25,170
So where should this hyperlink go to then?

30
00:02:25,170 --> 00:02:31,980
This link actually gets styled to show you that this is now an active link in the familiar blue with

31
00:02:31,980 --> 00:02:32,970
the underline.

32
00:02:32,970 --> 00: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

33
00:02:41,100 --> 00:02:44,130
in addition to the specific attributes.

34
00:02:44,130 --> 00:02:51,720
So for example, in the anchor element documentation, we saw that it has all of these specific attributes

35
00:02:51,720 --> 00:02:55,740
which are relevant to this particular element.

36
00:02:55,770 --> 00: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

37
00:03:01,920 --> 00:03:03,240
in HTML5.

38
00:03:03,330 --> 00:03:09,680
But in addition to these specific attributes, there are also global attributes that every single HTML

39
00:03:09,690 --> 00:03:11,370
element has access to.

40
00:03:12,000 --> 00:03:18,570
And if you look through some of these, an example is something like draggable, right?

41
00:03:19,080 --> 00: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,

42
00:03:26,520 --> 00:03:31,560
you can apply a global attribute to any given element.

43
00:03:31,560 --> 00:03:35,730
So in this case, we can apply it even to our anchor element.

44
00:03:35,730 --> 00:03:44,400
Again, we have the name of the attribute, we have the equal sign and we have the value of the attribute.

45
00:03:44,400 --> 00:03:50,610
So in this case, the name of the attribute is Draggable, and we've set it equal to true.

46
00:03:50,820 --> 00:03:57,930
So once this attribute is set, what happens is you can click and drag that anchor tag around.

47
00:03:58,020 --> 00:04:03,510
Now, if that attribute wasn't set, then when you try to drag it, it's just going to highlight the

48
00:04:03,510 --> 00:04:06,240
line and it's not going to allow that behavior.

49
00:04:06,540 --> 00:04:12,390
So we've learned that there are specific attributes which are reserved for only certain elements, such

50
00:04:12,390 --> 00:04:19,529
as the href for the anchor tag, and there are global attributes which can be used on any HTML element.

51
00:04:19,829 --> 00:04:27,150
So now let's try an exercise and see if you've understood how to use anchor elements and more specifically,

52
00:04:27,180 --> 00:04:32,070
see if you've understood how the HTML attribute is written in HTML code.

53
00:04:32,400 --> 00:04:39,390
In this exercise, we're going to create a website that shows our top five favorite websites.

54
00:04:39,840 --> 00:04:45,960
I've got the H1 already written for you, but what we're aiming for is something like this.

55
00:04:45,960 --> 00:04:54,210
So you have a list here and notice that this is actually an ordered list because it goes from one all

56
00:04:54,210 --> 00:04:59,850
the way to five and the fact that the list is not highlighted.

57
00:04:59,880 --> 00:05:09,300
Is in blue should show you that this is actually created using a list element and not a part of the

58
00:05:09,300 --> 00:05:10,470
anchor tag.

59
00:05:10,500 --> 00:05:12,510
It's not a part of the content.

60
00:05:12,510 --> 00:05:15,870
And the anchor tag only starts here.

61
00:05:16,530 --> 00:05:24,810
I want you to document your top five all time favorite websites and feel free to Google or check mine

62
00:05:24,810 --> 00:05:26,700
if you want to see what they do.

63
00:05:26,790 --> 00: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

64
00:05:33,420 --> 00:05:34,800
and new inspiration.

65
00:05:35,160 --> 00:05:40,770
So I want you to use what you've learned previously about creating lists.

66
00:05:40,770 --> 00:05:47,100
And within those lists, I want you to create five anchor tags, each of them pointing to a different

67
00:05:47,100 --> 00:05:48,870
website that you like.

68
00:05:49,350 --> 00:05:54,240
And if you've got everything working, then you would end up with a website that looks like the goal.

69
00:05:54,240 --> 00:06:00,040
And when you click on any of these links, then they should take you to the correct website.

70
00:06:00,070 --> 00:06:00,850
Pause the video.

71
00:06:00,850 --> 00:06:06,340
Now, give this challenge a go, and once you're done, come back here and I'll go through the solution

72
00:06:06,340 --> 00:06:07,030
with you.

73
00:06:12,400 --> 00:06:12,880
All right.

74
00:06:12,880 --> 00:06:14,290
So how did that go?

75
00:06:14,500 --> 00:06:18,370
The first thing we wanted to do was to create a ordered list.

76
00:06:18,400 --> 00:06:21,330
We already saw how to do this in a previous lesson.

77
00:06:21,340 --> 00:06:27,730
We create our tags and inside we add our list elements.

78
00:06:27,880 --> 00:06:32,260
Inside the list element is where our anchor tag is going to go.

79
00:06:32,290 --> 00:06:42,220
It's an anchor tag, which is inside a list element, which is then inside a ordered list.

80
00:06:42,520 --> 00:06:46,150
So several layers of nesting that's going on here.

81
00:06:46,720 --> 00:06:53,530
Now, once you've created your anchor tag, then in between the open and closing tags, we add the text

82
00:06:53,530 --> 00:06:54,590
for our link.

83
00:06:54,610 --> 00: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.

84
00:07:01,000 --> 00:07:07,720
And this is a place where you can see all the latest product launches and great websites and start ups

85
00:07:07,720 --> 00:07:09,700
that people are building every day.

86
00:07:09,940 --> 00:07:14,950
The important part comes here when we create the attribute for that anchor tag.

87
00:07:14,960 --> 00:07:23,840
So remember that the attribute for linking a anchor tag is called the href, and we're going to add

88
00:07:23,840 --> 00:07:25,970
it after the equal sign.

89
00:07:26,520 --> 00:07:31,640
As you start typing, you might see code, start suggesting what you're looking for.

90
00:07:31,650 --> 00:07:37,380
So if you pick the ref and hit enter, then it will format everything for you ready for you to enter

91
00:07:37,380 --> 00:07:38,340
the URL.

92
00:07:38,730 --> 00:07:45,690
If you're wondering why there are these quotation marks here, well, that's because it's actually a

93
00:07:45,690 --> 00:07:48,950
piece of text that we're going to add in here.

94
00:07:48,960 --> 00:07:52,230
So this is treated slightly differently in code.

95
00:07:52,230 --> 00:07:59,140
So whenever you have text, normally you will see them enclosed inside a set of double quotes.

96
00:07:59,160 --> 00:08:07,050
This is to differentiate from the reserved words like, you know, I or a or h ref.

97
00:08:07,080 --> 00:08:08,820
These are all special words.

98
00:08:08,820 --> 00:08:13,890
And in order to show that you're not creating anything special, you're just pointing to our URL, which

99
00:08:13,890 --> 00:08:15,210
is just a piece of text.

100
00:08:15,240 --> 00:08:17,670
We have our double quotes around it.

101
00:08:18,420 --> 00: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

102
00:08:26,380 --> 00:08:32,590
go ahead and show preview, then you should see that we've got our list item one.

103
00:08:32,590 --> 00:08:39,580
And when I click on it, it goes to the website that I have linked to.

104
00:08:39,760 --> 00:08:47,410
You can repeat this process and link to all of your five favorite websites and you should end up with

105
00:08:47,410 --> 00:08:50,680
something that looks like this.

106
00:08:50,680 --> 00:08:58,510
And as an extra challenge, I want you to head over to the developer documentation for the ordered list,

107
00:08:58,540 --> 00:09:01,750
which you're using in this current code exercise.

108
00:09:01,750 --> 00:09:03,850
And look at the attributes.

109
00:09:04,000 --> 00:09:12,130
I want you to see whether if you can change one of the attributes, the start attribute, so that your

110
00:09:12,130 --> 00:09:17,290
list, instead of starting from one starts from five.

111
00:09:17,470 --> 00:09:19,300
This is what you're aiming for.

112
00:09:19,390 --> 00:09:23,950
Pause the video, give that a go, and then afterwards we'll go through the solution together.

113
00:09:26,750 --> 00:09:28,940
Let's take a look at the documentation.

114
00:09:28,940 --> 00:09:31,400
We can see that for the ordered list.

115
00:09:31,430 --> 00:09:34,370
One of the attributes is called START.

116
00:09:34,460 --> 00: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

117
00:09:42,680 --> 00:09:43,430
start from.

118
00:09:43,430 --> 00:09:45,020
So that's pretty simple.

119
00:09:45,020 --> 00:09:47,690
But we need to remember where our attributes go.

120
00:09:47,690 --> 00:09:55,250
So they go in the starting tag, which is here, and the name of the attribute is Start, and we can

121
00:09:55,250 --> 00:09:57,140
set it equal to five.

122
00:09:57,170 --> 00:10:02,930
Now once we've done that, if we take a look at our website, you can see the order list now starts

123
00:10:02,930 --> 00:10:07,970
from five and ends at nine because we've changed that attribute.

124
00:10:08,390 --> 00:10:12,680
Hopefully that wasn't too difficult and you managed to get it to work.

125
00:10:12,710 --> 00:10:17,390
Have a quick review of the concepts that are covered in this lesson.

126
00:10:17,390 --> 00:10:21,920
And remember, we're always trying to repeat things that we've learnt before just to make sure that

127
00:10:21,920 --> 00:10:25,830
we reinforce those pieces of knowledge from earlier on.

128
00:10:25,830 --> 00: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

129
00:10:32,220 --> 00:10:33,600
didn't realize before.

130
00:10:33,600 --> 00: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

131
00:10:38,700 --> 00:10:42,840
then head over to the next lesson where we talk about image elements.

132
00:10:43,230 --> 00:10:44,850
For all of that and more.

133
00:10:44,850 --> 00:10:45,450
I'll see you there.