1
00:00:00,000 --> 00:00:03,486
>> [MUSIC PLAYING]

2
00:00:03,486 --> 00:00:10,460

3
00:00:10,460 --> 00:00:14,250
>> DAVID J MALAN: This is CS50 and
this is the start of week 7.

4
00:00:14,250 --> 00:00:15,060
So welcome back.

5
00:00:15,060 --> 00:00:17,540
And you may recall that
in problem set four,

6
00:00:17,540 --> 00:00:21,510
there was a bit of a scavenger hunt
for some fabulous prizes whereby

7
00:00:21,510 --> 00:00:24,219
after you recover the photos of
staff both here and in New Haven,

8
00:00:24,219 --> 00:00:27,468
you were challenged to find as many of
those computer scientists as you could.

9
00:00:27,468 --> 00:00:29,550
And we've got a whole
bunch of submissions.

10
00:00:29,550 --> 00:00:31,930
Thought I'd share a few
with you here today.

11
00:00:31,930 --> 00:00:35,100
>> And we'll post all of these online.

12
00:00:35,100 --> 00:00:39,310
But in particular, I wanted to
draw your attention to-- well one,

13
00:00:39,310 --> 00:00:42,670
Sam was in quite a few of them
generally posing like this.

14
00:00:42,670 --> 00:00:45,750
But it appears that as of
this morning, the winner

15
00:00:45,750 --> 00:00:51,170
was a certain someone named Ken with
24 of the staff captured on camera

16
00:00:51,170 --> 00:00:54,600
or a few more when you take into
account multiple staff in the pictures.

17
00:00:54,600 --> 00:00:58,300
Pictured here is Ken next
to Mary in New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Now, Ken, though, turns
out is bit of a corner case

19
00:01:01,300 --> 00:01:02,880
that's not yet happened before.

20
00:01:02,880 --> 00:01:05,713
It turns out that it didn't occur
to me to put fine print in problem

21
00:01:05,713 --> 00:01:09,710
set four that says that staff are
ineligible for the fabulous prizes

22
00:01:09,710 --> 00:01:13,130
because Ken is, of course, one of
the photographers on our staff.

23
00:01:13,130 --> 00:01:16,820
Now, with that said, he
originally wrote me to say

24
00:01:16,820 --> 00:01:19,180
please do not post these photos online.

25
00:01:19,180 --> 00:01:21,630
I think in large part
because most of the photos

26
00:01:21,630 --> 00:01:24,499
that this photographer took look
a little something like this.

27
00:01:24,499 --> 00:01:25,040
And the like.

28
00:01:25,040 --> 00:01:28,990
>> But Ken would like me to reassure you
that he's a very good photographer,

29
00:01:28,990 --> 00:01:33,190
he is a professional, he takes
photos that are not blurry,

30
00:01:33,190 --> 00:01:37,270
that are better in focus, and he
took quite a few of our own staff.

31
00:01:37,270 --> 00:01:40,370
But rather than only acknowledge
Ken, what we thought we'd do

32
00:01:40,370 --> 00:01:43,390
is go through the list of
actual students who submitted.

33
00:01:43,390 --> 00:01:48,640
And it turns out that Lance with
15 photos as of this morning

34
00:01:48,640 --> 00:01:50,030
was our winner.

35
00:01:50,030 --> 00:01:55,730
>> And pictured here is Lance with Colton,
with Skaz, with myself, and with Sam.

36
00:01:55,730 --> 00:02:00,230
But then it turns out that as of
11:46 AM, so just a little bit ago,

37
00:02:00,230 --> 00:02:04,380
I went back to my email and found
that we had yet one more submission

38
00:02:04,380 --> 00:02:08,300
by a student named Bonnie
whose email said only this.

39
00:02:08,300 --> 00:02:10,800
Not going to lie, I'm
doing this during class.

40
00:02:10,800 --> 00:02:17,620
And then proceeded to attach just
14 photos, one shy of Lance's 15.

41
00:02:17,620 --> 00:02:22,690
>> But in Bonnie's photos, it turns
out were multiple staff members, Sam

42
00:02:22,690 --> 00:02:25,960
among them, so what we thought we
would do is acknowledge both of these.

43
00:02:25,960 --> 00:02:29,240
So in addition to getting the Dropbox
space that everyone who participated

44
00:02:29,240 --> 00:02:33,900
receives, these two sections will also
receive a nice catered lunch for them

45
00:02:33,900 --> 00:02:36,100
and their section
mates this coming week.

46
00:02:36,100 --> 00:02:38,970
And so you will hear from us,
Lance and Bonnie, about that.

47
00:02:38,970 --> 00:02:40,002
So big congrats to them.

48
00:02:40,002 --> 00:02:42,210
Now, those of you who would
like lunch more generally

49
00:02:42,210 --> 00:02:45,320
know that CS50 lunch in Cambridge
and New Haven is this Friday.

50
00:02:45,320 --> 00:02:48,510
Go to CS50's website slash RSVP.

51
00:02:48,510 --> 00:02:49,800
And now a word on seminars.

52
00:02:49,800 --> 00:02:50,730
More curricularly.

53
00:02:50,730 --> 00:02:52,490
So we're nearing the
point of the semester

54
00:02:52,490 --> 00:02:55,200
where you should start
thinking about final projects.

55
00:02:55,200 --> 00:02:59,309
And in fact, in just a bit, will
so-called pre proposals be due.

56
00:02:59,309 --> 00:03:01,850
So pre proposals are meant to
be pretty low impact and really

57
00:03:01,850 --> 00:03:04,109
just an opportunity for
you to compose a short note

58
00:03:04,109 --> 00:03:06,900
your teaching fellow to apprise
him or her what you're thinking you

59
00:03:06,900 --> 00:03:09,140
might want to do for your final project.

60
00:03:09,140 --> 00:03:11,730
>> Now, many students end up
doing web based final projects.

61
00:03:11,730 --> 00:03:13,800
And of course, we're just
now last week in this

62
00:03:13,800 --> 00:03:15,890
and beyond diving into web programming.

63
00:03:15,890 --> 00:03:18,200
So not to worry if you
have absolutely no idea how

64
00:03:18,200 --> 00:03:21,594
you would build the ideas that
you might have in your mind.

65
00:03:21,594 --> 00:03:24,510
This is really just a forcing function
to get you thinking and talking

66
00:03:24,510 --> 00:03:25,650
with your TF about it.

67
00:03:25,650 --> 00:03:28,810
But to help you with that, and
with final projects ultimately,

68
00:03:28,810 --> 00:03:31,750
know that CS50 has a tradition
of offering seminars.

69
00:03:31,750 --> 00:03:36,084
>> And these are optional, hands on,
or lecture based on opportunities

70
00:03:36,084 --> 00:03:39,000
to learn more about topics that are
a little ancillary to the course's

71
00:03:39,000 --> 00:03:43,310
syllabus, but nonetheless wonderful
material to drive final projects.

72
00:03:43,310 --> 00:03:46,840
And so this is the list that's
CS50 staff here in New Haven

73
00:03:46,840 --> 00:03:48,600
have come up with for
this year about iOS

74
00:03:48,600 --> 00:03:50,730
programming, Android
programming, game development,

75
00:03:50,730 --> 00:03:54,480
and bunches of more tools
and languages and techniques.

76
00:03:54,480 --> 00:03:56,780
>> So keep an eye on the CS50's website.

77
00:03:56,780 --> 00:04:00,110
And in the meantime, if you'd like to
register your interest in any of these,

78
00:04:00,110 --> 00:04:02,510
go to CS50's slash register.

79
00:04:02,510 --> 00:04:05,770
And we will then follow up as to the
days and flight times and locations

80
00:04:05,770 --> 00:04:09,090
and everything-- most everything will
be streamed and also available on demand

81
00:04:09,090 --> 00:04:11,750
after if you cannot actually make it.

82
00:04:11,750 --> 00:04:15,800
So without further ado, we
left off last time with GET.

83
00:04:15,800 --> 00:04:19,610
>> And this was like the message that was
inside of the virtual envelope, recall,

84
00:04:19,610 --> 00:04:23,960
that we passed from router to router to
router between a web browser and a web

85
00:04:23,960 --> 00:04:24,487
server.

86
00:04:24,487 --> 00:04:26,695
And that message looked a
little something like this.

87
00:04:26,695 --> 00:04:29,700
This was the more arcane message that
was actually inside of an envelope

88
00:04:29,700 --> 00:04:34,440
written on a piece of paper whose
first line says literally, get slash.

89
00:04:34,440 --> 00:04:37,830
>> And just as a sanity check,
what did slash denote?

90
00:04:37,830 --> 00:04:40,455
What does slash mean when
requesting a website?

91
00:04:40,455 --> 00:04:43,070

92
00:04:43,070 --> 00:04:44,250
You request it all the time.

93
00:04:44,250 --> 00:04:47,333
Most any time you visit a website, you
don't actually type in a file name.

94
00:04:47,333 --> 00:04:50,960
You probably just go to Facebook.com,
enter, gmail.com, or the like.

95
00:04:50,960 --> 00:04:52,260
And what does slash represent?

96
00:04:52,260 --> 00:04:53,506
What file?

97
00:04:53,506 --> 00:04:54,630
Or what page, specifically?

98
00:04:54,630 --> 00:04:59,642

99
00:04:59,642 --> 00:05:00,720
>> The index, yeah.

100
00:05:00,720 --> 00:05:01,810
So the default page.

101
00:05:01,810 --> 00:05:04,810
So if you don't specify a file
name as we'll start to see,

102
00:05:04,810 --> 00:05:07,750
you're actually just requesting
give me the default page of Facebook

103
00:05:07,750 --> 00:05:10,800
or give me my inbox or give
me the default page of news

104
00:05:10,800 --> 00:05:12,510
on CNN's website or the like.

105
00:05:12,510 --> 00:05:15,220
And a server then responds to
that message with something

106
00:05:15,220 --> 00:05:18,420
like this, saying yes, I
speak HTTP version 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, which is a status
code that we humans rarely

108
00:05:21,130 --> 00:05:22,790
ever see because it's good.

109
00:05:22,790 --> 00:05:26,640
Because it means OK, the request
was received and handled properly.

110
00:05:26,640 --> 00:05:28,960
And the content type
apparently in the response

111
00:05:28,960 --> 00:05:31,170
is quite often, but not always, text.

112
00:05:31,170 --> 00:05:32,580
And specifically, HTML.

113
00:05:32,580 --> 00:05:34,760
And that's actually
where we look at today.

114
00:05:34,760 --> 00:05:37,140
>> So in fact, I'm going to go
ahead and open up a browser.

115
00:05:37,140 --> 00:05:40,410
I'm going to use Chrome, you can use
most any browser in the weeks to come.

116
00:05:40,410 --> 00:05:42,410
We generally recommend Chrome
because it's particularly

117
00:05:42,410 --> 00:05:43,750
good for software developers.

118
00:05:43,750 --> 00:05:46,070
It's got a lot of built in
tools that make it easier

119
00:05:46,070 --> 00:05:49,800
to develop not only HTML and CSS,
things we'll start talking about today,

120
00:05:49,800 --> 00:05:51,530
but also other languages as well.

121
00:05:51,530 --> 00:05:55,530
>> And I'm going to go ahead and go to--
I'm going to Control click or right

122
00:05:55,530 --> 00:05:57,210
click anywhere on a web page.

123
00:05:57,210 --> 00:05:59,070
And I'm going to go to Inspect Element.

124
00:05:59,070 --> 00:06:03,850
And I'm going to tweak my
screen just a little bit here.

125
00:06:03,850 --> 00:06:05,790
Let me move this to the bottom.

126
00:06:05,790 --> 00:06:08,140
So this is what's called
Chrome's Inspector.

127
00:06:08,140 --> 00:06:11,010
So this is like a debugging
tool built into Chrome.

128
00:06:11,010 --> 00:06:13,520
>> All of you already have this
if you've been using Chrome.

129
00:06:13,520 --> 00:06:17,169
And it allows you to see what's going
on underneath the hood of some web page.

130
00:06:17,169 --> 00:06:19,210
So let's actually take a
look at this as follows.

131
00:06:19,210 --> 00:06:21,251
It has way more features
and we care about today.

132
00:06:21,251 --> 00:06:22,760
But there's these tabs over here.

133
00:06:22,760 --> 00:06:25,890
Elements, network, sources,
timeline, and some other stuff.

134
00:06:25,890 --> 00:06:27,800
I'm going to click on
Network for a moment.

135
00:06:27,800 --> 00:06:30,500
>> And it's a little overwhelming
at first glance here.

136
00:06:30,500 --> 00:06:34,190
But what I'm going to do is let
me simplify it a little bit.

137
00:06:34,190 --> 00:06:37,560
I'm going to turn on the
recording light so that it's red.

138
00:06:37,560 --> 00:06:39,140
And I'm going to say preserve log.

139
00:06:39,140 --> 00:06:41,015
And this is just a little
thing I figured out

140
00:06:41,015 --> 00:06:44,120
over time that's going to save
everything that happens in the browser.

141
00:06:44,120 --> 00:06:50,030
And now I'm going to go
to http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Actually, let's do www
for good measure, slash.

143
00:06:52,690 --> 00:06:53,643
Enter.

144
00:06:53,643 --> 00:06:56,180
So a URL that many of
you might have visited.

145
00:06:56,180 --> 00:06:58,830
And now Facebook's web
page comes up at the top.

146
00:06:58,830 --> 00:07:02,350
And then a whole bunch of
stuff flew by at the bottom.

147
00:07:02,350 --> 00:07:04,830
And in fact, it turns out that
when you visit Facebook.com,

148
00:07:04,830 --> 00:07:09,320
you're not just making one HTTP request,
it turns out that going to Facebook.com

149
00:07:09,320 --> 00:07:14,320
sends 41 of those envelopes,
each with its own get request,

150
00:07:14,320 --> 00:07:18,360
as indicated, albeit behind the screen
here, at the bottom of the screen,

151
00:07:18,360 --> 00:07:24,040
it indicates that, indeed, my
browser made 41 the requests.

152
00:07:24,040 --> 00:07:29,689
>> And in total, it transferred 861
kilobytes and it took for some reason

153
00:07:29,689 --> 00:07:31,730
as many as eight seconds
to download all of that.

154
00:07:31,730 --> 00:07:33,790
So that's actually a little weird
that Facebook's site would take that

155
00:07:33,790 --> 00:07:35,600
long, but so be it in this case.

156
00:07:35,600 --> 00:07:39,520
Now, all of this I don't really care
about except for the topmost request.

157
00:07:39,520 --> 00:07:46,440
So let's go to this one right here
and let me zoom out for just a moment.

158
00:07:46,440 --> 00:07:47,754
>> And let me zoom in on this.

159
00:07:47,754 --> 00:07:50,670
So what I've done at left even though
there's a lot going on over here

160
00:07:50,670 --> 00:07:53,360
is I've highlighted
Facebook.com and then

161
00:07:53,360 --> 00:07:56,540
notice that I'm scrolling down,
scrolling down, scrolling down,

162
00:07:56,540 --> 00:07:58,330
to request headers.

163
00:07:58,330 --> 00:08:01,720
And you'll see that Chrome is showing
me essentially the inner contents

164
00:08:01,720 --> 00:08:02,810
of the request I made.

165
00:08:02,810 --> 00:08:06,130
It's not formatting in quite the same
way, but notice there's mention of get,

166
00:08:06,130 --> 00:08:09,481
notice there's mention of the host,
Facebook.com, the path, or slash,

167
00:08:09,481 --> 00:08:10,730
which is the file I requested.

168
00:08:10,730 --> 00:08:12,930
>> And then if I scroll
back up, we'll actually

169
00:08:12,930 --> 00:08:17,270
see that what Facebook returned
to me is all of these headers.

170
00:08:17,270 --> 00:08:21,040
So inside of that virtual envelope
indeed are a lot of key value pairs.

171
00:08:21,040 --> 00:08:23,130
A word, a colon, and then a value.

172
00:08:23,130 --> 00:08:25,050
A word, a colon, and a value.

173
00:08:25,050 --> 00:08:26,160
These are called headers.

174
00:08:26,160 --> 00:08:31,860
And there's way more detail here than
we actually care about right now.

175
00:08:31,860 --> 00:08:33,750
>> But this is second to
last one down there,

176
00:08:33,750 --> 00:08:38,809
notice, that Facebook.com's server,
indeed said here comes some text HTML.

177
00:08:38,809 --> 00:08:41,409
So all of this is to say
that when you request a web

178
00:08:41,409 --> 00:08:44,300
page from a browser to a
server, that server responds

179
00:08:44,300 --> 00:08:47,630
with an envelope of its own
inside of which is text.

180
00:08:47,630 --> 00:08:49,020
In other words, HTML.

181
00:08:49,020 --> 00:08:50,590
HyperText Markup Language.

182
00:08:50,590 --> 00:08:53,200
Which is another language
that we introduce today

183
00:08:53,200 --> 00:08:57,740
that humans or computers generate
in order to implement web pages.

184
00:08:57,740 --> 00:08:59,580
>> Specifically, let's look at this.

185
00:08:59,580 --> 00:09:03,277
I'm going to now go back
to Facebook's website.

186
00:09:03,277 --> 00:09:05,360
And I'm going to just
control click or right click

187
00:09:05,360 --> 00:09:07,634
and click on View Page Source.

188
00:09:07,634 --> 00:09:10,550
And even if you don't use Chrome,
IE can do this, Firefox can do this,

189
00:09:10,550 --> 00:09:14,060
Safari can do this, even though the menu
options might look a little different.

190
00:09:14,060 --> 00:09:18,990
And this is the HTML that Mark and
company at Facebook have written.

191
00:09:18,990 --> 00:09:24,640
>> And to collectively, this language here
implements the blue and the white page

192
00:09:24,640 --> 00:09:26,370
that we saw a moment ago.

193
00:09:26,370 --> 00:09:28,030
Now, this is a bit overwhelming.

194
00:09:28,030 --> 00:09:31,400
But if we look up at top left, we're
going to start to see some patterns.

195
00:09:31,400 --> 00:09:34,140
It looks like there's a lot
of these open angle bracket

196
00:09:34,140 --> 00:09:35,970
and then there's this keyword HTML.

197
00:09:35,970 --> 00:09:38,330
Here's another open
angle bracket and head.

198
00:09:38,330 --> 00:09:41,560
>> Here is, if we scroll down
and down and down, I'm

199
00:09:41,560 --> 00:09:43,820
going to go ahead and try
to search for something.

200
00:09:43,820 --> 00:09:48,510
There way over on the right
here is open bracket body.

201
00:09:48,510 --> 00:09:50,800
And recall from last
time that we proposed

202
00:09:50,800 --> 00:09:53,364
that the simplest web page
that a human might write

203
00:09:53,364 --> 00:09:55,030
might look a little something like this.

204
00:09:55,030 --> 00:09:58,430
Open HTML tag, open head
tag, open title tag,

205
00:09:58,430 --> 00:10:03,230
then closed title, closed head, open
body tag, some text, closed body,

206
00:10:03,230 --> 00:10:04,720
closed HTML.

207
00:10:04,720 --> 00:10:06,290
>> But a pause here for just a moment.

208
00:10:06,290 --> 00:10:09,030
This code, even if you've
never written it before

209
00:10:09,030 --> 00:10:11,864
but still don't quite understand
what's going on, looks pretty good.

210
00:10:11,864 --> 00:10:12,821
Right, it's very clean.

211
00:10:12,821 --> 00:10:14,120
It's very stylistically nice.

212
00:10:14,120 --> 00:10:16,190
A lot of indentation and white space.

213
00:10:16,190 --> 00:10:18,020
Facebook's is not.

214
00:10:18,020 --> 00:10:23,190
So why is Facebook so much
worse than I at writing HTML?

215
00:10:23,190 --> 00:10:24,310
Apparently.

216
00:10:24,310 --> 00:10:26,899
>> Right, this is like one
out of five for style.

217
00:10:26,899 --> 00:10:29,315
There's a compelling reason
for them to cut these corners.

218
00:10:29,315 --> 00:10:31,069

219
00:10:31,069 --> 00:10:33,860
All right, so they don't want to
make it easier for you to read it.

220
00:10:33,860 --> 00:10:36,940
So in some sense, they're
obfuscating it, sort of scrambling it

221
00:10:36,940 --> 00:10:40,260
at least aesthetically so
that it's harder for Myspace

222
00:10:40,260 --> 00:10:42,705
to go and rip off their
homepage and the HTML for it.

223
00:10:42,705 --> 00:10:45,080
It turns out that with programs
though, including Chrome,

224
00:10:45,080 --> 00:10:47,020
we can clean this up super easily.

225
00:10:47,020 --> 00:10:49,420
So it's not quite that as the reason.

226
00:10:49,420 --> 00:10:51,290
What else might be the cause.

227
00:10:51,290 --> 00:10:51,790
Yeah.

228
00:10:51,790 --> 00:10:54,680

229
00:10:54,680 --> 00:10:55,890
Yeah, white space costs data.

230
00:10:55,890 --> 00:10:56,598
What do you mean?

231
00:10:56,598 --> 00:11:02,250

232
00:11:02,250 --> 00:11:02,979
Yeah, exactly.

233
00:11:02,979 --> 00:11:06,020
If you hit the Tab key a lot or the
space bar, consider the implications.

234
00:11:06,020 --> 00:11:10,060
So every key on your keyboard is an
[INAUDIBLE] represented as one byte.

235
00:11:10,060 --> 00:11:14,560
>> So suppose that Mark or any of the devs
these days hits the spacebar just once

236
00:11:14,560 --> 00:11:17,899
in this HTML page that
represents Facebook's homepage.

237
00:11:17,899 --> 00:11:19,690
And Facebook has a lot
of users these days.

238
00:11:19,690 --> 00:11:24,030
So suppose that Facebook's homepage
is visited by a billion people today.

239
00:11:24,030 --> 00:11:27,020
And someone at Facebook has
hit the space bar just once.

240
00:11:27,020 --> 00:11:29,890
>> So one additional byte,
a billion requests,

241
00:11:29,890 --> 00:11:32,790
how much more data is Facebook
transferring over the internet

242
00:11:32,790 --> 00:11:37,160
because someone hit the
spacebar on his or her keyboard?

243
00:11:37,160 --> 00:11:41,660
A billion bytes, or one gigabyte of
data is being sent from Facebook servers

244
00:11:41,660 --> 00:11:43,626
to people around the
world for no good reason.

245
00:11:43,626 --> 00:11:44,750
Now, that's just one space.

246
00:11:44,750 --> 00:11:48,866
>> Imagine if we actually clean this
thing up and indented it and added

247
00:11:48,866 --> 00:11:50,990
a lot of white space and
tab characters and spaces,

248
00:11:50,990 --> 00:11:53,656
you end up spending gigabytes,
if not terra bytes more of space.

249
00:11:53,656 --> 00:11:56,640
And so super common in the
actual world of web development

250
00:11:56,640 --> 00:11:58,950
is to minify your code.

251
00:11:58,950 --> 00:12:01,280
And we'll eventually see
how you might do this.

252
00:12:01,280 --> 00:12:04,630
>> But today, we'll start writing code
that's actually readable by us humans.

253
00:12:04,630 --> 00:12:10,120
It turns out, though, if you go back
to this tool in Chrome Inspect Element,

254
00:12:10,120 --> 00:12:12,030
previously, we were on the Network tab.

255
00:12:12,030 --> 00:12:15,430
It turns out that if you go to the
elements tab, what you actually see

256
00:12:15,430 --> 00:12:19,230
is Chrome's pretty printed
version of that same HTML.

257
00:12:19,230 --> 00:12:20,640
So we've deobfuscated it.

258
00:12:20,640 --> 00:12:22,472
So it's no match for a computer.

259
00:12:22,472 --> 00:12:24,430
And now you can actually
click around and start

260
00:12:24,430 --> 00:12:27,630
to see the hierarchy that is a web page.

261
00:12:27,630 --> 00:12:28,780
So let's actually do this.

262
00:12:28,780 --> 00:12:32,120
I'm going to go ahead and open up on
my Mac a program called text edit.

263
00:12:32,120 --> 00:12:35,490
And recall that this is just
a super simple text program.

264
00:12:35,490 --> 00:12:37,490
Windows has notepad.exe.

265
00:12:37,490 --> 00:12:39,820
And I'm going to verbatim
type the following.

266
00:12:39,820 --> 00:12:44,650
Doc type HTML, open bracket
HTML, closed bracket HTML,

267
00:12:44,650 --> 00:12:49,000
we have the head of the page here,
the end of the head of the page here,

268
00:12:49,000 --> 00:12:52,310
a title will be like, hello world.

269
00:12:52,310 --> 00:12:56,660
>> And then down here, we need
the body of the web page.

270
00:12:56,660 --> 00:12:58,050
Closed body.

271
00:12:58,050 --> 00:13:00,700
And then in here, hello world.

272
00:13:00,700 --> 00:13:01,270
All right.

273
00:13:01,270 --> 00:13:03,350
So we've written a super fast web page.

274
00:13:03,350 --> 00:13:06,675
I'm going to save it as
hello.html on my desktop.

275
00:13:06,675 --> 00:13:09,050
My Mac's going to complain,
thinking that, wait a minute,

276
00:13:09,050 --> 00:13:11,091
this is a text file, do
you want to call it .txt?

277
00:13:11,091 --> 00:13:13,300
But no, I want to use dot HTML.

278
00:13:13,300 --> 00:13:16,140
>> And then what's nice if I
just double click this file,

279
00:13:16,140 --> 00:13:18,600
hello.html, here's my web page.

280
00:13:18,600 --> 00:13:22,564
Unfortunately, I am the
only person in the world

281
00:13:22,564 --> 00:13:23,980
who can visit this page right now.

282
00:13:23,980 --> 00:13:26,734
Because where does it live apparently?

283
00:13:26,734 --> 00:13:27,650
It's on my Mac, right?

284
00:13:27,650 --> 00:13:28,470
Which is useless.

285
00:13:28,470 --> 00:13:30,390
Like no one in this room
let alone on the internet

286
00:13:30,390 --> 00:13:31,598
can actually visit that page.

287
00:13:31,598 --> 00:13:33,820
So today, we need to
introduce another element.

288
00:13:33,820 --> 00:13:36,720
>> And to do this, I'm going to
go ahead and open up cloud 9.

289
00:13:36,720 --> 00:13:40,090
So cloud 9 is of course a
cloud based service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- That has all of our workspaces
running somewhere on the internet.

291
00:13:44,890 --> 00:13:48,330
And that means that all of our files
are publicly accessible already.

292
00:13:48,330 --> 00:13:49,830
So let's go ahead and do this.

293
00:13:49,830 --> 00:13:53,670
I'm going to go ahead and
create a new file NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
I'm going to save it as before
as hello.html and click save.

295
00:13:58,819 --> 00:14:01,860
And now just to save time, I'm going
to go ahead and copy paste this code

296
00:14:01,860 --> 00:14:03,470
rather than retype it.

297
00:14:03,470 --> 00:14:04,550
And save it.

298
00:14:04,550 --> 00:14:07,550
And so now I have a
file called hello.html.

299
00:14:07,550 --> 00:14:09,710
But how do I actually
open it as a web page?

300
00:14:09,710 --> 00:14:14,120
Well, it turns out the built in to CS50
IDE is not only a compiler like clang

301
00:14:14,120 --> 00:14:16,670
and a debugger like GDB and
bunches of other programs,

302
00:14:16,670 --> 00:14:21,140
there's actually a full fledged
web server running within CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> All of you, that is to say,
have your own web server.

304
00:14:23,900 --> 00:14:26,850
And a web server is just a piece
of software whose purpose in life

305
00:14:26,850 --> 00:14:28,220
is to serve up web pages.

306
00:14:28,220 --> 00:14:32,490
To listen for requests from browsers and
respond with little virtual envelopes

307
00:14:32,490 --> 00:14:35,290
inside of which is the
content that I've written.

308
00:14:35,290 --> 00:14:38,372
So this web server is
actually free and open source.

309
00:14:38,372 --> 00:14:40,830
Where open source just means
software that someone else has

310
00:14:40,830 --> 00:14:43,480
written that all of us can
actually see and download and even

311
00:14:43,480 --> 00:14:44,780
change the source code.

312
00:14:44,780 --> 00:14:46,150
And it's called Apache.

313
00:14:46,150 --> 00:14:51,450
>> And we've made it a little easier to
use in CS50IDE by calling it Apache 50.

314
00:14:51,450 --> 00:14:53,780
So that it can actually
understand the following.

315
00:14:53,780 --> 00:14:56,560
I'm going to say Apache 50 start.

316
00:14:56,560 --> 00:14:58,910
And then I'm just going to say dot.

317
00:14:58,910 --> 00:15:01,080
And we see some somewhat
arcane message saying

318
00:15:01,080 --> 00:15:04,640
setting Apache's document [? group ?]
to home, ubuntu, whatever that is,

319
00:15:04,640 --> 00:15:05,770
slash workspace.

320
00:15:05,770 --> 00:15:08,280
Starting web server
Apache 2 successfully.

321
00:15:08,280 --> 00:15:11,330
>> So long story short, I
have just pushed a button

322
00:15:11,330 --> 00:15:18,000
and turned on a web server who's now
listening on the internet on TCP port

323
00:15:18,000 --> 00:15:20,587
80 at a specific address.

324
00:15:20,587 --> 00:15:22,420
And it says here, and
this will change based

325
00:15:22,420 --> 00:15:26,550
on your username and other factors,
but notice now if I click this,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard and so and
so, notice that all this time

327
00:15:30,211 --> 00:15:31,960
for the past several
weeks, you might have

328
00:15:31,960 --> 00:15:35,200
noticed that your own username
is embedded in the top right hand

329
00:15:35,200 --> 00:15:37,130
corner of CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> And that actually has been all this
time the address at which you can

331
00:15:41,050 --> 00:15:43,574
visit all of your files via the web.

332
00:15:43,574 --> 00:15:45,990
Until now, it hasn't mattered,
because in C, you generally

333
00:15:45,990 --> 00:15:48,073
want things running in a
terminal, not on the web.

334
00:15:48,073 --> 00:15:50,800
But today, we start
writing web based code

335
00:15:50,800 --> 00:15:53,350
that we do want
accessible at public URLs.

336
00:15:53,350 --> 00:15:56,100
So what I'm going to
do is click this URL.

337
00:15:56,100 --> 00:16:00,880
>> And notice that I see a fairly
ugly index, a directory listing,

338
00:16:00,880 --> 00:16:04,090
but what file jumps out at you probably?

339
00:16:04,090 --> 00:16:05,210
Hello.html.

340
00:16:05,210 --> 00:16:07,870
That's because I saved
the file in my workspace.

341
00:16:07,870 --> 00:16:12,310
And what I've told Apache the web server
is look in David's workspace directory.

342
00:16:12,310 --> 00:16:15,300
And let anyone in the
world see those files.

343
00:16:15,300 --> 00:16:19,050
>> And indeed, if I now
click on hello.html,

344
00:16:19,050 --> 00:16:22,180
I see within this tab exactly that file.

345
00:16:22,180 --> 00:16:26,430
Now notice, cloud 9's doing
something a little helpful for us.

346
00:16:26,430 --> 00:16:29,480
Within CS50 IDE, notice there's
suddenly an address bar.

347
00:16:29,480 --> 00:16:33,690
That's because even though we're
using Chrome to visit CS50IDE,

348
00:16:33,690 --> 00:16:37,940
inside of CS50IDE is its own
version of a web browser right now.

349
00:16:37,940 --> 00:16:40,820
And so rather than
complicate things as such,

350
00:16:40,820 --> 00:16:42,955
I'm going to go ahead
and just copy this URL.

351
00:16:42,955 --> 00:16:45,330
I'm going to go ahead and just
open my own Chrome window.

352
00:16:45,330 --> 00:16:47,800
So there's no magic here, no CS50IDE.

353
00:16:47,800 --> 00:16:51,800
I'm just going to literally paste
my J Harvard URL and hit Enter.

354
00:16:51,800 --> 00:16:54,750
And voila, now I, and
in theory, everyone

355
00:16:54,750 --> 00:16:57,700
on the internet, if I've configured
permissions appropriately,

356
00:16:57,700 --> 00:16:58,720
can visit this file.

357
00:16:58,720 --> 00:17:03,230
And so now, if I said
hello.html, voila, there

358
00:17:03,230 --> 00:17:06,366
is my incredibly underwhelming web page.

359
00:17:06,366 --> 00:17:07,740
So let's do a quick sanity check.

360
00:17:07,740 --> 00:17:09,710
Because all of that
is conceptual set up.

361
00:17:09,710 --> 00:17:13,180
And we've actually not really
taught you how to write HTML per se.

362
00:17:13,180 --> 00:17:16,084
Any questions thus far
on what's just happened?

363
00:17:16,084 --> 00:17:18,549

364
00:17:18,549 --> 00:17:19,049
Yes.

365
00:17:19,049 --> 00:17:24,290

366
00:17:24,290 --> 00:17:25,800
Does CS50 own these web pages?

367
00:17:25,800 --> 00:17:26,460
In what sense?

368
00:17:26,460 --> 00:17:28,947

369
00:17:28,947 --> 00:17:29,530
Good question.

370
00:17:29,530 --> 00:17:32,429
So CS50's owns CS50.io.

371
00:17:32,429 --> 00:17:33,970
We've indeed bought that domain name.

372
00:17:33,970 --> 00:17:37,240
And by nature of you guys
logging into CS50IDE,

373
00:17:37,240 --> 00:17:39,270
you all get what's called a subdomain.

374
00:17:39,270 --> 00:17:46,840
>> So IDE50-malan, or IDE50-Rob.CS50.io,
that's your unique address within

375
00:17:46,840 --> 00:17:47,730
our domain name.

376
00:17:47,730 --> 00:17:50,850
So for the purposes of the course,
you have your own unique address.

377
00:17:50,850 --> 00:17:55,150
But we've simplified things by
buying the top level domain, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I/O and then everyone else is
inside of that, so to speak.

379
00:17:58,050 --> 00:17:59,890
And we'll come back to that
in a couple of weeks probably,

380
00:17:59,890 --> 00:18:01,930
especially at final project
time, when some of you

381
00:18:01,930 --> 00:18:03,596
might want to get your own domain names.

382
00:18:03,596 --> 00:18:06,270
It's actually relatively
straightforward.

383
00:18:06,270 --> 00:18:06,770
All right.

384
00:18:06,770 --> 00:18:07,880
So let's now do this.

385
00:18:07,880 --> 00:18:11,910
I'm going to go back into
CS50IDE, where my file right now,

386
00:18:11,910 --> 00:18:14,710
hello.html, is not all that interesting.

387
00:18:14,710 --> 00:18:17,130
I'd like to do something
a little nicer than that.

388
00:18:17,130 --> 00:18:19,440
So I'm going to do something like this.

389
00:18:19,440 --> 00:18:21,510
Let me open paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
So this is a file I wrote in advance.

391
00:18:23,560 --> 00:18:26,480
At the top of it, like
always, we have comments.

392
00:18:26,480 --> 00:18:28,730
But in HTML, comments
look a little different.

393
00:18:28,730 --> 00:18:33,270
On line three and line 14, you
see the syntax for start a comment

394
00:18:33,270 --> 00:18:34,020
and end a comment.

395
00:18:34,020 --> 00:18:36,820
>> But none of the stuff in
between matters functionally.

396
00:18:36,820 --> 00:18:40,250
It's just a note to a
human what's going on here.

397
00:18:40,250 --> 00:18:43,040
And just as a quick sanity
check, if I scroll down,

398
00:18:43,040 --> 00:18:46,820
what's the obvious new
tag that we've introduced?

399
00:18:46,820 --> 00:18:52,130
The tags thus far we've seen are open
bracket HTML, head, title, and body.

400
00:18:52,130 --> 00:18:54,400
But what's obviously new now?

401
00:18:54,400 --> 00:18:55,200
>> Yeah, so p.

402
00:18:55,200 --> 00:18:57,320
The p tag or paragraph tag.

403
00:18:57,320 --> 00:19:01,182
And then I just borrowed some default
Latin text to constitute my paragraphs.

404
00:19:01,182 --> 00:19:03,390
Because what I wanted to
demonstrate is how you might

405
00:19:03,390 --> 00:19:05,859
represent paragraphs of text in HTML.

406
00:19:05,859 --> 00:19:08,400
And so what's starting to happen
here is that there's already

407
00:19:08,400 --> 00:19:09,657
a pattern developing.

408
00:19:09,657 --> 00:19:10,990
And let me go ahead and do this.

409
00:19:10,990 --> 00:19:12,760
Let me first turn off Apache.

410
00:19:12,760 --> 00:19:17,340
And I'm going to tell it to start itself
again inside of today's source seven

411
00:19:17,340 --> 00:19:18,420
m directory.

412
00:19:18,420 --> 00:19:20,100
So that I have access to everything.

413
00:19:20,100 --> 00:19:22,230
>> And now, if I go back to
this directory listing,

414
00:19:22,230 --> 00:19:24,846
notice I see every file from today.

415
00:19:24,846 --> 00:19:26,720
And you'll see in the
next problem set, we'll

416
00:19:26,720 --> 00:19:28,594
give you instructions
for doing exactly this.

417
00:19:28,594 --> 00:19:35,210
If I open paragraphs.html, this might
as well look like a programming language

418
00:19:35,210 --> 00:19:36,970
to you if you don't speak or read Latin.

419
00:19:36,970 --> 00:19:40,525
But this is just three paragraphs
of text that are marked up in HTML.

420
00:19:40,525 --> 00:19:43,100
>> And notice the paragraph
breaks between them.

421
00:19:43,100 --> 00:19:46,400
Because it turns out,
and even though you

422
00:19:46,400 --> 00:19:49,210
might be inclined to do this,
whereas in the real world,

423
00:19:49,210 --> 00:19:51,370
if you want to put line
breaks between things,

424
00:19:51,370 --> 00:19:55,680
you might quite simply
do this and hit Save.

425
00:19:55,680 --> 00:19:59,460
And now, if I reload here, notice
that everything just blurs together

426
00:19:59,460 --> 00:20:01,100
in just one blob of text.

427
00:20:01,100 --> 00:20:03,570
Because HTML is kind of a dumb language.

428
00:20:03,570 --> 00:20:07,230
>> It is meant to be used in such
a way that the browser will only

429
00:20:07,230 --> 00:20:09,920
do explicitly what you tell it to do.

430
00:20:09,920 --> 00:20:12,890
So if you don't tell it
give me a new paragraph,

431
00:20:12,890 --> 00:20:14,569
you're not going to see a new paragraph.

432
00:20:14,569 --> 00:20:16,360
And in fact, what the
browser's going to do

433
00:20:16,360 --> 00:20:20,020
is even if you hit Enter,
let's say again and again

434
00:20:20,020 --> 00:20:23,190
and again, moving this text way
down on the screen and then save

435
00:20:23,190 --> 00:20:26,610
and then reload, the browser is going
to collapse all of that white space

436
00:20:26,610 --> 00:20:29,021
into just a single, visible whitespace.

437
00:20:29,021 --> 00:20:29,520
All right.

438
00:20:29,520 --> 00:20:30,869
So that's the paragraph tag.

439
00:20:30,869 --> 00:20:32,910
And so what's the pattern
that's developing here?

440
00:20:32,910 --> 00:20:37,450
Well, it seems to be the case that
HTML is all about starting a tag

441
00:20:37,450 --> 00:20:38,460
and ending a tag.

442
00:20:38,460 --> 00:20:39,300
And what is a tag?

443
00:20:39,300 --> 00:20:41,160
Well, it's just a chunk of syntax.

444
00:20:41,160 --> 00:20:44,400
Open bracket, a keyword,
closed bracket, is a tag.

445
00:20:44,400 --> 00:20:45,510
Or start tag.

446
00:20:45,510 --> 00:20:48,590
And then when you're
done expressing yourself,

447
00:20:48,590 --> 00:20:52,300
as in you're done with the paragraph,
you do so to speak opposite.

448
00:20:52,300 --> 00:20:55,480
But the opposite isn't quite backwards.

449
00:20:55,480 --> 00:21:00,630
>> You simply prefix the same tag's
name with a forward slash like this.

450
00:21:00,630 --> 00:21:01,130
All right.

451
00:21:01,130 --> 00:21:02,570
So not all that exciting.

452
00:21:02,570 --> 00:21:05,270
And in fact, we're not making the
web all that more interesting.

453
00:21:05,270 --> 00:21:07,630
What if I want to make
things bigger and bold?

454
00:21:07,630 --> 00:21:11,780
So it turns out that here's an example
in headings.html, where in my body,

455
00:21:11,780 --> 00:21:17,280
I've got an H1 tag, H2, H3,
four, five, or six, all of which

456
00:21:17,280 --> 00:21:18,310
seem pretty arcane.

457
00:21:18,310 --> 00:21:21,010
But if I go open this
example, let's take a look.

458
00:21:21,010 --> 00:21:22,490
Headings.html.

459
00:21:22,490 --> 00:21:27,030
>> So browsers by default can give you text
that's big and bold of disparate sizes.

460
00:21:27,030 --> 00:21:28,070
H1 is big.

461
00:21:28,070 --> 00:21:31,240
H6 is smaller and then
everything else in between.

462
00:21:31,240 --> 00:21:34,170
So that's interesting but still
not really the web I know.

463
00:21:34,170 --> 00:21:36,870
What if we want to I have
something like a list. .

464
00:21:36,870 --> 00:21:40,190
So here's a bulleted list of
three of Harvard's houses.

465
00:21:40,190 --> 00:21:41,600
>> How did you go about doing this?

466
00:21:41,600 --> 00:21:45,410
Well, take a look at list.html.

467
00:21:45,410 --> 00:21:47,870
And here, we see a
little bit of funkiness

468
00:21:47,870 --> 00:21:49,630
but let's consider what's happening.

469
00:21:49,630 --> 00:21:56,182
So based on what you've just seen,
UL stands for unordered list.

470
00:21:56,182 --> 00:21:57,640
Unordered list just means bulleted.

471
00:21:57,640 --> 00:21:58,431
There's no numbers.

472
00:21:58,431 --> 00:22:01,850
There's also something called an
ordered list, which is an OL at tag.

473
00:22:01,850 --> 00:22:05,350
Then LI, list item is all it means.

474
00:22:05,350 --> 00:22:07,790
>> And so it automatically
numbers everything for you.

475
00:22:07,790 --> 00:22:11,270
But again, all of my indentation
and white space is just for my sake.

476
00:22:11,270 --> 00:22:13,050
The browser's not
actually going to care.

477
00:22:13,050 --> 00:22:16,670
So even though you couldn't
do this, just to be clear,

478
00:22:16,670 --> 00:22:19,880
you should not even though
the browser will still

479
00:22:19,880 --> 00:22:22,130
be able to understand it just fine.

480
00:22:22,130 --> 00:22:24,590
I'm hitting reload in my
browser, I'm clicking reload

481
00:22:24,590 --> 00:22:26,760
and no change is happening
because the browser still

482
00:22:26,760 --> 00:22:29,550
doing exactly what I tell it to do.

483
00:22:29,550 --> 00:22:30,050
>> All right.

484
00:22:30,050 --> 00:22:31,340
So this is all just text.

485
00:22:31,340 --> 00:22:33,730
Now let's do something more interesting.

486
00:22:33,730 --> 00:22:36,660
I'm going to go ahead and
borrow some of this HTML.

487
00:22:36,660 --> 00:22:40,910
I'm going to go ahead and
create a new file here.

488
00:22:40,910 --> 00:22:43,370
And we'll call this rick.html.

489
00:22:43,370 --> 00:22:46,190

490
00:22:46,190 --> 00:22:48,916
We have disproportionately
used something

491
00:22:48,916 --> 00:22:51,290
called a rick roll in this
class this year, I don't know,

492
00:22:51,290 --> 00:22:53,880
it just happened organically.

493
00:22:53,880 --> 00:22:55,397
>> And now it's got out of control.

494
00:22:55,397 --> 00:22:56,730
So I'm just going to go with it.

495
00:22:56,730 --> 00:22:59,700
And if I go to Google
Images and Rick Astley.

496
00:22:59,700 --> 00:23:02,450

497
00:23:02,450 --> 00:23:06,170
If you don't know why we do
this, just read up on Wikipedia.

498
00:23:06,170 --> 00:23:11,520
Every time you've clicked on the link,
someone's been laughing somewhere.

499
00:23:11,520 --> 00:23:14,860
And let me go ahead-- there
we go, let's view this image.

500
00:23:14,860 --> 00:23:16,750
>> So here we have an
image in Google Images.

501
00:23:16,750 --> 00:23:19,390
And let's assume that this is
reasonably everywhere on the internet.

502
00:23:19,390 --> 00:23:22,570
So I'm going to assume it's OK for me
to actually put this into my web page.

503
00:23:22,570 --> 00:23:24,820
I'm going to go ahead
and copy image URL.

504
00:23:24,820 --> 00:23:28,600
And now if I go back to Cloud
9, let's see what I can do here.

505
00:23:28,600 --> 00:23:30,630
So here is just a web page.

506
00:23:30,630 --> 00:23:39,020
This is Rick Astley, haha,
I'm going to now go back

507
00:23:39,020 --> 00:23:43,510
to my browser, reload, and interesting.

508
00:23:43,510 --> 00:23:44,530
>> Where is Rick?

509
00:23:44,530 --> 00:23:46,050
So let me see what's happened.

510
00:23:46,050 --> 00:23:49,114
Actually, I'm going to
pretend like I didn't do that.

511
00:23:49,114 --> 00:23:50,280
[INAUDIBLE] put him in here.

512
00:23:50,280 --> 00:23:52,520
We'll come back to that in a moment.

513
00:23:52,520 --> 00:23:54,200
So here's rick.html.

514
00:23:54,200 --> 00:23:56,070
So that's not Rick Astley.

515
00:23:56,070 --> 00:23:59,680
So it turns out we can
actually add him in here.

516
00:23:59,680 --> 00:24:00,830
This is Rick Astley.

517
00:24:00,830 --> 00:24:06,680
I'm going to say give me an image whose
source is the URL I just copied, which

518
00:24:06,680 --> 00:24:09,110
apparently is a happy
birthday something or other.

519
00:24:09,110 --> 00:24:13,280
>> And now I'm going to
close the tag like this.

520
00:24:13,280 --> 00:24:15,170
So this is wrapping super long.

521
00:24:15,170 --> 00:24:17,740
But notice that all I've
done is open bracket image,

522
00:24:17,740 --> 00:24:20,270
source with an attribute of this.

523
00:24:20,270 --> 00:24:21,530
And it's a really long URL.

524
00:24:21,530 --> 00:24:23,720
And at the very end, notice this.

525
00:24:23,720 --> 00:24:29,530
Why have I done slash angled bracket
instead of, like every other tag,

526
00:24:29,530 --> 00:24:33,590
having an open bracket,
IMG, closed bracket?

527
00:24:33,590 --> 00:24:37,040
Just take a guess even if you
have no familiarity whatsoever

528
00:24:37,040 --> 00:24:40,410
with HTML before.

529
00:24:40,410 --> 00:24:42,710
>> So it is how it closes
the command, but why

530
00:24:42,710 --> 00:24:45,850
does it not really make intuitive
sense to do something a little more

531
00:24:45,850 --> 00:24:48,820
verbose like close image?

532
00:24:48,820 --> 00:24:51,400
Yeah.

533
00:24:51,400 --> 00:24:52,000
Yeah.

534
00:24:52,000 --> 00:24:55,620
Just semantically, there's no sense of
starting an image and ending an image,

535
00:24:55,620 --> 00:24:56,870
it's either there or it's not.

536
00:24:56,870 --> 00:25:00,960
So it doesn't make sense to leave a gap
for anything else inside of an image.

537
00:25:00,960 --> 00:25:02,010
You just can't do that.

538
00:25:02,010 --> 00:25:03,720
And so the syntax
would generally be just

539
00:25:03,720 --> 00:25:07,910
to do the forward slash inside
of the open tag or the start tag

540
00:25:07,910 --> 00:25:09,020
and then hit Save.

541
00:25:09,020 --> 00:25:13,350
>> So if I now reload this file, now
I've got a good web page cooking here.

542
00:25:13,350 --> 00:25:15,100
And we could certainly
really annoy people

543
00:25:15,100 --> 00:25:17,010
by embedding instead
like a YouTube link.

544
00:25:17,010 --> 00:25:19,350
And in fact, any time
you've ever gone to YouTube,

545
00:25:19,350 --> 00:25:22,190
and let me actually accidentally
rick roll myself here.

546
00:25:22,190 --> 00:25:25,770
So Rick roll.

547
00:25:25,770 --> 00:25:29,592
So rick roll-- I'm going to go here.

548
00:25:29,592 --> 00:25:31,900
>> [MUSIC PLAYING]

549
00:25:31,900 --> 00:25:33,730
>> OK, one person liked that.

550
00:25:33,730 --> 00:25:37,270
So notice all this time, if you
click the Share link, you of course

551
00:25:37,270 --> 00:25:41,390
get the URL that you can actually
embed in an email or a forensic image

552
00:25:41,390 --> 00:25:43,730
or in a problem set or in a slide.

553
00:25:43,730 --> 00:25:49,055
And now, if I instead click on embed,
notice that all this time, this stuff

554
00:25:49,055 --> 00:25:49,680
has been there.

555
00:25:49,680 --> 00:25:50,910
I'm going to go ahead and copy this.

556
00:25:50,910 --> 00:25:54,000
>> And just so we can see it better, I'm
going to paste it into my text editor.

557
00:25:54,000 --> 00:25:55,860
Notice that this what
YouTube has been telling you.

558
00:25:55,860 --> 00:25:57,693
Every time you visit a
YouTube video, if you

559
00:25:57,693 --> 00:26:00,410
want to embed the video on your
web page, simply grab this.

560
00:26:00,410 --> 00:26:03,350
So this is yet another
HTML tag called an iframe.

561
00:26:03,350 --> 00:26:04,590
Or an in line frame.

562
00:26:04,590 --> 00:26:08,680
So it too looks a little more
complex than all the others.

563
00:26:08,680 --> 00:26:11,950
So it turns out that the image
tag and apparently the iframe tag

564
00:26:11,950 --> 00:26:13,370
take what are called attributes.

565
00:26:13,370 --> 00:26:15,710
>> And this is another
piece of syntax in HTML.

566
00:26:15,710 --> 00:26:19,240
In addition to the tag's
name, open bracket tag name,

567
00:26:19,240 --> 00:26:23,780
you can control the behavior of the tag
by having a whole bunch of attribute

568
00:26:23,780 --> 00:26:24,860
equals value.

569
00:26:24,860 --> 00:26:26,290
Attribute equals value.

570
00:26:26,290 --> 00:26:28,100
And so for instance,
YouTube is telling us

571
00:26:28,100 --> 00:26:31,990
if you want the width of this video
to be 420 pixels and the height

572
00:26:31,990 --> 00:26:35,470
to be 315 pixels, that's
how you express it in HTML.

573
00:26:35,470 --> 00:26:38,480
>> The source of the video is going
to be that long YouTube URL

574
00:26:38,480 --> 00:26:40,830
and then some other stuff
like frame border is zero,

575
00:26:40,830 --> 00:26:43,500
so that probably means there's
no border around the thing.

576
00:26:43,500 --> 00:26:45,450
Allow full screen probably
means that the user

577
00:26:45,450 --> 00:26:47,840
can click a button and
actually full screen the video.

578
00:26:47,840 --> 00:26:52,870
So if I really want to be
impressive here in Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
rather than use the image tag, let
me delete that, instead paste this.

580
00:26:58,490 --> 00:27:00,810
And now reload.

581
00:27:00,810 --> 00:27:02,500
And now here we go again.

582
00:27:02,500 --> 00:27:04,979

583
00:27:04,979 --> 00:27:06,020
All right, that's enough.

584
00:27:06,020 --> 00:27:08,970
All right so I will try
hard not to do that again.

585
00:27:08,970 --> 00:27:11,400
So what are some of the takeaways here?

586
00:27:11,400 --> 00:27:15,130
So HTML, as ugly as these web pages
are, is actually pretty simple.

587
00:27:15,130 --> 00:27:16,467
It's not a programming language.

588
00:27:16,467 --> 00:27:17,550
It doesn't have functions.

589
00:27:17,550 --> 00:27:18,410
It doesn't have loops.

590
00:27:18,410 --> 00:27:19,535
It doesn't have conditions.

591
00:27:19,535 --> 00:27:22,900
All it has is dozens of
different tags, each of which

592
00:27:22,900 --> 00:27:24,620
has zero or more attributes.

593
00:27:24,620 --> 00:27:27,320
And in fact, what's fun about
HTML as you start to dive into

594
00:27:27,320 --> 00:27:29,560
is that it's very self teachable.

595
00:27:29,560 --> 00:27:32,880
>> All it takes is an understanding
of the general framework of HTML.

596
00:27:32,880 --> 00:27:36,510
What is a tag, what is an attribute,
how do you actually configure a web page

597
00:27:36,510 --> 00:27:37,250
as follows.

598
00:27:37,250 --> 00:27:40,720
And everything else is really the result
of looking up in an online reference

599
00:27:40,720 --> 00:27:43,080
or googling how to do some
technique or as we've seen,

600
00:27:43,080 --> 00:27:45,371
looking at Facebook's source
code, looking at a website

601
00:27:45,371 --> 00:27:48,710
that you like at it's source code and
understanding how the developers there

602
00:27:48,710 --> 00:27:50,550
actually laid things out.

603
00:27:50,550 --> 00:27:52,180
>> So we can do images as well.

604
00:27:52,180 --> 00:27:53,994
And in fact, we did it a moment ago.

605
00:27:53,994 --> 00:27:55,410
Let me go ahead and just show you.

606
00:27:55,410 --> 00:27:56,770
Here's some sample code.

607
00:27:56,770 --> 00:27:58,380
If you ever want to see grumpy cat.

608
00:27:58,380 --> 00:28:00,620
So notice that I can
have an image tag here.

609
00:28:00,620 --> 00:28:02,090
And I've got a comment above it.

610
00:28:02,090 --> 00:28:04,490
I've got an alternative
text for accessibility.

611
00:28:04,490 --> 00:28:07,250
So someone who's using a screen
reader for reasons of sight

612
00:28:07,250 --> 00:28:10,172
can actually then have their
screen reader say grumpy cat.

613
00:28:10,172 --> 00:28:11,880
Because if they can't
see the image, they

614
00:28:11,880 --> 00:28:14,504
can at least have their computer
tell them verbally what it is.

615
00:28:14,504 --> 00:28:18,020
And the source of that file is cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
So in fact, if I really wanted to
get clever, what I could have done--

617
00:28:22,472 --> 00:28:25,680
I promise not to go to Rick Astley, so
I'm going to google for a cat instead.

618
00:28:25,680 --> 00:28:28,290
And if I go to Google Images
here, and we'll assume

619
00:28:28,290 --> 00:28:30,040
that this is a picture of my cat.

620
00:28:30,040 --> 00:28:35,070
>> Suppose that I have control clicked
or right clicked on this, accidentally

621
00:28:35,070 --> 00:28:35,630
creepy.

622
00:28:35,630 --> 00:28:40,320
And cat.jpeg I'm going
to save on my desktop.

623
00:28:40,320 --> 00:28:44,700
Let me now go back to cloud 9.

624
00:28:44,700 --> 00:28:48,150
Notice that here, I can
go to upload local files.

625
00:28:48,150 --> 00:28:51,530
And if I grab this
file, cat.jpeg, notice

626
00:28:51,530 --> 00:28:54,674
that I can drag it and
drop it into cloud 9

627
00:28:54,674 --> 00:28:56,090
and it's going to yell at me here.

628
00:28:56,090 --> 00:28:59,000
>> Because we've already
given you a cat.jpeg file,

629
00:28:59,000 --> 00:29:01,430
but it's super easy to
grab a photo that you've

630
00:29:01,430 --> 00:29:03,220
taken from Facebook
or Flickr or the like

631
00:29:03,220 --> 00:29:05,678
and actually drag and drop it
into cloud 9 and then make it

632
00:29:05,678 --> 00:29:07,970
part of your own personal
website or problem

633
00:29:07,970 --> 00:29:10,442
set seven or eight as we'll soon see.

634
00:29:10,442 --> 00:29:12,150
And then when you
finally visit that cat,

635
00:29:12,150 --> 00:29:16,610
assuming I downloaded that same cat,
notice that-- that was adorable.

636
00:29:16,610 --> 00:29:19,160
>> What you would see is
something like this face here.

637
00:29:19,160 --> 00:29:21,810
So the files that you
reference within a web page

638
00:29:21,810 --> 00:29:26,050
can either be local in your own
account or remote on some other server

639
00:29:26,050 --> 00:29:29,670
as in the case of the Rick
Astley photo a little bit ago.

640
00:29:29,670 --> 00:29:32,990
So where else-- what
else can we do here?

641
00:29:32,990 --> 00:29:34,890
So let's take a look at the following.

642
00:29:34,890 --> 00:29:36,160
You know what's kind of cool?

643
00:29:36,160 --> 00:29:39,330
>> We have thus far been making
very static web pages.

644
00:29:39,330 --> 00:29:41,830
I want to spice things up as follows.

645
00:29:41,830 --> 00:29:44,344
I want to make my own search engine.

646
00:29:44,344 --> 00:29:47,010
So to make a search engine, let's
go ahead and start doing this.

647
00:29:47,010 --> 00:29:52,570
I'm going to go ahead and create
a new file called search.html.

648
00:29:52,570 --> 00:29:54,890
And we have prefabed versions online.

649
00:29:54,890 --> 00:29:56,027
Whoops.

650
00:29:56,027 --> 00:29:57,610
Don't paste into your terminal window.

651
00:29:57,610 --> 00:29:58,744
Prefab versions online.

652
00:29:58,744 --> 00:30:00,160
And I'm going to start as follows.

653
00:30:00,160 --> 00:30:04,490
So here's the beginning of
a file called search.html.

654
00:30:04,490 --> 00:30:07,510
I'm going to save it in
today's source directory.

655
00:30:07,510 --> 00:30:09,079
I'm going to call this Search.

656
00:30:09,079 --> 00:30:10,370
Actually, we'll make it better.

657
00:30:10,370 --> 00:30:13,600
CS50 Search and actually brand it.

658
00:30:13,600 --> 00:30:17,500
And now, I'm going to say
something like H1 CS50 Search.

659
00:30:17,500 --> 00:30:20,930
And then down here, H2 coming soon.

660
00:30:20,930 --> 00:30:23,230
And just to recap, H1 and
H2 mean what respectively?

661
00:30:23,230 --> 00:30:26,750

662
00:30:26,750 --> 00:30:30,320
>> Yeah, so big and bold, and
not as big, but still bold.

663
00:30:30,320 --> 00:30:37,375
So if I save this and go over here,
let's see the file search.html.

664
00:30:37,375 --> 00:30:42,560
All right, and this one
is right-- [INAUDIBLE].

665
00:30:42,560 --> 00:30:46,980

666
00:30:46,980 --> 00:30:49,110
Stand by.

667
00:30:49,110 --> 00:30:49,945
David is confused.

668
00:30:49,945 --> 00:30:52,610

669
00:30:52,610 --> 00:30:54,080
Oh, it's right there.

670
00:30:54,080 --> 00:30:54,860
David's an idiot.

671
00:30:54,860 --> 00:30:55,420
OK.

672
00:30:55,420 --> 00:30:56,660
So there it is.

673
00:30:56,660 --> 00:30:58,350
So CS50 search coming soon.

674
00:30:58,350 --> 00:31:00,370
So now, let's synthesize
what we did last week.

675
00:31:00,370 --> 00:31:03,400
>> Where we talked about the
lower level mechanics of HTTP.

676
00:31:03,400 --> 00:31:05,780
And these new ideas
of HTML, which is just

677
00:31:05,780 --> 00:31:08,890
this markup language where you
tell a browser exactly what to do

678
00:31:08,890 --> 00:31:10,740
and implement our own search engine.

679
00:31:10,740 --> 00:31:12,520
So instead of just
saying coming soon, I'm

680
00:31:12,520 --> 00:31:14,810
going to introduce
something called a form tag.

681
00:31:14,810 --> 00:31:19,610
And in this form, I'm going to
have something like an input field.

682
00:31:19,610 --> 00:31:22,450
>> And the name of this input
field, I'm going to call it Q.

683
00:31:22,450 --> 00:31:26,240
And the type of this input field
I'm going to say is just "text".

684
00:31:26,240 --> 00:31:29,130
And a text field, as we'll
see, is just a text box.

685
00:31:29,130 --> 00:31:32,830
And so it doesn't sense here to have
anything inside of it at this point.

686
00:31:32,830 --> 00:31:35,320
And so I'm simply going
to close the tag with that

687
00:31:35,320 --> 00:31:38,099
forward slash right in the tag itself.

688
00:31:38,099 --> 00:31:39,890
And then I'm going to
have one other input.

689
00:31:39,890 --> 00:31:43,480
Input type equals submit.

690
00:31:43,480 --> 00:31:45,320
And then I'm going to
close this one too.

691
00:31:45,320 --> 00:31:46,840
>> And now I'm going to go back here.

692
00:31:46,840 --> 00:31:49,520
And already we see,
albeit pretty ugly, I've

693
00:31:49,520 --> 00:31:52,460
got the beginnings of
my own search page here.

694
00:31:52,460 --> 00:31:55,150
In fact, let me try to
clean this up a little bit.

695
00:31:55,150 --> 00:31:57,330
It turns out that on the
input here, I can have

696
00:31:57,330 --> 00:31:59,910
another attribute called placeholder.

697
00:31:59,910 --> 00:32:05,165
And I might see something like keywords,
or more specifically, query for q.

698
00:32:05,165 --> 00:32:07,820
>> And notice, now, I have
this kind of gray text

699
00:32:07,820 --> 00:32:10,440
that disappears as
soon as I start typing,

700
00:32:10,440 --> 00:32:12,930
but it's probably something
you've seen in other web pages.

701
00:32:12,930 --> 00:32:14,650
I don't really like the Submit button.

702
00:32:14,650 --> 00:32:18,320
So I'm actually going to give the
Submit button a value of search.

703
00:32:18,320 --> 00:32:21,680
And now, if I reload, notice that
my button becomes named search.

704
00:32:21,680 --> 00:32:24,140
You know, I don't really
like the logo here.

705
00:32:24,140 --> 00:32:27,140
So Google Font generator.

706
00:32:27,140 --> 00:32:28,820
>> I want to spice this up further.

707
00:32:28,820 --> 00:32:30,660
So CS50 search.

708
00:32:30,660 --> 00:32:31,870
Let me create my own logo.

709
00:32:31,870 --> 00:32:33,080
That looks nice.

710
00:32:33,080 --> 00:32:36,945
So now let me save this as-- come on.

711
00:32:36,945 --> 00:32:40,710

712
00:32:40,710 --> 00:32:43,120
Where is it going?

713
00:32:43,120 --> 00:32:43,620
There.

714
00:32:43,620 --> 00:32:44,160
OK.

715
00:32:44,160 --> 00:32:44,980
Missed it.

716
00:32:44,980 --> 00:32:47,740
Save as.

717
00:32:47,740 --> 00:32:49,470
Stupid browsers.

718
00:32:49,470 --> 00:32:51,700
Stand by, we're going to
fix this once and for all.

719
00:32:51,700 --> 00:32:57,650

720
00:32:57,650 --> 00:32:58,590
There we go.

721
00:32:58,590 --> 00:32:59,090
All right.

722
00:32:59,090 --> 00:32:59,600
Sorry.

723
00:32:59,600 --> 00:33:00,750
Off day.

724
00:33:00,750 --> 00:33:02,310
Now this is funky.

725
00:33:02,310 --> 00:33:03,160
Exit full screen.

726
00:33:03,160 --> 00:33:04,150
All right.

727
00:33:04,150 --> 00:33:06,870
>> Now, like a normal
person, save image as.

728
00:33:06,870 --> 00:33:08,810
Logo.gif.

729
00:33:08,810 --> 00:33:13,194
Now I'm going to go into CS50IDE and
I'm going to simply grab the logo,

730
00:33:13,194 --> 00:33:15,360
I'm going to drag it into
my source seven directory,

731
00:33:15,360 --> 00:33:17,002
file already exists, I'm OK with that.

732
00:33:17,002 --> 00:33:19,210
So I'm going to override it
because I already had it.

733
00:33:19,210 --> 00:33:20,630
And now how do I get rid of this?

734
00:33:20,630 --> 00:33:24,670
>> Let's go ahead here and do
image source equals logo.gif.

735
00:33:24,670 --> 00:33:25,490
Close this.

736
00:33:25,490 --> 00:33:26,050
Save.

737
00:33:26,050 --> 00:33:30,560
And now if I go back to my search
page, now it's looking pretty good.

738
00:33:30,560 --> 00:33:33,610
All right, so it hasn't
quite done anything useful.

739
00:33:33,610 --> 00:33:37,000
In fact, let me try searching
for a cat and see what happens.

740
00:33:37,000 --> 00:33:38,890
Cats.

741
00:33:38,890 --> 00:33:39,420
Damn it.

742
00:33:39,420 --> 00:33:41,400
It doesn't just work, apparently.

743
00:33:41,400 --> 00:33:43,760
So what's the key piece
that's missing here?

744
00:33:43,760 --> 00:33:49,100
>> Right, even if you don't know any HTML,
I've started marking up the phone form

745
00:33:49,100 --> 00:33:54,130
and I've told it how to get inputs,
give me a text box and a submit button,

746
00:33:54,130 --> 00:33:55,730
what piece is apparently missing?

747
00:33:55,730 --> 00:33:58,975
Suppose we want to actually get
this thing working correctly.

748
00:33:58,975 --> 00:34:02,420

749
00:34:02,420 --> 00:34:05,360
What do we need to do?

750
00:34:05,360 --> 00:34:08,860
We have a need to implement the back end
database or the search engine itself,

751
00:34:08,860 --> 00:34:11,210
and that's going to take a
whole lot of time, frankly.

752
00:34:11,210 --> 00:34:13,380
>> So remember what we did last time.

753
00:34:13,380 --> 00:34:18,230
So if you search for something on Google
and you have in advance turned off,

754
00:34:18,230 --> 00:34:20,355
recall, instant search.

755
00:34:20,355 --> 00:34:22,230
So let me turn that off
so that this actually

756
00:34:22,230 --> 00:34:26,650
behaves like an older school browser,
if I now search for something like cats,

757
00:34:26,650 --> 00:34:28,190
recall what the URL looks like.

758
00:34:28,190 --> 00:34:29,449
It's pretty cryptic.

759
00:34:29,449 --> 00:34:33,000
But embedded in there,
recall, is slash search.

760
00:34:33,000 --> 00:34:35,100
Question mark q equals cats.

761
00:34:35,100 --> 00:34:37,760
>> And that would seem to give me
a whole bunch of search results.

762
00:34:37,760 --> 00:34:39,134
So you know what I'm going to do?

763
00:34:39,134 --> 00:34:41,650
I'm going to borrow
Google for just a minute.

764
00:34:41,650 --> 00:34:43,670
I'm going to go over
here and I'm going to say

765
00:34:43,670 --> 00:34:47,850
that this forms action or
destination, so to speak,

766
00:34:47,850 --> 00:34:49,330
should literally be Google.

767
00:34:49,330 --> 00:34:52,590
And the method I wanted
to use is going to be get.

768
00:34:52,590 --> 00:34:53,560
>> So what is action?

769
00:34:53,560 --> 00:34:55,760
Action is weirdly named,
but that just means

770
00:34:55,760 --> 00:34:58,120
who is going to handle
the action of this form?

771
00:34:58,120 --> 00:35:00,820
When I click Search, where
should the result go?

772
00:35:00,820 --> 00:35:05,300
And if I now go back to my form
here and reload my web page

773
00:35:05,300 --> 00:35:09,000
and now search for something
like dog, notice now

774
00:35:09,000 --> 00:35:10,850
I have re implemented Google.

775
00:35:10,850 --> 00:35:11,350
Right?

776
00:35:11,350 --> 00:35:14,141
>> If I want to search for something
else, it works for not just dogs,

777
00:35:14,141 --> 00:35:16,400
it also works for cats.

778
00:35:16,400 --> 00:35:21,930
It also works for CS50.

779
00:35:21,930 --> 00:35:24,310
And OK, this is just
under whelming, isn't it?

780
00:35:24,310 --> 00:35:25,920
All right, but it actually works.

781
00:35:25,920 --> 00:35:27,360
So what's actually been going on?

782
00:35:27,360 --> 00:35:31,340
So I've taught my browser, using
HTML, to take input from the user

783
00:35:31,340 --> 00:35:35,810
and actually send that input
to a remote server using HTTP.

784
00:35:35,810 --> 00:35:39,120
>> And because my browser
understands HTTP, it actually

785
00:35:39,120 --> 00:35:43,500
construct the URL so that what
I end up over in my browser,

786
00:35:43,500 --> 00:35:45,660
notice what happens
when I searched for dog.

787
00:35:45,660 --> 00:35:49,270
If I click Search, notice that
the URL changes as I intended

788
00:35:49,270 --> 00:35:52,770
to google.com/search query equals dog.

789
00:35:52,770 --> 00:35:56,020
And that's because the form
knows, because the method is get,

790
00:35:56,020 --> 00:35:59,560
to simply append it to that URL there.

791
00:35:59,560 --> 00:36:01,730
>> Now, these web pages are still ugly.

792
00:36:01,730 --> 00:36:04,890
So let's introduce one other
piece of syntax if we can today.

793
00:36:04,890 --> 00:36:07,640
And this is something known
as cascading style sheets.

794
00:36:07,640 --> 00:36:10,720
So let me take a look at
this example here and see

795
00:36:10,720 --> 00:36:12,380
if we can infer what's going on.

796
00:36:12,380 --> 00:36:14,520
This is CSS0.html.

797
00:36:14,520 --> 00:36:16,532
And this is where things
get a little ugly.

798
00:36:16,532 --> 00:36:18,490
Because unfortunately,
in the world of the web,

799
00:36:18,490 --> 00:36:20,920
HTML alone can't do everything.

800
00:36:20,920 --> 00:36:22,920
And so if you want to
stylize your web page,

801
00:36:22,920 --> 00:36:28,370
you actually need to focus on the
aesthetics in a different way.

802
00:36:28,370 --> 00:36:33,090
So here, I have the body of my web
page inside of which is a big div.

803
00:36:33,090 --> 00:36:34,700
And a div just means division.

804
00:36:34,700 --> 00:36:38,060
So it's like a paragraph but it
doesn't have the same semantics

805
00:36:38,060 --> 00:36:39,180
of a paragraph of text.

806
00:36:39,180 --> 00:36:40,940
>> This just means to the
browser, here comes

807
00:36:40,940 --> 00:36:45,210
a big rectangular region of my web
page, I want to handle it specially.

808
00:36:45,210 --> 00:36:47,420
Now, line 21 is where that div starts.

809
00:36:47,420 --> 00:36:48,770
And just take a guess.

810
00:36:48,770 --> 00:36:53,080
What is the effect of line 21 on the
rest of the contents of the page?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Centering it.

813
00:36:56,311 --> 00:36:56,810
That's all.

814
00:36:56,810 --> 00:36:58,830
So we haven't seen a way of
actually centering the text.

815
00:36:58,830 --> 00:37:00,996
>> In fact, my search engine,
unlike the actual Google,

816
00:37:00,996 --> 00:37:03,040
was all justified over to the left.

817
00:37:03,040 --> 00:37:07,430
And so now in line 21, I'm saying, hey
browser, create a division of the page.

818
00:37:07,430 --> 00:37:09,450
Just give me a big, invisible rectangle.

819
00:37:09,450 --> 00:37:11,490
That's how I want to
think about the web page.

820
00:37:11,490 --> 00:37:13,870
And then stylize it as follows.

821
00:37:13,870 --> 00:37:16,900
Inside of those quotes,
now, is a second language

822
00:37:16,900 --> 00:37:19,969
that we introduced today
called cascading style sheets.

823
00:37:19,969 --> 00:37:22,010
Thankfully, it too is not
a programming language,

824
00:37:22,010 --> 00:37:26,470
so it's very limited in its syntax but
also very limited in its functionality

825
00:37:26,470 --> 00:37:30,670
whereas HTML is all about
marking up the data of a web page

826
00:37:30,670 --> 00:37:32,130
and the structure of a web page.

827
00:37:32,130 --> 00:37:35,320
CSS is generally about the
last mile, the aesthetics,

828
00:37:35,320 --> 00:37:40,160
getting the size and the color and the
placement exactly right in a web page.

829
00:37:40,160 --> 00:37:43,000
And indeed, it is formed
with key value pairs.

830
00:37:43,000 --> 00:37:46,290
>> A property like this, text
align, followed by a colon,

831
00:37:46,290 --> 00:37:49,720
followed by the value of that
property, which in this case is center.

832
00:37:49,720 --> 00:37:51,910
And now notice you
can nest these things.

833
00:37:51,910 --> 00:37:56,780
If I wanted everything in that
I've highlighted to be centered,

834
00:37:56,780 --> 00:38:00,270
that's why I have line 21 and
the corresponding line 31.

835
00:38:00,270 --> 00:38:04,820
But suppose now want to say John
Harvard, welcome to my home page.

836
00:38:04,820 --> 00:38:06,530
>> Copyright symbol John Harvard.

837
00:38:06,530 --> 00:38:09,180
And suppose I want the first of
those lines to be pretty big.

838
00:38:09,180 --> 00:38:10,450
36 pixels.

839
00:38:10,450 --> 00:38:11,530
So that's a decent size.

840
00:38:11,530 --> 00:38:13,240
And I wanted its weight to be bold.

841
00:38:13,240 --> 00:38:15,450
But then below that,
I want smaller text.

842
00:38:15,450 --> 00:38:19,980
And below that, I want
even smaller text.

843
00:38:19,980 --> 00:38:20,480
Sorry.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Today feels like an off day.

846
00:38:26,940 --> 00:38:29,840
>> So now, what am I doing to express this?

847
00:38:29,840 --> 00:38:34,580
Here on line 22 is an embedded
div or nested div, if you will.

848
00:38:34,580 --> 00:38:36,190
It too has its own style tag.

849
00:38:36,190 --> 00:38:38,160
I specify a font size of 36.

850
00:38:38,160 --> 00:38:40,460
I specify a font weight of bold.

851
00:38:40,460 --> 00:38:43,360
Down here, I only specify 24 pixels.

852
00:38:43,360 --> 00:38:45,960
And finally, in line 28, I specify 12.

853
00:38:45,960 --> 00:38:49,070
So just as a quick sanity check
and as a human reading this,

854
00:38:49,070 --> 00:38:52,545
which words on the screen are
actually going to be bold?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Which lines are actually bold?

857
00:38:58,760 --> 00:38:59,570
>> Just John Harvard.

858
00:38:59,570 --> 00:39:00,070
Right?

859
00:39:00,070 --> 00:39:05,940
Because just as line 22 says hey
browser, here's a division of the page.

860
00:39:05,940 --> 00:39:07,920
Make it font size 36 point.

861
00:39:07,920 --> 00:39:09,460
Make the font weight bold.

862
00:39:09,460 --> 00:39:11,920
As soon as you reach the
corresponding end tag

863
00:39:11,920 --> 00:39:15,340
or closed tag on line 24,
that means, hey browser,

864
00:39:15,340 --> 00:39:17,640
stop doing whatever it is you are doing.

865
00:39:17,640 --> 00:39:21,020
And notice to be clear, even though
line 22 has all of these attributes

866
00:39:21,020 --> 00:39:24,430
like style, when you
close the tag in line 24,

867
00:39:24,430 --> 00:39:25,940
you only mention the tag's name.

868
00:39:25,940 --> 00:39:29,990
>> You do not repeat the word style or
anything that's inside of those quotes.

869
00:39:29,990 --> 00:39:32,860
And so if I look at this now
in my browser, let's take

870
00:39:32,860 --> 00:39:38,060
a look at the end result. Let me go
ahead to this file, which is CSS 0.

871
00:39:38,060 --> 00:39:41,814
And it's still pretty plain,
but getting pretty interesting.

872
00:39:41,814 --> 00:39:43,980
But it turns out there's
other things I can do here,

873
00:39:43,980 --> 00:39:46,490
and at the risk of making
this completely hideous,

874
00:39:46,490 --> 00:39:48,630
notice here that in my
body of my web page,

875
00:39:48,630 --> 00:39:53,930
I can do something funny
like bg or background color.

876
00:39:53,930 --> 00:39:56,670
>> And quick, what's your favorite color?

877
00:39:56,670 --> 00:39:57,720
Green I heard.

878
00:39:57,720 --> 00:39:58,750
All right.

879
00:39:58,750 --> 00:40:02,920
So now, if I hit reload now,
we have a green web page.

880
00:40:02,920 --> 00:40:04,710
All right, so that's not bad.

881
00:40:04,710 --> 00:40:08,350
And now, if I want to make this really
cool, I can make the color of my text

882
00:40:08,350 --> 00:40:09,360
even red.

883
00:40:09,360 --> 00:40:10,870
So let's see what this looks like.

884
00:40:10,870 --> 00:40:12,230
Now it's looking pretty good.

885
00:40:12,230 --> 00:40:15,460
And down here, if you really
want to mess with someone

886
00:40:15,460 --> 00:40:17,487
or if you want to be
one of those people who

887
00:40:17,487 --> 00:40:20,570
tries to trick you into visiting a web
page because they've tricked Google

888
00:40:20,570 --> 00:40:27,610
into thinking there's a whole bunch
of key words like-- let's see, reload.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Where did it go?

891
00:40:30,680 --> 00:40:31,530
And there it us.

892
00:40:31,530 --> 00:40:32,030
All right.

893
00:40:32,030 --> 00:40:34,905
So I say this as an aside, we'll
talk about this stuff in a few weeks

894
00:40:34,905 --> 00:40:36,740
when we talk about
security, if you actually

895
00:40:36,740 --> 00:40:38,852
embed whole bunches of
keywords in a web page,

896
00:40:38,852 --> 00:40:41,810
even if they're not visible to a
human, someone like Google, of course,

897
00:40:41,810 --> 00:40:43,250
can still actually find this.

898
00:40:43,250 --> 00:40:45,820
All right, so that's pretty
hideous pretty quickly.

899
00:40:45,820 --> 00:40:48,420
>> And in fact, it's not all
that much unlike my own web

900
00:40:48,420 --> 00:40:51,480
page as an undergraduate, which
I started googling around to find

901
00:40:51,480 --> 00:40:53,690
past versions of my old websites.

902
00:40:53,690 --> 00:40:54,500
It was pretty bad.

903
00:40:54,500 --> 00:40:56,650
In fact, I did find
one just before class.

904
00:40:56,650 --> 00:40:58,620
But there's worse out there.

905
00:40:58,620 --> 00:41:01,534
This apparently was my
home page back in 1996.

906
00:41:01,534 --> 00:41:04,200
Apparently I thought it was
appropriate to ask people their name

907
00:41:04,200 --> 00:41:05,991
before they could
actually see my web page.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> And then I showed them
something stupid, probably.

910
00:41:11,920 --> 00:41:13,450
I'll dig up more for next time.

911
00:41:13,450 --> 00:41:16,220
But for now, let's
consider a bit of design.

912
00:41:16,220 --> 00:41:17,444
We've talked about style.

913
00:41:17,444 --> 00:41:19,735
And this page thus far and
most everything I've written

914
00:41:19,735 --> 00:41:21,890
is pretty clean stylistically.

915
00:41:21,890 --> 00:41:23,320
But what about design?

916
00:41:23,320 --> 00:41:25,990
Well, there's a lot of redundancy
in what I've been doing here.

917
00:41:25,990 --> 00:41:28,156
>> I've mentioned the word
color in a couple of places.

918
00:41:28,156 --> 00:41:31,630
I've mentioned font size in a couple of
places and bold in a couple of places.

919
00:41:31,630 --> 00:41:34,870
And fundamentally, I'm co
mingling two languages.

920
00:41:34,870 --> 00:41:38,100
I've got HTML with my tags and my
attributes and then all of a sudden,

921
00:41:38,100 --> 00:41:40,100
between quotes, I have
the second language today

922
00:41:40,100 --> 00:41:43,830
called CSS, which again, is just these
key value pairs or these properties

923
00:41:43,830 --> 00:41:45,280
separated by colons.

924
00:41:45,280 --> 00:41:47,700
>> It turns out that much
like in C where we

925
00:41:47,700 --> 00:41:50,550
can start to factor out
some code into header files,

926
00:41:50,550 --> 00:41:53,520
so can we do the same in HTML.

927
00:41:53,520 --> 00:41:56,030
And a step toward that is as follows.

928
00:41:56,030 --> 00:42:02,230
Notice that this version, CSS1.html is
structurally the exact same web page.

929
00:42:02,230 --> 00:42:05,250
So I've got a whole bunch
of divs, but this time, I've

930
00:42:05,250 --> 00:42:07,220
gotten rid of the wrapper
div as you'll see.

931
00:42:07,220 --> 00:42:12,390
>> And I've given those three divs
top, middle, and bottom, unique IDs.

932
00:42:12,390 --> 00:42:14,760
This is nice, because by
giving those divisions

933
00:42:14,760 --> 00:42:18,715
of the page unique identifiers,
I can reference them elsewhere.

934
00:42:18,715 --> 00:42:19,215
Where?

935
00:42:19,215 --> 00:42:21,070
Well, let me scroll up.

936
00:42:21,070 --> 00:42:24,070
And thus far, anytime we've looked
at the head of a web page, what's

937
00:42:24,070 --> 00:42:28,560
the only tag we've had in
the head of a web page?

938
00:42:28,560 --> 00:42:29,740
A little louder.

939
00:42:29,740 --> 00:42:30,799
Just the title so far.

940
00:42:30,799 --> 00:42:32,590
But it turns out there's
a few other things

941
00:42:32,590 --> 00:42:35,840
you can put in there, one of
which it's called a style tag.

942
00:42:35,840 --> 00:42:37,850
So a moment ago, we looked
at a style attribute.

943
00:42:37,850 --> 00:42:39,150
Turns out there's a style tag.

944
00:42:39,150 --> 00:42:41,200
It belongs inside of
the head of a web page.

945
00:42:41,200 --> 00:42:42,840
And now notice what I'm doing.

946
00:42:42,840 --> 00:42:46,540
I have inside of this
style tag the following.

947
00:42:46,540 --> 00:42:51,190
I'm literally mentioning on line 20 the
name of a tag that I want to stylize.

948
00:42:51,190 --> 00:42:53,489
>> Then I have open curly brace
and closed curly brace.

949
00:42:53,489 --> 00:42:56,030
So similar in spirit to C, but
again, this is not a function,

950
00:42:56,030 --> 00:42:57,796
this is just a syntactic detail here.

951
00:42:57,796 --> 00:43:00,170
And then of course, I'm telling
the browser, hey browser,

952
00:43:00,170 --> 00:43:05,210
make the entire body of the page
have a text alignment of center.

953
00:43:05,210 --> 00:43:06,930
And then this is saying the following.

954
00:43:06,930 --> 00:43:12,600
Hey browser, if you see an HTML
element or tag in the page that

955
00:43:12,600 --> 00:43:17,040
has a unique identifier of top,
so the hash symbol here just means

956
00:43:17,040 --> 00:43:21,010
unique idea of top, go ahead
and make its font size 36

957
00:43:21,010 --> 00:43:22,490
and its font weight bold.

958
00:43:22,490 --> 00:43:26,840
>> Hey browser, an element whose
ID is middle, make it 24 pixels.

959
00:43:26,840 --> 00:43:31,070
And hey browser, if you see an
idea of bottom, make it 12 pixels.

960
00:43:31,070 --> 00:43:33,540
The effect in the end
is exactly the sam.

961
00:43:33,540 --> 00:43:36,500
If I go into CSS 1, the
page looks the same.

962
00:43:36,500 --> 00:43:39,810
But we're a step toward
a slightly better design.

963
00:43:39,810 --> 00:43:44,850
Let me now go back here to CSS2
and see what else I've done.

964
00:43:44,850 --> 00:43:48,030
>> Now the page is really, really clean.

965
00:43:48,030 --> 00:43:50,730
In fact, I can fit all of
the contents on a page here.

966
00:43:50,730 --> 00:43:54,270
But what new tag have I
introduced, obviously?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
And it's not the best name for a tag,
because it's not a link in the sense

969
00:43:57,853 --> 00:44:00,780
that we know it, but this means
a link in some other file.

970
00:44:00,780 --> 00:44:02,890
This is kind of like sharp include in C.

971
00:44:02,890 --> 00:44:06,280
>> This is the way in HTML
to say hey browser,

972
00:44:06,280 --> 00:44:10,240
go get the contents of
the file called css2.css.

973
00:44:10,240 --> 00:44:12,880
The relationship, to me,
is that it's a style sheet.

974
00:44:12,880 --> 00:44:17,980
And indeed, that's what the one of the
S's in cascading style sheets means.

975
00:44:17,980 --> 00:44:20,350
This is a style sheet.

976
00:44:20,350 --> 00:44:23,120
It's just the text file containing
a whole bunch of property.

977
00:44:23,120 --> 00:44:25,940
It's a whole bunch of styles
that you want to apply to a page.

978
00:44:25,940 --> 00:44:28,860
>> And so this apparently is
referring to a second file.

979
00:44:28,860 --> 00:44:32,970
And if I open that, CSS2.css,
notice that all I've done

980
00:44:32,970 --> 00:44:35,900
is copy and paste all
of this into this file.

981
00:44:35,900 --> 00:44:38,220
And now, even if you've never
coded this stuff before,

982
00:44:38,220 --> 00:44:40,700
just consider with the
proverbial engineering hat

983
00:44:40,700 --> 00:44:44,220
on, why is this a
better design probably?

984
00:44:44,220 --> 00:44:48,910
Factoring out those CSS properties,
putting them into their own file.

985
00:44:48,910 --> 00:44:51,330
Even though we solved this
problem like five minutes ago

986
00:44:51,330 --> 00:44:52,600
in the very first version.

987
00:44:52,600 --> 00:44:55,730
>> We've not improved the
page stylistically,

988
00:44:55,730 --> 00:44:57,520
this is just better
design in some sense.

989
00:44:57,520 --> 00:44:58,990
Why do you think?

990
00:44:58,990 --> 00:45:01,510
Yeah.

991
00:45:01,510 --> 00:45:02,260
More flexible how?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Yeah.

994
00:45:05,540 --> 00:45:07,373
So if you want to go
back and change things,

995
00:45:07,373 --> 00:45:09,540
now, you have one place
where you can change things.

996
00:45:09,540 --> 00:45:11,622
And in fact, for something
like problem set seven,

997
00:45:11,622 --> 00:45:13,690
where we'll implement a
stock trading website,

998
00:45:13,690 --> 00:45:15,523
that's going to have a
whole bunch of pages.

999
00:45:15,523 --> 00:45:17,620
And it would be really
annoying if you decide, hm,

1000
00:45:17,620 --> 00:45:21,630
I don't really like 24 pixels, I want
it to be 28 pixels or slightly bigger.

1001
00:45:21,630 --> 00:45:23,550
And then have to do a
global find and replace

1002
00:45:23,550 --> 00:45:27,560
or open all of your website's files
simply to actually change one value.

1003
00:45:27,560 --> 00:45:31,290
By factoring out these styles
into one central place,

1004
00:45:31,290 --> 00:45:34,720
you can now open one text file
in CS50IDE into any program,

1005
00:45:34,720 --> 00:45:36,479
change it, save it, and done.

1006
00:45:36,479 --> 00:45:38,270
You've propagated those
changes everywhere.

1007
00:45:38,270 --> 00:45:42,450
And that would be the same
in a dot h file as well.

1008
00:45:42,450 --> 00:45:46,697
So any questions thus
far on this syntax?

1009
00:45:46,697 --> 00:45:48,530
All right, so we've
done everything it seems

1010
00:45:48,530 --> 00:45:51,170
except actually implement hyperlinks.

1011
00:45:51,170 --> 00:45:52,740
And so let's go ahead and do this.

1012
00:45:52,740 --> 00:45:54,830
Let me go ahead and
create a new file here.

1013
00:45:54,830 --> 00:45:59,970
I'm going to call it
link.html, put in today's code.

1014
00:45:59,970 --> 00:46:03,000
>> And I'm going to do open
bracket doc type html.

1015
00:46:03,000 --> 00:46:05,970
As an aside, this thing at the
top, this doc type declaration,

1016
00:46:05,970 --> 00:46:08,420
it's the only one that's weird
with the exclamation point.

1017
00:46:08,420 --> 00:46:12,100
You just have to do it there and it
means we are using HTML version 5.

1018
00:46:12,100 --> 00:46:14,460
Older versions of
language had much longer

1019
00:46:14,460 --> 00:46:16,400
strings that you needed to put there.

1020
00:46:16,400 --> 00:46:18,620
So here is an example called link.

1021
00:46:18,620 --> 00:46:20,950
>> I need a body of my web page here.

1022
00:46:20,950 --> 00:46:29,770
And in here, a href equals
let's say HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
and my favorite website, we'll say.

1024
00:46:35,420 --> 00:46:38,550
All right, so a very
innocuous, user friendly page.

1025
00:46:38,550 --> 00:46:42,950
If I now go into my directory
listing here and open up link.html,

1026
00:46:42,950 --> 00:46:44,780
we have hyper text.

1027
00:46:44,780 --> 00:46:47,410
>> And indeed, this is where
the H in HTTP comes from.

1028
00:46:47,410 --> 00:46:51,580
Hypertext transfer protocol
is about transferring text

1029
00:46:51,580 --> 00:46:53,840
that has hyperlinks to other resources.

1030
00:46:53,840 --> 00:46:58,210
And indeed, here is the familiar,
if retro, blue link that if clicked,

1031
00:46:58,210 --> 00:47:02,607
will actually lead me to Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Now, oh, that's coming out soon.

1033
00:47:03,940 --> 00:47:08,970
All right, so now, what are some
of the implications of this?

1034
00:47:08,970 --> 00:47:11,610
>> And frankly, the world starts
to get a little more familiar

1035
00:47:11,610 --> 00:47:15,090
and also a little scarier
but also a little more

1036
00:47:15,090 --> 00:47:17,840
self defensible once you start
to understand these things.

1037
00:47:17,840 --> 00:47:21,610
Because odds are, some of you, if you go
through your Gmail spam folder or even

1038
00:47:21,610 --> 00:47:23,990
your inbox, you've probably
gotten some kind of email

1039
00:47:23,990 --> 00:47:26,980
that's asking you to change your
password maybe or maybe verify

1040
00:47:26,980 --> 00:47:28,910
your PayPal credentials or whatnot.

1041
00:47:28,910 --> 00:47:34,510
>> And in fact, you might have received
something that says like click here

1042
00:47:34,510 --> 00:47:42,260
to reset your PayPal password.

1043
00:47:42,260 --> 00:47:44,130
And now, notice, if
this isn't Disney.com

1044
00:47:44,130 --> 00:47:51,600
but like badplace.com and
reload, note that the text here

1045
00:47:51,600 --> 00:47:53,710
could say anything whatsoever.

1046
00:47:53,710 --> 00:47:55,260
And in fact, this is just words.

1047
00:47:55,260 --> 00:48:04,610
Why don't I actually be super malicious
and say http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Click here reset your PayPal
password and now reload.

1049
00:48:14,090 --> 00:48:16,220
This looks pretty legitimate, right?

1050
00:48:16,220 --> 00:48:20,470
I mean, I wouldn't click on
an email that just says this.

1051
00:48:20,470 --> 00:48:22,450
But notice the dichotomy here.

1052
00:48:22,450 --> 00:48:26,880
It says www.paypal.com,
and in fact, wait a minute,

1053
00:48:26,880 --> 00:48:29,210
we know that you want
the s for security.

1054
00:48:29,210 --> 00:48:35,450
So now, go to www.paypal.com HTTPS,
but if you've never done this before,

1055
00:48:35,450 --> 00:48:38,182
do get into the habit of
hovering over little links here.

1056
00:48:38,182 --> 00:48:39,890
And it's hard to see
on the screen there,

1057
00:48:39,890 --> 00:48:41,340
and it's not all that easier here.

1058
00:48:41,340 --> 00:48:43,615
But way down here in
the tiny little corner

1059
00:48:43,615 --> 00:48:45,740
does the browser actually
tell you that we're going

1060
00:48:45,740 --> 00:48:48,850
to badplace.com instead of Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Now, where are we going with this?

1062
00:48:51,620 --> 00:48:54,859
All the examples we've done today,
we've hard coded and typed out manually.

1063
00:48:54,859 --> 00:48:56,900
The web is incredibly
uninteresting when you hard

1064
00:48:56,900 --> 00:48:59,844
code your web pages so that content
is static and never changing.

1065
00:48:59,844 --> 00:49:01,760
Of course, all of our
favorite websites today,

1066
00:49:01,760 --> 00:49:04,470
whether it's Gmail or Twitter or
Facebook or any number of others

1067
00:49:04,470 --> 00:49:05,290
are dynamic.

1068
00:49:05,290 --> 00:49:07,340
They're changing in
response to user input

1069
00:49:07,340 --> 00:49:08,840
just like the Google search results.

1070
00:49:08,840 --> 00:49:12,415
>> And so on Wednesday, what we do is
we leave HTML and CSS introduction

1071
00:49:12,415 --> 00:49:14,290
behind us and we take
for granted that we now

1072
00:49:14,290 --> 00:49:16,640
know it and we introduce
a new programming language

1073
00:49:16,640 --> 00:49:19,050
called PHP, which like
C, is going to give us

1074
00:49:19,050 --> 00:49:22,450
the power to actually create programs
that themselves generate output.

1075
00:49:22,450 --> 00:49:25,900
In this case, we'll be using
PHP to generate dynamically web

1076
00:49:25,900 --> 00:49:27,340
pages using this new language.

1077
00:49:27,340 --> 00:49:28,989
So more on that on Wednesday.

1078
00:49:28,989 --> 00:49:29,530
See you then.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [MUSIC PLAYING]

1081
00:49:37,380 --> 00:52:38,864