1
00:00:00,000 --> 00:00:00,500

2
00:00:00,500 --> 00:00:03,946
[MUSIC PLAYING]

3
00:00:03,946 --> 00:00:10,790

4
00:00:10,790 --> 00:00:12,540
ALLISON BUCHHOLTZ-AU:
All right, everyone.

5
00:00:12,540 --> 00:00:13,860
Welcome back to section.

6
00:00:13,860 --> 00:00:19,559
So our agenda for today is going
over much more web dev stuff.

7
00:00:19,559 --> 00:00:21,600
I don't know how many of
you have seen your psets

8
00:00:21,600 --> 00:00:24,414
since it was released
earlier this morning.

9
00:00:24,414 --> 00:00:26,330
I would as how many
people have read the spec,

10
00:00:26,330 --> 00:00:29,910
but seeing as how you've had all
of, like, seven hours to look at it

11
00:00:29,910 --> 00:00:31,910
and it's a Monday and
you've probably had class,

12
00:00:31,910 --> 00:00:34,160
I'm going to assume that
most of you have not.

13
00:00:34,160 --> 00:00:37,170
If you have, extra kudos.

14
00:00:37,170 --> 00:00:39,400
>> You're basically helping
implement a simple web

15
00:00:39,400 --> 00:00:43,270
server in C, which is a brand new pset,
so you guys get to be the Guinea pigs.

16
00:00:43,270 --> 00:00:49,730
It's going to be a fun, wild week,
but I think it'll be a lot of fun

17
00:00:49,730 --> 00:00:52,260
and it'll be a really
good experience actually.

18
00:00:52,260 --> 00:00:54,920
So to prepare you for
that, in section today,

19
00:00:54,920 --> 00:01:00,940
we're going to go chmod, TCP/IP, and
then a little bit of HTML and CSS.

20
00:01:00,940 --> 00:01:05,080
>> At the end, we'll actually code
up a simple web page together

21
00:01:05,080 --> 00:01:09,042
to help you guys kind of get
more familiarized with that.

22
00:01:09,042 --> 00:01:11,750
And then if you haven't picked up
your quizzes, they're in front,

23
00:01:11,750 --> 00:01:14,890
but I'm pretty sure everyone
here has their quiz.

24
00:01:14,890 --> 00:01:17,880
And also on that note,
solutions aren't up yet,

25
00:01:17,880 --> 00:01:21,490
but as soon as we finish-- like, the
last few people taking their quizzes--

26
00:01:21,490 --> 00:01:22,280
they will be up.

27
00:01:22,280 --> 00:01:24,630
If you have any questions
in the meantime,

28
00:01:24,630 --> 00:01:26,240
feel free to email me personally.

29
00:01:26,240 --> 00:01:30,700
I will respond with your individual
questions, as I always do.

30
00:01:30,700 --> 00:01:33,890
>> So on that note, chmod.

31
00:01:33,890 --> 00:01:36,390
So basically all you
need to know about chmod

32
00:01:36,390 --> 00:01:39,620
is that it's used to change
file permissions, right?

33
00:01:39,620 --> 00:01:44,050
So it's just some systems call it a
change permissions, as it says here.

34
00:01:44,050 --> 00:01:48,540
And if you ever want to see
what permissions a file has,

35
00:01:48,540 --> 00:01:52,240
instead of just doing
ls, you could do ls -l.

36
00:01:52,240 --> 00:01:54,010
l stands for long.

37
00:01:54,010 --> 00:01:56,460
>> So you'll do long lists
of everything, and it

38
00:01:56,460 --> 00:02:02,080
will give you much more detailed
information about each of your files.

39
00:02:02,080 --> 00:02:05,540
And you'll see something-- I'm
going to skip ahead for a second--

40
00:02:05,540 --> 00:02:08,910
but you'll see something similar to
that top line there for each file.

41
00:02:08,910 --> 00:02:11,560
And we'll go through what that means.

42
00:02:11,560 --> 00:02:15,260
>> So basically, to change
your file permissions,

43
00:02:15,260 --> 00:02:16,850
you just want to use chmod.

44
00:02:16,850 --> 00:02:23,620
You can think of it as any other
UNIX call like ls or cd or whatnot.

45
00:02:23,620 --> 00:02:25,540
It's just kind of another like call.

46
00:02:25,540 --> 00:02:30,530
>> So we do chmod and then we'll
have three digits typically.

47
00:02:30,530 --> 00:02:33,570
There are a couple ways to do
it, one of which we'll go over.

48
00:02:33,570 --> 00:02:37,650
But typically, you'll have three
digits ranging from 0 to 7 each time.

49
00:02:37,650 --> 00:02:43,530
>> So one thing is that there are
three different permissions

50
00:02:43,530 --> 00:02:45,510
that we can give each file.

51
00:02:45,510 --> 00:02:49,480
And it's readable, which is
represented by r, which will make sense

52
00:02:49,480 --> 00:02:54,020
in a little bit; w, which is
writable; and executable, which is x.

53
00:02:54,020 --> 00:02:57,630
I know that the e one, executable,
maybe not the most sense, but we

54
00:02:57,630 --> 00:02:59,120
represent it with x.

55
00:02:59,120 --> 00:03:05,290
>> And then what happens is each of these
also have the number representation.

56
00:03:05,290 --> 00:03:07,990
So we have 1, 2, and 4.

57
00:03:07,990 --> 00:03:12,060
And basically what happens is
each of these three numbers

58
00:03:12,060 --> 00:03:17,380
here corresponds to a
different set of users

59
00:03:17,380 --> 00:03:19,420
that those permissions pertain to.

60
00:03:19,420 --> 00:03:24,820
>> So you can think of that first
number corresponds to the actual user

61
00:03:24,820 --> 00:03:29,360
or the owner of the file, the second
number will correspond to the group,

62
00:03:29,360 --> 00:03:33,590
and the last one refers
to the world, OK?

63
00:03:33,590 --> 00:03:39,995
So what happens is remember
those numbers-- r is 4, w is 2,

64
00:03:39,995 --> 00:03:42,550
x is 1, right?

65
00:03:42,550 --> 00:03:46,630
This-- if you sum these up,
that gives you that first number

66
00:03:46,630 --> 00:03:48,600
that we might input in our chmod.

67
00:03:48,600 --> 00:03:52,191
>> So in this case, what
would this number be?

68
00:03:52,191 --> 00:03:57,030
It'd be 4 plus 2 plus
1, which is a 7, right?

69
00:03:57,030 --> 00:03:59,250
And in this case, these
don't have anything,

70
00:03:59,250 --> 00:04:06,450
so this right here would
translate to chmod 700, OK?

71
00:04:06,450 --> 00:04:12,030
And what that does is it grants all
of these permissions to your user.

72
00:04:12,030 --> 00:04:14,400
>> So this means our user
can do whatever they want.

73
00:04:14,400 --> 00:04:15,400
They can read this file.

74
00:04:15,400 --> 00:04:16,810
They can execute this file.

75
00:04:16,810 --> 00:04:18,360
They can write to this file.

76
00:04:18,360 --> 00:04:23,545
But group and the world, no
permissions whatsoever, OK?

77
00:04:23,545 --> 00:04:26,480

78
00:04:26,480 --> 00:04:32,680
>> So another way to write that, we can
do chmod of three digits, each of which

79
00:04:32,680 --> 00:04:40,040
corresponds to whatever the sum or that
specific group is, specific subset.

80
00:04:40,040 --> 00:04:44,870
Or we can do actually another thing.

81
00:04:44,870 --> 00:04:45,590
Hold on.

82
00:04:45,590 --> 00:04:49,330
We can do something with these here.

83
00:04:49,330 --> 00:04:55,615
>> How many of you saw an example
where it was like to chmod a plus x?

84
00:04:55,615 --> 00:04:58,070
Did you see that in lecture, I think?

85
00:04:58,070 --> 00:05:00,610
So a stands for all.

86
00:05:00,610 --> 00:05:04,990
It means give it to all users,
which I forgot to put here.

87
00:05:04,990 --> 00:05:08,790
>> But a plus x, if we
notice here, if we do

88
00:05:08,790 --> 00:05:13,420
to chmod-- what group we're
talking about plus the permissions

89
00:05:13,420 --> 00:05:14,660
we want to give them.

90
00:05:14,660 --> 00:05:16,120
So this can be a plus or a minus.

91
00:05:16,120 --> 00:05:17,690
Plus adds permission.

92
00:05:17,690 --> 00:05:19,510
Minus takes away permission.

93
00:05:19,510 --> 00:05:22,520
Pretty intuitive, I think.

94
00:05:22,520 --> 00:05:25,720
>> So a plus x means chmod.

95
00:05:25,720 --> 00:05:32,260
So change the permissions of all people
if this is an a-- add permissions.

96
00:05:32,260 --> 00:05:37,110
And x-- that means what permission
are we granting everyone.

97
00:05:37,110 --> 00:05:38,510
Read, write, or execute?

98
00:05:38,510 --> 00:05:39,360
>> AUDIENCE: Execute.

99
00:05:39,360 --> 00:05:40,610
>> ALLISON BUCHHOLTZ-AU: Execute.

100
00:05:40,610 --> 00:05:46,080
So we are giving all users
permission to execute this file, OK?

101
00:05:46,080 --> 00:05:53,370
So what if we wanted to do
that with the numeric form?

102
00:05:53,370 --> 00:05:56,290
So remember with numeric,
we want three numbers.

103
00:05:56,290 --> 00:05:56,790
>> AUDIENCE: 4.

104
00:05:56,790 --> 00:05:58,290
ALLISON BUCHHOLTZ-AU: What was that?

105
00:05:58,290 --> 00:05:59,260
AUDIENCE: 4.

106
00:05:59,260 --> 00:06:00,426
ALLISON BUCHHOLTZ-AU: Not 4.

107
00:06:00,426 --> 00:06:01,599
AUDIENCE: 0, 0, 4.

108
00:06:01,599 --> 00:06:04,390
ALLISON BUCHHOLTZ-AU: Well, we want
to give it to all users, right?

109
00:06:04,390 --> 00:06:07,442
So we're going to have
a number in each slot.

110
00:06:07,442 --> 00:06:09,400
That's going to be the
same number in each slot

111
00:06:09,400 --> 00:06:13,800
because we just want to give
everyone executable permissions.

112
00:06:13,800 --> 00:06:16,480
So executable is 1,
but on the right track.

113
00:06:16,480 --> 00:06:23,055
>> So if we did chmod 111 that would
be the equivalent of chmod a plus x.

114
00:06:23,055 --> 00:06:24,430
Does that make sense to everyone?

115
00:06:24,430 --> 00:06:26,910
We're going to go through
a couple of examples.

116
00:06:26,910 --> 00:06:29,860
>> So the big takeaway
here is a's not on here,

117
00:06:29,860 --> 00:06:33,360
but a just means give it to all users.

118
00:06:33,360 --> 00:06:36,610
u is if you just want
to give or take away

119
00:06:36,610 --> 00:06:40,600
a specific permission from
the user or the owner.

120
00:06:40,600 --> 00:06:43,800
g is for the group,
so that middle digit.

121
00:06:43,800 --> 00:06:49,440
And then others you can think of
as the world, that last digit.

122
00:06:49,440 --> 00:06:52,840
>> So with that, we'll go to an example,
because I feel like examples always

123
00:06:52,840 --> 00:06:56,240
make these things easier to understand.

124
00:06:56,240 --> 00:07:01,240
So rwx-- we went through this--
could also be represent as 700.

125
00:07:01,240 --> 00:07:05,070
That's the example we looked
at more of the picture.

126
00:07:05,070 --> 00:07:09,990
So chmod 444 on some file
would give what permissions?

127
00:07:09,990 --> 00:07:11,947
You were really close.

128
00:07:11,947 --> 00:07:13,030
AUDIENCE: Readable to all.

129
00:07:13,030 --> 00:07:14,321
ALLISON BUCHHOLTZ-AU: Readable.

130
00:07:14,321 --> 00:07:15,660
So readable to everyone, right?

131
00:07:15,660 --> 00:07:17,910
And then what's another way to do that?

132
00:07:17,910 --> 00:07:23,070
If we want to do chmod with either
r's or w's, plus and minuses,

133
00:07:23,070 --> 00:07:25,300
what would that call look like?

134
00:07:25,300 --> 00:07:27,336
It would be chmod what?

135
00:07:27,336 --> 00:07:28,590
>> AUDIENCE: a plus r.

136
00:07:28,590 --> 00:07:32,900
>> ALLISON BUCHHOLTZ-AU: a plus r on the 5.

137
00:07:32,900 --> 00:07:40,980
OK, so this is the same as this,
just two different translations

138
00:07:40,980 --> 00:07:42,500
of the same thing.

139
00:07:42,500 --> 00:07:45,650
So with that, we have these.

140
00:07:45,650 --> 00:07:50,310
So I want you guys to try and write
these kind of in their opposite way.

141
00:07:50,310 --> 00:07:53,710
>> So with chmod 555,
what would it be like?

142
00:07:53,710 --> 00:07:56,704
Would it be a plus or u plus or whatnot?

143
00:07:56,704 --> 00:07:58,370
For u plus x, give me the three numbers.

144
00:07:58,370 --> 00:08:03,530
And then tell me about what permissions
we're actually granting and to who?

145
00:08:03,530 --> 00:08:06,600
>> So I'll give you guys two
minutes to work on that.

146
00:08:06,600 --> 00:08:08,160
Feel free to talk with each other.

147
00:08:08,160 --> 00:08:11,910
For those of you who came in a little
late, there is candy and shirts.

148
00:08:11,910 --> 00:08:14,590
We have three shirts left, and
we have Kit Kats and Starbursts.

149
00:08:14,590 --> 00:08:17,630
So feel free to come grab
some in this little interlude.

150
00:08:17,630 --> 00:09:03,190

151
00:09:03,190 --> 00:09:04,440
>> Also, the last one is tricky.

152
00:09:04,440 --> 00:09:06,670
It's two chmods for the last one.

153
00:09:06,670 --> 00:09:10,990

154
00:09:10,990 --> 00:09:15,880
Actually, let me close that door
while you guys are working on that.

155
00:09:15,880 --> 00:09:26,240

156
00:09:26,240 --> 00:09:28,225
Candy's always necessary
on a Monday afternoon.

157
00:09:28,225 --> 00:09:31,740

158
00:09:31,740 --> 00:09:34,756
>> OK, so chmod 555.

159
00:09:34,756 --> 00:09:36,380
What's another way we could write that?

160
00:09:36,380 --> 00:09:39,860

161
00:09:39,860 --> 00:09:41,790
Any ideas?

162
00:09:41,790 --> 00:09:42,290
Yes.

163
00:09:42,290 --> 00:09:43,280
>> AUDIENCE: a plus rx.

164
00:09:43,280 --> 00:09:44,613
>> ALLISON BUCHHOLTZ-AU: r plus rx.

165
00:09:44,613 --> 00:09:47,290
Do you want to explain why it'd be rx?

166
00:09:47,290 --> 00:09:49,570
>> AUDIENCE: Because you have
5, so that's 4 plus 1,

167
00:09:49,570 --> 00:09:51,734
so that's read plus
executable, and it's for all.

168
00:09:51,734 --> 00:09:52,900
ALLISON BUCHHOLTZ-AU: Right.

169
00:09:52,900 --> 00:09:58,540
So just to reiterate, 5 here
we know as the sum of 4 and 1,

170
00:09:58,540 --> 00:10:04,760
because each number in our trio is the
sum of the permissions for that subset,

171
00:10:04,760 --> 00:10:05,260
right?

172
00:10:05,260 --> 00:10:07,070
Either the user, the
group, or the world.

173
00:10:07,070 --> 00:10:11,160
So in this case, we know that
5 has to be formed by 4 and 1.

174
00:10:11,160 --> 00:10:15,240
>> And 4 and 1 correspond to
readable and executable.

175
00:10:15,240 --> 00:10:21,717
We are giving it to everyone,
so we can do chmod a plus rx.

176
00:10:21,717 --> 00:10:24,050
And obviously, we just went
through the questions there,

177
00:10:24,050 --> 00:10:28,810
so now this file is executable
and readable to everyone.

178
00:10:28,810 --> 00:10:31,120
>> So what about the second one?

179
00:10:31,120 --> 00:10:32,900
What might the number for that one be?

180
00:10:32,900 --> 00:10:36,676

181
00:10:36,676 --> 00:10:37,180
Any ideas?

182
00:10:37,180 --> 00:10:37,680
Go ahead.

183
00:10:37,680 --> 00:10:38,600
>> AUDIENCE: 100 [INAUDIBLE].

184
00:10:38,600 --> 00:10:39,683
>> ALLISON BUCHHOLTZ-AU: 100.

185
00:10:39,683 --> 00:10:40,270
Exactly.

186
00:10:40,270 --> 00:10:42,455
So do you want to explain why 100?

187
00:10:42,455 --> 00:10:45,080
AUDIENCE: Because it's for the
user, so it's in first position.

188
00:10:45,080 --> 00:10:47,371
And then x executable is 1.

189
00:10:47,371 --> 00:10:48,620
ALLISON BUCHHOLTZ-AU: Exactly.

190
00:10:48,620 --> 00:10:53,120
So we are granting executable
permissions to just the user.

191
00:10:53,120 --> 00:10:55,100
So in this case, it would be 100.

192
00:10:55,100 --> 00:10:57,570
And I have all the answers
up on the next slide in case

193
00:10:57,570 --> 00:11:00,060
you're writing lots of things down.

194
00:11:00,060 --> 00:11:08,410
>> OK, so this next one is actually done
with two chmods, you could do it.

195
00:11:08,410 --> 00:11:11,120
So does anyone have
any idea how you might

196
00:11:11,120 --> 00:11:14,150
get chmod 640 rewritten
in the other way?

197
00:11:14,150 --> 00:11:17,770

198
00:11:17,770 --> 00:11:22,820
You can change the user first and then
you can change the group is my hint.

199
00:11:22,820 --> 00:11:29,740
>> So if we were just changing the
user, which is this first one here,

200
00:11:29,740 --> 00:11:33,830
what might our call be?

201
00:11:33,830 --> 00:11:36,080
So user is u, right?

202
00:11:36,080 --> 00:11:38,780
So chmod u plus what?

203
00:11:38,780 --> 00:11:39,280
Mmhmm?

204
00:11:39,280 --> 00:11:40,469
>> AUDIENCE: rw.

205
00:11:40,469 --> 00:11:41,510
ALLISON BUCHHOLTZ-AU: rw.

206
00:11:41,510 --> 00:11:47,470
Right, for read and write, because read
is 4, w is 2, those sum together as 6.

207
00:11:47,470 --> 00:11:52,760
So we get chmod u plus rw,
and we get our first 6 there.

208
00:11:52,760 --> 00:11:56,860
>> So then to get the 4, we now want
to change our group settings.

209
00:11:56,860 --> 00:12:00,960
So we're going to do chmod g plus what?

210
00:12:00,960 --> 00:12:02,380
What's a 4?

211
00:12:02,380 --> 00:12:03,040
>> AUDIENCE: r.

212
00:12:03,040 --> 00:12:04,040
ALLISON BUCHHOLTZ-AU: r.

213
00:12:04,040 --> 00:12:05,070
Precisely.

214
00:12:05,070 --> 00:12:09,140
So we're giving the owner
read and write permissions

215
00:12:09,140 --> 00:12:13,141
and we're giving the group read
permissions, which we have all up here.

216
00:12:13,141 --> 00:12:13,640
Mmhmm?

217
00:12:13,640 --> 00:12:17,740
>> AUDIENCE: If you can write something,
does it imply you can execute it?

218
00:12:17,740 --> 00:12:20,700
>> ALLISON BUCHHOLTZ-AU: You
can write to something--

219
00:12:20,700 --> 00:12:22,900
I don't believe that it
implies you can execute it.

220
00:12:22,900 --> 00:12:25,951

221
00:12:25,951 --> 00:12:26,450
Cool.

222
00:12:26,450 --> 00:12:29,620
So that's all that we just went through.

223
00:12:29,620 --> 00:12:33,075
So on this next one, it's
just kind of common cases

224
00:12:33,075 --> 00:12:35,200
that you want to keep in
mind for your problem set.

225
00:12:35,200 --> 00:12:39,800
These are typically the permissions
that we like you to use.

226
00:12:39,800 --> 00:12:44,900
>> So for 711, that gives
us, of course, user

227
00:12:44,900 --> 00:12:47,720
all permissions, which
tends to make sense.

228
00:12:47,720 --> 00:12:51,920
And then it's executable by the
group in the world, which makes sense

229
00:12:51,920 --> 00:12:56,150
if you have some directory, you
want to be able to traverse into it.

230
00:12:56,150 --> 00:12:58,160
People need access.

231
00:12:58,160 --> 00:13:04,680
>> For any non-PHP file, you're going
to use 644, which would do what?

232
00:13:04,680 --> 00:13:07,560
What does that imply, or what
permissions does that give?

233
00:13:07,560 --> 00:13:12,210

234
00:13:12,210 --> 00:13:14,409
So the owner can what?

235
00:13:14,409 --> 00:13:15,450
AUDIENCE: Read and write.

236
00:13:15,450 --> 00:13:16,991
ALLISON BUCHHOLTZ-AU: Read and write.

237
00:13:16,991 --> 00:13:21,560
And then group and others
can just read, right?

238
00:13:21,560 --> 00:13:25,660
And then chmod 600 for any
PHP files that you use,

239
00:13:25,660 --> 00:13:27,980
your owner, again, can
read and write to it

240
00:13:27,980 --> 00:13:32,310
but everyone else is
just kind of blocked off.

241
00:13:32,310 --> 00:13:34,540
>> So this will actually
be more useful when

242
00:13:34,540 --> 00:13:37,700
you get to your problem
set next week where

243
00:13:37,700 --> 00:13:40,290
you're actually building a website.

244
00:13:40,290 --> 00:13:43,100
So if you ever run into
any strange problems

245
00:13:43,100 --> 00:13:45,970
where it's not loading
properly, maybe you

246
00:13:45,970 --> 00:13:50,670
need to add an executable
permission, or maybe you need a read

247
00:13:50,670 --> 00:13:52,990
or write permission.

248
00:13:52,990 --> 00:13:56,980
Little things that tend to trip people
up, but that's kind of like the go-to

249
00:13:56,980 --> 00:13:58,564
when you start next week's pset.

250
00:13:58,564 --> 00:14:00,730
And I would give you more
hints on this week's pset,

251
00:14:00,730 --> 00:14:05,010
but I have yet to look at it since
it was released this morning.

252
00:14:05,010 --> 00:14:10,600
But you email me, I will have looked
at it by the time I respond tomorrow.

253
00:14:10,600 --> 00:14:14,310
>> So now, is everyone good with chmod?

254
00:14:14,310 --> 00:14:16,040
Any lingering questions?

255
00:14:16,040 --> 00:14:17,240
Pretty straightforward.

256
00:14:17,240 --> 00:14:20,620
Just kind of keeping track of what
read, write, and execute numbers are

257
00:14:20,620 --> 00:14:23,660
is probably the hardest part.

258
00:14:23,660 --> 00:14:29,620
>> So with TCP/IP, all these protocols,
kind of like with your data structures

259
00:14:29,620 --> 00:14:31,990
last week, it's much more
important to kind of get

260
00:14:31,990 --> 00:14:33,900
a higher level intuition of them.

261
00:14:33,900 --> 00:14:37,390
This is not CS143 where we're going
to ask you to implement a network,

262
00:14:37,390 --> 00:14:39,870
so you'll be fine if
you don't understand

263
00:14:39,870 --> 00:14:42,900
the nitty gritty of all the protocols.

264
00:14:42,900 --> 00:14:46,050
What's important to understand is
kind of like what they represent

265
00:14:46,050 --> 00:14:47,300
and why they're important.

266
00:14:47,300 --> 00:14:52,320
>> So TCP/IP, of course, it is the
Transmission Control Protocol

267
00:14:52,320 --> 00:14:57,270
or Internet Protocol, which is
basically just a set of laws basically

268
00:14:57,270 --> 00:15:00,800
or standards that tell data
how it should be handled,

269
00:15:00,800 --> 00:15:04,900
how it should be packetized,
transmitted, and received.

270
00:15:04,900 --> 00:15:09,200
So it basically, just as it
says here, increases the chances

271
00:15:09,200 --> 00:15:12,950
that data gets where
you want it to get to.

272
00:15:12,950 --> 00:15:15,950
>> I'm sure if you guys went to
lecture or watched it online,

273
00:15:15,950 --> 00:15:18,232
he has-- I don't know
if he did it this year,

274
00:15:18,232 --> 00:15:20,940
but I know last year, he had a
demo where he had a picture of Rob

275
00:15:20,940 --> 00:15:23,320
and he split it up into
four and put it in envelopes

276
00:15:23,320 --> 00:15:26,590
and tried to get it across Sanders.

277
00:15:26,590 --> 00:15:29,430
And you can kind of
think of it that way.

278
00:15:29,430 --> 00:15:35,400
It's just a set of rules that
tell data how to get someplace

279
00:15:35,400 --> 00:15:37,640
and lets you know if
you are missing data,

280
00:15:37,640 --> 00:15:40,460
in the same way that if you are
taking multiple pages of notes

281
00:15:40,460 --> 00:15:46,490
and you label them with page 104, page
204, and you go back to study later

282
00:15:46,490 --> 00:15:50,220
and you are missing something--
you can't find page 304-- you know

283
00:15:50,220 --> 00:15:53,310
something's wrong, so you
can look through your notes

284
00:15:53,310 --> 00:15:58,666
again or ask someone to resend you
the lecture notes from that day.

285
00:15:58,666 --> 00:16:00,290
The same way with data on the internet.

286
00:16:00,290 --> 00:16:03,220
If I'm asking for
something from some server

287
00:16:03,220 --> 00:16:05,377
and it needs to send
it in multiple packets,

288
00:16:05,377 --> 00:16:07,210
probably going to number
it in some way, let

289
00:16:07,210 --> 00:16:12,430
me know how many I should have received,
and tell me, oh, this is one of 10

290
00:16:12,430 --> 00:16:13,990
or this is one of 10,000.

291
00:16:13,990 --> 00:16:17,030
That way when I go to reassemble
all the pieces together,

292
00:16:17,030 --> 00:16:21,504
I know if something's missing
and I can ask for that again.

293
00:16:21,504 --> 00:16:22,730
Does that make sense?

294
00:16:22,730 --> 00:16:23,610
Just a set of rules.

295
00:16:23,610 --> 00:16:28,120
At its basis, set of rules, OK?

296
00:16:28,120 --> 00:16:31,360
>> So we also talked a
little bit about ports.

297
00:16:31,360 --> 00:16:36,150
This is really just a standard that
lets you know what type of data

298
00:16:36,150 --> 00:16:38,650
is being transmitted in these packets.

299
00:16:38,650 --> 00:16:40,790
If we go with our
envelope example, we don't

300
00:16:40,790 --> 00:16:43,510
know that it's a picture of
Rob in there unless we write it

301
00:16:43,510 --> 00:16:45,480
on the outside of our envelope.

302
00:16:45,480 --> 00:16:47,100
So ports are basically the same thing.

303
00:16:47,100 --> 00:16:51,670
It's just a way to figure out what
type of data is being transmitted.

304
00:16:51,670 --> 00:16:56,260
>> So we have all of the
most common ones here.

305
00:16:56,260 --> 00:16:59,790
So 21-- these are also kind
of like good things to know.

306
00:16:59,790 --> 00:17:01,560
It's kind of an easy quiz question.

307
00:17:01,560 --> 00:17:03,590
Be like, what does port 80 do?

308
00:17:03,590 --> 00:17:06,970
Or, what does port 443 do?

309
00:17:06,970 --> 00:17:09,359
So good things to know.

310
00:17:09,359 --> 00:17:12,569
>> So we have here, 21 is file
transfer protocol, so just

311
00:17:12,569 --> 00:17:15,050
the rules that govern file transfer.

312
00:17:15,050 --> 00:17:19,550
25, something that we all
use far too much, is email.

313
00:17:19,550 --> 00:17:22,790
53 is the domain name
system, which is basically

314
00:17:22,790 --> 00:17:26,910
just kind of a lookup for the
IP address of a domain name.

315
00:17:26,910 --> 00:17:29,900
>> So I'm pretty sure it was
mentioned in lecture, if you

316
00:17:29,900 --> 00:17:33,960
go to something like
google.com, it has an IP address

317
00:17:33,960 --> 00:17:35,818
that's associated with it.

318
00:17:35,818 --> 00:17:37,026
It's not actually google.com.

319
00:17:37,026 --> 00:17:40,720
And so 53 is the port
that actually takes

320
00:17:40,720 --> 00:17:44,050
care of kind of translating it
into that IP address for you.

321
00:17:44,050 --> 00:17:47,830
And then 80 and 443 are very common.

322
00:17:47,830 --> 00:17:50,710
You either have your web page or
you have your secure web page,

323
00:17:50,710 --> 00:17:56,100
which a lot of web pages are
transferring over to now.

324
00:17:56,100 --> 00:18:02,540
>> So that's kind of high level
overview of transfer protocol.

325
00:18:02,540 --> 00:18:05,170
I don't see much more in depth.

326
00:18:05,170 --> 00:18:07,320
It's kind of cool stuff
if you're interested.

327
00:18:07,320 --> 00:18:08,590
There's plenty of resources.

328
00:18:08,590 --> 00:18:10,780
Wikipedia actually is
a pretty good page.

329
00:18:10,780 --> 00:18:13,850
So I was looking at it
just a little while ago,

330
00:18:13,850 --> 00:18:16,580
so I would highly recommend
looking at it if you're interested

331
00:18:16,580 --> 00:18:22,160
or take 143 in two years because
I think it's every other year.

332
00:18:22,160 --> 00:18:27,590
>> So on the end of this, we're
talking about web pages and HTTP,

333
00:18:27,590 --> 00:18:33,790
which is actually our next topic for
today before we go into HTML and CSS

334
00:18:33,790 --> 00:18:37,920
and you can actually code up a web page.

335
00:18:37,920 --> 00:18:38,650
It'll be fun.

336
00:18:38,650 --> 00:18:42,220
We'll have pictures of
bunnies and it'll be great.

337
00:18:42,220 --> 00:18:48,630
>> So HTTP, as you can see here,
is one of the lovely acronyms

338
00:18:48,630 --> 00:18:53,220
for this week, which is
Hypertext Transfer protocol.

339
00:18:53,220 --> 00:18:57,940
So again, it's just
another set of rules that

340
00:18:57,940 --> 00:19:01,440
governs hypertext
transfer, in this case.

341
00:19:01,440 --> 00:19:04,120
So best way to learn
about this is just kind of

342
00:19:04,120 --> 00:19:07,650
to break it down into
these individual words

343
00:19:07,650 --> 00:19:10,770
because there are a lot of
words on the screen there.

344
00:19:10,770 --> 00:19:13,290
>> So we're going to start with hypertext.

345
00:19:13,290 --> 00:19:17,630
So "hyper," you can think of
"above," like super-type thing.

346
00:19:17,630 --> 00:19:24,615
So it's really just text taken to the
next level, so it's like super text,

347
00:19:24,615 --> 00:19:27,850
like the next text.

348
00:19:27,850 --> 00:19:34,890
So it's basically just
text that gives us

349
00:19:34,890 --> 00:19:37,490
more information than
normal text does, OK?

350
00:19:37,490 --> 00:19:40,510
>> So in this case here, this is hypertext.

351
00:19:40,510 --> 00:19:45,710
This tells us that we have
some link that we're going to,

352
00:19:45,710 --> 00:19:49,620
which is cs50.net, which
is now cs50.harvard.edu.

353
00:19:49,620 --> 00:19:51,420
These slides are a little old.

354
00:19:51,420 --> 00:19:55,330
And it's going to display
it as this, as a hyperlink,

355
00:19:55,330 --> 00:19:58,140
and then a really cool website.

356
00:19:58,140 --> 00:20:02,080
>> So it's text, which is a little
bit of really cool things in there.

357
00:20:02,080 --> 00:20:08,170
So you can link things and you can
insert images and you can style things.

358
00:20:08,170 --> 00:20:11,740
And the most familiar thing that you
guys probably have with hypertext

359
00:20:11,740 --> 00:20:19,100
is HyperText Markup Language, HTML,
which of course is all of the web

360
00:20:19,100 --> 00:20:23,080
that we see around us, granted
with some CSS style thrown in.

361
00:20:23,080 --> 00:20:25,580
>> But if anyone was
really big with MySpace,

362
00:20:25,580 --> 00:20:28,240
I'm sure you all used HTML
all the time to create

363
00:20:28,240 --> 00:20:30,640
those perfect profiles, right?

364
00:20:30,640 --> 00:20:34,930
I feel like that might be an
outdated reference now, but whatever.

365
00:20:34,930 --> 00:20:37,780
Just a little-- you guys
aren't that much younger.

366
00:20:37,780 --> 00:20:40,480
Some of you are older than me.

367
00:20:40,480 --> 00:20:42,480
MySpace was still a
thing when I was young.

368
00:20:42,480 --> 00:20:44,510
I'm not that old.

369
00:20:44,510 --> 00:20:49,265
>> Anyways, HTML just a form of hypertext.

370
00:20:49,265 --> 00:20:55,640
So hypertext is just
text with added features.

371
00:20:55,640 --> 00:21:01,790
So transfer protocol is probably
the more iffy thing to explain.

372
00:21:01,790 --> 00:21:04,870
Obviously, transfer--
just transfer of data.

373
00:21:04,870 --> 00:21:09,370
So either between the client, like
your web brother, and a server.

374
00:21:09,370 --> 00:21:12,090
So basically just the
way the internet works.

375
00:21:12,090 --> 00:21:16,339
>> So the exact request of
how these work, we're

376
00:21:16,339 --> 00:21:18,755
actually going to look at an
example request and response.

377
00:21:18,755 --> 00:21:21,730

378
00:21:21,730 --> 00:21:25,220
But how we request
information from a server

379
00:21:25,220 --> 00:21:30,590
and how the server responds to us is
what this transfer protocol governs.

380
00:21:30,590 --> 00:21:35,320
So the request and the response have
to follow these specific set of rules.

381
00:21:35,320 --> 00:21:38,340
It's standardized so that no matter
where you're using the internet,

382
00:21:38,340 --> 00:21:40,720
it always works the same, OK?

383
00:21:40,720 --> 00:21:43,220
>> Again, protocol, set of rules.

384
00:21:43,220 --> 00:21:45,620
It's just a normal
interaction in the same way

385
00:21:45,620 --> 00:21:49,500
that Professor Malan talks about
if someone extends their hand,

386
00:21:49,500 --> 00:21:52,880
you know that it's common courtesy to
reach yours out and shake their hand.

387
00:21:52,880 --> 00:21:54,580
That's a protocol, right?

388
00:21:54,580 --> 00:21:59,060
>> So I give some standardized request,
which is I want to shake your hand,

389
00:21:59,060 --> 00:22:01,975
and you give some standardized
response, which is either no thanks

390
00:22:01,975 --> 00:22:04,600
or you could try and shake my
hand or maybe you're going to try

391
00:22:04,600 --> 00:22:06,490
and fist bump me.

392
00:22:06,490 --> 00:22:08,320
And we don't have a protocol for that.

393
00:22:08,320 --> 00:22:09,360
It breaks down.

394
00:22:09,360 --> 00:22:12,030
But if everyone follows the
same protocol, of course,

395
00:22:12,030 --> 00:22:14,250
it goes much more seamlessly.

396
00:22:14,250 --> 00:22:15,590
People get to know each other.

397
00:22:15,590 --> 00:22:16,830
Everyone's happy.

398
00:22:16,830 --> 00:22:20,750
>> So in the world of the web,
everyone follows the same rules--

399
00:22:20,750 --> 00:22:22,940
slightly better than social standards.

400
00:22:22,940 --> 00:22:26,950
But with that, we'll look
at an example request here.

401
00:22:26,950 --> 00:22:30,020
So there's this little
key here on bottom

402
00:22:30,020 --> 00:22:34,990
that tells you the different colors,
what they're supposed to mean.

403
00:22:34,990 --> 00:22:38,290
>> So white is just like your method
request and protocol version--

404
00:22:38,290 --> 00:22:42,400
so method request, version.

405
00:22:42,400 --> 00:22:44,630
And then this is some
field name and the value

406
00:22:44,630 --> 00:22:47,630
of that field, which we will
go into very, very shortly.

407
00:22:47,630 --> 00:22:49,840
So this is an example request.

408
00:22:49,840 --> 00:22:54,470
This is like me extending out,
wanting to introduce myself.

409
00:22:54,470 --> 00:22:58,507
>> This is what the client
or what your web browser

410
00:22:58,507 --> 00:22:59,840
would be sending to your server.

411
00:22:59,840 --> 00:23:04,500
So this is a get request, so it's
asking for something from the server.

412
00:23:04,500 --> 00:23:09,690
And it's, of course, HTTP
and it's version 1.1.

413
00:23:09,690 --> 00:23:16,060
>> So the rest of this here is what we call
the header, and its extra information

414
00:23:16,060 --> 00:23:20,050
that gives us a better idea of
what we're actually asking for,

415
00:23:20,050 --> 00:23:23,190
or information that we want to give
the server that might be pertinent.

416
00:23:23,190 --> 00:23:32,880
So User-Agent gives some more
description on-- for example, here,

417
00:23:32,880 --> 00:23:38,720
curl/7.24.0 is actually going to tell
the server that we're using Google

418
00:23:38,720 --> 00:23:40,700
Chrome as our browser.

419
00:23:40,700 --> 00:23:43,290
So if you ever hear
about people who talk

420
00:23:43,290 --> 00:23:48,160
about making an app responsive
to multiple browsers,

421
00:23:48,160 --> 00:23:50,330
this is something that they
would use because if you

422
00:23:50,330 --> 00:23:53,000
don't know what browser
the request is coming from,

423
00:23:53,000 --> 00:23:55,050
you can't tailor the data to that.

424
00:23:55,050 --> 00:23:57,690
So in this case, user
is just giving this kind

425
00:23:57,690 --> 00:24:01,030
of identifying information
about what browser

426
00:24:01,030 --> 00:24:06,510
your user is currently using, OK?

427
00:24:06,510 --> 00:24:11,640
>> So then we also have host, which is
where we're actually wanting to go to.

428
00:24:11,640 --> 00:24:15,280
In this case, we want to go to
apple.com, buy some cool new iPads

429
00:24:15,280 --> 00:24:19,540
or something, maybe cute
lights at our dorm rooms.

430
00:24:19,540 --> 00:24:24,900
And name value at the end is just
a filler, just a general thing

431
00:24:24,900 --> 00:24:25,760
for you guys to see.

432
00:24:25,760 --> 00:24:28,240
It doesn't actually
correspond to anything here.

433
00:24:28,240 --> 00:24:32,360
>> So you can have as much or as
little as you want in each case.

434
00:24:32,360 --> 00:24:36,990
Most of the time, these are optional.

435
00:24:36,990 --> 00:24:41,780
It just depends on what
you need from the browser,

436
00:24:41,780 --> 00:24:45,120
from your user in order to
properly give the request.

437
00:24:45,120 --> 00:24:48,970
Or it depends on what your user
actually wants to give up to the server.

438
00:24:48,970 --> 00:24:54,550
So you may have many, many
of these header field names

439
00:24:54,550 --> 00:24:57,140
or you might just have a couple.

440
00:24:57,140 --> 00:24:59,630
As with so many things
I've said in this section,

441
00:24:59,630 --> 00:25:03,590
it really depends on the context
of how you're using this.

442
00:25:03,590 --> 00:25:06,810
>> So does that makes sense to everyone?

443
00:25:06,810 --> 00:25:11,463
This is just an example of
a request, headers, whatnot.

444
00:25:11,463 --> 00:25:16,910
OK, so with that, we have some response.

445
00:25:16,910 --> 00:25:20,510
>> Again, we have our status code, protocol
version, and then field name and field

446
00:25:20,510 --> 00:25:21,700
value as always.

447
00:25:21,700 --> 00:25:25,500
So our protocol version
and our status code is 200.

448
00:25:25,500 --> 00:25:28,610
OK, which means that,
yes, everything went well.

449
00:25:28,610 --> 00:25:30,230
Here's what you want.

450
00:25:30,230 --> 00:25:33,750
>> The server type, the content
type-- it tells us, OK, you're

451
00:25:33,750 --> 00:25:37,210
going to get some text HTML.

452
00:25:37,210 --> 00:25:40,520
Here is the length of it and here's
what you should do with the connection.

453
00:25:40,520 --> 00:25:43,004
OK, so again, depending
on the data you're

454
00:25:43,004 --> 00:25:45,670
asking for, depending on what the
server wants to return to you,

455
00:25:45,670 --> 00:25:49,440
you may have more of these field
names, you might have less.

456
00:25:49,440 --> 00:25:53,950
Totally context dependent.

457
00:25:53,950 --> 00:25:56,650
>> And as far as this status
code here, of course,

458
00:25:56,650 --> 00:25:59,590
200 is not the only one
you could have, right?

459
00:25:59,590 --> 00:26:01,580
We have lots of status codes.

460
00:26:01,580 --> 00:26:06,120
Does anyone remember any of the
others that we mentioned in lecture?

461
00:26:06,120 --> 00:26:08,310
A lot of them start with 4.

462
00:26:08,310 --> 00:26:09,680
>> AUDIENCE: 404.

463
00:26:09,680 --> 00:26:11,310
>> ALLISON BUCHHOLTZ-AU: 404, which is?

464
00:26:11,310 --> 00:26:12,140
>> AUDIENCE: File not found?

465
00:26:12,140 --> 00:26:13,250
>> ALLISON BUCHHOLTZ-AU: File not found.

466
00:26:13,250 --> 00:26:14,120
Exactly.

467
00:26:14,120 --> 00:26:15,587
So what about 403?

468
00:26:15,587 --> 00:26:16,420
AUDIENCE: Forbidden.

469
00:26:16,420 --> 00:26:17,120
ALLISON BUCHHOLTZ-AU: Forbidden.

470
00:26:17,120 --> 00:26:18,695
So what do you think
that means with chmods?

471
00:26:18,695 --> 00:26:20,890
>> AUDIENCE: It means that you
don't have permission to read it.

472
00:26:20,890 --> 00:26:22,400
>> ALLISON BUCHHOLTZ-AU: Exactly.

473
00:26:22,400 --> 00:26:25,190
In some way, you don't have
permission to access it, right?

474
00:26:25,190 --> 00:26:27,242
So 404, 403.

475
00:26:27,242 --> 00:26:28,950
There's a really funny
one that we always

476
00:26:28,950 --> 00:26:31,116
introduce every year that
I should have put up here,

477
00:26:31,116 --> 00:26:33,370
like 413, which is I'm a teapot.

478
00:26:33,370 --> 00:26:34,390
You can google this.

479
00:26:34,390 --> 00:26:38,490
It's funny like, that is code
413 and it's I'm a teapot.

480
00:26:38,490 --> 00:26:41,240
Which I don't know why you would
ever need that on the internet,

481
00:26:41,240 --> 00:26:42,935
but I digress.

482
00:26:42,935 --> 00:26:44,310
AUDIENCE: Maybe you're a tea pot.

483
00:26:44,310 --> 00:26:46,476
ALLISON BUCHHOLTZ-AU: Maybe
the server is a tea pot.

484
00:26:46,476 --> 00:26:47,890
Who knows?

485
00:26:47,890 --> 00:26:51,840
All right, so we're about to
transition into real coding.

486
00:26:51,840 --> 00:26:54,750
I feel like you guys are going to
get out of here pretty quickly.

487
00:26:54,750 --> 00:26:56,940
>> AUDIENCE: Why does it
say "server: twice?

488
00:26:56,940 --> 00:26:57,981
>> ALLISON BUCHHOLTZ-AU: Hm?

489
00:26:57,981 --> 00:27:00,350
Server twice?

490
00:27:00,350 --> 00:27:03,750
That is a good question.

491
00:27:03,750 --> 00:27:04,630
I am not sure.

492
00:27:04,630 --> 00:27:07,520
I will find out and
I will email you all.

493
00:27:07,520 --> 00:27:11,410
>> OK, any other questions besides that?

494
00:27:11,410 --> 00:27:12,310
Good?

495
00:27:12,310 --> 00:27:14,390
Cool.

496
00:27:14,390 --> 00:27:17,280
>> HTML and CSS, and now we
get to all the fun parts.

497
00:27:17,280 --> 00:27:21,697
So as I mentioned before, HTML
is probably one of the things

498
00:27:21,697 --> 00:27:23,030
you guys are most familiar with.

499
00:27:23,030 --> 00:27:25,760
So we have HyperText Markup Language.

500
00:27:25,760 --> 00:27:29,900
>> The best way to learn this-- I don't
have any prepared slides or anything

501
00:27:29,900 --> 00:27:31,480
for you guys with HTML.

502
00:27:31,480 --> 00:27:33,640
It's really about learning the syntax.

503
00:27:33,640 --> 00:27:38,380
And if you were in the MySpace
day, you would have this down.

504
00:27:38,380 --> 00:27:42,790
>> So really, the biggest thing is
just to practice and experiment.

505
00:27:42,790 --> 00:27:48,000
One of the great resources I would
highly recommend using is W3Schools.

506
00:27:48,000 --> 00:27:50,620
So just W, 3, and then Schools.

507
00:27:50,620 --> 00:27:54,810
They have a lot of
resources on HTML, on CSS,

508
00:27:54,810 --> 00:27:58,970
and they actually have a
split screen sort of thing

509
00:27:58,970 --> 00:28:00,830
where they'll give you example code.

510
00:28:00,830 --> 00:28:03,290
You can fiddle with it,
change it, and press Update,

511
00:28:03,290 --> 00:28:06,410
and it'll show you what it
actually does to the web page.

512
00:28:06,410 --> 00:28:08,380
>> So I would highly recommend using that.

513
00:28:08,380 --> 00:28:11,300
It's pretty cool.

514
00:28:11,300 --> 00:28:14,560
You won't get seg faults
here when things go wrong.

515
00:28:14,560 --> 00:28:16,430
If you manage to get
a seg fault with HTML,

516
00:28:16,430 --> 00:28:19,446
do let me know because I'm
going to be real intrigued.

517
00:28:19,446 --> 00:28:21,570
But it's really cool because
you can change things,

518
00:28:21,570 --> 00:28:23,550
you can see them updated live.

519
00:28:23,550 --> 00:28:26,210
And I think you'll get a much
more intuitive grasp of HTML

520
00:28:26,210 --> 00:28:28,690
if you actually just spend some
time experimenting with it.

521
00:28:28,690 --> 00:28:32,590
So that's why I said,
practice and experiment.

522
00:28:32,590 --> 00:28:34,490
>> Google, from here on
out, will probably be

523
00:28:34,490 --> 00:28:36,440
one of your best resources and friends.

524
00:28:36,440 --> 00:28:41,080
Or Bing-- I'm working at Microsoft,
so maybe I should say Bing.

525
00:28:41,080 --> 00:28:45,590
But pretty much anything
is just going to be syntax,

526
00:28:45,590 --> 00:28:51,300
so understanding what the tags are,
understanding-- at least with CSS--

527
00:28:51,300 --> 00:28:53,360
how to change certain attributes.

528
00:28:53,360 --> 00:28:55,300
It'll be super useful.

529
00:28:55,300 --> 00:28:58,852
>> So even though we don't
have any prepared things,

530
00:28:58,852 --> 00:29:02,060
we do have kind of some best practices
that we want you guys to try and abide

531
00:29:02,060 --> 00:29:06,640
by-- or rather, you should
abide by until further notice.

532
00:29:06,640 --> 00:29:09,722
So close all your tags.

533
00:29:09,722 --> 00:29:12,930
Hopefully everyone has-- you know what,
if this doesn't make sense right now,

534
00:29:12,930 --> 00:29:15,388
I promise it will make sense
when we're coding up the page.

535
00:29:15,388 --> 00:29:16,680
But close all your tags.

536
00:29:16,680 --> 00:29:20,410
So if you ever have some
header that's bracket,

537
00:29:20,410 --> 00:29:24,180
H1, bracket, make sure that
whenever you're done with that,

538
00:29:24,180 --> 00:29:26,570
you close that header.

539
00:29:26,570 --> 00:29:30,260
Validate your page with W3 Validator.

540
00:29:30,260 --> 00:29:34,689
If you don't close your tags,
you can get unexpected behavior.

541
00:29:34,689 --> 00:29:37,730
It'll say that your page is invalid
if you run it through this validator.

542
00:29:37,730 --> 00:29:41,000
So when in doubt-- and especially
on this week's and next week's

543
00:29:41,000 --> 00:29:46,220
pset-- in the same way that we ask
you to use check 50 and style 50,

544
00:29:46,220 --> 00:29:49,130
you could think of this
as one of your checks, OK?

545
00:29:49,130 --> 00:29:51,950
>> So if it does not pass the W3 Validator.

546
00:29:51,950 --> 00:29:53,810
That is something we will dock you on.

547
00:29:53,810 --> 00:29:55,960
Or I'm telling you right
now, I will dock you on.

548
00:29:55,960 --> 00:29:58,202
So make sure it validates.

549
00:29:58,202 --> 00:29:58,785
It's not hard.

550
00:29:58,785 --> 00:30:01,530
You just paste in your code
and it'll either say good job

551
00:30:01,530 --> 00:30:03,630
or you're missing
something in the same way

552
00:30:03,630 --> 00:30:07,760
that style 50 tells you
where you're messing up.

553
00:30:07,760 --> 00:30:11,360
>> And then one last thing
is you want to separate

554
00:30:11,360 --> 00:30:15,980
your markup, which is all that HTML
or your text, and your styling.

555
00:30:15,980 --> 00:30:19,420
So we'll do an example
of that right after this.

556
00:30:19,420 --> 00:30:21,830
So HTML and CSS should be separate.

557
00:30:21,830 --> 00:30:26,030
And we're going to be talking about
MVC, which is Model View Controller,

558
00:30:26,030 --> 00:30:27,100
next week.

559
00:30:27,100 --> 00:30:29,360
You guys should probably
learn about that in lecture

560
00:30:29,360 --> 00:30:32,130
tomorrow if you had
already learned it today.

561
00:30:32,130 --> 00:30:34,250
>> And it's just kind of
a paradigm that we tend

562
00:30:34,250 --> 00:30:37,460
to use when creating web
pages to separate things out.

563
00:30:37,460 --> 00:30:41,440
You can think of it in the same way
that we tend to separate functions in C

564
00:30:41,440 --> 00:30:43,360
where we hash to find things.

565
00:30:43,360 --> 00:30:45,530
It's just a way to
make your life easier.

566
00:30:45,530 --> 00:30:51,790
It separates out attributes or code that
you would be using over and over again,

567
00:30:51,790 --> 00:30:55,360
but in this way, it kind
of keeps it nice and neat.

568
00:30:55,360 --> 00:30:58,260
And if you want to change
one thing, you change it once

569
00:30:58,260 --> 00:31:00,150
and it's changed everywhere else.

570
00:31:00,150 --> 00:31:05,010
So it's more for your
ease and flexibility.

571
00:31:05,010 --> 00:31:11,430
>> So with CSS, it's very similar
to HTML, but instead of tags

572
00:31:11,430 --> 00:31:15,120
that I mentioned just now, we
use what's called selectors.

573
00:31:15,120 --> 00:31:21,900
And they basically just kind
of associate a certain tag

574
00:31:21,900 --> 00:31:24,620
in HTML with different attributes.

575
00:31:24,620 --> 00:31:29,060
And when I say attributes, I mean
things like font color, font style,

576
00:31:29,060 --> 00:31:32,694
the color of the background,
the color of your text.

577
00:31:32,694 --> 00:31:33,610
Those sorts of things.

578
00:31:33,610 --> 00:31:36,270
Like if it's centered,
if it's off to the right,

579
00:31:36,270 --> 00:31:39,430
if it's inverted-- all
of these cool things.

580
00:31:39,430 --> 00:31:42,490
Any stylistic things
that you do to your text,

581
00:31:42,490 --> 00:31:45,070
this is what I mean with attributes.

582
00:31:45,070 --> 00:31:50,140
>> And then two main things to know is that
selectors-- two of the main factors--

583
00:31:50,140 --> 00:31:53,090
are ID, which is unique.

584
00:31:53,090 --> 00:31:54,859
You can only use that for one thing.

585
00:31:54,859 --> 00:31:56,400
Otherwise, it's going to yell at you.

586
00:31:56,400 --> 00:31:59,970
And when we define it
in a CSS file, it will

587
00:31:59,970 --> 00:32:03,182
be hash ID and then
what attributes we want.

588
00:32:03,182 --> 00:32:05,140
I promise we're going to
go through an example.

589
00:32:05,140 --> 00:32:06,830
It'll make a lot more sense.

590
00:32:06,830 --> 00:32:08,830
>> Class can refer to multiple blocks.

591
00:32:08,830 --> 00:32:13,400
So you can have your
first and third paragraph

592
00:32:13,400 --> 00:32:17,240
have the same sort of attributes if
you associate them with the same class.

593
00:32:17,240 --> 00:32:21,050
And when we define them
in CSS, we do a dot class,

594
00:32:21,050 --> 00:32:25,710
with class being whatever
you want it to be named.

595
00:32:25,710 --> 00:32:28,559
>> So I know this is right
now very abstract.

596
00:32:28,559 --> 00:32:29,850
That's why we're going to code.

597
00:32:29,850 --> 00:32:32,060
I know you guys love
that, and you all are

598
00:32:32,060 --> 00:32:34,210
going to help me because
this is your web page.

599
00:32:34,210 --> 00:32:36,310
This is our section's web page, guys.

600
00:32:36,310 --> 00:32:40,158
So are there any questions before I
turn off the PowerPoint, or anything

601
00:32:40,158 --> 00:32:42,366
you want me to scroll back
to before we start coding?

602
00:32:42,366 --> 00:32:45,074
>> AUDIENCE: When you say match tags,
do you mean selectors or tags?

603
00:32:45,074 --> 00:32:50,427

604
00:32:50,427 --> 00:32:53,010
ALLISON BUCHHOLTZ-AU: You can
think of them as the same thing.

605
00:32:53,010 --> 00:32:54,590
It's just different words.

606
00:32:54,590 --> 00:32:56,460
I mean, like selectors.

607
00:32:56,460 --> 00:32:59,470
But selectors also map to tags.

608
00:32:59,470 --> 00:33:02,800
So you can think of them as
effectively the same thing.

609
00:33:02,800 --> 00:33:05,900
I promise it's going to make
more sense when we code.

610
00:33:05,900 --> 00:33:08,400
Anything from the
PowerPoint or any questions

611
00:33:08,400 --> 00:33:12,980
right now before we actually
create our section's page?

612
00:33:12,980 --> 00:33:15,040
Everyone ready?

613
00:33:15,040 --> 00:33:15,540
Cool.

614
00:33:15,540 --> 00:33:19,820

615
00:33:19,820 --> 00:33:24,760
>> So I have one started.

616
00:33:24,760 --> 00:33:27,030
Let me increase the font for you guys.

617
00:33:27,030 --> 00:33:29,810

618
00:33:29,810 --> 00:33:36,730
OK, so right now, we just have a
bare bones web page right here.

619
00:33:36,730 --> 00:33:38,360
>> We have some HTML.

620
00:33:38,360 --> 00:33:41,050
We have some header, which we
see here as example web page.

621
00:33:41,050 --> 00:33:44,540
Some title, some font.

622
00:33:44,540 --> 00:33:47,580
These are tags, OK?

623
00:33:47,580 --> 00:33:53,930
So when I mean close your tags, we see
here this bracket head is your opening

624
00:33:53,930 --> 00:33:59,670
tag, and this bracket
/head is closing it, OK?

625
00:33:59,670 --> 00:34:04,380
>> So you could think of this as
your braces in your if conditions

626
00:34:04,380 --> 00:34:05,420
or your for loops.

627
00:34:05,420 --> 00:34:08,630
If you have one at the beginning,
you want one at the end.

628
00:34:08,630 --> 00:34:13,500
It will still work most of the time
if you don't have a closed tag,

629
00:34:13,500 --> 00:34:17,659
but best practice is close your tags.

630
00:34:17,659 --> 00:34:20,940
>> So in this case, let's change this.

631
00:34:20,940 --> 00:34:24,150
We're going to have section seven.

632
00:34:24,150 --> 00:34:25,270
"Section Webpage."

633
00:34:25,270 --> 00:34:26,969
So I'm just going to change this.

634
00:34:26,969 --> 00:34:32,100
>> And if we go over here and we
reload-- gotta save and reload--

635
00:34:32,100 --> 00:34:36,750
we notice that up here
it changed, right?

636
00:34:36,750 --> 00:34:38,250
Cool.

637
00:34:38,250 --> 00:34:39,380
So this changes the title.

638
00:34:39,380 --> 00:34:41,920
This is whatever's on your tab.

639
00:34:41,920 --> 00:34:43,870
>> So this is kind of
looking kind of boring.

640
00:34:43,870 --> 00:34:44,870
I don't know about guys.

641
00:34:44,870 --> 00:34:46,810
I think we want something else here.

642
00:34:46,810 --> 00:34:51,900
>> So what we can do is the
header is just there.

643
00:34:51,900 --> 00:34:54,320
Let's do some sort of body.

644
00:34:54,320 --> 00:34:56,550
So we have some body here.

645
00:34:56,550 --> 00:35:01,360
I always do open and
close my tags to start,

646
00:35:01,360 --> 00:35:04,850
in the same way that I do braces.

647
00:35:04,850 --> 00:35:06,326
Ah.

648
00:35:06,326 --> 00:35:09,010
Wait, what?

649
00:35:09,010 --> 00:35:10,949
>> AUDIENCE: [INAUDIBLE].

650
00:35:10,949 --> 00:35:11,990
ALLISON BUCHHOLTZ-AU: Ah.

651
00:35:11,990 --> 00:35:13,895
You guys got me.

652
00:35:13,895 --> 00:35:14,930
Good job.

653
00:35:14,930 --> 00:35:16,270
Gold star.

654
00:35:16,270 --> 00:35:20,300
>> OK, so we have some body here.

655
00:35:20,300 --> 00:35:22,920
And now let's start adding some text.

656
00:35:22,920 --> 00:35:26,110
So you have a couple different
options for adding text.

657
00:35:26,110 --> 00:35:29,380
We have things like headers.

658
00:35:29,380 --> 00:35:32,144
We have just normal text.

659
00:35:32,144 --> 00:35:33,560
So let's just start with a header.

660
00:35:33,560 --> 00:35:36,670
Actually, if you guys want
to pull up W3 School's HTML,

661
00:35:36,670 --> 00:35:38,860
you can kind of look around
and if there's anything

662
00:35:38,860 --> 00:35:42,470
particularly that you want to try out
with this web page, we can do that.

663
00:35:42,470 --> 00:35:46,250
So in this case, let's just do some h1.

664
00:35:46,250 --> 00:35:48,710
So h1 is like the highest header.

665
00:35:48,710 --> 00:35:52,260
It will give you something
that is very large and bold.

666
00:35:52,260 --> 00:35:58,010
>> And in this case, what do we want
for the first text on our web page?

667
00:35:58,010 --> 00:35:58,640
Anything.

668
00:35:58,640 --> 00:35:59,800
You guys are going to create this.

669
00:35:59,800 --> 00:36:00,758
I'm just going to type.

670
00:36:00,758 --> 00:36:01,620
AUDIENCE: Welcome.

671
00:36:01,620 --> 00:36:02,870
>> ALLISON BUCHHOLTZ-AU: Welcome.

672
00:36:02,870 --> 00:36:06,660

673
00:36:06,660 --> 00:36:12,620
OK, so if we save it and we reload,
we have a great big welcome.

674
00:36:12,620 --> 00:36:17,365
So just so you can see the
differences, let's do something on H6.

675
00:36:17,365 --> 00:36:18,490
What do we want right here?

676
00:36:18,490 --> 00:36:24,951

677
00:36:24,951 --> 00:36:27,440
Right?

678
00:36:27,440 --> 00:36:30,356
>> OK, so just so you can
see the difference.

679
00:36:30,356 --> 00:36:31,990
Yeah, Sublime.

680
00:36:31,990 --> 00:36:34,680
So if you notice, h1, very, very large.

681
00:36:34,680 --> 00:36:39,030
h6, like bold, but much smaller,
and you have everything in between.

682
00:36:39,030 --> 00:36:41,550
So you could have h2, h3, h4.

683
00:36:41,550 --> 00:36:43,750
And these are just headers,
so if you're trying

684
00:36:43,750 --> 00:36:46,010
to create a web page that
has different sections,

685
00:36:46,010 --> 00:36:48,810
maybe you want to use
headers in there somewhere.

686
00:36:48,810 --> 00:36:49,580
>> Cool.

687
00:36:49,580 --> 00:36:53,270
So we'll add some more
things in our body.

688
00:36:53,270 --> 00:36:58,380
I see that it would be kind
of cool if we had a picture.

689
00:36:58,380 --> 00:37:02,840
I feel like everyone could use maybe
a cute bunny picture right about now,

690
00:37:02,840 --> 00:37:05,082
so we're going to find
a bunny picture first.

691
00:37:05,082 --> 00:37:10,010

692
00:37:10,010 --> 00:37:12,960
>> I don't know if you guys have any
preferences on which one we want.

693
00:37:12,960 --> 00:37:14,890
Do you have any preferences?

694
00:37:14,890 --> 00:37:15,925
This one here?

695
00:37:15,925 --> 00:37:17,160
Down.

696
00:37:17,160 --> 00:37:17,750
OK.

697
00:37:17,750 --> 00:37:18,760
That one it is.

698
00:37:18,760 --> 00:37:20,080
Good choices.

699
00:37:20,080 --> 00:37:21,850
>> OK, so we're going to view our image.

700
00:37:21,850 --> 00:37:22,920
Look at that.

701
00:37:22,920 --> 00:37:24,250
Look at that adorable thing.

702
00:37:24,250 --> 00:37:27,080
How could you be sad
on a Monday with this?

703
00:37:27,080 --> 00:37:30,180
>> So we're just going
to copy the image URL.

704
00:37:30,180 --> 00:37:38,720
And what we want to do is, let's just
say we have some p for paragraph.

705
00:37:38,720 --> 00:37:41,140
We're going to say "Look
look at the cute bunny.

706
00:37:41,140 --> 00:37:44,130
d'awwww."

707
00:37:44,130 --> 00:37:44,880
I love my bunnies.

708
00:37:44,880 --> 00:37:45,838
I have a bunny at home.

709
00:37:45,838 --> 00:37:48,085
I miss my bunny.

710
00:37:48,085 --> 00:37:50,460
So what we're going to do--
I don't know if you guys want

711
00:37:50,460 --> 00:37:55,970
to google this-- but with HTML,
how might you include an image?

712
00:37:55,970 --> 00:37:58,355
Literally, if you google
"include image HTML,"

713
00:37:58,355 --> 00:38:00,480
why don't you guys tell me
what this tag should be?

714
00:38:00,480 --> 00:38:05,150

715
00:38:05,150 --> 00:38:06,290
>> AUDIENCE: img source--

716
00:38:06,290 --> 00:38:07,767
>> ALLISON BUCHHOLTZ-AU: img source--

717
00:38:07,767 --> 00:38:08,600
AUDIENCE: --equals--

718
00:38:08,600 --> 00:38:09,000
ALLISON BUCHHOLTZ-AU: --equals--

719
00:38:09,000 --> 00:38:10,181
AUDIENCE: --quote-- yeah.

720
00:38:10,181 --> 00:38:11,430
ALLISON BUCHHOLTZ-AU: Perfect.

721
00:38:11,430 --> 00:38:12,090
Lovely.

722
00:38:12,090 --> 00:38:15,470
See, MySpace generation, right?

723
00:38:15,470 --> 00:38:16,220
AUDIENCE: Neopets.

724
00:38:16,220 --> 00:38:17,470
ALLISON BUCHHOLTZ-AU: Neopets.

725
00:38:17,470 --> 00:38:18,950
Oh, OK.

726
00:38:18,950 --> 00:38:20,200
Wow.

727
00:38:20,200 --> 00:38:21,260
It's been crazy.

728
00:38:21,260 --> 00:38:23,120
OK.

729
00:38:23,120 --> 00:38:25,600
>> So make sure I get this right.

730
00:38:25,600 --> 00:38:26,100
Cool.

731
00:38:26,100 --> 00:38:27,750
So this should be here.

732
00:38:27,750 --> 00:38:34,146
And then if we reload, we have our
bunny on the page Isn't this adorable?

733
00:38:34,146 --> 00:38:35,030
>> This is so cute.

734
00:38:35,030 --> 00:38:36,860
You chose a great, great photo.

735
00:38:36,860 --> 00:38:38,180
I'm digging it.

736
00:38:38,180 --> 00:38:41,350
>> OK, so we have this adorable bunny now.

737
00:38:41,350 --> 00:38:44,590
We were able to add an
image, just like that.

738
00:38:44,590 --> 00:38:47,550
So basically if there's any image
you want to add to your web page,

739
00:38:47,550 --> 00:38:49,430
you can add it just like this.

740
00:38:49,430 --> 00:38:52,910
Another thing would be if
you have the image stored

741
00:38:52,910 --> 00:38:55,670
in the same folder as
this file, you can just

742
00:38:55,670 --> 00:38:59,595
write whatever the name of that image
is instead of having a web link.

743
00:38:59,595 --> 00:39:01,010
>> It would still be in quotes.

744
00:39:01,010 --> 00:39:03,700
It would just be like
if we had named this--

745
00:39:03,700 --> 00:39:06,695
if this picture had been saved
in the folder with this HTML file

746
00:39:06,695 --> 00:39:08,570
that I'm editing and it
was called bunny.jpg.

747
00:39:08,570 --> 00:39:11,289

748
00:39:11,289 --> 00:39:13,080
We could also do that
and it would show up.

749
00:39:13,080 --> 00:39:16,600
However, I don't have this saved in
the file and I want to keep the bunny,

750
00:39:16,600 --> 00:39:18,092
so we're going to keep the link.

751
00:39:18,092 --> 00:39:20,720
>> AUDIENCE: What is rabbit.org?

752
00:39:20,720 --> 00:39:22,980
>> ALLISON BUCHHOLTZ-AU: rabbit.org.

753
00:39:22,980 --> 00:39:25,170
It's an appropriate--
look, you can adopt it.

754
00:39:25,170 --> 00:39:25,770
Adoption.

755
00:39:25,770 --> 00:39:27,690
bunny.jpg.

756
00:39:27,690 --> 00:39:29,190
I want to adopt this bunny.

757
00:39:29,190 --> 00:39:31,180
Oh, god, it's so cute.

758
00:39:31,180 --> 00:39:34,230
>> OK, so we've added headers.

759
00:39:34,230 --> 00:39:35,500
We've added a picture.

760
00:39:35,500 --> 00:39:37,760
Obviously, we added
some text here, right?

761
00:39:37,760 --> 00:39:40,920
If we wanted to add other
texts, we'd go like this.

762
00:39:40,920 --> 00:39:43,760
So this is another paragraph.

763
00:39:43,760 --> 00:39:49,070
>> And we say "this is another paragraph."

764
00:39:49,070 --> 00:39:52,510
Also, I'm a horrible speller,
so I may misspell things.

765
00:39:52,510 --> 00:39:54,930
Just FYI.

766
00:39:54,930 --> 00:39:58,450
>> So we have another
paragraph here, right?

767
00:39:58,450 --> 00:40:02,190
So maybe you want to do something
a little more interesting than just

768
00:40:02,190 --> 00:40:04,640
have all your text, like right aligned.

769
00:40:04,640 --> 00:40:08,490
Maybe you want to center your text, OK?

770
00:40:08,490 --> 00:40:11,820
>> So if someone wants to use those
handy computers in front of you

771
00:40:11,820 --> 00:40:19,034
and tell me how you're
going to center this text,

772
00:40:19,034 --> 00:40:20,300
>> AUDIENCE: p align.

773
00:40:20,300 --> 00:40:24,834
>> ALLISON BUCHHOLTZ-AU: So
p align equals "center."

774
00:40:24,834 --> 00:40:25,750
He's killing it, guys.

775
00:40:25,750 --> 00:40:28,240
Y'all need to step up.

776
00:40:28,240 --> 00:40:36,042
And we have "This is centered."

777
00:40:36,042 --> 00:40:37,500
And now we have something centered.

778
00:40:37,500 --> 00:40:39,380
>> In the same way, if you
want it left aligned,

779
00:40:39,380 --> 00:40:42,020
you could do align equals
left, align equals right.

780
00:40:42,020 --> 00:40:42,850
Totally up to you.

781
00:40:42,850 --> 00:40:55,580
If I did right here, then this
should-- now it's right aligned.

782
00:40:55,580 --> 00:40:57,020
>> AUDIENCE: Allison?

783
00:40:57,020 --> 00:41:00,884
By image source, why isn't
there close of the img source?

784
00:41:00,884 --> 00:41:02,050
ALLISON BUCHHOLTZ-AU: Sorry.

785
00:41:02,050 --> 00:41:05,300
This one should be
there Now you're good.

786
00:41:05,300 --> 00:41:06,026
Now we're good.

787
00:41:06,026 --> 00:41:08,150
AUDIENCE: Don't you have
to close it there, or not?

788
00:41:08,150 --> 00:41:11,450
ALLISON BUCHHOLTZ-AU: Well, so img
source, this one is just-- with image,

789
00:41:11,450 --> 00:41:17,110
it's just seen as one element, whereas
if you notice for the rest of these,

790
00:41:17,110 --> 00:41:22,106
we have some tag then information that
it pertains to and then a closing tag.

791
00:41:22,106 --> 00:41:24,480
But with image, everything's
just sort of self-contained.

792
00:41:24,480 --> 00:41:28,540

793
00:41:28,540 --> 00:41:29,040
Cool.

794
00:41:29,040 --> 00:41:33,530
So you guys know how to create a
header, you know how to input text,

795
00:41:33,530 --> 00:41:37,060
you know how to put an image
in now, you can align things.

796
00:41:37,060 --> 00:41:39,940

797
00:41:39,940 --> 00:41:42,590
>> Another thing that you
might want to be able to do

798
00:41:42,590 --> 00:41:47,649
is to create a list in CS-- we're
kind of going into next week's pset.

799
00:41:47,649 --> 00:41:49,440
The stuff that we
typically teach this week

800
00:41:49,440 --> 00:41:51,480
goes really well with
next week's pset, so we're

801
00:41:51,480 --> 00:41:54,250
kind of mixing, overlapping things here.

802
00:41:54,250 --> 00:41:56,290
But it'll be useful for next week.

803
00:41:56,290 --> 00:42:02,500
>> So if we wanted to create some
list, how might we do that?

804
00:42:02,500 --> 00:42:03,760
You can't answer this time.

805
00:42:03,760 --> 00:42:04,700
Someone else has to.

806
00:42:04,700 --> 00:42:07,290

807
00:42:07,290 --> 00:42:09,440
It's not hard, guys, promise.

808
00:42:09,440 --> 00:42:13,090
Google "unordered list HTML."

809
00:42:13,090 --> 00:42:14,076
What was that?

810
00:42:14,076 --> 00:42:16,244
>> AUDIENCE: [INAUDIBLE].

811
00:42:16,244 --> 00:42:17,410
ALLISON BUCHHOLTZ-AU: Right.

812
00:42:17,410 --> 00:42:20,490
So do we want ordered or unordered?

813
00:42:20,490 --> 00:42:21,500
Let's do an unordered.

814
00:42:21,500 --> 00:42:25,240
So we have some ul, which
stands for Unordered List.

815
00:42:25,240 --> 00:42:27,997
And what do we have for each element?

816
00:42:27,997 --> 00:42:29,080
Does it needs its own tag?

817
00:42:29,080 --> 00:42:30,556
Can we just start writing things?

818
00:42:30,556 --> 00:42:31,330
>> AUDIENCE: li.

819
00:42:31,330 --> 00:42:32,826
>> ALLISON BUCHHOLTZ-AU: li.

820
00:42:32,826 --> 00:42:34,785
So what is our list going to be?

821
00:42:34,785 --> 00:42:37,050
What do we want here?

822
00:42:37,050 --> 00:42:38,190
We just do names.

823
00:42:38,190 --> 00:42:39,250
Just do Jacob.

824
00:42:39,250 --> 00:42:40,340
>> AUDIENCE: Rabbit foods.

825
00:42:40,340 --> 00:42:40,990
>> ALLISON BUCHHOLTZ-AU: Rabbit foods.

826
00:42:40,990 --> 00:42:41,910
OK I like this.

827
00:42:41,910 --> 00:42:42,520
Rabbit foods.

828
00:42:42,520 --> 00:42:44,440
>> OK, so we have carrots.

829
00:42:44,440 --> 00:42:46,640
I like this rabbit theme.

830
00:42:46,640 --> 00:42:48,024
I'm digging it a lot.

831
00:42:48,024 --> 00:42:50,440
AUDIENCE: Actually, I thought
that Jacob would be a legit.

832
00:42:50,440 --> 00:42:51,606
ALLISON BUCHHOLTZ-AU: Jacob?

833
00:42:51,606 --> 00:42:53,120
Jacob is rabbit food.

834
00:42:53,120 --> 00:42:55,310
If you saw Jacob's
photo from office hours,

835
00:42:55,310 --> 00:42:56,850
you might have thought he got
attacked by a killer rabbit.

836
00:42:56,850 --> 00:42:58,099
>> AUDIENCE: I have a rabbit now.

837
00:42:58,099 --> 00:42:59,710
I have a killer rabbit now.

838
00:42:59,710 --> 00:43:00,540
>> ALLISON BUCHHOLTZ-AU:
Are you kidding me?

839
00:43:00,540 --> 00:43:02,081
>> AUDIENCE: I'll bring it next section.

840
00:43:02,081 --> 00:43:02,990
I have it.

841
00:43:02,990 --> 00:43:04,240
>> ALLISON BUCHHOLTZ-AU:
This is ridiculous.

842
00:43:04,240 --> 00:43:04,730
Anyway.

843
00:43:04,730 --> 00:43:05,510
>> AUDIENCE: [INAUDIBLE]

844
00:43:05,510 --> 00:43:07,510
>> AUDIENCE: Yeah, my proctor
has a rabbit as well.

845
00:43:07,510 --> 00:43:09,660

846
00:43:09,660 --> 00:43:11,580
>> ALLISON BUCHHOLTZ-AU: I want a rabbit.

847
00:43:11,580 --> 00:43:15,415
OK, whoever brings a real rabbit to
the next section, total brownie points.

848
00:43:15,415 --> 00:43:16,290
AUDIENCE: [INAUDIBLE]

849
00:43:16,290 --> 00:43:16,943
AUDIENCE: Oh, it's not real.

850
00:43:16,943 --> 00:43:17,910
It's a stuffed rabbit.

851
00:43:17,910 --> 00:43:18,855
>> ALLISON BUCHHOLTZ-AU: Oh
yeah, we can close these.

852
00:43:18,855 --> 00:43:20,174
Looks rad.

853
00:43:20,174 --> 00:43:21,590
AUDIENCE: Does it actually matter?

854
00:43:21,590 --> 00:43:23,465
ALLISON BUCHHOLTZ-AU: It doesn't.

855
00:43:23,465 --> 00:43:25,590
With most of these things,
you don't close the tag,

856
00:43:25,590 --> 00:43:28,750
99% of the time nothing bad's going
to happen, but it's good style, too.

857
00:43:28,750 --> 00:43:30,250
So Jacob.

858
00:43:30,250 --> 00:43:31,864
And we have lettuce.

859
00:43:31,864 --> 00:43:33,655
AUDIENCE: For links,
it's really important.

860
00:43:33,655 --> 00:43:34,696
ALLISON BUCHHOLTZ-AU: Hm?

861
00:43:34,696 --> 00:43:35,890
AUDIENCE: For hyperlinks.

862
00:43:35,890 --> 00:43:37,431
ALLISON BUCHHOLTZ-AU: For hyperlinks.

863
00:43:37,431 --> 00:43:38,610
Yes, hyperlinks need it.

864
00:43:38,610 --> 00:43:40,770
OK, so let's see here.

865
00:43:40,770 --> 00:43:44,810
And we have the close of our list.

866
00:43:44,810 --> 00:43:46,635
And we look at that.

867
00:43:46,635 --> 00:43:49,680
We have all-- Jacob, right there.

868
00:43:49,680 --> 00:43:52,310
Rabbit food.

869
00:43:52,310 --> 00:43:54,000
Reminds me of Bunnicula.

870
00:43:54,000 --> 00:43:55,234
>> AUDIENCE: [INAUDIBLE]

871
00:43:55,234 --> 00:43:58,400
ALLISON BUCHHOLTZ-AU: I'm bringing back
all the old school references today,

872
00:43:58,400 --> 00:43:59,130
aren't I?

873
00:43:59,130 --> 00:44:01,210
Just all the old school references.

874
00:44:01,210 --> 00:44:05,767
Should have brought like
Gogurts or something for snacks.

875
00:44:05,767 --> 00:44:07,079
>> AUDIENCE: Or Gushers.

876
00:44:07,079 --> 00:44:08,120
ALLISON BUCHHOLTZ-AU: Oh.

877
00:44:08,120 --> 00:44:08,620
OK.

878
00:44:08,620 --> 00:44:10,920
I'll see if I can track
down Gushers for next week.

879
00:44:10,920 --> 00:44:11,980
I think I can do that.

880
00:44:11,980 --> 00:44:13,980
I think we might have
some in the office.

881
00:44:13,980 --> 00:44:18,570
>> OK, so we've covered a lot of different
things you can do with HTML, right?

882
00:44:18,570 --> 00:44:23,910
And as you can probably see, it's
nothing-- hopefully, not too intim--

883
00:44:23,910 --> 00:44:25,750
if it is, I don't mean
to belittle anyone.

884
00:44:25,750 --> 00:44:29,090
If you're having trouble,
please come talk to me.

885
00:44:29,090 --> 00:44:31,340
>> But most of it is just
looking at the syntax, right?

886
00:44:31,340 --> 00:44:34,180
If you want an unordered list,
if you want some sort of list,

887
00:44:34,180 --> 00:44:38,450
if you want to align something or
format something, it's all about just

888
00:44:38,450 --> 00:44:42,080
kind of looking up the
syntax for HTML, right?

889
00:44:42,080 --> 00:44:44,720
And one thing that's
pretty cool actually

890
00:44:44,720 --> 00:44:51,360
is if you go to-- let's see,
what's a nice website that we like?

891
00:44:51,360 --> 00:44:54,920
Anyone have any favorite websites
that are OK to bring up online?

892
00:44:54,920 --> 00:44:57,424

893
00:44:57,424 --> 00:44:58,840
You know what, let's just do CS50.

894
00:44:58,840 --> 00:45:01,800
That's nice and safe, right?

895
00:45:01,800 --> 00:45:03,060
>> OK, so CS50 here.

896
00:45:03,060 --> 00:45:05,540
Oh look, there's a section right now.

897
00:45:05,540 --> 00:45:07,113
If you like the way it looks.

898
00:45:07,113 --> 00:45:08,030
>> AUDIENCE: [INAUDIBLE].

899
00:45:08,030 --> 00:45:10,696
ALLISON BUCHHOLTZ-AU: We are not
going to do meta section, guys.

900
00:45:10,696 --> 00:45:11,560
It's not happening.

901
00:45:11,560 --> 00:45:14,540
It would be cool, but
we're not going to do it.

902
00:45:14,540 --> 00:45:17,040
>> So what do you could
do if you like the way

903
00:45:17,040 --> 00:45:21,390
this works is you can always right
click on any web page that you like

904
00:45:21,390 --> 00:45:23,660
and you can do View Page Source.

905
00:45:23,660 --> 00:45:26,030
It will bring up all the HTML.

906
00:45:26,030 --> 00:45:30,800
And this is actually a really good
way to style your own web page.

907
00:45:30,800 --> 00:45:33,640
Go to a web page that you
really like and look at the HTML

908
00:45:33,640 --> 00:45:35,430
and figure out how they did it.

909
00:45:35,430 --> 00:45:39,280
>> And literally, as long
as you cite things,

910
00:45:39,280 --> 00:45:41,940
as long as you're not just
stealing from people, it's OK.

911
00:45:41,940 --> 00:45:43,890
Especially for CS50
[? finance ?], we are

912
00:45:43,890 --> 00:45:46,950
kind of expecting you to get
inspiration from other website.

913
00:45:46,950 --> 00:45:48,070
So feel free.

914
00:45:48,070 --> 00:45:51,360
Look through websites that
you think are really pretty

915
00:45:51,360 --> 00:45:54,870
and figure out how they use
HTML and CSS to do these things.

916
00:45:54,870 --> 00:45:59,860
>> So as you see here, there's obviously
like links and we have a class here.

917
00:45:59,860 --> 00:46:00,950
We have a link here.

918
00:46:00,950 --> 00:46:03,100
We have a list.

919
00:46:03,100 --> 00:46:05,370
We probably have some
pictures in here somewhere.

920
00:46:05,370 --> 00:46:08,332
>> We've got some cool style here.

921
00:46:08,332 --> 00:46:10,040
This is the next thing
we're going to do.

922
00:46:10,040 --> 00:46:14,580
So style, whenever you see these
style brackets, it's CSS basically.

923
00:46:14,580 --> 00:46:15,880
Ben, did you have a question?

924
00:46:15,880 --> 00:46:16,880
>> AUDIENCE: What is div?

925
00:46:16,880 --> 00:46:20,039
>> ALLISON BUCHHOLTZ-AU: div
is just a-- what is div?

926
00:46:20,039 --> 00:46:20,830
AUDIENCE: Division.

927
00:46:20,830 --> 00:46:22,121
ALLISON BUCHHOLTZ-AU: Division.

928
00:46:22,121 --> 00:46:25,960
Yeah, it's just like
separating different elements.

929
00:46:25,960 --> 00:46:28,650
OK, so here is what we're
going to go into next.

930
00:46:28,650 --> 00:46:31,550
So this may not be the best
style because, if you notice

931
00:46:31,550 --> 00:46:37,681
we have HTML and style in the same page,
and we actually want to separate those,

932
00:46:37,681 --> 00:46:38,180
OK?

933
00:46:38,180 --> 00:46:41,620
And actually, let me
open up my right one

934
00:46:41,620 --> 00:46:45,990
because this is supposed to be
the PDF, so we have style.css.

935
00:46:45,990 --> 00:46:51,210
>> So what we can do here is these
are cool things like some fade

936
00:46:51,210 --> 00:46:55,550
and we could try and do that, but I feel
like I would mess that up on the fly,

937
00:46:55,550 --> 00:46:58,520
so I encourage you guys to
go try that on your own,

938
00:46:58,520 --> 00:47:00,310
but I'm not going to do it right now.

939
00:47:00,310 --> 00:47:03,790
So if you guys, remember,
if you ever hit problem set,

940
00:47:03,790 --> 00:47:05,584
something swoops in from the side.

941
00:47:05,584 --> 00:47:08,000
It has to do with the fade and
the transition and whatnot.

942
00:47:08,000 --> 00:47:09,630
>> AUDIENCE: And that's all CSS and HTML?

943
00:47:09,630 --> 00:47:11,460
>> ALLISON BUCHHOLTZ-AU: All CSS and HTML.

944
00:47:11,460 --> 00:47:12,420
Yeah.

945
00:47:12,420 --> 00:47:17,720
So you can do a lot of really
cool things with CSS and HTML.

946
00:47:17,720 --> 00:47:22,280
So with our awesome
bunny web page here, we

947
00:47:22,280 --> 00:47:25,240
are going to do a little
bit of CSS styling with it.

948
00:47:25,240 --> 00:47:28,850
>> So if you ever have a style
sheet, which we have here,

949
00:47:28,850 --> 00:47:30,550
you can just call style.css.

950
00:47:30,550 --> 00:47:32,090
You can call it whatever you want.

951
00:47:32,090 --> 00:47:37,110
What's important is that we're going
to reference it in our web.html here.

952
00:47:37,110 --> 00:47:41,670
>> So what we're going to do is
we-- so I don't mess this up--

953
00:47:41,670 --> 00:47:46,180
we are going to link
these two files together.

954
00:47:46,180 --> 00:47:49,340
So in the same way-- I'm going
to draw an analogy to C here.

955
00:47:49,340 --> 00:47:53,510
In the same way that if you have
some library-- and we have cs50.h--

956
00:47:53,510 --> 00:47:55,520
our compiler links it.

957
00:47:55,520 --> 00:47:58,040
This is just an explicit
link on our part.

958
00:47:58,040 --> 00:48:01,840
So in the same way that we do
hash include some file, what

959
00:48:01,840 --> 00:48:06,890
I'm about to write is just the
HTML/CSS equivalent of that.

960
00:48:06,890 --> 00:48:11,970
>> We are just saying, OK, this web page
is going to use this stylesheet, OK?

961
00:48:11,970 --> 00:48:23,360
So we have link rel equal to stylesheet.

962
00:48:23,360 --> 00:48:30,870
And then we have type, css.

963
00:48:30,870 --> 00:48:34,630

964
00:48:34,630 --> 00:48:37,060
And then href equals.

965
00:48:37,060 --> 00:48:41,910

966
00:48:41,910 --> 00:48:42,860
>> OK.

967
00:48:42,860 --> 00:48:45,680
So all this did here is you can
think of this as the same thing

968
00:48:45,680 --> 00:48:47,550
as a hash include.

969
00:48:47,550 --> 00:48:53,450
Obviously it looks a little more
complicated, but in all cases,

970
00:48:53,450 --> 00:48:55,370
it's effectively the same thing.

971
00:48:55,370 --> 00:49:00,940
So this is just some linking of a
style sheet, it's of type text/css,

972
00:49:00,940 --> 00:49:02,875
and the name of it is style.css.

973
00:49:02,875 --> 00:49:05,560
>> What's important to know
is that the web page

974
00:49:05,560 --> 00:49:09,155
that I'm working right now-- web.html
and style.css-- are in the same folder.

975
00:49:09,155 --> 00:49:14,740
Because in different folders,
you need to give the actual root

976
00:49:14,740 --> 00:49:17,480
to it or the path to it.

977
00:49:17,480 --> 00:49:20,620
But in this case, we're keeping it
super simple and it's going to be here.

978
00:49:20,620 --> 00:49:26,730
So if we do that, I have some
things already queued up here.

979
00:49:26,730 --> 00:49:31,680
>> So we have some body, which is going
to have our background color, which

980
00:49:31,680 --> 00:49:33,320
right now is light blue.

981
00:49:33,320 --> 00:49:36,850
We can change it if we want, but
if I remember this correctly,

982
00:49:36,850 --> 00:49:39,270
it should just change it to light blue.

983
00:49:39,270 --> 00:49:42,050
And now we have a light blue background.

984
00:49:42,050 --> 00:49:47,490
And we had here-- can anyone remember
which one is hash ID or class?

985
00:49:47,490 --> 00:49:50,370

986
00:49:50,370 --> 00:49:51,080
>> AUDIENCE: ID.

987
00:49:51,080 --> 00:49:51,800
>> ALLISON BUCHHOLTZ-AU: ID.

988
00:49:51,800 --> 00:49:52,420
Cool.

989
00:49:52,420 --> 00:49:58,920
So what we want to do
is which of these fonts

990
00:49:58,920 --> 00:50:01,534
or which-- do we want "Look at
the cute bunny" to be purple?

991
00:50:01,534 --> 00:50:02,950
I think we want that to be purple.

992
00:50:02,950 --> 00:50:04,640
I'm pretty down with that being purple.

993
00:50:04,640 --> 00:50:08,790
>> So what you do is you do
ID equals-- in this case

994
00:50:08,790 --> 00:50:13,630
I said, what, pretty color here.

995
00:50:13,630 --> 00:50:14,780
We reload.

996
00:50:14,780 --> 00:50:17,460
All of a sudden, it's purple.

997
00:50:17,460 --> 00:50:20,680
OK, so with ID, remember
it needs to be unique,

998
00:50:20,680 --> 00:50:24,370
so I should never be using
this ID anywhere else.

999
00:50:24,370 --> 00:50:27,760
But with class, as we have
here with a pretty font,

1000
00:50:27,760 --> 00:50:30,300
I should be able to use
that anywhere I want to.

1001
00:50:30,300 --> 00:50:33,160
>> So let's do this one here.

1002
00:50:33,160 --> 00:50:41,100
So we can say class equals pretty font.

1003
00:50:41,100 --> 00:50:46,190
And if we look now, we have
this cool pretty font here.

1004
00:50:46,190 --> 00:50:49,160
So maybe I want to do both.

1005
00:50:49,160 --> 00:50:52,786
OK, I actually don't know if this is
going to work but I want to try it.

1006
00:50:52,786 --> 00:50:54,410
And this is how you learn CSS and HTML.

1007
00:50:54,410 --> 00:50:55,660
You're like, you know
what, I want to try this.

1008
00:50:55,660 --> 00:50:56,430
I'm not sure if it's going to work.

1009
00:50:56,430 --> 00:50:57,346
Let's see if it works.

1010
00:50:57,346 --> 00:51:00,580

1011
00:51:00,580 --> 00:51:01,540
>> And look at that.

1012
00:51:01,540 --> 00:51:04,540
Now it's in purple and
it's a pretty font.

1013
00:51:04,540 --> 00:51:08,692
OK, so you have all these
different things you can do.

1014
00:51:08,692 --> 00:51:09,650
Do you have a question?

1015
00:51:09,650 --> 00:51:10,275
>> AUDIENCE: Yeah.

1016
00:51:10,275 --> 00:51:13,280
Well, just like the colors
you're using are words.

1017
00:51:13,280 --> 00:51:16,005
Is there a way to do colors
with the hexadecimal RGB?

1018
00:51:16,005 --> 00:51:18,880
ALLISON BUCHHOLTZ-AU: You can also
do it with hexidecimal, I believe.

1019
00:51:18,880 --> 00:51:19,803
Yeah.

1020
00:51:19,803 --> 00:51:22,136
But it's kind of nice if you
don't want to look them up.

1021
00:51:22,136 --> 00:51:23,762
You can just be like, purple or blue.

1022
00:51:23,762 --> 00:51:25,720
AUDIENCE: Let's hope they
know what that means.

1023
00:51:25,720 --> 00:51:26,886
ALLISON BUCHHOLTZ-AU: Right.

1024
00:51:26,886 --> 00:51:29,580
So let's make this read or chartreuse.

1025
00:51:29,580 --> 00:51:32,060
Why would you ever choose chartreuse?

1026
00:51:32,060 --> 00:51:33,340
It's an interesting color.

1027
00:51:33,340 --> 00:51:37,355
>> OK, so obviously we can see we
can change things however we want.

1028
00:51:37,355 --> 00:51:39,910

1029
00:51:39,910 --> 00:51:45,392
If you wanted to create-- let's say
we wanted to create another class.

1030
00:51:45,392 --> 00:51:46,850
What might you guys want to change?

1031
00:51:46,850 --> 00:51:51,840
If you pull up W3Schools'
CSS documentation,

1032
00:51:51,840 --> 00:51:54,450
I leave the floor to you guys.

1033
00:51:54,450 --> 00:51:57,990
We can try and do something cool with
this in the last couple of minutes.

1034
00:51:57,990 --> 00:52:00,275

1035
00:52:00,275 --> 00:52:03,150
Because I've kind of given you a
crash course on a lot of cool things

1036
00:52:03,150 --> 00:52:03,970
that you can do.

1037
00:52:03,970 --> 00:52:09,956
But in the end, as I said, if you
just experiment, you'll learn a lot.

1038
00:52:09,956 --> 00:52:12,212
>> AUDIENCE: Did you look up that font?

1039
00:52:12,212 --> 00:52:14,295
>> ALLISON BUCHHOLTZ-AU: Yeah,
I looked up that font.

1040
00:52:14,295 --> 00:52:17,200
So like literally, I
went to-- what did I do?

1041
00:52:17,200 --> 00:52:22,371
I did CSS font list, and
then I did font stack,

1042
00:52:22,371 --> 00:52:25,120
and then I was like, look, here
are all the cool fonts you can do.

1043
00:52:25,120 --> 00:52:28,180
And there was this one, so
I copied it to my clipboard.

1044
00:52:28,180 --> 00:52:31,820
And then I was like,
OK, cool, there we go.

1045
00:52:31,820 --> 00:52:32,320
All done.

1046
00:52:32,320 --> 00:52:35,920
>> AUDIENCE: So you do have to make sure
that CSS knows what that font is.

1047
00:52:35,920 --> 00:52:37,370
>> ALLISON BUCHHOLTZ-AU: Yes.

1048
00:52:37,370 --> 00:52:38,190
>> AUDIENCE: What's it say at the end?

1049
00:52:38,190 --> 00:52:38,790
Cursive?

1050
00:52:38,790 --> 00:52:40,040
>> ALLISON BUCHHOLTZ-AU: Cursive.

1051
00:52:40,040 --> 00:52:40,950
Yeah.

1052
00:52:40,950 --> 00:52:42,310
>> AUDIENCE: Background image.

1053
00:52:42,310 --> 00:52:43,290
>> ALLISON BUCHHOLTZ-AU: Background image.

1054
00:52:43,290 --> 00:52:44,180
OK.

1055
00:52:44,180 --> 00:52:46,490
So you want to tell me how to do this.

1056
00:52:46,490 --> 00:52:47,390
I leave this to you.

1057
00:52:47,390 --> 00:52:49,070
I'm just typing up here now.

1058
00:52:49,070 --> 00:52:51,714
The wheel is in your hands.

1059
00:52:51,714 --> 00:52:52,660
>> AUDIENCE: OK

1060
00:52:52,660 --> 00:52:53,701
>> ALLISON BUCHHOLTZ-AU: OK.

1061
00:52:53,701 --> 00:52:54,720
What am I doing?

1062
00:52:54,720 --> 00:53:02,929
>> AUDIENCE: Doing-- I know what
comes after the curly brace.

1063
00:53:02,929 --> 00:53:03,970
ALLISON BUCHHOLTZ-AU: OK.

1064
00:53:03,970 --> 00:53:06,707
So probably in body, I
would assume, because we're

1065
00:53:06,707 --> 00:53:08,040
doing with the background image.

1066
00:53:08,040 --> 00:53:08,940
>> AUDIENCE: Yeah, let's do that.

1067
00:53:08,940 --> 00:53:09,981
>> ALLISON BUCHHOLTZ-AU: OK.

1068
00:53:09,981 --> 00:53:14,260
AUDIENCE: OK, so background
colon, and then we

1069
00:53:14,260 --> 00:53:16,894
need a URL address of that image.

1070
00:53:16,894 --> 00:53:18,560
Maybe pseudo-code that for now, perhaps.

1071
00:53:18,560 --> 00:53:20,601
>> ALLISON BUCHHOLTZ-AU: What
would you like me to--

1072
00:53:20,601 --> 00:53:22,574
AUDIENCE: I'm thinking like a GIF.

1073
00:53:22,574 --> 00:53:23,740
ALLISON BUCHHOLTZ-AU: A GIF?

1074
00:53:23,740 --> 00:53:26,070
That's going to be interesting.

1075
00:53:26,070 --> 00:53:27,840
OK, what am I googling here?

1076
00:53:27,840 --> 00:53:29,670
>> AUDIENCE: No, that's your choice.

1077
00:53:29,670 --> 00:53:32,090
>> ALLISON BUCHHOLTZ-AU: Why
don't we-- if it's a bunny,

1078
00:53:32,090 --> 00:53:35,610
I feel like we should have a
nice grassy lawn or something.

1079
00:53:35,610 --> 00:53:38,275
>> AUDIENCE: Meadow.

1080
00:53:38,275 --> 00:53:39,350
A meadow.

1081
00:53:39,350 --> 00:53:40,641
>> ALLISON BUCHHOLTZ-AU: A meadow?

1082
00:53:40,641 --> 00:53:41,851
OK.

1083
00:53:41,851 --> 00:53:42,975
AUDIENCE: Or Rachel Maddow.

1084
00:53:42,975 --> 00:53:44,747

1085
00:53:44,747 --> 00:53:46,580
ALLISON BUCHHOLTZ-AU:
This one looks pretty.

1086
00:53:46,580 --> 00:53:49,380

1087
00:53:49,380 --> 00:53:50,380
Oh, that's tiny, though.

1088
00:53:50,380 --> 00:53:51,700
We need a good size image.

1089
00:53:51,700 --> 00:53:53,142
Let's see.

1090
00:53:53,142 --> 00:53:54,570
Oh, look.

1091
00:53:54,570 --> 00:53:55,630
That's a pretty meadow.

1092
00:53:55,630 --> 00:53:58,320
You know what, I like this one.

1093
00:53:58,320 --> 00:53:59,300
Let's copy this one.

1094
00:53:59,300 --> 00:54:08,020
>> AUDIENCE: OK, so I think it's
the URL, open parentheses.

1095
00:54:08,020 --> 00:54:09,590
>> ALLISON BUCHHOLTZ-AU: OK, URL.

1096
00:54:09,590 --> 00:54:11,500
>> AUDIENCE: Then the address.

1097
00:54:11,500 --> 00:54:13,610
>> ALLISON BUCHHOLTZ-AU: OK.

1098
00:54:13,610 --> 00:54:14,750
Is that all we need?

1099
00:54:14,750 --> 00:54:20,550
>> AUDIENCE: Close parentheses semicolon,
and then space, background hyphen

1100
00:54:20,550 --> 00:54:27,050
attachment colon fixed, and curly brace.

1101
00:54:27,050 --> 00:54:28,110
>> ALLISON BUCHHOLTZ-AU: OK.

1102
00:54:28,110 --> 00:54:29,114
Let's see if that works.

1103
00:54:29,114 --> 00:54:30,780
It's going to be pretty cool if it does.

1104
00:54:30,780 --> 00:54:33,880
I'm real excited right here.

1105
00:54:33,880 --> 00:54:35,070
It didn't work.

1106
00:54:35,070 --> 00:54:35,700
I wonder why.

1107
00:54:35,700 --> 00:54:37,700
AUDIENCE: Maybe the URL
has to be in quotations.

1108
00:54:37,700 --> 00:54:38,866
ALLISON BUCHHOLTZ-AU: Maybe.

1109
00:54:38,866 --> 00:54:41,520
And this is how we learn, guys.

1110
00:54:41,520 --> 00:54:44,340
>> AUDIENCE: Can we have background
color and background image?

1111
00:54:44,340 --> 00:54:45,390
>> AUDIENCE: No.

1112
00:54:45,390 --> 00:54:46,550
One supersedes the other.

1113
00:54:46,550 --> 00:54:46,960
>> ALLISON BUCHHOLTZ-AU: I dunno.

1114
00:54:46,960 --> 00:54:47,460
Let's see.

1115
00:54:47,460 --> 00:54:48,860
Let's check it out and see.

1116
00:54:48,860 --> 00:54:51,567
>> AUDIENCE: Oh, maybe, yeah.

1117
00:54:51,567 --> 00:54:52,400
[INTERPOSING VOICES]

1118
00:54:52,400 --> 00:54:59,640

1119
00:54:59,640 --> 00:55:03,260
>> ALLISON BUCHHOLTZ-AU: OK, this is
obviously-- I [INAUDIBLE] here.

1120
00:55:03,260 --> 00:55:04,927
So OK.

1121
00:55:04,927 --> 00:55:06,260
AUDIENCE: Background attachment.

1122
00:55:06,260 --> 00:55:07,301
ALLISON BUCHHOLTZ-AU: Ah.

1123
00:55:07,301 --> 00:55:12,096

1124
00:55:12,096 --> 00:55:13,946
>> AUDIENCE: OK, I don't know.

1125
00:55:13,946 --> 00:55:16,070
ALLISON BUCHHOLTZ-AU: It
looks like it should work.

1126
00:55:16,070 --> 00:55:19,074
Are you sure it's colon after the URL?

1127
00:55:19,074 --> 00:55:20,439
>> AUDIENCE: No, it's semicolon.

1128
00:55:20,439 --> 00:55:21,980
ALLISON BUCHHOLTZ-AU: It's semicolon.

1129
00:55:21,980 --> 00:55:22,530
AUDIENCE: Did I say colon?

1130
00:55:22,530 --> 00:55:24,155
ALLISON BUCHHOLTZ-AU: You said a colon.

1131
00:55:24,155 --> 00:55:26,222
AUDIENCE: Oh no.

1132
00:55:26,222 --> 00:55:27,680
ALLISON BUCHHOLTZ-AU: There you go.

1133
00:55:27,680 --> 00:55:29,350
AUDIENCE: Oh, wait, now
we can't read the text.

1134
00:55:29,350 --> 00:55:30,320
ALLISON BUCHHOLTZ-AU: Now
you can't read the text,

1135
00:55:30,320 --> 00:55:32,740
but we have the background image.

1136
00:55:32,740 --> 00:55:33,300
Mmhmm?

1137
00:55:33,300 --> 00:55:35,220
>> AUDIENCE: Does HTML
support dynamic content?

1138
00:55:35,220 --> 00:55:39,070
Like, could you resize that picture
depending on the window size,

1139
00:55:39,070 --> 00:55:39,890
or is that a CSS--

1140
00:55:39,890 --> 00:55:41,723
>> ALLISON BUCHHOLTZ-AU:
So CSS has to do that.

1141
00:55:41,723 --> 00:55:45,210
So if you guys are interested
in learning advanced CSS,

1142
00:55:45,210 --> 00:55:50,789
I am co-teaching a
seminar on CSS on the 7th.

1143
00:55:50,789 --> 00:55:52,580
And I promise it will
be much more in depth

1144
00:55:52,580 --> 00:55:55,220
and do much more cool
things in this section.

1145
00:55:55,220 --> 00:55:59,234
And my co-teacher is like
total front end web dev master.

1146
00:55:59,234 --> 00:56:02,150
So it'll be pretty cool if you want
to learn about all the cool things

1147
00:56:02,150 --> 00:56:03,960
that CSS can do.

1148
00:56:03,960 --> 00:56:06,860
>> But what we have here with
his background attachment

1149
00:56:06,860 --> 00:56:13,330
fixed-- so it's some fixed size--
but you can actually dynamically--

1150
00:56:13,330 --> 00:56:17,610
if you ever see web pages, as
most good web pages will do,

1151
00:56:17,610 --> 00:56:19,470
when you adjust the
size of your browser,

1152
00:56:19,470 --> 00:56:23,980
it adjusts the background or how much
is showing or reformats things, right?

1153
00:56:23,980 --> 00:56:27,100
So that's what we call
relative positioning.

1154
00:56:27,100 --> 00:56:33,410
>> And CSS can actually grab how big your
browser width is or how tall it is,

1155
00:56:33,410 --> 00:56:37,970
and you can position things
according to the relative sizes

1156
00:56:37,970 --> 00:56:40,420
versus absolute sizes.

1157
00:56:40,420 --> 00:56:44,920
And that's obviously more advanced
CSS, but that is something you can do.

1158
00:56:44,920 --> 00:56:47,390
If you want to learn
more, come to my seminar.

1159
00:56:47,390 --> 00:56:50,540
>> So that is something you can do.

1160
00:56:50,540 --> 00:56:54,450
And CSS can actually
do-- CSS and JavaScript,

1161
00:56:54,450 --> 00:56:58,790
which we'll get into next week--
can allow you to dynamically change

1162
00:56:58,790 --> 00:57:02,160
pages without having to
reload them all the time.

1163
00:57:02,160 --> 00:57:04,590
And you get to do some
pretty cool stuff.

1164
00:57:04,590 --> 00:57:09,317
>> So is there another thing
that you guys might want to do

1165
00:57:09,317 --> 00:57:10,650
or anything you want to explore?

1166
00:57:10,650 --> 00:57:12,900
We have 10 minutes left.

1167
00:57:12,900 --> 00:57:19,010
We can also leave early, but if
you want to do some more web stuff,

1168
00:57:19,010 --> 00:57:20,960
we can, but I'm not
going to force you to.

1169
00:57:20,960 --> 00:57:23,510
But we can also just eat candy.

1170
00:57:23,510 --> 00:57:25,760
AUDIENCE: Highlight the text
white so you can read it.

1171
00:57:25,760 --> 00:57:27,680
ALLISON BUCHHOLTZ-AU: OK.

1172
00:57:27,680 --> 00:57:33,389
So in this case, we want some p.

1173
00:57:33,389 --> 00:57:36,305
AUDIENCE: Should we do it in the
body so it applies to the whole page?

1174
00:57:36,305 --> 00:57:38,096
ALLISON BUCHHOLTZ-AU:
Yes, we can actually.

1175
00:57:38,096 --> 00:57:40,880
That's a good idea.

1176
00:57:40,880 --> 00:57:43,420
So we have-- do you
know what we should be?

1177
00:57:43,420 --> 00:57:47,452

1178
00:57:47,452 --> 00:57:50,260
I don't know if we can do text color.

1179
00:57:50,260 --> 00:57:54,946
I was going to try and
create another class here.

1180
00:57:54,946 --> 00:57:58,394
>> AUDIENCE: How do you get so
that it has the suggestions?

1181
00:57:58,394 --> 00:58:00,560
ALLISON BUCHHOLTZ-AU: So
if you guys are interested,

1182
00:58:00,560 --> 00:58:03,480
this is another text
editor called Sublime.

1183
00:58:03,480 --> 00:58:07,180
You should be able to
install it on your appliance.

1184
00:58:07,180 --> 00:58:08,659
Sometimes it gets a little tricky.

1185
00:58:08,659 --> 00:58:10,950
If you want help with that,
I'm super happy to help you

1186
00:58:10,950 --> 00:58:14,720
with it, because gedit is great and
it's awesome because you can compile it

1187
00:58:14,720 --> 00:58:17,790
on the bottom, but I really
like Sublime because it's pretty

1188
00:58:17,790 --> 00:58:19,498
and it does do things
like auto-complete.

1189
00:58:19,498 --> 00:58:21,560

1190
00:58:21,560 --> 00:58:26,890
>> So you can definitely feel free to
let me know if you want to do that.

1191
00:58:26,890 --> 00:58:28,940
If you just google "Sublime
text," it typically

1192
00:58:28,940 --> 00:58:32,860
has instructions on how to install
on various operating systems.

1193
00:58:32,860 --> 00:58:37,590
It is really cool, I
think, in my opinion.

1194
00:58:37,590 --> 00:58:38,355
So p.

1195
00:58:38,355 --> 00:58:45,616
I think I can just do text-- or
we can just do color is "white."

1196
00:58:45,616 --> 00:58:47,050
There.

1197
00:58:47,050 --> 00:58:50,770
>> So what I did here is that I
didn't change all the text.

1198
00:58:50,770 --> 00:58:54,040
But p here is just a
tag that we have, right?

1199
00:58:54,040 --> 00:58:55,450
This paragraph tag.

1200
00:58:55,450 --> 00:59:00,380
So I just created a CSS element that
said, OK, anything with this tag

1201
00:59:00,380 --> 00:59:02,510
p, make the color white.

1202
00:59:02,510 --> 00:59:05,690
>> So if you noticed, it made
this white and this white.

1203
00:59:05,690 --> 00:59:09,100
It didn't make our list white because
it's not associated with that.

1204
00:59:09,100 --> 00:59:11,180
You could go through and you could say--

1205
00:59:11,180 --> 00:59:11,860
>> AUDIENCE: Do background color.

1206
00:59:11,860 --> 00:59:12,660
>> ALLISON BUCHHOLTZ-AU: Background color?

1207
00:59:12,660 --> 00:59:15,660
>> AUDIENCE: Background to pipe in
color where you put the p tag.

1208
00:59:15,660 --> 00:59:16,701
>> ALLISON BUCHHOLTZ-AU: OK.

1209
00:59:16,701 --> 00:59:21,980

1210
00:59:21,980 --> 00:59:22,804
You want it white?

1211
00:59:22,804 --> 00:59:23,470
AUDIENCE: Mmhmm.

1212
00:59:23,470 --> 00:59:25,070
ALLISON BUCHHOLTZ-AU: OK.

1213
00:59:25,070 --> 00:59:26,342
There you go.

1214
00:59:26,342 --> 00:59:27,300
AUDIENCE: That's weird.

1215
00:59:27,300 --> 00:59:29,190
ALLISON BUCHHOLTZ-AU:
Pretty cool, right?

1216
00:59:29,190 --> 00:59:31,640
So if you just mess around,
you're going to learn a lot.

1217
00:59:31,640 --> 00:59:34,720
And it can be pretty cool.

1218
00:59:34,720 --> 00:59:37,312
I think it's definitely more
gratifying than sometimes

1219
00:59:37,312 --> 00:59:39,770
because you don't have to wait
for your program to compile.

1220
00:59:39,770 --> 00:59:41,895
You can just hit Refresh
and you're like, oh, look,

1221
00:59:41,895 --> 00:59:44,276
it worked, or oh, I'm
probably missing something.

1222
00:59:44,276 --> 00:59:47,359
And that's something that's really
cool about this next part of the class,

1223
00:59:47,359 --> 00:59:49,250
is it's definitely, I
think, easier to check

1224
00:59:49,250 --> 00:59:52,640
as you go along the way versus
having to write these long programs

1225
00:59:52,640 --> 00:59:57,830
and wishing and praying
that it works at the end.

1226
00:59:57,830 --> 01:00:01,960
>> So with that, I think
you guys all seem good.

1227
01:00:01,960 --> 01:00:05,360
If you have any questions, as always,
come talk to me, come let me know.

1228
01:00:05,360 --> 01:00:08,180
I will be right outside
for the next 15 minutes

1229
01:00:08,180 --> 01:00:11,340
if you want to chat about
anything and everything.

1230
01:00:11,340 --> 01:00:13,530
>> So I hope you guys--
good luck with this pset.

1231
01:00:13,530 --> 01:00:18,150
The deadline is Friday at noon
because it was released late.

1232
01:00:18,150 --> 01:00:21,220
So I will probably be seeing
a lot of you guys on Thursday,

1233
01:00:21,220 --> 01:00:21,970
but hopefully not.

1234
01:00:21,970 --> 01:00:23,386
Maybe you'll have it done by then.

1235
01:00:23,386 --> 01:00:24,440
I'd be super proud.

1236
01:00:24,440 --> 01:00:26,410
>> But if not, I will see you Thursday.

1237
01:00:26,410 --> 01:00:30,030
You can also use a late date, which
extends it to Saturday at noon.

1238
01:00:30,030 --> 01:00:31,730
But I don't-- huh?

1239
01:00:31,730 --> 01:00:32,580
>> AUDIENCE: Halloween.

1240
01:00:32,580 --> 01:00:34,538
>> ALLISON BUCHHOLTZ-AU:
It's Halloween, a, and b,

1241
01:00:34,538 --> 01:00:37,050
I don't think there will
be office hours on Friday.

1242
01:00:37,050 --> 01:00:40,920
So really do try and get it done by
Friday so that we can all celebrate

1243
01:00:40,920 --> 01:00:42,010
Hallow weekend.

1244
01:00:42,010 --> 01:00:44,670
All right, I'll see you guys next week.

1245
01:00:44,670 --> 01:00:45,888