Instructor: Hey guys.
In this lesson we're gonna understand a bit more
about another aspect of HTML, which is their attributes
and understand that we're gonna learn all
about the anchor element
which allows us to create hyperlinks.
This is what an anchor element looks like.
And similar to previous elements,
we've got the opening tag and the closing tag.
But there's something a little bit special
about this one because right now, if you wrote the code
as it is here, this is not an active hyperlink.
What you need is to add an additional attribute.
And the attribute
for an HTML element goes in the opening tag.
It goes into the part just after the name
of the tag and just before the end
of the opening tag where we have the closing angle bracket.
And what an attribute does is it adds additional information
to this HTML element,
such as in this case where this link should link to.
Now the way that we structure an attribute
looks something like this.
So we have the name of the element
and then we have a space and then we have the name
of the attribute and afterwards we have a equal sign.
And after the equal sign,
we have the value of the attribute.
Now you can have as many attributes as you want
and all you have to do is simply separate each one
of them with a space and make sure
that they all go into the opening tag.
Now in the case of our image element, if you take a look
on the Mozilla Developer Network documentation
for the anchor element,
then you can see it has the special attribute of href
and href is the part where we add the URL
that the hyperlink should go to.
Without the attribute, this is what you would see.
It is an anchor element, and you do see the content
in between the tags, but you do not see an active link.
And when you click on it, nothing happens.
Now, as soon as you add that href attribute
and you provide it with, in this case, a target,
so where should this hyperlink go to,
then this link actually gets styled to show you
that this is now an active link
in the familiar blue with the underline.
And at this point, if you click on it,
it is going to go straight
to this URL that we've specified.
In addition to the specific attributes,
so for example in the anchor element documentation,
we saw that it has all
of these specific attributes which are relevant
to this particular element.
Now, we're not gonna be using all of them
and some of them are also deprecated
and no longer in use in HTML5.
But in addition to these specific attributes,
there are also global attributes
that every single HTML element has access to.
And if you look through some of these,
an example is something like draggable, right?
And it basically allows us to set true or false to say
whether if the element may or may not be dragged.
You can apply a global attribute to any given element.
So in this case, we can apply it even to our anchor element.
Again, we have the name of the attribute,
we have the equal sign,
and we have the value of the attribute.
So in this case, the name of the attribute is draggable
and we've set it equal to true.
So once this attribute is set, what happens is you can click
and drag that anchor tag around.
Now, if that attribute wasn't set
then when you try to drag it,
it's just going to highlight the line
and it's not going to allow that behavior.
So we've learned
that there are specific attributes that are reserved
for only certain elements, such as the href
for the anchor tag
and there are global attributes which can be used
on any HTML element.
So now let's try an exercise
and see if you've understood how
to use anchor elements and more specifically,
see if you've understood how the HTML attribute is written
in HTML code.
In this exercise, we're going to create a website
that shows our top five favorite websites.
I've got the H1 already written for you
but what we're aiming for is something like this.
So you have a list here and notice
that this is actually an ordered list
because it goes from one all the way to five, and the fact
that the list is not highlighted in blue should show you
that this is actually created using a list element
and not a part of the anchor tag.
It's not a part of the content.
And the anchor tag only starts here.
I want you to document your top five
all time favorite websites and feel free
to Google or check mine if you wanna see what they do.
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
and new inspiration.
So I want you to use what you've learned previously
about creating lists.
And within those lists, I want you
to create five anchor tags, each of them pointing
to a different website that you like.
And if you've got everything working, then you would end up
with a website that looks like the goal.
And when you click on any of these links,
then they should take you to the correct website.
Pause the video now, give this challenge a go,
and once you're done, come back here
and I'll go through the solution with you.
All right, so how did that go?
The first thing we wanted to do was
to create a ordered list.
We already saw how to do this in a previous lesson.
We create our OL tags, and inside we add our list elements.
Inside the list element is
where our anchor tag is going to go.
It's an anchor tag, which is inside a list element
which is then inside a ordered list.
So several layers of nesting that's going on here.
Now, once you've created your anchor tag,
then in between the open and closing tags,
we add the text for our link.
So in my case, it will be the name of my website
that I'm linking to, which is called Product Hunt.
And this is a place where you can see
all the latest product launches and great websites
and startups that people are building every day.
The important part comes here when we create the attribute
for that anchor tag.
So remember that the attribute
for linking an anchor tag is called the href
and we're going to add it after the equal sign.
As you start typing, you might see VSCode start suggesting
what you're looking for.
So if you pick the href and hit enter,
then it'll format everything for you ready
for you to enter the URL.
If you're wondering
why there are these quotation marks here,
well that's because it's actually a piece
of text that we're going to add in here.
So this is treated slightly differently in code.
So whenever you have text,
normally you will see them enclosed
inside a set of double quotes.
This is to differentiate from the reserved words like
LI or A or href, these are all special words.
And in order to show
that you're not creating anything special,
you're just pointing to our URL,
which is just a piece of text,
we have our double quotes around it.
Inside here I'm going to paste in the URL of Product Hunt.
And now I have myself a link.
And if I go ahead and show preview,
then you should see that we've got our list item one.
And when I click on it, it goes to the website
that I have linked to.
You can repeat this process and link to all
of your five favorite websites and you should end up
with something that looks like this.
And as an extra challenge, I want you to head over
to the developer documentation for the ordered list
which you're using in this current code exercise
and look at the attributes.
I want you to see whether if you can change one
of the attributes, the start attribute, so that your list,
instead of starting from one, starts from five.
This is what you are aiming for.
Pause the video, give that a go.
And then afterwards we'll go through the solution together.
Let's take a look at the documentation.
We can see that for the ordered list,
one of the attributes is called start.
And in the explanation it says all we have
to do is to set this attribute
to a number for it to start from.
So that's pretty simple
but we need to remember where our attributes go.
So they go in the starting tag, which is here, and the name
of the attribute is start and we can set it equal to five.
Now, once we've done that, if we take a look at our website,
you can see the ordered list now starts
from five and ends at nine
because we've changed that attribute.
Hopefully that wasn't too difficult
and you managed to get it to work.
Have a quick review
of the concepts that are covered in this lesson.
And remember, we're always trying to repeat things
that we've learned before just to make sure
that we reinforce those pieces of knowledge from earlier on.
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 didn't realize before.
So if there's something new
in this lesson that you want to write down,
take a quick note of it and then head over
to the next lesson where we talk about image elements.
For all that and more, I'll see you there.