Now if we compare our current site against Jon Kleinberg’s, 1
the only major difference that you will see now is that his has a whole bunch of hyperlinks interspersed 2
in the home page whereas ours is completely devoid of any hyperlinks. 3
So if we think back to what HTML stands for. 4
We've talked about the markup language part already but we haven't yet talked about the hypertext part 5
of HTML. 6
So hypertext is basically just a bunch of text documents that can be linked together using these hyperlinks. 7
So when you click on one of them it takes you to a different text document and then you click on the 8
link there and it takes you to another different text document and that's where the HT part of HTML 9
comes from. 10
And in fact if you're interested there's even a game called The Wiki Game where you have a starting 11
Wikipedia article and a goal Wikipedia article and you have to click through the links on Wikipedia 12
to try and navigate to the goal article. 13
And it's basically an association game that's played using hyperlinks. 14
Now what are these links made of? 15
If you have a look at each and every one of these links, if you right click on it and click Inspect, you 16
know that you can bring up the Google Chrome developer tools. 17
And if we have a look you can see that it's actually pointing towards an "a" tag with a hyperlink reference 18
to the destination that this link is going to take you to. 19
And before the a tag gets closed that's the link text. 20
So, in this case, it's the word "Computer Science" that gets underlined. 21
And when you click on it it takes you to cs.cornell.eu. 22
So let's go ahead and implement this for our web site. 23
So there's many places where maybe you'd want to direct people away. 24
So maybe I can link them to The App Brewery's web site here or I could show them examples of me brewing 25
beer or me riding motorcycles. 26
So let's go ahead and try that in code. 27
So the first place that I want to add a link to is this part where it says The App Brewery. 28
So I'm going to put an a tag or an anchor tag just in front and close the a tag just behind. 29
And if you want to have a look at the structure of the anchor tag then as you remember you can always 30
go to the MDN web docs and you can read all about the anchor element and all of its attributes. 31
Now the main attribute that we're going to be concerned with is the href and this is a URL that 32
the hyperlink is going to point to or the destination of that hyperlink. 33
So in my case the destination is going to be appbrewery.co. 34
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 35
says The App Brewery. 36
And this is what the auto fill is going to write for me. 37
So let's have a look at the structure in a bit more detail. 38
So, as with the other HTML elements we've seen, the anchor tag has the a as the element name and 39
then the most important attribute that you're gonna find yourself using is the href. 40
And this is set to equal the link destination, 41
so where are you going to take your user when they click on this link. And the anchor tag is not a self 42
closing tag. 43
So it has a closing tag at the end and between the open tag and the closing tag is our link text. 44
So that's the bit of text that's going to be underlined and highlighted in blue so that the user knows 45
that when they click on this word this is going to take them to that link. 46
So in our case our href is going to be this URL and between the open anchor tag and the closing 47
anchor tag we're going to put the link text. 48
So the bit of text that's going to be underlined and in my case I'm just going to cut this phrase here 49
and put it inside the anchor tag. 50
So now you can see there's actually two sets of HTML elements that enclose this line of text. 51
It is simultaneously going to be strong, i.e. bolded, 52
and it's also going to act as a link to the appbrewery.co web site. 53
So if we hit save and let's go back over here and hit refresh you can see that this has now been underlined 54
and it's highlighted in a different color. No way by convention, 55
the highlight is going to be blue if it's a link that we've never clicked on and it's going to be purple 56
if we have clicked on it in the past. 57
And just to confirm if we click on it it takes us to appbrewery.co. 58
Brilliant. 59
So that's working as expected. 60
Now the next part. 61
Why don't you go ahead and add some links to your hobbies. 62
So you know how they say in interviews you should always prove that you've done what you say you've 63
done? 64
Go ahead and add some links maybe to images on the Internet or to YouTube videos anything that you like 65
and it doesn't have to be in your hobbies. 66
It could be in your books and teaching or education or any part of your web site basically. 67
So go ahead and pause the video and add some more links. 68
So adding links to the order list or the unordered list is exactly the same as what we've done up here. 69
So I'm gonna go ahead and add an anchor tag to beer brewing. 70
Then we're going to hit enter to create my anchor tag. 71
I'm going to put the words beer brewing in between my anchor tags so that that will act as the link 72
text and my href is going to be a YouTube video that I've got where I show people my beer brewing. 73
So let's go ahead and copy that and paste it into here and then I'm going to add another anchor tag 74
here just to fill up the motorcycle part. 75
All right. 76
So now I've added two links one for beer brewing and one for the word motorcycles, both inside my ordered 77
list. 78
So if we hit save and we hit refresh then you'll see we've now got two links and they're blue because 79
we've never clicked on it before. 80
So if I hold down the command button on my keyboard or control on Windows and click on each of these 81
links then they'll open up in new tabs and we can have a look at my evidence that I have indeed done 82
some beer brewing or motorcycling. 83
So now that we've seen how to create some anchor tags that point to links on the Internet, what if I wanted 84
to create a separate page for the My Hobbies section? And I wanted to create a link that linked to my own 85
page? 86
So let's head back into Atom, and inside this HTML - Personal Site folder where we've got our 87
index.html, 88
so this file, I'm going to right click and click New File and the new file is going to be called hobbies.html 89
and it's going to be created inside the same folder as index so you can see they’re at the same 90
hierarchical level. 91
Now for hobbies.html I'm first going to add the html boilerplate code and the title is going to be My Hobbies. 92
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 93
then I'm going to paste it over here. 94
So now if I hit save for hobbies and I go back to the index.html and I create a new anchor tag and 95
it's going to have the link text of My Hobbies 96
and the href is going to be the file name. 97
So in this case it’ll be hobbies.html. 98
Now if I hit save and I go back to my Web site, hit refresh, that ordered list has disappeared and is 99
now replaced by this hyperlink. 100
And if I click on it it takes me to this brand new page that I've created called My Hobbies. 101
So now you can see how you can really easily start to create multiple pages of your web site. 102
And as long as you've got it inside the same folder or you can specify a path for the browser to get 103
to it then you can start linking up your home page with all of these different satellite pages and you 104
start to build up a web site rather than just a web page. 105
So as a challenge I want you to create another page that is going to contain your contact details. 106
So how do you get in touch. 107
So say if somebody came across your personal site and they wanted to hire you or they wanted to message 108
you. Now it's probably quite cluttering to have it on the home page. 109
So we want to create another link down here that says Contact Me and it's going to link to another page 110
just like My Hobbies. 111
But it's going to contain maybe your address, maybe your email, maybe your telephone, whatever you're comfortable 112
with giving to the Internet. 113
So go ahead, pause the video and give it a go. 114
All right. 115
So it's going to be exactly the same as what we did for my hobbies. 116
So we're going to go to our HTML - Personal Site folder. 117
We're going to right click on it. 118
We're going to create a new file. 119
And this is going to be called contact-me.html. 120
And here we're going to again start with the html boilerplate and the title is going to be 121
Contact Me. 122
And in the body we're going to have an h1. 123
That's My Contact Details and then below that maybe a paragraph that's going to be My Fictional Address 124
and maybe another one that's going to be some fictional number, telephone number, to contact me with. 125
And then it will be myemail@gmail.com. Okay. 126
So that looks pretty good. 127
Let's go ahead and hit save. 128
Go back to index.html and add another anchor tag where we link to this page called contact-me.html 129
and the link text will just be Contact Me and we're going to hit save and refresh. 130
And now we can click on here to this brand new page. 131
All right. 132
So today's lesson was all about the anchor tag and be sure to check out the anchor tag reference on 133
MDN and Web Docs. 134
And there's a whole bunch of other attributes that you can read about. 135
And there's really good examples that can show you some of the other functionality that you can have 136
by simply including the anchor tag. 137
So that's all from me for today. 138
I will see you on the next lesson.