1
00:00:00,506 --> 00:00:09,986
[ Silence ]

2
00:00:10,486 --> 00:00:11,326
>> Welcome back.

3
00:00:11,386 --> 00:00:14,476
This is CS50 and
the start of week 8.

4
00:00:14,476 --> 00:00:17,736
So this animation is all moment
ago is actually not a movie.

5
00:00:17,766 --> 00:00:19,486
It's not actually a webpage.

6
00:00:19,486 --> 00:00:21,536
And this webpage is
implemented entirely

7
00:00:21,536 --> 00:00:23,056
in a language called JavaScript

8
00:00:23,386 --> 00:00:26,316
and that language called
JavaScript supports now,

9
00:00:26,316 --> 00:00:31,226
where increasingly technology
called WebGL or Graphics Library

10
00:00:31,226 --> 00:00:33,176
with which you can actually
implement fancy things

11
00:00:33,176 --> 00:00:37,036
like this just to
either in Ts or scare.

12
00:00:37,036 --> 00:00:39,196
We actually look at the
source code for the page

13
00:00:39,196 --> 00:00:41,226
that you just saw playing
some music and sound.

14
00:00:41,476 --> 00:00:43,816
This is an example of a
language called JavaScrip

15
00:00:43,816 --> 00:00:45,256
that we dive into next week.

16
00:00:45,496 --> 00:00:48,016
So technically it's
actually quite similar to see

17
00:00:48,016 --> 00:00:50,416
but you'll see that this
person put a good deal of work

18
00:00:50,546 --> 00:00:52,666
into this particular animation.

19
00:00:52,666 --> 00:00:56,886
So it did take some
degree of effort.

20
00:00:58,586 --> 00:01:03,396
Anyhow, today is ultimately
about pulling back the layers

21
00:01:03,396 --> 00:01:07,376
of the internet in the web and
transitioning us from C much

22
00:01:07,376 --> 00:01:10,786
to your pleasure perhaps
and transitioning us to PHP,

23
00:01:10,786 --> 00:01:14,956
and HTML, CSS, JavaScript,
and SQL ingredients

24
00:01:14,956 --> 00:01:17,896
with which we will dive into
the web programming portion

25
00:01:17,896 --> 00:01:20,576
of the course and a lot of
the more familiar technologies

26
00:01:20,896 --> 00:01:24,256
that we take perhaps on a
daily basis for granted.

27
00:01:24,476 --> 00:01:28,096
So no, that in just a week or
two's time you will be able

28
00:01:28,096 --> 00:01:32,906
to put together yourself
websites like this which I found

29
00:01:32,966 --> 00:01:36,076
in the internet archives way
back machine this morning.

30
00:01:36,076 --> 00:01:40,316
If you go back 10 or so
years, I lost quite miserably.

31
00:01:40,316 --> 00:01:42,716
But I thought I would
take a screen shot

32
00:01:42,716 --> 00:01:45,146
of this 'cause this is also a
wonderful example of how not

33
00:01:45,146 --> 00:01:50,656
to make a website besides--
it's clear what the website was

34
00:01:50,656 --> 00:01:53,216
for perhaps but the
silly little icons

35
00:01:53,216 --> 00:01:55,016
where I thought it would
be cool to have this guy

36
00:01:55,016 --> 00:01:57,706
in a hood saying "Come in
enter," "Click to Enter."

37
00:01:57,946 --> 00:02:00,166
"Click to Enter" is not a
cool feature of a website.

38
00:02:00,376 --> 00:02:01,196
Or you probably seen this

39
00:02:01,196 --> 00:02:03,926
on many websites particularly
those implemented fairly

40
00:02:03,926 --> 00:02:06,686
and immediately with a
technology called flash and,

41
00:02:07,196 --> 00:02:10,576
well, this was me learning
how to program in--

42
00:02:10,926 --> 00:02:14,836
for the web way back then
and didn't get much better.

43
00:02:14,836 --> 00:02:16,176
Then fast forward to senior year

44
00:02:16,176 --> 00:02:17,696
and this is apparently
what my website look

45
00:02:17,696 --> 00:02:19,696
like 'cause I had
a Muppets calendar

46
00:02:19,956 --> 00:02:21,676
and I apparently thought
it was cool at the time.

47
00:02:21,676 --> 00:02:24,996
So I scan this end and then
had my own server running an

48
00:02:24,996 --> 00:02:27,586
operating system called Linux
although an older version

49
00:02:27,586 --> 00:02:28,736
than what we're using today

50
00:02:28,736 --> 00:02:32,326
and then I put my professional
portfolio of web work and such

51
00:02:32,376 --> 00:02:33,836
up here on this website.

52
00:02:33,916 --> 00:02:37,416
So I think that's
the worst of it.

53
00:02:37,416 --> 00:02:40,306
Though I'm thinking, I actually
have all the campaign materials

54
00:02:40,306 --> 00:02:42,776
including the posters and
the platform so I'm thinking

55
00:02:42,776 --> 00:02:46,726
of running again this year if
that is allowed so we shall see.

56
00:02:47,516 --> 00:02:50,836
So the internet is something
we certainly take for granted.

57
00:02:50,836 --> 00:02:53,146
I thought we take a quick
look though with a teaser.

58
00:02:53,146 --> 00:02:57,456
It's about 50 or so seconds long
as to how the internet works

59
00:02:57,456 --> 00:03:00,456
and then we'll start as promise
to peel back these layers today

60
00:03:00,456 --> 00:03:02,686
and moving forward this week.

61
00:03:02,686 --> 00:03:05,116
I give you warriors of the net.

62
00:03:06,516 --> 00:03:08,766
[ Video Clip ]

63
00:03:09,266 --> 00:03:11,516
[ Music ]

64
00:03:12,016 --> 00:03:12,083
[ Background Music ]

65
00:03:12,083 --> 00:03:15,256
>> He came with a message.

66
00:03:17,056 --> 00:03:21,976
With a protocol all his own.

67
00:03:22,516 --> 00:03:34,516
[ Music ]

68
00:03:35,016 --> 00:03:35,083
[ Background Music ]

69
00:03:35,306 --> 00:03:39,606
>> He came to a world of cruel
firewalls, uncaring routers,

70
00:03:40,026 --> 00:03:42,626
and danger is far
worse than death.

71
00:03:43,086 --> 00:03:46,586
He's fast, he's strong,
he's TCP/IP

72
00:03:46,846 --> 00:03:51,716
and he's got your address.

73
00:03:54,086 --> 00:03:56,156
Warriors of the Net.

74
00:03:57,076 --> 00:03:59,106
>> So that is how
the internet works

75
00:03:59,256 --> 00:04:05,326
and [laughter] we will dive in
to more details over the course

76
00:04:05,326 --> 00:04:06,906
of today and this week.

77
00:04:06,906 --> 00:04:08,466
So a couple of quick
announcement.

78
00:04:08,506 --> 00:04:11,176
So one, you probably found
this and 36 other photos

79
00:04:11,176 --> 00:04:13,396
and now it's time to actually
find this up on campus

80
00:04:13,396 --> 00:04:15,806
and photograph, yourself
or someone with your--

81
00:04:15,806 --> 00:04:16,956
from your section with them.

82
00:04:17,146 --> 00:04:19,296
The deadline for the
scavenger hunt to get

83
00:04:19,296 --> 00:04:21,226
out as many photographs
of you and they--

84
00:04:21,816 --> 00:04:25,596
you and them is Monday at noon
just before next week's lecture.

85
00:04:25,906 --> 00:04:27,136
So feel free to partake.

86
00:04:27,136 --> 00:04:29,526
And the winning section will
get some fabulous price,

87
00:04:30,086 --> 00:04:30,796
the big award.

88
00:04:30,796 --> 00:04:33,426
So this is the [inaudible]
that's historically been

89
00:04:33,426 --> 00:04:35,006
associated with problem set 6.

90
00:04:35,006 --> 00:04:36,916
Relates first, this is
completely optional.

91
00:04:37,146 --> 00:04:40,326
It's for those who actually want
to participate in a competition

92
00:04:40,326 --> 00:04:43,266
of source with your
code fairly publically.

93
00:04:43,566 --> 00:04:45,266
So if you go to the
course's homepage

94
00:04:45,266 --> 00:04:48,306
as of today you will see
that a top of the list

95
00:04:48,596 --> 00:04:50,966
or frankly whole bunch of stuff
who took the course last year.

96
00:04:51,236 --> 00:04:53,836
This is not to say that
most of you are behind now

97
00:04:54,106 --> 00:04:58,106
but rather this is mostly stuff,
those some of your own classmate

98
00:04:58,106 --> 00:05:00,446
who have challenged this
so-called big board.

99
00:05:00,446 --> 00:05:03,626
So problem set 6 recall involves
implementing the fastest

100
00:05:03,626 --> 00:05:06,836
spell-checker possible and
you need to deploy tools

101
00:05:06,836 --> 00:05:08,966
like hash tables or
tries or link list.

102
00:05:08,966 --> 00:05:10,676
There're some other
fancy data structures.

103
00:05:10,906 --> 00:05:13,426
And once you get your code
working you can ran a command

104
00:05:13,426 --> 00:05:15,506
called "check 50"
inside the appliance

105
00:05:15,686 --> 00:05:17,926
which will upload your
codes to one of our servers.

106
00:05:17,926 --> 00:05:19,636
It will run in the benchmark.

107
00:05:19,996 --> 00:05:22,096
The benchmark is something
means to analyze it in terms

108
00:05:22,096 --> 00:05:24,666
of its memory use
and its CPU time.

109
00:05:24,966 --> 00:05:28,096
And so which you have here are
the top 20 people who since

110
00:05:28,096 --> 00:05:31,126
about 4 a.m. last night have
challenge the big board.

111
00:05:31,376 --> 00:05:32,956
I think, my apologize.

112
00:05:32,956 --> 00:05:35,366
Nathan is about to get
disqualified because the staff

113
00:05:35,366 --> 00:05:37,896
and I are all quite
suspicious that this is not

114
00:05:37,896 --> 00:05:41,746
in fact a legitimate entry
0.150 seconds is order

115
00:05:41,746 --> 00:05:47,366
of magnitude faster than the
next most-- the rapid one, Neil.

116
00:05:47,456 --> 00:05:50,746
So either Nathaniel is about
to be promoted to staff

117
00:05:51,316 --> 00:05:53,546
or we're going to
delete his entry there.

118
00:05:53,546 --> 00:05:59,136
So there are ways to see at
this competition but we will--

119
00:05:59,136 --> 00:06:00,406
we are good at detecting such.

120
00:06:00,406 --> 00:06:01,246
So what are you seeing here

121
00:06:01,246 --> 00:06:03,246
on the left-hand column
you see how much RAM each

122
00:06:03,246 --> 00:06:05,906
of these folks' programs used.

123
00:06:06,186 --> 00:06:08,716
In my defense I was actually
number one last night

124
00:06:08,716 --> 00:06:13,766
around 4 a.m. but I have slept
since then using 38 megabytes

125
00:06:13,766 --> 00:06:15,676
of RAM and then if you scroll
to the right you'll see

126
00:06:15,676 --> 00:06:17,336
in each column how many
seconds where spent

127
00:06:17,336 --> 00:06:20,306
in the load function, the
check function size on load

128
00:06:20,526 --> 00:06:22,886
and so forth and if you read the
fine print you'll see exactly

129
00:06:22,886 --> 00:06:24,936
how we are benchmarking
or codes.

130
00:06:24,936 --> 00:06:27,416
If you'd like to do that
anytime before the deadline

131
00:06:27,416 --> 00:06:29,056
by all means feel
free to partake.

132
00:06:29,286 --> 00:06:31,596
But certainly don't feel that
any bubbles have been burst.

133
00:06:31,596 --> 00:06:32,756
If you don't quite
get to the point

134
00:06:33,046 --> 00:06:35,036
of challenging that,
it is just for fun.

135
00:06:35,036 --> 00:06:38,086
So the final project
expectedly posted later today

136
00:06:38,086 --> 00:06:40,226
on the course's website
as the PDF.

137
00:06:40,226 --> 00:06:44,016
It will be very much
as predicted in week 0

138
00:06:44,016 --> 00:06:45,766
of the course where this
will be an opportunity

139
00:06:45,766 --> 00:06:47,026
on a few weeks time for you

140
00:06:47,026 --> 00:06:49,726
to implement most anything
you want, working either solo,

141
00:06:49,726 --> 00:06:52,546
on group of two, or
three with classmates.

142
00:06:52,606 --> 00:06:56,096
I will say that historically
about 80 plus percent

143
00:06:56,096 --> 00:06:58,296
of the class tackles
web-based projects

144
00:06:58,296 --> 00:07:01,336
so even though 80 percent
of the class has no idea how

145
00:07:01,336 --> 00:07:05,666
to make web-based projects
at this point in time

146
00:07:05,986 --> 00:07:07,096
that is a lack of feature.

147
00:07:07,096 --> 00:07:09,756
We shall fix this week,
next week, and beyond.

148
00:07:09,756 --> 00:07:12,516
So know that as you start to
think about your final project,

149
00:07:12,756 --> 00:07:16,676
we have a tradition of seminars
where the TFs and CAs and staff

150
00:07:16,676 --> 00:07:20,216
from across campus offer
a slate of onetime classes

151
00:07:20,216 --> 00:07:24,126
that are totally optional
that give you opportunities

152
00:07:24,126 --> 00:07:27,936
to learn stuff related to
but not core to the course.

153
00:07:27,936 --> 00:07:31,936
So this year already we have
a running roster of seminars

154
00:07:31,936 --> 00:07:33,746
that will be scheduled,
filmed and presented

155
00:07:33,746 --> 00:07:35,626
over the next month on Java,

156
00:07:35,626 --> 00:07:39,156
on educational software
using Emacs, IOS, JQuery,

157
00:07:39,156 --> 00:07:40,866
Ruby on Rails, the
whole bunch of terms

158
00:07:40,866 --> 00:07:42,676
with which you might not be
familiar and that's fine,

159
00:07:42,996 --> 00:07:45,636
just scroll on down and you'll
read descriptions of these

160
00:07:45,636 --> 00:07:48,396
and they're meant to be
really inspiration or tools

161
00:07:48,396 --> 00:07:50,596
to bootstrap you
towards making projects

162
00:07:50,916 --> 00:07:53,466
that might use technologies
and languages

163
00:07:53,466 --> 00:07:55,546
that we might know
otherwise cover in the course

164
00:07:55,776 --> 00:07:58,646
and if you're a little
eager to get going realize

165
00:07:58,646 --> 00:08:00,156
that we have three prior year--

166
00:08:00,156 --> 00:08:01,856
four prior years
worth of seminars.

167
00:08:01,856 --> 00:08:04,286
All video taped, all with
slides, some with code there,

168
00:08:04,626 --> 00:08:07,046
so it's quite the
treasure chest of stuff

169
00:08:07,356 --> 00:08:09,226
that you can learn on your own.

170
00:08:09,466 --> 00:08:12,446
And also what we've done
is put together this site,

171
00:08:12,446 --> 00:08:17,146
projects@cs50.net which is meant
to be a repository from ideas,

172
00:08:17,376 --> 00:08:20,186
from the staff and people
across campus, faculty

173
00:08:20,186 --> 00:08:21,566
and full-time staff alike.

174
00:08:21,876 --> 00:08:24,516
I get an e-mail like
every other day from folks

175
00:08:24,516 --> 00:08:25,636
across campus saying, "Hi!

176
00:08:25,636 --> 00:08:27,226
Do you know some
student who might want

177
00:08:27,266 --> 00:08:30,006
to help us make this
particular--

178
00:08:30,126 --> 00:08:31,866
solve this particular problem?"

179
00:08:31,866 --> 00:08:35,166
So you'll see here are recent
postings from students and stuff

180
00:08:35,166 --> 00:08:38,276
and faculty with ideas that
they are hoping to either work

181
00:08:38,276 --> 00:08:40,496
with you on toward the end
of the semester and maybe

182
00:08:40,496 --> 00:08:43,626
into J term beyond or
to have you implement

183
00:08:43,626 --> 00:08:45,336
and save the day for them.

184
00:08:45,336 --> 00:08:48,056
So you will be ask and just
a couple of week's time

185
00:08:48,056 --> 00:08:51,366
to pre-propose a project
which will be an opportunity

186
00:08:51,366 --> 00:08:53,616
with the very short form to
just tell your TF what you're

187
00:08:53,616 --> 00:08:56,626
thinking about so that he
or she can kind of gauge us

188
00:08:56,666 --> 00:08:58,886
to the viability of it
given the time allowed

189
00:08:59,156 --> 00:09:01,436
and just how complex or
how simple it might be.

190
00:09:01,636 --> 00:09:03,076
Then you have a formal proposal.

191
00:09:03,076 --> 00:09:06,526
And once we A-okay your
proposal, you are free to dive

192
00:09:06,526 --> 00:09:09,076
into your project, but more
on that later today on the PDF

193
00:09:09,546 --> 00:09:11,236
on the course's website.

194
00:09:11,236 --> 00:09:16,346
And lastly, those of you who are
either eager this coming year

195
00:09:16,646 --> 00:09:20,006
or this coming summer
or even beyond

196
00:09:20,006 --> 00:09:23,036
in pursuing tech internships,
generally, there are plenty

197
00:09:23,036 --> 00:09:26,186
of companies that will hire
someone after taking CS50

198
00:09:26,186 --> 00:09:28,476
or particularly after
taking CS50

199
00:09:28,476 --> 00:09:29,876
and something else
in the spring.

200
00:09:29,876 --> 00:09:31,816
So generally having
two solids CS courses

201
00:09:31,816 --> 00:09:34,516
under your belt is enough to
get you into the door of a lot

202
00:09:34,516 --> 00:09:37,286
of popular tech companies,
Google, Microsoft, and alike.

203
00:09:37,556 --> 00:09:39,616
Well, it's our own, Matt

204
00:09:39,786 --> 00:09:42,946
and Melissa are gonna be holding
this Friday is really crush

205
00:09:42,986 --> 00:09:46,526
course on how to prepare for
this kinds of interviews in tech

206
00:09:46,526 --> 00:09:49,056
or even if you're a freshmen and
not really thinking about this

207
00:09:49,056 --> 00:09:51,336
yet but you kinda wanna know
what this world might be like.

208
00:09:51,626 --> 00:09:55,266
Historically OCS tends to
cater a little less toward the

209
00:09:55,266 --> 00:09:56,926
technology companies
so we thought we tried

210
00:09:56,926 --> 00:09:59,486
to bring this in-house and
do our best to equip you

211
00:09:59,736 --> 00:10:01,866
with some fun puzzles
and to give you a sense

212
00:10:01,866 --> 00:10:04,146
of what is it mean to
have a technical interview

213
00:10:04,146 --> 00:10:05,726
about programming
in computer science.

214
00:10:06,176 --> 00:10:07,646
>> I will say from
personal experience

215
00:10:08,226 --> 00:10:11,716
when being interviewed
by Microsoft on campus

216
00:10:11,786 --> 00:10:15,976
and the recruiter says, "Oh so,
what's your favorite language?"

217
00:10:16,156 --> 00:10:19,866
Do not try to show off and say,
"I really assembly language."

218
00:10:20,156 --> 00:10:22,646
Because if my own
experience is any indication,

219
00:10:22,866 --> 00:10:25,366
that recruiter will then proceed
to ask you a question about one

220
00:10:25,366 --> 00:10:27,856
of the most difficult
languages in which the program

221
00:10:28,166 --> 00:10:30,186
and you have to then
prove to him or her

222
00:10:30,186 --> 00:10:31,876
that you actually know
what's you're talking about.

223
00:10:31,876 --> 00:10:35,116
So suffice it to say I'm-- no
one told me this, 10 years ago

224
00:10:35,156 --> 00:10:36,706
when I had my Microsoft
interview.

225
00:10:37,036 --> 00:10:40,266
So go with something with which
you a bit more comfortable.

226
00:10:40,266 --> 00:10:44,106
Assembly language is something
that you will see in CS61

227
00:10:44,386 --> 00:10:46,066
if you'd like to go that route.

228
00:10:46,876 --> 00:10:50,826
Alright, so internet,
what is it?

229
00:10:51,736 --> 00:10:54,056
We have hundreds of people
taking this class all whom use

230
00:10:54,056 --> 00:10:56,176
the internet, some of whom are
using the internet right now,

231
00:10:56,176 --> 00:10:59,456
so what is it?

232
00:10:59,726 --> 00:11:01,206
In layman's terms?

233
00:11:01,206 --> 00:11:01,466
[ Inaudible Remark ]

234
00:11:01,466 --> 00:11:01,726
[ Laughter ]

235
00:11:01,726 --> 00:11:05,496
>> A series of tubes.

236
00:11:05,496 --> 00:11:07,096
You've been well educated
by the daily show.

237
00:11:07,676 --> 00:11:10,946
So yes, it's a series of tubes.

238
00:11:10,946 --> 00:11:12,106
Google that and you will--

239
00:11:12,306 --> 00:11:13,956
well, Google it now and
will lose half the attention

240
00:11:13,956 --> 00:11:15,656
of the class that's fine.

241
00:11:16,276 --> 00:11:19,866
So it's a series of
tubes, metaphorically,

242
00:11:19,866 --> 00:11:21,626
but in real terms
the internet is what?

243
00:11:21,626 --> 00:11:24,936
It's some kind of infrastructure
that connects hundreds,

244
00:11:24,986 --> 00:11:27,616
thousands, millions of
computers together in the world.

245
00:11:27,616 --> 00:11:29,446
So it's some kind of
physical infrastructure

246
00:11:29,666 --> 00:11:31,896
that in its simplest form
is computer and computer

247
00:11:32,086 --> 00:11:34,366
with some kind of connection in
between them, maybe it's a wire,

248
00:11:34,366 --> 00:11:36,366
maybe it's wireless,
maybe it's satellite.

249
00:11:36,616 --> 00:11:39,856
But it's this mesh as we kind
of saw from that teaser thriller

250
00:11:40,086 --> 00:11:42,486
of interconnections
among computers.

251
00:11:42,666 --> 00:11:45,636
So the internet is some
physical infrastructure,

252
00:11:45,636 --> 00:11:47,646
what then is the World Wide Web?

253
00:11:47,946 --> 00:11:53,936
It's kind of easy to conflate
the two, but what is the web?

254
00:11:53,936 --> 00:11:55,476
Well, how do you access the web?

255
00:11:55,476 --> 00:11:58,376
Obviously, with the web browser
and let's push a little harder.

256
00:11:58,376 --> 00:12:00,586
When you use the web browser
you usually type in an address

257
00:12:00,826 --> 00:12:02,876
and even know these
days most of us aren't--

258
00:12:03,156 --> 00:12:06,196
are lazy enough that we don't
bother typing this prefix,

259
00:12:06,526 --> 00:12:10,576
anytime you go to a webpage,
hidden there is http://

260
00:12:10,576 --> 00:12:12,876
but that's changing
if you have an iPhone

261
00:12:12,876 --> 00:12:15,236
or if you have a mobile device
that's hiding these prefixes

262
00:12:15,486 --> 00:12:18,086
but that conjures up
something more technical

263
00:12:18,116 --> 00:12:22,736
and HTTP is a protocol,
Hyper Text Transfer Protocol.

264
00:12:22,956 --> 00:12:26,096
And it's the language that a web
server and a web browser speak

265
00:12:26,426 --> 00:12:28,126
when communicating
on the internet.

266
00:12:28,296 --> 00:12:29,376
So what does all this mean?

267
00:12:29,376 --> 00:12:31,186
Well, the web is just
a service, alright.

268
00:12:31,216 --> 00:12:33,716
Email is a service, Instant
Messaging is a service.

269
00:12:33,716 --> 00:12:36,666
A Skype is a service
that used the internet

270
00:12:36,666 --> 00:12:40,126
which again is this physical
infrastructure to actually make

271
00:12:40,126 --> 00:12:41,706
that infrastructure useful

272
00:12:41,706 --> 00:12:44,096
or you can send emails
using one protocol

273
00:12:44,096 --> 00:12:46,876
and you can access webpages
using another and that's

274
00:12:46,906 --> 00:12:48,476
because computers
on the internet,

275
00:12:48,676 --> 00:12:49,986
clients and servers alike.

276
00:12:50,156 --> 00:12:52,406
All speak these things
called protocol.

277
00:12:52,406 --> 00:12:54,156
So first, some easy jargon.

278
00:12:54,156 --> 00:12:56,916
So client is just like a
laptop, it's a desktop.

279
00:12:56,916 --> 00:12:58,136
It's something that's
not a server.

280
00:12:58,136 --> 00:13:00,316
A server by contrast
is something that lives

281
00:13:00,316 --> 00:13:03,236
on the internet it's almost
always listening for connections

282
00:13:03,236 --> 00:13:06,076
and request and much
like a waiter in a--

283
00:13:06,336 --> 00:13:09,046
or server in a restaurant
that server response

284
00:13:09,046 --> 00:13:10,276
to request from clients.

285
00:13:10,836 --> 00:13:14,566
Alright, so when client
requests something from server

286
00:13:14,786 --> 00:13:17,356
and server response to client,

287
00:13:17,776 --> 00:13:20,186
how they exchange
those informations?

288
00:13:20,236 --> 00:13:22,366
That information is
called the protocol.

289
00:13:22,366 --> 00:13:24,806
So for instance, what's a
normal of human protocol?

290
00:13:24,806 --> 00:13:26,896
We'll find meet someone for the
first time I might say, "Hello.

291
00:13:27,216 --> 00:13:28,076
I am David.

292
00:13:28,076 --> 00:13:28,936
And what do you do?"

293
00:13:29,406 --> 00:13:31,026
>> I'm a student.

294
00:13:31,026 --> 00:13:31,093
[ Laughter ]

295
00:13:31,093 --> 00:13:33,066
>> I'm sorry, you want
to-- you extend your hands.

296
00:13:33,326 --> 00:13:33,476
>> Oh, yeah.

297
00:13:33,476 --> 00:13:35,286
>> Yeah. But you are
indeed a student as well.

298
00:13:35,636 --> 00:13:38,696
So right. So in this-- the real
world we have this protocols,

299
00:13:38,696 --> 00:13:41,446
maybe silly protocols
whereby if I extend my hand

300
00:13:41,446 --> 00:13:42,526
and say "Hi, how are you?"

301
00:13:42,526 --> 00:13:44,806
Typically the other person on
the other end will extend his

302
00:13:44,806 --> 00:13:48,336
or her hand and completes
the protocol exchange

303
00:13:48,336 --> 00:13:51,336
and that's all we're talking
about when we use the web.

304
00:13:51,336 --> 00:13:52,586
So what is this really mean?

305
00:13:52,886 --> 00:13:59,376
Well, if we actually type in
something like dubdub.google.com

306
00:13:59,376 --> 00:14:02,406
into a browser, on a laptop,
on a client well, well,

307
00:14:02,406 --> 00:14:03,386
what actually happens?

308
00:14:03,386 --> 00:14:06,396
Well, at the very highest level,
my laptop contacts Google.

309
00:14:06,656 --> 00:14:08,886
Google responds and I
see a big search box

310
00:14:08,886 --> 00:14:10,516
and then I can repeat
this transaction

311
00:14:10,516 --> 00:14:12,996
and actually provide input
this time into the text field.

312
00:14:13,186 --> 00:14:15,696
But what my computer is
really saying is something

313
00:14:15,696 --> 00:14:16,476
pretty simple.

314
00:14:16,476 --> 00:14:20,186
My computer, my browser is
essentially sending a very short

315
00:14:20,186 --> 00:14:22,396
message saying get me slash,

316
00:14:22,556 --> 00:14:25,436
where slash generally denotes
the route of a hard drive

317
00:14:25,436 --> 00:14:28,526
or in this case the route of a
web server, the default page,

318
00:14:28,756 --> 00:14:30,976
and then I just have to
mention in my message

319
00:14:30,976 --> 00:14:33,716
to the server what
language I want to speak.

320
00:14:33,906 --> 00:14:37,026
So this is literally
what is sent

321
00:14:37,476 --> 00:14:39,966
to a server from my browser.

322
00:14:39,966 --> 00:14:42,696
And I obviously the human don't
have to know or don't have

323
00:14:42,696 --> 00:14:44,886
to do any of that because
that's what the browser does.

324
00:14:44,886 --> 00:14:48,036
It converts the more
human friendly google.com

325
00:14:48,256 --> 00:14:49,506
into a message like this.

326
00:14:49,916 --> 00:14:51,376
What does it mean
to send a message?

327
00:14:51,376 --> 00:14:55,486
Well, will see this too with Mr.
TCP/IP in the video in a while

328
00:14:55,826 --> 00:14:58,236
but you can think of
my computer as sort

329
00:14:58,236 --> 00:15:01,056
of preparing a little
virtual envelope inside

330
00:15:01,056 --> 00:15:03,356
of which is putting a
virtual slip of paper written

331
00:15:03,356 --> 00:15:05,076
on with is a message like this.

332
00:15:05,076 --> 00:15:08,346
And then on this virtual
envelop my computer has

333
00:15:08,346 --> 00:15:11,756
to put some addresses, the "to
address" and the "from address."

334
00:15:12,336 --> 00:15:14,126
And even if you're not
quite sure what they are,

335
00:15:14,126 --> 00:15:16,506
you can probably guess to
what address am I referring

336
00:15:16,506 --> 00:15:20,046
when I talk about the
to and the from there.

337
00:15:20,256 --> 00:15:21,946
All of our computers
have one of these things.

338
00:15:22,676 --> 00:15:23,946
So it's an IP address.

339
00:15:23,946 --> 00:15:25,866
IP is just Internet
Protocol address.

340
00:15:26,116 --> 00:15:28,736
An internet protocol is
again just a set of standards

341
00:15:28,736 --> 00:15:32,076
that humans agreed on a bunch
of years ago and they decided

342
00:15:32,076 --> 00:15:35,146
that according to the
IP protocol, everyone,

343
00:15:35,306 --> 00:15:38,016
every computer on the internet
is gonna have unique address.

344
00:15:38,016 --> 00:15:46,736
And that address is going to be
of this form W.X.Y.Z where each

345
00:15:46,736 --> 00:15:49,316
of these letters is
actually a number from 0

346
00:15:49,316 --> 00:15:51,486
to 255 with some exception.

347
00:15:51,886 --> 00:15:52,366
But in a nutshell,

348
00:15:52,366 --> 00:15:54,236
it's something dot something
dot something dot something dot

349
00:15:54,236 --> 00:15:56,516
something and each of those
numbers is fairly small

350
00:15:56,726 --> 00:15:57,706
and quick check.

351
00:15:57,706 --> 00:16:01,646
If each of these letters
is between 0 and 255,

352
00:16:01,646 --> 00:16:04,136
how many bits are being used
for each of these place holders?

353
00:16:05,136 --> 00:16:07,596
So it's just 8 right
'cause 2 to the 8 is 256.

354
00:16:07,596 --> 00:16:10,346
So when IP address
is 32 bits in total

355
00:16:10,346 --> 00:16:12,396
which means how many
possible IP address

356
00:16:12,786 --> 00:16:16,576
or computers are
there on the internet?

357
00:16:16,576 --> 00:16:18,246
So roughly 32 billion, maximum.

358
00:16:18,246 --> 00:16:20,546
You don't need negative number
so we can go all the way

359
00:16:20,546 --> 00:16:22,736
up to 4-- sorry all the
way up to 4 billion.

360
00:16:22,736 --> 00:16:26,676
2 to the 32 and that might sound
like a lot given the number

361
00:16:26,676 --> 00:16:27,686
of humans in the world,

362
00:16:27,686 --> 00:16:30,276
but frankly just a few
years ago even the number

363
00:16:30,276 --> 00:16:34,256
of IP address is being used on
campus suddenly sky rocketed.

364
00:16:34,506 --> 00:16:36,336
What happened over
the past few years

365
00:16:36,336 --> 00:16:39,066
that has consumed even more
of Harvard's IP address

366
00:16:39,066 --> 00:16:40,446
than traditionally was the case?

367
00:16:41,656 --> 00:16:42,806
Yeah, we all have
smart phones, right.

368
00:16:42,806 --> 00:16:44,316
Every time you walk
into this room

369
00:16:44,316 --> 00:16:45,946
if you can figured your phone

370
00:16:45,946 --> 00:16:48,446
for either the Harvard
University SSID

371
00:16:48,476 --> 00:16:50,526
or the CS50 SSID,
you walk into a room

372
00:16:50,526 --> 00:16:52,366
and bam your device
has requested

373
00:16:52,366 --> 00:16:54,036
from Harvard an IP address.

374
00:16:54,166 --> 00:16:55,976
So even right now
Harvard itself is--

375
00:16:55,976 --> 00:16:59,026
has a shortage or
sort of IP addresses

376
00:16:59,026 --> 00:17:00,716
which is solvable technology.

377
00:17:00,956 --> 00:17:03,486
But the world a long story
short is transitioning away

378
00:17:03,486 --> 00:17:06,586
from these things,
version 4 of IP.

379
00:17:07,136 --> 00:17:08,556
So it's gonna be called IPv6.

380
00:17:09,126 --> 00:17:10,966
And IPv6, just to
paint the picture,

381
00:17:11,196 --> 00:17:14,996
is gonna use not 32 bits
but 128 which is huge.

382
00:17:14,996 --> 00:17:17,856
We're probably not gonna run out
of IP addresses in our lifetime

383
00:17:17,856 --> 00:17:19,996
if we all adapt this
particular standard.

384
00:17:20,336 --> 00:17:21,266
So what goes on then?

385
00:17:21,456 --> 00:17:24,196
So on the browser, I create
the sort of virtual envelope.

386
00:17:24,196 --> 00:17:27,406
I write on a piece of
paper that message get/,

387
00:17:27,796 --> 00:17:30,446
and using this version put
in it inside the envelope,

388
00:17:30,446 --> 00:17:32,616
on the front of the envelope,
I write the "to" address

389
00:17:32,726 --> 00:17:34,786
which is the IP address
of Google.

390
00:17:34,986 --> 00:17:36,306
And then in the top
left-hand corner

391
00:17:36,306 --> 00:17:37,906
of this envelope
I write my address

392
00:17:37,906 --> 00:17:40,566
which is whatever my
laptop's IP address is.

393
00:17:40,846 --> 00:17:42,406
Well, just to make
this more concrete,

394
00:17:42,696 --> 00:17:44,676
if you have a Mac you might
have seen this before,

395
00:17:44,676 --> 00:17:46,486
you can go up to
system preferences.

396
00:17:47,026 --> 00:17:51,276
You can go to network and then
you can see exactly what your IP

397
00:17:51,276 --> 00:17:52,686
address is at this moment.

398
00:17:52,736 --> 00:17:55,366
And as an aside Harvard
owns-- no you can't.

399
00:17:55,596 --> 00:17:56,396
You can only see me.

400
00:17:56,886 --> 00:17:57,166
Thank you.

401
00:17:58,856 --> 00:18:02,446
So you can see on a Mac
that this is your IP address

402
00:18:02,446 --> 00:18:05,206
if you go ahead and open
up your system preferences

403
00:18:05,206 --> 00:18:06,176
and click Network.

404
00:18:06,176 --> 00:18:10,476
So Harvard has given me an
address of this form 140.247

405
00:18:10,476 --> 00:18:14,116
as an aside, most Harvard
IP address start with that,

406
00:18:14,146 --> 00:18:16,096
so you can identify them
as belonging to Harvard.

407
00:18:16,136 --> 00:18:18,546
But Harvard owns others and then
there's some other stuff called

408
00:18:18,546 --> 00:18:22,126
subnet mask and router and
DNS only touch upon some

409
00:18:22,126 --> 00:18:25,926
of these things but for more
take CS143, a networking class.

410
00:18:26,626 --> 00:18:32,006
So each of our computers has an
IP address but I don't know CN--

411
00:18:32,246 --> 00:18:34,346
or google.com's IP
address, right.

412
00:18:34,346 --> 00:18:36,236
All I, the human user know is

413
00:18:36,236 --> 00:18:38,736
that the website is
called google.com

414
00:18:38,736 --> 00:18:41,756
or more properly www.google.com.

415
00:18:42,006 --> 00:18:44,196
So how does is-- how
do I figure this out?

416
00:18:44,196 --> 00:18:46,186
How does my laptop
figure this out?

417
00:18:46,256 --> 00:18:48,416
Well, what's the keyword here?

418
00:18:48,416 --> 00:18:49,616
What's the spoiler?

419
00:18:50,206 --> 00:18:54,696
So DNS, we actually saw
this acronym a moment ago.

420
00:18:54,766 --> 00:18:57,676
So DNS is something also
that might have seen overtime

421
00:18:57,676 --> 00:18:59,376
at least somewhere on your
computer, but it's stands

422
00:18:59,376 --> 00:19:02,036
for Domain Name System
and all these refers

423
00:19:02,036 --> 00:19:04,446
to is a standard set of servers

424
00:19:04,446 --> 00:19:07,486
across the internet whose
whole purpose in life is

425
00:19:07,486 --> 00:19:11,616
to convert domain names like
google.com into IP address

426
00:19:11,616 --> 00:19:14,846
and vice-versa and the
advantage here is that I

427
00:19:14,846 --> 00:19:16,706
and even my own personal
computer don't have

428
00:19:16,736 --> 00:19:19,166
to know what google.com's
IP address is

429
00:19:19,166 --> 00:19:21,326
because we can just ask
one of this servers.

430
00:19:21,326 --> 00:19:22,276
What server do we ask?

431
00:19:22,506 --> 00:19:23,896
Well again, when you
boot up your computer

432
00:19:23,896 --> 00:19:26,816
on campus Harvard gives
you not just an IP address

433
00:19:26,816 --> 00:19:29,656
but it also tells you
what DNS servers to use.

434
00:19:29,656 --> 00:19:31,636
Or if you're at home
Verizon on Comcast

435
00:19:31,686 --> 00:19:34,896
or whoever would tell you
the same kind of information.

436
00:19:35,186 --> 00:19:38,816
So now I go ahead and
I tell my computer--

437
00:19:38,816 --> 00:19:40,916
or my browser, ask
the operating system.

438
00:19:40,916 --> 00:19:44,466
Hey, please ask the local
DNS server what's the IP is

439
00:19:44,596 --> 00:19:45,506
for google.com.

440
00:19:45,506 --> 00:19:49,076
Hopefully my operating
system knows the answer

441
00:19:49,116 --> 00:19:50,686
because it talks
to a DNS server.

442
00:19:50,726 --> 00:19:52,486
That DNS server finally
responds.

443
00:19:53,046 --> 00:19:56,236
And so now I can write it on
the "to" field of this envelope.

444
00:19:56,236 --> 00:19:58,586
And I-- it's pretty easy for
me and my browser to figure

445
00:19:58,586 --> 00:20:00,986
out what my own IP
address is just like I did

446
00:20:00,986 --> 00:20:03,616
as a human a moment ago, so I
can write that on "from" address

447
00:20:04,066 --> 00:20:07,356
and then I can hand
it off to "whom."

448
00:20:08,046 --> 00:20:11,286
>> Once I finished addressing
this envelope filling it

449
00:20:11,286 --> 00:20:13,416
with this request, I
have to get it to Google

450
00:20:13,716 --> 00:20:17,006
but how does it get there?

451
00:20:17,216 --> 00:20:18,396
What's maybe the keyword here,

452
00:20:18,396 --> 00:20:20,256
even if you're not quite
sure how the story goes?

453
00:20:20,796 --> 00:20:20,936
Sorry?

454
00:20:20,936 --> 00:20:21,936
[ Inaudible Answer ]

455
00:20:21,936 --> 00:20:27,266
>> ISP. Okay, so ISP, Internet
Service Provider is typically

456
00:20:27,266 --> 00:20:28,406
involved, but they're involved

457
00:20:28,406 --> 00:20:31,676
because they have themselves
a certain type of server,

458
00:20:31,676 --> 00:20:35,076
a certain type of computer,
generally called a--

459
00:20:35,076 --> 00:20:38,246
yeah, router, so a router.

460
00:20:38,406 --> 00:20:41,366
So a router is also maybe a term
you've at least heard, right,

461
00:20:41,436 --> 00:20:43,656
Cisco and other companies
make lots of these things.

462
00:20:43,656 --> 00:20:45,136
The name kinda spoils
what it does.

463
00:20:45,136 --> 00:20:46,016
It routes stuff.

464
00:20:46,016 --> 00:20:47,236
Well, what is it route?

465
00:20:47,236 --> 00:20:49,916
It routes things like
these virtual envelopes.

466
00:20:49,916 --> 00:20:52,166
And let me start calling it a
little more something technical.

467
00:20:52,346 --> 00:20:53,496
Instead of virtual envelope,

468
00:20:53,496 --> 00:20:54,966
we'll generally call
it a "packet."

469
00:20:55,316 --> 00:20:57,346
So a packet of information
is something like,

470
00:20:57,346 --> 00:20:58,806
we've been describing
metaphorically here

471
00:20:58,806 --> 00:20:59,486
as an envelope.

472
00:20:59,796 --> 00:21:04,366
So once your computer has
this on-- this packet ready,

473
00:21:04,366 --> 00:21:06,356
it needs to hand
it off to someone.

474
00:21:06,556 --> 00:21:08,656
And in fact, we kind of
glimpsed this a moment ago,

475
00:21:08,656 --> 00:21:10,506
at least on a MAC, and
Windows, and Linux,

476
00:21:10,506 --> 00:21:12,366
have identical features.

477
00:21:12,566 --> 00:21:14,026
If I zoom in here, notice

478
00:21:14,026 --> 00:21:16,826
that my computer indeed
knows about a router.

479
00:21:16,826 --> 00:21:20,186
Its address also
starts with 140.247.

480
00:21:20,186 --> 00:21:21,596
So that means it
belongs to Harvard

481
00:21:21,826 --> 00:21:25,126
and so all my computer has
to do via its ethernet cable

482
00:21:25,326 --> 00:21:30,216
or via some WiFi connection is
actually temporarily readdress

483
00:21:30,216 --> 00:21:32,346
this envelope not to
google.com but to say--

484
00:21:32,346 --> 00:21:37,836
actually send it
to 140.247118.1,

485
00:21:38,286 --> 00:21:40,836
and so I still have to mention
somewhere on the envelope

486
00:21:40,866 --> 00:21:43,996
that the ultimate destination
is google.com and its IP address

487
00:21:44,266 --> 00:21:47,466
but for the first hop, so to
speak, for the first router,

488
00:21:47,466 --> 00:21:50,496
I'm gonna say, let me hand it
actually to this guy instead.

489
00:21:50,986 --> 00:21:52,306
Now, what happens next?

490
00:21:52,306 --> 00:21:55,416
Odds are Harvard's router
doesn't know we're all possible

491
00:21:55,416 --> 00:21:56,946
web servers are in
the internet, right?

492
00:21:56,946 --> 00:21:59,326
They might know Google, but
there's some tiny websites

493
00:21:59,326 --> 00:22:01,196
that they might not
know about in advance.

494
00:22:01,516 --> 00:22:04,716
So what does Harvard's router
likely do upon receiving some

495
00:22:04,716 --> 00:22:06,006
packet from little old me?

496
00:22:06,606 --> 00:22:10,956
So DNS actually doesn't need
to come into play anymore,

497
00:22:10,956 --> 00:22:12,126
'cause at this point
in the story,

498
00:22:12,206 --> 00:22:14,926
so it's not a bad thought,
but we're already talking only

499
00:22:14,926 --> 00:22:16,446
in terms of IP addresses.

500
00:22:16,446 --> 00:22:18,636
We don't need to work DNS
into the picture again.

501
00:22:20,756 --> 00:22:22,966
So what would you do if I hand
you a piece of information

502
00:22:22,966 --> 00:22:24,046
and say, give this to Matt?

503
00:22:24,436 --> 00:22:29,466
What would you do if you
don't know who Matt is?

504
00:22:29,676 --> 00:22:31,336
Right, maybe hand this the
person next to you, right?

505
00:22:31,336 --> 00:22:32,286
Let them deal with it.

506
00:22:32,286 --> 00:22:34,536
And then if he or she
doesn't know who Matt, well,

507
00:22:34,536 --> 00:22:36,956
maybe they'll just pass it along
and they'll just pass it along.

508
00:22:37,146 --> 00:22:40,286
Now thankfully on the internet,
it's not necessarily the case

509
00:22:40,286 --> 00:22:43,496
that every router knows
exactly where Matt is,

510
00:22:43,496 --> 00:22:45,036
or where google.com is,

511
00:22:45,296 --> 00:22:47,826
but because these
addresses are number-based,

512
00:22:47,826 --> 00:22:50,976
that means that very efficiently
these computers can have the

513
00:22:50,976 --> 00:22:52,856
equivalence of like databases

514
00:22:52,856 --> 00:22:56,586
or fancy Excel spreadsheets
wherein one column is a list

515
00:22:56,586 --> 00:22:58,446
of IP addresses that
it knows about

516
00:22:58,446 --> 00:23:00,316
and in the other
column is a direction,

517
00:23:00,446 --> 00:23:01,746
a router as that picture

518
00:23:01,746 --> 00:23:04,746
of a meshed network suggest
actually has a connection

519
00:23:04,746 --> 00:23:06,946
usually not just to one
other router but maybe

520
00:23:06,946 --> 00:23:08,846
to two or three or four.

521
00:23:08,966 --> 00:23:10,356
So upon receiving a packet,

522
00:23:10,356 --> 00:23:13,476
a router can literally route
information left or right,

523
00:23:13,476 --> 00:23:14,626
or forward, or back, up, down,

524
00:23:14,626 --> 00:23:17,686
whatever direction the wires
are actually going in and thanks

525
00:23:17,686 --> 00:23:20,266
to these routing table
inside of its memory

526
00:23:20,576 --> 00:23:23,916
which again couple columns IPE
on one column, and direction

527
00:23:23,916 --> 00:23:26,596
in the other, well the router
can decide I don't really know

528
00:23:26,596 --> 00:23:29,396
where Matt is but in know
Matt lives on the East Coast

529
00:23:29,656 --> 00:23:33,076
so let me send this packet to
a router that's a little closer

530
00:23:33,076 --> 00:23:35,736
to the East Coast, and then
it can make a similar decision

531
00:23:35,736 --> 00:23:36,666
and again and again.

532
00:23:36,946 --> 00:23:39,406
And so generally, this
takes maybe 10 hops,

533
00:23:39,646 --> 00:23:41,776
maybe 30 hops maximally.

534
00:23:41,996 --> 00:23:44,086
But the internet is designed
to be pretty efficient.

535
00:23:44,086 --> 00:23:47,226
So if a packet is going around
and around more than 30 times

536
00:23:47,226 --> 00:23:50,276
to different routers, usually
it gets killed, it gets dropped

537
00:23:50,446 --> 00:23:52,396
and then I, the browser,
have to figure out how

538
00:23:52,396 --> 00:23:54,516
to get it there more
efficiently.

539
00:23:54,866 --> 00:23:56,026
So this is all very abstract.

540
00:23:56,026 --> 00:23:58,206
But we can actually make
this a bit more concrete.

541
00:23:58,206 --> 00:24:00,186
I'm gonna go ahead and
open up the appliance here

542
00:24:00,636 --> 00:24:03,176
and what I've done in advance
is I've actually connected

543
00:24:03,536 --> 00:24:05,676
to the Harvard Computer
Society's server.

544
00:24:05,676 --> 00:24:08,406
A lot of Harvard's network
is firewalled in the sense

545
00:24:08,446 --> 00:24:09,866
that you can't do
certain things.

546
00:24:10,176 --> 00:24:12,506
But if I actually connect
to this particular system,

547
00:24:12,716 --> 00:24:15,386
I can do more than
that so HCS just refers

548
00:24:15,386 --> 00:24:17,056
to that server and
my account on it.

549
00:24:17,056 --> 00:24:18,186
I'm gonna go ahead and do this.

550
00:24:18,406 --> 00:24:22,546
I'm going to re-log in since
I did that too long ago,

551
00:24:23,796 --> 00:24:26,326
and I'm going to
go ahead and run--

552
00:24:27,636 --> 00:24:30,456
I'm gonna go ahead
and run traceroute

553
00:24:31,076 --> 00:24:34,286
to let's say
dubdub.Stanford.edu, right?

554
00:24:34,286 --> 00:24:36,826
I know that Stanford's
out on Palo Alto

555
00:24:36,826 --> 00:24:39,136
but I'm not quite sure
exactly how to get it there

556
00:24:39,356 --> 00:24:41,856
but hopefully my computer
does if I go and send an email

557
00:24:41,856 --> 00:24:43,576
to some friend who's
at Stanford,

558
00:24:43,736 --> 00:24:45,026
hopefully my computer can

559
00:24:45,026 --> 00:24:46,836
in fact trace the route
from here to there.

560
00:24:46,836 --> 00:24:49,826
So I'm gonna go ahead and hit
Enter, and what we see flying

561
00:24:49,826 --> 00:24:52,656
by is a whole bunch of
stuff all of a sudden.

562
00:24:52,996 --> 00:24:55,626
It looks like 15
lines-- 16-- 17 lines.

563
00:24:55,856 --> 00:24:58,156
So it actually looks like if
we fast forward to the end

564
00:24:58,156 --> 00:25:02,046
of the story that there
are 17 hops between me

565
00:25:02,046 --> 00:25:04,026
and Stanford University
at this moment in time

566
00:25:04,026 --> 00:25:06,566
or more specifically between
the Harvard Computer Society's

567
00:25:06,566 --> 00:25:09,236
server which is also
on campus and Stanford.

568
00:25:09,316 --> 00:25:11,256
Why? Well, in step 17,

569
00:25:11,596 --> 00:25:17,746
dubdub.l-lb.stanford.edu is
apparently the name of one

570
00:25:17,746 --> 00:25:20,316
of Stanford's web
servers, LB actually stands

571
00:25:20,316 --> 00:25:22,786
for Load Balancer, so it's
some fancier device there.

572
00:25:23,076 --> 00:25:26,226
But that server has
parenthetically an IP address,

573
00:25:26,226 --> 00:25:30,476
it does not start with 140247
'cause that belongs to Harvard,

574
00:25:30,476 --> 00:25:32,366
this apparently belongs
to Stanford.

575
00:25:32,626 --> 00:25:34,096
And then on the right-hand
side here,

576
00:25:34,096 --> 00:25:38,006
what do you think these numbers
mean, three sets of numbers?

577
00:25:38,006 --> 00:25:38,526
[ Inaudible Remark ]

578
00:25:38,526 --> 00:25:40,126
>> What's that?

579
00:25:40,126 --> 00:25:41,616
[ Inaudible Remark ]

580
00:25:41,616 --> 00:25:42,186
>> Yeah, the time.

581
00:25:42,186 --> 00:25:44,926
So how long did it take
for my data, for my packet,

582
00:25:44,926 --> 00:25:47,466
for my email, for my instant
message, whatever it is,

583
00:25:47,466 --> 00:25:50,106
I'm trying to do at this
moment in time on the internet,

584
00:25:50,386 --> 00:25:53,006
it took only 89 milliseconds
to travel

585
00:25:53,006 --> 00:25:54,046
from here and Cambridge, Mass.

586
00:25:54,556 --> 00:25:56,426
to Palo Alto, California, right.

587
00:25:56,566 --> 00:25:59,336
And we take this for granted,
but if you kinda pause and think

588
00:25:59,336 --> 00:26:01,156
about that, that's
kinda mind-blowing.

589
00:26:01,156 --> 00:26:02,856
You can only imagine
how many hours it takes

590
00:26:02,856 --> 00:26:05,956
to physically get a human from
Cambridge to Palo Alto and

591
00:26:05,956 --> 00:26:08,436
yet this is 90 milliseconds,
right.

592
00:26:08,436 --> 00:26:12,186
This is a tenth of a second with
which we got this data there.

593
00:26:12,246 --> 00:26:13,456
So that's kind of cool.

594
00:26:13,456 --> 00:26:15,166
But we can see more
along the way.

595
00:26:15,166 --> 00:26:17,576
Let's actually trace this
route as this command implies.

596
00:26:17,576 --> 00:26:19,466
Let me scroll back up to
the top and you'll see

597
00:26:19,466 --> 00:26:22,106
that the story started
here at step 1.

598
00:26:22,106 --> 00:26:23,956
So this is apparently
the IP address

599
00:26:24,266 --> 00:26:26,606
of HCS' server, that's step 1.

600
00:26:26,786 --> 00:26:29,006
And then this one, it doesn't
have a name but it belongs

601
00:26:29,006 --> 00:26:31,456
to Harvard just because it
starts with the same numbers

602
00:26:31,756 --> 00:26:34,266
and then apparently
Harvard passes the data off

603
00:26:34,266 --> 00:26:37,436
to this server which because the
system administrators decided

604
00:26:37,436 --> 00:26:40,266
to give it a name, it has a
name now, I don't really know

605
00:26:40,266 --> 00:26:41,816
where this is but BDRGW,

606
00:26:41,886 --> 00:26:48,356
anyone wanna guess what this
shorthand notation means?

607
00:26:48,356 --> 00:26:48,423
[ Inaudible Remark ]

608
00:26:48,423 --> 00:26:49,776
>> Actually, it's
Border Gateway.

609
00:26:49,776 --> 00:26:51,736
It's like shorthand
notation for a router.

610
00:26:51,736 --> 00:26:52,826
A gateway is a router.

611
00:26:52,826 --> 00:26:55,236
These are synonyms, border,
it's probably literally

612
00:26:55,236 --> 00:26:57,106
on the periphery of
Harvard campus somewhere

613
00:26:57,426 --> 00:26:59,226
and then this has an IP address.

614
00:26:59,226 --> 00:27:02,516
As an aside, Harvard also owns
a lot of IP addresses that start

615
00:27:02,516 --> 00:27:05,586
with 128.103 but this
makes sense, right?

616
00:27:05,586 --> 00:27:08,836
It only took about 2
milliseconds to go from Sanders

617
00:27:08,836 --> 00:27:13,086
or wherever HCS' server is to
this Border Gateway and this,

618
00:27:13,296 --> 00:27:15,516
you know, pretty reasonable, 2
milliseconds because we stayed

619
00:27:15,516 --> 00:27:17,846
on campus, contrast this
with going to Stanford

620
00:27:18,056 --> 00:27:20,826
which is 3,000 miles away,
it's reasonable to expect

621
00:27:20,826 --> 00:27:23,846
that it's gonna take more
time than staying on campus.

622
00:27:24,076 --> 00:27:26,206
Well, let's see where
my email or my IM

623
00:27:26,206 --> 00:27:29,866
or whatever it is I'm trying to
do on the internet went to next.

624
00:27:29,866 --> 00:27:33,936
Well, in Step 4, goes to
nox.org so this is actually one

625
00:27:33,936 --> 00:27:35,576
of these big ISPs essentially.

626
00:27:35,576 --> 00:27:38,756
Northern Crossroads is what NoX
stands for and that's just one

627
00:27:38,756 --> 00:27:39,926
of Harvard's peering points.

628
00:27:40,046 --> 00:27:42,746
So the system administrators
here plug their routers

629
00:27:42,746 --> 00:27:46,306
by some kind of fancy cables
into this other bigger fish

630
00:27:46,346 --> 00:27:49,106
on the internet so that our
data has some place to flow.

631
00:27:49,276 --> 00:27:53,476
Apparently, Northern Crossroads
has multiple routers here

632
00:27:53,626 --> 00:27:57,386
and here but where it gets
interesting is in step 7,

633
00:27:57,386 --> 00:27:59,706
where is my data apparently
at this point in the story?

634
00:28:01,146 --> 00:28:04,126
We can only infer, but
feels-- looks like Kansas.

635
00:28:04,326 --> 00:28:06,856
And if I scroll to the
right, look at the times,

636
00:28:06,856 --> 00:28:08,726
we jumped from like
2 milliseconds

637
00:28:08,986 --> 00:28:11,396
up to 30 milliseconds
so it stands to reason

638
00:28:11,396 --> 00:28:13,996
that there're a few states
geographically in between us.

639
00:28:14,326 --> 00:28:16,796
This is a bit of
an anomaly, right?

640
00:28:16,796 --> 00:28:19,986
It feels like, if my data
took 100 milliseconds to get

641
00:28:19,986 --> 00:28:22,216
to this point and then
30 milliseconds to get

642
00:28:22,216 --> 00:28:24,506
to the next point, these
are from the origin point,

643
00:28:24,506 --> 00:28:27,196
so realize the internet is
not entirely predictable,

644
00:28:27,196 --> 00:28:30,266
it could take-- some routers
rather could be slower.

645
00:28:30,266 --> 00:28:31,276
They could be congested

646
00:28:31,276 --> 00:28:34,346
and so there could be
these bottlenecks someplace

647
00:28:34,346 --> 00:28:36,386
on the internet but
whatever that issue was,

648
00:28:36,386 --> 00:28:39,656
it went away pretty quickly
because from [inaudible]--

649
00:28:40,056 --> 00:28:43,406
here to Kansas, looks like
it actually only takes closer

650
00:28:43,406 --> 00:28:44,486
to 30 milliseconds.

651
00:28:44,656 --> 00:28:45,786
Where are we in step 8?

652
00:28:45,786 --> 00:28:46,836
Where's my email now?

653
00:28:47,896 --> 00:28:49,696
Houston probably, and by step 9?

654
00:28:51,096 --> 00:28:54,096
Los Angeles probably,
LOSA, I'm guessing.

655
00:28:54,096 --> 00:28:57,286
And if we scroll over
here, oh dear God,

656
00:28:57,286 --> 00:28:58,516
that's quite the detour.

657
00:28:59,606 --> 00:29:03,646
But, here too, not necessarily
consistently the case.

658
00:29:03,646 --> 00:29:05,436
And here too an important
takeaway is

659
00:29:05,436 --> 00:29:08,286
that if we ran this again or you
ran this tonight or tomorrow,

660
00:29:08,496 --> 00:29:11,286
these routes could constantly
change, one of the key features

661
00:29:11,286 --> 00:29:13,526
of the internet, which
is particularly inspired

662
00:29:13,526 --> 00:29:16,986
by its military origins is that
it's supposed to be dynamic.

663
00:29:17,066 --> 00:29:20,406
These routes can and should
change overtime especially

664
00:29:20,406 --> 00:29:23,476
if the routers or humans
running them determine, "Wow,

665
00:29:23,736 --> 00:29:26,406
this router in Los
Angeles is really slow,

666
00:29:26,456 --> 00:29:28,436
let's route around
it at this point."

667
00:29:28,436 --> 00:29:31,516
And so this can be reconfigured
manually or even automatically

668
00:29:31,516 --> 00:29:33,296
so these routes are
not hard coded.

669
00:29:33,296 --> 00:29:34,846
In fact there could
any number of ways

670
00:29:34,846 --> 00:29:36,506
to get from here to there.

671
00:29:36,796 --> 00:29:40,206
So 10 seems to corroborate
the idea that we're in LA

672
00:29:40,366 --> 00:29:42,906
because LAX is in the name here.

673
00:29:42,966 --> 00:29:45,746
So system administrators
have this habit traditionally

674
00:29:45,746 --> 00:29:48,376
of using airport codes as
the names of their routers

675
00:29:48,376 --> 00:29:49,806
so that's not uncommon to see.

676
00:29:50,196 --> 00:29:53,086
I'm not quite sure
where this one is.

677
00:29:53,086 --> 00:29:56,676
But by step 12 looks like
we're somewhere in the campus

678
00:29:56,676 --> 00:29:59,956
of Stanford, then here's
another boundary router

679
00:29:59,956 --> 00:30:00,976
dot Stanford.edu.

680
00:30:01,636 --> 00:30:06,096
>> Here's another border
router and [inaudible] router,

681
00:30:06,096 --> 00:30:08,166
I don't know what this is,
but these are just the names,

682
00:30:08,246 --> 00:30:09,336
name given to their machines.

683
00:30:09,336 --> 00:30:12,076
So long story short, what do
all of these lines represent?

684
00:30:12,306 --> 00:30:15,206
These literally represent
the path that my email

685
00:30:15,206 --> 00:30:18,646
or instant message or in this
case just simulation took to get

686
00:30:18,646 --> 00:30:20,376
from Cambridge to Palo Alto.

687
00:30:20,376 --> 00:30:23,056
Well, let's take a look at one
other example that's not even--

688
00:30:23,696 --> 00:30:25,106
soon other academic institution.

689
00:30:25,106 --> 00:30:26,666
That one was using
the Internet 2

690
00:30:26,666 --> 00:30:28,716
which is a faster
interconnection among a lot

691
00:30:28,716 --> 00:30:29,466
of universities.

692
00:30:29,806 --> 00:30:30,456
Let's go ahead

693
00:30:30,456 --> 00:30:34,526
and do traceroutes
of dubdubdub.CNN.com.

694
00:30:34,676 --> 00:30:35,576
Alright, so Enter.

695
00:30:36,326 --> 00:30:39,676
And this seems to be going this
time from Harvard in steps 1

696
00:30:39,676 --> 00:30:42,226
and 2 and then also 3 and then 4

697
00:30:42,226 --> 00:30:45,536
and then apparently there's some
kind of cable between Cambridge

698
00:30:45,536 --> 00:30:47,706
and Boston, that's pretty
reasonable to expect.

699
00:30:48,006 --> 00:30:49,986
Then there's some kind of
connection between Boston,

700
00:30:49,986 --> 00:30:51,806
and in step 7, New York.

701
00:30:51,806 --> 00:30:54,696
So that's kind of cool that
within 6 milliseconds we can get

702
00:30:54,696 --> 00:30:56,436
to Manhattan or thereabout.

703
00:30:56,836 --> 00:30:59,926
This is probably new-- no,
this is Washington, DC.

704
00:30:59,996 --> 00:31:03,616
In step 8 and step 9,
step 10 we're in Atlanta.

705
00:31:03,616 --> 00:31:05,226
Step 11 we're still in Atlanta.

706
00:31:05,506 --> 00:31:08,206
And then these routers are
apparently not responding

707
00:31:08,206 --> 00:31:10,576
to our request at this
point for privacy reasons

708
00:31:10,576 --> 00:31:11,676
of configuration reasons.

709
00:31:11,676 --> 00:31:13,946
So you don't always see
exactly what's happening.

710
00:31:14,136 --> 00:31:15,946
That doesn't mean there's
a dead-end, it just means

711
00:31:15,946 --> 00:31:20,296
that the program I'm using
or the special protocol ICMP

712
00:31:20,366 --> 00:31:22,496
that I'm using to
do this simulation,

713
00:31:22,626 --> 00:31:23,816
it specifically is blocked.

714
00:31:23,976 --> 00:31:25,686
Not necessarily web
traffic or the like.

715
00:31:26,216 --> 00:31:27,176
So one last one, right,

716
00:31:27,176 --> 00:31:29,896
'cause the numbers here are
only interesting and so far is

717
00:31:29,896 --> 00:31:32,686
that they're pretty damn
fast, 2 milliseconds to DC,

718
00:31:32,856 --> 00:31:34,446
24 milliseconds to Atlanta.

719
00:31:34,666 --> 00:31:37,706
Well, let's do an example
where we go not to CNN.com

720
00:31:37,706 --> 00:31:41,706
but like co.jp which
is the Japanese version

721
00:31:41,706 --> 00:31:44,116
of their website,
let's hit Enter here.

722
00:31:44,556 --> 00:31:45,496
And see what happens?

723
00:31:46,256 --> 00:31:51,526
And it's being a little slower,

724
00:31:51,526 --> 00:31:55,206
but we see that this is
apparently its IP address, okay.

725
00:31:55,206 --> 00:31:57,106
So a few servers
weren't responding

726
00:31:57,546 --> 00:32:00,486
and unfortunately we can't
see the magic happening here

727
00:32:00,486 --> 00:32:02,826
because in steps 1, 2,
3, 4, 5, let's actually--

728
00:32:02,876 --> 00:32:05,116
just for kicks, let's rerun
this in case we get better data.

729
00:32:06,126 --> 00:32:06,816
Maybe not.

730
00:32:08,236 --> 00:32:12,396
But in a moment, we
well see-- come on--

731
00:32:12,856 --> 00:32:14,256
actually let's try
the other direction.

732
00:32:14,706 --> 00:32:19,646
Alright, UK, see if this
helps-- or not at all.

733
00:32:21,586 --> 00:32:24,866
[Laughter] Okay, come on.

734
00:32:26,186 --> 00:32:27,706
Okay, better.

735
00:32:28,386 --> 00:32:31,006
For some reason it's being
pretty slow, alright.

736
00:32:31,196 --> 00:32:33,306
So our data is in
Boston at the moment.

737
00:32:34,516 --> 00:32:38,586
[ Noise ]

738
00:32:39,086 --> 00:32:40,716
>> Okay, still pretty fast.

739
00:32:40,716 --> 00:32:42,926
So this seems to be the network
that's just not cooperating.

740
00:32:42,926 --> 00:32:45,676
Alright, so apparently we're
going the long way to London.

741
00:32:45,676 --> 00:32:47,376
We're going down
to Washington then

742
00:32:47,376 --> 00:32:50,356
down to Atlanta then
apparently we're kind of hitting

743
00:32:50,356 --> 00:32:52,106
that bottleneck here again.

744
00:32:52,676 --> 00:32:54,976
So this is really isn't
demonstrating what I wanted to.

745
00:32:54,976 --> 00:32:56,726
So let's try one
last time with Japan.

746
00:32:56,726 --> 00:32:58,076
Oh, Japan is being better now.

747
00:32:58,496 --> 00:32:59,336
So here we go.

748
00:32:59,476 --> 00:33:01,276
Now it's 1 or 2 milliseconds
to Harvard,

749
00:33:01,276 --> 00:33:03,586
there are some good
data, alright.

750
00:33:04,096 --> 00:33:08,456
So, you know it's kinda
sad when you get excited

751
00:33:08,566 --> 00:33:10,846
about stuff like this.

752
00:33:10,846 --> 00:33:10,913
[ Laughter ]

753
00:33:10,913 --> 00:33:12,146
>> So, let's see here.

754
00:33:12,366 --> 00:33:14,606
So, we got some Harvard
going on at the top,

755
00:33:14,656 --> 00:33:17,276
some more Northern Crossroads
which is in the northeast--

756
00:33:17,436 --> 00:33:20,076
northeast, I'm not sure
where this or number 6 is,

757
00:33:20,126 --> 00:33:21,556
7 is just not talking to us.

758
00:33:21,816 --> 00:33:23,916
But now 8 is getting more
interesting, it's apparently

759
00:33:23,916 --> 00:33:26,136
in New York City,
and this one's cool.

760
00:33:26,136 --> 00:33:28,176
This is when you actually
do get neat glimpses

761
00:33:28,176 --> 00:33:29,686
into the inner workings
of the internet.

762
00:33:29,936 --> 00:33:32,646
What is in between
steps 9 and 10?

763
00:33:32,806 --> 00:33:38,016
It's like the entirety of
the United States, right?

764
00:33:38,016 --> 00:33:42,106
SJC is probably San Jose in
California and so these kind

765
00:33:42,106 --> 00:33:46,206
of make sense if the time to
get to step 9 is 27 milliseconds

766
00:33:46,206 --> 00:33:49,086
and the time to get to step
10 is 100 milliseconds suggest

767
00:33:49,086 --> 00:33:51,156
that there's some distance
there and actually what is

768
00:33:51,156 --> 00:33:53,246
between steps 11 and 12?

769
00:33:53,246 --> 00:33:56,916
Like literally the
Pacific Ocean, right?

770
00:33:56,916 --> 00:34:01,456
And so there's some huge
sub-Pacific cable or cables

771
00:34:01,456 --> 00:34:03,656
that are going from the
West Coast of the US

772
00:34:03,726 --> 00:34:07,236
to the East Coast of
Japan, apparently in Tokyo

773
00:34:07,236 --> 00:34:10,066
or thereabouts between steps
11 and 12 and sure enough,

774
00:34:10,276 --> 00:34:13,686
it takes 100 milliseconds
to cross the Pacific Ocean.

775
00:34:13,686 --> 00:34:15,636
Hereto, kind of think
back to things we learned

776
00:34:15,636 --> 00:34:19,376
in history class, I think that's
kind of fast to cross an ocean.

777
00:34:19,446 --> 00:34:21,896
So anyhow, you can very easily
get distracted with this

778
00:34:21,896 --> 00:34:24,266
but hopefully the takeaway here
is that what's really happening

779
00:34:24,266 --> 00:34:26,956
on the internet is a lot of
handing off and off and off

780
00:34:26,956 --> 00:34:29,806
of these virtual envelopes, more
technically known as packets,

781
00:34:30,076 --> 00:34:32,856
inside of which are
messages for the recipient.

782
00:34:32,856 --> 00:34:34,916
So what is the recipient
going to do?

783
00:34:35,066 --> 00:34:37,276
Well, for this, we can
actually use a different tool,

784
00:34:37,276 --> 00:34:39,116
so I'm still inside
of my appliance here

785
00:34:39,316 --> 00:34:41,596
and I'm just loading up
Firefox which you probably used

786
00:34:41,596 --> 00:34:42,586
at some point this term.

787
00:34:42,876 --> 00:34:43,716
But what we've done

788
00:34:43,716 --> 00:34:46,996
in the appliance is we've
actually preinstalled a few

789
00:34:46,996 --> 00:34:50,156
helpful tools that don't
come with Firefox by default

790
00:34:50,156 --> 00:34:51,806
but they are freely
available for your MAC,

791
00:34:51,856 --> 00:34:52,786
PC, and the appliance.

792
00:34:53,216 --> 00:34:54,646
So if I go to my tools menu,

793
00:34:54,856 --> 00:34:56,726
notice that we have
a few things here.

794
00:34:56,726 --> 00:35:00,616
One is called Live HTTP Headers,
and then soon we'll be playing

795
00:35:00,616 --> 00:35:03,186
with things in here, Web
Developer like Firebug

796
00:35:03,186 --> 00:35:05,136
and these other tools here
but I'm gonna go ahead

797
00:35:05,136 --> 00:35:07,146
and pull up Live HTTP Headers.

798
00:35:07,376 --> 00:35:09,386
Notice it just gives me
this big blank window

799
00:35:09,596 --> 00:35:10,816
and what this thing is going

800
00:35:10,816 --> 00:35:14,376
to do is it's gonna sniff the
traffic between my browser

801
00:35:14,556 --> 00:35:18,036
and say google.com and it's
gonna show me what's inside

802
00:35:18,036 --> 00:35:20,006
of these packets that
we've been talking

803
00:35:20,466 --> 00:35:22,516
about as virtual envelopes.

804
00:35:22,516 --> 00:35:25,196
So we can actually see what
humans are taking for granted.

805
00:35:25,396 --> 00:35:27,876
Now what's going on here, it
looks like Firefox is designed

806
00:35:27,876 --> 00:35:29,626
to like do auto updates
or whatnot,

807
00:35:29,846 --> 00:35:31,906
so it's already talking
apparently to Google

808
00:35:31,906 --> 00:35:34,016
of all places so you
can also see what this--

809
00:35:34,016 --> 00:35:35,036
what your browser is doing

810
00:35:35,036 --> 00:35:37,136
when you are not
even on the keyboard.

811
00:35:37,136 --> 00:35:39,756
But I'll clear that 'cause
it's a distraction for this

812
00:35:39,756 --> 00:35:41,536
and I'm just gonna go here to--

813
00:35:41,536 --> 00:35:44,476
let me shrink my window a little
bit so we can see both at once.

814
00:35:45,156 --> 00:35:49,466
I'm gonna go to http colon slash
slash dub dub dub dot google dot

815
00:35:49,466 --> 00:35:53,246
com slash enter, and sure
enough on the right hand side,

816
00:35:53,246 --> 00:35:55,456
I see all of the secret messages

817
00:35:55,456 --> 00:35:56,816
that were inside
of this envelope.

818
00:35:56,816 --> 00:35:58,896
And I kind of lied to you
earlier in that it's not

819
00:35:58,896 --> 00:36:04,876
as simple as just saying GET /
HTTP/1.0 but it's pretty close.

820
00:36:05,096 --> 00:36:06,666
So what we see here at the top

821
00:36:06,666 --> 00:36:09,596
of these Live HTTP
Headers window is one--

822
00:36:09,596 --> 00:36:10,666
the URL that I just visited.

823
00:36:10,726 --> 00:36:11,796
So that's not interesting.

824
00:36:12,116 --> 00:36:15,256
But what is inside of the
envelope that I just sent?

825
00:36:15,476 --> 00:36:17,726
It's everything here that
I've highlighted in blue.

826
00:36:17,726 --> 00:36:20,136
So the very first
message is as promised,

827
00:36:20,136 --> 00:36:23,176
it's a slightly newer version
of HTTP but that's a message

828
00:36:23,176 --> 00:36:26,686
from browser to server, hey,
I would like to shake hands

829
00:36:26,686 --> 00:36:29,466
with you, so to speak, using
this protocol called HTTP.

830
00:36:29,466 --> 00:36:30,956
And what else is in there?

831
00:36:31,116 --> 00:36:34,126
Well, apparently the next
like, host colon, is a reminder

832
00:36:34,126 --> 00:36:36,556
to the server, I
asked for google.com--

833
00:36:36,556 --> 00:36:37,976
dub dub dub dot google.com.

834
00:36:38,376 --> 00:36:42,926
Now just as a quick check,
why might it be necessary

835
00:36:42,926 --> 00:36:46,306
for the browser to explicitly
remind the server what its own

836
00:36:46,306 --> 00:36:46,876
name is?

837
00:36:47,026 --> 00:36:49,976
How was this envelope addressed?

838
00:36:50,116 --> 00:36:54,026
What's on the outside
of the envelope, rather?

839
00:36:54,026 --> 00:36:55,386
[ Inaudible Remark ]

840
00:36:55,386 --> 00:36:58,136
>> The-- so, the router address
or somewhere on there too,

841
00:36:58,266 --> 00:37:00,486
the IP address of google.com.

842
00:37:00,706 --> 00:37:02,496
So because we're
using the internet

843
00:37:02,496 --> 00:37:05,236
and this protocol called IP,

844
00:37:05,346 --> 00:37:07,646
we're actually routing
information from 2--

845
00:37:07,646 --> 00:37:11,236
from point A to point B using
IP addresses so this notion

846
00:37:11,236 --> 00:37:12,846
of dub dub dub dot google.com

847
00:37:12,846 --> 00:37:15,976
in this very human friendly
words is something we need

848
00:37:15,976 --> 00:37:19,286
to actually typically remind
the server of just in case

849
00:37:19,286 --> 00:37:22,716
as we'll see there's actually
multiple web servers listening,

850
00:37:22,716 --> 00:37:26,516
multiple websites listening
at this particular IP address.

851
00:37:26,516 --> 00:37:28,746
In the case of Google, not
likely, but in the case

852
00:37:28,746 --> 00:37:31,746
of Final Project Season, and
using commercial web host

853
00:37:31,746 --> 00:37:33,706
if you actually host
a project externally,

854
00:37:33,966 --> 00:37:35,246
this will absolutely be the case

855
00:37:35,296 --> 00:37:38,426
that multiple domain names
share the same IP address.

856
00:37:38,666 --> 00:37:39,656
Now, what's the rest of these?

857
00:37:39,656 --> 00:37:41,046
Well, some of this
is uninteresting

858
00:37:41,046 --> 00:37:42,226
but this one's a little juicy,

859
00:37:42,386 --> 00:37:45,006
turns out every time you visit
a website on the internet,

860
00:37:45,206 --> 00:37:47,176
you're telling them a little
something about yourself.

861
00:37:47,176 --> 00:37:49,246
Even if you haven't logged
in, you're telling them

862
00:37:49,246 --> 00:37:51,496
that in this case I'm running
Linux, I'm telling them

863
00:37:51,496 --> 00:37:53,166
that I'm running
Firefox, I'm telling them

864
00:37:53,166 --> 00:37:58,326
that I'm running version 7.01
of Firefox and also it seems

865
00:37:58,326 --> 00:38:00,446
that I'm also-- have a cookie.

866
00:38:00,656 --> 00:38:02,716
We talked briefly about
this in previous weeks

867
00:38:02,716 --> 00:38:04,936
and we'll come back to them more
technically this week and next,

868
00:38:05,296 --> 00:38:08,316
but I'm essentially showing
a handstamp to the website

869
00:38:08,496 --> 00:38:10,266
that says, I've been
here before,

870
00:38:10,386 --> 00:38:11,766
because you stamped my hand

871
00:38:11,866 --> 00:38:14,546
by storing this thing called
a cookie on my hard drive

872
00:38:14,546 --> 00:38:17,646
and by agreement
of HTTP on the--

873
00:38:17,646 --> 00:38:20,396
because we speak this protocol,
I'm always gonna show you

874
00:38:20,396 --> 00:38:23,086
that cookie every time I
revisit you because I've been

875
00:38:23,086 --> 00:38:25,266
to Google before so
let's just scroll down as

876
00:38:25,266 --> 00:38:26,686
to what the server replies with.

877
00:38:26,776 --> 00:38:30,326
When I pull up google.com,
the server is gonna respond

878
00:38:30,326 --> 00:38:34,156
with a very similar message but
with a number, in this case,

879
00:38:34,366 --> 00:38:36,156
200, which means okay.

880
00:38:36,776 --> 00:38:40,946
Now, if you've ever seen in a
browser the number 404, 401,

881
00:38:41,016 --> 00:38:43,956
500, 403, any of
these ring a bell?

882
00:38:43,956 --> 00:38:45,216
404 in particular?

883
00:38:45,216 --> 00:38:47,066
What does 404 generally
represent?

884
00:38:47,066 --> 00:38:47,906
[ Inaudible Remark ]

885
00:38:47,906 --> 00:38:48,606
>> File Not Found.

886
00:38:48,606 --> 00:38:51,506
Like you made a typo where
the web server made a mistake,

887
00:38:51,706 --> 00:38:53,336
so where are those
numbers coming from?

888
00:38:53,336 --> 00:38:54,676
Why so technical?

889
00:38:54,916 --> 00:38:56,976
They're just inside of
the server's response.

890
00:38:56,976 --> 00:38:59,836
So when my browser opens
the envelope that was sent

891
00:38:59,906 --> 00:39:02,946
from Google to me, inside
of there is a message among

892
00:39:02,946 --> 00:39:04,846
which is this code
that's this other 200

893
00:39:04,846 --> 00:39:08,466
which means everything is
okay or 404 Page Not Found

894
00:39:08,466 --> 00:39:09,386
and a whole bunch of others.

895
00:39:09,386 --> 00:39:11,366
And then there's a whole
bunch of other things here

896
00:39:11,366 --> 00:39:15,856
which we'll wave our hands at
but these too relate to cookies

897
00:39:15,856 --> 00:39:19,186
and some other features
of the website.

898
00:39:19,756 --> 00:39:22,686
So at the end of the day,
what we end up seeing is

899
00:39:22,686 --> 00:39:24,776
of course this, but
what's been going

900
00:39:24,776 --> 00:39:27,246
on underneath the hood is
the entirety of that story.

901
00:39:27,246 --> 00:39:29,846
The internet's actually getting
data from point A to point B

902
00:39:30,076 --> 00:39:32,806
but because browsers and
web servers speak this other

903
00:39:32,806 --> 00:39:36,496
protocol, HTTP, and it be
clear that protocol just says,

904
00:39:36,496 --> 00:39:39,686
if you want data from me, you
must send a message that looks

905
00:39:39,686 --> 00:39:43,226
like this and I agree in turn
to send you a message that looks

906
00:39:43,226 --> 00:39:46,226
like this, but thankfully
Microsoft and Mozilla

907
00:39:46,226 --> 00:39:50,106
and Google, they simplify
these very technical details

908
00:39:50,326 --> 00:39:53,446
and just show us what we care
about which is typically a page

909
00:39:53,986 --> 00:39:57,236
that looks a little
something like this.

910
00:39:57,456 --> 00:39:59,606
So that's in a little more
detail how the internet works

911
00:39:59,606 --> 00:40:00,436
and how the web works.

912
00:40:00,886 --> 00:40:01,626
Any questions?

913
00:40:04,126 --> 00:40:06,966
>> Alright, so if we peel
back this layer now of Google,

914
00:40:06,966 --> 00:40:12,406
let me go up here, let
me go to view page source

915
00:40:12,906 --> 00:40:16,046
which is not there, let me go
here and click view page source

916
00:40:16,316 --> 00:40:20,686
and what you will see is
how Google implemented their

917
00:40:20,686 --> 00:40:25,076
website, and in here is a little
something called HTML and a lot

918
00:40:25,076 --> 00:40:27,136
of something called
JavaScript both

919
00:40:27,136 --> 00:40:29,996
of which you will be speaking
in just a little bit's time.

920
00:40:30,056 --> 00:40:31,536
Let's go ahead and take
a five-minute break here

921
00:40:31,536 --> 00:40:34,516
and we'll come back and
start writing some HTML.

922
00:40:35,016 --> 00:40:37,226
[ Noise ]

923
00:40:37,726 --> 00:40:42,636
>> Alright, we are back,
so let us learn how

924
00:40:42,636 --> 00:40:43,786
to make something like this.

925
00:40:44,846 --> 00:40:48,446
So, how do you actually
start putting webpages

926
00:40:48,446 --> 00:40:49,166
on the internet?

927
00:40:49,166 --> 00:40:51,466
Well thus far, all of
our stories have assumed

928
00:40:51,466 --> 00:40:52,876
that there's a browser,
a client,

929
00:40:52,876 --> 00:40:54,476
and that's easy 'cause
almost all of us have

930
00:40:54,476 --> 00:40:56,136
that either right now
or back in your room

931
00:40:56,426 --> 00:40:58,786
but the server is a little
less obvious how you go

932
00:40:58,786 --> 00:40:59,556
about doing this.

933
00:40:59,556 --> 00:41:02,426
Well, it turns out that all this
time you've been using the CS50

934
00:41:02,486 --> 00:41:06,016
appliance for C programming
and to write your code

935
00:41:06,016 --> 00:41:07,006
and for other purposes

936
00:41:07,246 --> 00:41:09,676
but it itself is
preconfigured to be a server.

937
00:41:09,886 --> 00:41:13,276
Now the appliance is only so
useful because when you're

938
00:41:13,276 --> 00:41:15,466
on campus and using wireless,

939
00:41:15,596 --> 00:41:17,966
your IP address is actually
changing pretty often.

940
00:41:18,046 --> 00:41:21,396
So even though your laptop has
a server, a web server on it,

941
00:41:21,396 --> 00:41:23,016
even though we haven't
used it up until today,

942
00:41:23,346 --> 00:41:25,356
it's not really gonna be
accessible by anyone else

943
00:41:25,356 --> 00:41:27,496
on the internet because they
don't know your IP address.

944
00:41:27,786 --> 00:41:30,296
Your appliance also does not
have a human friendly name

945
00:41:30,296 --> 00:41:32,416
like google.com and also

946
00:41:32,416 --> 00:41:35,036
for security purposes we've
configured the appliance's

947
00:41:35,036 --> 00:41:37,056
server to not be accessible

948
00:41:37,056 --> 00:41:40,276
on the internet unless you
throw some switch, so to speak,

949
00:41:40,276 --> 00:41:42,776
to actually let the
outside world have access.

950
00:41:42,986 --> 00:41:44,776
But this is the funny
thing, like a server

951
00:41:44,776 --> 00:41:47,716
on the internet does not need
to be some mainframe computer

952
00:41:47,716 --> 00:41:50,826
that takes a part of a room, it
doesn't even need to be a server

953
00:41:51,446 --> 00:41:53,446
in a rack, a rack of servers,

954
00:41:53,626 --> 00:41:55,776
rather it can literally
be our own laptops.

955
00:41:55,776 --> 00:41:58,526
People would even hack things
like the Xbox and the PS3

956
00:41:58,526 --> 00:42:00,756
to be web servers
because all you need

957
00:42:00,756 --> 00:42:03,276
to run a server is just
a computer and you need

958
00:42:03,276 --> 00:42:04,726
to put the right software on it

959
00:42:04,726 --> 00:42:08,246
and the software is just
called web server software.

960
00:42:08,566 --> 00:42:11,626
So even though we call physical
devices typically servers,

961
00:42:11,756 --> 00:42:14,916
that's fine but it's really
the software that's the server,

962
00:42:14,916 --> 00:42:17,666
the thing that's like a waiter
in a restaurant actually serving

963
00:42:17,666 --> 00:42:20,296
up information, and there's web
servers, there's mail servers,

964
00:42:20,546 --> 00:42:22,816
there's instant messaging
servers, Skype servers.

965
00:42:23,106 --> 00:42:25,616
There's a whole bunch of servers
or services on the internet

966
00:42:25,756 --> 00:42:27,196
and you just need
the right software

967
00:42:27,196 --> 00:42:28,406
and so we already have that.

968
00:42:28,406 --> 00:42:31,226
So let me go over to the
appliance here and then go ahead

969
00:42:31,226 --> 00:42:33,636
and close Firefox and
just get to the point

970
00:42:33,996 --> 00:42:36,736
of having my terminal
window open here,

971
00:42:37,026 --> 00:42:38,516
so jharvard@appliance.

972
00:42:38,516 --> 00:42:40,356
Well, when you log
into a terminal window

973
00:42:40,356 --> 00:42:42,416
in the appliance, you
can usually type ls

974
00:42:42,416 --> 00:42:44,686
and see what you have
in your home directory.

975
00:42:44,886 --> 00:42:47,536
You have desktop by default
and you also have source--

976
00:42:47,536 --> 00:42:49,476
I have a source directory
from today

977
00:42:49,786 --> 00:42:51,556
but we need a special directory.

978
00:42:51,726 --> 00:42:54,616
Almost always, if you have
the appliance in this case

979
00:42:54,726 --> 00:42:57,926
or if you have an account
on a commercial web server

980
00:42:57,926 --> 00:43:01,066
that you can pay 5 dollars a
month, 20 dollars a month for,

981
00:43:01,676 --> 00:43:04,616
you generally have the username
and password that you can use

982
00:43:04,616 --> 00:43:06,026
to connect to the server.

983
00:43:06,266 --> 00:43:07,926
Now, even though in the
case of the appliance,

984
00:43:07,926 --> 00:43:09,946
you don't really need to
connect to it, you just need

985
00:43:09,946 --> 00:43:12,346
to double click it and it
opens and there you are,

986
00:43:12,606 --> 00:43:15,716
it turns out that we can
also connect to the appliance

987
00:43:15,796 --> 00:43:18,006
as though at some random
server on the internet

988
00:43:18,256 --> 00:43:19,416
from our own Mac or PC.

989
00:43:19,416 --> 00:43:22,426
So we'll see that in a moment
but first let's do this.

990
00:43:22,856 --> 00:43:27,876
I'm gonna go ahead into my home
directory where I am by default,

991
00:43:28,136 --> 00:43:31,096
I'm gonna type this command
MK for make directory

992
00:43:31,096 --> 00:43:33,706
and then I'm gonna make a
special directory called public

993
00:43:33,806 --> 00:43:36,856
underscore html, all
lowercase, no spaces,

994
00:43:37,006 --> 00:43:38,126
and then I'm gonna hit enter.

995
00:43:38,386 --> 00:43:40,896
If I really wanted to or
if I wasn't comfortable

996
00:43:40,896 --> 00:43:43,436
at the command line, I could
also go to my home directory,

997
00:43:43,696 --> 00:43:46,546
I could for instance go to
file, I could go create folder

998
00:43:46,546 --> 00:43:47,776
and do the exact same thing,

999
00:43:48,066 --> 00:43:51,936
but by now [inaudible] you're
pretty comfortable using the

1000
00:43:51,936 --> 00:43:53,766
blinking prompt at
the terminal window.

1001
00:43:53,766 --> 00:43:56,256
But there it is, public
HTML, there's nothing in it,

1002
00:43:56,456 --> 00:43:58,036
so let's go back to
the terminal window

1003
00:43:58,036 --> 00:43:59,816
and see what we can
do with that.

1004
00:43:59,816 --> 00:44:03,036
I'm gonna go into public HTML
with CD as you've done before,

1005
00:44:03,036 --> 00:44:06,086
I'm gonna hit enter, type ls
and indeed nothing is there.

1006
00:44:06,436 --> 00:44:06,986
So let's do this.

1007
00:44:06,986 --> 00:44:08,456
I'm gonna open up gedit

1008
00:44:08,456 --> 00:44:10,376
where even though you
usually double click its icon,

1009
00:44:10,376 --> 00:44:12,286
you can also type its
name in all lower case

1010
00:44:12,286 --> 00:44:15,586
and I'm gonna create a
special file called index.html.

1011
00:44:15,896 --> 00:44:17,846
All lower case, no
spaces, enter.

1012
00:44:18,216 --> 00:44:21,056
That's gonna go ahead and
prompt gedit to open and notice

1013
00:44:21,056 --> 00:44:23,896
in its title bar it's
pointing out that you're inside

1014
00:44:23,896 --> 00:44:25,416
of your public HMTL directory

1015
00:44:25,416 --> 00:44:27,386
and that's good 'cause I
want this file to end up in

1016
00:44:27,386 --> 00:44:28,726
that directory specifically.

1017
00:44:28,726 --> 00:44:31,876
I'm gonna go ahead now
and just do the following.

1018
00:44:31,876 --> 00:44:35,526
I'm gonna do open bracket
exclamation point DOCTYPE

1019
00:44:35,696 --> 00:44:40,076
in all caps html in
lower case and that's it.

1020
00:44:40,306 --> 00:44:44,296
So this term we're using a
version of HTML called HTML5.

1021
00:44:44,296 --> 00:44:45,496
It's sort of the latest

1022
00:44:45,496 --> 00:44:47,546
and greatest even though
it's not quite a fully

1023
00:44:47,546 --> 00:44:48,646
adopted standard.

1024
00:44:48,646 --> 00:44:50,066
This is these technologies

1025
00:44:50,066 --> 00:44:51,986
as you might gather are
kind of a moving target.

1026
00:44:51,986 --> 00:44:55,636
Even though C as we know has
been the same since 1999,

1027
00:44:55,636 --> 00:44:57,986
HTML changes by the
month, by the year,

1028
00:44:57,986 --> 00:45:01,176
and so I will focus
particularly on the fundamentals

1029
00:45:01,176 --> 00:45:02,586
over the next few weeks
and [inaudible] sort

1030
00:45:02,586 --> 00:45:04,006
of the temporal aspects.

1031
00:45:04,206 --> 00:45:06,376
But this very first
line that I typed

1032
00:45:06,536 --> 00:45:10,876
in a file called index.html
is just a clue to the browser

1033
00:45:10,876 --> 00:45:13,846
with which I'm gonna open this
file that, hey, this is HTML.

1034
00:45:14,306 --> 00:45:15,886
It's not sufficient
unfortunately

1035
00:45:15,886 --> 00:45:18,156
that just the file
name ends in .html,

1036
00:45:18,386 --> 00:45:20,266
if to be a little more
pedantic and at the top

1037
00:45:20,266 --> 00:45:22,816
of the file say doctype HTML.

1038
00:45:23,526 --> 00:45:25,286
And then I can proceed
to do the following.

1039
00:45:25,286 --> 00:45:28,136
It turns out that every webpage
on the internet is composed

1040
00:45:28,136 --> 00:45:29,186
of what we'll call tags.

1041
00:45:29,806 --> 00:45:31,736
A tag is something that
has an open bracket

1042
00:45:31,736 --> 00:45:32,836
and a closed bracket.

1043
00:45:32,836 --> 00:45:35,086
And so this is--
and it's unfortunate

1044
00:45:35,086 --> 00:45:35,966
that this looks the same.

1045
00:45:35,966 --> 00:45:38,186
What we just typed is not
a tag, it's a special case.

1046
00:45:38,596 --> 00:45:42,606
But this is a tag, open
bracket HTML close bracket

1047
00:45:42,606 --> 00:45:45,106
and then I'm gonna do the
opposite so to speak here.

1048
00:45:45,466 --> 00:45:49,926
So every webpage starts
with open bracket HTML,

1049
00:45:50,066 --> 00:45:52,296
close bracket, and then
ends with the opposite

1050
00:45:52,296 --> 00:45:54,046
where the opposite
is the same word

1051
00:45:54,046 --> 00:45:56,766
with the forward slash
inside of the brackets.

1052
00:45:57,266 --> 00:45:59,836
So you can really think
of this quite simply

1053
00:45:59,836 --> 00:46:01,906
as this means here
comes a webpage,

1054
00:46:02,236 --> 00:46:03,416
that's the end of the webpage.

1055
00:46:03,416 --> 00:46:06,156
These are like directives that
are just telling the browser

1056
00:46:06,406 --> 00:46:09,346
so straightforwardly,
do this, don't do this.

1057
00:46:09,346 --> 00:46:10,916
Or here is this,
here is not this.

1058
00:46:11,196 --> 00:46:12,986
They're kind of reversing
each other's effects.

1059
00:46:13,276 --> 00:46:15,856
Now every webpage
has 2 main parts.

1060
00:46:15,966 --> 00:46:17,756
One is called the
head of a webpage

1061
00:46:18,086 --> 00:46:20,146
and I'm gonna preemptively
create the open part

1062
00:46:20,146 --> 00:46:21,956
and the closed part
and then the body.

1063
00:46:22,236 --> 00:46:24,516
And notice too just
like we did in C,

1064
00:46:24,516 --> 00:46:26,866
I'm trying to be
a little nitpicky

1065
00:46:26,866 --> 00:46:28,596
with my indentation
in white space.

1066
00:46:28,596 --> 00:46:30,976
I'm trying to keep it looking
clean even though as we saw

1067
00:46:30,976 --> 00:46:31,996
from Google that was a mess.

1068
00:46:32,426 --> 00:46:34,276
Browsers don't care
what it looks like

1069
00:46:34,276 --> 00:46:35,586
but for humans, it's
a good thing.

1070
00:46:35,866 --> 00:46:38,276
And if we have as much
traffic in which Google does

1071
00:46:38,276 --> 00:46:40,266
where every byte or
white space counts,

1072
00:46:40,576 --> 00:46:41,976
well then we can
resort to that as well.

1073
00:46:41,976 --> 00:46:43,786
But for now, this is
definitely good style.

1074
00:46:44,256 --> 00:46:46,196
Unfortunately this is a
very uninteresting webpage.

1075
00:46:46,306 --> 00:46:47,806
There's a placeholder
for the head of it,

1076
00:46:47,806 --> 00:46:50,266
there's a placeholder for the
body but-- but nothing more.

1077
00:46:50,536 --> 00:46:52,476
So for now, the only
thing we're gonna put

1078
00:46:52,476 --> 00:46:54,876
into the head is
gonna be a title tag.

1079
00:46:55,206 --> 00:46:57,146
So I'm gonna go ahead
and open title tag

1080
00:46:57,146 --> 00:46:58,536
and then close title tag.

1081
00:46:58,746 --> 00:47:00,716
But for the first time
I'm now gonna actually put

1082
00:47:00,716 --> 00:47:04,696
in some content, hello
comma world for instance.

1083
00:47:04,696 --> 00:47:07,176
So that's it for title
and then down here,

1084
00:47:07,176 --> 00:47:09,876
hello comma world again.

1085
00:47:10,936 --> 00:47:12,166
And so that's it for now.

1086
00:47:12,536 --> 00:47:15,486
So I have a title tag in the
head, the head is an HTML

1087
00:47:15,696 --> 00:47:18,276
but I also have a body
tag that's inside of HTML

1088
00:47:18,276 --> 00:47:20,106
as well but not inside head.

1089
00:47:20,156 --> 00:47:21,186
So notice the indentation.

1090
00:47:21,186 --> 00:47:24,566
Just like with curly braces and
parenthesis in C, similarly,

1091
00:47:24,566 --> 00:47:27,046
do we have a nice symmetry
here, both aesthetically

1092
00:47:27,226 --> 00:47:29,116
and also logically
with our tags.

1093
00:47:29,486 --> 00:47:30,686
So what's this kind of mean?

1094
00:47:30,796 --> 00:47:32,736
Well in a nutshell, when
you open up a browser,

1095
00:47:32,736 --> 00:47:38,496
and you go to a page here,
the thing that appears usually

1096
00:47:38,496 --> 00:47:41,356
in a title bar, that's the
head and specifically the title

1097
00:47:41,566 --> 00:47:43,826
and everything that
appears down below

1098
00:47:43,826 --> 00:47:47,246
from the below all the buttons
and whatnot, that's the body.

1099
00:47:47,246 --> 00:47:50,176
So the body is really
99 percent of a webpage.

1100
00:47:50,466 --> 00:47:52,336
So now let me go back to
this file, I'm gonna go ahead

1101
00:47:52,336 --> 00:47:54,296
and make sure I saved
it with file save

1102
00:47:54,296 --> 00:47:56,476
or control S, and that's it.

1103
00:47:56,476 --> 00:47:58,026
So this is all the webpage is.

1104
00:47:58,186 --> 00:48:01,406
Indeed an interesting webpage
but it's just a text file.

1105
00:48:01,406 --> 00:48:03,606
Just like C programs
are text files,

1106
00:48:03,866 --> 00:48:06,776
so is a webpage a text file,
but the thing with a web file--

1107
00:48:06,776 --> 00:48:08,516
webpage, if you don't
compile it,

1108
00:48:08,906 --> 00:48:11,226
this is literally what's
gonna get sent to the browser.

1109
00:48:11,366 --> 00:48:14,116
HTML is what's called
an interpretive language

1110
00:48:14,226 --> 00:48:16,026
which means you don't
covert it to 0's and 1's,

1111
00:48:16,026 --> 00:48:18,056
rather you just send
it to a machine.

1112
00:48:18,056 --> 00:48:20,486
And the machine then reads it
top to bottom, left to right.

1113
00:48:20,826 --> 00:48:23,336
So the takeaway here
immediately is that if you are

1114
00:48:23,336 --> 00:48:25,236
at all concerned for your
intellectual property,

1115
00:48:25,236 --> 00:48:27,656
it doesn't matter,
like it's out there.

1116
00:48:27,656 --> 00:48:28,766
When you write webpages,

1117
00:48:28,766 --> 00:48:31,386
anyone on the internet
can see your HTML.

1118
00:48:31,916 --> 00:48:34,646
But the reality is HTML is
not an interesting language.

1119
00:48:34,646 --> 00:48:36,046
It's kind of fun to
play with it first

1120
00:48:36,046 --> 00:48:37,386
and we're gonna use
it quite a bit

1121
00:48:37,386 --> 00:48:40,276
to make more interesting things
but it's just static mark up.

1122
00:48:40,276 --> 00:48:41,446
It's entirely aesthetic.

1123
00:48:41,446 --> 00:48:43,866
It's not a programming language
'cause there's no notion

1124
00:48:43,866 --> 00:48:46,356
of functions or loops
or conditions,

1125
00:48:46,356 --> 00:48:48,556
all there is is do
this, don't do this.

1126
00:48:48,976 --> 00:48:51,726
And so we'll see a few
more examples of that.

1127
00:48:51,906 --> 00:48:53,756
So now let's go ahead
and open this.

1128
00:48:53,756 --> 00:48:56,856
So I'm gonna go ahead and open
up Firefox, and as promised,

1129
00:48:56,856 --> 00:49:00,306
the appliance itself is a server
which means it's listening

1130
00:49:00,306 --> 00:49:01,996
for connections from browsers

1131
00:49:01,996 --> 00:49:03,456
and from other things
on the internet.

1132
00:49:03,776 --> 00:49:05,266
So I'm gonna go up
to the address bar,

1133
00:49:05,266 --> 00:49:07,216
and I'm gonna open
my own webpage.

1134
00:49:07,276 --> 00:49:11,766
I'm gonna go to
http://localhost,

1135
00:49:12,036 --> 00:49:13,816
so I'm specifically
typing local host

1136
00:49:13,816 --> 00:49:15,436
because that's the
nickname, that's like the--

1137
00:49:15,786 --> 00:49:19,896
the local google.com name
for my own appliance, slash,

1138
00:49:20,116 --> 00:49:21,386
and then this is the convention.

1139
00:49:21,386 --> 00:49:23,746
Because we're currently
using a jharvard account,

1140
00:49:24,166 --> 00:49:27,206
if I literally type
tilde jharvard,

1141
00:49:27,206 --> 00:49:30,046
I'm gonna have a URL right
now that looks like this.

1142
00:49:30,156 --> 00:49:32,386
So definitely not good for
the branding of my website,

1143
00:49:32,386 --> 00:49:34,156
no one's gonna remember
this and the tilde is hard

1144
00:49:34,156 --> 00:49:35,546
to find even on some keyboards.

1145
00:49:35,786 --> 00:49:36,696
But this is the convention.

1146
00:49:36,696 --> 00:49:39,516
Typically when you, little old
you has an account on a server

1147
00:49:39,726 --> 00:49:42,946
and that server is web server,
you can access your pages

1148
00:49:43,166 --> 00:49:44,636
at a URL that looks like this.

1149
00:49:44,896 --> 00:49:47,706
As an aside you all probably
have FAS accounts back

1150
00:49:47,706 --> 00:49:50,886
from problem set 0, even
though we haven't used them.

1151
00:49:51,156 --> 00:49:53,046
But that means you
actually have access

1152
00:49:53,046 --> 00:49:58,356
to www.people.fas.harvard.edu
slash tilde username

1153
00:49:58,626 --> 00:49:59,976
where username is
your own FAS username.

1154
00:50:00,696 --> 00:50:03,636
>> So that's where frogman and
my UC campaign used to live,

1155
00:50:03,636 --> 00:50:05,166
at crazy long URLs like that.

1156
00:50:05,166 --> 00:50:06,246
I mean just imagine
trying to write

1157
00:50:06,246 --> 00:50:08,176
that on a poster
back in the day.

1158
00:50:08,376 --> 00:50:10,676
It's no one-- no one visited
my website is the point

1159
00:50:10,676 --> 00:50:11,616
of the story.

1160
00:50:11,616 --> 00:50:11,686
[ Laughter ]

1161
00:50:11,686 --> 00:50:15,816
>> So let's hit enter and see
what my webpage looks like,

1162
00:50:15,816 --> 00:50:16,076
enter.

1163
00:50:16,896 --> 00:50:18,796
Damn it. So, there's a problem.

1164
00:50:18,796 --> 00:50:20,876
And there is that number,
I see it in the title

1165
00:50:20,876 --> 00:50:22,976
and in the tab, 403 forbidden.

1166
00:50:23,256 --> 00:50:25,046
So this had something
to do with permissions.

1167
00:50:25,196 --> 00:50:27,766
And this is actually a good
thing, it's a mistake on my part

1168
00:50:28,026 --> 00:50:30,306
but it's a good thing in
that clearly by default,

1169
00:50:30,306 --> 00:50:33,006
when I create files on the
internet, they're not accessible

1170
00:50:33,006 --> 00:50:34,936
to the whole world
until I tell the world,

1171
00:50:35,166 --> 00:50:36,766
now you may look at these files.

1172
00:50:37,116 --> 00:50:38,746
So I have to actually
run a new command.

1173
00:50:38,986 --> 00:50:40,326
I have to do a couple of things.

1174
00:50:40,326 --> 00:50:43,206
First, let me go back to my
home directory by typing CD.

1175
00:50:43,486 --> 00:50:45,816
And then I'm gonna
go ahead and do ls-l,

1176
00:50:45,816 --> 00:50:48,026
and this gives me
the long listing.

1177
00:50:48,026 --> 00:50:50,186
And you've done this
before for a problem set.

1178
00:50:50,186 --> 00:50:54,346
Now notice for public
HTML, I have in desktop,

1179
00:50:54,606 --> 00:50:56,586
notice that they just say this,

1180
00:50:56,686 --> 00:51:00,986
DRWX hyphen hyphen hyphen
hyphen hyphen hyphen.

1181
00:51:01,446 --> 00:51:03,046
What does all of
that actually mean?

1182
00:51:03,046 --> 00:51:05,696
Well, let me go ahead and just
open up real fast a text editor,

1183
00:51:05,696 --> 00:51:06,876
just so I have some
place to type.

1184
00:51:06,876 --> 00:51:08,546
And let me just repeat that.

1185
00:51:08,546 --> 00:51:12,246
So the public HTML directory
currently looks like this,

1186
00:51:13,116 --> 00:51:16,286
hyphen hyphen hyphen hyphen
hyphen hyphen, these are its

1187
00:51:16,286 --> 00:51:17,346
so called permissions.

1188
00:51:17,566 --> 00:51:18,636
Now what does this mean?

1189
00:51:18,896 --> 00:51:20,946
There is always the same
number of characters here.

1190
00:51:20,946 --> 00:51:24,096
D just means directory and it's
public HTML is a directory,

1191
00:51:24,096 --> 00:51:26,136
we made it ourselves,
and just take a guess,

1192
00:51:26,136 --> 00:51:27,076
what does R stand for?

1193
00:51:28,406 --> 00:51:30,686
Read? W? Writes.

1194
00:51:30,826 --> 00:51:32,926
X? Executable.

1195
00:51:32,926 --> 00:51:35,456
So what do this mean the
context of a directory?

1196
00:51:35,706 --> 00:51:39,066
Well, right here, I'm
gonna say this is me

1197
00:51:39,626 --> 00:51:42,296
and this is all over here.

1198
00:51:42,296 --> 00:51:44,296
And I'm just gonna put
a question mark for now

1199
00:51:44,296 --> 00:51:47,326
as to these middle 3, and let me
separate them just a little bit

1200
00:51:47,326 --> 00:51:51,026
to make this a little more clear
as to what represents what.

1201
00:51:51,076 --> 00:51:57,106
If I just add some white space
here, these 3 triples of hyphens

1202
00:51:57,106 --> 00:51:59,886
or letters represent permissions
for 3 different people.

1203
00:52:00,166 --> 00:52:03,726
Me is the one on the
left, so me, I have read,

1204
00:52:03,726 --> 00:52:06,196
write and executability
permission for that directory.

1205
00:52:06,196 --> 00:52:06,746
What does that mean?

1206
00:52:07,066 --> 00:52:08,466
Read means you can
see the contents,

1207
00:52:08,546 --> 00:52:09,996
write means you can
change the contents,

1208
00:52:10,196 --> 00:52:13,236
executable means you can double
click the folder or CD into it.

1209
00:52:13,236 --> 00:52:14,136
You can actually get into it.

1210
00:52:14,136 --> 00:52:15,456
It doesn't mean execute
like run,

1211
00:52:15,456 --> 00:52:16,986
it means you can
actually open it

1212
00:52:17,166 --> 00:52:18,766
and go inside in
the first place.

1213
00:52:19,186 --> 00:52:22,226
As an aside, the middle 3
refer to what's called a group.

1214
00:52:22,226 --> 00:52:25,006
If you've ever poked around on
your appliance, you might know

1215
00:52:25,006 --> 00:52:26,686
that John Harvard
is always associated

1216
00:52:26,686 --> 00:52:29,016
with students somehow,
well, that's the group

1217
00:52:29,176 --> 00:52:30,426
that you're in so to speak.

1218
00:52:30,426 --> 00:52:31,956
But for now, we'll
just pretty much ignore

1219
00:52:31,956 --> 00:52:34,576
that one 'cause the interesting
one is on the right hand side.

1220
00:52:34,766 --> 00:52:36,716
Hyphen hyphen hyphen means all,

1221
00:52:36,716 --> 00:52:39,556
the rest of the internet has
no permissions whatsoever.

1222
00:52:39,556 --> 00:52:41,396
There's no R, there's
no W, there's no X

1223
00:52:41,396 --> 00:52:42,376
which means everybody else

1224
00:52:42,376 --> 00:52:43,736
on the internet is
not gonna be able

1225
00:52:43,736 --> 00:52:45,646
to touch this directory at all.

1226
00:52:45,726 --> 00:52:48,476
But this is a problem, because
if I want this directory to be

1227
00:52:48,476 --> 00:52:51,526
on the internet, I need to give
the world a few permissions

1228
00:52:51,726 --> 00:52:53,866
and the most important
one is executability.

1229
00:52:54,106 --> 00:52:56,316
Minimally, if I have
web files in here,

1230
00:52:56,356 --> 00:53:00,086
my HTML is in this directory,
surely the world has to be able

1231
00:53:00,186 --> 00:53:02,346
to get into this
directory somehow.

1232
00:53:02,676 --> 00:53:05,896
So I can use a new command
for that called chmod

1233
00:53:05,896 --> 00:53:09,726
for change mode, and I can
simply type change mode, chmod,

1234
00:53:09,726 --> 00:53:14,806
A for all, plus X, so
L plus executability,

1235
00:53:14,806 --> 00:53:17,576
and then I just mention the
name of the directory, enter.

1236
00:53:18,096 --> 00:53:20,986
And now if I do ls-l again,
notice what's changed.

1237
00:53:20,986 --> 00:53:24,506
Public HTML is still read,
write, execute for me

1238
00:53:24,826 --> 00:53:27,866
but also execute for everyone
else, as well as my group.

1239
00:53:27,866 --> 00:53:29,706
But again, I'm gonna wave my
hand at the group to tell,

1240
00:53:29,706 --> 00:53:31,346
the last one is what's
really important.

1241
00:53:31,906 --> 00:53:36,096
So let's now reload, hopefully
I've fixed all my problems.

1242
00:53:36,526 --> 00:53:37,316
And I click reload.

1243
00:53:38,156 --> 00:53:38,846
Still forbidden.

1244
00:53:39,186 --> 00:53:41,446
So what-- who might
be the culprit now?

1245
00:53:42,096 --> 00:53:44,726
You know, what about
index.html, let's go in there.

1246
00:53:44,726 --> 00:53:48,526
So it's CD pubic HTML,
let me type ls-l.

1247
00:53:48,626 --> 00:53:51,856
And this looks okay, it looks
like my file which created

1248
00:53:51,856 --> 00:53:54,386
with readability
privileges for everyone

1249
00:53:54,676 --> 00:53:57,536
because that's how I
configured it in advance.

1250
00:53:57,896 --> 00:54:00,516
But if I go here, let
me do one other command,

1251
00:54:00,516 --> 00:54:03,586
I hit CD to go back to
my home directory, ls-al,

1252
00:54:03,876 --> 00:54:05,406
there's a whole bunch of stuff.

1253
00:54:05,406 --> 00:54:07,416
It turns out inside of
your home directories,

1254
00:54:07,686 --> 00:54:09,256
there's all of these dot files,

1255
00:54:09,316 --> 00:54:11,476
files that literally
begin with the period.

1256
00:54:11,646 --> 00:54:14,226
And by convention in Linux,
anything that starts with a dot,

1257
00:54:14,226 --> 00:54:16,716
Mac OS 2 is hidden, you
don't see it when you type ls

1258
00:54:16,716 --> 00:54:17,826
or double click a folder.

1259
00:54:18,086 --> 00:54:20,746
But this is all like
preferences and cash files

1260
00:54:20,746 --> 00:54:22,806
and temporary stuff that
programs just put there,

1261
00:54:22,806 --> 00:54:23,956
so you don't really see it.

1262
00:54:23,956 --> 00:54:25,596
But what I care about
is this one.

1263
00:54:25,656 --> 00:54:29,766
At the very top, notice that
there's a folder called dot.

1264
00:54:29,986 --> 00:54:31,006
What does dot represent?

1265
00:54:33,036 --> 00:54:34,796
Your current directory.

1266
00:54:34,796 --> 00:54:36,316
So dot means this directory.

1267
00:54:36,316 --> 00:54:37,736
So I'm in my home directory,

1268
00:54:37,966 --> 00:54:40,836
so this very top line means
I own my home directory,

1269
00:54:40,836 --> 00:54:42,546
jharvard, that's-- make sense.

1270
00:54:42,756 --> 00:54:44,276
I'm in the students
group, we know that.

1271
00:54:44,476 --> 00:54:47,656
But notice, I have the ability
to execute this directory,

1272
00:54:47,656 --> 00:54:49,706
but it turns out I need to
let the rest of the world

1273
00:54:49,706 --> 00:54:51,226
into my home directory too.

1274
00:54:51,226 --> 00:54:52,626
I don't want them
to have readability.

1275
00:54:52,626 --> 00:54:53,946
I don't want the R
'cause I don't want them

1276
00:54:53,946 --> 00:54:56,196
to see what files I
have in my account.

1277
00:54:56,426 --> 00:54:59,466
But I at least want them to
be able to open it so to speak

1278
00:54:59,606 --> 00:55:01,516
so as to visit it on the web.

1279
00:55:01,796 --> 00:55:03,686
So to fix this, I'm
gonna do chmod.

1280
00:55:04,836 --> 00:55:07,876
Oops, A plus X and I can solve
this in a couple of ways.

1281
00:55:07,876 --> 00:55:10,156
I can say dot 'cause I'm in
a directory I care about.

1282
00:55:10,376 --> 00:55:11,516
I can say tilde 'cause

1283
00:55:11,516 --> 00:55:13,446
that represents my
home directory too.

1284
00:55:13,596 --> 00:55:17,006
Enter. That hopefully fixed
that problem, now let's go back

1285
00:55:17,006 --> 00:55:18,956
to my browser and reload.

1286
00:55:18,956 --> 00:55:21,556
Ah, my first webpage
on the internet.

1287
00:55:21,926 --> 00:55:23,566
Well, not really the
internet, on my computer.

1288
00:55:23,826 --> 00:55:24,766
So that's progress.

1289
00:55:24,996 --> 00:55:28,246
So notice, I'm in a
browser, I'm actually ta--

1290
00:55:28,246 --> 00:55:31,136
telling the browser
to talk to local host

1291
00:55:31,136 --> 00:55:32,526
as though it's a server.

1292
00:55:32,526 --> 00:55:34,646
Even though local host is
a special name that refers

1293
00:55:34,646 --> 00:55:36,806
to my own computer,
my own appliance,

1294
00:55:37,076 --> 00:55:40,776
tilde jharvard means go into
the jharvard guy's account

1295
00:55:41,006 --> 00:55:43,696
and specifically go
into his public HTML.

1296
00:55:43,696 --> 00:55:45,106
So the web server knows

1297
00:55:45,106 --> 00:55:48,596
that tilde jharvard actually
means John Harvard's public

1298
00:55:48,596 --> 00:55:49,546
HTML directory.

1299
00:55:49,796 --> 00:55:51,396
And this frankly is
a little confusing.

1300
00:55:51,396 --> 00:55:53,506
You might recall from
Psets and whatnot,

1301
00:55:53,776 --> 00:55:59,206
that you very often type
things like CD plus till--

1302
00:55:59,206 --> 00:56:03,476
or you might do something like
ls tilde CS50, just to kind

1303
00:56:03,536 --> 00:56:05,066
of poke around CS50's account.

1304
00:56:05,356 --> 00:56:07,796
Tilde CS50, when you're
at a terminal refers

1305
00:56:07,796 --> 00:56:09,156
to CS50's home directory.

1306
00:56:09,376 --> 00:56:12,496
Unfortunately, when you're
in a browser, tilde jharvard

1307
00:56:12,496 --> 00:56:14,806
or tilde CS50 actually refers

1308
00:56:14,806 --> 00:56:17,326
to those users' public
HTML directory.

1309
00:56:17,326 --> 00:56:19,186
So you just have to remember
that it's different at the black

1310
00:56:19,186 --> 00:56:21,546
and white window as
it is in the browser.

1311
00:56:22,276 --> 00:56:25,116
Alright, so this is a very
underwhelming webpage.

1312
00:56:25,116 --> 00:56:27,046
I feel like I didn't really
need to go to Harvard for this.

1313
00:56:27,366 --> 00:56:29,876
So, let's kinda of
do better than this.

1314
00:56:31,016 --> 00:56:32,236
So what can we do?

1315
00:56:32,236 --> 00:56:33,506
Well first, let's notice this.

1316
00:56:33,506 --> 00:56:36,286
Let me go over to
my own computer.

1317
00:56:36,286 --> 00:56:38,186
So now I'm on my Mac,
I'm using Chrome,

1318
00:56:38,346 --> 00:56:40,206
and I have a brand
new browser open here

1319
00:56:40,206 --> 00:56:41,636
and I've been visiting
Rob's eyes again.

1320
00:56:41,956 --> 00:56:45,976
Okay. So let me go
to this address now,

1321
00:56:46,026 --> 00:56:51,876
http://localhost/~jharvard
and then enter.

1322
00:56:52,466 --> 00:56:56,186
So notice, this does not work
because now when I'm on my Mac

1323
00:56:56,186 --> 00:56:58,576
or when I'm on my PC,
if I go to local host,

1324
00:56:58,576 --> 00:57:00,056
what's it obviously
referring to now,

1325
00:57:00,716 --> 00:57:02,726
with my own computer,
the local host.

1326
00:57:03,066 --> 00:57:05,806
But it turns out, and we've
not needed to know this before,

1327
00:57:05,806 --> 00:57:09,356
it turns out that your CS50
appliance has its own special IP

1328
00:57:09,356 --> 00:57:10,946
address, a number of that form,

1329
00:57:10,946 --> 00:57:17,776
W.X.Y.C. You can always
visit 192.168.56.50.

1330
00:57:17,776 --> 00:57:20,216
And this is documented and will
be on the next problem set,

1331
00:57:20,286 --> 00:57:22,336
so don't worry about
memorizing it.

1332
00:57:22,666 --> 00:57:25,226
But notice that this might
actually look a little creepily

1333
00:57:25,226 --> 00:57:26,826
like the one at home.

1334
00:57:26,826 --> 00:57:28,526
We're not at Harvard,
but back home

1335
00:57:28,526 --> 00:57:29,756
if you have your
own personal router

1336
00:57:29,756 --> 00:57:31,546
and you've ever seen
your IP address, well,

1337
00:57:31,546 --> 00:57:33,096
it turns out that
any IP that starts

1338
00:57:33,096 --> 00:57:36,146
with 192.168 is a
private IP address.

1339
00:57:36,326 --> 00:57:37,926
The world had the foresight

1340
00:57:37,926 --> 00:57:39,986
to realize sometimes
we don't want IPs

1341
00:57:39,986 --> 00:57:42,016
to be publicly accessible
on the real internet.

1342
00:57:42,306 --> 00:57:44,956
So this is a private one that
we adopted for our own purposes.

1343
00:57:44,956 --> 00:57:47,986
So if I hit enter now,
notice that now on my Mac,

1344
00:57:48,136 --> 00:57:51,866
I can visit the appliance as
though it's a random server

1345
00:57:51,866 --> 00:57:54,426
on the internet with an IP
address, and so now I'm kind

1346
00:57:54,426 --> 00:57:56,156
of simulating using
the internet.

1347
00:57:56,346 --> 00:57:59,106
And what you'll find for
final projects and Psets,

1348
00:57:59,396 --> 00:58:03,096
you all actually have counts
already on cloud.cs50.net

1349
00:58:03,286 --> 00:58:05,536
which is a server that's
actually on the internet.

1350
00:58:05,536 --> 00:58:06,976
You've probably seen
this page before

1351
00:58:06,976 --> 00:58:09,926
where you can actually put
your own accounts on here

1352
00:58:10,196 --> 00:58:12,026
so that eventually,
you'll be able

1353
00:58:12,026 --> 00:58:16,676
to have cloud.cs50.net/~malan
or if that's your username.

1354
00:58:16,936 --> 00:58:19,946
Or more interestingly for final
projects for just a few dollars

1355
00:58:19,946 --> 00:58:21,846
if you want, you can
buy your own domain name

1356
00:58:22,066 --> 00:58:25,076
and actually change a crazy
looking U address like that

1357
00:58:25,076 --> 00:58:28,306
to actually be something
simple like isawyouharvard.com.

1358
00:58:28,306 --> 00:58:29,946
And in fact when
[inaudible] made that website,

1359
00:58:30,186 --> 00:58:32,746
she had it living
on a cloud.cs50.net

1360
00:58:32,746 --> 00:58:35,176
in her own tilde
so and so account.

1361
00:58:35,446 --> 00:58:37,856
But we hid all of that
details for her automatically

1362
00:58:37,856 --> 00:58:39,496
so that she actually
had a sexier URL

1363
00:58:39,906 --> 00:58:41,626
that real people could
actually remember.

1364
00:58:41,626 --> 00:58:43,526
So this tilde stuff
is really just useful

1365
00:58:43,806 --> 00:58:45,066
for development purposes.

1366
00:58:45,536 --> 00:58:47,276
So let's go back
into the appliance

1367
00:58:47,376 --> 00:58:50,116
and let's actually start
making this webpage a little

1368
00:58:50,116 --> 00:58:51,006
more interesting.

1369
00:58:51,006 --> 00:58:52,866
So what are all these
things in turquoise?

1370
00:58:53,206 --> 00:58:57,166
So each of these tags, it has
an open tag and a closed tag,

1371
00:58:57,166 --> 00:58:59,106
and they again tell
the browser what to do.

1372
00:58:59,326 --> 00:59:00,986
Here is the title,
here is the body.

1373
00:59:01,226 --> 00:59:03,926
Well suppose we want to
make things a little more

1374
00:59:03,926 --> 00:59:07,236
interesting, and I actually
want to make something bold.

1375
00:59:07,506 --> 00:59:11,646
So I can say something
arbitrarily like hello in bold

1376
00:59:11,646 --> 00:59:17,286
as follows, open bracket B, and
then close bracket B over here.

1377
00:59:17,496 --> 00:59:19,896
So now again, notice the
symmetry, B denotes bold,

1378
00:59:20,126 --> 00:59:22,936
if I save this and then I go
back to my browser whether

1379
00:59:22,936 --> 00:59:25,656
on my Mac or on the
appliance and reload,

1380
00:59:26,146 --> 00:59:27,756
it's not quite a huge change,

1381
00:59:28,106 --> 00:59:30,926
but now you can see the
difference there a little bit.

1382
00:59:31,236 --> 00:59:33,186
So let's actually go
back into here and see

1383
00:59:33,186 --> 00:59:35,226
if we can't make this
a little uglier still.

1384
00:59:35,736 --> 00:59:36,946
So let me go into body,

1385
00:59:36,946 --> 00:59:39,156
and I wanna change
the background color.

1386
00:59:39,156 --> 00:59:40,556
Like this is pretty
lame webpage,

1387
00:59:40,556 --> 00:59:41,766
white background, black text.

1388
00:59:41,766 --> 00:59:43,286
Let's try to do something
more interesting.

1389
00:59:43,476 --> 00:59:46,756
Well, it turns out that HTML
tags can have attributes.

1390
00:59:46,756 --> 00:59:49,676
Attributes modify their behavior
and they look like this,

1391
00:59:50,116 --> 00:59:54,376
name equals quote unquote
value where name is the name

1392
00:59:54,376 --> 00:59:56,786
of an attribute and
value is how you want

1393
00:59:56,786 --> 00:59:58,046
to control the behavior
of the tag.

1394
00:59:58,626 --> 01:00:00,826
So this is not a real
attribute and value pair,

1395
01:00:00,826 --> 01:00:02,156
I need to do something
legitimate

1396
01:00:02,156 --> 01:00:04,976
like BG color for
background color.

1397
01:00:05,406 --> 01:00:09,206
>> And let's do something
crazy like pink, quote unquote,

1398
01:00:09,206 --> 01:00:11,126
let me go back to my browser.

1399
01:00:11,126 --> 01:00:13,806
After saving, reload
and now it's starting

1400
01:00:13,806 --> 01:00:14,936
to get hideous, right?

1401
01:00:15,006 --> 01:00:16,766
So now-- and let me just
increase the font size

1402
01:00:16,766 --> 01:00:18,926
artificially with my
browser just by zooming in.

1403
01:00:18,926 --> 01:00:20,756
I didn't fundamentally
change the webpage yet.

1404
01:00:21,116 --> 01:00:23,716
Let's now see if we can make
our text a little different.

1405
01:00:24,096 --> 01:00:26,336
So making text a little
different gets a little more

1406
01:00:26,336 --> 01:00:28,746
complicated these
days, but that's okay,

1407
01:00:28,746 --> 01:00:30,876
I'm gonna go ahead
and do the following.

1408
01:00:30,966 --> 01:00:33,506
I wanna make this whole sentence

1409
01:00:33,506 --> 01:00:35,706
or this whole phrase
a different color.

1410
01:00:36,016 --> 01:00:39,976
And so I can't really do this
right now 'cause I don't wanna

1411
01:00:39,976 --> 01:00:41,646
do this on the body
tag just yet.

1412
01:00:41,956 --> 01:00:44,076
So I'm actually gonna do this,
I'm gonna start making more

1413
01:00:44,076 --> 01:00:46,026
to this page than
just one line of text.

1414
01:00:46,296 --> 01:00:47,996
So I wanna create what
we'll call a division.

1415
01:00:48,336 --> 01:00:51,256
And div-- division
just makes sort

1416
01:00:51,256 --> 01:00:54,196
of an invisible rectangle
sort of like you might have

1417
01:00:54,196 --> 01:00:56,796
if you're a newspaper editor,
just trying to lay out articles

1418
01:00:56,796 --> 01:00:58,186
on a-- on a physical page.

1419
01:00:58,416 --> 01:01:02,716
Div just says create a virtual
rectangle here and apply a bunch

1420
01:01:02,716 --> 01:01:07,086
of stylization all to this tag--
all to this division at once.

1421
01:01:07,466 --> 01:01:09,476
So I wanna style this
division of the page.

1422
01:01:09,476 --> 01:01:10,956
Style equals quote unquote,

1423
01:01:11,186 --> 01:01:13,876
so notice this is an attribute
that's gonna modify the behavior

1424
01:01:13,876 --> 01:01:15,156
of the division of the page.

1425
01:01:15,366 --> 01:01:16,616
And I'm not gonna do
anything just yet,

1426
01:01:16,616 --> 01:01:18,016
no style for this element,

1427
01:01:18,216 --> 01:01:20,716
I just wanna do a little sanity
check back in the browser

1428
01:01:20,716 --> 01:01:23,156
to make sure that this
division didn't change anything

1429
01:01:23,156 --> 01:01:23,706
in a bad way.

1430
01:01:23,706 --> 01:01:27,086
So I'm gonna reload, and in
fact nothing bad has happened,

1431
01:01:27,086 --> 01:01:28,496
nothing visually has happened.

1432
01:01:28,496 --> 01:01:30,796
But let's do this, let me
right click or control click

1433
01:01:30,796 --> 01:01:33,466
on the webpage, got a view
page source and you can do this

1434
01:01:33,466 --> 01:01:34,856
on any website on the internet.

1435
01:01:35,126 --> 01:01:36,926
There is in fact my same page.

1436
01:01:37,146 --> 01:01:39,396
But realize and don't get
confused, I'm in a browser now.

1437
01:01:39,396 --> 01:01:41,976
I cannot start typing in
Firefox to change the webpage.

1438
01:01:42,246 --> 01:01:43,616
I need to change
it on the server

1439
01:01:43,616 --> 01:01:45,836
where in this case the server
is the appliance itself.

1440
01:01:45,926 --> 01:01:46,886
This is just read only.

1441
01:01:47,266 --> 01:01:52,036
So let's now change the style
here, let's go into gedit again

1442
01:01:52,166 --> 01:01:55,216
and let me go and say, you
know what, I want the color

1443
01:01:55,216 --> 01:01:57,836
of this text to be
let's say red.

1444
01:01:58,346 --> 01:01:59,936
So notice the difference here.

1445
01:01:59,936 --> 01:02:03,156
Anytime you're inside of quote
marks, specifically inside

1446
01:02:03,156 --> 01:02:05,176
of style attributes quote marks,

1447
01:02:05,496 --> 01:02:08,376
you actually say what's
called the property colon

1448
01:02:08,476 --> 01:02:09,316
and then something else.

1449
01:02:09,686 --> 01:02:11,876
And if this feels like this is
all of a sudden becoming a lot

1450
01:02:11,876 --> 01:02:13,886
to take in, honestly,
like HTML is kind

1451
01:02:13,886 --> 01:02:15,496
of really simple
at the end the day.

1452
01:02:15,736 --> 01:02:17,876
This is we've almost
seen already all

1453
01:02:17,876 --> 01:02:20,426
of the fundamental puzzle
pieces much like in scratch.

1454
01:02:20,426 --> 01:02:22,696
We spent like 20 minutes on
scratch and then you just kind

1455
01:02:22,696 --> 01:02:24,696
of poke around and see what
other puzzle pieces there are,

1456
01:02:25,066 --> 01:02:26,536
same idea is gonna apply here.

1457
01:02:26,796 --> 01:02:29,096
We'll show you a number of
tags this week and in section,

1458
01:02:29,326 --> 01:02:31,356
but till then realize
that Google is your friend

1459
01:02:31,356 --> 01:02:33,886
and you can find some other
feature just by poking around

1460
01:02:33,886 --> 01:02:35,266
or reading some manuals.

1461
01:02:35,266 --> 01:02:36,826
So I know from having
read the manual

1462
01:02:37,066 --> 01:02:39,616
that color colon red is
going to do exactly that.

1463
01:02:39,616 --> 01:02:41,356
So let me go back to my
browser after saving,

1464
01:02:41,356 --> 01:02:43,306
I'm gonna reload, alright.

1465
01:02:43,366 --> 01:02:45,086
So now it's getting
a little hideous.

1466
01:02:45,246 --> 01:02:47,046
So let's do another
line of text.

1467
01:02:47,346 --> 01:02:52,906
I'm gonna go in here and say
goodbye world exclamation point.

1468
01:02:52,906 --> 01:02:56,326
Now I'm gonna go back to
my browser and save in--

1469
01:02:56,796 --> 01:02:58,646
that's not really
what I intended here.

1470
01:02:58,646 --> 01:03:01,026
So we've got our
first little hiccup.

1471
01:03:01,446 --> 01:03:05,756
So Y is this second line
appearing on the same line

1472
01:03:05,756 --> 01:03:09,526
as the very first thing
I typed do you think.

1473
01:03:09,696 --> 01:03:12,006
It's the same paragraph,
it's in the same division,

1474
01:03:12,006 --> 01:03:15,186
or more specifically HTML is
really kind of dumb language

1475
01:03:15,186 --> 01:03:18,366
by design, like if it will only
make a browser do something,

1476
01:03:18,406 --> 01:03:20,596
if it tells the browser
to do that explicitly,

1477
01:03:20,876 --> 01:03:24,126
you can hit enter all day long
as I'll do here, enter, enter,

1478
01:03:24,126 --> 01:03:26,476
enter put pretty huge
amount of space, right,

1479
01:03:26,476 --> 01:03:29,556
just kind of trying to make the
browser notice my white space

1480
01:03:29,916 --> 01:03:30,906
but it doesn't have any effect.

1481
01:03:31,286 --> 01:03:34,326
But if I view the source
in Firefox, it's there,

1482
01:03:34,586 --> 01:03:36,066
it's just being ignored.

1483
01:03:36,346 --> 01:03:38,876
So I have to actually go back
and be a little more explicit.

1484
01:03:38,876 --> 01:03:43,036
If I actually want a line break,
so to speak, I actually have

1485
01:03:43,036 --> 01:03:46,246
to say something like
BR, which is the tag

1486
01:03:46,246 --> 01:03:47,576
in HTML for line break.

1487
01:03:47,836 --> 01:03:51,006
So here too you can see how it--
this HTML is very like pedantic,

1488
01:03:51,006 --> 01:03:53,556
it says, make this bold,
stop making this bold.

1489
01:03:53,686 --> 01:03:56,276
Put line break here, then
the next line of text.

1490
01:03:56,276 --> 01:03:59,916
But here too, a little
bit of asymmetry.

1491
01:04:00,206 --> 01:04:02,546
Notice that I don't
have to do this.

1492
01:04:03,896 --> 01:04:06,276
Textually not wrong, you
are allowed to do this

1493
01:04:06,766 --> 01:04:08,696
but this is just
kinda stupid, right.

1494
01:04:08,696 --> 01:04:10,936
It's a line break, it's
either there or it's not.

1495
01:04:10,936 --> 01:04:13,726
You can't sort of start breaking
the line and putting stuff

1496
01:04:13,726 --> 01:04:15,806
on the next line and
then stop midway through.

1497
01:04:15,926 --> 01:04:18,306
Right, you either move the
curser down or you don't,

1498
01:04:18,496 --> 01:04:20,426
so in this case, it's
kind of an anomaly.

1499
01:04:20,426 --> 01:04:23,676
This is an empty element so
to speak that doesn't have

1500
01:04:23,676 --> 01:04:25,166
or doesn't need a closed tag.

1501
01:04:25,166 --> 01:04:28,616
Now as an aside, if you
do read up on HTML online

1502
01:04:28,616 --> 01:04:31,486
and specifically a variant
of HTML called XHTML,

1503
01:04:31,766 --> 01:04:35,246
you'll see all of sorts of
conventions and for HTML5,

1504
01:04:35,246 --> 01:04:37,856
they simplified it, so what
we just did here is right,

1505
01:04:37,906 --> 01:04:39,646
not all the tags
needs to be closed.

1506
01:04:39,866 --> 01:04:41,216
But let's save this,
let's go back

1507
01:04:41,216 --> 01:04:44,286
to the browser here,
reload, okay.

1508
01:04:44,286 --> 01:04:47,376
So now, it's getting a little
more interesting visually

1509
01:04:47,556 --> 01:04:49,076
but this is not the
webpage I know.

1510
01:04:49,076 --> 01:04:51,576
I kind of like going to websites
'cause they're not dead end,

1511
01:04:51,576 --> 01:04:52,656
so I can click on things.

1512
01:04:52,906 --> 01:04:57,916
Well let's actually go here,
and let's say goodbye world.

1513
01:04:57,916 --> 01:04:59,476
Well, this is getting
inter-- uninteresting.

1514
01:04:59,476 --> 01:05:00,206
Let's get rid of this.

1515
01:05:00,206 --> 01:05:03,816
Actually let me save this
and let's put it down below

1516
01:05:03,816 --> 01:05:05,226
so I don't delete
all of our hard work.

1517
01:05:05,226 --> 01:05:09,206
I'm gonna make another division,
and just as a test, test, 1, 2,

1518
01:05:09,206 --> 01:05:11,836
3, I just wanna see where this
is gonna end up, but what's nice

1519
01:05:11,836 --> 01:05:15,596
about a division is it indeed
makes a rectangle invisibly

1520
01:05:15,886 --> 01:05:19,256
so this next division or
paragraph is lower on the page.

1521
01:05:19,666 --> 01:05:24,056
So let's go over here and
tweak this a little bit.

1522
01:05:24,926 --> 01:05:30,466
Let's say here are some
of my favorite websites.

1523
01:05:30,966 --> 01:05:36,416
So I can do this and then I can
say cs50.net and facebook.com,

1524
01:05:36,706 --> 01:05:39,586
save, but of course, you should
know where this is going.

1525
01:05:39,586 --> 01:05:40,946
This just looks atrocious,
right?

1526
01:05:40,946 --> 01:05:43,186
They're not clickable first
of all, and they're also not

1527
01:05:43,186 --> 01:05:45,966
on this next line, so let's
fix this in a couple of ways.

1528
01:05:46,196 --> 01:05:49,706
Well, it turns out that HTML
supports a bunch of features,

1529
01:05:49,706 --> 01:05:51,216
here's one that's
somewhat arbitrary.

1530
01:05:51,216 --> 01:05:53,666
They're something called
an unordered list, UL,

1531
01:05:53,736 --> 01:05:57,336
let me indent this and
close the unordered list.

1532
01:05:57,336 --> 01:05:59,336
And it's unordered in that
it's not gonna have numbers

1533
01:05:59,336 --> 01:06:01,516
associated with it, and
then in front of each

1534
01:06:01,516 --> 01:06:03,916
of these list items, I'm
gonna use the li tag.

1535
01:06:04,546 --> 01:06:08,416
So we'll see in just a
moment, open li, close li,

1536
01:06:08,566 --> 01:06:10,656
save, reloading my browser.

1537
01:06:10,656 --> 01:06:12,736
Okay, so it's still
hideous frankly

1538
01:06:12,996 --> 01:06:15,656
but you've seen the extent
of my web capabilities,

1539
01:06:15,656 --> 01:06:17,026
so this isn't all that far off.

1540
01:06:17,156 --> 01:06:19,536
So here we have now
an unordered list

1541
01:06:19,626 --> 01:06:21,556
but still this is not
hyperlinked, right?

1542
01:06:21,556 --> 01:06:23,456
This is not going anywhere
so let's make a link.

1543
01:06:23,456 --> 01:06:25,146
Well this too is
actually pretty easy.

1544
01:06:25,326 --> 01:06:28,056
You can't just save cs50.net,

1545
01:06:28,056 --> 01:06:29,556
you have to actually
tell the browser

1546
01:06:29,556 --> 01:06:31,466
to create a link to cs50.net.

1547
01:06:31,716 --> 01:06:34,836
So the tag for that
is the anchor tag A,

1548
01:06:34,876 --> 01:06:38,876
href for hyper-reference which
just means URL, quote, unquote,

1549
01:06:38,876 --> 01:06:45,176
http:// so we use S so, ://
dub dub dub dot cs50.net.

1550
01:06:45,676 --> 01:06:49,976
And then over here, I have
to close the anchor tag

1551
01:06:50,366 --> 01:06:53,706
so even though I have an
attribute on this anchor tag,

1552
01:06:53,926 --> 01:06:57,876
the name of the anchor tag is
just A, so when you close a tag,

1553
01:06:57,916 --> 01:07:00,386
even if it has attributes,
you don't copy

1554
01:07:00,386 --> 01:07:01,456
and paste the attributes again,

1555
01:07:01,456 --> 01:07:04,216
you just succinctly use
the name of the tag.

1556
01:07:04,636 --> 01:07:06,066
So let's do a quick
save and see if I'm

1557
01:07:06,066 --> 01:07:08,026
on the right track, reload.

1558
01:07:08,376 --> 01:07:10,406
So it's blue and kind
of ugly and old school

1559
01:07:10,406 --> 01:07:13,466
but if I click this
now, it actually does go

1560
01:07:13,466 --> 01:07:16,426
to the courses websites,
let me go back over here.

1561
01:07:16,656 --> 01:07:19,736
Now we can do facebook.com as
well, so let's zoom in here,

1562
01:07:20,226 --> 01:07:25,936
so we can go A, href equals
http dot dot facebook.com slash.

1563
01:07:26,456 --> 01:07:31,716
And then over here, we
can close this tag or,

1564
01:07:31,716 --> 01:07:34,166
you know, we can even-- right.

1565
01:07:34,436 --> 01:07:36,566
Who knows, watch
this, myspace.com.

1566
01:07:36,986 --> 01:07:39,446
So now that still works.

1567
01:07:39,906 --> 01:07:41,636
So notice this dichotomy.

1568
01:07:41,636 --> 01:07:43,276
Herein lies the wonderful
opportunity

1569
01:07:43,276 --> 01:07:44,466
for social engineering attack.

1570
01:07:44,796 --> 01:07:46,636
So all of us have
probably got emails

1571
01:07:46,636 --> 01:07:49,476
from like PayPal saying please
change your password or even

1572
01:07:49,476 --> 01:07:52,446
from harvard.edu webmaster or
whatever saying please fill

1573
01:07:52,446 --> 01:07:55,166
up this form and tell-- so
we can reset your password.

1574
01:07:55,956 --> 01:07:58,906
As of now, realize it is pretty
trivial to make a webpage

1575
01:07:58,906 --> 01:08:02,016
or even make an HTML based
email that says one thing

1576
01:08:02,126 --> 01:08:03,016
and goes somewhere else.

1577
01:08:03,266 --> 01:08:08,226
Case in point, this is what
myspace.com is apparently

1578
01:08:08,226 --> 01:08:08,706
these days.

1579
01:08:09,136 --> 01:08:12,116
So if we go back here
[laughter] notice the dichotomy.

1580
01:08:12,196 --> 01:08:15,296
So it says obviously
facebook.com, but if I hover

1581
01:08:15,296 --> 01:08:17,206
over this link, it's
gonna be a little small

1582
01:08:17,206 --> 01:08:20,806
but notice there are some
telling signs this is actually

1583
01:08:20,806 --> 01:08:22,746
going to take me to myspace.com,

1584
01:08:22,746 --> 01:08:25,426
and that's because the
destination is decoupled

1585
01:08:25,606 --> 01:08:26,676
from the actual label.

1586
01:08:26,676 --> 01:08:28,046
So if you've ever
been the recipient

1587
01:08:28,046 --> 01:08:29,086
of some phishing attack

1588
01:08:29,086 --> 01:08:30,846
or clicking a link
actually takes you somewhere

1589
01:08:30,846 --> 01:08:34,066
illegitimate, that's
actually how we can do this.

1590
01:08:34,516 --> 01:08:37,176
So, if we're making this ugly,
we might as well go all the way,

1591
01:08:37,176 --> 01:08:40,726
so let's actually--
no, no offense.

1592
01:08:41,686 --> 01:08:42,056
[Laughter] Okay.

1593
01:08:43,476 --> 01:08:45,466
So we have some eyes
on the desktop here,

1594
01:08:45,726 --> 01:08:48,476
but here's a problem, so
Rob's eyes are currently

1595
01:08:48,476 --> 01:08:51,426
on my own max desktop but
the appliance of course

1596
01:08:51,426 --> 01:08:54,056
or rather the-- my website
is inside of the appliance.

1597
01:08:54,486 --> 01:08:56,996
So how do I get Rob's
eyes into the appliance?

1598
01:08:56,996 --> 01:08:57,876
Well, there's a couple of ways

1599
01:08:57,876 --> 01:09:01,636
and frankly the easiest approach
is probably just to open Firefox

1600
01:09:01,746 --> 01:09:04,606
in the appliance and download
the eyes in the right location.

1601
01:09:04,606 --> 01:09:06,466
But you're not always gonna
think of that and maybe

1602
01:09:06,466 --> 01:09:09,076
on your own personal laptop,
you've got photos and whatnot

1603
01:09:09,076 --> 01:09:11,636
in your hard drive and you want
to upload those so to speak

1604
01:09:11,636 --> 01:09:14,056
into the appliance, you
can actually upload files

1605
01:09:14,056 --> 01:09:15,616
into the appliance very easily.

1606
01:09:15,876 --> 01:09:18,066
I only have a Mac running
here at the moment,

1607
01:09:18,066 --> 01:09:19,116
but let me just demo the Mac

1608
01:09:19,116 --> 01:09:20,976
and I'll point you toward
the PC instructions.

1609
01:09:20,976 --> 01:09:22,746
On a Mac, you can
go to the go menu.

1610
01:09:23,126 --> 01:09:24,626
You can then say
connect to a server

1611
01:09:24,746 --> 01:09:27,296
and even though it's the
CS50 appliance as of today,

1612
01:09:27,296 --> 01:09:29,236
it turns out it's been
a server all these time.

1613
01:09:29,576 --> 01:09:31,346
Oops, I shouldn't skip over
the most important detail.

1614
01:09:32,426 --> 01:09:34,666
So notice in the window,
I just have to type this,

1615
01:09:34,886 --> 01:09:38,186
the IP address of the
appliance, and then this thing,

1616
01:09:38,246 --> 01:09:40,266
this is a different
protocol, it's not HTTP,

1617
01:09:40,266 --> 01:09:41,446
it's something called Samba

1618
01:09:41,446 --> 01:09:44,686
which is Windows file
sharing, and so SMB://.

1619
01:09:44,686 --> 01:09:47,836
If I hit enter here,
notice in a moment,

1620
01:09:47,836 --> 01:09:50,886
it's doing connecting dot dot
dot dot dot dot dot dot dot,

1621
01:09:51,106 --> 01:09:54,826
and voila, now I have my
jharvard home directory mounted

1622
01:09:54,826 --> 01:09:55,266
on my Mac.

1623
01:09:55,546 --> 01:09:57,586
And you could do the exact
same thing in Windows,

1624
01:09:57,856 --> 01:09:59,106
so that you have a Window

1625
01:09:59,106 --> 01:10:01,626
on your own computer connecting
your computer with this

1626
01:10:01,806 --> 01:10:02,996
and you don't have
to use something

1627
01:10:02,996 --> 01:10:04,706
like dropbox or other tricks.

1628
01:10:04,956 --> 01:10:08,706
For the PC instructions, just
go to manual.cs50.net and go

1629
01:10:08,706 --> 01:10:10,186
to the appliances page for how

1630
01:10:10,186 --> 01:10:11,966
to transfer files
back and forth.

1631
01:10:12,256 --> 01:10:15,256
>> But the point here is I can
now open my index.html file,

1632
01:10:15,516 --> 01:10:19,406
I can now drag Rob's eyes into
this folder, I can now go back--

1633
01:10:19,406 --> 01:10:21,416
oops, back to the
appliance itself,

1634
01:10:21,416 --> 01:10:23,466
and let's just do a quick check.

1635
01:10:23,466 --> 01:10:26,406
I'm gonna go into
public HTML, ls-l.

1636
01:10:26,406 --> 01:10:29,956
Oh, there's gonna be a problem,
Rob's eyes are not accessible

1637
01:10:29,956 --> 01:10:33,256
on the internet yet or on the
appliance in this case here.

1638
01:10:33,606 --> 01:10:36,376
So let's actually see what
happens when this is the case.

1639
01:10:36,626 --> 01:10:40,296
Let me go, oh, we're not gonna
keep, we're not gonna put

1640
01:10:40,296 --> 01:10:41,536
in points for effort here,

1641
01:10:41,536 --> 01:10:42,896
might as well just
plop it at the bottom.

1642
01:10:43,386 --> 01:10:47,376
So let's do this, image for
image tag, source for the source

1643
01:10:47,376 --> 01:10:49,466
of the image, and then
I could put a URL.

1644
01:10:49,466 --> 01:10:51,466
But if I already have
the file locally,

1645
01:10:51,726 --> 01:10:55,216
I can just say eyes.png,
and now I can go over here,

1646
01:10:55,216 --> 01:10:59,166
I can back to my
browser, and reload

1647
01:10:59,166 --> 01:11:01,906
and unfortunately
we now see nothing.

1648
01:11:02,256 --> 01:11:04,596
And yet, if I go up here
to view page source,

1649
01:11:04,926 --> 01:11:08,506
Rob's eyes are definitely there,
at least in terms of HTML.

1650
01:11:08,716 --> 01:11:10,036
So how did we fix this before?

1651
01:11:10,036 --> 01:11:13,336
Well, before we did
chmod A plus--

1652
01:11:13,546 --> 01:11:17,516
oops, we did chmod A plus
X which was executability,

1653
01:11:17,686 --> 01:11:19,796
but an image is not
something that's executable.

1654
01:11:19,796 --> 01:11:21,476
It's not a directory
and it's not a program,

1655
01:11:21,476 --> 01:11:24,336
so what do you probably wanna
do in order to see an image.

1656
01:11:25,336 --> 01:11:27,126
Yeah, so you can
kind of guess, read.

1657
01:11:27,176 --> 01:11:32,256
So chmod plus R for
read, eyes.png ls

1658
01:11:32,256 --> 01:11:35,696
and now these two are
world readable so to speak,

1659
01:11:35,696 --> 01:11:36,786
the R is a good thing.

1660
01:11:37,106 --> 01:11:39,016
Let's go back to
the browser, reload,

1661
01:11:39,076 --> 01:11:40,966
and oh my gosh [laughter]
that's--

1662
01:11:41,936 --> 01:11:43,196
well, that's even
worse than usual,

1663
01:11:43,196 --> 01:11:45,896
but you really see the glints
in his eye now and that's just

1664
01:11:45,896 --> 01:11:48,716
because I zoomed on in this
page a moment ago in my browser,

1665
01:11:49,036 --> 01:11:50,736
but we can also make
this clickable

1666
01:11:50,736 --> 01:11:52,976
and remember we did this
really fast last time.

1667
01:11:53,286 --> 01:11:55,326
Just because the link
is normally text,

1668
01:11:55,326 --> 01:11:59,156
it doesn't mean it has to be so
we can do A href and I apologize

1669
01:11:59,156 --> 01:12:00,966
to Rob that it's getting
creepy that I know the URL

1670
01:12:00,966 --> 01:12:03,646
of his facebook profile
[laughter] now,

1671
01:12:03,856 --> 01:12:09,466
academic purposes,
so let's save that.

1672
01:12:09,466 --> 01:12:13,216
And now notice we've sandwiched
now an image tag inside

1673
01:12:13,216 --> 01:12:17,006
of the open A tag and the close
A tag, the href is going to go

1674
01:12:17,006 --> 01:12:18,806
to again, Rob Bowden's webpage.

1675
01:12:19,066 --> 01:12:21,766
If I now reload this,
doesn't look any different

1676
01:12:21,766 --> 01:12:25,176
but if I hover over his eye,
you see that the cursor appears.

1677
01:12:25,556 --> 01:12:29,306
If I now click on that glint
in his eye, I have to go

1678
01:12:29,426 --> 01:12:32,236
to Facebook where if I log in
I can now befriend Rob Bowden.

1679
01:12:32,556 --> 01:12:33,676
So why don't we leave
it on that note

1680
01:12:33,676 --> 01:12:34,826
and we'll see you
again on Wednesday.

1681
01:12:35,516 --> 01:12:42,650
[ Applause ]