0
1
00:00:00,510 --> 00:00:04,560
Now if we compare our current site against Jon Kleinberg’s,
1

2
00:00:04,710 --> 00:00:12,120
the only major difference that you will see now is that his has a whole bunch of hyperlinks interspersed
2

3
00:00:12,300 --> 00:00:17,460
in the home page whereas ours is completely devoid of any hyperlinks.
3

4
00:00:17,490 --> 00:00:21,210
So if we think back to what HTML stands for.
4

5
00:00:21,210 --> 00:00:27,330
We've talked about the markup language part already but we haven't yet talked about the hypertext part
5

6
00:00:27,420 --> 00:00:28,340
of HTML.
6

7
00:00:28,650 --> 00:00:35,850
So hypertext is basically just a bunch of text documents that can be linked together using these hyperlinks.
7

8
00:00:35,850 --> 00:00:41,100
So when you click on one of them it takes you to a different text document and then you click on the
8

9
00:00:41,100 --> 00:00:48,150
link there and it takes you to another different text document and that's where the HT part of HTML 
9

10
00:00:48,150 --> 00:00:49,310
comes from.
10

11
00:00:49,350 --> 00:00:55,740
And in fact if you're interested there's even a game called The Wiki Game where you have a starting
11

12
00:00:55,740 --> 00:01:03,810
Wikipedia article and a goal Wikipedia article and you have to click through the links on Wikipedia
12

13
00:01:04,020 --> 00:01:07,350
to try and navigate to the goal article.
13

14
00:01:07,350 --> 00:01:11,280
And it's basically an association game that's played using hyperlinks.
14

15
00:01:11,280 --> 00:01:14,050
Now what are these links made of?
15

16
00:01:14,190 --> 00:01:20,790
If you have a look at each and every one of these links, if you right click on it and click Inspect, you
16

17
00:01:20,790 --> 00:01:24,540
know that you can bring up the Google Chrome developer tools.
17

18
00:01:24,540 --> 00:01:32,310
And if we have a look you can see that it's actually pointing towards an "a" tag with a hyperlink reference
18

19
00:01:32,610 --> 00:01:36,060
to the destination that this link is going to take you to.
19

20
00:01:36,060 --> 00:01:39,900
And before the a tag gets closed that's the link text.
20

21
00:01:39,900 --> 00:01:44,310
So, in this case, it's the word "Computer Science" that gets underlined.
21

22
00:01:44,310 --> 00:01:48,070
And when you click on it it takes you to cs.cornell.eu.
22

23
00:01:48,180 --> 00:01:51,860
So let's go ahead and implement this for our web site.
23

24
00:01:52,350 --> 00:01:56,330
So there's many places where maybe you'd want to direct people away.
24

25
00:01:56,670 --> 00:02:04,770
So maybe I can link them to The App Brewery's web site here or I could show them examples of me brewing
25

26
00:02:04,770 --> 00:02:07,410
beer or me riding motorcycles.
26

27
00:02:07,470 --> 00:02:10,030
So let's go ahead and try that in code.
27

28
00:02:10,050 --> 00:02:16,440
So the first place that I want to add a link to is this part where it says The App Brewery.
28

29
00:02:16,530 --> 00:02:22,860
So I'm going to put an a tag or an anchor tag just in front and close the a tag just behind.
29

30
00:02:23,220 --> 00:02:28,770
And if you want to have a look at the structure of the anchor tag then as you remember you can always
30

31
00:02:28,770 --> 00:02:36,300
go to the MDN web docs and you can read all about the anchor element and all of its attributes.
31

32
00:02:36,300 --> 00:02:42,600
Now the main attribute that we're going to be concerned with is the href and this is a URL that
32

33
00:02:42,600 --> 00:02:47,430
the hyperlink is going to point to or the destination of that hyperlink.
33

34
00:02:47,430 --> 00:02:52,110
So in my case the destination is going to be appbrewery.co.
34

35
00:02:53,040 --> 00:03:02,040
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

36
00:03:02,040 --> 00:03:03,750
says The App Brewery.
36

37
00:03:03,840 --> 00:03:08,280
And this is what the auto fill is going to write for me.
37

38
00:03:08,280 --> 00:03:11,070
So let's have a look at the structure in a bit more detail.
38

39
00:03:11,250 --> 00:03:18,390
So, as with the other HTML elements we've seen, the anchor tag has the a as the element name and
39

40
00:03:18,390 --> 00:03:23,200
then the most important attribute that you're gonna find yourself using is the href.
40

41
00:03:23,220 --> 00:03:27,970
And this is set to equal the link destination,
41

42
00:03:28,050 --> 00:03:35,040
so where are you going to take your user when they click on this link. And the anchor tag is not a self
42

43
00:03:35,040 --> 00:03:36,150
closing tag.
43

44
00:03:36,150 --> 00:03:45,210
So it has a closing tag at the end and between the open tag and the closing tag is our link text.
44

45
00:03:45,210 --> 00:03:51,150
So that's the bit of text that's going to be underlined and highlighted in blue so that the user knows
45

46
00:03:51,150 --> 00:03:55,760
that when they click on this word this is going to take them to that link.
46

47
00:03:55,770 --> 00:04:06,240
So in our case our href is going to be this URL and between the open anchor tag and the closing
47

48
00:04:06,300 --> 00:04:09,390
anchor tag we're going to put the link text.
48

49
00:04:09,450 --> 00:04:17,460
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

50
00:04:17,880 --> 00:04:21,810
and put it inside the anchor tag.
50

51
00:04:21,810 --> 00:04:28,970
So now you can see there's actually two sets of HTML elements that enclose this line of text.
51

52
00:04:29,130 --> 00:04:33,970
It is simultaneously going to be strong, i.e. bolded,
52

53
00:04:34,200 --> 00:04:40,080
and it's also going to act as a link to the appbrewery.co web site.
53

54
00:04:40,500 --> 00:04:49,260
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

55
00:04:49,710 --> 00:04:53,870
and it's highlighted in a different color. No way by convention,
55

56
00:04:53,880 --> 00:04:59,890
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

57
00:04:59,970 --> 00:05:03,170
if we have clicked on it in the past.
57

58
00:05:03,210 --> 00:05:08,600
And just to confirm if we click on it it takes us to appbrewery.co.
58

59
00:05:08,790 --> 00:05:09,310
Brilliant.
59

60
00:05:09,330 --> 00:05:11,970
So that's working as expected.
60

61
00:05:11,970 --> 00:05:13,180
Now the next part.
61

62
00:05:13,200 --> 00:05:18,180
Why don't you go ahead and add some links to your hobbies.
62

63
00:05:18,180 --> 00:05:23,880
So you know how they say in interviews you should always prove that you've done what you say you've
63

64
00:05:23,880 --> 00:05:24,390
done?
64

65
00:05:24,390 --> 00:05:31,080
Go ahead and add some links maybe to images on the Internet or to YouTube videos anything that you like
65

66
00:05:31,830 --> 00:05:33,390
and it doesn't have to be in your hobbies.
66

67
00:05:33,390 --> 00:05:38,750
It could be in your books and teaching or education or any part of your web site basically.
67

68
00:05:38,760 --> 00:05:41,940
So go ahead and pause the video and add some more links.
68

69
00:05:45,500 --> 00:05:54,390
So adding links to the order list or the unordered list is exactly the same as what we've done up here.
69

70
00:05:54,530 --> 00:05:59,090
So I'm gonna go ahead and add an anchor tag to beer brewing.
70

71
00:05:59,090 --> 00:06:03,260
Then we're going to hit enter to create my anchor tag.
71

72
00:06:03,260 --> 00:06:09,500
I'm going to put the words beer brewing in between my anchor tags so that that will act as the link
72

73
00:06:09,530 --> 00:06:19,130
text and my href is going to be a YouTube video that I've got where I show people my beer brewing.
73

74
00:06:19,130 --> 00:06:26,570
So let's go ahead and copy that and paste it into here and then I'm going to add another anchor tag
74

75
00:06:26,570 --> 00:06:31,100
here just to fill up the motorcycle part.
75

76
00:06:36,280 --> 00:06:36,600
All right.
76

77
00:06:36,610 --> 00:06:45,820
So now I've added two links one for beer brewing and one for the word motorcycles, both inside my ordered
77

78
00:06:45,820 --> 00:06:46,480
list.
78

79
00:06:46,480 --> 00:06:52,960
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

80
00:06:53,020 --> 00:06:55,260
we've never clicked on it before.
80

81
00:06:55,270 --> 00:07:02,140
So if I hold down the command button on my keyboard or control on Windows and click on each of these
81

82
00:07:02,140 --> 00:07:10,060
links then they'll open up in new tabs and we can have a look at my evidence that I have indeed done
82

83
00:07:10,060 --> 00:07:13,530
some beer brewing or motorcycling.
83

84
00:07:13,600 --> 00:07:20,530
So now that we've seen how to create some anchor tags that point to links on the Internet, what if I wanted
84

85
00:07:20,530 --> 00:07:28,120
to create a separate page for the My Hobbies section? And I wanted to create a link that linked to my own
85

86
00:07:28,120 --> 00:07:29,620
page?
86

87
00:07:29,620 --> 00:07:38,560
So let's head back into Atom, and inside this HTML - Personal Site folder where we've got our 
87

88
00:07:38,590 --> 00:07:39,230
index.html,
88

89
00:07:39,220 --> 00:07:46,060
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

90
00:07:46,090 --> 00:07:54,190
and it's going to be created inside the same folder as index so you can see they’re at the same
90

91
00:07:54,190 --> 00:07:55,870
hierarchical level.
91

92
00:07:55,960 --> 00:08:03,610
Now for hobbies.html I'm first going to add the html boilerplate code and the title is going to be My Hobbies.
92

93
00:08:05,320 --> 00:08:14,110
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

94
00:08:14,110 --> 00:08:16,570
then I'm going to paste it over here.
94

95
00:08:16,570 --> 00:08:23,740
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

96
00:08:23,800 --> 00:08:28,600
it's going to have the link text of My Hobbies 
96

97
00:08:31,350 --> 00:08:34,940
and the href is going to be the file name.
97

98
00:08:34,950 --> 00:08:37,700
So in this case it’ll be hobbies.html.
98

99
00:08:38,310 --> 00:08:45,930
Now if I hit save and I go back to my Web site, hit refresh, that ordered list has disappeared and is
99

100
00:08:45,930 --> 00:08:48,500
now replaced by this hyperlink.
100

101
00:08:48,570 --> 00:08:55,470
And if I click on it it takes me to this brand new page that I've created called My Hobbies.
101

102
00:08:55,470 --> 00:09:02,490
So now you can see how you can really easily start to create multiple pages of your web site.
102

103
00:09:02,520 --> 00:09:11,250
And as long as you've got it inside the same folder or you can specify a path for the browser to get
103

104
00:09:11,250 --> 00:09:19,080
to it then you can start linking up your home page with all of these different satellite pages and you
104

105
00:09:19,080 --> 00:09:23,570
start to build up a web site rather than just a web page.
105

106
00:09:23,580 --> 00:09:31,230
So as a challenge I want you to create another page that is going to contain your contact details.
106

107
00:09:31,290 --> 00:09:32,630
So how do you get in touch.
107

108
00:09:32,670 --> 00:09:38,640
So say if somebody came across your personal site and they wanted to hire you or they wanted to message
108

109
00:09:38,640 --> 00:09:42,940
you. Now it's probably quite cluttering to have it on the home page.
109

110
00:09:42,960 --> 00:09:50,910
So we want to create another link down here that says Contact Me and it's going to link to another page
110

111
00:09:51,000 --> 00:09:52,390
just like My Hobbies.
111

112
00:09:52,470 --> 00:09:58,230
But it's going to contain maybe your address, maybe your email, maybe your telephone, whatever you're comfortable
112

113
00:09:58,230 --> 00:09:59,520
with giving to the Internet.
113

114
00:10:00,030 --> 00:10:03,270
So go ahead, pause the video and give it a go.
114

115
00:10:07,690 --> 00:10:08,050
All right.
115

116
00:10:08,090 --> 00:10:12,090
So it's going to be exactly the same as what we did for my hobbies.
116

117
00:10:12,090 --> 00:10:15,420
So we're going to go to our HTML - Personal Site folder.
117

118
00:10:15,420 --> 00:10:17,090
We're going to right click on it.
118

119
00:10:17,100 --> 00:10:18,620
We're going to create a new file.
119

120
00:10:18,660 --> 00:10:25,010
And this is going to be called contact-me.html.
120

121
00:10:25,020 --> 00:10:29,880
And here we're going to again start with the html boilerplate and the title is going to be
121

122
00:10:29,880 --> 00:10:32,520
Contact Me.
122

123
00:10:32,820 --> 00:10:35,900
And in the body we're going to have an h1.
123

124
00:10:35,970 --> 00:10:46,470
That's My Contact Details and then below that maybe a paragraph that's going to be My Fictional Address
124

125
00:10:48,630 --> 00:10:58,490
and maybe another one that's going to be some fictional number, telephone number, to contact me with.
125

126
00:10:58,590 --> 00:11:07,000
And then it will be myemail@gmail.com. Okay.
126

127
00:11:07,020 --> 00:11:08,340
So that looks pretty good.
127

128
00:11:08,340 --> 00:11:09,880
Let's go ahead and hit save.
128

129
00:11:09,930 --> 00:11:19,050
Go back to index.html and add another anchor tag where we link to this page called contact-me.html
129

130
00:11:19,080 --> 00:11:28,930
and the link text will just be Contact Me and we're going to hit save and refresh.
130

131
00:11:28,930 --> 00:11:32,980
And now we can click on here to this brand new page.
131

132
00:11:33,010 --> 00:11:33,320
All right.
132

133
00:11:33,340 --> 00:11:39,580
So today's lesson was all about the anchor tag and be sure to check out the anchor tag reference on
133

134
00:11:39,610 --> 00:11:40,840
MDN and Web Docs.
134

135
00:11:40,990 --> 00:11:44,770
And there's a whole bunch of other attributes that you can read about.
135

136
00:11:44,950 --> 00:11:50,350
And there's really good examples that can show you some of the other functionality that you can have
136

137
00:11:50,650 --> 00:11:53,040
by simply including the anchor tag.
137

138
00:11:53,080 --> 00:11:55,580
So that's all from me for today.
138

139
00:11:55,630 --> 00:11:57,550
I will see you on the next lesson.