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

2
00:00:01,390 --> 00:00:04,890
>> [Muziek]

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

4
00:00:10,955 --> 00:00:12,580
DAVID J MALAN: Oké, 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 het einde van week zeven.

7
00:00:15,540 --> 00:00:18,180
En het is het einde van die scavenger
jacht van probleem set vier

8
00:00:18,180 --> 00:00:19,220
dat je nog wel herinneren.

9
00:00:19,220 --> 00:00:21,650
Na het herstellen van alle
die JPEG's van het personeel,

10
00:00:21,650 --> 00:00:24,820
u werden uitgedaagd, als je wilt,
om jezelf te fotograferen met zo veel

11
00:00:24,820 --> 00:00:25,981
van die mensen als je kunt.

12
00:00:25,981 --> 00:00:28,480
We hebben een hele hoop van inzendingen
in de afgelopen paar weken,

13
00:00:28,480 --> 00:00:32,980
inderdaad, nogal wat recht voor de middag
Vandaag, waarvan sommige de hier,

14
00:00:32,980 --> 00:00:37,670
hier gevangen in-- ziet like-- Annenberg
Hall op kantooruren, één hier

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

16
00:00:39,530 --> 00:00:41,750
Hier is Ramon wordt gevangen op de telefoon.

17
00:00:41,750 --> 00:00:43,870
Dit was een CS50 lunch.

18
00:00:43,870 --> 00:00:46,840
Dit was Jason Skypen met
een meer creatieve klasgenoot,

19
00:00:46,840 --> 00:00:48,280
die hem op deze manier gebeld.

20
00:00:48,280 --> 00:00:49,690
We weten niet wat dit was.

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

22
00:00:51,940 --> 00:00:54,570
>> DAVID J MALAN: Maar
dat is een gigabyte waard.

23
00:00:54,570 --> 00:00:56,960
Hier is Chang, die
liep letterlijk van het podium

24
00:00:56,960 --> 00:01:00,480
om te voorkomen dat wordt gefotografeerd één
dag, maar werd uiteindelijk gevangen.

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 door de velden.

30
00:01:07,670 --> 00:01:11,840
En Zamyla zelfs werd gevonden
bij een danszaal concurrentie.

31
00:01:11,840 --> 00:01:14,100
Dus zullen we door gaan
deze foto's, erachter te komen

32
00:01:14,100 --> 00:01:16,690
die ingediend de meest
de vroegste en beloning

33
00:01:16,690 --> 00:01:20,662
een fantastische prijs, zoals
beloofd in de spec.

34
00:01:20,662 --> 00:01:23,120
En we zullen ook de follow-up over
de ruimte die betrokken was.

35
00:01:23,120 --> 00:01:26,860
>> Een paar announcements-- dus lunch
is, nogmaals, deze vrijdag om 13:15.

36
00:01:26,860 --> 00:01:30,420
Indien u graag om met ons mee,
RSVP op die URL hier.

37
00:01:30,420 --> 00:01:33,730
Jason verschijnt weer hier van de ene
van de secties een paar jaar

38
00:01:33,730 --> 00:01:35,510
terug, dat gebeurd
op Halloween te vallen.

39
00:01:35,510 --> 00:01:38,950
En inderdaad, hij gekleed als een
pompoen dat jaar.

40
00:01:38,950 --> 00:01:42,700
Als u dit gedeelte kijken
van zijn uit 2011 deel

41
00:01:42,700 --> 00:01:46,480
acht, als je nieuwsgierig bent,
bij CS50.tv, denk ik

42
00:01:46,480 --> 00:01:49,730
Dit was het jaar waarin
zijn luchtpomp werkte.

43
00:01:49,730 --> 00:01:52,490
>> Als je dan kijken naar de
vergelijkbare sectie in 2012,

44
00:01:52,490 --> 00:01:55,620
zie je dit Jason veel leeggelopen,
omdat het pak niet meer functioneerde,

45
00:01:55,620 --> 00:01:58,060
die alleen zeggen
deze vrijdag, als je wilt

46
00:01:58,060 --> 00:02:02,720
graag een pompoen met Daven carve
en Gabe en anderen, RSVP aan de hoofden

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

48
00:02:04,480 --> 00:02:06,200
Het belooft heel leuk zijn.

49
00:02:06,200 --> 00:02:08,660
Daven, wordt ons verteld, heeft gesneden
pompoenen zijn hele leven.

50
00:02:08,660 --> 00:02:11,930
Gabriel uit Brazilië heeft nooit
gesneden een pompoen voor Halloween.

51
00:02:11,930 --> 00:02:14,700
Er dus bij hen als hij leert.

52
00:02:14,700 --> 00:02:16,830
>> Seminars, meanwhile--
dus je zult snel leren

53
00:02:16,830 --> 00:02:20,650
over wat onze verwachtingen zijn voor
het uiteindelijke project, die in wezen

54
00:02:20,650 --> 00:02:23,150
zal neerkomen op
ontwerpen en implementeren van

55
00:02:23,150 --> 00:02:26,440
vrijwel elk project van belang zijn voor
u, zij het onder voorbehoud van de goedkeuring

56
00:02:26,440 --> 00:02:28,490
en begeleiding van uw onderwijs collega.

57
00:02:28,490 --> 00:02:32,110
Tegen het einde van de
semester, introduceren we een aantal

58
00:02:32,110 --> 00:02:35,610
van seminars, die optioneel lessen zijn
geleid door de leer fellows en Harvard

59
00:02:35,610 --> 00:02:38,570
personeel, vrienden van de cursus over
campus, over verschillende onderwerpen die

60
00:02:38,570 --> 00:02:41,470
tangentiaal aan de
onderliggende syllabus cursus

61
00:02:41,470 --> 00:02:45,590
maar toch van toepassing, fun, en
anders voor potentiële afstudeeropdrachten.

62
00:02:45,590 --> 00:02:49,530
>> Zo, de eerste, als je wilt
aan te melden, ga dan naar die URL daar.

63
00:02:49,530 --> 00:02:53,010
En dit is de line-up voor
seminars dit jaar alleen.

64
00:02:53,010 --> 00:02:56,060
Maar beseffen we hebben tientallen
seminars van de afgelopen jaren, die allemaal

65
00:02:56,060 --> 00:02:59,774
zijn gekoppeld in het menu Seminars
optie van de website van de cursus.

66
00:02:59,774 --> 00:03:02,190
Dus als u denkt over
verder te gaan dan je comfort zone

67
00:03:02,190 --> 00:03:05,060
of het oppakken van een aantal nieuwe vaardigheden,
bijvoorbeeld het programmeren iPhone

68
00:03:05,060 --> 00:03:08,100
apps met Swift, een nieuwe taal
Apple of Objective-C

69
00:03:08,100 --> 00:03:11,230
of Android apps of programmeren [? cue?]
gloeilampen, of een van de onderwerpen

70
00:03:11,230 --> 00:03:15,490
hier en meer, te wijten check
uit de registratie pagina.

71
00:03:15,490 --> 00:03:19,730
>> Dus we begonnen en afgesloten op
Maandag met kijken naar HTTP.

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

73
00:03:22,675 --> 00:03:24,045
Maar wat betekent dat eigenlijk?

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

75
00:03:26,805 --> 00:03:27,930
Wat betekent dat eigenlijk?

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

77
00:03:30,665 --> 00:03:31,290
Is dat een hand?

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

79
00:03:33,074 --> 00:03:34,740
Ik weet dat je gewoon je hoofd krabben.

80
00:03:34,740 --> 00:03:36,400
Maar je wilt voorstellen wat HTTP is?

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

82
00:03:37,792 --> 00:03:40,576
>> Publiek: Hoe computers
communiceren met [onverstaanbaar].

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

84
00:03:41,517 --> 00:03:43,100
DAVID J MALAN: Ik miste het laatste deel.

85
00:03:43,100 --> 00:03:45,774
Hoe computers communiceren met--

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

87
00:03:47,325 --> 00:03:50,450
DAVID J MALAN: goed-- met internet
servers, en in het bijzonder, webservers.

88
00:03:50,450 --> 00:03:53,533
Omdat recall, er is een heleboel
diensten op het internet, waarvan sommige

89
00:03:53,533 --> 00:03:57,349
je dagelijkse waarschijnlijk gebruik tussen de chat
en bericht, chat, en web-en e-mail,

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

91
00:03:57,890 --> 00:04:00,900
En HTTP is gewoon de
protocol dat web browsers

92
00:04:00,900 --> 00:04:03,750
spreken bij de communicatie met
webservers, en vice versa.

93
00:04:03,750 --> 00:04:05,580
En de analoge in de
menselijke wereld zou kunnen zijn,

94
00:04:05,580 --> 00:04:08,730
Verleng ik mijn hand om wat te schudden
andere menselijke en hij

95
00:04:08,730 --> 00:04:11,970
erkent door de uitbreiding
zijn of haar hand ook.

96
00:04:11,970 --> 00:04:13,970
Dus dat is gewoon een protocol,
een set van conventies.

97
00:04:13,970 --> 00:04:15,630
>> En wat inderdaad zijn die verdragen?

98
00:04:15,630 --> 00:04:18,640
Nou, het komt gewoon neer op
verzenden van berichten heen en weer,

99
00:04:18,640 --> 00:04:19,770
zoals wij hier afgebeeld.

100
00:04:19,770 --> 00:04:22,520
En er zijn een paar manieren in
waarin je kunt deze berichten te verzenden.

101
00:04:22,520 --> 00:04:24,360
En misschien wel het meest
voorkomende is bekend als get.

102
00:04:24,360 --> 00:04:26,510
En we zullen een contrast zien
dit duurde niet lang.

103
00:04:26,510 --> 00:04:30,010
>> Maar een get verzoek van een browser
naar server net ziet er zo uit.

104
00:04:30,010 --> 00:04:32,960
Het is een bos van tekst die het brengt
binnenkant van een virtuele enveloppe.

105
00:04:32,960 --> 00:04:35,854
Aan de buitenzijde van de enveloppe
ga een paar stukken van details.

106
00:04:35,854 --> 00:04:37,770
Wat er moet gaan op de
envelop, zo te zeggen,

107
00:04:37,770 --> 00:04:41,820
met het oog op een verzoek als te krijgen
dit van mij naar een webserver?

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

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

110
00:04:43,270 --> 00:04:45,890
>> DAVID J MALAN: Mijn IP adres
in het veld, om zo te zeggen,

111
00:04:45,890 --> 00:04:49,490
en natuurlijk, de
IP-adres van de ontvanger.

112
00:04:49,490 --> 00:04:52,710
Maar in het geval van een web pakket,
we moeten een beetje meer detail

113
00:04:52,710 --> 00:04:55,254
Het is niet voldoende alleen om
stuur een envelop met een server,

114
00:04:55,254 --> 00:04:57,670
omdat die server zou kunnen zijn
luisteren naar verschillende types

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

116
00:04:59,180 --> 00:05:01,370
Dus wat hebben we nodig
Naast IP van de ontvanger?

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

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

119
00:05:03,222 --> 00:05:04,241
>> Publiek: Is het 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 poort, zoals dat heet.

124
00:05:09,340 --> 00:05:11,010
Dichtbij, maar een TCP poort nummer.

125
00:05:11,010 --> 00:05:12,220
En er is een bos van deze.

126
00:05:12,220 --> 00:05:14,310
Maar zeker de meest
vertrouwd moet uiteindelijk

127
00:05:14,310 --> 00:05:17,590
80, dat is de standaard
één gebruikt voor webverkeer.

128
00:05:17,590 --> 00:05:20,040
En een ander vertrouwd
men straks 443,

129
00:05:20,040 --> 00:05:24,280
die wordt gebruikt voor veilige web
verkeer, URL's die beginnen met https.

130
00:05:24,280 --> 00:05:26,650
>> Dus dit is wat er gebeurt
binnenkant van die enveloppe.

131
00:05:26,650 --> 00:05:29,780
En krijg / betekent gewoon, geef
me de standaard webpagina.

132
00:05:29,780 --> 00:05:32,700
Geef me de root van de harde
rijden op die webserver.

133
00:05:32,700 --> 00:05:36,050
En hopelijk, het web
server zal reageren met, OK

134
00:05:36,050 --> 00:05:39,630
en het getal 200, dat is net
een conventie die zegt, ja, alle

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

136
00:05:40,470 --> 00:05:41,680
Hier is de pagina.

137
00:05:41,680 --> 00:05:45,510
Het type van de webpagina gaat
zijn tekst, maar meer specifiek, HTML,

138
00:05:45,510 --> 00:05:47,010
die we op het punt om weer in te duiken.

139
00:05:47,010 --> 00:05:49,877
En de dot dot dot net
betekent hier de HTML.

140
00:05:49,877 --> 00:05:51,710
En dat is waar we
pikken het verhaal van vandaag,

141
00:05:51,710 --> 00:05:55,740
eigenlijk het schrijven van HTML,
HyperText Markup Language,

142
00:05:55,740 --> 00:05:57,727
is de taal waarin
webpagina's worden geschreven.

143
00:05:57,727 --> 00:05:59,060
Het is geen programmeertaal.

144
00:05:59,060 --> 00:06:01,270
Er is geen functies
of lussen of voorwaarden.

145
00:06:01,270 --> 00:06:03,800
Het is een opmaaktaal,
zo goed zien vandaag opnieuw,

146
00:06:03,800 --> 00:06:07,240
die u toelaat om te specificeren
hoe te structureren en te stileren

147
00:06:07,240 --> 00:06:09,300
esthetisch een webpagina.

148
00:06:09,300 --> 00:06:11,470
>> Dus dit was de een
en alleen pagina we echt

149
00:06:11,470 --> 00:06:13,930
keek bij kortstondig, op maandag.

150
00:06:13,930 --> 00:06:16,250
En merk op een paar
saillante kenmerken.

151
00:06:16,250 --> 00:06:20,170
Er is veel open schuine
bracket en dicht schuine beugel.

152
00:06:20,170 --> 00:06:23,160
Tussen deze hoek
haakjes zijn woorden.

153
00:06:23,160 --> 00:06:25,660
En we gaan beginnen
roepen die woorden labels.

154
00:06:25,660 --> 00:06:28,800
Bracket hoofd zo open
en gesloten beugel hoofd

155
00:06:28,800 --> 00:06:33,620
de open en gesloten markeringen,
of het begin en eind tags

156
00:06:33,620 --> 00:06:37,660
respectievelijk een HTML-element,
zoals we het zullen noemen, heet hoofd.

157
00:06:37,660 --> 00:06:41,760
En hetzelfde jargon geldt
lichaam in HTML enzovoort.

158
00:06:41,760 --> 00:06:43,970
>> En wat is er leuk is
HTML-- en inderdaad, zullen we

159
00:06:43,970 --> 00:06:47,187
besteden ontzettend weinig tijd op het,
omdat je meestal gewoon uitzoeken

160
00:06:47,187 --> 00:06:49,770
welke functies het heeft wanneer je
daadwerkelijk een concreet probleem

161
00:06:49,770 --> 00:06:52,820
om solve-- je dat vinden
een browser is vrij dom.

162
00:06:52,820 --> 00:06:56,450
Het gaat gewoon om niet in tegenstelling tot doen--
een computer-- wat je hem vertelt wat te doen.

163
00:06:56,450 --> 00:06:59,279
En dus, als u hebt geopend
bracket HTML aan de top

164
00:06:59,279 --> 00:07:01,320
daar, die in wezen
betekent gewoon, hey, browser,

165
00:07:01,320 --> 00:07:04,090
hier komt een webpagina geschreven in HTML.

166
00:07:04,090 --> 00:07:06,130
>> Bij het zien van haakje openen
hoofd, dat betekent,

167
00:07:06,130 --> 00:07:10,350
hey, browser, hier komt het hoofd, of
het bovenste gedeelte van mijn webpagina.

168
00:07:10,350 --> 00:07:14,192
Bij het zien van een gesloten beugel
hoofd, dat betekent gewoon, hey,

169
00:07:14,192 --> 00:07:15,150
dat is het voor het hoofd.

170
00:07:15,150 --> 00:07:16,420
Standby voor iets anders.

171
00:07:16,420 --> 00:07:18,878
En dat er iets anders is
blijkbaar gaat het lichaam.

172
00:07:18,878 --> 00:07:22,630
En als je niet van een tag, zoals hebben
je hebt gewoon hallo, komma, wereld,

173
00:07:22,630 --> 00:07:26,610
dat zal alleen maar rauwe tekst zijn dat
Uiteindelijk wordt in het scherm.

174
00:07:26,610 --> 00:07:29,220
>> Nu, je zult ook merken
de insprong hier.

175
00:07:29,220 --> 00:07:32,160
Je kunt waarschijnlijk afleiden
hoe we stileren het.

176
00:07:32,160 --> 00:07:34,850
Elke keer als ik een tag te openen,
zo te zeggen, ik inspringen.

177
00:07:34,850 --> 00:07:38,540
En elke keer als ik sluiten
een tag, ik un-streepje,

178
00:07:38,540 --> 00:07:40,690
in dezelfde geest om accolades.

179
00:07:40,690 --> 00:07:43,470
En buiten dat, ik ben een beetje
van het gebruik van mijn oordeel.

180
00:07:43,470 --> 00:07:48,380
Merk op dat ik niet de moeite te raken
Voer binnenkant van die titel tag.

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

182
00:07:48,990 --> 00:07:51,920
Nou, ik heb net besloten dat het leek een
beetje schoner voor mij, de mens,

183
00:07:51,920 --> 00:07:53,181
gewoon niet de moeite om dat te doen.

184
00:07:53,181 --> 00:07:54,930
Dus nogmaals, er is een aantal
oordeel noemt gewoon

185
00:07:54,930 --> 00:07:57,670
alsof er in C of welke taal dan ook.

186
00:07:57,670 --> 00:08:04,110
>> Maar merk ook dat dit inspringen
leent zich voor een mentaal model,

187
00:08:04,110 --> 00:08:05,670
niet te over compliceren.

188
00:08:05,670 --> 00:08:07,020
Maar een boom, toch?

189
00:08:07,020 --> 00:08:09,290
Als je denkt aan een web
pagina, blijkbaar geschreven

190
00:08:09,290 --> 00:08:12,050
als dit, als zijnde
mooi ingesprongen op die manier,

191
00:08:12,050 --> 00:08:17,390
kun je bijna denken aan de open beugel
HTML gesloten beugel tag wordt de afbakening

192
00:08:17,390 --> 00:08:21,380
de wortel van een knoop, een stamboom
stijl knooppunt in de stijl van de bomen

193
00:08:21,380 --> 00:08:22,900
we gekeken naar afgelopen vrijdag.

194
00:08:22,900 --> 00:08:27,630
>> En inderdaad, we hebben aan de rechter hier
wat wij een DOM, D-O-M, document zullen noemen

195
00:08:27,630 --> 00:08:31,680
object model, een mooie manier om te zeggen
een boom die dat HTML vertegenwoordigt.

196
00:08:31,680 --> 00:08:36,140
En merk op dat HTML heeft, zullen we zeggen,
als een stamboom, twee kinderen.

197
00:08:36,140 --> 00:08:37,659
Aan de linkerkant is het hoofd.

198
00:08:37,659 --> 00:08:39,179
Aan de rechterkant is het lichaam.

199
00:08:39,179 --> 00:08:44,220
>> En net als een hersenloze denkoefening,
hoofd, heeft natuurlijk hoeveel kinderen

200
00:08:44,220 --> 00:08:46,070
Volgens deze structuur?

201
00:08:46,070 --> 00:08:48,200
Dus gewoon een, title--
en dat is waarom we hebben

202
00:08:48,200 --> 00:08:50,580
de pijl die van het hoofd tot de titel.

203
00:08:50,580 --> 00:08:55,110
Dus het is alsof die persoon in de
stamboom had net een jongen.

204
00:08:55,110 --> 00:08:58,230
En dan de titel zelf kan
worden gezegd dat een kind te hebben.

205
00:08:58,230 --> 00:09:01,780
>> Bedenk dat de HTML gehad
hallo, komma, wereld eronder.

206
00:09:01,780 --> 00:09:06,090
En ik heb gewoon getekend binnen een
ovaal in plaats van een rechthoek net

207
00:09:06,090 --> 00:09:10,559
semantisch brengen dat, hoewel
Het is een knooppunt in de boom, zo te zeggen,

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

209
00:09:12,100 --> 00:09:12,800
Het is niet een tag.

210
00:09:12,800 --> 00:09:14,780
Of beter gezegd, het is niet een element.

211
00:09:14,780 --> 00:09:16,590
Het is gewoon een tekst knooppunt, als je wil.

212
00:09:16,590 --> 00:09:18,990
Maar deze zijn volledig
arbitraire menselijke conventies.

213
00:09:18,990 --> 00:09:23,180
Dit is nu net mijn manier van
neerkomt op wat ik zal als een aggregaat

214
00:09:23,180 --> 00:09:24,340
noem het document.

215
00:09:24,340 --> 00:09:27,750
>> En als een terzijde, het ding op
de super linker bovenhoek,

216
00:09:27,750 --> 00:09:32,080
geopend beugel uitroepteken doc
het type HTML, dit ziet eruit als een tag,

217
00:09:32,080 --> 00:09:35,560
maar het is de domme hoek geval
dat is er gewoon, gekopieerd en geplakt

218
00:09:35,560 --> 00:09:38,460
de browsers geven
Dit HTML versie 5.

219
00:09:38,460 --> 00:09:41,540
De wereld blijft veranderen wat de
eerste regel van de code in een pagina moeten zijn.

220
00:09:41,540 --> 00:09:43,820
Dit betekent alleen versie 5.

221
00:09:43,820 --> 00:09:45,950
Het maakt dus niet helemaal
kijken als de anderen.

222
00:09:45,950 --> 00:09:48,120
>> Oké, dus met dat
zei, je zult nu waarderen

223
00:09:48,120 --> 00:09:50,767
dit vrij deze domme
tattoo iemand kreeg.

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

225
00:09:51,990 --> 00:09:54,210
>> DAVID J MALAN: Oké,
en laten we nu eigenlijk duik

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

227
00:09:55,710 --> 00:09:58,610
Je zult zien dat de vorige keer herinneren
Ik opende de CS50 Appliance

228
00:09:58,610 --> 00:10:01,650
en ik deed iets als
simpel als openstelling gedit.

229
00:10:01,650 --> 00:10:05,190
En ik redde het bestand zelfs op
mijn desktop-- nergens speciale--

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

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

232
00:10:07,100 --> 00:10:10,984
>> Dus laat me dat doen
again-- hello.html Enter.

233
00:10:10,984 --> 00:10:13,900
En nu in dit bestand, ga ik
ga je gang en repliceren wat we net

234
00:10:13,900 --> 00:10:18,850
saw-- doc soort html Dan ga ik
doen openen beugel html gesloten beugel.

235
00:10:18,850 --> 00:10:21,890
En dan ga ik preemptively
openen en sluiten van de tag.

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

237
00:10:22,390 --> 00:10:23,598
Gewoon zo denk ik niet later vergeet.

238
00:10:23,598 --> 00:10:26,850
Het is gewoon goede praktijken, zoals het openen
en sluiten accolades tegelijk.

239
00:10:26,850 --> 00:10:28,900
>> En wat kwam daarna?

240
00:10:28,900 --> 00:10:30,582
U kunt denken aan de tatoeage.

241
00:10:30,582 --> 00:10:31,450
>> Publiek: Het hoofd.

242
00:10:31,450 --> 00:10:32,500
>> DAVID J MALAN: Het hoofd.

243
00:10:32,500 --> 00:10:36,020
En dan hier, ik
had de titel, denk ik.

244
00:10:36,020 --> 00:10:39,886
En de titel was willekeurig,
hello, wereld dicht titel.

245
00:10:39,886 --> 00:10:42,760
En dan naar beneden hier, het lichaam, van
course-- dan sluiten we de body tag.

246
00:10:42,760 --> 00:10:45,660
En dan gewoon enigszins redundant,
Ik had het zelfde ding hier beneden.

247
00:10:45,660 --> 00:10:47,150
>> Dus ik beweren dat dit een webpagina.

248
00:10:47,150 --> 00:10:49,050
Dit is iets dat
kon nu live op het web,

249
00:10:49,050 --> 00:10:51,925
hoewel natuurlijk, het is letterlijk
wonen op mijn bureaublad nu.

250
00:10:51,925 --> 00:10:55,837
Maar inderdaad, als ik gedit minimaliseren,
Ik zie op mijn bureaublad zijn icoon.

251
00:10:55,837 --> 00:10:58,420
Ook al is dit het apparaat,
U kan dit doen op Mac OS

252
00:10:58,420 --> 00:11:01,580
zonder TextEdit of
Ramen met Notepad zelfs.

253
00:11:01,580 --> 00:11:06,115
>> En als ik ga je gang en dubbelklik
dat zelfs, en select-- goed, laten we

254
00:11:06,115 --> 00:11:07,990
niet selecteren omdat
Chrome is niet te openen.

255
00:11:07,990 --> 00:11:09,281
Laten we verder gaan en openen Chrome.

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

257
00:11:10,160 --> 00:11:14,040
En doe dan Command-O voor de open
En ga naar mijn bureaublad

258
00:11:14,040 --> 00:11:15,320
en open dat bestand.

259
00:11:15,320 --> 00:11:20,120
Dat is hoe een browser interpreteert
HTML, van boven naar beneden, van links naar rechts.

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

261
00:11:21,314 --> 00:11:21,980
Hier is het hoofd.

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

263
00:11:23,250 --> 00:11:24,090
Hier is het lichaam.

264
00:11:24,090 --> 00:11:26,620
En inderdaad, zo
het maakt dat de webpagina.

265
00:11:26,620 --> 00:11:27,800
>> Maar let op de URL.

266
00:11:27,800 --> 00:11:32,430
Niemand van jullie zou kunnen trekken deze specifieke
pagina op uw laptops op dit moment,

267
00:11:32,430 --> 00:11:34,910
zelfs de binnenkant van uw
apparaat via de URL,

268
00:11:34,910 --> 00:11:40,130
omdat file: // geeft aan dat het eigenlijk
op mijn bestandssysteem, mijn harde schijf,

269
00:11:40,130 --> 00:11:40,990
niet de jouwe.

270
00:11:40,990 --> 00:11:42,440
Dus dit is niet zo handig.

271
00:11:42,440 --> 00:11:44,940
>> Laten we nu bewegen in de richting
met behulp van een echte web-server.

272
00:11:44,940 --> 00:11:48,309
En het blijkt dat de CS50 Appliance
is meer dan alleen een omgeving waarin

273
00:11:48,309 --> 00:11:51,100
kun je C-code schrijven en compileren
en voer het uit als je hebt gedaan.

274
00:11:51,100 --> 00:11:55,500
Ook is geprogram-
personeel om een ​​typische web vertegenwoordigen

275
00:11:55,500 --> 00:11:58,290
server dat is op het internet,
een die je zou betalen voor

276
00:11:58,290 --> 00:12:00,210
of een die in de zogenaamde cloud.

277
00:12:00,210 --> 00:12:02,600
>> En het draait
standaard gratis open source

278
00:12:02,600 --> 00:12:06,160
software bijvoorbeeld iets
genaamd Apache, die misschien

279
00:12:06,160 --> 00:12:08,700
nog steeds de meest populaire web
server software in de wereld

280
00:12:08,700 --> 00:12:11,030
dat duizenden websites vandaag de dag gebruiken.

281
00:12:11,030 --> 00:12:13,420
En het heeft ook zelfs
software zoals MySQL,

282
00:12:13,420 --> 00:12:16,240
dat een databaseserver
dat we uiteindelijk zullen krijgen,

283
00:12:16,240 --> 00:12:18,330
die alleen zeggen
Ik kan gaan behandelen

284
00:12:18,330 --> 00:12:22,040
mijn apparaat als een volwaardige server
dat betaal ik niet voor elders.

285
00:12:22,040 --> 00:12:25,980
Het leeft gewoon op mijn eigen laptop voor
ontwikkeling en gemak doeleinden.

286
00:12:25,980 --> 00:12:27,870
>> Dus laten we verder gaan en
profiteren van deze.

287
00:12:27,870 --> 00:12:30,120
Ik ga om te gaan en
open een terminal venster.

288
00:12:30,120 --> 00:12:33,030
En ik ga om verder te gaan en
move-- eigenlijk, eerst ben ik

289
00:12:33,030 --> 00:12:34,860
gaan om te navigeren naar mijn bureaublad.

290
00:12:34,860 --> 00:12:36,400
Als ik ls doen, er is hello.html.

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

292
00:12:37,022 --> 00:12:38,730
En ik ga om te gaan
gang en beginnen met

293
00:12:38,730 --> 00:12:40,800
een nieuwe map we hebben
niet gebruikt voor vandaag.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- Ik ga verhuizen
naar ../vhosts voor virtuele hosts--

295
00:12:46,840 --> 00:12:50,940
meer daarover in de future-- en vervolgens
in een map met de naam localhost,

296
00:12:50,940 --> 00:12:54,420
die de bijnaam bijna
elke computer, of het nu een Mac, PC,

297
00:12:54,420 --> 00:12:57,560
of Linux-computer, en vervolgens
specifiek in een directory die we,

298
00:12:57,560 --> 00:13:01,260
het personeel al voor u gemaakt wanneer
u het apparaat genaamd gedownload

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

300
00:13:01,760 --> 00:13:04,551
En zoals de naam al doet vermoeden, om het even wat
Ik zet in deze map, in theorie,

301
00:13:04,551 --> 00:13:07,790
gaat nu
publiek ten minste mensen

302
00:13:07,790 --> 00:13:10,030
die een directe
verbinding met mijn computer.

303
00:13:10,030 --> 00:13:13,160
>> Dus nu laat ik doorgaan en
doen cd om diezelfde directory

304
00:13:13,160 --> 00:13:15,490
zodat ik kan zien wat er
er aan de hand en het type ls.

305
00:13:15,490 --> 00:13:17,630
En inderdaad, dat is het
enige wat in daar.

306
00:13:17,630 --> 00:13:23,250
Ik eis nu dat, want ik heb dit gezet
bestand hello.html binnenkant van een directory

307
00:13:23,250 --> 00:13:26,940
genoemd openbare binnenkant van een directory
riep localhost binnenkant van een directory

308
00:13:26,940 --> 00:13:29,810
genaamd vhosts die
dankzij CS50 personeel

309
00:13:29,810 --> 00:13:34,390
is vooraf geconfigureerd om te zijn
de root van uw webserver,

310
00:13:34,390 --> 00:13:36,900
Ik kan nu hopelijk zal dit doen.

311
00:13:36,900 --> 00:13:38,390
>> Ik ga naar het openen van een nieuw tabblad.

312
00:13:38,390 --> 00:13:40,090
En ik ga om te gaan niet naar bestand: //.

313
00:13:40,090 --> 00:13:44,520
Ik ga werkelijk te gebruiken
http / localhost, die

314
00:13:44,520 --> 00:13:47,470
nogmaals, is de bijnaam
voor mijn eigen server.

315
00:13:47,470 --> 00:13:51,085
En dan ga ik om te gaan met wat
bestandsnaam, alleen maar om duidelijk te zijn?

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

317
00:13:52,680 --> 00:13:54,320
Waar is dit verhaal waarschijnlijk gaat?

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
>> Dus met andere woorden, ik wil nu dit
is mijn eigen computer, mijn eigen apparaat,

322
00:14:04,270 --> 00:14:05,660
alsof het een echte server.

323
00:14:05,660 --> 00:14:07,490
Zijn bijnaam is localhost.

324
00:14:07,490 --> 00:14:10,210
Maar denk aan localhost als soortgelijke
Facebook.com google.com, wat dan ook.

325
00:14:10,210 --> 00:14:11,600
Het is gewoon mijn lokale naam.

326
00:14:11,600 --> 00:14:14,810
En dan is het laatste wat ik wil is in de
wortel van de harde schijf, om zo te zeggen,

327
00:14:14,810 --> 00:14:17,729
of de root van de webserver,
ergo de slash en dan

328
00:14:17,729 --> 00:14:18,770
de bestandsnaam hello.html.

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

330
00:14:19,880 --> 00:14:21,930
>> Laat me uitzoomen en druk op Enter.

331
00:14:21,930 --> 00:14:24,266
En inderdaad, er is nu mijn webpagina.

332
00:14:24,266 --> 00:14:25,390
Dus het is iets anders.

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

334
00:14:26,880 --> 00:14:27,904
Dit is de oude versie.

335
00:14:27,904 --> 00:14:29,070
Laat me krimpen het lettertype terug.

336
00:14:29,070 --> 00:14:29,745
Dit is de oude.

337
00:14:29,745 --> 00:14:30,890
Dit is de nieuwe.

338
00:14:30,890 --> 00:14:35,430
Maar wat er fundamenteel gebeurt
Nu is dat HTTP wordt gebruikt.

339
00:14:35,430 --> 00:14:39,344
>> Laten we dit een beetje meer duidelijk of,
als je wil, een beetje ingewikkelder.

340
00:14:39,344 --> 00:14:41,760
Laat me gaan naar rechtsonder
bovenhoek van mijn toestel.

341
00:14:41,760 --> 00:14:44,000
En merk op dat dit alles
tijd, er is al een aantal.

342
00:14:44,000 --> 00:14:47,330
Dat is het unieke adres
van uw CS50 Appliance.

343
00:14:47,330 --> 00:14:50,800
Het is een privé-adres,
zoals wordt gesuggereerd door de 172,16,

344
00:14:50,800 --> 00:14:53,860
wat betekent gewoon alleen je fysiek
hebt toegang tot deze webserver.

345
00:14:53,860 --> 00:14:56,340
Alles is een firewall en
mooi beschermd tegen de rest

346
00:14:56,340 --> 00:14:58,130
van de wereld hierdoor adressering.

347
00:14:58,130 --> 00:15:01,920
>> En merk nu al als ik naar
dit adres, niet in mijn toestel,

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

349
00:15:04,340 --> 00:15:05,930
Dit is mijn Mac nu.

350
00:15:05,930 --> 00:15:08,460
En nu ga ik om open te stellen
deze versie van Chrome hier.

351
00:15:08,460 --> 00:15:17,370
En ik ga naar http: //172.16.25
/ En ik vergeet de rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Dus ik ga bezoeken uit mijn Mac
dat IP-adres /hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
En nu zie ik vanuit mijn Mac
dat mijn CS50 Appliance, die is

354
00:15:29,850 --> 00:15:32,600
IP adres dat
nummer, wordt inderdaad gedraagt

355
00:15:32,600 --> 00:15:34,320
zoals een webserver op het internet.

356
00:15:34,320 --> 00:15:36,944
Het duurt niet een mooi en makkelijk om te hebben
onthouden naam zoals Facebook.com,

357
00:15:36,944 --> 00:15:40,370
maar het is met behulp van HTTP
blijkbaar, hoewel Chrome

358
00:15:40,370 --> 00:15:43,560
is een soort van de vereenvoudiging van de wereld
voor ons, maar ons niet zien HTTP.

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

360
00:15:46,210 --> 00:15:48,470
Chrome is gewoon besparen sommige
toetsaanslagen deze dagen.

361
00:15:48,470 --> 00:15:50,530
En dat is wat we nu zien.

362
00:15:50,530 --> 00:15:51,890
>> Dus dat is allemaal prima en goed.

363
00:15:51,890 --> 00:15:53,740
Maar het is een vrij underwhelming pagina.

364
00:15:53,740 --> 00:15:56,230
Laat me naar binnen gaan en iets te doen
een beetje anders nu.

365
00:15:56,230 --> 00:15:57,910
Dus laat me terug gaan naar gedit.

366
00:15:57,910 --> 00:16:00,580
En in plaats van hallo,
wereld, laten we een beeld.

367
00:16:00,580 --> 00:16:05,880
En ik beweerde van before-- laat me gaan
in mijn localhost directory publiek.

368
00:16:05,880 --> 00:16:10,580
En laat me gaan en een kopie van een
hele hoop bestanden van vandaag

369
00:16:10,580 --> 00:16:15,633
uit mijn Dropbox-map in hier.

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

371
00:16:19,470 --> 00:16:21,680
>> Nu als ik typ ls, kijk
al deze bestanden

372
00:16:21,680 --> 00:16:24,940
die ik heb verspreid door de
website cursus op voorhand van vandaag,

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

374
00:16:26,830 --> 00:16:27,830
Dus er is die ene.

375
00:16:27,830 --> 00:16:30,730
En herinneren deze dwaze
van vorig tijd-- cat.jpg.

376
00:16:30,730 --> 00:16:34,550
Dus laat me proberen te verankeren
cat.jpg binnenkant van mijn webpagina.

377
00:16:34,550 --> 00:16:37,690
>> Ik ga om verder te gaan
en doe cat.jpg, te redden.

378
00:16:37,690 --> 00:16:38,950
Laat me teruggaan naar Chrome.

379
00:16:38,950 --> 00:16:41,140
En laat me in de zoomen
lettertype en nu opnieuw.

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

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

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

383
00:16:48,210 --> 00:16:51,520
Standby-- Ik heb nog steeds de oude
versie van mijn Desktop geopend.

384
00:16:51,520 --> 00:16:56,020
Dus laat me gaan in mijn vhost, mijn
localhost, mijn publiek, en hello.html.

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

386
00:16:57,320 --> 00:17:00,670
Dus nu laat ik doorgaan en
zeg cat.jpg binnenkant van het lichaam

387
00:17:00,670 --> 00:17:02,830
waar ik wil dat het is
weergegeven en herladen.

388
00:17:02,830 --> 00:17:04,560
Natuurlijk, dit is niet correct.

389
00:17:04,560 --> 00:17:08,050
>> Dus ik moet de browser een beetje vertellen
meer bewust wat ik wil dat het doet.

390
00:17:08,050 --> 00:17:10,210
Gewoon typen van de naam is
duidelijk onvoldoende.

391
00:17:10,210 --> 00:17:15,134
Zo herinneren dat er nog een
tag, beeld, img voor kort.

392
00:17:15,134 --> 00:17:17,550
Dat is gewoon omdat mensen
hou niet van het type volledige woorden.

393
00:17:17,550 --> 00:17:19,050
En dan kunnen we de bron doen = "cat.jpg".

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

395
00:17:21,470 --> 00:17:23,550
>> En nu ga ik doen
een ding anders hier.

396
00:17:23,550 --> 00:17:25,390
Hoewel alle
onze labels tot nu toe hebben

397
00:17:25,390 --> 00:17:28,086
had dit begrip
start-tag en een eind tag,

398
00:17:28,086 --> 00:17:30,210
dat lukt nog niet echt
gevoel voor een beeld, toch?

399
00:17:30,210 --> 00:17:32,430
Een beeld is er of niet.

400
00:17:32,430 --> 00:17:36,650
En zo is de mens zijn gekomen
up met een eenvoudiger conventie.

401
00:17:36,650 --> 00:17:40,310
Wanneer u een tag die kan zowel
beginnen en eindigen op hetzelfde tijd--

402
00:17:40,310 --> 00:17:43,790
het kan leeg zijn, dus om gewoon speak--
zet de slash binnenkant van de tag

403
00:17:43,790 --> 00:17:44,710
helemaal aan het eind.

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

405
00:17:45,776 --> 00:17:47,150
Nu wil ik terug naar mijn browser.

406
00:17:47,150 --> 00:17:50,377
Klik Reload Verdomme, is er iets mis.

407
00:17:50,377 --> 00:17:52,460
Je hebt dit waarschijnlijk gezien
af en toe op het web,

408
00:17:52,460 --> 00:17:53,600
zelfs als het niet jouw schuld is geweest.

409
00:17:53,600 --> 00:17:54,766
Het is de schuld van de webserver.

410
00:17:54,766 --> 00:17:56,240
Wat odes deze lijken erop te wijzen?

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

412
00:17:57,450 --> 00:17:58,009
Het is gebroken.

413
00:17:58,009 --> 00:17:59,300
Dat is waar het beeld hoort.

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

415
00:17:59,700 --> 00:18:01,560
>> Publiek: Maar het doet niet
hebben toegang tot het beeld.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J MALAN: Het maakt niet
hebben toegang tot het beeld.

417
00:18:03,070 --> 00:18:05,230
Dat, of erger, misschien
er bestaat niet eens.

418
00:18:05,230 --> 00:18:06,729
Laten we eens kijken of we niet kunnen diagnosticeren dat.

419
00:18:06,729 --> 00:18:09,390
Herinneren van de vorige keer dat als
in Chrome, in het apparaat,

420
00:18:09,390 --> 00:18:11,870
of zelfs op uw Mac of pc,
ga je naar de Developer menu

421
00:18:11,870 --> 00:18:14,650
en ga naar de Developer Tools
optie, die waarschijnlijk je hebt

422
00:18:14,650 --> 00:18:16,850
weinig of nooit gebruikt.

423
00:18:16,850 --> 00:18:20,780
En als ik ga naar netwerk
en reload de pagina,

424
00:18:20,780 --> 00:18:24,110
laten we eigenlijk kijken naar de HTTP
bewerkingen die worden gemaakt.

425
00:18:24,110 --> 00:18:28,400
>> Het lijkt erop dat hello.html is
inderdaad OK, vandaar de 200.

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

427
00:18:30,630 --> 00:18:31,650
Dus het is niet een 404.

428
00:18:31,650 --> 00:18:33,490
File waarschijnlijk bestaat.

429
00:18:33,490 --> 00:18:35,250
403 betekent verboden.

430
00:18:35,250 --> 00:18:37,790
Dus dit is een beetje verwarrend.

431
00:18:37,790 --> 00:18:42,340
Ik ga om terug te gaan
naar mijn terminal venster.

432
00:18:42,340 --> 00:18:43,700
Laat me inzoomen tot hier.

433
00:18:43,700 --> 00:18:44,750
En laat me doen een ls.

434
00:18:44,750 --> 00:18:46,430
Er is diezelfde bestanden.

435
00:18:46,430 --> 00:18:49,410
>> Nu wil ik u een ls-l,
die je hebt waarschijnlijk

436
00:18:49,410 --> 00:18:53,350
eerder gebruikt om te kijken naar het bestand
maten misschien of timestamps.

437
00:18:53,350 --> 00:18:55,590
En we zien een hele hoop
overweldigende informatie.

438
00:18:55,590 --> 00:18:57,040
Maar let op een paar details.

439
00:18:57,040 --> 00:19:01,660
Hier is hello.html in deze
rij 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 het is gewoon het apparaat dat
gebruiksvriendelijk door te wijzen op JPEG's

442
00:19:05,850 --> 00:19:07,380
in paars als deze.

443
00:19:07,380 --> 00:19:11,470
Maar wat anders is naast
de bestandsgrootte en de naam van het bestand?

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

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

446
00:19:14,754 --> 00:19:16,920
DAVID J MALAN: Ja, er is
nog twee R's hier.

447
00:19:16,920 --> 00:19:20,170
Let op wat hello.html is er aan de hand.

448
00:19:20,170 --> 00:19:24,050
Zo blijkt het dat de naam
deze directory publiek is belangrijk.

449
00:19:24,050 --> 00:19:26,400
Alles wat in deze map
wordt bedoeld publiek.

450
00:19:26,400 --> 00:19:28,790
Maar het is niet voldoende
gewoon, bestanden in daar.

451
00:19:28,790 --> 00:19:31,480
Je moet ook veranderen
de wijze van de bestanden,

452
00:19:31,480 --> 00:19:35,180
verander de permissies van
het bestand naar proactief niet

453
00:19:35,180 --> 00:19:37,650
zijn de standaardinstelling,
en dat is dat ik alleen kan lezen

454
00:19:37,650 --> 00:19:39,220
en schrijf het, ik zijnde de eigenaar.

455
00:19:39,220 --> 00:19:43,540
Ik wil dat de hele wereld iedereen
in staat zijn om mijn dossier te lezen, om zo te zeggen.

456
00:19:43,540 --> 00:19:44,950
Lees betekent gewoon bekijken.

457
00:19:44,950 --> 00:19:49,780
>> En inderdaad, zoals u zult zien in probleem
stelde zeven, dat is wat de gemiddelde deze R's.

458
00:19:49,780 --> 00:19:53,160
Deze twee R's gemiddelde laat iedereen
anders in de wereld te lezen het ook,

459
00:19:53,160 --> 00:19:55,300
zeker nu
het is in deze map.

460
00:19:55,300 --> 00:19:59,620
Dus de eenvoudigste manier om dit op te lossen is om
ga naar mijn prompt en doe chmod voor verandering

461
00:19:59,620 --> 00:20:05,580
modus en doe dan een + r, helemaal,
iedereen, alles, plus r voor lezen,

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

463
00:20:07,944 --> 00:20:10,360
Niets lijkt te gebeuren, welke
betekent meestal een goede zaak.

464
00:20:10,360 --> 00:20:13,850
Dus ls-l again-- nu
Laten we eens kijken naar cat.jpg.

465
00:20:13,850 --> 00:20:15,750
En deze toestemming
lijken te zijn veranderd.

466
00:20:15,750 --> 00:20:18,670
Even terzijde, als je een
fout en je, bijvoorbeeld,

467
00:20:18,670 --> 00:20:23,210
zojuist uw-- ik niet weten-- essay
publiekelijk toegankelijke door een ongeval,

468
00:20:23,210 --> 00:20:25,480
kunt u het tegenovergestelde doen, chmod a-r.

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

470
00:20:25,909 --> 00:20:28,200
Hoewel eerlijk gezegd, het moet niet
zijn in de publieke directory

471
00:20:28,200 --> 00:20:29,760
toch als dat de zorg.

472
00:20:29,760 --> 00:20:32,475
>> Dus laten we nu teruggaan naar
mijn browser en reload.

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

474
00:20:32,904 --> 00:20:34,820
En ik ga klikken
de kleine Ghostbusters

475
00:20:34,820 --> 00:20:38,030
symbool dat deel van het wissen
scherm, zodat we kunnen nieuwe aanvragen zien.

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

477
00:20:40,630 --> 00:20:43,010
Maar wat nog belangrijker is,
technisch, er

478
00:20:43,010 --> 00:20:45,565
nr 200, die
betekent dat we het OK.

479
00:20:45,565 --> 00:20:47,190
Oké, dus dat is allemaal prima en goed.

480
00:20:47,190 --> 00:20:48,940
Maar we zijn niet het maken van
het beste van websites,

481
00:20:48,940 --> 00:20:51,967
noch gaan we te hard om te proberen
maken de chicste van websites vandaag.

482
00:20:51,967 --> 00:20:54,550
Maar laten we in ieder geval iets te doen
super vertrouwd voordat ratelende

483
00:20:54,550 --> 00:20:56,030
off een paar andere labels.

484
00:20:56,030 --> 00:20:58,470
Dus stel ik wil niet alleen een kat hier.

485
00:20:58,470 --> 00:21:02,530
Stel dat ik eigenlijk dit wil
kat om te linken naar iets.

486
00:21:02,530 --> 00:21:07,210
>> Ik zou kunnen, bijvoorbeeld
iets als dit te doen.

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

488
00:21:08,580 --> 00:21:12,890
een voor anker href voor
hyper verwijzing equals--

489
00:21:12,890 --> 00:21:17,440
en laten we gewoon iets doen
zoals www.google.com dicht

490
00:21:17,440 --> 00:21:19,540
citeer dicht beugel.

491
00:21:19,540 --> 00:21:22,000
En nu zoeken naar katten.

492
00:21:22,000 --> 00:21:23,520
Sluiten anchor tag.

493
00:21:23,520 --> 00:21:26,760
Dit heeft dus slechts één soort
van fundamenteel nieuw detail.

494
00:21:26,760 --> 00:21:28,190
De tag natuurlijk anders.

495
00:21:28,190 --> 00:21:31,770
Het is de naam van een voor anker
href of hyper referentie.

496
00:21:31,770 --> 00:21:35,269
>> Maar nog belangrijker, er is
Deze syntactische functie hier.

497
00:21:35,269 --> 00:21:37,810
Dit is wat we beginnen te bellen
niet een tag, maar een attribuut.

498
00:21:37,810 --> 00:21:40,830
En een attribuut is iets dat
wijzigt het gedrag van een tag.

499
00:21:40,830 --> 00:21:45,400
En dit attribuut, href, middelen
het gedrag van dit anker te wijzigen

500
00:21:45,400 --> 00:21:48,430
zodat wanneer het wordt geklikt,
het gaat om deze URL hier.

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

502
00:21:50,330 --> 00:21:53,951
>> Ondertussen, wat is dit
tekst hier zal worden?

503
00:21:53,951 --> 00:21:55,950
Nou, dat gaat worden
Wat de werkelijk menselijke

504
00:21:55,950 --> 00:21:58,470
ziet als het onderstreepte
koppeling, zo simpel is dat.

505
00:21:58,470 --> 00:21:59,220
Dus laten we dit proberen.

506
00:21:59,220 --> 00:21:59,980
Laat ik sla het op.

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

508
00:22:01,650 --> 00:22:05,360
Maar in de versies online, zult u zien
de werkelijke bestandsnamen we pre-voorbereid.

509
00:22:05,360 --> 00:22:06,805
Laat me gaan en herladen.

510
00:22:06,805 --> 00:22:08,680
En nu is het een zeer
underwhelming pagina nog steeds.

511
00:22:08,680 --> 00:22:10,910
Maar als ik de muis boven er--
en het is een beetje klein,

512
00:22:10,910 --> 00:22:13,576
maar-- je kunt zien in de bodem
linker bovenhoek van het scherm,

513
00:22:13,576 --> 00:22:15,242
het is inderdaad gaat om google.com.

514
00:22:15,242 --> 00:22:19,280
En als ik dat klikt, zal het
klop me weg naar de werkelijke Google.

515
00:22:19,280 --> 00:22:22,610
>> Maar merk hier een kans voor
uitbuiting, net als een terzijde.

516
00:22:22,610 --> 00:22:25,150
En we komen terug naar andere komen
kwesties van veiligheid voordat lang.

517
00:22:25,150 --> 00:22:29,290
Want er is deze tweedeling
tussen waar je heen gaat en wat je zegt,

518
00:22:29,290 --> 00:22:34,722
je kon iets doen als
dit-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, en nu als ik herladen
na het opslaan van die pagina,

520
00:22:37,134 --> 00:22:38,800
het lijkt erop dat ik ga om te gaan naar Google.

521
00:22:38,800 --> 00:22:40,966
Maar er is geen reden dat ik
moeten gaan naar Google, toch?

522
00:22:40,966 --> 00:22:47,460
Ik zou eigenlijk naar iets als
badguy.com, herlaad de pagina hier.

523
00:22:47,460 --> 00:22:49,750
En let op, het ziet er nog steeds als Google.

524
00:22:49,750 --> 00:22:52,020
En alleen als ik scherp
genoeg hier boven te zweven

525
00:22:52,020 --> 00:22:54,770
zie ik het is zelfs naar
naar een andere locatie.

526
00:22:54,770 --> 00:22:57,400
>> Dus als je ooit hebt gekregen
een e-mail, in het bijzonder

527
00:22:57,400 --> 00:22:59,610
één van Paypal, of
schijnbaar van Paypal

528
00:22:59,610 --> 00:23:01,830
waarin u wordt gevraagd om in te loggen
om uw account, dit

529
00:23:01,830 --> 00:23:06,380
Daarom moet je nooit
ooit op koppelingen in e-mails,

530
00:23:06,380 --> 00:23:07,930
eerlijk gezegd, geen links in e-mails.

531
00:23:07,930 --> 00:23:10,380
Als je weet dat je daadwerkelijk hebt
geld in Paypal of Bank

532
00:23:10,380 --> 00:23:14,250
van Amerika of Fidelity of enige
website, handmatig typt u deze in.

533
00:23:14,250 --> 00:23:17,530
Want kijk eens hoe gemakkelijk het is om
truc iemand in het presenteren van wat

534
00:23:17,530 --> 00:23:18,526
ziet eruit als een link.

535
00:23:18,526 --> 00:23:20,400
Maar het kon eigenlijk
ga absoluut overal.

536
00:23:20,400 --> 00:23:23,301
>> En er is veel groter
bedreigingen dan dit.

537
00:23:23,301 --> 00:23:25,300
In feite is dit een beetje
van een raaklijn nu maar één

538
00:23:25,300 --> 00:23:28,430
van de beste die ik ooit heb gezien
die inmiddels is gesloten,

539
00:23:28,430 --> 00:23:34,060
is iemand leidde mensen
to-- dus dit zou kunnen zeggen,

540
00:23:34,060 --> 00:23:37,660
Klik hier om in te loggen in uw
rekening, een bankrekening.

541
00:23:37,660 --> 00:23:40,985
En dit was Bank of the West.

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

543
00:23:43,030 --> 00:23:44,250
>> Dus iemand kocht deze.

544
00:23:44,250 --> 00:23:47,090
En het is een beetje makkelijker om te zien
het in een mono-spaced 'lettertype ingezoomd

545
00:23:47,090 --> 00:23:49,190
in op een 30-voet projector.

546
00:23:49,190 --> 00:23:51,720
Maar als het is klein lettertype in een
e-mail die u ontvangt,

547
00:23:51,720 --> 00:23:54,690
dit ziet eruit als bankofthewest.com,
niet bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
die iemand had betaald $ 10 te kopen.

549
00:23:58,230 --> 00:24:00,840
Vervolgens leidde dit hen naar de
equivalent van een aantal slechte website.

550
00:24:00,840 --> 00:24:05,540
>> En je zult zien too-- eigenlijk kunnen we doen
dit-- als ik naar de eigenlijke website,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, weer,
recall van de vorige keer

552
00:24:10,335 --> 00:24:13,210
dat als dit is hun webpagina en
je benieuwd hoe het werkt bent,

553
00:24:13,210 --> 00:24:15,610
je kunt zeker naar
Chrome developer tools.

554
00:24:15,610 --> 00:24:18,890
En u kunt al het zien
HTML er netjes opgemaakt.

555
00:24:18,890 --> 00:24:20,890
>> Maar meer to the point,
je cam-- laten sluiten

556
00:24:20,890 --> 00:24:24,760
dit-- je kunt gaan naar Beeld
Developer Bron weergeven.

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

558
00:24:25,770 --> 00:24:28,350
Waarom heb ik niet gewoon kopiëren
dat alles En toen ik

559
00:24:28,350 --> 00:24:31,630
kan gaan in mijn kleine gedit venster
hier en maak mijn eigen webpagina.

560
00:24:31,630 --> 00:24:33,210
Bewaar deze in hello.html.

561
00:24:33,210 --> 00:24:36,770
En waarschijnlijk dit gaat breken,
want het is niet zo gemakkelijk gewoonlijk.

562
00:24:36,770 --> 00:24:41,590
Maar nu als ik herlaad mijn eigen pagina op
Mijn eigen CS50 Appliance en raakte reload,

563
00:24:41,590 --> 00:24:42,990
OK, wat spullen kapot.

564
00:24:42,990 --> 00:24:45,750
Maar ik ben er vrij dicht bij het hebben van
mijn eigen banking website, toch?

565
00:24:45,750 --> 00:24:46,570
Dit alles HTML--

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

567
00:24:47,370 --> 00:24:49,210
>> DAVID J MALAN: --Ik
niet actually-- en je

568
00:24:49,210 --> 00:24:52,210
weet er iemand zijn die
zou eigenlijk op deze links ook.

569
00:24:52,210 --> 00:24:54,864
Zo duidelijk, wat spullen kapot.

570
00:24:54,864 --> 00:24:56,780
Maar dat gaat leiden
ons in een discussie,

571
00:24:56,780 --> 00:25:00,810
onnodig op dit moment, met betrekking tot wat
CSS, cascading style sheets, zijn,

572
00:25:00,810 --> 00:25:03,410
en hoe je eigenlijk
download dan de andere HTML-bestanden

573
00:25:03,410 --> 00:25:06,140
en JPEG-bestanden GIF-bestanden die
de website zouden kunnen worden gebruikt.

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

575
00:25:07,960 --> 00:25:11,110
Maar het is echt neer op
deze zeer eenvoudige heuristiek.

576
00:25:11,110 --> 00:25:14,450
>> Dus nu laten we gewoon doorlopen een
aantal andere voorbeelden van HTML

577
00:25:14,450 --> 00:25:16,680
alleen maar om u een idee te geven
van wat je nog kunt doen.

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

579
00:25:18,670 --> 00:25:23,240
Neem nu dat je een webpagina maken
met een lijst van de huizen in de quad.

580
00:25:23,240 --> 00:25:28,960
Ik zou de ul-tag te gebruiken voor niet-geordende
lijst en de lijst-item kind

581
00:25:28,960 --> 00:25:33,760
en dan herhalen over-- of lijst,
rather-- de huizen in kwestie.

582
00:25:33,760 --> 00:25:36,080
>> En als ik open dit op, laten we dit doen.

583
00:25:36,080 --> 00:25:40,670
Laten we gaan niet naar hello.html,
maar om list.html.

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

585
00:25:42,160 --> 00:25:43,000
Hoe kan ik dit oplossen?

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

587
00:25:45,679 --> 00:25:47,220
Het is hetzelfde probleem als voorheen, toch?

588
00:25:47,220 --> 00:25:52,510
Dus laat me doen chmod-- oops--
chmod a + r van list.html.

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

590
00:25:54,610 --> 00:25:59,610
En nu als ik ga terug naar mijn browser
en klik op Reload, daar is het.

591
00:25:59,610 --> 00:26:02,360
Dus als je ooit hebt willen maken
een lijst met opsommingstekens, kunt u dat doen.

592
00:26:02,360 --> 00:26:06,210
Wilt u super luxe te zijn en
een geordende lijst, niet een ongeordende lijst,

593
00:26:06,210 --> 00:26:10,170
veranderen die aan ol, herlaad de pagina, en
nu de browser zal het nummer voor u.

594
00:26:10,170 --> 00:26:11,241
>> Wat kunnen we anders doen?

595
00:26:11,241 --> 00:26:13,990
Nou, een paar others-- indien
je hebt lange alinea van text--

596
00:26:13,990 --> 00:26:15,698
bijvoorbeeld sommige
Latijnse tekst zoals dit--

597
00:26:15,698 --> 00:26:20,730
en u wilt het in aparte paragrafen,
geopend p, dicht p voor de paragraaf tag.

598
00:26:20,730 --> 00:26:22,010
En doe het opnieuw en opnieuw.

599
00:26:22,010 --> 00:26:26,600
En als ik het nu open te stellen dit bestand,
paragraphs.html, nou, dit

600
00:26:26,600 --> 00:26:27,570
wordt steeds vervelend.

601
00:26:27,570 --> 00:26:34,320
Dus nu laten we gewoon terug naar mijn
prompt, chmod a + r r ster .html--

602
00:26:34,320 --> 00:26:36,099
een leuk klein wild card om zo te zeggen.

603
00:26:36,099 --> 00:26:37,890
Het moet allemaal op te lossen
deze problemen voor mij.

604
00:26:37,890 --> 00:26:38,990
Laten we het herladen.

605
00:26:38,990 --> 00:26:40,500
Er zijn drie paragrafen.

606
00:26:40,500 --> 00:26:42,930
>> En nu laten we gaan vooruit
en het openstellen van een andere.

607
00:26:42,930 --> 00:26:44,310
Wat dacht je van tafel?

608
00:26:44,310 --> 00:26:46,440
U zult tafel looks merken
een beetje ingewikkelder.

609
00:26:46,440 --> 00:26:49,110
Maar het is hetzelfde idea--
geopend tag open tag,

610
00:26:49,110 --> 00:26:51,360
geopend, open, openen, sluiten tag open tag.

611
00:26:51,360 --> 00:26:54,410
En deze toevallig voor te staan
tafel, waarvan de grens is blijkbaar

612
00:26:54,410 --> 00:26:58,500
gaat een dikte 1-- wat
dat means-- tafel rij, tafel

613
00:26:58,500 --> 00:27:00,320
gegevens, waardoor een cel.

614
00:27:00,320 --> 00:27:03,840
En als ik ga terug naar mijn browser
hier en ga naar table.html,

615
00:27:03,840 --> 00:27:05,840
kun je iets zien
als dit, afschuwelijk.

616
00:27:05,840 --> 00:27:07,840
Maar we zullen naar het punt te krijgen
waar we kunnen eigenlijk

617
00:27:07,840 --> 00:27:09,260
maken dingen mooier dan dat.

618
00:27:09,260 --> 00:27:10,530
>> Dus laat mij bepalen voor nu.

619
00:27:10,530 --> 00:27:11,870
Er is trossen van meer tags.

620
00:27:11,870 --> 00:27:15,225
En HTML is prachtig om te halen
want, eerlijk gezegd, alles wat je hoeft te doen

621
00:27:15,225 --> 00:27:17,600
is kijken naar bestaande webpagina's
waarmee je bekend bent.

622
00:27:17,600 --> 00:27:20,340
En je bent zoals, oh, dat is hoe
zij deden dit esthetisch.

623
00:27:20,340 --> 00:27:23,159
>> Of u kunt kijken op elke online
middelen hoe HTML werkt,

624
00:27:23,159 --> 00:27:25,700
en je zult zien dat er een
hele vocabulaire van andere labels.

625
00:27:25,700 --> 00:27:30,110
Maar met de eenvoudige mentale model
alleen dat bijna elke tag die u opent

626
00:27:30,110 --> 00:27:33,620
moet worden afgesloten, echt
doet voldoende om zichzelf te leren

627
00:27:33,620 --> 00:27:36,950
HTML na begrijpen
deze fundamentele ideeën van labels

628
00:27:36,950 --> 00:27:40,520
en attributen en de welgevormdheidsregels
dat we het over gehad hebben,

629
00:27:40,520 --> 00:27:44,697
sluiten van iets dat we zouden kunnen openen
zodat we niet verwarren een browser.

630
00:27:44,697 --> 00:27:46,780
Dus laten we nu dit naar
een interessanter niveau

631
00:27:46,780 --> 00:27:48,100
door naar de eigenlijke.

632
00:27:48,100 --> 00:27:51,095
En laten we naar mijn Mac
hier, naar google.com.

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

634
00:27:52,280 --> 00:27:54,020
En nu notice-- laten we dit doen.

635
00:27:54,020 --> 00:27:57,280
Ik gong naar
Instellingen, Search Settings.

636
00:27:57,280 --> 00:28:01,070
Ik wil dat dit vervelend moment uit te schakelen
resultaten ding waar het onmiddellijk

637
00:28:01,070 --> 00:28:02,450
begint te spelen op uw het typen.

638
00:28:02,450 --> 00:28:05,300
Laten we dit de oudere school, zodat
we echt zien wat er gaande is.

639
00:28:05,300 --> 00:28:08,260
>> Dus ik ga sparen mijn
Google instellingen hier.

640
00:28:08,260 --> 00:28:11,160
En nu notice-- ik ga
zoeken naar iets als katten.

641
00:28:11,160 --> 00:28:14,500
En het is nog steeds auto doet
hier volledig, maar op basis van de dingen

642
00:28:14,500 --> 00:28:15,970
mensen in het verleden hebben getypt.

643
00:28:15,970 --> 00:28:17,490
Maar let op wat er gaat gebeuren.

644
00:28:17,490 --> 00:28:20,272
>> In het URL momenteel
is dit, gewoon google.com.

645
00:28:20,272 --> 00:28:22,650
En technisch, het is slash.

646
00:28:22,650 --> 00:28:25,910
Google is gewoon het opslaan van een karakter
en ons dat niet laten zien.

647
00:28:25,910 --> 00:28:30,400
Zij tonen ons https, net
super geruststellend dat we zijn

648
00:28:30,400 --> 00:28:32,850
op een beveiligde of versleutelde pagina.

649
00:28:32,850 --> 00:28:35,690
>> Dus laat me gaan en zoeken naar katten.

650
00:28:35,690 --> 00:28:37,670
Nu kreeg dit echt
overweldigend snel.

651
00:28:37,670 --> 00:28:39,470
Kijk naar de lengte van deze URL.

652
00:28:39,470 --> 00:28:43,070
Maar het blijkt dat de meeste van dit spul
in de URL is eigenlijk vrij nutteloos.

653
00:28:43,070 --> 00:28:45,320
Ik ga om te beginnen het schrappen
dingen die ik niet begrijp.

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

655
00:28:46,560 --> 00:28:47,360
Ik zie katten.

656
00:28:47,360 --> 00:28:48,470
Ik begrijp katten.

657
00:28:48,470 --> 00:28:50,380
Ik weet niet waarom katten zijn er weer.

658
00:28:50,380 --> 00:28:52,620
Ik weet het echt niet
wat dit onzin is.

659
00:28:52,620 --> 00:28:56,030
Dus ik ga gewoon blijven
markeren en verwijderen stuff

660
00:28:56,030 --> 00:28:59,905
dat begrijp ik niet,
destilleren van de URL in alleen deze.

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

662
00:29:00,920 --> 00:29:02,270
>> Laat me nu krijg voeren opnieuw.

663
00:29:02,270 --> 00:29:03,814
Het lijkt erop dat Google nog steeds werkt.

664
00:29:03,814 --> 00:29:06,980
Dus om wat voor reden, ze zijn het toevoegen van een
veel dingen om standaard hun URL.

665
00:29:06,980 --> 00:29:09,000
Maar het is niet strikt noodzakelijk.

666
00:29:09,000 --> 00:29:10,340
Dus wat leuk is over dit?

667
00:29:10,340 --> 00:29:13,630
Nou, laat me gaan en
openstellen van Chrome Inspector.

668
00:29:13,630 --> 00:29:15,960
Er is een kleine muis snelkoppeling voor.

669
00:29:15,960 --> 00:29:17,360
>> Ga naar het tabblad Netwerk.

670
00:29:17,360 --> 00:29:19,340
En nu laat ik herladen
Deze pagina opnieuw.

671
00:29:19,340 --> 00:29:20,280
En ik houd Shift.

672
00:29:20,280 --> 00:29:22,520
Even terzijde, browsers
de neiging om te cachen of opslaan

673
00:29:22,520 --> 00:29:24,697
informatie gewoon omwille van de efficiëntie van.

674
00:29:24,697 --> 00:29:27,280
Maar meestal, houdt Shift en
herladen zal alles dwingen

675
00:29:27,280 --> 00:29:28,994
om opnieuw te beginnen vanaf het begin.

676
00:29:28,994 --> 00:29:30,410
En dat is wat ik hier wil doen.

677
00:29:30,410 --> 00:29:33,550
>> En merk op al deze
rijen die net verschenen.

678
00:29:33,550 --> 00:29:37,920
Het blijkt dat in een bepaalde web
pagina, kan er slechts één bestand

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- of er
misschien 52, zoals in dit geval.

680
00:29:43,500 --> 00:29:45,820
Toen ik bezoek google.com,
blijkbaar, mijn browser

681
00:29:45,820 --> 00:29:49,650
start 52 afzonderlijke HTTP-verzoeken.

682
00:29:49,650 --> 00:29:50,520
Waarom is dat?

683
00:29:50,520 --> 00:29:53,380
>> Nou, kijk naar wat er in zit
van deze webpagina up top.

684
00:29:53,380 --> 00:29:55,620
Er is niet alleen tekst,
maar er is werkelijke beelden

685
00:29:55,620 --> 00:29:57,130
katten naar rechts.

686
00:29:57,130 --> 00:29:59,110
Er is een kleurrijke logo hier links.

687
00:29:59,110 --> 00:30:01,750
Er is al deze iconen
een microfoon enz.

688
00:30:01,750 --> 00:30:05,130
Er is een hoop stukken, het bouwen van
blokken, scratch stukken, als je wil,

689
00:30:05,130 --> 00:30:06,250
naar deze webpagina.

690
00:30:06,250 --> 00:30:10,310
En wat de browser doet op
om het eerste bestand, dat

691
00:30:10,310 --> 00:30:16,180
is deze rij hier, het is in wezen
itereren over de HTML-top

692
00:30:16,180 --> 00:30:19,880
naar beneden, links naar rechts, naar
dingen als image-tags of andere labels

693
00:30:19,880 --> 00:30:23,160
die zijn het vermelden andere bestanden en
wanneer hij ze ziet, gaat en haalt hen

694
00:30:23,160 --> 00:30:26,050
via HTTP, levensvatbare hele
envelop metafoor,

695
00:30:26,050 --> 00:30:29,670
en dan geeft ze weer in de
geschikte locatie in de webpagina.

696
00:30:29,670 --> 00:30:33,370
>> Maar let hier als ik mij richten op
de eerste worp, zoeken katten,

697
00:30:33,370 --> 00:30:37,090
merken dat, inderdaad het is met HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
En helaas, Google
Chrome nu in versie 39

699
00:30:41,690 --> 00:30:45,110
is soort vervlakking dingen naar beneden en
niet die ons de werkelijke headers.

700
00:30:45,110 --> 00:30:49,680
Maar wat was inderdaad verzonden is een verzoek
voor niet slash, maar / search? q = katten.

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

702
00:30:52,830 --> 00:30:54,340
>> Nu, waarom is dat belangrijk?

703
00:30:54,340 --> 00:30:57,110
Nou, ik ga afleiden
hieruit dat als je Google

704
00:30:57,110 --> 00:31:01,520
steunt vragen van dit formulier, waarom
denk ik niet mijn eigen zoektocht te implementeren

705
00:31:01,520 --> 00:31:06,420
motor voor CS50, maar gewoon de voorkant
end, alleen de grafische user interface.

706
00:31:06,420 --> 00:31:09,610
En we zullen de back-end uit te besteden,
de werkelijke zoekresultaten bij Google.

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

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

709
00:31:13,820 --> 00:31:19,180
En laat me gaan en openen
up, laten we zeggen, een nieuw bestand.

710
00:31:19,180 --> 00:31:22,280
En ik ga dit redden
tijdelijk als search-0.html.

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

712
00:31:25,111 --> 00:31:27,860
En dan uiteindelijk, zullen we snel
uit naar degene die ik pre-voorbereid.

713
00:31:27,860 --> 00:31:30,190
>> En ik ga
snel zweep up type doc

714
00:31:30,190 --> 00:31:33,840
html geopend beugel html
dicht beugel html.

715
00:31:33,840 --> 00:31:38,390
Dan ga ik naar het hoofd doen
dicht hoofd geopend titel CS50

716
00:31:38,390 --> 00:31:40,150
Zoek in plaats van Google search.

717
00:31:40,150 --> 00:31:43,480
Hierna ga ik hebben
het lichaam, hier beneden dicht lichaam.

718
00:31:43,480 --> 00:31:45,835
En nu moet ik CS50 zoeken.

719
00:31:45,835 --> 00:31:47,710
En eigenlijk, laten we
bouwen dit stapsgewijs.

720
00:31:47,710 --> 00:31:51,043
Ik ga om te gaan en sluit deze en
eigenlijk zet het in mijn openbare map.

721
00:31:51,043 --> 00:31:52,730
Dus geef me maar een ogenblik.

722
00:31:52,730 --> 00:31:55,390
search-0.html-- ik ga
temporeel noemen het search.html.

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

724
00:31:56,600 --> 00:31:59,750
Ik ga het chmod a + r search.html.

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

726
00:32:01,072 --> 00:32:02,280
En nu ga ik om het te openen.

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

728
00:32:03,224 --> 00:32:04,390
Oké, dus dat was snel.

729
00:32:04,390 --> 00:32:06,800
Maar het doel was gewoon
om ons naar het punt

730
00:32:06,800 --> 00:32:09,630
van het hebben van deze tekst
bestand genaamd search.html.

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

732
00:32:10,940 --> 00:32:12,790
Dus niet veel om naar te kijken maar toch.

733
00:32:12,790 --> 00:32:16,970
Sterker nog, als ik naar mijn browser, en
ga naar search.html, dat is alles wat het is.

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

735
00:32:17,720 --> 00:32:19,000
Ik kan een beetje liefhebber.

736
00:32:19,000 --> 00:32:22,710
Ik las in een boek dat er is
een titel tag genaamd h1.

737
00:32:22,710 --> 00:32:26,100
En ik ga om verder te gaan en
gebruiken die geopend h1 en dicht h1.

738
00:32:26,100 --> 00:32:27,220
Reload de pagina.

739
00:32:27,220 --> 00:32:29,600
En nu is het groter en opvallender,
niet zo interessant,

740
00:32:29,600 --> 00:32:32,399
maar ten minste het structureel
interessanter.

741
00:32:32,399 --> 00:32:33,940
Maar nu wil ik een andere tag invoeren.

742
00:32:33,940 --> 00:32:36,500
Het blijkt dat er een form tag.

743
00:32:36,500 --> 00:32:38,400
En laat mij sluiten die tag.

744
00:32:38,400 --> 00:32:40,830
En het blijkt dat er's
een input-tag die

745
00:32:40,830 --> 00:32:44,600
heeft een attribuut type, dat
is het gegevenstype van het veld,

746
00:32:44,600 --> 00:32:45,200
als je wil.

747
00:32:45,200 --> 00:32:47,050
En gaat van het type tekst te zijn.

748
00:32:47,050 --> 00:32:52,200
En de waarde ervan gaat
om CS50 Search.

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

750
00:32:53,850 --> 00:32:57,100
En er zullen er geen notie van te zijn
het openen en sluiten met tags te scheiden.

751
00:32:57,100 --> 00:33:00,300
>> Laat me terug te gaan hier en
zien wat er gaande is, opnieuw te laden.

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

753
00:33:01,380 --> 00:33:02,950
Het ziet eruit alsof het een tekstveld.

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

755
00:33:04,080 --> 00:33:06,999
En eigenlijk wilde ik niet
tot een waarde nog daar te zetten.

756
00:33:06,999 --> 00:33:10,040
Laat me hier terug te gaan en daadwerkelijk krijgen
ontdoen van deze waarde om het simpel te houden.

757
00:33:10,040 --> 00:33:12,939
In plaats van een waarde, wat ik wilde
om dit ding te geven was een naam.

758
00:33:12,939 --> 00:33:15,230
En ik weet niet wat het is,
dus ik zal hierop terugkomen.

759
00:33:15,230 --> 00:33:18,270
>> Maar onder dat, ik wil
om input type = submit doen.

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

761
00:33:19,840 --> 00:33:22,120
En deze waarde zal zijn CS50 Search.

762
00:33:22,120 --> 00:33:24,850
En we zullen zien waarom ik
verplaatst de waarde aan.

763
00:33:24,850 --> 00:33:28,900
Toen ik herladen, ik schijn nu
het begin van mijn eigen zoektocht

764
00:33:28,900 --> 00:33:30,820
motor, super afschuwelijk,
maar eerlijk gezegd, het is

765
00:33:30,820 --> 00:33:34,260
niet een ver afstand van wat
Google's standaard pagina eruit ziet.

766
00:33:34,260 --> 00:33:37,950
>> Als ik ga hier nu, kan ik typ in
katten en hopelijk klik op Zoeken.

767
00:33:37,950 --> 00:33:40,380
Maar ik ben nog niet klaar,
want ik heb niet geïmplementeerd,

768
00:33:40,380 --> 00:33:41,045
uiteraard een database.

769
00:33:41,045 --> 00:33:42,940
Ik heb niet kroop de
web voor zoekresultaten.

770
00:33:42,940 --> 00:33:44,840
Dus ik moet uitbesteden die naar Google.

771
00:33:44,840 --> 00:33:46,290
Dus hoe kan ik dit doen?

772
00:33:46,290 --> 00:33:49,170
>> Nou, allereerst wil ik
actie moeten voegen en

773
00:33:49,170 --> 00:33:58,460
toeschrijven aan mijn vorm tag die
is http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
En ik weet dat alleen van het hebben van
afgeleid door nauw kijken

775
00:34:01,180 --> 00:34:02,505
bij hun URL's.

776
00:34:02,505 --> 00:34:03,380
En nu neem een ​​gok.

777
00:34:03,380 --> 00:34:09,090
Wat moet dit tekstveld waarschijnlijk
worden genoemd, afhankelijk van waar we kwamen

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

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

780
00:34:11,896 --> 00:34:13,290
>> Publiek:? Q.

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

782
00:34:14,370 --> 00:34:17,800
En we eigenlijk niet vraag hebt
markeren het blijkt, maar q is inderdaad het,

783
00:34:17,800 --> 00:34:20,489
q voor de zoekopdracht waarschijnlijk door
standaard, gewoon omdat dat is

784
00:34:20,489 --> 00:34:23,060
wat Larry en Sergey
kwam met jaren geleden.

785
00:34:23,060 --> 00:34:24,739
Dus nu laat ik herlaad deze pagina.

786
00:34:24,739 --> 00:34:26,409
Het maakt niet zo heel verschillend uitzien.

787
00:34:26,409 --> 00:34:28,120
Maar nu kijk wat er gebeurt.

788
00:34:28,120 --> 00:34:32,360
>> Als ik typ in katten en klik
CS50 Zoek en laten gaan,

789
00:34:32,360 --> 00:34:35,770
merk ik word meegetroond
weg naar werkelijke Google.

790
00:34:35,770 --> 00:34:38,150
Nu, Google is een beetje
vervelend in dat ze

791
00:34:38,150 --> 00:34:41,877
het toevoegen van een extra parameter,
als je wil, naar de URL.

792
00:34:41,877 --> 00:34:43,960
Dat is alles happening
automatisch op Google kant.

793
00:34:43,960 --> 00:34:48,730
>> Het belangrijkste is dat ik schijn
hier dit verzoek te hebben gegenereerd.

794
00:34:48,730 --> 00:34:50,179
En inderdaad, dat is wat er gebeurt.

795
00:34:50,179 --> 00:34:53,040
Wanneer u HTML dat
ziet er zo uit, dit

796
00:34:53,040 --> 00:34:57,620
is een soort van web-ontwikkelaars notatie
voor te zeggen, ga je gang en maak een vorm

797
00:34:57,620 --> 00:34:59,990
dat wanneer het wordt ingediend,
het gaat om naar deze URL.

798
00:34:59,990 --> 00:35:03,430
En als de URL heeft verstrekt
waarden voor dingen als q,

799
00:35:03,430 --> 00:35:05,440
ga niet alleen naar deze URL.

800
00:35:05,440 --> 00:35:08,210
Eigenlijk, ga naar vraag
mark en dan q = katten.

801
00:35:08,210 --> 00:35:09,590

802
00:35:09,590 --> 00:35:13,060
Voeg de parameter, de
HTTP parameter als dat.

803
00:35:13,060 --> 00:35:15,590
>> En alleen maar om super precies te zijn,
wat er wordt afgeleid hier--

804
00:35:15,590 --> 00:35:18,130
maar ik zal meer explicit-- is
dat de methode die ik wil gebruiken

805
00:35:18,130 --> 00:35:22,270
is te krijgen, in plaats van iets als
post, die we uiteindelijk zullen zien.

806
00:35:22,270 --> 00:35:27,710
Dus in het kort, gewoon door te begrijpen
HTML en het gebruik van een aantal vrij eenvoudige tags

807
00:35:27,710 --> 00:35:30,610
kunnen we nu gaan creëren
onze eigen front-end gebruiker

808
00:35:30,610 --> 00:35:32,850
interface zoekopdracht
motor erachter.

809
00:35:32,850 --> 00:35:34,800
>> Maar dit is natuurlijk vrij afschuwelijk.

810
00:35:34,800 --> 00:35:37,259
Dus laat me eigenlijk open
een iets betere versie.

811
00:35:37,259 --> 00:35:39,800
Dit is degene die ik bereid in
vooruit dat is voorzien van commentaar.

812
00:35:39,800 --> 00:35:41,900
Maar je zult zien dat ik
vrij veel ontspande het.

813
00:35:41,900 --> 00:35:44,150
Dus dit is nu al online beschikbaar.

814
00:35:44,150 --> 00:35:48,050
En ik heb toevallig preemptively
ga naar https alleen maar om het simpel te houden.

815
00:35:48,050 --> 00:35:50,610
>> En nu laten we het openen van een
volgende iteratie van.

816
00:35:50,610 --> 00:35:52,510
Is versie 1 in plaats van 0.

817
00:35:52,510 --> 00:35:55,315
Wat springt op je af als iets
verschillende in dit voorbeeld?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> Publiek: [onverstaanbaar].

820
00:36:00,440 --> 00:36:03,020
>> Ja, er is deze tekst align center.

821
00:36:03,020 --> 00:36:04,590
Dit is een beetje raar hier.

822
00:36:04,590 --> 00:36:06,150
Maar dit is inderdaad nieuw.

823
00:36:06,150 --> 00:36:07,800
En misschien raden wat er gaat gebeuren.

824
00:36:07,800 --> 00:36:11,730
Als ik naar mijn browser nu
en bezoek search-1.html,

825
00:36:11,730 --> 00:36:13,090
het is bijna hetzelfde.

826
00:36:13,090 --> 00:36:15,705
Maar het is een stap dichter bij
een beetje meer vrij.

827
00:36:15,705 --> 00:36:19,150
Het is nog steeds lelijk, maar mooier in dat
tenminste alles is nu gecentreerd.

828
00:36:19,150 --> 00:36:23,470
>> Zo blijkt het dat wat ik gebruik
wordt een andere taal helemaal genaamd

829
00:36:23,470 --> 00:36:25,680
CSS, cascading style sheets.

830
00:36:25,680 --> 00:36:28,310
En CSS, eerlijk gezegd, is een soort
van, in mijn persoonlijke mening,

831
00:36:28,310 --> 00:36:29,775
een gruwelijk ontworpen taal.

832
00:36:29,775 --> 00:36:33,110
Het is erg vervelend te onthouden
de verschillende details.

833
00:36:33,110 --> 00:36:38,479
Maar het is wat stileert de
hele wereldwijde web vandaag.

834
00:36:38,479 --> 00:36:39,270
Ik beledigd iemand.

835
00:36:39,270 --> 00:36:39,769
Prima.

836
00:36:39,769 --> 00:36:43,180
Dus laten we terug te gaan hier en zie
hoe we eigenlijk met behulp van deze.

837
00:36:43,180 --> 00:36:45,940
En het blijkt, althans het is
eigenlijk een vrij eenvoudige taal.

838
00:36:45,940 --> 00:36:49,470
Het is gewoon sleutel waarde paren, eigenschappen
en waarden, eigenschappen en waarden.

839
00:36:49,470 --> 00:36:52,080
Inderdaad, hier is een
dergelijke eigenschap en waarde.

840
00:36:52,080 --> 00:36:55,890
>> Gewoon met behulp van de stijl
attribuut op mijn lichaam tag

841
00:36:55,890 --> 00:37:00,360
en het een waarde van een
woord dikke darm en een ander woord,

842
00:37:00,360 --> 00:37:03,730
of een eigenschap en een waarde,
Ik kan beïnvloeden de esthetiek

843
00:37:03,730 --> 00:37:06,210
van de webpagina, niet
se maar de structuur

844
00:37:06,210 --> 00:37:07,550
maar de esthetiek van het.

845
00:37:07,550 --> 00:37:10,960
En net door Googlen rond, ik realiseer
dat CSS, cascading style sheets,

846
00:37:10,960 --> 00:37:14,170
ondersteunt een eigenschap genaamd
text-align, waarvan de waarde kan

847
00:37:14,170 --> 00:37:16,980
worden overgelaten, rechts of midden, bijvoorbeeld.

848
00:37:16,980 --> 00:37:19,990
>> Dus als ik nu herlaad
deze pagina, wat ik kreeg

849
00:37:19,990 --> 00:37:22,730
was een gecentreerde pagina,
maar nog steeds vrij lelijk.

850
00:37:22,730 --> 00:37:25,770
Laten we verder gaan en openen
up versie 2 van Search.

851
00:37:25,770 --> 00:37:28,570
En nu merk ik heb een beetje meer gedaan.

852
00:37:28,570 --> 00:37:33,760
Merk op dat hier binnenkant van het hoofd
tag, kan er meer dan titel.

853
00:37:33,760 --> 00:37:35,400
In feite is er een stijl tag.

854
00:37:35,400 --> 00:37:38,630
En dit is waar het wordt gewoon een
beetje rommelig seeing CSS soms.

855
00:37:38,630 --> 00:37:41,971
>> Merk op dat ik schijn iets te hebben
die structureel ziet er heel anders uit.

856
00:37:41,971 --> 00:37:44,095
Maar hier is de naam van
de tag Ik wil gestileerd.

857
00:37:44,095 --> 00:37:47,570
Hier zijn onze oude vrienden krullend
braces en gesloten accolade.

858
00:37:47,570 --> 00:37:50,290
En dan is hier dat
eigendom en de waarde ervan.

859
00:37:50,290 --> 00:37:56,300
>> Als ik dit bestand te laden, search2.html,
het eindresultaat identiek.

860
00:37:56,300 --> 00:37:59,300
Maar het is een stap in de richting van een beter ontwerp.

861
00:37:59,300 --> 00:38:04,560
Door factoring uit deze CSS, ik heb
niet vermengd mijn HTML.

862
00:38:04,560 --> 00:38:07,560
En inderdaad, zoals we zullen zien, ik kon
hergebruiken deze eigenschappen en waarden.

863
00:38:07,560 --> 00:38:10,420
Als ik wilde trossen van maken
delen van mijn web pagina gecentreerd,

864
00:38:10,420 --> 00:38:13,630
Ik hoef niet te style = text-align typt
centrum all over the place.

865
00:38:13,630 --> 00:38:16,580
Ik kan op een plaats zetten
misschien graag op naar de top.

866
00:38:16,580 --> 00:38:18,210
>> Maar zelfs dit is niet de beste ontwerp.

867
00:38:18,210 --> 00:38:21,720
In feite, een van de dingen die je leert
als je meer en meer tijd doorbrengen met

868
00:38:21,720 --> 00:38:25,730
web programmeren is dat hoe meer je kunt
modularizeren dingen en factor dingen uit

869
00:38:25,730 --> 00:38:30,610
zoals .h bestanden laat ons factor spullen uit,
graag helpers.c laat ons factor dingen uit

870
00:38:30,610 --> 00:38:31,880
een paar psets geleden.

871
00:38:31,880 --> 00:38:34,200
Op dezelfde manier zouden we
Om dit te bereiken.

872
00:38:34,200 --> 00:38:37,920
>> Dus bericht in versie
drie van search.html Ik heb

873
00:38:37,920 --> 00:38:40,610
opgeruimd het hoofd van
de pagina en zet

874
00:38:40,610 --> 00:38:43,320
in deze, een link-tag, die
in tegenstelling tot de naam,

875
00:38:43,320 --> 00:38:44,700
geeft je niet een hyperlink.

876
00:38:44,700 --> 00:38:49,150
Het verbindt aan een ander bestand door middel van
een href waarvan de waarde in dit geval,

877
00:38:49,150 --> 00:38:51,586
is search-3.css

878
00:38:51,586 --> 00:38:52,960
Dus ik besef dat we snel gaan.

879
00:38:52,960 --> 00:38:54,600
Maar alles wat ik doe is een soort
van bewegende dingen rond.

880
00:38:54,600 --> 00:38:55,760
Laat me Open Search-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Daar is het, niets echt aan.

883
00:38:58,530 --> 00:39:02,270
Ik gewoon gekopieerd en geplakt in een nieuwe
bestand, net zoals we meegenomen spullen uit

884
00:39:02,270 --> 00:39:03,509
in andere bestanden voor.

885
00:39:03,509 --> 00:39:05,300
En de result--
volledig underwhelming--

886
00:39:05,300 --> 00:39:06,730
zal precies hetzelfde.

887
00:39:06,730 --> 00:39:10,490
Maar we gaan verhuizen toward-- nee, het is niet.

888
00:39:10,490 --> 00:39:11,930
Oh, ik weet waarom.

889
00:39:11,930 --> 00:39:13,790
>> Dus het lijkt een bug te zijn.

890
00:39:13,790 --> 00:39:15,010
En het is in zekere zin.

891
00:39:15,010 --> 00:39:17,730
Maar laat ik open mijn tabblad Netwerk.

892
00:39:17,730 --> 00:39:19,660
Laat me de pagina geladen is.

893
00:39:19,660 --> 00:39:23,315
Ach, waarom is de CSS niet wordt toegepast?

894
00:39:23,315 --> 00:39:26,920
Nou, het CSS-bestand, op dezelfde manier, heeft
iedereen leesbaar te zijn, om zo te zeggen.

895
00:39:26,920 --> 00:39:28,440
En het ook is momenteel verboden.

896
00:39:28,440 --> 00:39:33,760
Dus laat me een chmod a + r doen
van ster dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
we zijn dot CSS is gewoon de
bestandsextensie voor CSS-bestanden.

898
00:39:37,067 --> 00:39:38,900
Laat me nu terug te gaan naar
mijn browser en reload.

899
00:39:38,900 --> 00:39:40,910
OK, een beetje beter.

900
00:39:40,910 --> 00:39:42,282
>> Nu laat me doen een laatste ding.

901
00:39:42,282 --> 00:39:42,990
In search-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Ik heb een versie die ik dacht
was veel koeler, zij het veel meer

904
00:39:48,220 --> 00:39:48,980
ingewikkeld.

905
00:39:48,980 --> 00:39:50,690
Laten we eens kijken naar het resultaat als eerste.

906
00:39:50,690 --> 00:39:52,290
Sluit dit aan ons meer ruimte te geven.

907
00:39:52,290 --> 00:39:54,275
Wijzig deze om te zoeken-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> En nu een hoop dingen zijn gebroken.

910
00:39:57,200 --> 00:39:59,910
Ik ga om terug te gaan
in mijn directory hier.

911
00:39:59,910 --> 00:40:04,190
En nu ben ik gewoon gaan doen
een chmod van een + r op een file--

912
00:40:04,190 --> 00:40:07,450
omdat ik weet dat exists-- genoemd
logo.gif, dat een beeld.

913
00:40:07,450 --> 00:40:08,590
En nu herladen.

914
00:40:08,590 --> 00:40:11,040
En wow-- nu dus ik ben
aardig in de buurt, eerlijk gezegd,

915
00:40:11,040 --> 00:40:15,860
om net als de versie van Google 1999, en
eerlijk gezegd, de 2014 versie van Google,

916
00:40:15,860 --> 00:40:16,360
toch?

917
00:40:16,360 --> 00:40:21,920
>> Dus het is nu naar hun website,
uiteindelijk, als ik zoek naar katten.

918
00:40:21,920 --> 00:40:23,900
En inderdaad het is.

919
00:40:23,900 --> 00:40:26,410
Maar wat heb ik anders doen
in deze versie 4?

920
00:40:26,410 --> 00:40:28,020
Zodat we niet te veel hier verder op ingaan.

921
00:40:28,020 --> 00:40:30,100
U zult dit zien in probleem
stelde zeven uiteindelijk.

922
00:40:30,100 --> 00:40:31,350
Maar merk ik deed een paar dingen.

923
00:40:31,350 --> 00:40:33,690
>> Ik een div geïntroduceerd
tag, die divisie,

924
00:40:33,690 --> 00:40:35,450
in dezelfde geest om een ​​paragraaf tag.

925
00:40:35,450 --> 00:40:38,220
Maar een scheiding is net als, hier is
een rechthoekig onzichtbare gebied

926
00:40:38,220 --> 00:40:39,150
van het scherm.

927
00:40:39,150 --> 00:40:41,680
Laten we het een unieke
identifier, een voettekst, net

928
00:40:41,680 --> 00:40:44,700
zodat we kunnen praten over
het in onze HTML elders.

929
00:40:44,700 --> 00:40:47,952
Hier is nog een div van de pagina
wiens ID zal tevreden zijn.

930
00:40:47,952 --> 00:40:49,160
Het is de inhoud van de pagina.

931
00:40:49,160 --> 00:40:51,090
En hier is de header van de pagina.

932
00:40:51,090 --> 00:40:54,960
>> Met andere woorden, ik heb
wezen in HTML ben mentaal

933
00:40:54,960 --> 00:40:57,700
het bekijken van deze webpagina als
drie componenten, een header

934
00:40:57,700 --> 00:41:01,200
hier met deze onzichtbare rechthoek,
de inhoud in het midden, en dan

935
00:41:01,200 --> 00:41:04,800
de voettekst beneden, zelfs
hoewel we die dingen niet zien.

936
00:41:04,800 --> 00:41:09,940
Want ik wil in mijn hoofd van
pagina hier, of in een CSS-bestand,

937
00:41:09,940 --> 00:41:11,460
Ik kan deze syntaxis gebruiken.

938
00:41:11,460 --> 00:41:13,070
>> Header is niet een tag.

939
00:41:13,070 --> 00:41:17,060
Het is een code blijkt
erop dat door het doen van #header,

940
00:41:17,060 --> 00:41:20,840
Ik kan nu van toepassing van één of meer
eigenschappen aan de header.

941
00:41:20,840 --> 00:41:24,130
Ik kan dezelfde inhoud te doen,
hetzelfde voor de inhoud hier.

942
00:41:24,130 --> 00:41:27,230
>> Dus bijvoorbeeld in de footer, bericht
al deze eigenschappen Ik voeg.

943
00:41:27,230 --> 00:41:30,660
En ik weet dat ze bestaan ​​alleen door het lezen
omhoog op de documentatie voor CSS.

944
00:41:30,660 --> 00:41:33,450
Lettergrootte gaat smaller-- te zijn
dus sommige relatieve lettergrootte.

945
00:41:33,450 --> 00:41:34,741
Het gewicht zal vet worden.

946
00:41:34,741 --> 00:41:37,340
Margin-- hoeveel pixels
rond het-- is 20 pixels.

947
00:41:37,340 --> 00:41:38,590
En het zal worden gecentreerd.

948
00:41:38,590 --> 00:41:40,256
>> Maar op dit moment, de pagina ziet er als volgt uit.

949
00:41:40,256 --> 00:41:42,840
Als ik ben niet blij met
mijn exemplaar daar,

950
00:41:42,840 --> 00:41:46,560
Ik kon iets als kleur rood doen.

951
00:41:46,560 --> 00:41:50,570
En dan kan ik dit redden, herladen,
en nu heb ik de voettekst gestileerd.

952
00:41:50,570 --> 00:41:54,130
Dus dit is gewoon zinspeelde op de kracht
van wat u kunt doen in een webpagina

953
00:41:54,130 --> 00:41:55,510
om dingen te veranderen rond.

954
00:41:55,510 --> 00:41:59,080
>> En nog cooler dan dit, als je wilt
om rond te porren met de werkelijke websites,

955
00:41:59,080 --> 00:42:00,810
kun je permanent niet te veranderen.

956
00:42:00,810 --> 00:42:03,640
Maar als ik het openstellen
Chrome Inspector weer

957
00:42:03,640 --> 00:42:07,610
en ik ga niet naar de linkerkant
hier, dat Facebook de HTML laat zien,

958
00:42:07,610 --> 00:42:11,380
maar toont rechts
kant al haar CSS,

959
00:42:11,380 --> 00:42:13,789
kunt u of en
dingen veranderen op de vlieg.

960
00:42:13,789 --> 00:42:15,080
Dus laat me ga je gang en doe dit.

961
00:42:15,080 --> 00:42:18,670
>> Laat me ga je gang en controle
Klik op deze willekeurig woord hier,

962
00:42:18,670 --> 00:42:21,230
ondertekenen, en klik Inspect Element.

963
00:42:21,230 --> 00:42:25,130
Chrome zeer gunstig springt naar
de h1-tag die Facebook gebruikt.

964
00:42:25,130 --> 00:42:27,290
En let hier Facebook
heeft soort lui

965
00:42:27,290 --> 00:42:29,960
hard gecodeerd lettergrootte als een woning hier.

966
00:42:29,960 --> 00:42:33,530
>> Dus het koele ding is
dat als ik hier eigenlijk gaan in

967
00:42:33,530 --> 00:42:39,560
en zeggen: oh, Facebook, ik hou niet van dat
64 pixels, kunnen we nu veranderen Facebook.

968
00:42:39,560 --> 00:42:42,590
Natuurlijk, we zijn alleen te veranderen
voor mij persoonlijk op dit moment.

969
00:42:42,590 --> 00:42:45,150
Maar dit is gewoon een andere
hulpmiddel in onze tool kit

970
00:42:45,150 --> 00:42:48,360
dat gaat ons in staat om te tweaken
en erachter te komen en ook te diagnosticeren

971
00:42:48,360 --> 00:42:49,729
problemen in onze eigen webpagina's.

972
00:42:49,729 --> 00:42:52,270
En we konden evenzo gaan over
Hier, hetgeen hetzelfde.

973
00:42:52,270 --> 00:42:55,830
Als je echt wilt leren fancy, ik
bedoel, nu kan je echt muteren de pagina

974
00:42:55,830 --> 00:42:57,380
en doen gekke dingen.

975
00:42:57,380 --> 00:42:59,870
>> Dus waarom is dit alles nuttig?

976
00:42:59,870 --> 00:43:02,330
Nou ja, uiteindelijk zijn we
gaat te willen zijn

977
00:43:02,330 --> 00:43:07,110
in staat om webpagina's te maken die
worden gedreven door onze eigen achterkanten,

978
00:43:07,110 --> 00:43:10,520
niet door alleen Google en
het uitbesteden van de back-end daar.

979
00:43:10,520 --> 00:43:13,510
We willen eigenlijk de
waar, bijvoorbeeld,

980
00:43:13,510 --> 00:43:18,830
van actie onze zoekmachine
toeschrijven aan niet anders te gaan naar iemand,

981
00:43:18,830 --> 00:43:24,270
maar om iets als search.php,
waar search.php is op onze eigen server,

982
00:43:24,270 --> 00:43:25,670
niet op iemand anders.

983
00:43:25,670 --> 00:43:30,316
>> En dus om er te komen, we eigenlijk
nodig hebt om een ​​nieuwe taal te introduceren.

984
00:43:30,316 --> 00:43:33,190
Dus we hebben al gekeken naar een nieuwe
taal hier, of twee echt, HTML

985
00:43:33,190 --> 00:43:33,700
en CSS.

986
00:43:33,700 --> 00:43:36,330
Maar ze zijn echt gewoon
structurele en esthetische talen.

987
00:43:36,330 --> 00:43:38,360
Ze zijn niet te programmeren
talen per se.

988
00:43:38,360 --> 00:43:41,160
En dat is ongeveer net zo veel formele
tijd zoals we zullen besteden.

989
00:43:41,160 --> 00:43:44,910
Omdat we nu beginnen
om de overgang naar PHP.

990
00:43:44,910 --> 00:43:48,160
>> Dus PHP is een daadwerkelijke
programmeertaal.

991
00:43:48,160 --> 00:43:50,750
Het is een scripttaal
in de zin dat het

992
00:43:50,750 --> 00:43:52,855
bedoeld lichter gewicht
dan iets als C.

993
00:43:52,855 --> 00:43:56,082
En het is een geïnterpreteerde taal,
wat betekent dat het niet gecompileerd.

994
00:43:56,082 --> 00:43:58,790
Dus in een notendop, wat deed het betekenen
wanneer we een taal als C gebruikt

995
00:43:58,790 --> 00:44:00,290
en we hadden om het te compileren?

996
00:44:00,290 --> 00:44:02,120
Wat betekent het om
C-broncode te compileren?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
Publiek: [onverstaanbaar].

999
00:44:04,780 --> 00:44:06,184
DAVID J MALAN: Zeg het nog eens?

1000
00:44:06,184 --> 00:44:07,100
Publiek: [onverstaanbaar].

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
Het verandert het in binaire.

1004
00:44:10,180 --> 00:44:14,200
Het verandert het in nullen en enen
van de werkelijke Engels-achtige broncode.

1005
00:44:14,200 --> 00:44:16,424
En dan kunnen we eigenlijk
lopen die nullen en enen

1006
00:44:16,424 --> 00:44:18,840
door ze door de
CPU door te dubbelklikken op een pictogram

1007
00:44:18,840 --> 00:44:19,980
of het uitvoeren van een opdracht.

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 trossen van andere
talen worden geïnterpreteerd

1010
00:44:26,250 --> 00:44:29,290
taal wil zeggen
je hoeft ze niet te compileren.

1011
00:44:29,290 --> 00:44:34,220
Integendeel, je ze voeden als input voor
een programma met de naam van een tolk.

1012
00:44:34,220 --> 00:44:36,640
En dat tolk,
die iemand anders heeft geschreven,

1013
00:44:36,640 --> 00:44:40,930
leest de bron-code van boven naar beneden,
van links naar rechts en net interpreteert

1014
00:44:40,930 --> 00:44:43,000
die lijnen en doet wat je zegt.

1015
00:44:43,000 --> 00:44:45,360
>> Dus als je geconfronteerd met een
lijn die lettertjes staat,

1016
00:44:45,360 --> 00:44:48,660
Het hoeft niet per se om te zetten druk
de overeenkomstige nullen en enen.

1017
00:44:48,660 --> 00:44:51,910
Het heeft alleen deze tolk als
een grote als voorwaarde dat zegt,

1018
00:44:51,910 --> 00:44:56,110
als instructie programmeur is
print, doe dan het volgende.

1019
00:44:56,110 --> 00:44:58,170
Interpreteert het zo gewoon
door soort redeneringen

1020
00:44:58,170 --> 00:44:59,800
door wat je hem vertelt te doen.

1021
00:44:59,800 --> 00:45:01,320
>> En PHP is een van deze talen.

1022
00:45:01,320 --> 00:45:05,310
En PHP jaar geleden werd ontworpen
Juist voor web programmeren.

1023
00:45:05,310 --> 00:45:08,160
Het was aanvankelijk
erg slordig rommelig taal.

1024
00:45:08,160 --> 00:45:10,940
En inderdaad, er is een enorme
hoeveelheid slechte PHP-code die er zijn.

1025
00:45:10,940 --> 00:45:13,520
Maar de taal zelf
heeft gerijpt door de jaren heen,

1026
00:45:13,520 --> 00:45:16,200
zozeer zelfs dat nu is
eigenlijk een prachtige volgende stap

1027
00:45:16,200 --> 00:45:19,970
pedagogisch uit C, want het is
zo verdomd bekend voor alles

1028
00:45:19,970 --> 00:45:22,380
je net hebt gezien in de afgelopen weken.

1029
00:45:22,380 --> 00:45:25,724
>> De ene aanvankelijke verschil zien we wel
is er geen belangrijke functie meer.

1030
00:45:25,724 --> 00:45:28,890
Wanneer u het schrijven van code start, het is gewoon
gaat krijgen geëxecuteerd er ook gebeurt,

1031
00:45:28,890 --> 00:45:30,220
zoals we zullen zien in een moment.

1032
00:45:30,220 --> 00:45:33,320
Ondertussen, hier is wat een
variabele eruit ziet in PHP.

1033
00:45:33,320 --> 00:45:35,840
Het is een beetje anders,
maar nauwelijks.

1034
00:45:35,840 --> 00:45:39,380
>> In PHP, is er niet sterk te typen.

1035
00:45:39,380 --> 00:45:41,430
Er is week te typen,
wat betekent dat er gewoon

1036
00:45:41,430 --> 00:45:44,030
zijn data types zoals strings
en nummers en andere dingen.

1037
00:45:44,030 --> 00:45:47,030
Maar je hoeft niet lastig te specificeren
wat ze zijn niet meer.

1038
00:45:47,030 --> 00:45:48,980
PHP cijfers het uit voor je.

1039
00:45:48,980 --> 00:45:52,030
Het dollarteken is gewoon een beslissing
dat de PHP mensen maakten jaren

1040
00:45:52,030 --> 00:45:54,890
geleden zodanig dat elke variabele in PHP
net begint met een dollarteken.

1041
00:45:54,890 --> 00:45:58,130
Het is eigenlijk wel handig in dat
het springt uit bij u een beetje meer.

1042
00:45:58,130 --> 00:46:01,315
>> Maar na dat, dit
is een aandoening in PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Wat is er anders ten opzichte van C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Trick question-- niets,
dat is eigenlijk heel leuk.

1047
00:46:09,600 --> 00:46:12,140
Booleaanse expressies in PHP-- hetzelfde.

1048
00:46:12,140 --> 00:46:19,354
Booleaanse uitdrukkingen met en versus
of, switches, lussen, lussen, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
Dit is anders.

1050
00:46:20,270 --> 00:46:22,660
>> Dus het blijkt dat er een
paar andere functies in PHP.

1051
00:46:22,660 --> 00:46:25,243
Eén van hen is eigenlijk dit,
die heerlijk handig.

1052
00:46:25,243 --> 00:46:29,250
Als $ getallen is een array die je hebt
eerder in een programma worden aangemeld,

1053
00:46:29,250 --> 00:46:33,350
je hebt deze voorliefde voor elk construct
dat in plaats van dat te doen

1054
00:46:33,350 --> 00:46:37,020
vervelende I gelijk is aan 0, I is
minder dan dit, [? I ++?],

1055
00:46:37,020 --> 00:46:40,320
voor elke getallen als getal, waarbij elke
van die dollarteken waarden is gewoon

1056
00:46:40,320 --> 00:46:42,790
een variabele, en deze
je kunt bedenken als I.

1057
00:46:42,790 --> 00:46:44,290
Je zou het wat je wilt bellen.

1058
00:46:44,290 --> 00:46:45,770
Ik belde het nummer.

1059
00:46:45,770 --> 00:46:48,825
Dit gaat om meer dan herhalen
de array gebelde nummers.

1060
00:46:48,825 --> 00:46:51,200
En elke iteratie, het
gaat automatisch bij te werken

1061
00:46:51,200 --> 00:46:54,340
voor je het dollarteken nummer
variabele zodat je constant

1062
00:46:54,340 --> 00:46:58,210
hebben toegang tot de variabele die u wilt
zonder enige vierkante haak doen

1063
00:46:58,210 --> 00:47:00,980
notatie of indexeren in een array.

1064
00:47:00,980 --> 00:47:04,950
>> Buiten dat, we hebben zelfs dingen als
arrays, die bijna hetzelfde uitzien,

1065
00:47:04,950 --> 00:47:08,210
behalve dat het heel gebruikelijk, zoals we zullen
te zien, zowel in PHP en JavaScript

1066
00:47:08,210 --> 00:47:10,750
vooraf initialiseren een array
met behulp van vierkante haken.

1067
00:47:10,750 --> 00:47:12,040
C maakt gebruik van accolades.

1068
00:47:12,040 --> 00:47:15,330
Dus het is iets anders, hoewel
we hebben niet echt die truc veel.

1069
00:47:15,330 --> 00:47:20,090
>> Maar misschien nog krachtiger,
PHP heeft associatieve arrays,

1070
00:47:20,090 --> 00:47:23,100
dat is een mooie manier om
zeggen hash tabellen.

1071
00:47:23,100 --> 00:47:31,610
In feite, als je wilt om een ​​hash te verklaren
tabel in PHP, in tegenstelling tot in C-- hoeveel

1072
00:47:31,610 --> 00:47:34,775
regels code duurde het om
daadwerkelijk implementeren van een hash table in C?

1073
00:47:34,775 --> 00:47:38,310
Of hoeveel regels code is het
het nemen van de implementatie van een hash table in C?

1074
00:47:38,310 --> 00:47:39,820
Dus het is waarschijnlijk een stuk, toch?

1075
00:47:39,820 --> 00:47:41,680
Het is een paar dozijn, misschien 100 of 200.

1076
00:47:41,680 --> 00:47:42,980
Het is moeilijk te raden.

1077
00:47:42,980 --> 00:47:45,420
Of het gaat over te zijn, als
U zult al snel zien, niet-triviale

1078
00:47:45,420 --> 00:47:48,080
een hash table implementeren
[Onverstaanbaar] en ook een keer te proberen.

1079
00:47:48,080 --> 00:47:50,580
Maar in PHP-- en eerlijk gezegd, ik
Waarschijnlijk moet je niet vertellen

1080
00:47:50,580 --> 00:47:53,630
totdat Monday-- in PHP, indien
je wilt een tafel, klaar.

1081
00:47:53,630 --> 00:47:56,431
Dat is een hash table-- zo
met een regel code.

1082
00:47:56,431 --> 00:47:56,930
En

1083
00:47:56,930 --> 00:47:58,810
>> Een groot aantal andere talen dat doen.

1084
00:47:58,810 --> 00:48:00,190
Veel plezier met pset vijf.

1085
00:48:00,190 --> 00:48:01,980
Dus een groot aantal andere talen doen dit.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Ze geven je deze abstracties
dat andere mensen, andere programmeurs,

1088
00:48:06,140 --> 00:48:09,870
hebben gecreëerd voor u, zodat
U kunt op hun schouders staan

1089
00:48:09,870 --> 00:48:13,290
en beginnen met ideeën die zijn super
meeslepend, zoals hash tabellen en bomen

1090
00:48:13,290 --> 00:48:14,140
en probeert.

1091
00:48:14,140 --> 00:48:17,790
Maar je hoeft niet per se te
implementeren die dingen zelf.

1092
00:48:17,790 --> 00:48:20,850
>> En dus uiteindelijk, wat
we gaan om PHP te gebruiken voor

1093
00:48:20,850 --> 00:48:23,580
wordt mogelijk het schrijven van programma's
van de zogenaamde command line.

1094
00:48:23,580 --> 00:48:26,600
Konden we elk programma opnieuw
we hebben dit semester geschreven tot nu toe,

1095
00:48:26,600 --> 00:48:30,410
behalve misschien Breakout die SPL gebruikt,
die specifiek is C op dit moment.

1096
00:48:30,410 --> 00:48:33,100
Maar elke andere probleem stellen,
zeker Mario en Caesar

1097
00:48:33,100 --> 00:48:35,300
en Vigenere en
[? Crack?] En verder, we

1098
00:48:35,300 --> 00:48:39,520
kon opnieuw te implementeren in PHP, en
waarschijnlijk iets makkelijker.

1099
00:48:39,520 --> 00:48:43,050
>> Maar wat we uiteindelijk gaan
om PHP te gebruiken voor is web programmeren.

1100
00:48:43,050 --> 00:48:46,420
En we gaan introduceren volgende
week een mentaal model, een paradigma genoemd

1101
00:48:46,420 --> 00:48:49,610
MVC, model view controller,
die, als je hebt gedaan programmeren

1102
00:48:49,610 --> 00:48:51,610
voordat in Python of
Ruby of elders, u

1103
00:48:51,610 --> 00:48:54,112
zouden weten van dit team met
Rails en Django en dergelijke.

1104
00:48:54,112 --> 00:48:55,820
Maar als je nieuw bent
dit ook, zie je

1105
00:48:55,820 --> 00:48:59,652
dat dit eigenlijk een heel natuurlijke
uitbreiding van de factorisatie

1106
00:48:59,652 --> 00:49:01,360
en de soort van het ontwerp
van de code die we hebben

1107
00:49:01,360 --> 00:49:04,670
gedaan in C. We gaan nu
gelden een aantal van die lessen aan PHP

1108
00:49:04,670 --> 00:49:07,190
zodat uiteindelijk wij
de implementatie van onze eigen websites.

1109
00:49:07,190 --> 00:49:09,080
En als je een soort van
gebiologeerd of verbaasd

1110
00:49:09,080 --> 00:49:10,954
dat we gaan doen
alle zo snel

1111
00:49:10,954 --> 00:49:13,410
beseffen dat bijna elke
semester, bijna 90%

1112
00:49:13,410 --> 00:49:16,560
van studenten CS50, waaronder die
die nog nooit hebt geprogrammeerd,

1113
00:49:16,560 --> 00:49:20,329
uiteindelijk het maken van de definitieve projecten die
zijn gebaseerd op web programmeren.

1114
00:49:20,329 --> 00:49:23,120
En dus zul je zien dat de rendementen
zijn hoog in de komende weken.

1115
00:49:23,120 --> 00:49:24,965
Dus we zullen je dan zien op maandag.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> SPEAKER 1: En nu, Deep
Gedachten door Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Hash tabellen.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [Lachen]

1122
00:49:38,402 --> 00:49:38,902