Hey, guys. 1
In this lesson, we're going to understand a bit more about another aspect of HTML, which is their 2
Attributes, and to understand that we're going to learn all about the anchor element, which allows us to 3
create hyperlinks. 4
This is what an anchor element looks like, and similar to previous elements, we've got the opening tag (<a>) 5
and the closing tag (</a>), but there's something a little bit special about this one, because right now if 6
you wrote the code as it is here, this is not an active hyperlink. 7
What you need is to add an additional attribute, and the attribute for an HTML element goes in the 8
opening tag. 9
It goes into the part just after the name of the tag and just before the end of the opening tag where 10
we have the closing angle bracket. 11
And what an attribute does is it adds additional information to this HTML element, such as in this 12
case, where this link should link to. 13
Now, the way that we structure an attribute looks something like this. 14
So we have the name of the element and then we have a space and then we have the name of the attribute. 15
And afterwards, we have an equals sign. 16
And after the equals sign, we have the value of the attribute. 17
Now, you can have as many attributes as you want and all you have to do is simply separate each one of 18
them with a space and make sure that they all go into the opening tag. 19
Now, in the case of our Image Element, if you take a look on the Mozilla Developer Network Documentation 20
for the anchor element, then you can see it has the special attribute of "href," and href is the part 21
where we add the URL that the hyperlink should go to, without the attribute, 22
this is what you would see. 23
It is an anchor element and you do see the content in between the tags, but you do not see an active 24
link, and when you click on it 25
nothing happens. 26
Now, 27
as soon as you add that href attribute and you provide it with, in this case a target, 28
so where should this hyperlink go to, then 29
this link actually gets styled to show you that this is now an active link in the familiar blue with 30
the underline. 31
And at this point, if you click on it, it is going to go straight to this URL that we've specified. 32
In addition to the specific attributes, 33
so for example, in the Anchor Element Documentation, we saw that it has all of these specific attributes 34
which are relevant to this particular element. 35
Now, we're not going to be using all of them and some of them are also deprecated and no longer in use 36
in HTML5. 37
But in addition to these specific attributes, there are also global attributes that every single HTML 38
element has access to. 39
And if you look through some of these, an example is something like draggable, right? 40
And it basically allows us to set true or false to say whether if the element may or may not be dragged, 41
you can apply a global attribute to any given element. 42
So in this case, we can apply it even to our anchor element. 43
Again, we have the name of the attribute, we have the equal sign and we have the value of the attribute. 44
So in this case, the name of the attribute is Draggable, and we've set it equal to true. 45
So once this attribute is set, what happens is you can click and drag that anchor tag around. 46
Now, if that attribute wasn't set, then when you try to drag it, it's just going to highlight the 47
line and it's not going to allow that behavior. 48
So we've learned that there are specific attributes which are reserved for only certain elements, such 49
as the href for the anchor tag, and there are global attributes which can be used on any HTML element. 50
So now let's try an exercise and see if you've understood how to use anchor elements and more specifically, 51
see if you've understood how the HTML attribute is written in HTML code. 52
In this exercise, we're going to create a website that shows our top five favorite websites. 53
I've got the h1 already written for you, but what we're aiming for is something like this. 54
So you have a list here and notice that this is actually an ordered list because it goes from 1 all 55
the way to 5 and the fact that the list is not highlighted. 56
Is in blue should show you that this is actually created using a list element and not a part of the 57
anchor tag. 58
It's not a part of the content. 59
And the anchor tag only starts here. 60
I want you to document your top five all time favorite websites and feel free to Google or check mine 61
if you want to see what they do. 62
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
and new inspiration. 64
So I want you to use what you've learned previously about creating lists, 65
and within those lists, I want you to create five anchor tags, each of them pointing to a different 66
website that you like. 67
And if you've got everything working, then you would end up with a website that looks like the goal. 68
And when you click on any of these links, then they should take you to the correct website. 69
Pause the video 70
now, give this challenge a go, and once you're done, come back here and I'll go through the solution 71
with you. 72
All right. 73
So how did that go? 74
The first thing we wanted to do was to create an ordered list. 75
We already saw how to do this in a previous lesson. 76
We create our ol tags and inside we add our list elements. 77
Inside the list element is where our anchor tag is going to go. 78
It's an anchor tag, which is inside a list element, which is then inside an ordered list. 79
So several layers of nesting that's going on here. 80
Now, once you've created your anchor tag, then in between the open and closing tags, we add the text 81
for our link. 82
So in my case, it will be the name of my website that I'm linking to, which is called Product Hunt. 83
And this is a place where you can see all the latest product launches and great websites and start ups 84
that people are building every day. 85
The important part comes here when we create the attribute for that anchor tag. 86
So remember that the attribute for linking an anchor tag is called the href, and we're going to add 87
it after the equal sign. 88
As you start typing, you might see VS Code start suggesting what you're looking for. 89
So if you pick the href and hit enter, then it will format everything for you ready for you to enter 90
the URL. 91
If you're wondering why there are these quotation marks here, well, that's because it's actually a 92
piece of text that we're going to add in here. 93
So this is treated slightly differently in code. 94
So whenever you have text, normally you will see them enclosed inside a set of double quotes. 95
This is to differentiate from the reserved words like, you know, Ii, or a, or href, 96
these are all special words. 97
And in order to show that you're not creating anything special, you're just pointing to a URL, which 98
is just a piece of text, 99
we have our double quotes around it. 100
Inside here, I'm going to paste in the URL of Product Hunt, and now I have myself a link and if I 101
go ahead and Show Preview, then you should see that we've got our list-item 1, 102
and when I click on it, it goes to the website that I have linked to. 103
You can repeat this process and link to all of your five favorite websites and you should end up with 104
something that looks like this. 105
And as an extra challenge, I want you to head over to the Developer Documentation for the <ol>, 106
which you're using in this current code exercise, 107
and look at the attributes. 108
I want you to see whether if you can change one of the attributes, the "start" attribute, so that your 109
list, instead of starting from 1, starts from 5. 110
This is what you're aiming for. 111
Pause the video, give that a go, and then afterwards we'll go through the solution together. 112
Let's take a look at the documentation. 113
We can see that for the ordered list, 114
one of the attributes is called "start," 115
and in the explanation, it says, all we have to do is to set this attribute to a number for it to 116
start from. 117
So that's pretty simple. 118
But we need to remember where our attributes go. 119
So they go in the starting tag, which is here, and the name of the attribute is start, and we can 120
set it equal to 5. 121
Now once we've done that, if we take a look at our website, you can see the ordered list now starts 122
from 5 and ends at 9 because we've changed that attribute. 123
Hopefully that wasn't too difficult and you managed to get it to work. 124
Have a quick review of the concepts that are covered in this lesson 125
and remember, we're always trying to repeat things that we've learnt before just to make sure that 126
we reinforce those pieces of knowledge from earlier on. 127
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
didn't realize before. 129
So if there's something new in this lesson that you want to write down, take a quick note of it and 130
then head over to the next lesson where we talk about Image Elements. 131
For all of that and more, 132
I'll see you there.