All language subtitles for 018 HTML Links and Anchor Tags.en_US

Now, if we compare our current site against Jon Kleinbergs,

the only major difference that you will see now is that his has a whole bunch

of hyperlinks interspersed in the homepage

whereas ours is completely devoid of any hyperlinks.

If we think back to what HTML stands for,

we've talked about the markup language part already

but we haven't yet talked about the hypertext part of HTML.

So hypertext is basically just a bunch of text documents that can be linked

together using these hyperlinks. So when you click on one of them,

it takes you to a different text document,

and then you click on the link there and it takes you to another different text

document. And that's where the HT part of HTML comes from.

And in fact, if you're interested, there is even a game called the Wiki game

where

you have a starting Wikipedia article and a goal Wikipedia article

and you have to click through the links on Wikipedia to try and navigate to the

goal article.

And it's basically an association game that's played using hyperlinks. Now,

what are these links made of?

If you have a look at each and every one of these links,

if you right click on it and click inspect, you know

that you can bring up the Google Chrome developer tools. And if we have a look,

you can see that it's actually pointing towards a

a-tag with a hyperlink reference to the destination that this link is going to

take you to. And before the a tag gets closed, that's the link text

so in this case it's the word computer science that gets underlined.

And when you click on it, it takes you to cs.cornell.edu.

Let's go ahead and implement this for our website.

So there's many places where maybe you'd want to direct people away.

So maybe I can link them to the App Brewery's website here,

or I could show them examples of me brewing beer or me riding motorcycles.

Let's go ahead and try that in code.

So the first place that I want to add a link to is this part where it says the

App Brewery. So I'm going to put an

a tag or an anchor tag just in front and close the

a tag just behind.

And if you want to have a look at the structure of the anchor tag,

then as you remember, you can always go to the MDN web docs

and you can read all about the anchor element and all of its attributes.

Now, the main attribute that we're going to be concerned with is the href.

And this is a URL that the hyperlink is going to point to,

or the destination of that hyperlink. In my case,

the destination is going to be appbrewery.co.

And if I just copy that,

then I can head over here and add an

a tag or an anchor tag just before where it says the App Brewery and this is

what the autofill is going to write for me.

So let's have a look at the structure in a bit more detail. As with the other

HTML elements

we've seen, the anchor tag has the a as the element name,

and then the most important attribute that you're going to find yourself using

is the href

and this is set to equal the link destination.

So where are you going to take your user when they click on this link?

And the anchor tag is not a self-closing tag.

So it has a closing tag at the end and between the open tag and the closing tag

is our link text.

So that's the bit of text that's going to be underlined and highlighted in blue

so that the user knows that when they click on this word,

this is going to take them to that link. So in our case,

our href is going there to be this URL and between the open anchor tag and

the closing anchor tag, we're going to put the link text,

so the bit of text that's going to be underlined. And in my case,

I'm just going to cut this phrase here and put it inside the anchor tag.

So now you can see there's actually two sets of HTML elements that enclose this

line of text. It is simultaneously going to be strong,

i.e. bolded.

And it's also going to act as a link to the appbrewery.co website.

So if we hit save and let's go back over here and hit refresh,

you can see that this has now been underlined and it's highlighted in a

different color. Now by convention,

the highlight is going to be blue if its a link that we've never clicked on and

it's going to be purple if we have clicked on it in the past.

And just to confirm, if we click on it,

it takes us to appbrewery.co. Brilliant.

So that is working as expected. Now,

why don't you go ahead and add some links to your hobbies?

So you know how they say in interviews,

you should always prove that you've done what you say you've done.

Go ahead and add some links

maybe to images on the internet or to YouTube videos,

anything that you like. Um, and it doesn't have to be in your hobbies.

It could be in your books and teaching or education or any part of your

website basically. So go ahead and the video and add some more links.

So adding links to the ordered list

or the unordered list is exactly the same as what we've done up here.

So I'm going to go ahead and add an anchor tag to beer brewing.

Then I'm going to hit enter to create my anchor tag.

I'm going to put the words beer brewing in between my anchor tag so that

that will act as the link text.

And my href is going to be a YouTube video that I've got where I show people my

beer brewing.

So let's go ahead and copy that and paste it into here.

And then I'm going to add another anchor tag here just to fill up the motorcycle

part.

All right.

All right. So now I've added two links,

one for beer brewing and one for the word motorcycles,

both inside my ordered list.

So if we hit save and we hit refresh then you'll see

we've now got two links and they are blue because we've never clicked on it

before.

So if I hold down the command button on my keyboard or control on Windows and

click on each of these links,

then they'll open up in new tabs and we can have a look at my evidence that I

have indeed done some beer brewing or motorcycling.

Now that we've seen how to create some anchor tags

that point to links on the internet,

what if I wanted to create a separate page for the

my hobbies section and I wanted to create a link that linked to my own page?

Let's head back into Atom and inside this HTML personal site folder where we've

got our index.html,

so this file, I'm going to right-click and I'm going to click new file.

And the new file is going to be called hobbies.html

and it's going to be created inside the same folder as index.

So you can see they're the same hierarchical level. Now for hobbies.html

I'm first gonna add the HTML boilerplate code and the title is going to be My

hobbies. In the body

I'm just going to copy all of this and I'm going to hit command + X or control + X

to cut, and then I'm going to paste it over here.

So now if I hit save for hobbies and I go back to the index.html and I create

a new anchor tag and it's going to have the link text of my hobbies.

And the href is going to be the file name.

So in this case it will be hobbies.html. Now,

if I hit save and I go back to my website,

hit refresh that ordered list has disappeared and is now replaced by this

hyperlink. And if I click on it,

it takes me to this brand new page that I've created called my hobbies.

So now you can see how

you can really easily start to create multiple pages of your website.

And as long as you've got it inside the same folder

or you can specify a path for the browser to get to it,

then you can start linking up your homepage with all of these different

satellite pages

and you start to build up a website rather than just a web page. As a challenge

I want you to create another page that is going to contain your contact details.

So how do you get in touch?

So say if somebody came across your personal site and they wanted to hire you or

they wanted to message you, now

it's probably quite cluttering to have it on the homepage.

So we want to create another link down here that says, contact me

and it's going to link to another page, just like my hobbies,

but it's going to contain, maybe your address, maybe your email,

maybe your telephone,

whatever you're comfortable with giving to the internet. Go ahead,

pause the video and give it a go.

All right. So it's going to be exactly the same as what we did for my hobbies.

So we're going to go to our HTML personal site folder,

we're gonna right-click on it,

we're going to create a new file and this is going to be called contact-me.

html. And here we're going to, again,

start with the HTML boilerplate and the title is going to be contact me. And in

the body, we're going to have an h1 that's, uh,

my contact details.

And then below that, maybe a paragraph that's going to be my fictional address

and maybe another one that's going to be some fictional number,

telephone number to contact me with. Um,

and then it will be myemail@gmail.com.

OK. So that looks pretty good. Let's go ahead and hit save,

go back to index.html and add another anchor tag where we'd link to this page

called contact-me.html.

And the link text will just be contact me and we're going to hit save and

refresh. And now we can click on here to this brand new page.

All right.

So today's lesson was all about the anchor tag and be sure to check out the

anchor tag reference on MDN web docs.

And there's a whole bunch of other attributes that you can read about.

And there's really good examples that can show you some of the other

functionality that you can have by simply including the anchor tag.

So that's all from me for today. Um, I'll see you on the next lesson.