1
00:00:00,000 --> 00:00:01,390

2
00:00:01,390 --> 00:00:04,890
>> [Speel van musiek]

3
00:00:04,890 --> 00:00:10,955

4
00:00:10,955 --> 00:00:12,580
DAVID J MALAN: Alle reg, welkom terug.

5
00:00:12,580 --> 00:00:13,600
Dit is CS50.

6
00:00:13,600 --> 00:00:15,540
Dit is die einde van die week sewe.

7
00:00:15,540 --> 00:00:18,180
En dit is die einde van die aasdier
jag van die probleem stel vier

8
00:00:18,180 --> 00:00:19,220
dat jy kan onthou.

9
00:00:19,220 --> 00:00:21,650
Na die herstel van al
diegene JPEG van personeel,

10
00:00:21,650 --> 00:00:24,820
jy is uitgedaag, as jy wil,
jouself te neem met soveel

11
00:00:24,820 --> 00:00:25,981
van dié mense as wat jy kan.

12
00:00:25,981 --> 00:00:28,480
Ons het 'n hele klomp van die voorleggings
oor die afgelope paar weke,

13
00:00:28,480 --> 00:00:32,980
Trouens, 'n hele paar reg voor die middag
vandag, waarvan sommige wat hier,

14
00:00:32,980 --> 00:00:37,670
gevang hier in-- lyk like-- Annenberg
Hall by kantoorure, een hier

15
00:00:37,670 --> 00:00:39,530
in Lowell Huis met Nick.

16
00:00:39,530 --> 00:00:41,750
Hier is Ramon gevang op die selfoon.

17
00:00:41,750 --> 00:00:43,870
Dit was op 'n CS50 middagete.

18
00:00:43,870 --> 00:00:46,840
Dit was Jason Skyping met
'n meer kreatiewe klasmaat,

19
00:00:46,840 --> 00:00:48,280
wat hom gebel hierdie manier.

20
00:00:48,280 --> 00:00:49,690
Ons weet nie wat dit was.

21
00:00:49,690 --> 00:00:51,940
>> [Gelag]

22
00:00:51,940 --> 00:00:54,570
>> DAVID J MALAN: Maar
dit is die moeite werd om 'n GB.

23
00:00:54,570 --> 00:00:56,960
Hier is Chang, wat
letterlik gehardloop van die verhoog af

24
00:00:56,960 --> 00:01:00,480
om te verhoed dat gefotografeer een
dag, maar is uiteindelik gevang.

25
00:01:00,480 --> 00:01:02,050
Hier is Nick.

26
00:01:02,050 --> 00:01:03,480
Hier is Nick.

27
00:01:03,480 --> 00:01:04,080
Hier is Nick.

28
00:01:04,080 --> 00:01:05,090

29
00:01:05,090 --> 00:01:07,670
En hier is Alison deur die veld.

30
00:01:07,670 --> 00:01:11,840
En Zamyla selfs gevind
'n ballroom-kompetisie.

31
00:01:11,840 --> 00:01:14,100
So sal ons gaan deur
hierdie foto's, uit te vind

32
00:01:14,100 --> 00:01:16,690
wat ingedien is die mees
die vroegste, en beloning

33
00:01:16,690 --> 00:01:20,662
een fantastiese prys, soos
belowe in die spec.

34
00:01:20,662 --> 00:01:23,120
En ons sal ook opvolg oor
die ruimte wat betrokke was.

35
00:01:23,120 --> 00:01:26,860
>> 'N Paar announcements-- so middagete
is, weer, hierdie Vrydag by 13:15.

36
00:01:26,860 --> 00:01:30,420
As jy wil ons aan te sluit,
RSVP by daardie URL hier.

37
00:01:30,420 --> 00:01:33,730
Jason verskyn weer hier van die een
van die afdelings 'n paar jaar

38
00:01:33,730 --> 00:01:35,510
terug, wat gebeur
om te val op Halloween.

39
00:01:35,510 --> 00:01:38,950
En inderdaad, hy geklee as 'n
pampoen daardie spesifieke jaar.

40
00:01:38,950 --> 00:01:42,700
As jy kyk na hierdie artikel
van sy vanaf 2011 artikel

41
00:01:42,700 --> 00:01:46,480
agt, as jy nuuskierig is,
by CS50.tv, ek dink

42
00:01:46,480 --> 00:01:49,730
Dit was die jaar waarin
sy lug pomp gewerk.

43
00:01:49,730 --> 00:01:52,490
>> As jy dan kyk na die
soortgelyke artikel in 2012,

44
00:01:52,490 --> 00:01:55,620
jy sal sien hierdie Jason baie afgeblaas,
sedert die pak nie meer gefunksioneer,

45
00:01:55,620 --> 00:01:58,060
wat net om te sê
Vrydag, as jy wil

46
00:01:58,060 --> 00:02:02,720
graag 'n pampoen met Daven te kerf
en Gabe en ander, RSVP aan die hoofde

47
00:02:02,720 --> 00:02:04,480
by cs50.harvard.edu adres.

48
00:02:04,480 --> 00:02:06,200
Dit beloof om groot pret te wees.

49
00:02:06,200 --> 00:02:08,660
Daven, is ons vertel, beklee
pampoene al van sy lewe.

50
00:02:08,660 --> 00:02:11,930
Gabriel uit Brasilië het nooit
uitgekap 'n pampoen vir Halloween.

51
00:02:11,930 --> 00:02:14,700
So is daar by hulle as hy leer.

52
00:02:14,700 --> 00:02:16,830
>> Seminare, meanwhile--
so jy sal gou leer

53
00:02:16,830 --> 00:02:20,650
oor wat ons verwagtinge is vir
die finale projek, wat in wese

54
00:02:20,650 --> 00:02:23,150
sal neerkom op
ontwerp en implementering van

55
00:02:23,150 --> 00:02:26,440
die meeste enige projek van belang is vir
jy, al is dit onderhewig aan die goedkeuring

56
00:02:26,440 --> 00:02:28,490
en leiding van jou onderrig mede.

57
00:02:28,490 --> 00:02:32,110
Teen die einde van die
semester, is daar 'n aantal

58
00:02:32,110 --> 00:02:35,610
seminare, wat is opsioneel klasse
gelei deur die onderrig genote en Harvard

59
00:02:35,610 --> 00:02:38,570
personeel, vriende van die kursus oor
kampus, oor verskillende onderwerpe wat

60
00:02:38,570 --> 00:02:41,470
is raaklynig aan die
Natuurlik se onderliggende leerplan

61
00:02:41,470 --> 00:02:45,590
maar tog van toepassing, pret, en
verskillende potensiële finale projekte.

62
00:02:45,590 --> 00:02:49,530
>> Byvoorbeeld, in die eerste, as jy wil
te registreer, hoof aan daardie URL daar.

63
00:02:49,530 --> 00:02:53,010
En dit is die besetting vir
hierdie jaar se seminare alleen.

64
00:02:53,010 --> 00:02:56,060
Maar besef ons het dosyne
seminare van die afgelope jare, wat almal

65
00:02:56,060 --> 00:02:59,774
gekoppel in die Seminars spyskaart
opsie van die kursus se webblad.

66
00:02:59,774 --> 00:03:02,190
So as jy dink oor
verder gaan as jou gemaksone

67
00:03:02,190 --> 00:03:05,060
of pluk 'n paar nuwe vaardighede,
byvoorbeeld, programmering iPhone

68
00:03:05,060 --> 00:03:08,100
programme met Swift, 'n nuwe taal
Apple of Objective-C

69
00:03:08,100 --> 00:03:11,230
of Android-of ontwikkeling [? cue?]
gloeilampe, of enige van die onderwerpe

70
00:03:11,230 --> 00:03:15,490
hier en meer, as gevolg tjek
die registrasie bladsy.

71
00:03:15,490 --> 00:03:19,730
>> So het ons begin en gesluit
Maandag met soek by http.

72
00:03:19,730 --> 00:03:22,675
So vinnig refresher-- HTTP,
HyperText Transfer Protocol.

73
00:03:22,675 --> 00:03:24,045
Maar wat beteken dit werklik?

74
00:03:24,045 --> 00:03:26,805

75
00:03:26,805 --> 00:03:27,930
Wat beteken dit werklik?

76
00:03:27,930 --> 00:03:30,665

77
00:03:30,665 --> 00:03:31,290
Is dit 'n hand?

78
00:03:31,290 --> 00:03:33,074

79
00:03:33,074 --> 00:03:34,740
Ek weet dat jy net krap jou kop.

80
00:03:34,740 --> 00:03:36,400
Maar jy wil te stel wat HTTP is?

81
00:03:36,400 --> 00:03:37,792

82
00:03:37,792 --> 00:03:40,576
>> Publiek: Hoe rekenaars
kommunikeer met [onhoorbaar].

83
00:03:40,576 --> 00:03:41,517

84
00:03:41,517 --> 00:03:43,100
DAVID J MALAN: Ek, die laaste deel gemis.

85
00:03:43,100 --> 00:03:45,774
Hoe rekenaars kommunikeer with--

86
00:03:45,774 --> 00:03:47,325
>> Publiek: Internet bedieners.

87
00:03:47,325 --> 00:03:50,450
DAVID J Malan Good-- met internet
bedieners, en spesifiek, web bedieners.

88
00:03:50,450 --> 00:03:53,533
Omdat Onthou, daar is 'n klomp van die
dienste op die internet, waarvan sommige

89
00:03:53,533 --> 00:03:57,349
jy waarskynlik gebruik daagliks tussen chat
en boodskap, chat, en web en e-pos,

90
00:03:57,349 --> 00:03:57,890
en dies meer.

91
00:03:57,890 --> 00:04:00,900
En HTTP is net die
protokol wat webblaaiers

92
00:04:00,900 --> 00:04:03,750
praat wanneer met kommunikasie
web bedieners, en omgekeerd.

93
00:04:03,750 --> 00:04:05,580
En die analoog in die
menslike wêreld sou wees,

94
00:04:05,580 --> 00:04:08,730
Ek brei my hand 'n paar te skud
ander menslike en hy of sy

95
00:04:08,730 --> 00:04:11,970
erken deur die uitbreiding
sy of haar hand so goed.

96
00:04:11,970 --> 00:04:13,970
So dit is net 'n protokol,
'n stel konvensies.

97
00:04:13,970 --> 00:04:15,630
>> En wat inderdaad is dié konvensies?

98
00:04:15,630 --> 00:04:18,640
Wel, is dit net kom neer op
die stuur van boodskappe heen en weer,

99
00:04:18,640 --> 00:04:19,770
soos ons hier uitgebeeld.

100
00:04:19,770 --> 00:04:22,520
En daar is 'n paar van die maniere
wat jy kan hierdie boodskappe stuur nie.

101
00:04:22,520 --> 00:04:24,360
En miskien die mees
gemeen het, is bekend as get.

102
00:04:24,360 --> 00:04:26,510
En ons sal 'n kontras te sien
hierdie kort voor lank.

103
00:04:26,510 --> 00:04:30,010
>> Maar 'n get versoek van 'n leser
aan die bediener net so lyk.

104
00:04:30,010 --> 00:04:32,960
Dit is 'n klomp van die teks wat dit sit
binnekant van 'n virtuele koevert.

105
00:04:32,960 --> 00:04:35,854
Aan die buitekant van die koevert
gaan 'n paar stukkies van die inligting.

106
00:04:35,854 --> 00:04:37,770
Wat moet om te gaan op die
koevert, so te sê,

107
00:04:37,770 --> 00:04:41,820
ten einde 'n versoek soos te kry
dit van my om 'n web bediener?

108
00:04:41,820 --> 00:04:42,320
Ja.

109
00:04:42,320 --> 00:04:43,270
>> Publiek: Jou IP adres.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J MALAN: My IP adres
in die veld, om so te praat,

111
00:04:45,890 --> 00:04:49,490
En natuurlik, die
ontvanger se IP adres.

112
00:04:49,490 --> 00:04:52,710
Maar in die geval van 'n web pakkie,
Ons moet 'n bietjie meer detail

113
00:04:52,710 --> 00:04:55,254
Dit is nie voldoende om net te
stuur 'n koevert met 'n bediener,

114
00:04:55,254 --> 00:04:57,670
want dit bediener kan wees
luister vir verskillende tipes

115
00:04:57,670 --> 00:04:59,180
van internet verkeer.

116
00:04:59,180 --> 00:05:01,370
So wat anders moet ons
Behalwe die ontvanger se IP?

117
00:05:01,370 --> 00:05:02,723

118
00:05:02,723 --> 00:05:03,222
Ja?

119
00:05:03,222 --> 00:05:04,241
>> Publiek: Is dit TCP?

120
00:05:04,241 --> 00:05:05,074
DAVID J MALAN: Goed.

121
00:05:05,074 --> 00:05:06,470
TCP--

122
00:05:06,470 --> 00:05:07,340
>> Publiek: adres.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J Malan-adres,
of hawe, soos dit genoem word.

124
00:05:09,340 --> 00:05:11,010
Maak nie, maar 'n TCP-poort nommer.

125
00:05:11,010 --> 00:05:12,220
En daar is 'n klomp van hulle nie.

126
00:05:12,220 --> 00:05:14,310
Maar seker die mees
vertroud moet uiteindelik

127
00:05:14,310 --> 00:05:17,590
80, wat is die standaard
een wat gebruik word vir die web verkeer.

128
00:05:17,590 --> 00:05:20,040
En 'n ander bekende
een sal binnekort 443,

129
00:05:20,040 --> 00:05:24,280
wat gebruik word vir 'n veilige web
verkeer, URL's wat begin met https.

130
00:05:24,280 --> 00:05:26,650
>> So dit is wat gaan
binnekant van die koevert.

131
00:05:26,650 --> 00:05:29,780
En kry / net beteken, gee
my die standaard web bladsy.

132
00:05:29,780 --> 00:05:32,700
Gee my die wortel van die harde
ry op die web bediener.

133
00:05:32,700 --> 00:05:36,050
En hopelik die web
bediener sal reageer met, OK

134
00:05:36,050 --> 00:05:39,630
en die getal 200, wat net
'n konvensie gesê, ja, al

135
00:05:39,630 --> 00:05:40,470
inderdaad OK.

136
00:05:40,470 --> 00:05:41,680
Hier is die bladsy.

137
00:05:41,680 --> 00:05:45,510
Die tipe van die webblad gaan
wees teks, maar meer spesifiek, HTML,

138
00:05:45,510 --> 00:05:47,010
wat ons oor om weer in te duik.

139
00:05:47,010 --> 00:05:49,877
En die dot dot dot net
middel, hier is die HTML.

140
00:05:49,877 --> 00:05:51,710
En dit is waar ons
haal die storie vandag,

141
00:05:51,710 --> 00:05:55,740
eintlik skryf HTML,
HyperText Markup Language, wat

142
00:05:55,740 --> 00:05:57,727
is die taal waarin
webblaaie word geskryf.

143
00:05:57,727 --> 00:05:59,060
Dit is nie 'n programmeertaal.

144
00:05:59,060 --> 00:06:01,270
Daar is geen funksies
of lusse of voorwaardes.

145
00:06:01,270 --> 00:06:03,800
Dit is 'n opmaak taal,
sowel vandag sien weer,

146
00:06:03,800 --> 00:06:07,240
wat jy kan spesifiseer
hoe om die struktuur en stileer

147
00:06:07,240 --> 00:06:09,300
esteties 'n webblad.

148
00:06:09,300 --> 00:06:11,470
>> So dit is die een
en slegs bladsy ons regtig

149
00:06:11,470 --> 00:06:13,930
gekyk word, indien kortliks, gister gesê.

150
00:06:13,930 --> 00:06:16,250
En kennis van 'n paar
uitstaande kenmerke.

151
00:06:16,250 --> 00:06:20,170
Daar is 'n baie oop skuins
bracket en naby skuins bracket.

152
00:06:20,170 --> 00:06:23,160
In tussen die skuins
hakies is woorde.

153
00:06:23,160 --> 00:06:25,660
En ons gaan om te begin
roep hierdie woorde tags.

154
00:06:25,660 --> 00:06:28,800
So oop bracket kop
en geslote bracket kop

155
00:06:28,800 --> 00:06:33,620
die oop en geslote etikette,
of die begin en einde tags

156
00:06:33,620 --> 00:06:37,660
onderskeidelik, van 'n HTML element,
soos ons dit sal noem, die sogenaamde kop.

157
00:06:37,660 --> 00:06:41,760
En dieselfde jargon toepassing
om die liggaam in HTML en so meer.

158
00:06:41,760 --> 00:06:43,970
>> En wat is lekker is
HTML-- en inderdaad, ons sal

159
00:06:43,970 --> 00:06:47,187
spandeer verskriklik min tyd op dit,
want jy sal meestal net uit te vind

160
00:06:47,187 --> 00:06:49,770
watter eienskappe dit het wanneer jy
eintlik 'n konkrete probleem

161
00:06:49,770 --> 00:06:52,820
te solve-- jy sal vind dat
'n leser is redelik dom.

162
00:06:52,820 --> 00:06:56,450
Dit is net gaan nie in teenstelling met do--
'n computer-- wat jy vertel om dit te doen.

163
00:06:56,450 --> 00:06:59,279
En so wanneer jy 'n oop
bracket HTML by die top

164
00:06:59,279 --> 00:07:01,320
daar, wat in wese
net beteken, hey, die leser,

165
00:07:01,320 --> 00:07:04,090
hier kom 'n web bladsy geskryf in HTML.

166
00:07:04,090 --> 00:07:06,130
>> Wanneer dit sien oop bracket
kop, wat net beteken,

167
00:07:06,130 --> 00:07:10,350
hey, die leser, hier kom die kop, of
die boonste gedeelte van my webblad.

168
00:07:10,350 --> 00:07:14,192
Wanneer dit sien 'n geslote bracket
kop, wat net beteken, hey,

169
00:07:14,192 --> 00:07:15,150
dit is dit vir die kop.

170
00:07:15,150 --> 00:07:16,420
Bystand vir iets anders.

171
00:07:16,420 --> 00:07:18,878
En dat daar iets anders is
blykbaar gaan om die liggaam te wees nie.

172
00:07:18,878 --> 00:07:22,630
En as jy nie 'n etiket, soos
jy het net hello, komma, wêreld,

173
00:07:22,630 --> 00:07:26,610
wat net gaan rou teks te wees dat
uiteindelik in die skerm vertoon word.

174
00:07:26,610 --> 00:07:29,220
>> Nou, jy sal ook sien
die inkeping hier.

175
00:07:29,220 --> 00:07:32,160
Jy kan waarskynlik lei
hoe ons stylizing dit.

176
00:07:32,160 --> 00:07:34,850
Elke keer as ek 'n merker oopmaak,
so te sê, ek keep.

177
00:07:34,850 --> 00:07:38,540
En elke keer as ek sluit
'n merker, ek un-streepje,

178
00:07:38,540 --> 00:07:40,690
soortgelyk in gees krullerige draadjies.

179
00:07:40,690 --> 00:07:43,470
En as dit nie, ek is soort
van die gebruik van my reg.

180
00:07:43,470 --> 00:07:48,380
Let daarop dat ek het nie die moeite te slaan
Tik binnekant van die titel tag.

181
00:07:48,380 --> 00:07:48,990
Hoekom?

182
00:07:48,990 --> 00:07:51,920
Wel, ek het net besluit dit lyk 'n
bietjie skoner vir my, die mens,

183
00:07:51,920 --> 00:07:53,181
net nie die moeite om dit te doen.

184
00:07:53,181 --> 00:07:54,930
So weer, daar is 'n paar
uitspraak noem net

185
00:07:54,930 --> 00:07:57,670
asof daar in C of enige taal.

186
00:07:57,670 --> 00:08:04,110
>> Maar let ook op dat hierdie inkeping
leen hom tot 'n geestelike model,

187
00:08:04,110 --> 00:08:05,670
nie oor bemoeilik dit.

188
00:08:05,670 --> 00:08:07,020
Maar 'n boom, reg?

189
00:08:07,020 --> 00:08:09,290
As jy dink van 'n web
bladsy, blykbaar geskryf

190
00:08:09,290 --> 00:08:12,050
soos hierdie, as
mooi ingekeep dat die pad,

191
00:08:12,050 --> 00:08:17,390
jy kan amper dink aan die oop bracket
HTML geslote bracket merker afbakening

192
00:08:17,390 --> 00:08:21,380
die wortel van 'n knoop, 'n familie boom
styl knoop in die styl van die bome

193
00:08:21,380 --> 00:08:22,900
Ons kyk na verlede Vrydag.

194
00:08:22,900 --> 00:08:27,630
>> En inderdaad, ons het op die reg hier
wat ons sal 'n DOM, D-O-M, dokument noem

195
00:08:27,630 --> 00:08:31,680
voorwerp model, 'n fancy manier om te sê
'n boom wat daardie HTML.

196
00:08:31,680 --> 00:08:36,140
En sien dat HTML het, sal ons sê,
soos 'n stamboom, twee kinders.

197
00:08:36,140 --> 00:08:37,659
Aan die linkerkant is die hoof.

198
00:08:37,659 --> 00:08:39,179
Aan die regterkant is die liggaam.

199
00:08:39,179 --> 00:08:44,220
>> En net as 'n sinnelose gedagte oefening,
kop, natuurlik, het hoeveel kinders

200
00:08:44,220 --> 00:08:46,070
volgens hierdie struktuur?

201
00:08:46,070 --> 00:08:48,200
Dus net een, title--
en dit is hoekom ons 'n

202
00:08:48,200 --> 00:08:50,580
die pyl gaan van kop tot die titel.

203
00:08:50,580 --> 00:08:55,110
Dus is dit asof daardie persoon in die
stamboom het net een geslag.

204
00:08:55,110 --> 00:08:58,230
En dan titel self kan
word gesê dat 'n kind te hê.

205
00:08:58,230 --> 00:09:01,780
>> Onthou dat die HTML gehad
hello, komma, die wêreld daaronder.

206
00:09:01,780 --> 00:09:06,090
En ek het net getrek dit in 'n
ovaal in plaas van 'n reghoek net

207
00:09:06,090 --> 00:09:10,559
te semanties dra dat selfs al
dit is 'n knoop in die boom, so te sê,

208
00:09:10,559 --> 00:09:12,100
dit is soort van fundamenteel anders.

209
00:09:12,100 --> 00:09:12,800
Dit is nie 'n etiket.

210
00:09:12,800 --> 00:09:14,780
Of meer behoorlik, dit is nie 'n element.

211
00:09:14,780 --> 00:09:16,590
Dit is net 'n teks knoop, as jy wil.

212
00:09:16,590 --> 00:09:18,990
Maar dit is heeltemal
arbitrêre menslike konvensies.

213
00:09:18,990 --> 00:09:23,180
Dit is nou net my manier van
verteenwoordig wat ek sal so 'n totale

214
00:09:23,180 --> 00:09:24,340
noem die dokument.

215
00:09:24,340 --> 00:09:27,750
>> En as 'n eenkant, die ding op
die super boonste linkerhoek,

216
00:09:27,750 --> 00:09:32,080
oop bracket uitroepteken doc
tipe HTML, dit lyk soos 'n tag,

217
00:09:32,080 --> 00:09:35,560
maar dit is die dom hoek geval waar
dit is net daar, gekopieer en geplak

218
00:09:35,560 --> 00:09:38,460
die blaaier om aan te dui
Dit is HTML weergawe 5.

219
00:09:38,460 --> 00:09:41,540
Die wêreld hou die verandering wat die
eerste reël van die kode in 'n bladsy moet wees.

220
00:09:41,540 --> 00:09:43,820
Dit beteken net weergawe 5.

221
00:09:43,820 --> 00:09:45,950
So is dit nie heeltemal
lyk soos die ander.

222
00:09:45,950 --> 00:09:48,120
>> Alle reg, so met daardie
gesê het, jy nou sal waardeer

223
00:09:48,120 --> 00:09:50,767
hierdie redelik hierdie stupid
Een iemand het.

224
00:09:50,767 --> 00:09:51,990
>> [Gelag]

225
00:09:51,990 --> 00:09:54,210
>> DAVID J MALAN: Alle reg,
En nou, laat se werklik duik

226
00:09:54,210 --> 00:09:55,710
in om iets te doen met hierdie.

227
00:09:55,710 --> 00:09:58,610
Jy sal die laaste keer onthou
Ek het ook die CS50 toestel

228
00:09:58,610 --> 00:10:01,650
en ek het iets soos
eenvoudig soos die opening van gedit.

229
00:10:01,650 --> 00:10:05,190
En ek het die lêer gestoor selfs op
my desktop-- nêrens special--

230
00:10:05,190 --> 00:10:05,870
as hello.html.

231
00:10:05,870 --> 00:10:07,100

232
00:10:07,100 --> 00:10:10,984
>> So laat my dit doen
again-- hello.html Enter.

233
00:10:10,984 --> 00:10:13,900
En nou in hierdie lêer, ek gaan
gaan voort en herhaal wat ons nou net

234
00:10:13,900 --> 00:10:18,850
saw-- doc tipe html Toe ek gaan
doen oop bracket html geslote bracket.

235
00:10:18,850 --> 00:10:21,890
En dan gaan ek preemptively
oop en toe die etiket.

236
00:10:21,890 --> 00:10:22,390
Hoekom?

237
00:10:22,390 --> 00:10:23,598
Net sodat ek nie later nie vergeet nie.

238
00:10:23,598 --> 00:10:26,850
Dis net goeie praktyk, soos die opening
en die sluiting van krulhakies alles op een slag.

239
00:10:26,850 --> 00:10:28,900
>> En dan wat het die volgende?

240
00:10:28,900 --> 00:10:30,582
Jy kan dink van die Een.

241
00:10:30,582 --> 00:10:31,450
>> Publiek: Die kop.

242
00:10:31,450 --> 00:10:32,500
>> DAVID J MALAN: Die kop.

243
00:10:32,500 --> 00:10:36,020
En dan in hier, ek
het die titel, dink ek.

244
00:10:36,020 --> 00:10:39,886
En die titel was arbitrêr,
hello, wêreld naby titel.

245
00:10:39,886 --> 00:10:42,760
En dan hier, die liggaam, van
course-- dan sluit ons die liggaam tag.

246
00:10:42,760 --> 00:10:45,660
En dan net 'n bietjie kere,
Ek het dieselfde ding hier.

247
00:10:45,660 --> 00:10:47,150
>> So ek beweer dat dit is 'n web bladsy.

248
00:10:47,150 --> 00:10:49,050
Dit is iets wat
kon woon nou op die web,

249
00:10:49,050 --> 00:10:51,925
selfs al is dit natuurlik is letterlik
wat op my lessenaar nou.

250
00:10:51,925 --> 00:10:55,837
Maar inderdaad, as ek minimaliseer gedit,
Ek sien op my lessenaar sy ikoon.

251
00:10:55,837 --> 00:10:58,420
Selfs al is dit die toestel,
jy dit kan doen op 'n Mac OS

252
00:10:58,420 --> 00:11:01,580
sonder Text Editor of
Vensters met Notepad selfs.

253
00:11:01,580 --> 00:11:06,115
>> En as ek gaan voort en dubbel kliek
dat selfs, en select-- goed, laat

254
00:11:06,115 --> 00:11:07,990
nie kies dat omdat
Chrome is nie die opening.

255
00:11:07,990 --> 00:11:09,281
Kom ons gaan voort en maak Chrome.

256
00:11:09,281 --> 00:11:10,160

257
00:11:10,160 --> 00:11:14,040
En dan doen Command-O vir 'n oop
En gaan na my lessenaar

258
00:11:14,040 --> 00:11:15,320
en maak die lêer.

259
00:11:15,320 --> 00:11:20,120
Dit is hoe 'n leser interpreteer
HTML, bo na onder, links na regs.

260
00:11:20,120 --> 00:11:21,314
Hey, die leser hier is HTML.

261
00:11:21,314 --> 00:11:21,980
Hier is die kop.

262
00:11:21,980 --> 00:11:23,250
Hier is die titel.

263
00:11:23,250 --> 00:11:24,090
Hier is die liggaam.

264
00:11:24,090 --> 00:11:26,620
En inderdaad, dit is hoe
dit maak dat webblad.

265
00:11:26,620 --> 00:11:27,800
>> Maar kennis van die URL.

266
00:11:27,800 --> 00:11:32,430
Nie een van julle kan trek hierdie spesifieke
bladsy op jou skootrekenaars nou,

267
00:11:32,430 --> 00:11:34,910
selfs binnekant van jou
toestel via die URL,

268
00:11:34,910 --> 00:11:40,130
omdat lêer: // dui dit eintlik
op my lêer stelsel, my hardeskyf,

269
00:11:40,130 --> 00:11:40,990
nie joune nie.

270
00:11:40,990 --> 00:11:42,440
So dit is nie al wat nuttig.

271
00:11:42,440 --> 00:11:44,940
>> Kom ons beweeg nou in die rigting van
met behulp van 'n werklike webbediener.

272
00:11:44,940 --> 00:11:48,309
En dit blyk uit die CS50 toestel
is meer as net 'n omgewing waar

273
00:11:48,309 --> 00:11:51,100
jy kan C-kode te skryf en saam te stel
en dit loop soos jy gedoen het.

274
00:11:51,100 --> 00:11:55,500
Dit is ook reeds ingestel deur die
personeel 'n tipiese web te verteenwoordig

275
00:11:55,500 --> 00:11:58,290
bediener wat is op die internet,
een wat jy kan betaal vir

276
00:11:58,290 --> 00:12:00,210
of een wat in die sogenaamde wolk.

277
00:12:00,210 --> 00:12:02,600
>> En dit loop
standaard gratis open source

278
00:12:02,600 --> 00:12:06,160
sagteware, byvoorbeeld, iets
genoem Apache, wat miskien

279
00:12:06,160 --> 00:12:08,700
nog steeds die mees gewilde web
bediener sagteware in die wêreld

280
00:12:08,700 --> 00:12:11,030
dat duisende van die webwerwe gebruik vandag.

281
00:12:11,030 --> 00:12:13,420
En dit het ook selfs '
sagteware soos MySQL,

282
00:12:13,420 --> 00:12:16,240
wat is 'n databasis bediener
dat ons uiteindelik sal kry om,

283
00:12:16,240 --> 00:12:18,330
wat net om te sê
Ek kan begin behandel

284
00:12:18,330 --> 00:12:22,040
my toestel as 'n volwaardige bediener
dat ek nie betaal vir elders.

285
00:12:22,040 --> 00:12:25,980
Dit bly net op my eie laptop vir
ontwikkeling en gerief doeleindes.

286
00:12:25,980 --> 00:12:27,870
>> So laat ons gaan voort en
neem voordeel van hierdie.

287
00:12:27,870 --> 00:12:30,120
Ek gaan om voort te gaan en
maak 'n terminale venster.

288
00:12:30,120 --> 00:12:33,030
En ek gaan om voort te gaan en
move-- eintlik eers ek

289
00:12:33,030 --> 00:12:34,860
gaan om na my lessenaar.

290
00:12:34,860 --> 00:12:36,400
As ek dit doen LS, daar is hello.html.

291
00:12:36,400 --> 00:12:37,022

292
00:12:37,022 --> 00:12:38,730
En ek gaan om te gaan
voor en begin met

293
00:12:38,730 --> 00:12:40,800
'n nuwe gids wat ons het
nie gebruik voor vandag.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- ek gaan om te beweeg
te ../vhosts vir virtuele hosts--

295
00:12:46,840 --> 00:12:50,940
meer op wat in die future-- en dan
in 'n gids genaamd localhost,

296
00:12:50,940 --> 00:12:54,420
wat is die bynaam gegee tot byna
enige rekenaar, of dit nou 'n Mac, PC,

297
00:12:54,420 --> 00:12:57,560
of Linux rekenaar, en dan
spesifiek in 'n gids wat ons,

298
00:12:57,560 --> 00:13:01,260
die personeel reeds vir jou geskep wanneer
jy die toestel genoem afgelaai

299
00:13:01,260 --> 00:13:01,760
publiek.

300
00:13:01,760 --> 00:13:04,551
En soos sy naam suggereer, enigiets
Ek het in hierdie gids, in teorie,

301
00:13:04,551 --> 00:13:07,790
gaan nou
publiek, ten minste vir mense

302
00:13:07,790 --> 00:13:10,030
wat 'n direkte hê
verbinding met my rekenaar.

303
00:13:10,030 --> 00:13:13,160
>> So nou laat my voort te gaan en
doen CD wat dieselfde gids

304
00:13:13,160 --> 00:13:15,490
sodat ek kan sien wat
aangaan en die tipe LS.

305
00:13:15,490 --> 00:13:17,630
En inderdaad, dit is die
enigste ding wat daar in.

306
00:13:17,630 --> 00:13:23,250
Ek het nou dat omdat ek het hierdie eis
lêer hello.html binnekant van 'n gids

307
00:13:23,250 --> 00:13:26,940
genoem openbare binnekant van 'n gids
genoem localhost binnekant van 'n gids

308
00:13:26,940 --> 00:13:29,810
genoem vhosts, wat
danksy CS50 personeel

309
00:13:29,810 --> 00:13:34,390
het reeds ingestel te wees
die wortel van jou web bediener

310
00:13:34,390 --> 00:13:36,900
Ek kan nou hopelik doen.

311
00:13:36,900 --> 00:13:38,390
>> Ek gaan om oop te maak 'n nuwe blad.

312
00:13:38,390 --> 00:13:40,090
En ek gaan om te gaan nie na 'n lêer: //.

313
00:13:40,090 --> 00:13:44,520
Ek gaan om te gebruik werklike
http / localhost, wat

314
00:13:44,520 --> 00:13:47,470
weer, is die bynaam
vir my eie bediener.

315
00:13:47,470 --> 00:13:51,085
En dan gaan ek om te gaan na wat
lêer naam, net om duidelik te wees?

316
00:13:51,085 --> 00:13:52,680

317
00:13:52,680 --> 00:13:54,320
Waar is hierdie storie waarskynlik gaan?

318
00:13:54,320 --> 00:13:56,066

319
00:13:56,066 --> 00:13:56,565
hello.html.

320
00:13:56,565 --> 00:13:58,350

321
00:13:58,350 --> 00:14:04,270
>> So met ander woorde, ek wil nou hierdie
is my eie rekenaar, my eie toestel,

322
00:14:04,270 --> 00:14:05,660
asof dit 'n werklike bediener.

323
00:14:05,660 --> 00:14:07,490
Sy bynaam is local host.

324
00:14:07,490 --> 00:14:10,210
Maar dink localhost as soos
Facebook.com google.com, wat ook al.

325
00:14:10,210 --> 00:14:11,600
Dis net my plaaslike naam.

326
00:14:11,600 --> 00:14:14,810
En dan is die finale ek wil hê, is in die
wortel van die hardeskyf, so te sê,

327
00:14:14,810 --> 00:14:17,729
of die wortel van die web bediener,
ergolitiese slash en dan

328
00:14:17,729 --> 00:14:18,770
die naam hello.html.

329
00:14:18,770 --> 00:14:19,880

330
00:14:19,880 --> 00:14:21,930
>> Laat my zoom uit en druk Enter.

331
00:14:21,930 --> 00:14:24,266
En inderdaad, daar is nou my webblad.

332
00:14:24,266 --> 00:14:25,390
Dus is dit effens anders.

333
00:14:25,390 --> 00:14:26,880
En dit is net so underwhelming.

334
00:14:26,880 --> 00:14:27,904
Dit is die ou weergawe.

335
00:14:27,904 --> 00:14:29,070
Laat my krimp die lettergrootte terug.

336
00:14:29,070 --> 00:14:29,745
Dit is die ou.

337
00:14:29,745 --> 00:14:30,890
Dit is die nuwe.

338
00:14:30,890 --> 00:14:35,430
Maar wat gebeur fundamenteel
nou is dat HTTP word gebruik.

339
00:14:35,430 --> 00:14:39,344
>> Kom ons maak dit 'n bietjie meer duidelik of,
as jy wil, 'n bietjie meer ingewikkeld.

340
00:14:39,344 --> 00:14:41,760
Laat my gaan na die onderste regterkantste
hoek van my toestel.

341
00:14:41,760 --> 00:14:44,000
En agterkom dat al hierdie
tyd, is daar 'n aantal.

342
00:14:44,000 --> 00:14:47,330
Dit is die unieke adres
jou CS50 toestel.

343
00:14:47,330 --> 00:14:50,800
Dit is 'n private-adres,
soos geïmpliseer deur die 172,16,

344
00:14:50,800 --> 00:14:53,860
wat beteken maar net jy fisies
kan toegang tot hierdie webbediener.

345
00:14:53,860 --> 00:14:56,340
Alles is firewalled en
mooi beskerm teen die res

346
00:14:56,340 --> 00:14:58,130
van die wêreld as gevolg van hierdie aanspreek.

347
00:14:58,130 --> 00:15:01,920
>> En nou sien maar as ek gaan na
hierdie adres nie in my toestel,

348
00:15:01,920 --> 00:15:04,340
maar in Mac OS-- ek gaan
om terug te gaan oor hier.

349
00:15:04,340 --> 00:15:05,930
Dit is my Mac nou.

350
00:15:05,930 --> 00:15:08,460
En nou gaan ek om oop te maak
hierdie weergawe van Chrome hier.

351
00:15:08,460 --> 00:15:17,370
En ek gaan om te gaan na http: //172.16.25
/ En ek vergeet van die rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> So ek gaan besoek uit my Mac
dat die IP-adres /hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
En nou sien ek uit my Mac
dat my CS50 Appliance, wie se

354
00:15:29,850 --> 00:15:32,600
IP adres is dat
nommer, wel optree

355
00:15:32,600 --> 00:15:34,320
soos 'n web bediener op die internet.

356
00:15:34,320 --> 00:15:36,944
Dit hoef nie 'n lekker maklik om te
Onthou naam soos Facebook.com,

357
00:15:36,944 --> 00:15:40,370
maar dit is met behulp van HTTP
glo, selfs al Chrome

358
00:15:40,370 --> 00:15:43,560
is 'n soort van die vereenvoudiging van die wêreld
vir ons, maar ons nie vertoon HTTP.

359
00:15:43,560 --> 00:15:46,210
Maar dit is inderdaad presies dit.

360
00:15:46,210 --> 00:15:48,470
Chrome is net 'n paar spaar
toetsaanslagen hierdie dae.

361
00:15:48,470 --> 00:15:50,530
En dit is wat ons nou sien.

362
00:15:50,530 --> 00:15:51,890
>> So dit is alles goed en wel.

363
00:15:51,890 --> 00:15:53,740
Maar dit is 'n mooi underwhelming bladsy.

364
00:15:53,740 --> 00:15:56,230
Laat my gaan in en doen iets
'n bietjie anders nou.

365
00:15:56,230 --> 00:15:57,910
So laat my terug te gaan na gedit.

366
00:15:57,910 --> 00:16:00,580
En in plaas van hello,
wêreld, laat ons 'n beeld.

367
00:16:00,580 --> 00:16:05,880
En ek beweer van before-- laat my gaan
in my localhost gids publiek.

368
00:16:05,880 --> 00:16:10,580
En laat my gaan voort en kopieer 'n
hele klomp van lêers van vandag

369
00:16:10,580 --> 00:16:15,633
uit my Dropbox gids tot hier.

370
00:16:15,633 --> 00:16:19,470

371
00:16:19,470 --> 00:16:21,680
>> Nou as ek tik LS, kyk
na al hierdie lêers

372
00:16:21,680 --> 00:16:24,940
wat ek versprei deur die
Natuurlik se webwerf in die opmars van vandag,

373
00:16:24,940 --> 00:16:26,830
waarvan een is nog steeds hello.html.

374
00:16:26,830 --> 00:16:27,830
So daar is dat 'n mens.

375
00:16:27,830 --> 00:16:30,730
En onthou hierdie dom een
van verlede time-- cat.jpg.

376
00:16:30,730 --> 00:16:34,550
So laat ek probeer om in te sluit
cat.jpg binnekant van my webblad.

377
00:16:34,550 --> 00:16:37,690
>> Ek gaan om voort te gaan
en doen cat.jpg, red.

378
00:16:37,690 --> 00:16:38,950
Laat my terug te gaan na Chrome.

379
00:16:38,950 --> 00:16:41,140
En laat my zoom in die
font en nou herlaai.

380
00:16:41,140 --> 00:16:43,090

381
00:16:43,090 --> 00:16:45,030
Oeps, waar ek dit?

382
00:16:45,030 --> 00:16:48,210

383
00:16:48,210 --> 00:16:51,520
Standby-- Ek het nog steeds die ou
weergawe van my lessenaar oop.

384
00:16:51,520 --> 00:16:56,020
So laat my gaan na my vhost, my
localhost, my openbare en hello.html.

385
00:16:56,020 --> 00:16:57,320

386
00:16:57,320 --> 00:17:00,670
So nou laat my voort te gaan en
sê cat.jpg binnekant van die liggaam

387
00:17:00,670 --> 00:17:02,830
waar ek wil hê dit moet wees
vertoon en herlaai.

388
00:17:02,830 --> 00:17:04,560
Natuurlik, dit is nie korrek nie.

389
00:17:04,560 --> 00:17:08,050
>> So ek moet die leser 'n bietjie te vertel
meer doelbewus wat ek wil om dit te doen.

390
00:17:08,050 --> 00:17:10,210
Eenvoudig te tik die naam is
natuurlik nie voldoende nie.

391
00:17:10,210 --> 00:17:15,134
So onthou dat daar 'n ander
tag, beeld, img vir kort.

392
00:17:15,134 --> 00:17:17,550
Dit is net omdat die mens
hou nie van die tipe vol woorde.

393
00:17:17,550 --> 00:17:19,050
En dan kan ons bron doen = "cat.jpg".

394
00:17:19,050 --> 00:17:21,470

395
00:17:21,470 --> 00:17:23,550
>> En nou is ek gaan doen
een ding anders hier.

396
00:17:23,550 --> 00:17:25,390
Selfs al is al
ons etikette dusver het

397
00:17:25,390 --> 00:17:28,086
het hierdie idee van 'n
begin tag en 'n einde tag,

398
00:17:28,086 --> 00:17:30,210
wat nie regtig nie
sin vir 'n beeld, reg?

399
00:17:30,210 --> 00:17:32,430
'N beeld is daar of nie daar nie.

400
00:17:32,430 --> 00:17:36,650
En so het die mens het gekom
met 'n eenvoudiger konvensie.

401
00:17:36,650 --> 00:17:40,310
Wanneer jy 'n etiket wat kan beide
begin en eindig op dieselfde time--

402
00:17:40,310 --> 00:17:43,790
dit leeg kan wees, so net speak--
sit slash binnekant van die etiket

403
00:17:43,790 --> 00:17:44,710
aan die einde.

404
00:17:44,710 --> 00:17:45,776

405
00:17:45,776 --> 00:17:47,150
Laat my terug te gaan na my leser nou.

406
00:17:47,150 --> 00:17:50,377
Getref herlaai Damn, iets is verkeerd.

407
00:17:50,377 --> 00:17:52,460
Jy het waarskynlik gesien dat hierdie
soms op die web,

408
00:17:52,460 --> 00:17:53,600
selfs al is dit nie jou skuld nie.

409
00:17:53,600 --> 00:17:54,766
Dit is die web-bediener se skuld nie.

410
00:17:54,766 --> 00:17:56,240
Wat odes hierdie blyk aan te dui?

411
00:17:56,240 --> 00:17:57,450

412
00:17:57,450 --> 00:17:58,009
Dit is gebreek.

413
00:17:58,009 --> 00:17:59,300
Dit is waar die beeld behoort.

414
00:17:59,300 --> 00:17:59,700
Ja?

415
00:17:59,700 --> 00:18:01,560
>> Publiek: Maar dit maak nie
het toegang tot die beeld.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J MALAN: Dit maak nie
het toegang tot die beeld.

417
00:18:03,070 --> 00:18:05,230
Dit is, of nog erger, miskien
dit nie eens bestaan ​​nie.

418
00:18:05,230 --> 00:18:06,729
Kom ons kyk of ons nie kan diagnoseer nie.

419
00:18:06,729 --> 00:18:09,390
Onthou van verlede tyd dat indien
in Chrome, in die toestel,

420
00:18:09,390 --> 00:18:11,870
of selfs op jou Mac of PC,
jy gaan na die ontwikkelaar spyskaart

421
00:18:11,870 --> 00:18:14,650
en gaan na die ontwikkelaar gereedskap
opsie, wat jy waarskynlik het

422
00:18:14,650 --> 00:18:16,850
nie veel of ooit gebruik het.

423
00:18:16,850 --> 00:18:20,780
En as ek gaan om te netwerk
en herlaai die bladsy,

424
00:18:20,780 --> 00:18:24,110
laat ons eintlik kyk na die HTTP
versoeke wat gemaak word.

425
00:18:24,110 --> 00:18:28,400
>> Dit lyk soos hello.html is
inderdaad OK, vandaar die 200.

426
00:18:28,400 --> 00:18:30,630
Maar cat.jpg is 'n 403.

427
00:18:30,630 --> 00:18:31,650
So dit is nie 'n 404.

428
00:18:31,650 --> 00:18:33,490
Lêer bestaan ​​waarskynlik.

429
00:18:33,490 --> 00:18:35,250
403 beteken verbode.

430
00:18:35,250 --> 00:18:37,790
So, dit is 'n bietjie verwarrend.

431
00:18:37,790 --> 00:18:42,340
Ek gaan om terug te gaan
na my terminale venster.

432
00:18:42,340 --> 00:18:43,700
Laat my zoom in hier.

433
00:18:43,700 --> 00:18:44,750
En laat my doen 'n LS.

434
00:18:44,750 --> 00:18:46,430
Daar is diegene wat dieselfde lêers.

435
00:18:46,430 --> 00:18:49,410
>> Laat my dit doen 'n LS-l nou,
wat jy het waarskynlik

436
00:18:49,410 --> 00:18:53,350
gebruik voor te kyk na lêer
groottes miskien of tyd tempel.

437
00:18:53,350 --> 00:18:55,590
En ons sien 'n hele klomp van die
oorweldigende inligting.

438
00:18:55,590 --> 00:18:57,040
Maar let op 'n paar besonderhede.

439
00:18:57,040 --> 00:19:01,660
Hier is hello.html in hierdie
ry hier en hier is cat.jpg.

440
00:19:01,660 --> 00:19:02,934

441
00:19:02,934 --> 00:19:05,850
En dit is net die toestel om
use deur te wys JPEG

442
00:19:05,850 --> 00:19:07,380
in pers soos hierdie.

443
00:19:07,380 --> 00:19:11,470
Maar wat anders is anders langs
die grootte van die lêer en die lêer naam?

444
00:19:11,470 --> 00:19:13,438

445
00:19:13,438 --> 00:19:14,754
>> Publiek: [onhoorbaar].

446
00:19:14,754 --> 00:19:16,920
DAVID J MALAN: Ja, daar is
twee R se hier.

447
00:19:16,920 --> 00:19:20,170
Let op wat hello.html het aan die gang.

448
00:19:20,170 --> 00:19:24,050
So dit blyk dat die naam van
hierdie gids publiek is belangrik.

449
00:19:24,050 --> 00:19:26,400
Enigiets in hierdie gids
is bedoel om die publiek te wees.

450
00:19:26,400 --> 00:19:28,790
Maar dit is nie voldoende
net lêers te laai in daar.

451
00:19:28,790 --> 00:19:31,480
Jy moet ook verander
die modus van die lêers,

452
00:19:31,480 --> 00:19:35,180
verander die regte van
die lêer om proaktief nie

453
00:19:35,180 --> 00:19:37,650
die verstek,
en dit is dat ek net kan lees

454
00:19:37,650 --> 00:19:39,220
en skryf dit, ek die eienaar.

455
00:19:39,220 --> 00:19:43,540
Ek wil die hele wêreld om almal te
in staat wees om my lêer te lees, om so te praat.

456
00:19:43,540 --> 00:19:44,950
Lees net beteken dit sien.

457
00:19:44,950 --> 00:19:49,780
>> En inderdaad, soos jy sal sien in probleem
die sewe, dit is wat hierdie R se gemiddelde.

458
00:19:49,780 --> 00:19:53,160
Hierdie twee R se gemiddelde laat almal
anders in die wêreld ook lees dit,

459
00:19:53,160 --> 00:19:55,300
veral nou dat
dit is in hierdie gids.

460
00:19:55,300 --> 00:19:59,620
So die maklikste manier om dit op te los, is om
gaan na my spoedige en chmod vir verandering

461
00:19:59,620 --> 00:20:05,580
af en dan doen 'n + r, geheel en al,
almal, almal, plus r vir lees,

462
00:20:05,580 --> 00:20:07,944
en dan cat.jpg Enter.

463
00:20:07,944 --> 00:20:10,360
Dit lyk asof niks gebeur, wat
beteken gewoonlik 'n goeie ding.

464
00:20:10,360 --> 00:20:13,850
So LS-l again-- nou
Kom ons kyk na cat.jpg.

465
00:20:13,850 --> 00:20:15,750
En hierdie toestemming
lyk te verander.

466
00:20:15,750 --> 00:20:18,670
As 'n eenkant, as jy 'n
fout en jy, byvoorbeeld,

467
00:20:18,670 --> 00:20:23,210
net gemaak your-- Ek know-- nie opstel
toeganklik vir die publiek deur 'n ongeluk,

468
00:20:23,210 --> 00:20:25,480
jy kan die teenoorgestelde doen, chmod a-r.

469
00:20:25,480 --> 00:20:25,909

470
00:20:25,909 --> 00:20:28,200
Hoewel eerlik, moet dit nie
in die openbare gids

471
00:20:28,200 --> 00:20:29,760
in elk geval as dit is die bron van kommer.

472
00:20:29,760 --> 00:20:32,475
>> So nou, laat ons gaan terug na
my leser en herlaai.

473
00:20:32,475 --> 00:20:32,904

474
00:20:32,904 --> 00:20:34,820
En ek gaan om te klik
die klein Ghostbusters

475
00:20:34,820 --> 00:20:38,030
simbool wat deel van die skoon te maak
skerm sodat ons kan sien nuwe versoeke.

476
00:20:38,030 --> 00:20:40,630
En inderdaad, hier is
Grump Kat voor.

477
00:20:40,630 --> 00:20:43,010
Maar meer belangrik,
tegnies, is daar

478
00:20:43,010 --> 00:20:45,565
die aantal 200, wat
beteken ons het dit OK.

479
00:20:45,565 --> 00:20:47,190
Alle reg, so dit is alles goed en wel.

480
00:20:47,190 --> 00:20:48,940
Maar ons is nie die maak
die beste van webtuistes,

481
00:20:48,940 --> 00:20:51,967
of gaan ons te hard te probeer
maak die fanciest webtuistes vandag.

482
00:20:51,967 --> 00:20:54,550
Maar laat ons ten minste iets doen
super bekende voor huppelend

483
00:20:54,550 --> 00:20:56,030
af 'n paar ander tags.

484
00:20:56,030 --> 00:20:58,470
So dink ek wil net nie 'n kat hier.

485
00:20:58,470 --> 00:21:02,530
Dink ek wil eintlik hierdie
kat te skakel na iets.

486
00:21:02,530 --> 00:21:07,210
>> Ek kan, byvoorbeeld
doen iets soos hierdie.

487
00:21:07,210 --> 00:21:08,580

488
00:21:08,580 --> 00:21:12,890
'n anker vir href vir
Hyper verwysing equals--

489
00:21:12,890 --> 00:21:17,440
en laat ons net iets doen
soos www.google.com naby

490
00:21:17,440 --> 00:21:19,540
haal naby bracket.

491
00:21:19,540 --> 00:21:22,000
En nou soek vir katte.

492
00:21:22,000 --> 00:21:23,520
Close anker tag.

493
00:21:23,520 --> 00:21:26,760
So dit het net een soort
van fundamentele nuwe detail.

494
00:21:26,760 --> 00:21:28,190
Die etiket van die kursus, is anders.

495
00:21:28,190 --> 00:21:31,770
Dit is die naam van 'n for anker
href of hiper verwysing.

496
00:21:31,770 --> 00:21:35,269
>> Maar meer belangrik is, is daar
hierdie sintaktiese funksie hier.

497
00:21:35,269 --> 00:21:37,810
Dit is wat ons sal begin roep
nie 'n etiket nie, maar 'n kenmerk.

498
00:21:37,810 --> 00:21:40,830
En 'n kenmerk is iets wat
verander die gedrag van 'n tag.

499
00:21:40,830 --> 00:21:45,400
En dit kenmerk, href, middel
die gedrag van hierdie anker verander

500
00:21:45,400 --> 00:21:48,430
sodat wanneer dit gekliek word,
dit gaan na hierdie URL hier.

501
00:21:48,430 --> 00:21:50,330
En natuurlik, dat URL is Google.

502
00:21:50,330 --> 00:21:53,951
>> Intussen, wat is dit
teks hier gaan wees?

503
00:21:53,951 --> 00:21:55,950
Wel, dit gaan wees
wat die menslike eintlik

504
00:21:55,950 --> 00:21:58,470
sien as die onderstreepte
skakel, so eenvoudig soos dit.

505
00:21:58,470 --> 00:21:59,220
So laat ons probeer om hierdie.

506
00:21:59,220 --> 00:21:59,980
Laat my dit red.

507
00:21:59,980 --> 00:22:01,650
Ek is nog steeds in hello.html.

508
00:22:01,650 --> 00:22:05,360
Maar in die weergawes aanlyn, sal jy sien
die werklike lêer name wat ons vooraf voorberei.

509
00:22:05,360 --> 00:22:06,805
Laat my voort te gaan en te herlaai.

510
00:22:06,805 --> 00:22:08,680
En nou is dit 'n baie
underwhelming bladsy steeds.

511
00:22:08,680 --> 00:22:10,910
Maar as ek hover oor there--
en dit is 'n bietjie klein,

512
00:22:10,910 --> 00:22:13,576
but-- jy kan sien in die onderste
linkerhoek van die skerm,

513
00:22:13,576 --> 00:22:15,242
dit is inderdaad gaan google.com.

514
00:22:15,242 --> 00:22:19,280
En as ek op dat dit sal
klits my manier om die werklike Google.

515
00:22:19,280 --> 00:22:22,610
>> Maar let hier 'n geleentheid vir
uitbuiting, net soos 'n eenkant.

516
00:22:22,610 --> 00:22:25,150
En ons sal terug te kom na die ander
kwessies van sekuriteit voor lank.

517
00:22:25,150 --> 00:22:29,290
Want daar is hierdie digotomie
tussen waar jy gaan en wat jy sê,

518
00:22:29,290 --> 00:22:34,722
jy kan iets doen, soos
this-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, en nou as ek herlaai
na besparing wat die bladsy,

520
00:22:37,134 --> 00:22:38,800
dit lyk asof ek gaan om te gaan na Google.

521
00:22:38,800 --> 00:22:40,966
Maar daar is geen rede waarom ek
het om te gaan na Google, reg?

522
00:22:40,966 --> 00:22:47,460
Ek kan eintlik gaan iets soos
badguy.com, herlaai die bladsy hier.

523
00:22:47,460 --> 00:22:49,750
En kennis, is dit nog steeds lyk soos Google.

524
00:22:49,750 --> 00:22:52,020
En net as ek skerp
genoeg om te hang in die lug hier

525
00:22:52,020 --> 00:22:54,770
sien ek dit nog gaan
gaan na 'n ander plek.

526
00:22:54,770 --> 00:22:57,400
>> So as jy ooit gekry
'n e-pos, veral

527
00:22:57,400 --> 00:22:59,610
een van Paypal, of
skynbaar uit Paypal

528
00:22:59,610 --> 00:23:01,830
jy vra om aan te meld
tot jou rekening, hierdie

529
00:23:01,830 --> 00:23:06,380
Daarom moet jy nooit
ooit kliek skakels in e-pos,

530
00:23:06,380 --> 00:23:07,930
eerlik, enige skakels in e-pos.

531
00:23:07,930 --> 00:23:10,380
As jy weet jy het die werklike
geld in Paypal of Bank

532
00:23:10,380 --> 00:23:14,250
van Amerika of Fidelity of enige
webwerf, tik dit met die hand in.

533
00:23:14,250 --> 00:23:17,530
Omdat kyk hoe maklik dit is om te
mislei iemand in die aanbieding wat

534
00:23:17,530 --> 00:23:18,526
lyk soos 'n skakel.

535
00:23:18,526 --> 00:23:20,400
Maar dit kan eintlik
gaan absoluut oral.

536
00:23:20,400 --> 00:23:23,301
>> En daar is veel groter
dreigemente as dit.

537
00:23:23,301 --> 00:23:25,300
Trouens, dit is 'n bietjie
van 'n raaklyn nou nie, maar een

538
00:23:25,300 --> 00:23:28,430
van die beste wat ek nog ooit gesien het
wat sedertdien gesluit is,

539
00:23:28,430 --> 00:23:34,060
is iemand daartoe gelei dat mense
aan- so dit kan sê,

540
00:23:34,060 --> 00:23:37,660
Klik hier om aan te meld in jou
rekening, 'n bankrekening.

541
00:23:37,660 --> 00:23:40,985
En dit was Bank van die Weste.

542
00:23:40,985 --> 00:23:43,030

543
00:23:43,030 --> 00:23:44,250
>> So iemand het hierdie.

544
00:23:44,250 --> 00:23:47,090
En dit is 'n bietjie makliker om te sien
dit in 'n mono gespasieer font ingezoomd

545
00:23:47,090 --> 00:23:49,190
op 'n 30-voet projektor.

546
00:23:49,190 --> 00:23:51,720
Maar wanneer dit klein skrif in 'n
e-pos wat jy ontvang,

547
00:23:51,720 --> 00:23:54,690
dit lyk soos bankofthewest.com,
nie bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
wat iemand betaal $ 10 te koop.

549
00:23:58,230 --> 00:24:00,840
En dan is dit hulle gelei het na die
ekwivalent van 'n paar slegte webwerf.

550
00:24:00,840 --> 00:24:05,540
>> En jy sal sien too-- eintlik wat ons kan doen
this-- as ek gaan na die werklike webwerf,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, weer,
Onthou van verlede tyd

552
00:24:10,335 --> 00:24:13,210
dat as dit is hul webblad en
jy nuuskierig oor hoe dit werk,

553
00:24:13,210 --> 00:24:15,610
kan jy beslis gaan
Chrome se ontwikkelaar gereedskap.

554
00:24:15,610 --> 00:24:18,890
En jy kan sien al die
HTML mooi geformateer daar.

555
00:24:18,890 --> 00:24:20,890
>> Maar meer tot die punt,
jy cam-- laat sluit

556
00:24:20,890 --> 00:24:24,760
this-- jy kan gaan na View
Ontwikkelaar View Bron.

557
00:24:24,760 --> 00:24:25,770

558
00:24:25,770 --> 00:24:28,350
Hoekom het ek nie net kopieer
alles En dan het ek

559
00:24:28,350 --> 00:24:31,630
kan gaan in my klein gedit venster
hier en maak my eie webblad.

560
00:24:31,630 --> 00:24:33,210
Slaan dit in hello.html.

561
00:24:33,210 --> 00:24:36,770
En waarskynlik dit gaan om te breek,
want dit is nie so maklik nie gewoonlik.

562
00:24:36,770 --> 00:24:41,590
Maar nou as ek herlaai my eie bladsy op
my eie CS50 toestel en druk herlaai,

563
00:24:41,590 --> 00:24:42,990
OK, 'n paar dinge gebreek.

564
00:24:42,990 --> 00:24:45,750
Maar ek is redelik naby aan wat
my eie bank webwerf, reg?

565
00:24:45,750 --> 00:24:46,570
Al hierdie HTML--

566
00:24:46,570 --> 00:24:47,370
>> [Gelag]

567
00:24:47,370 --> 00:24:49,210
>> DAVID J Malan --I
nie actually-- en jy

568
00:24:49,210 --> 00:24:52,210
weet daar is iemand daar buite wat
sou eintlik kliek hierdie skakels ook.

569
00:24:52,210 --> 00:24:54,864
So duidelik, 'n paar dinge gebreek.

570
00:24:54,864 --> 00:24:56,780
Maar wat gaan lei
ons in 'n bespreking,

571
00:24:56,780 --> 00:25:00,810
onnodig nou, soos wat
CSS, Cascading Style Sheets, is,

572
00:25:00,810 --> 00:25:03,410
en hoe jy eintlik
laai die ander HTML-lêers

573
00:25:03,410 --> 00:25:06,140
en JPEG-lêers GIF lêers wat
die webwerf kan gebruik.

574
00:25:06,140 --> 00:25:07,960
Maar dit alles is accomplishable.

575
00:25:07,960 --> 00:25:11,110
Maar dit is werklik kom neer op
hierdie baie eenvoudige heuristiek.

576
00:25:11,110 --> 00:25:14,450
>> So nou laat ons net vlugtig deur 'n
paar ander voorbeelde van HTML

577
00:25:14,450 --> 00:25:16,680
net om te gee jou 'n gevoel
van wat anders wat jy kan doen.

578
00:25:16,680 --> 00:25:18,670
Byvoorbeeld, dit is list.html.

579
00:25:18,670 --> 00:25:23,240
Dink ek wou 'n webblad te maak
met 'n lys van huise in die quad.

580
00:25:23,240 --> 00:25:28,960
Ek kan die ul tag gebruik vir geordende
lys en dan die lys item kind

581
00:25:28,960 --> 00:25:33,760
en dan Itereer over-- of lys
rather-- die huise in die vraag.

582
00:25:33,760 --> 00:25:36,080
>> En as ek oop om dit op, laat ons dit doen.

583
00:25:36,080 --> 00:25:40,670
Kom ons gaan nie te hello.html,
maar list.html.

584
00:25:40,670 --> 00:25:42,160
Damn dit.

585
00:25:42,160 --> 00:25:43,000
Hoe kan ek dit regmaak?

586
00:25:43,000 --> 00:25:45,679

587
00:25:45,679 --> 00:25:47,220
Dit is dieselfde probleem as voorheen, reg?

588
00:25:47,220 --> 00:25:52,510
So laat my doen chmod-- oops--
chmod 'n + r van list.html.

589
00:25:52,510 --> 00:25:54,610

590
00:25:54,610 --> 00:25:59,610
En nou as ek gaan terug na my leser
en klik Reload, daar is dit.

591
00:25:59,610 --> 00:26:02,360
So as jy ooit wou te maak
'n opsomming lys, kan jy dit doen.

592
00:26:02,360 --> 00:26:06,210
As jy wil wees super fancy en maak
'n geordende lys, nie 'n geordende lys

593
00:26:06,210 --> 00:26:10,170
verander diegene te ol, herlaai die bladsy, en
Nou is die leser sal dit tel vir jou.

594
00:26:10,170 --> 00:26:11,241
>> Wat anders kan ons doen?

595
00:26:11,241 --> 00:26:13,990
Wel, 'n paar van die others-- indien
jy het 'n lang paragrawe van text--

596
00:26:13,990 --> 00:26:15,698
byvoorbeeld, 'n paar
Latynse teks soos this--

597
00:26:15,698 --> 00:26:20,730
en jy wil dit in aparte paragrawe,
oop p, naby p vir die paragraaf tag.

598
00:26:20,730 --> 00:26:22,010
En doen dit weer en weer.

599
00:26:22,010 --> 00:26:26,600
En as ek nou oopmaak hierdie lêer,
paragraphs.html, wel, hierdie

600
00:26:26,600 --> 00:26:27,570
is om irriterende.

601
00:26:27,570 --> 00:26:34,320
So laat ons nou net terug te gaan na my
vinnige, chmod 'n + R r ster .html--

602
00:26:34,320 --> 00:26:36,099
'n mooi klein wild card om so te praat.

603
00:26:36,099 --> 00:26:37,890
Dit moet al los
hierdie probleme vir my.

604
00:26:37,890 --> 00:26:38,990
Kom ons laai.

605
00:26:38,990 --> 00:26:40,500
Daar is drie paragrawe.

606
00:26:40,500 --> 00:26:42,930
>> En nou, laat ons gaan voort
en maak 'n ander.

607
00:26:42,930 --> 00:26:44,310
Hoe gaan tafel?

608
00:26:44,310 --> 00:26:46,440
Jy tafel lyk sien
'n bietjie meer kompleks.

609
00:26:46,440 --> 00:26:49,110
Maar dit is dieselfde idea--
oop tag, oop tag,

610
00:26:49,110 --> 00:26:51,360
oop, oop, oop, naby tag, oop tag.

611
00:26:51,360 --> 00:26:54,410
En dit gebeur te staan ​​vir
tafel, wie se grens is glo

612
00:26:54,410 --> 00:26:58,500
gaan 'n dik te wees 1-- wat
dat means-- ry in die tabel, tafel

613
00:26:58,500 --> 00:27:00,320
data, wat beteken 'n sel.

614
00:27:00,320 --> 00:27:03,840
En as ek gaan terug na my leser
hier en gaan na table.html,

615
00:27:03,840 --> 00:27:05,840
jy iets kan sien
soos hierdie, afskuwelike.

616
00:27:05,840 --> 00:27:07,840
Maar ons sal kry om die punt
waar ons kan eintlik

617
00:27:07,840 --> 00:27:09,260
dinge mooier as dit.

618
00:27:09,260 --> 00:27:10,530
>> So laat my neerlê vir nou.

619
00:27:10,530 --> 00:27:11,870
Daar is trosse van meer etikette.

620
00:27:11,870 --> 00:27:15,225
En HTML is wonderlik om te haal
want eerlik, al wat jy hoef te doen,

621
00:27:15,225 --> 00:27:17,600
word gekyk na bestaande webblaaie
waarmee jy vertroud is.

622
00:27:17,600 --> 00:27:20,340
En jy wil, o, dit is hoe
hulle het dit esteties.

623
00:27:20,340 --> 00:27:23,159
>> Of jy kan kyk op enige aanlyn
hulpbron hoe HTML werk,

624
00:27:23,159 --> 00:27:25,700
en jy sal sien dat daar 'n
hele woordeskat van ander etikette.

625
00:27:25,700 --> 00:27:30,110
Maar met die eenvoudige geestelike model
alleen wat byna enige etiket wat jy maak

626
00:27:30,110 --> 00:27:33,620
het gesluit word, is dit regtig
nie voldoende om jouself te leer

627
00:27:33,620 --> 00:27:36,950
HTML na verstaan
hierdie basiese idees van etikette

628
00:27:36,950 --> 00:27:40,520
en eienskappe en die goed welgevormdheid
dat ons het gepraat oor,

629
00:27:40,520 --> 00:27:44,697
sluiting enigiets wat ons kan oopmaak
sodat ons nie verwar nie 'n leser.

630
00:27:44,697 --> 00:27:46,780
So laat ons nou om dit te
'n meer interessante vlak

631
00:27:46,780 --> 00:27:48,100
deur te gaan na die werklike.

632
00:27:48,100 --> 00:27:51,095
En laat ons gaan na my Mac
hier, te google.com.

633
00:27:51,095 --> 00:27:52,280

634
00:27:52,280 --> 00:27:54,020
En nou notice-- laat doen.

635
00:27:54,020 --> 00:27:57,280
Ek is gong te gaan
Instellings, Soek instellings.

636
00:27:57,280 --> 00:28:01,070
Ek wil om te draai af die irriterende direkte
resultate ding waar dit onmiddellik

637
00:28:01,070 --> 00:28:02,450
begin reageer op jou tik.

638
00:28:02,450 --> 00:28:05,300
Kom ons doen dit ouer skool so
ons eintlik sien wat aangaan.

639
00:28:05,300 --> 00:28:08,260
>> So ek gaan red my
Google instellings hier.

640
00:28:08,260 --> 00:28:11,160
En nou notice-- ek gaan
soek vir iets soos katte.

641
00:28:11,160 --> 00:28:14,500
En dit is nog steeds besig motor
volledige hier nie, maar op grond van dinge

642
00:28:14,500 --> 00:28:15,970
mense het in die afgelope getik.

643
00:28:15,970 --> 00:28:17,490
Maar let op wat gaan gebeur.

644
00:28:17,490 --> 00:28:20,272
>> In die URL op die oomblik
is dit net google.com.

645
00:28:20,272 --> 00:28:22,650
En tegnies, dit is streep.

646
00:28:22,650 --> 00:28:25,910
Google is net spaar 'n karakter
en nie vir ons te wys dat.

647
00:28:25,910 --> 00:28:30,400
Hulle wys ons https, net
wees super bemoedigend dat ons

648
00:28:30,400 --> 00:28:32,850
op 'n veilige of geïnkripteer bladsy.

649
00:28:32,850 --> 00:28:35,690
>> So laat my gaan voort en soek vir katte.

650
00:28:35,690 --> 00:28:37,670
En dit het regtig
oorweldigende vinnig.

651
00:28:37,670 --> 00:28:39,470
Kyk na die lengte van die URL.

652
00:28:39,470 --> 00:28:43,070
Maar dit blyk dat die meeste van hierdie dinge
in die URL is eintlik redelik nutteloos.

653
00:28:43,070 --> 00:28:45,320
Ek gaan om te begin die verwydering van
dinge wat ek nie verstaan ​​nie.

654
00:28:45,320 --> 00:28:46,560

655
00:28:46,560 --> 00:28:47,360
Ek sien katte.

656
00:28:47,360 --> 00:28:48,470
Ek verstaan ​​katte.

657
00:28:48,470 --> 00:28:50,380
Ek weet nie hoekom katte is daar weer.

658
00:28:50,380 --> 00:28:52,620
Ek weet nie regtig
wat hierdie nonsens is.

659
00:28:52,620 --> 00:28:56,030
So ek gaan net te hou
beklemtoon en die verwydering van dinge

660
00:28:56,030 --> 00:28:59,905
dat ek nie verstaan ​​nie,
distilleerwyn die URL in net hierdie.

661
00:28:59,905 --> 00:29:00,920

662
00:29:00,920 --> 00:29:02,270
>> Nou kan ek weer raak tik.

663
00:29:02,270 --> 00:29:03,814
Dit lyk soos Google nog steeds werk.

664
00:29:03,814 --> 00:29:06,980
So vir een of ander rede, is dit die byvoeging van 'n
baie goed na hul URL's by verstek.

665
00:29:06,980 --> 00:29:09,000
Maar dit is nie streng nodig.

666
00:29:09,000 --> 00:29:10,340
So, wat is lekker oor hierdie?

667
00:29:10,340 --> 00:29:13,630
Wel, laat ek gaan voort en
oop Chrome se inspekteur.

668
00:29:13,630 --> 00:29:15,960
Daar is 'n klein muis kortpad vir dit.

669
00:29:15,960 --> 00:29:17,360
>> Gaan na die blad Network.

670
00:29:17,360 --> 00:29:19,340
En nou, laat my herlaai
hierdie bladsy weer.

671
00:29:19,340 --> 00:29:20,280
En ek hou van die Shift.

672
00:29:20,280 --> 00:29:22,520
As 'n eenkant, implementeer
geneig om te kas of red

673
00:29:22,520 --> 00:29:24,697
inligting net ter wille van doeltreffendheid's.

674
00:29:24,697 --> 00:29:27,280
Maar gewoonlik, hou die Shift en
herlaai sal alles dwing

675
00:29:27,280 --> 00:29:28,994
om oor te begin van die begin af.

676
00:29:28,994 --> 00:29:30,410
En dit is wat ek wil hê om hier te doen.

677
00:29:30,410 --> 00:29:33,550
>> En kennis van al hierdie
rye wat pas verskyn.

678
00:29:33,550 --> 00:29:37,920
Dit blyk dat in enige gegewe web
bladsy, kan daar net een lêer

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- of daar
mag wees 52, soos in hierdie geval.

680
00:29:43,500 --> 00:29:45,820
Toe ek na google.com,
glo, my leser

681
00:29:45,820 --> 00:29:49,650
skop af 52 afsonderlike HTTP versoeke.

682
00:29:49,650 --> 00:29:50,520
Hoekom is dit?

683
00:29:50,520 --> 00:29:53,380
>> Wel, kyk na wat binne
van hierdie webblad tot bo.

684
00:29:53,380 --> 00:29:55,620
Daar is nie net die teks,
maar daar is werklike beelde

685
00:29:55,620 --> 00:29:57,130
katte oor aan die regterkant.

686
00:29:57,130 --> 00:29:59,110
Daar is 'n kleurvolle logo hier aan die linkerkant.

687
00:29:59,110 --> 00:30:01,750
Daar is al hierdie ikone
vir 'n mikrofoon en so meer.

688
00:30:01,750 --> 00:30:05,130
Daar is 'n baie van die stukke, die bou
blokke, kras stukke, as jy wil,

689
00:30:05,130 --> 00:30:06,250
hierdie webblad.

690
00:30:06,250 --> 00:30:10,310
En wat die leser doen op
om die heel eerste lêer, wat

691
00:30:10,310 --> 00:30:16,180
is hierdie ry hier, dit is in wese
iterating oor die HTML top

692
00:30:16,180 --> 00:30:19,880
na onder, links na regs, op soek na
dinge soos die beeld tags of ander etikette

693
00:30:19,880 --> 00:30:23,160
wat noem ander lêers en
wanneer dit hulle sien, gaan en haal hulle

694
00:30:23,160 --> 00:30:26,050
via HTTP, lewensvatbare hele
koevert metafoor,

695
00:30:26,050 --> 00:30:29,670
en dan laat hulle in die
toepaslike plek in die webblad.

696
00:30:29,670 --> 00:30:33,370
>> Maar let hier as ek fokus op
die eerste gooi, soek katte,

697
00:30:33,370 --> 00:30:37,090
sien dat, wel dit is met behulp van HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
En ongelukkig, Google
Chrome nou in weergawe 39

699
00:30:41,690 --> 00:30:45,110
is 'n soort van dumbing dinge af en
nie wys ons die werklike kop.

700
00:30:45,110 --> 00:30:49,680
Maar wat is inderdaad gestuur is om 'n versoek
vir nie streep, maar / search? q = katte.

701
00:30:49,680 --> 00:30:52,830

702
00:30:52,830 --> 00:30:54,340
>> Nou, hoekom is dit belangrik?

703
00:30:54,340 --> 00:30:57,110
Wel, ek gaan om af te lei
Van hierdie dat as jy Google

704
00:30:57,110 --> 00:31:01,520
ondersteun navrae van hierdie vorm, hoekom
nie ek implementeer my eie soektog

705
00:31:01,520 --> 00:31:06,420
enjin vir CS50, maar net die voorkant
einde nie, net die grafiese gebruikerskoppelvlak.

706
00:31:06,420 --> 00:31:09,610
En ons sal die agterkant uitkontrakteer,
die werklike resultate te Google.

707
00:31:09,610 --> 00:31:10,510
>> So, hoe kan ek dit doen?

708
00:31:10,510 --> 00:31:13,820
Wel, laat ek gaan in gedit hier.

709
00:31:13,820 --> 00:31:19,180
En laat my gaan voort en oop
op, laat ons sê, 'n nuwe lêer.

710
00:31:19,180 --> 00:31:22,280
En ek gaan om dit te red
tydelik as soek-0.html.

711
00:31:22,280 --> 00:31:25,111

712
00:31:25,111 --> 00:31:27,860
En dan uiteindelik, sal ons vinnig
uit na die een wat ek vooraf voorberei.

713
00:31:27,860 --> 00:31:30,190
>> En ek gaan
vinnig sweep doc tipe

714
00:31:30,190 --> 00:31:33,840
html oop bracket html
naby bracket html.

715
00:31:33,840 --> 00:31:38,390
Toe ek gaan kop te doen
naby kop oop titel CS50

716
00:31:38,390 --> 00:31:40,150
Soek in plaas van Google soek.

717
00:31:40,150 --> 00:31:43,480
Hier gaan ek het
die liggaam, hier naby liggaam.

718
00:31:43,480 --> 00:31:45,835
En nou, ek moet CS50 Search.

719
00:31:45,835 --> 00:31:47,710
En eintlik, laat ons
bou hierdie geleidelik.

720
00:31:47,710 --> 00:31:51,043
Ek gaan om voort te gaan en maak dit en
eintlik sit dit in my openbare gids.

721
00:31:51,043 --> 00:31:52,730
So gee my net 'n oomblik.

722
00:31:52,730 --> 00:31:55,390
soek-0.html-- ek gaan
tydelik noem dit search.html.

723
00:31:55,390 --> 00:31:56,600

724
00:31:56,600 --> 00:31:59,750
Ek gaan om dit te chmod 'n + r search.html.

725
00:31:59,750 --> 00:32:01,072

726
00:32:01,072 --> 00:32:02,280
En nou gaan ek dit oop te maak.

727
00:32:02,280 --> 00:32:03,224

728
00:32:03,224 --> 00:32:04,390
Alle reg, sodat dit was vinnig.

729
00:32:04,390 --> 00:32:06,800
Maar die doel was eenvoudig
om ons te kry tot op die punt

730
00:32:06,800 --> 00:32:09,630
van 'hierdie teks
lêer genaamd search.html.

731
00:32:09,630 --> 00:32:10,940

732
00:32:10,940 --> 00:32:12,790
So nie veel om na te kyk nie.

733
00:32:12,790 --> 00:32:16,970
Trouens, as ek gaan na my leser, en
gaan na search.html, dit is al wat dit is.

734
00:32:16,970 --> 00:32:17,720
Maar jy weet wat?

735
00:32:17,720 --> 00:32:19,000
Ek kan 'n bietjie liefhebber.

736
00:32:19,000 --> 00:32:22,710
Ek lees in 'n boek wat daar is
'n opskrif tag genoem H1.

737
00:32:22,710 --> 00:32:26,100
En ek gaan om voort te gaan en
gebruik wat oop H1 en naby H1.

738
00:32:26,100 --> 00:32:27,220
Herlaai die bladsy.

739
00:32:27,220 --> 00:32:29,600
En nou is dit groter en vetter,
nie al wat interessant is,

740
00:32:29,600 --> 00:32:32,399
maar ten minste is dit struktureel
meer interessant.

741
00:32:32,399 --> 00:32:33,940
Maar nou laat ek 'n ander etiket.

742
00:32:33,940 --> 00:32:36,500
Dit blyk daar is 'n vorm tag.

743
00:32:36,500 --> 00:32:38,400
En laat my naby dat tag.

744
00:32:38,400 --> 00:32:40,830
En dit blyk daar is
insette tag wat

745
00:32:40,830 --> 00:32:44,600
het 'n kenmerk genaamd tipe, wat
is die data tipe van die veld,

746
00:32:44,600 --> 00:32:45,200
as jy wil.

747
00:32:45,200 --> 00:32:47,050
En gaan wees van die tipe teks.

748
00:32:47,050 --> 00:32:52,200
En die waarde daarvan gaan
wees CS50 Search.

749
00:32:52,200 --> 00:32:53,850
Close tag.

750
00:32:53,850 --> 00:32:57,100
En daar gaan geen idee van te wees
opening en sluiting met aparte tags.

751
00:32:57,100 --> 00:33:00,300
>> Laat my terug te gaan oor hier en
sien wat gaan aan, herlaai.

752
00:33:00,300 --> 00:33:01,380
Kry interessant.

753
00:33:01,380 --> 00:33:02,950
Dit lyk soos dit is 'n teks veld.

754
00:33:02,950 --> 00:33:04,080

755
00:33:04,080 --> 00:33:06,999
En eintlik, ek wou nie
'n waarde daar te vestig nie.

756
00:33:06,999 --> 00:33:10,040
Laat my terug te gaan hier en eintlik kry
ontslae te raak van hierdie waarde om dit eenvoudig te hou.

757
00:33:10,040 --> 00:33:12,939
In plaas van 'n waarde, wat ek wou
hierdie saak te gee was 'n naam.

758
00:33:12,939 --> 00:33:15,230
En ek weet nie wat dit is,
so ek sal terug kom.

759
00:33:15,230 --> 00:33:18,270
>> Maar onder dit, ek wil
insette tipe te doen = voorlê.

760
00:33:18,270 --> 00:33:19,840

761
00:33:19,840 --> 00:33:22,120
En hierdie waarde sal wees CS50 Search.

762
00:33:22,120 --> 00:33:24,850
En ons sal sien hoekom ek
verskuif die waarde van hierdie.

763
00:33:24,850 --> 00:33:28,900
Toe ek herlaai, dit lyk asof ek nou
die begin van my eie soeke

764
00:33:28,900 --> 00:33:30,820
enjin, super afskuwelike,
hoewel eerlik, dit is

765
00:33:30,820 --> 00:33:34,260
nie 'n ver gooi uit wat
Standaard bladsy Google se lyk.

766
00:33:34,260 --> 00:33:37,950
>> As ek gaan nou hier is, kan ek tik in
katte en hopelik kliek Soek.

767
00:33:37,950 --> 00:33:40,380
Maar ek is nie heeltemal klaar nie,
want ek het nie geïmplementeer nie,

768
00:33:40,380 --> 00:33:41,045
natuurlik, 'n databasis.

769
00:33:41,045 --> 00:33:42,940
Ek het nie gekruip die
web vir die resultate.

770
00:33:42,940 --> 00:33:44,840
So ek nodig het dat uit te kontrakteer aan Google.

771
00:33:44,840 --> 00:33:46,290
So, hoe doen ek dit?

772
00:33:46,290 --> 00:33:49,170
>> Wel, die eerste van alles wat ek
nodig om by te voeg en aksie

773
00:33:49,170 --> 00:33:58,460
skryf aan my vorm tag wat
is http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
En ek weet dat slegs uit met
afgelei deur te kyk nou

775
00:34:01,180 --> 00:34:02,505
op hul URL's.

776
00:34:02,505 --> 00:34:03,380
En nou 'n raaiskoot.

777
00:34:03,380 --> 00:34:09,090
Wat moet hierdie teks veld waarskynlik
genoem word, wat gebaseer is op waar ons vandaan kom

778
00:34:09,090 --> 00:34:09,754
voor?

779
00:34:09,754 --> 00:34:11,896

780
00:34:11,896 --> 00:34:13,290
>> GEHOOR: q.

781
00:34:13,290 --> 00:34:14,370
>> DAVID J Malan? Q.

782
00:34:14,370 --> 00:34:17,800
En ons nie eintlik vraag moet
merk dit blyk, maar Q is dit inderdaad,

783
00:34:17,800 --> 00:34:20,489
Q vir navraag waarskynlik deur
standaard, net omdat dit is

784
00:34:20,489 --> 00:34:23,060
wat Larry en Sergey
vorendag gekom met 'n jaar gelede.

785
00:34:23,060 --> 00:34:24,739
So nou laat my herlaai die bladsy.

786
00:34:24,739 --> 00:34:26,409
Dit lyk nie al wat verskil.

787
00:34:26,409 --> 00:34:28,120
Maar nou kyk wat gebeur.

788
00:34:28,120 --> 00:34:32,360
>> As ek tik in katte en kliek
CS50 Soek en laat gaan,

789
00:34:32,360 --> 00:34:35,770
sien ek raak geklits
weg met die werklike Google.

790
00:34:35,770 --> 00:34:38,150
Nou, is Google 'n bietjie
irriterende in dat hulle

791
00:34:38,150 --> 00:34:41,877
aanbring 'n addisionele parameter,
as jy wil, met die URL.

792
00:34:41,877 --> 00:34:43,960
Dit is al wat gebeur
outomaties op Google kant.

793
00:34:43,960 --> 00:34:48,730
>> Die belangrike deel is dat dit lyk asof ek
het hierdie versoek gegenereer hier.

794
00:34:48,730 --> 00:34:50,179
En inderdaad, dit is wat gebeur.

795
00:34:50,179 --> 00:34:53,040
Wanneer jy HTML wat
lyk soos hierdie, hierdie

796
00:34:53,040 --> 00:34:57,620
is 'n soort van die web ontwikkelaars notasie
om te sê, gaan voort en die skep van 'n vorm

797
00:34:57,620 --> 00:34:59,990
dat wanneer dit ingedien is,
dit gaan om te gaan na hierdie skakel.

798
00:34:59,990 --> 00:35:03,430
En toe die URL verskaf
waardes vir dinge soos q,

799
00:35:03,430 --> 00:35:05,440
gaan nie net om die URL.

800
00:35:05,440 --> 00:35:08,210
Eintlik, gaan na vraag
merk en dan q = katte.

801
00:35:08,210 --> 00:35:09,590

802
00:35:09,590 --> 00:35:13,060
Voeg die parameter, die
HTTP parameter soos dit.

803
00:35:13,060 --> 00:35:15,590
>> En net om te wees super akkurate,
wat daar afgelei here--

804
00:35:15,590 --> 00:35:18,130
maar ek sal meer explicit-- is
dat die metode wat ek wil gebruik

805
00:35:18,130 --> 00:35:22,270
is jy, in plaas van iets soos
pos, wat ons sal uiteindelik sien.

806
00:35:22,270 --> 00:35:27,710
So in kort, eenvoudig deur die begrip
HTML en met behulp van 'n paar redelik eenvoudige etikette,

807
00:35:27,710 --> 00:35:30,610
Ons kan nou begin om te skep
ons eie voor eindgebruiker

808
00:35:30,610 --> 00:35:32,850
koppelvlak met 'n soektog
enjin agter dit.

809
00:35:32,850 --> 00:35:34,800
>> Maar dit is natuurlik mooi afskuwelike.

810
00:35:34,800 --> 00:35:37,259
So laat my eintlik oop
'n effens beter weergawe.

811
00:35:37,259 --> 00:35:39,800
Dit is die een wat ek voorberei
bevorder wat 'n paar opmerkings.

812
00:35:39,800 --> 00:35:41,900
Maar jy sal wat ek sien
pretty much herskep dit.

813
00:35:41,900 --> 00:35:44,150
So, dit is online reeds beskikbaar.

814
00:35:44,150 --> 00:35:48,050
En ek het gebeur met preemptively
gaan na https net om dit eenvoudig te hou.

815
00:35:48,050 --> 00:35:50,610
>> En nou, laat ons maak 'n
volgende iterasie van hierdie.

816
00:35:50,610 --> 00:35:52,510
Is weergawe 1 in plaas van 0.

817
00:35:52,510 --> 00:35:55,315
Wat spring uit by jou as effens
anders in hierdie voorbeeld?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> Publiek: [onhoorbaar].

820
00:36:00,440 --> 00:36:03,020
>> Ja, daar is hierdie teks align sentrum.

821
00:36:03,020 --> 00:36:04,590
Dit is 'n bietjie vreemd hier.

822
00:36:04,590 --> 00:36:06,150
Maar dit is wel nuut.

823
00:36:06,150 --> 00:36:07,800
En dalk raai wat gaan gebeur.

824
00:36:07,800 --> 00:36:11,730
As ek na my leser nou
en besoek soek-1.html,

825
00:36:11,730 --> 00:36:13,090
dit is amper dieselfde ding.

826
00:36:13,090 --> 00:36:15,705
Maar dit is 'n stap nader aan
'n bietjie meer mooi.

827
00:36:15,705 --> 00:36:19,150
Dit is nog steeds lelik, maar mooier in daardie
ten minste alles is nou gesentreer.

828
00:36:19,150 --> 00:36:23,470
>> So dit blyk dat dit wat ek gebruik
is 'n ander taal heeltemal genoem

829
00:36:23,470 --> 00:36:25,680
CSS, Cascading Style Sheets.

830
00:36:25,680 --> 00:36:28,310
En CSS, eerlik, is 'n soort
van, in my persoonlike mening,

831
00:36:28,310 --> 00:36:29,775
'n afgrijselijk ontwerp taal.

832
00:36:29,775 --> 00:36:33,110
Dit is baie irriterende om te onthou
al die verskillende besonderhede.

833
00:36:33,110 --> 00:36:38,479
Maar dit is wat stylizes die
hele wêreldwye web vandag.

834
00:36:38,479 --> 00:36:39,270
Ek aanstoot iemand.

835
00:36:39,270 --> 00:36:39,769
Alle regte.

836
00:36:39,769 --> 00:36:43,180
So laat ons gaan terug hier en sien
hoe ons dit eintlik die gebruik van hierdie.

837
00:36:43,180 --> 00:36:45,940
En dit blyk, ten minste is dit
eintlik 'n redelik eenvoudige taal.

838
00:36:45,940 --> 00:36:49,470
Dis net die sleutel waarde pare, eienskappe
en waardes, eienskappe en waardes.

839
00:36:49,470 --> 00:36:52,080
Trouens, hier is een
sodanige eiendom en waarde.

840
00:36:52,080 --> 00:36:55,890
>> Bloot deur die gebruik van die styl
skryf op my liggaam tag

841
00:36:55,890 --> 00:37:00,360
en gee dit 'n waarde van 'n
woord kolon en ander woord,

842
00:37:00,360 --> 00:37:03,730
of 'n eiendom en 'n waarde,
Ek kan beïnvloed die estetika

843
00:37:03,730 --> 00:37:06,210
van die webblad, nie
noodwendig die struktuur nie,

844
00:37:06,210 --> 00:37:07,550
maar die estetika van dit.

845
00:37:07,550 --> 00:37:10,960
En net deur Googlen rond, besef ek
dat CSS, Cascading Style Sheets,

846
00:37:10,960 --> 00:37:14,170
ondersteun 'n eiendom genoem
teks-align, waarvan die waarde kan

847
00:37:14,170 --> 00:37:16,980
word links, regs, of sentrum, byvoorbeeld.

848
00:37:16,980 --> 00:37:19,990
>> So nou as ek herlaai
hierdie bladsy, wat ek gedoen het kry

849
00:37:19,990 --> 00:37:22,730
was 'n gesentreerde bladsy
maar nog steeds mooi lelik.

850
00:37:22,730 --> 00:37:25,770
Kom ons gaan voort en oop
up weergawe 2 van Search.

851
00:37:25,770 --> 00:37:28,570
En nou sien ek gedoen het 'n bietjie meer.

852
00:37:28,570 --> 00:37:33,760
Let daarop dat hier binnekant van die kop
tag, kan daar meer as titel.

853
00:37:33,760 --> 00:37:35,400
Trouens, daar is 'n styl tag.

854
00:37:35,400 --> 00:37:38,630
En dit is waar dit net kry 'n
bietjie slordig sien CSS soms.

855
00:37:38,630 --> 00:37:41,971
>> Let daarop dat dit lyk asof ek iets het
wat struktureel lyk baie anders.

856
00:37:41,971 --> 00:37:44,095
Maar hier is die naam van
die etiket Ek wil gestileer.

857
00:37:44,095 --> 00:37:47,570
Hier is ons ou vriende krullerige
draadjies en geslote krullerige stut.

858
00:37:47,570 --> 00:37:50,290
En dan is hier is dat
eiendom en die waarde daarvan.

859
00:37:50,290 --> 00:37:56,300
>> As ek laai hierdie lêer, search2.html,
die eindresultaat is identies.

860
00:37:56,300 --> 00:37:59,300
Maar dit is 'n stap in die rigting beter ontwerp.

861
00:37:59,300 --> 00:38:04,560
Deur factoring uit hierdie CSS, ek het
nie die institutionele dit met my HTML.

862
00:38:04,560 --> 00:38:07,560
En inderdaad, soos ons sal sien, ek kon
onthou hierdie eienskappe en waardes.

863
00:38:07,560 --> 00:38:10,420
As ek wou trosse te maak
dele van my webblad gesentreer,

864
00:38:10,420 --> 00:38:13,630
Ek het nie style = text-align te tik
sentrum oor die hele plek.

865
00:38:13,630 --> 00:38:16,580
Ek kan in een plek
miskien, hou by die top.

866
00:38:16,580 --> 00:38:18,210
>> Maar selfs dit is nie die beste ontwerp.

867
00:38:18,210 --> 00:38:21,720
Trouens, een van die dinge wat jy sal leer
as jy meer en meer tyd saam met spandeer

868
00:38:21,720 --> 00:38:25,730
web ontwikkeling is dat die meer wat jy kan
modularize dinge en faktor dinge uit

869
00:38:25,730 --> 00:38:30,610
soos .H lêers laat ons faktor dinge uit,
hou helpers.c laat ons faktor dinge uit

870
00:38:30,610 --> 00:38:31,880
'n paar psets gelede.

871
00:38:31,880 --> 00:38:34,200
Net so, kan ons
wil om dit te bereik.

872
00:38:34,200 --> 00:38:37,920
>> So kennis weergawe
drie van search.html Ek het

873
00:38:37,920 --> 00:38:40,610
skoongemaak die hoof van
die bladsy en net sit

874
00:38:40,610 --> 00:38:43,320
in hierdie, 'n skakel tag, wat
strydig met die naam,

875
00:38:43,320 --> 00:38:44,700
gee jou nie 'n skakel.

876
00:38:44,700 --> 00:38:49,150
Dit skakel na 'n ander lêer by wyse van
'n href waarvan die waarde in hierdie geval,

877
00:38:49,150 --> 00:38:51,586
is soek-3.css

878
00:38:51,586 --> 00:38:52,960
So het ek besef ons is vinnig gaan.

879
00:38:52,960 --> 00:38:54,600
Maar al wat ek doen is 'n soort
beweeg dinge rondom.

880
00:38:54,600 --> 00:38:55,760
Laat my oop search-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Daar is dit, niks werklik om dit te.

883
00:38:58,530 --> 00:39:02,270
Ek het net gekopieer en geplak in 'n nuwe
lêer, baie soos ons faktor dinge uit

884
00:39:02,270 --> 00:39:03,509
in ander lêers voor.

885
00:39:03,509 --> 00:39:05,300
En die result--
heeltemal underwhelming--

886
00:39:05,300 --> 00:39:06,730
gaan presies dieselfde te wees.

887
00:39:06,730 --> 00:39:10,490
Maar ons beweeg toward-- nee, dit is nie.

888
00:39:10,490 --> 00:39:11,930
O ja, ek weet hoekom.

889
00:39:11,930 --> 00:39:13,790
>> So lyk dit 'n fout wees.

890
00:39:13,790 --> 00:39:15,010
En dit is in 'n sekere sin.

891
00:39:15,010 --> 00:39:17,730
Maar laat my oop te stel my blad Network.

892
00:39:17,730 --> 00:39:19,660
Laat my die bladsy te herlaai.

893
00:39:19,660 --> 00:39:23,315
Ag, hoekom is die CSS nie toegepas?

894
00:39:23,315 --> 00:39:26,920
Wel, die CSS-lêer, insgelyks, het
aan die wêreld leesbaar wees, om so te praat.

895
00:39:26,920 --> 00:39:28,440
En dit word ook tans verbode.

896
00:39:28,440 --> 00:39:33,760
So laat my doen 'n chmod 'n + r
ster dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
ons is dot CSS is net die
lêer uitbreiding vir CSS lêers.

898
00:39:37,067 --> 00:39:38,900
Nou laat my terug te gaan na
my leser en herlaai.

899
00:39:38,900 --> 00:39:40,910
OK, 'n bietjie beter.

900
00:39:40,910 --> 00:39:42,282
>> Nou kan ek nie een laaste ding.

901
00:39:42,282 --> 00:39:42,990
Op soek-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Ek het 'n weergawe wat ek het net gedink
was weg koeler, al manier om meer

904
00:39:48,220 --> 00:39:48,980
ingewikkeld.

905
00:39:48,980 --> 00:39:50,690
Kom ons kyk na die resultaat eerste.

906
00:39:50,690 --> 00:39:52,290
Sluit hierdie te gee vir ons meer ruimte.

907
00:39:52,290 --> 00:39:54,275
Verander om dit te soek-4, Tik.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> En nou 'n klomp van die dinge is gebreek.

910
00:39:57,200 --> 00:39:59,910
Ek gaan om terug te gaan
in my gids hier.

911
00:39:59,910 --> 00:40:04,190
En nou is ek net gaan om te doen
'n chmod 'n + r op 'n file--

912
00:40:04,190 --> 00:40:07,450
want ek weet dit exists-- genoem
logo.gif, wat 'n beeld.

913
00:40:07,450 --> 00:40:08,590
En nou laai.

914
00:40:08,590 --> 00:40:11,040
En wow-- so nou is ek
redelik naby, eerlik,

915
00:40:11,040 --> 00:40:15,860
die 1999-weergawe van Google te hou, en
eerlik, die 2014-weergawe van Google,

916
00:40:15,860 --> 00:40:16,360
reg?

917
00:40:16,360 --> 00:40:21,920
>> So dit is nou van plan om hul webwerf,
Uiteindelik, as ek soek vir katte.

918
00:40:21,920 --> 00:40:23,900
En inderdaad is dit.

919
00:40:23,900 --> 00:40:26,410
Maar wat het ek anders doen
in hierdie weergawe 4?

920
00:40:26,410 --> 00:40:28,020
So sal ons nie te veel bewoners van dit hier.

921
00:40:28,020 --> 00:40:30,100
Jy sal sien dit in die probleem
die sewe uiteindelik.

922
00:40:30,100 --> 00:40:31,350
Maar let op wat ek gedoen het 'n paar dinge.

923
00:40:31,350 --> 00:40:33,690
>> Ek het 'n div
tag, wat afdeling,

924
00:40:33,690 --> 00:40:35,450
soortgelyk in die gees van 'n paragraaf tag.

925
00:40:35,450 --> 00:40:38,220
Maar 'n afdeling is net soos, hier is
'n vierkantige onsigbare streek

926
00:40:38,220 --> 00:40:39,150
van die skerm.

927
00:40:39,150 --> 00:40:41,680
Kom ons gee dit 'n unieke
identifikasie, 'n voet, net

928
00:40:41,680 --> 00:40:44,700
sodat ons kan praat oor
dit in ons HTML elders.

929
00:40:44,700 --> 00:40:47,952
Hier is nog 'n div van die bladsy
wie se ID gaan inhoud.

930
00:40:47,952 --> 00:40:49,160
Dit is die inhoud van die bladsy.

931
00:40:49,160 --> 00:40:51,090
En hier is die kop van die bladsy.

932
00:40:51,090 --> 00:40:54,960
>> Met ander woorde, ek het
wese in HTML is verstandelik

933
00:40:54,960 --> 00:40:57,700
die lees van hierdie webblad as
drie komponente, 'n kop-

934
00:40:57,700 --> 00:41:01,200
hier met hierdie onsigbare reghoek,
Die inhoud in die middel, en dan

935
00:41:01,200 --> 00:41:04,800
die voet benede, selfs
al het ons nie sien nie die dinge.

936
00:41:04,800 --> 00:41:09,940
Want ek wil in my kop van
bladsy hier, of in 'n Css lêer,

937
00:41:09,940 --> 00:41:11,460
Ek kan hierdie sintaksis gebruik.

938
00:41:11,460 --> 00:41:13,070
>> Kop is nie 'n tag.

939
00:41:13,070 --> 00:41:17,060
Dit is 'n ID, sodat dit blyk
dat deur dit te doen #header,

940
00:41:17,060 --> 00:41:20,840
Ek kan nou aansoek doen om een ​​of meer
eienskappe aan die kop.

941
00:41:20,840 --> 00:41:24,130
Ek kan dieselfde inhoud te doen,
dieselfde vir die inhoud hier.

942
00:41:24,130 --> 00:41:27,230
>> So byvoorbeeld, in die voet, kennisgewing
al hierdie eienskappe Ek voeg.

943
00:41:27,230 --> 00:41:30,660
En ek weet hulle bestaan ​​net deur die lees
op die dokumentasie vir CSS.

944
00:41:30,660 --> 00:41:33,450
Lettergrootte gaan smaller-- wees
so 'n relatiewe lettergrootte.

945
00:41:33,450 --> 00:41:34,741
Die gewig gaan dapper wees.

946
00:41:34,741 --> 00:41:37,340
Margin-- hoeveel pixels
rondom it-- is 20 pixels.

947
00:41:37,340 --> 00:41:38,590
En dit gaan gesentreer word.

948
00:41:38,590 --> 00:41:40,256
>> Maar nou, die bladsy lyk.

949
00:41:40,256 --> 00:41:42,840
As ek nie tevrede met
my kopie reg daar,

950
00:41:42,840 --> 00:41:46,560
Ek kon iets soos kleur rooi doen.

951
00:41:46,560 --> 00:41:50,570
En dan kan ek dit red, laai,
en nou het ek gestileer die voet.

952
00:41:50,570 --> 00:41:54,130
So dit is net sinspeel op die krag
wat jy kan doen in 'n web bladsy

953
00:41:54,130 --> 00:41:55,510
om dinge te verander rond.

954
00:41:55,510 --> 00:41:59,080
>> En selfs koeler as dit nie, as jy wil
te steek om met die werklike webwerwe,

955
00:41:59,080 --> 00:42:00,810
jy kan nie permanent verander.

956
00:42:00,810 --> 00:42:03,640
Maar as ek oopmaak
Chrome se Inspekteur weer

957
00:42:03,640 --> 00:42:07,610
en ek gaan nie na die linkerkant
hier, wat toon Facebook se HTML,

958
00:42:07,610 --> 00:42:11,380
maar toon op die regte
kant al sy CSS,

959
00:42:11,380 --> 00:42:13,789
jy kan nie en
dinge verander op die vlieg.

960
00:42:13,789 --> 00:42:15,080
So laat my gaan voort en doen dit.

961
00:42:15,080 --> 00:42:18,670
>> Laat my voor en beheer gaan
Klik op hierdie ewekansige woord hier,

962
00:42:18,670 --> 00:42:21,230
teken, en kliek Ondersoek element.

963
00:42:21,230 --> 00:42:25,130
Chrome baie gerieflik spring na
die H1 tag wat Facebook gebruik.

964
00:42:25,130 --> 00:42:27,290
En let hier Facebook
het soort van lui

965
00:42:27,290 --> 00:42:29,960
hard gekodeer lettergrootte as 'n eiendom hier.

966
00:42:29,960 --> 00:42:33,530
>> So het die cool ding is egter
dat as ek eintlik gaan in hier

967
00:42:33,530 --> 00:42:39,560
en sê: o, Facebook, ek hou nie van wat
64 pixels, ons kan nou verander Facebook.

968
00:42:39,560 --> 00:42:42,590
Natuurlik, ons is net om dit te verander
vir my persoonlik op die oomblik.

969
00:42:42,590 --> 00:42:45,150
Maar dit is net nog 'n
instrument in ons gereedskapskis

970
00:42:45,150 --> 00:42:48,360
wat gaan ons toelaat om te verander
en uit te vind en ook te diagnoseer

971
00:42:48,360 --> 00:42:49,729
kwessies in ons eie webblaaie.

972
00:42:49,729 --> 00:42:52,270
En ons kan insgelyks gaan oor
hier, wat is die dieselfde ding.

973
00:42:52,270 --> 00:42:55,830
As jy regtig wil fancy te kry, het ek
bedoel, nou kan jy regtig muteer die bladsy

974
00:42:55,830 --> 00:42:57,380
en doen mal dinge.

975
00:42:57,380 --> 00:42:59,870
>> So hoekom is dit nuttig?

976
00:42:59,870 --> 00:43:02,330
Wel, uiteindelik, ons
gaan om te wil wees

977
00:43:02,330 --> 00:43:07,110
staat om webblaaie te skep wat
word gedryf deur ons eie terug eindig,

978
00:43:07,110 --> 00:43:10,520
nie deur net Google en
uitkontraktering van die agterkant is daar.

979
00:43:10,520 --> 00:43:13,510
Ons wil eintlik die
waarde, byvoorbeeld,

980
00:43:13,510 --> 00:43:18,830
van ons soekenjin se optrede
skryf aan nie anders gaan na iemand,

981
00:43:18,830 --> 00:43:24,270
maar om iets soos search.php,
waar search.php is op ons eie bediener

982
00:43:24,270 --> 00:43:25,670
nie op iemand anders se.

983
00:43:25,670 --> 00:43:30,316
>> En so om daar te kom, het ons eintlik
nodig om 'n nuwe taal te stel.

984
00:43:30,316 --> 00:43:33,190
So het ons reeds gekyk na die een nuwe
taal, of twee werklik, HTML

985
00:43:33,190 --> 00:43:33,700
en CSS.

986
00:43:33,700 --> 00:43:36,330
Maar hulle is regtig net
strukturele en estetiese tale.

987
00:43:36,330 --> 00:43:38,360
Hulle is nie die programmering
tale per se.

988
00:43:38,360 --> 00:43:41,160
En dit is omtrent so veel formele
tyd as ons sal spandeer op hulle.

989
00:43:41,160 --> 00:43:44,910
Omdat ons sal nou begin
oorgang na PHP.

990
00:43:44,910 --> 00:43:48,160
>> So PHP is 'n werklike
programmeertaal.

991
00:43:48,160 --> 00:43:50,750
Dit is 'n script taal
in die sin dat dit

992
00:43:50,750 --> 00:43:52,855
bedoel ligter gewig te wees
as iets soos C.

993
00:43:52,855 --> 00:43:56,082
En dit is 'n geïnterpreteer taal,
wat beteken dit is nie saamgestel.

994
00:43:56,082 --> 00:43:58,790
So in 'n neutedop, het wat dit beteken
wanneer ons 'n taal soos C gebruik

995
00:43:58,790 --> 00:44:00,290
en ons het dit saam te stel?

996
00:44:00,290 --> 00:44:02,120
Wat beteken dit om te
stel C bron-kode?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
Publiek: [onhoorbaar].

999
00:44:04,780 --> 00:44:06,184
DAVID J MALAN: Sê dit weer doen?

1000
00:44:06,184 --> 00:44:07,100
Publiek: [onhoorbaar].

1001
00:44:07,100 --> 00:44:07,962

1002
00:44:07,962 --> 00:44:08,920
DAVID J Malan Perfect.

1003
00:44:08,920 --> 00:44:10,180
Dit blyk dit in binêre.

1004
00:44:10,180 --> 00:44:14,200
Dit blyk dit in nulle en ene
van werklike Engels-agtige bron-kode.

1005
00:44:14,200 --> 00:44:16,424
En dan kan ons eintlik
loop die nulle en ene

1006
00:44:16,424 --> 00:44:18,840
deur verby hulle deur die
CPU deur dubbel te kliek 'n ikoon

1007
00:44:18,840 --> 00:44:19,980
of bestuur van 'n opdrag.

1008
00:44:19,980 --> 00:44:23,770
>> PHP en Python en Ruby
en Perl en JavaScript

1009
00:44:23,770 --> 00:44:26,250
en trosse van ander
tale geïnterpreteer

1010
00:44:26,250 --> 00:44:29,290
tale, wat is om te sê
jy stel hulle nie.

1011
00:44:29,290 --> 00:44:34,220
Inteendeel, jy hulle as insette te voed
'n program genaamd 'n tolk.

1012
00:44:34,220 --> 00:44:36,640
En dat tolk,
wat iemand anders geskryf het,

1013
00:44:36,640 --> 00:44:40,930
lees jou bron-kode van bo na onder,
links na regs en net interpreteer

1014
00:44:40,930 --> 00:44:43,000
die lyne en doen wat jy sê.

1015
00:44:43,000 --> 00:44:45,360
>> So as jy 'n ontmoeting
lyn wat sê die gedrukte media,

1016
00:44:45,360 --> 00:44:48,660
dit nie noodwendig sit druk
na die ooreenstemmende nulle en ene.

1017
00:44:48,660 --> 00:44:51,910
Dit het net hierdie tolk soos
'n groot indien toestand wat sê,

1018
00:44:51,910 --> 00:44:56,110
As programmeerder se opdrag is
druk, doen dan die volgende.

1019
00:44:56,110 --> 00:44:58,170
So dit interpreteer dit net
deur soort van redenasie

1020
00:44:58,170 --> 00:44:59,800
deur wat jy vertel om dit te doen.

1021
00:44:59,800 --> 00:45:01,320
>> En PHP is een van hierdie tale.

1022
00:45:01,320 --> 00:45:05,310
En PHP jaar gelede is ontwerp
juis vir die web ontwikkeling.

1023
00:45:05,310 --> 00:45:08,160
En dit was aanvanklik 'n
baie slordig deurmekaar taal.

1024
00:45:08,160 --> 00:45:10,940
En inderdaad, daar is 'n groot
bedrag van slegte PHP-kode wat daar is.

1025
00:45:10,940 --> 00:45:13,520
Maar die taal self
het oor die jare gegroei,

1026
00:45:13,520 --> 00:45:16,200
soveel so dat dit nou
eintlik 'n wonderlike volgende stap

1027
00:45:16,200 --> 00:45:19,970
pedagogies van C, want dit is
so darned vertroud met alles

1028
00:45:19,970 --> 00:45:22,380
jy het net gesien in die afgelope paar weke.

1029
00:45:22,380 --> 00:45:25,724
>> Die een aanvanklike verskil ons sal sien
is daar geen belangrikste funksie nie.

1030
00:45:25,724 --> 00:45:28,890
Wanneer jy skryf kode begin, is dit net
gaan kry uitgevoer nie saak wat,

1031
00:45:28,890 --> 00:45:30,220
soos ons sal sien in 'n oomblik.

1032
00:45:30,220 --> 00:45:33,320
Intussen, hier is wat 'n
veranderlike lyk soos in PHP.

1033
00:45:33,320 --> 00:45:35,840
Dit is 'n bietjie anders,
maar net-net.

1034
00:45:35,840 --> 00:45:39,380
>> In PHP, is daar nie 'n sterk tik.

1035
00:45:39,380 --> 00:45:41,430
Daar is week tik,
wat beteken net daar

1036
00:45:41,430 --> 00:45:44,030
is data tipes soos snare
en nommers en ander dinge.

1037
00:45:44,030 --> 00:45:47,030
Maar jy nie die moeite te spesifiseer
wat hulle is nie.

1038
00:45:47,030 --> 00:45:48,980
PHP figure dit uit vir jou.

1039
00:45:48,980 --> 00:45:52,030
Die dollar teken is net 'n besluit
dat die PHP mense gemaak jaar

1040
00:45:52,030 --> 00:45:54,890
gelede sodanig dat enige veranderlike in PHP
net begin met 'n dollar-teken.

1041
00:45:54,890 --> 00:45:58,130
Dit is eintlik soort van nuttige in daardie
dit spring uit by jou 'n bietjie meer.

1042
00:45:58,130 --> 00:46:01,315
>> Maar daarna het hierdie
is 'n toestand in PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Wat is die verskillende versus C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Mislei question-- niks,
wat eintlik baie mooi.

1047
00:46:09,600 --> 00:46:12,140
Boolse uitdrukkings in PHP-- dieselfde.

1048
00:46:12,140 --> 00:46:19,354
Boolse uitdrukkings met en teenoor
of, skakelaars, loops, loops, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
hierdie een is anders.

1050
00:46:20,270 --> 00:46:22,660
>> So dit blyk daar is 'n
paar ander funksies in PHP.

1051
00:46:22,660 --> 00:46:25,243
Een van hulle is eintlik nie,
wat is wonderlik gerieflik.

1052
00:46:25,243 --> 00:46:29,250
As $ getalle is 'n skikking wat jy het
voorheen verklaar in 'n program,

1053
00:46:29,250 --> 00:46:33,350
jy het hierdie fancy vir elke konstruk
dat in plaas van om dit alles

1054
00:46:33,350 --> 00:46:37,020
irriterende ek gelyk 0, ek is
minder as dit, [? Ek ++?]

1055
00:46:37,020 --> 00:46:40,320
vir elke getalle as nommer, waar elke
van die dollar teken waardes is net

1056
00:46:40,320 --> 00:46:42,790
'n veranderlike, en die laasgenoemde
jy kan dink soos ek

1057
00:46:42,790 --> 00:46:44,290
Jy kan dit noem wat jy wil.

1058
00:46:44,290 --> 00:46:45,770
Ek het dit nommer.

1059
00:46:45,770 --> 00:46:48,825
Dit gaan Itereer oor
die skikking met die naam getalle.

1060
00:46:48,825 --> 00:46:51,200
En op elke iterasie, dit is
gaan outomaties opgedateer

1061
00:46:51,200 --> 00:46:54,340
vir jou die dollar teken getal
veranderlike sodat jy voortdurend

1062
00:46:54,340 --> 00:46:58,210
het toegang tot die veranderlike wat jy wil
sonder enige vierkante bracket te doen

1063
00:46:58,210 --> 00:47:00,980
notasie of kruip in 'n skikking.

1064
00:47:00,980 --> 00:47:04,950
>> Behalwe dat ons selfs dinge soos
skikkings, wat lyk byna dieselfde,

1065
00:47:04,950 --> 00:47:08,210
behalwe dit is baie algemeen, soos ons sal
sien, beide in PHP en JavaScript

1066
00:47:08,210 --> 00:47:10,750
na die pre inisialiseer 'n skikking
met behulp van vierkantige hakies.

1067
00:47:10,750 --> 00:47:12,040
C gebruik krullerige draadjies.

1068
00:47:12,040 --> 00:47:15,330
Dus is dit effens anders, selfs al
Ons het nie regtig gebruik wat truuk veel.

1069
00:47:15,330 --> 00:47:20,090
>> Maar selfs meer kragtig,
PHP het assosiatiewe skikkings,

1070
00:47:20,090 --> 00:47:23,100
Dit is 'n fancy manier
sê hash tabelle.

1071
00:47:23,100 --> 00:47:31,610
In werklikheid, as jy wil 'n gemors te verklaar
tafel in PHP, anders as in C-- hoeveel

1072
00:47:31,610 --> 00:47:34,775
reëls van die kode het dit tot
eintlik implementeer 'n gemors tafel in C?

1073
00:47:34,775 --> 00:47:38,310
Of hoeveel reëls van die kode is dit
neem van 'n hash tafel in C te implementeer?

1074
00:47:38,310 --> 00:47:39,820
So is dit waarskynlik 'n baie, reg?

1075
00:47:39,820 --> 00:47:41,680
Dit is 'n paar dosyn, miskien 100 of 200.

1076
00:47:41,680 --> 00:47:42,980
Dit is triviaal.

1077
00:47:42,980 --> 00:47:45,420
Of dit is om te wees, soos
jy sal gou sien, nontrivial

1078
00:47:45,420 --> 00:47:48,080
'n gemors tafel te implementeer
[Onhoorbaar] en ook 'n drie gedruk.

1079
00:47:48,080 --> 00:47:50,580
Maar in PHP-- en eerlik, ek
waarskynlik nie vertel hierdie

1080
00:47:50,580 --> 00:47:53,630
totdat Monday-- in PHP, indien
jy wil 'n tafel, gedoen.

1081
00:47:53,630 --> 00:47:56,431
Dit is 'n gemors so table--
met 'n reël van die kode.

1082
00:47:56,431 --> 00:47:56,930
En

1083
00:47:56,930 --> 00:47:58,810
>> Baie van die tale doen.

1084
00:47:58,810 --> 00:48:00,190
Om pret te hê met pset vyf.

1085
00:48:00,190 --> 00:48:01,980
So 'n baie tale doen.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Hulle gee jou hierdie abstraksies
dat ander mense, ander programmeerders,

1088
00:48:06,140 --> 00:48:09,870
geskep het vir jou sodat
jy kan staan ​​op hul skouers

1089
00:48:09,870 --> 00:48:13,290
en begin met behulp van idees wat super
dwingende, soos hash tabelle en bome

1090
00:48:13,290 --> 00:48:14,140
en probeer.

1091
00:48:14,140 --> 00:48:17,790
Maar jy hoef nie noodwendig te
daardie dinge self te implementeer.

1092
00:48:17,790 --> 00:48:20,850
>> En so uiteindelik, wat
ons gaan PHP te gebruik vir

1093
00:48:20,850 --> 00:48:23,580
potensieel die skryf van programme
van die sogenaamde opdrag lyn.

1094
00:48:23,580 --> 00:48:26,600
Ons kan elke program herskep
ons hierdie semester geskryf het tot dusver,

1095
00:48:26,600 --> 00:48:30,410
behalwe miskien tempo wat gebruik SPL,
wat spesifiek vir C op die oomblik.

1096
00:48:30,410 --> 00:48:33,100
Maar elke ander probleem stel,
beslis Mario en Caesar

1097
00:48:33,100 --> 00:48:35,300
en Vigenere en
[? Kraak?] En verder, het ons

1098
00:48:35,300 --> 00:48:39,520
kon weer te implementeer in PHP, en
waarskynlik 'n bietjie makliker.

1099
00:48:39,520 --> 00:48:43,050
>> Maar wat ons uiteindelik gaan
PHP te gebruik vir die web ontwikkeling.

1100
00:48:43,050 --> 00:48:46,420
En ons gaan stel volgende
week 'n geestelike model, 'n paradigma genoem

1101
00:48:46,420 --> 00:48:49,610
MVC, model oog kontroleerder,
wat as jy dit gedoen programmering

1102
00:48:49,610 --> 00:48:51,610
voor in Python of
Ruby of elders, moet jy

1103
00:48:51,610 --> 00:48:54,112
kan weet van hierdie span met
Relings en Django en dies meer.

1104
00:48:54,112 --> 00:48:55,820
Maar as jy nuut is tot
Dit ook, sal jy sien

1105
00:48:55,820 --> 00:48:59,652
dat dit eintlik 'n baie natuurlike
uitbreiding van die faktorisering

1106
00:48:59,652 --> 00:49:01,360
en die soort van ontwerp
van die kode wat ons het

1107
00:49:01,360 --> 00:49:04,670
doen in C. Ons gaan nou
pas sommige van daardie lesse PHP

1108
00:49:04,670 --> 00:49:07,190
sodat uiteindelik, ons is
die implementering van ons eie webtuistes.

1109
00:49:07,190 --> 00:49:09,080
En as jy soort
betower of verbaas

1110
00:49:09,080 --> 00:49:10,954
dat ons gaan om te doen
al die so vinnig,

1111
00:49:10,954 --> 00:49:13,410
besef dat byna elke
semester, byna 90%

1112
00:49:13,410 --> 00:49:16,560
studente CS50, insluitend dié
wat nog nooit geprogrammeer voor,

1113
00:49:16,560 --> 00:49:20,329
uiteindelik 'n finale projekte wat
is gebaseer op die web ontwikkeling.

1114
00:49:20,329 --> 00:49:23,120
En so sal jy sien dat die opbrengste
hoog in die komende weke.

1115
00:49:23,120 --> 00:49:24,965
So sal ons sien jy dan op Maandag.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> Spreker 1: En nou, diep
Gedagtes deur Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Hash tabelle.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [Gelag]

1122
00:49:38,402 --> 00:49:38,902