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

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

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

4
00:00:10,955 --> 00:00:12,580
David J MALAN: Okay, velkommen tilbage.

5
00:00:12,580 --> 00:00:13,600
Dette er CS50.

6
00:00:13,600 --> 00:00:15,540
Det er i slutningen af ​​uge syv.

7
00:00:15,540 --> 00:00:18,180
Og det er i slutningen af ​​denne ådselæder
jagt fra problem sæt fire

8
00:00:18,180 --> 00:00:19,220
som du måske husker.

9
00:00:19,220 --> 00:00:21,650
Efter at inddrive alle
disse JPEG medarbejdere,

10
00:00:21,650 --> 00:00:24,820
De blev udfordret, hvis du gerne vil,
at fotografere dig selv med så mange

11
00:00:24,820 --> 00:00:25,981
af de folk, som du kan.

12
00:00:25,981 --> 00:00:28,480
Vi fik en hel bunke af indlæg
løbet af de sidste par uger,

13
00:00:28,480 --> 00:00:32,980
ja, en hel lige før middag
dag, hvoraf nogle er de her,

14
00:00:32,980 --> 00:00:37,670
fanget her in-- ser like-- Annenberg
Hall ved kontortid, en her

15
00:00:37,670 --> 00:00:39,530
i Lowell House med Nick.

16
00:00:39,530 --> 00:00:41,750
Her er Ramon blive fanget på telefonen.

17
00:00:41,750 --> 00:00:43,870
Det var på et CS50 frokost.

18
00:00:43,870 --> 00:00:46,840
Det var Jason Skyping med
en mere kreativ klassekammerat,

19
00:00:46,840 --> 00:00:48,280
der ringede ham på denne måde.

20
00:00:48,280 --> 00:00:49,690
Vi ved ikke, hvad det var.

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

22
00:00:51,940 --> 00:00:54,570
>> David J MALAN: Men
der er værd at en gigabyte.

23
00:00:54,570 --> 00:00:56,960
Her er Chang, som
bogstaveligt løb fra scenen

24
00:00:56,960 --> 00:01:00,480
at undgå at blive fotograferet en
dag, men blev til sidst fanget.

25
00:01:00,480 --> 00:01:02,050
Her er Nick.

26
00:01:02,050 --> 00:01:03,480
Her er Nick.

27
00:01:03,480 --> 00:01:04,080
Her er Nick.

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

29
00:01:05,090 --> 00:01:07,670
Og her er Alison nede ved markerne.

30
00:01:07,670 --> 00:01:11,840
Og Zamyla selv blev fundet
ved en balsal konkurrence.

31
00:01:11,840 --> 00:01:14,100
Så vi vil gå igennem
disse fotos, regne ud

32
00:01:14,100 --> 00:01:16,690
der har indgivet det mest
tidligst og belønning

33
00:01:16,690 --> 00:01:20,662
en fabelagtig præmie, som
lovet i spec.

34
00:01:20,662 --> 00:01:23,120
Og vi vil også følge op omkring
den plads, der var involveret.

35
00:01:23,120 --> 00:01:26,860
>> Et par af announcements-- så frokost
er, igen, denne fredag ​​klokken 13:15.

36
00:01:26,860 --> 00:01:30,420
Hvis du gerne vil slutte sig til os,
RSVP på denne URL her.

37
00:01:30,420 --> 00:01:33,730
Jason vises igen her fra den ene
af afsnittene et par år

38
00:01:33,730 --> 00:01:35,510
tilbage, hvilket skete
at falde på Halloween.

39
00:01:35,510 --> 00:01:38,950
Og ja, han klædt som en
græskar det pågældende år.

40
00:01:38,950 --> 00:01:42,700
Hvis du ser denne sektion
af hans fra 2011 sektion

41
00:01:42,700 --> 00:01:46,480
otte, hvis du er nysgerrig,
på CS50.tv, tror jeg

42
00:01:46,480 --> 00:01:49,730
dette var det år, hvor
hans luftpumpe arbejdede.

43
00:01:49,730 --> 00:01:52,490
>> Hvis du derefter se
lignende afsnit i 2012,

44
00:01:52,490 --> 00:01:55,620
du vil se denne Jason meget deflateret,
da dragten ikke længere fungerede,

45
00:01:55,620 --> 00:01:58,060
der er kun at sige
denne fredag, hvis du vil

46
00:01:58,060 --> 00:02:02,720
gerne skære et græskar med Daven
og Gabe og andre, RSVP til lederne

47
00:02:02,720 --> 00:02:04,480
ved cs50.harvard.edu adresse.

48
00:02:04,480 --> 00:02:06,200
Det tegner til at være sjovt.

49
00:02:06,200 --> 00:02:08,660
Daven, vi får at vide, har skåret
Græskar hele sit liv.

50
00:02:08,660 --> 00:02:11,930
Gabriel fra Brasilien har aldrig
skåret en græskar til Halloween.

51
00:02:11,930 --> 00:02:14,700
Så være der med dem, som han lærer.

52
00:02:14,700 --> 00:02:16,830
>> Seminarer, meanwhile--
så du lærer hurtigt

53
00:02:16,830 --> 00:02:20,650
om, hvad vores forventninger er for
det endelige projekt, som i det væsentlige

54
00:02:20,650 --> 00:02:23,150
vil koges ned til
designe og implementere

55
00:02:23,150 --> 00:02:26,440
de fleste helst projekt af interesse for
dig, omend betinget af godkendelse

56
00:02:26,440 --> 00:02:28,490
og vejledning fra din undervisning fyr.

57
00:02:28,490 --> 00:02:32,110
Mod slutningen af ​​den
semester, introducerer vi en række

58
00:02:32,110 --> 00:02:35,610
af seminarer, som er valgfrie klasser
ledet af undervisningen stipendiater og Harvard

59
00:02:35,610 --> 00:02:38,570
personale, venner af kurset på tværs
campus, om forskellige emner,

60
00:02:38,570 --> 00:02:41,470
er tangent til den
kursus underliggende pensum

61
00:02:41,470 --> 00:02:45,590
men ikke desto mindre relevant, sjov, og
anderledes for potentielle endelige projekter.

62
00:02:45,590 --> 00:02:49,530
>> For eksempel først, hvis du gerne vil
at registrere, hoved til denne URL der.

63
00:02:49,530 --> 00:02:53,010
Og dette er lineup for
dette års seminarer alene.

64
00:02:53,010 --> 00:02:56,060
Men indse vi har dusinvis af
seminarer fra de forløbne år, som alle

65
00:02:56,060 --> 00:02:59,774
er forbundet i menuen Seminarer
mulighed for kursets hjemmeside.

66
00:02:59,774 --> 00:03:02,190
Så hvis du tænker på
går ud over din komfort zone

67
00:03:02,190 --> 00:03:05,060
eller afhente nogle nye færdigheder,
for eksempel programmering iPhone

68
00:03:05,060 --> 00:03:08,100
apps med Swift, et nyt sprog
fra Apple eller Objective-C

69
00:03:08,100 --> 00:03:11,230
eller Android apps eller programmering [? cue?]
pærer, eller nogen af ​​de emner

70
00:03:11,230 --> 00:03:15,490
heroppe og mere, på grund af kontrol
ud registrerings siden.

71
00:03:15,490 --> 00:03:19,730
>> Så vi begyndte og afsluttet den
Mandag med at se på HTTP.

72
00:03:19,730 --> 00:03:22,675
Så hurtig refresher-- HTTP,
HyperText Transfer Protocol.

73
00:03:22,675 --> 00:03:24,045
Men hvad betyder det egentlig?

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

75
00:03:26,805 --> 00:03:27,930
Hvad betyder det egentlig?

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

77
00:03:30,665 --> 00:03:31,290
Er det en hånd?

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

79
00:03:33,074 --> 00:03:34,740
Jeg ved, du bare skrabe dit hoved.

80
00:03:34,740 --> 00:03:36,400
Men du ønsker at foreslå hvad HTTP er?

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

82
00:03:37,792 --> 00:03:40,576
>> Publikum: Hvordan computere
kommunikere med [uhørligt].

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

84
00:03:41,517 --> 00:03:43,100
David J MALAN: jeg savnede den sidste del.

85
00:03:43,100 --> 00:03:45,774
Hvordan computere kommunikerer med--

86
00:03:45,774 --> 00:03:47,325
>> PUBLIKUM: Internet-servere.

87
00:03:47,325 --> 00:03:50,450
David J MALAN: god-- med internet
servere, og især, webservere.

88
00:03:50,450 --> 00:03:53,533
Fordi tilbagekaldelse, der er en masse af
tjenester på internettet, hvoraf nogle

89
00:03:53,533 --> 00:03:57,349
du bruger sandsynligvis dagligt mellem chat
og besked, chat og web og e-mail,

90
00:03:57,349 --> 00:03:57,890
og lignende.

91
00:03:57,890 --> 00:04:00,900
Og HTTP er bare
protokol, som web-browsere

92
00:04:00,900 --> 00:04:03,750
tale, når du kommunikerer med
webservere, og vice versa.

93
00:04:03,750 --> 00:04:05,580
Og den analoge i
menneskelige verden kunne være,

94
00:04:05,580 --> 00:04:08,730
Jeg udvider min hånd til at ryste nogle
andre menneskets og han eller hun

95
00:04:08,730 --> 00:04:11,970
anerkender ved at udvide
hans eller hendes hånd så godt.

96
00:04:11,970 --> 00:04:13,970
Så det er bare en protokol,
et sæt af konventioner.

97
00:04:13,970 --> 00:04:15,630
>> Og hvad faktisk er disse konventioner?

98
00:04:15,630 --> 00:04:18,640
Nå, det bare koges ned til
sende meddelelser frem og tilbage,

99
00:04:18,640 --> 00:04:19,770
som vi afbildet her.

100
00:04:19,770 --> 00:04:22,520
Og der er et par måder,
som du kan sende disse meddelelser.

101
00:04:22,520 --> 00:04:24,360
Og måske den mest
fælles er kendt som get.

102
00:04:24,360 --> 00:04:26,510
Og vi vil se en kontrast
til dette inden længe.

103
00:04:26,510 --> 00:04:30,010
>> Men en get anmodning fra en browser
til server bare ligner dette.

104
00:04:30,010 --> 00:04:32,960
Det er en masse tekst, at det sætter
inde i en virtuel kuvert.

105
00:04:32,960 --> 00:04:35,854
På ydersiden af ​​denne kuvert
gå et par stykker af detaljer.

106
00:04:35,854 --> 00:04:37,770
Hvad skal gå på
kuvert, så at sige,

107
00:04:37,770 --> 00:04:41,820
for at få en anmodning som
dette fra mig til en webserver?

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

109
00:04:42,320 --> 00:04:43,270
>> PUBLIKUM: Din IP-adresse.

110
00:04:43,270 --> 00:04:45,890
>> David J MALAN: Min IP-adresse
i feltet Fra, så at sige,

111
00:04:45,890 --> 00:04:49,490
og naturligvis
modtagerens IP-adresse.

112
00:04:49,490 --> 00:04:52,710
Men i tilfælde af en web-pakke,
vi har brug for en lidt mere detaljeret

113
00:04:52,710 --> 00:04:55,254
Det er ikke nok blot at
Send en kuvert til en server,

114
00:04:55,254 --> 00:04:57,670
fordi denne server kunne være
lytter efter forskellige typer

115
00:04:57,670 --> 00:04:59,180
af internet-trafik.

116
00:04:59,180 --> 00:05:01,370
Så hvad skal vi ellers
udover modtagerens IP?

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

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

119
00:05:03,222 --> 00:05:04,241
>> PUBLIKUM: Er det TCP?

120
00:05:04,241 --> 00:05:05,074
David J MALAN: God.

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

122
00:05:06,470 --> 00:05:07,340
>> PUBLIKUM: Adresse.

123
00:05:07,340 --> 00:05:09,340
>> David J MALAN: Adresse,
eller port, som det hedder.

124
00:05:09,340 --> 00:05:11,010
Tæt på, men en TCP port nummer.

125
00:05:11,010 --> 00:05:12,220
Og der er en masse af disse.

126
00:05:12,220 --> 00:05:14,310
Men helt sikkert den mest
fortrolig bør i sidste ende

127
00:05:14,310 --> 00:05:17,590
80, som er standard
der bruges til web trafik.

128
00:05:17,590 --> 00:05:20,040
Og en anden velkendt
man snart vil være 443,

129
00:05:20,040 --> 00:05:24,280
som anvendes til sikker web
trafik, webadresser, der starter med https.

130
00:05:24,280 --> 00:05:26,650
>> Så dette er, hvad der foregår
indersiden af ​​kuverten.

131
00:05:26,650 --> 00:05:29,780
Og få / bare betyder, at give
mig fejlwebsite.

132
00:05:29,780 --> 00:05:32,700
Giv mig roden af ​​den hårde
køre på, at web-server.

133
00:05:32,700 --> 00:05:36,050
Og forhåbentlig web
server vil reagere med, OK

134
00:05:36,050 --> 00:05:39,630
og nummer 200, som er lige
en konvention siger, ja, alle

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

136
00:05:40,470 --> 00:05:41,680
Her er siden.

137
00:05:41,680 --> 00:05:45,510
Typen af ​​websiden kommer til at
være tekst, men mere specifikt, HTML,

138
00:05:45,510 --> 00:05:47,010
som vi er ved at dykke tilbage i.

139
00:05:47,010 --> 00:05:49,877
Og prik prik prik bare
midler, her er HTML.

140
00:05:49,877 --> 00:05:51,710
Og det er, hvor vi
afhente historien i dag,

141
00:05:51,710 --> 00:05:55,740
faktisk skriver HTML,
HyperText Markup Language, som

142
00:05:55,740 --> 00:05:57,727
er det sprog, som
skrives websider.

143
00:05:57,727 --> 00:05:59,060
Det er ikke et programmeringssprog.

144
00:05:59,060 --> 00:06:01,270
Der er ingen funktioner
eller sløjfer eller betingelser.

145
00:06:01,270 --> 00:06:03,800
Det er et kodesprog,
samt igen ser i dag,

146
00:06:03,800 --> 00:06:07,240
der giver dig mulighed for at angive
hvordan man kan strukturere og stilisere

147
00:06:07,240 --> 00:06:09,300
æstetisk en webside.

148
00:06:09,300 --> 00:06:11,470
>> Så dette var den ene
og kun side vi virkelig

149
00:06:11,470 --> 00:06:13,930
kiggede på, hvis kortvarigt, på mandag.

150
00:06:13,930 --> 00:06:16,250
Og bemærke et par
iøjnefaldende egenskaber.

151
00:06:16,250 --> 00:06:20,170
Der er en masse åbent vinklet
beslag og tæt vinkelklamme.

152
00:06:20,170 --> 00:06:23,160
Mellem de vinklede
parentes er ord.

153
00:06:23,160 --> 00:06:25,660
Og vi kommer til at starte
kalde disse ord tags.

154
00:06:25,660 --> 00:06:28,800
Så åbneparentes hoved
og lukkede beslag hoved

155
00:06:28,800 --> 00:06:33,620
er de åbne og lukkede tags,
eller start- og slut-tags

156
00:06:33,620 --> 00:06:37,660
henholdsvis et HTML-element,
som vi kalder det, der kaldes hoved.

157
00:06:37,660 --> 00:06:41,760
Og det samme gælder jargon
til krop i HTML og så videre.

158
00:06:41,760 --> 00:06:43,970
>> Og hvad er nice er
HTML-- og ja, vi får

159
00:06:43,970 --> 00:06:47,187
bruge frygtelig lidt tid på det,
fordi du for det meste bare regne ud

160
00:06:47,187 --> 00:06:49,770
hvilke funktioner den har, når du
faktisk har et konkret problem

161
00:06:49,770 --> 00:06:52,820
at solve-- du opdage, at
en browser er temmelig dum.

162
00:06:52,820 --> 00:06:56,450
Det er bare at gå til do-- ikke ulig
a computer-- hvad du fortæller det at gøre.

163
00:06:56,450 --> 00:06:59,279
Og så når du har åbent
beslag HTML allerøverst

164
00:06:59,279 --> 00:07:01,320
der, som i det væsentlige
betyder bare, hey, browser,

165
00:07:01,320 --> 00:07:04,090
her kommer en webside skrevet i HTML.

166
00:07:04,090 --> 00:07:06,130
>> Når det ser åbneparentes
hoved, det betyder bare,

167
00:07:06,130 --> 00:07:10,350
hey, browser, her kommer hovedet, eller
den øverste del af min webside.

168
00:07:10,350 --> 00:07:14,192
Når den ser en lukket beslag
hoved, det betyder bare, hey,

169
00:07:14,192 --> 00:07:15,150
det er det for hovedet.

170
00:07:15,150 --> 00:07:16,420
Standby til noget andet.

171
00:07:16,420 --> 00:07:18,878
Og at noget andet er
tilsyneladende vil være det organ.

172
00:07:18,878 --> 00:07:22,630
Og når du ikke har et tag, ligesom
du har bare hej, komma, verden,

173
00:07:22,630 --> 00:07:26,610
der er bare kommer til at være rå tekst,
i sidste ende vises på skærmen.

174
00:07:26,610 --> 00:07:29,220
>> Nu, vil du bemærke også
indrykningen her.

175
00:07:29,220 --> 00:07:32,160
Du kan sikkert udlede
hvordan vi bearbejde det.

176
00:07:32,160 --> 00:07:34,850
Hver gang jeg åbner et tag,
så at sige, indrykke jeg.

177
00:07:34,850 --> 00:07:38,540
Og hver gang jeg lukker
et tag, jeg un-led,

178
00:07:38,540 --> 00:07:40,690
samme ånd til krøllede parenteser.

179
00:07:40,690 --> 00:07:43,470
Og udover det, er jeg venlig
for at bruge min dømmekraft.

180
00:07:43,470 --> 00:07:48,380
Bemærk, at jeg ikke gider at ramme
Indtast indersiden af ​​denne titel tag.

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

182
00:07:48,990 --> 00:07:51,920
Nå, jeg har lige besluttet det så en
lidt renere til mig, mennesket,

183
00:07:51,920 --> 00:07:53,181
bare ikke gider at gøre det.

184
00:07:53,181 --> 00:07:54,930
Så igen, er der nogle
dom kalder bare

185
00:07:54,930 --> 00:07:57,670
ligesom der er i C eller ethvert sprog.

186
00:07:57,670 --> 00:08:04,110
>> Men bemærk også, at denne indrykning
egner sig til en mental model,

187
00:08:04,110 --> 00:08:05,670
ikke at over komplicere det.

188
00:08:05,670 --> 00:08:07,020
Men et træ, right?

189
00:08:07,020 --> 00:08:09,290
Hvis du tænker på en web
side, tilsyneladende skrevet

190
00:08:09,290 --> 00:08:12,050
ligesom dette, som værende
pænt indrykket på den måde,

191
00:08:12,050 --> 00:08:17,390
du kan næsten tænke på åbneparentes
HTML lukket beslag tag afgrænse

192
00:08:17,390 --> 00:08:21,380
roden af ​​en node, et stamtræ
stil knude i stil med træer

193
00:08:21,380 --> 00:08:22,900
vi kiggede på sidste fredag.

194
00:08:22,900 --> 00:08:27,630
>> Og ja, vi har på lige her
hvad vi vil kalde en DOM, D-O-M, dokument

195
00:08:27,630 --> 00:08:31,680
objekt model, en fancy måde at sige
et træ, der repræsenterer denne HTML.

196
00:08:31,680 --> 00:08:36,140
Og bemærk, at HTML har, vil vi sige,
ligesom en familie træ, to børn.

197
00:08:36,140 --> 00:08:37,659
Til venstre er hovedet.

198
00:08:37,659 --> 00:08:39,179
Til højre er kroppen.

199
00:08:39,179 --> 00:08:44,220
>> Og ligesom en hjernedød tanke øvelse,
hoved, har selvfølgelig hvor mange børn

200
00:08:44,220 --> 00:08:46,070
overensstemmelse med denne struktur?

201
00:08:46,070 --> 00:08:48,200
Så bare en, title--
og det er derfor, vi har

202
00:08:48,200 --> 00:08:50,580
pilen går fra hoved til titlen.

203
00:08:50,580 --> 00:08:55,110
Så det er, som om den pågældende person i
familietræ havde blot én afkom.

204
00:08:55,110 --> 00:08:58,230
Og så selve titlen kan
siges at have et barn også.

205
00:08:58,230 --> 00:09:01,780
>> Husk på, at HTML havde
hej, komma, verden under den.

206
00:09:01,780 --> 00:09:06,090
Og jeg har simpelthen trukket det inden for en
oval i stedet for et rektangel bare

207
00:09:06,090 --> 00:09:10,559
at formidle semantisk at selvom
det er en node i træet, så at sige,

208
00:09:10,559 --> 00:09:12,100
Det er slags fundamentalt anderledes.

209
00:09:12,100 --> 00:09:12,800
Det er ikke et tag.

210
00:09:12,800 --> 00:09:14,780
Eller mere korrekt, det er ikke et element.

211
00:09:14,780 --> 00:09:16,590
Det er bare en tekst node, hvis du vil.

212
00:09:16,590 --> 00:09:18,990
Men disse er helt
vilkårlige menneskelige konventioner.

213
00:09:18,990 --> 00:09:23,180
Dette er blot nu min måde
repræsenterer, hvad jeg vil som et aggregat

214
00:09:23,180 --> 00:09:24,340
ringe dokumentet.

215
00:09:24,340 --> 00:09:27,750
>> Og som en sidebemærkning, de ting på
super øverste venstre hjørne,

216
00:09:27,750 --> 00:09:32,080
åbneparentes udråbstegn doc
typen HTML, det ligner et tag,

217
00:09:32,080 --> 00:09:35,560
men det er den dumme hjørne tilfælde, hvor
det er bare der, kopieres og indsættes

218
00:09:35,560 --> 00:09:38,460
at angive browsere
dette er HTML version 5.

219
00:09:38,460 --> 00:09:41,540
Verden ændrer sig, hvad
første linje kode i en side skal være.

220
00:09:41,540 --> 00:09:43,820
Det betyder blot version 5.

221
00:09:43,820 --> 00:09:45,950
Så det gør ikke helt
ligne de andre.

222
00:09:45,950 --> 00:09:48,120
>> Okay, så med det
sagde, vil du nu sætte pris på

223
00:09:48,120 --> 00:09:50,767
dette forholdsvis denne dumme
tatovering nogen fik.

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

225
00:09:51,990 --> 00:09:54,210
>> David J MALAN: Okay,
og lad os nu faktisk dykke

226
00:09:54,210 --> 00:09:55,710
til at gøre noget med dette.

227
00:09:55,710 --> 00:09:58,610
Du vil minde om, at sidste gang
Jeg åbnede op for CS50 Appliance

228
00:09:58,610 --> 00:10:01,650
og jeg gjorde noget som
simpelt som at åbne op gedit.

229
00:10:01,650 --> 00:10:05,190
Og jeg har gemt filen, selv om
min desktop-- intetsteds special--

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

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

232
00:10:07,100 --> 00:10:10,984
>> Så lad mig gøre det
igen-- hello.html Enter.

233
00:10:10,984 --> 00:10:13,900
Og nu i denne fil, vil jeg
gå videre og kopiere det, vi lige

234
00:10:13,900 --> 00:10:18,850
saw-- doc typen html Så jeg har tænkt mig at
gøre åbneparentes html lukket beslag.

235
00:10:18,850 --> 00:10:21,890
Og så har jeg tænkt mig at præventivt
åbne og lukke tag.

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

237
00:10:22,390 --> 00:10:23,598
Bare så jeg ikke glemmer senere.

238
00:10:23,598 --> 00:10:26,850
Det er bare god praksis, ligesom åbning
og lukke krøllede parenteser på én gang.

239
00:10:26,850 --> 00:10:28,900
>> Og hvad så kom næste?

240
00:10:28,900 --> 00:10:30,582
Du kan tænke på tatoveringen.

241
00:10:30,582 --> 00:10:31,450
>> PUBLIKUM: Hovedet.

242
00:10:31,450 --> 00:10:32,500
>> David J MALAN: Hovedet.

243
00:10:32,500 --> 00:10:36,020
Og derefter i her, jeg
havde titlen, tror jeg.

244
00:10:36,020 --> 00:10:39,886
Og titlen var vilkårligt,
hej, verden tæt titel.

245
00:10:39,886 --> 00:10:42,760
Og derefter ned her, kroppen, af
course-- så vi lukker kroppen tag.

246
00:10:42,760 --> 00:10:45,660
Og så bare lidt redundant,
Jeg havde den samme ting hernede.

247
00:10:45,660 --> 00:10:47,150
>> Så jeg hævder, at dette er en webside.

248
00:10:47,150 --> 00:10:49,050
Det er noget,
kunne nu leve på internettet,

249
00:10:49,050 --> 00:10:51,925
selv om det naturligvis er bogstaveligt talt
bor på mit skrivebord lige nu.

250
00:10:51,925 --> 00:10:55,837
Men ja, hvis jeg minimere gedit,
Jeg vil se på mit skrivebord dens ikon.

251
00:10:55,837 --> 00:10:58,420
Selv om dette er apparatet,
du kunne gøre dette på Mac OS

252
00:10:58,420 --> 00:11:01,580
uden TextEdit eller
Vinduer med Notepad selv.

253
00:11:01,580 --> 00:11:06,115
>> Og hvis jeg går videre og dobbeltklik
at selv, og select-- godt, lad os

254
00:11:06,115 --> 00:11:07,990
ikke vælge at fordi
Chrome er ikke åbne.

255
00:11:07,990 --> 00:11:09,281
Lad os gå videre og åbne Chrome.

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

257
00:11:10,160 --> 00:11:14,040
Og derefter gøre Kommando-O for åben
Og navigere til mit skrivebord

258
00:11:14,040 --> 00:11:15,320
og åbne den pågældende fil.

259
00:11:15,320 --> 00:11:20,120
Det er sådan en browser fortolker
HTML, top til bund, venstre til højre.

260
00:11:20,120 --> 00:11:21,314
Hey, browser her er HTML.

261
00:11:21,314 --> 00:11:21,980
Her er hovedet.

262
00:11:21,980 --> 00:11:23,250
Her er titlen.

263
00:11:23,250 --> 00:11:24,090
Her er kroppen.

264
00:11:24,090 --> 00:11:26,620
Og ja, det er sådan
det gør denne webside.

265
00:11:26,620 --> 00:11:27,800
>> Men læg mærke webadressen.

266
00:11:27,800 --> 00:11:32,430
Ingen af ​​jer kunne trække op denne specifikke
side på din bærbare lige nu,

267
00:11:32,430 --> 00:11:34,910
selv inde i dit
apparatet via denne webadresse,

268
00:11:34,910 --> 00:11:40,130
fordi file: // angiver det faktisk
på mit filsystem, min harddisk,

269
00:11:40,130 --> 00:11:40,990
ikke dit.

270
00:11:40,990 --> 00:11:42,440
Så det er ikke alt, nyttigt.

271
00:11:42,440 --> 00:11:44,940
>> Lad os nu bevæge sig mod
anvende en faktisk webserver.

272
00:11:44,940 --> 00:11:48,309
Og det viser sig CS50 Appliance
er mere end blot et miljø, hvor

273
00:11:48,309 --> 00:11:51,100
du kan skrive C-kode og kompilere
og køre det ligesom du har gjort.

274
00:11:51,100 --> 00:11:55,500
Det er også blevet konfigureret af
personale til at repræsentere en typisk web

275
00:11:55,500 --> 00:11:58,290
server, der er på internettet,
en, som du kan betale for

276
00:11:58,290 --> 00:12:00,210
eller en, der er i den såkaldte sky.

277
00:12:00,210 --> 00:12:02,600
>> Og det kører
standard gratis open source

278
00:12:02,600 --> 00:12:06,160
software, for eksempel noget
kaldet Apache, som måske er

279
00:12:06,160 --> 00:12:08,700
stadig den mest populære web
server software i verden

280
00:12:08,700 --> 00:12:11,030
at tusindvis af websteder bruger i dag.

281
00:12:11,030 --> 00:12:13,420
Og det også selv har
software som MySQL,

282
00:12:13,420 --> 00:12:16,240
som er en database server
at vi i sidste ende vil komme til,

283
00:12:16,240 --> 00:12:18,330
der er kun at sige
Jeg kan begynde at behandle

284
00:12:18,330 --> 00:12:22,040
mit apparat som en fuldt udbygget server
at jeg ikke betale for andre steder.

285
00:12:22,040 --> 00:12:25,980
Det bare lever på min egen bærbare computer for
udviklings- og convenience formål.

286
00:12:25,980 --> 00:12:27,870
>> Så lad os gå videre og
drage fordel af dette.

287
00:12:27,870 --> 00:12:30,120
Jeg har tænkt mig at gå videre og
åbne en terminal vindue.

288
00:12:30,120 --> 00:12:33,030
Og jeg har tænkt mig at gå videre og
move-- faktisk først er jeg

289
00:12:33,030 --> 00:12:34,860
kommer til at navigere til mit skrivebord.

290
00:12:34,860 --> 00:12:36,400
Hvis jeg gør ls, der er hello.html.

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

292
00:12:37,022 --> 00:12:38,730
Og jeg har tænkt mig at gå
fremad og begynde at bruge

293
00:12:38,730 --> 00:12:40,800
en ny mappe vi har
ikke brugt før i dag.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- Jeg har tænkt mig at flytte
til ../vhosts til virtuelle hosts--

295
00:12:46,840 --> 00:12:50,940
mere om det i den future-- og derefter
ind i en mappe kaldet localhost,

296
00:12:50,940 --> 00:12:54,420
som er øgenavnet givet til næsten
enhver computer, uanset om det er en Mac, PC,

297
00:12:54,420 --> 00:12:57,560
eller Linux-computer, og derefter
specifikt ind i en mappe, som vi,

298
00:12:57,560 --> 00:13:01,260
personalet allerede oprettet for dig, når
du hentede apparatet kaldet

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

300
00:13:01,760 --> 00:13:04,551
Og som navnet antyder, noget
Jeg sætter i denne mappe, i teorien,

301
00:13:04,551 --> 00:13:07,790
vil nu blive
offentlig mindste til mennesker

302
00:13:07,790 --> 00:13:10,030
der har en direkte
forbindelse til min computer.

303
00:13:10,030 --> 00:13:13,160
>> Så lad mig nu gå videre og
gøre cd til samme mappe

304
00:13:13,160 --> 00:13:15,490
så jeg kan se hvad der er
foregår og type LS.

305
00:13:15,490 --> 00:13:17,630
Og ja, det er det
eneste derinde.

306
00:13:17,630 --> 00:13:23,250
Jeg hævder nu, fordi jeg har sat dette
fil hello.html inde i en mappe

307
00:13:23,250 --> 00:13:26,940
kaldet offentlige inde i en mappe
kaldet localhost inde i en mappe

308
00:13:26,940 --> 00:13:29,810
kaldet vhosts, som
tak til CS50 personale

309
00:13:29,810 --> 00:13:34,390
er blevet præ-konfigureret til at være
roden af ​​din webserver,

310
00:13:34,390 --> 00:13:36,900
Jeg kan nu forhåbentlig gøre dette.

311
00:13:36,900 --> 00:13:38,390
>> Jeg har tænkt mig at åbne en ny fane.

312
00:13:38,390 --> 00:13:40,090
Og jeg har tænkt mig at gå på ikke at file: //.

313
00:13:40,090 --> 00:13:44,520
Jeg har tænkt mig at bruge den faktiske
http / localhost, som

314
00:13:44,520 --> 00:13:47,470
igen, er kaldenavnet
for min egen server.

315
00:13:47,470 --> 00:13:51,085
Og så har jeg tænkt mig at gå til hvad
fil navn, bare for at være klar?

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

317
00:13:52,680 --> 00:13:54,320
Hvor er denne historie sandsynligvis går?

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
>> Så med andre ord, vil jeg nu dette
er min egen computer, mit eget apparat,

322
00:14:04,270 --> 00:14:05,660
som om det er et virkeligt server.

323
00:14:05,660 --> 00:14:07,490
Dens kaldenavn er localhost.

324
00:14:07,490 --> 00:14:10,210
Men tænk på localhost som gerne
Facebook.com google.com, uanset hvad.

325
00:14:10,210 --> 00:14:11,600
Det er bare min lokale navn.

326
00:14:11,600 --> 00:14:14,810
Og så det sidste jeg ønsker, er i
roden af ​​harddisken, så at sige,

327
00:14:14,810 --> 00:14:17,729
eller roden af ​​webserveren,
ergo skråstreg og derefter

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

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

330
00:14:19,880 --> 00:14:21,930
>> Lad mig zoome ud og trykke Enter.

331
00:14:21,930 --> 00:14:24,266
Og ja, er der nu min webside.

332
00:14:24,266 --> 00:14:25,390
Så det er lidt anderledes.

333
00:14:25,390 --> 00:14:26,880
Og det er lige så underwhelming.

334
00:14:26,880 --> 00:14:27,904
Dette er den gamle version.

335
00:14:27,904 --> 00:14:29,070
Lad mig formindske skrifttypen tilbage.

336
00:14:29,070 --> 00:14:29,745
Dette er den gamle.

337
00:14:29,745 --> 00:14:30,890
Dette er den nye.

338
00:14:30,890 --> 00:14:35,430
Men hvad er fundamentalt sker
nu er, at HTTP bliver brugt.

339
00:14:35,430 --> 00:14:39,344
>> Lad os gøre dette til en lidt mere klar, eller,
hvis du vil, en lidt mere kompliceret.

340
00:14:39,344 --> 00:14:41,760
Lad mig gå til nederste højre
hjørne af mit apparat.

341
00:14:41,760 --> 00:14:44,000
Og læg mærke til, at alt dette
tid, har der været en række.

342
00:14:44,000 --> 00:14:47,330
Det er den unikke adresse
af din CS50 Appliance.

343
00:14:47,330 --> 00:14:50,800
Det er en privat adresse,
som det fremgår af den 172.16,

344
00:14:50,800 --> 00:14:53,860
hvilket betyder bare kun dig fysisk
kan få adgang til denne web-server.

345
00:14:53,860 --> 00:14:56,340
Alt er firewalled og
pænt beskyttet fra resten

346
00:14:56,340 --> 00:14:58,130
af verden på grund af denne adressering.

347
00:14:58,130 --> 00:15:01,920
>> Og nu mærke til, men hvis jeg går til
denne adresse, ikke i mit apparat,

348
00:15:01,920 --> 00:15:04,340
men i Mac OS-- jeg har tænkt mig
at gå tilbage herovre.

349
00:15:04,340 --> 00:15:05,930
Dette er min Mac nu.

350
00:15:05,930 --> 00:15:08,460
Og nu jeg har tænkt mig at åbne op
denne version af Chrome her.

351
00:15:08,460 --> 00:15:17,370
Og jeg har tænkt mig at gå til http: //172.16.25
/ Og jeg glemmer rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Så jeg har tænkt mig at besøge fra min Mac
at IP-adressen /hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
Og nu ser jeg fra min Mac
at min CS50 Appliance, der er

354
00:15:29,850 --> 00:15:32,600
IP-adresse er at
nummer, faktisk opfører

355
00:15:32,600 --> 00:15:34,320
som en web-server på internettet.

356
00:15:34,320 --> 00:15:36,944
Det har ikke en nice let at
Husk navn, ligesom Facebook.com,

357
00:15:36,944 --> 00:15:40,370
men det er ved hjælp af HTTP
tilsyneladende, selvom Chrome

358
00:15:40,370 --> 00:15:43,560
er en slags forenkle verden
for os, men ikke viser os HTTP.

359
00:15:43,560 --> 00:15:46,210
Men det er faktisk præcis det.

360
00:15:46,210 --> 00:15:48,470
Chrome er bare spare nogle
tastetryk i disse dage.

361
00:15:48,470 --> 00:15:50,530
Og det er, hvad vi nu ser.

362
00:15:50,530 --> 00:15:51,890
>> Så det er alt fint og godt.

363
00:15:51,890 --> 00:15:53,740
Men det er en temmelig underwhelming side.

364
00:15:53,740 --> 00:15:56,230
Lad mig gå ind og gøre noget
lidt anderledes nu.

365
00:15:56,230 --> 00:15:57,910
Så lad mig gå tilbage til gedit.

366
00:15:57,910 --> 00:16:00,580
Og i stedet for hej,
verden, lad os sætte et billede.

367
00:16:00,580 --> 00:16:05,880
Og jeg påstod fra before-- lade mig gå
ind i min localhost bibliotek offentligheden.

368
00:16:05,880 --> 00:16:10,580
Og lad mig gå videre og kopiere en
hel masse filer fra i dag

369
00:16:10,580 --> 00:16:15,633
fra min Dropbox mappe ind på her.

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

371
00:16:19,470 --> 00:16:21,680
>> Nu hvis jeg skriver ls, se
på alle disse filer

372
00:16:21,680 --> 00:16:24,940
at jeg har distribueret af
kursus hjemmeside forud for i dag,

373
00:16:24,940 --> 00:16:26,830
hvoraf den ene er stadig hello.html.

374
00:16:26,830 --> 00:16:27,830
Så der er det ene.

375
00:16:27,830 --> 00:16:30,730
Og husker denne tåbelige ene
fra sidste time-- cat.jpg.

376
00:16:30,730 --> 00:16:34,550
Så lad mig prøve at indlejre
cat.jpg indersiden af ​​min webside.

377
00:16:34,550 --> 00:16:37,690
>> Jeg har tænkt mig at gå videre
og gøre cat.jpg, gemme.

378
00:16:37,690 --> 00:16:38,950
Lad mig gå tilbage til Chrome.

379
00:16:38,950 --> 00:16:41,140
Og lad mig zoome ind på
skrifttype og nu genindlæse.

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

381
00:16:43,090 --> 00:16:45,030
Ups, hvor jeg sætte dette?

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

383
00:16:48,210 --> 00:16:51,520
Standby-- jeg har stadig den gamle
version fra mit skrivebord åben.

384
00:16:51,520 --> 00:16:56,020
Så lad mig gå ind i min vhost, min
localhost, min offentlige, og hello.html.

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

386
00:16:57,320 --> 00:17:00,670
Så lad mig nu gå videre og
sige cat.jpg indersiden af ​​kroppen

387
00:17:00,670 --> 00:17:02,830
hvor jeg ønsker det skal være
vises og genindlæse.

388
00:17:02,830 --> 00:17:04,560
Selvfølgelig er dette ikke korrekt.

389
00:17:04,560 --> 00:17:08,050
>> Så jeg er nødt til at fortælle browseren lidt
mere bevidst hvad jeg vil have det til at gøre.

390
00:17:08,050 --> 00:17:10,210
Blot at skrive navnet er
naturligvis ikke tilstrækkeligt.

391
00:17:10,210 --> 00:17:15,134
Så huske, at der var en anden
tag, image, IMG for korte.

392
00:17:15,134 --> 00:17:17,550
Det er bare fordi mennesker
ikke som den type fulde ord.

393
00:17:17,550 --> 00:17:19,050
Og så kan vi gøre source = "cat.jpg".

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

395
00:17:21,470 --> 00:17:23,550
>> Og nu jeg har tænkt mig at gøre
én ting anderledes her.

396
00:17:23,550 --> 00:17:25,390
Selvom alle
vores tags hidtil har

397
00:17:25,390 --> 00:17:28,086
havde denne forestilling om en
starte tag og en ende tag,

398
00:17:28,086 --> 00:17:30,210
som ikke rigtig gøre
sans for et billede, right?

399
00:17:30,210 --> 00:17:32,430
Et billede er enten der eller ikke.

400
00:17:32,430 --> 00:17:36,650
Og så menneskene er kommet
med en enklere konvention.

401
00:17:36,650 --> 00:17:40,310
Når du har et tag, der både kan
starte og slutte på samme time--

402
00:17:40,310 --> 00:17:43,790
det kan være tom, så at speak-- bare
sætte skråstreg indersiden af ​​tag

403
00:17:43,790 --> 00:17:44,710
til allersidst.

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

405
00:17:45,776 --> 00:17:47,150
Lad mig nu vende tilbage til min browser.

406
00:17:47,150 --> 00:17:50,377
Hit Reload Damn, er noget galt.

407
00:17:50,377 --> 00:17:52,460
Du har sikkert set dette
lejlighedsvis på nettet,

408
00:17:52,460 --> 00:17:53,600
selv om det ikke har været din skyld.

409
00:17:53,600 --> 00:17:54,766
Det er webserveren skyld.

410
00:17:54,766 --> 00:17:56,240
Hvad oder dette synes at tyde på?

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

412
00:17:57,450 --> 00:17:58,009
Det er brudt.

413
00:17:58,009 --> 00:17:59,300
Det er, hvor billedet tilhører.

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

415
00:17:59,700 --> 00:18:01,560
>> PUBLIKUM: Men det gør ikke
har adgang til billedet.

416
00:18:01,560 --> 00:18:03,070
>> David J MALAN: Det gør ikke
har adgang til billedet.

417
00:18:03,070 --> 00:18:05,230
Det, eller endnu værre, måske
det ikke engang eksisterer.

418
00:18:05,230 --> 00:18:06,729
Lad os se om vi ikke kan diagnosticere det.

419
00:18:06,729 --> 00:18:09,390
Husker fra sidste gang, at hvis
i Chrome, i apparatet,

420
00:18:09,390 --> 00:18:11,870
eller endda på din Mac eller pc,
du gå til menuen Developer

421
00:18:11,870 --> 00:18:14,650
og gå til Developer Tools
mulighed, som du sandsynligvis har

422
00:18:14,650 --> 00:18:16,850
anvendes ikke meget eller nogensinde.

423
00:18:16,850 --> 00:18:20,780
Og hvis jeg går til Netværk
og genindlæse siden,

424
00:18:20,780 --> 00:18:24,110
lad os faktisk se på HTTP
anmodninger, der bliver gjort.

425
00:18:24,110 --> 00:18:28,400
>> Det ligner hello.html er
faktisk OK, dermed 200.

426
00:18:28,400 --> 00:18:30,630
Men cat.jpg er et 403.

427
00:18:30,630 --> 00:18:31,650
Så det er ikke en 404.

428
00:18:31,650 --> 00:18:33,490
Fil eksisterer sandsynligvis.

429
00:18:33,490 --> 00:18:35,250
403 betyder forbudt.

430
00:18:35,250 --> 00:18:37,790
Så dette er en smule forvirrende.

431
00:18:37,790 --> 00:18:42,340
Jeg har tænkt mig at gå tilbage
til min terminal vindue.

432
00:18:42,340 --> 00:18:43,700
Lad mig zoome op her.

433
00:18:43,700 --> 00:18:44,750
Og lad mig gøre en ls.

434
00:18:44,750 --> 00:18:46,430
Der er de samme filer.

435
00:18:46,430 --> 00:18:49,410
>> Lad mig nu gøre en ls-l,
som du har sikkert

436
00:18:49,410 --> 00:18:53,350
brugt før til at se på fil
størrelser måske eller tidsstempler.

437
00:18:53,350 --> 00:18:55,590
Og vi ser en hel masse
overvældende information.

438
00:18:55,590 --> 00:18:57,040
Men bemærke et par detaljer.

439
00:18:57,040 --> 00:19:01,660
Her er hello.html i dette
række her og her er cat.jpg.

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

441
00:19:02,934 --> 00:19:05,850
Og det er bare apparatet bliver
brugervenlig ved at fremhæve JPEG s

442
00:19:05,850 --> 00:19:07,380
i lilla som denne.

443
00:19:07,380 --> 00:19:11,470
Men hvad der ellers er anderledes ved siden af
filstørrelsen og filnavnet?

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

445
00:19:13,438 --> 00:19:14,754
>> PUBLIKUM: [uhørligt].

446
00:19:14,754 --> 00:19:16,920
David J MALAN: Ja, der er
to R mere er herovre.

447
00:19:16,920 --> 00:19:20,170
Læg mærke til hvad hello.html har foregår.

448
00:19:20,170 --> 00:19:24,050
Så det viser sig, at navnet
denne mappe offentlighed er vigtig.

449
00:19:24,050 --> 00:19:26,400
Alt i denne mappe
menes at være public.

450
00:19:26,400 --> 00:19:28,790
Men det er ikke tilstrækkeligt
bare for at slippe filer derinde.

451
00:19:28,790 --> 00:19:31,480
Du skal også til at ændre
tilstanden af ​​filerne,

452
00:19:31,480 --> 00:19:35,180
ændre tilladelserne for
filen til proaktivt ikke

453
00:19:35,180 --> 00:19:37,650
være standardindstillingen,
som er, at jeg kun kan læse

454
00:19:37,650 --> 00:19:39,220
og skrive det, jeg er ejeren.

455
00:19:39,220 --> 00:19:43,540
Jeg ønsker, at hele verden alle til
være i stand til at læse min fil, så at sige.

456
00:19:43,540 --> 00:19:44,950
Læs betyder bare se den.

457
00:19:44,950 --> 00:19:49,780
>> Og ja, som du kan se i problem
sæt syv, det er hvad disse R middelværdi.

458
00:19:49,780 --> 00:19:53,160
Disse to R middelværdi lade alle
andre steder i verden også læse det,

459
00:19:53,160 --> 00:19:55,300
især nu,
Det er i denne mappe.

460
00:19:55,300 --> 00:19:59,620
Så den nemmeste måde at løse dette er at
gå til min prompt og gøre chmod for forandring

461
00:19:59,620 --> 00:20:05,580
mode og derefter gøre et + r, helt,
alle, alle, plus r for læse,

462
00:20:05,580 --> 00:20:07,944
og derefter cat.jpg Enter.

463
00:20:07,944 --> 00:20:10,360
Intet synes at ske, som
betyder normalt en god ting.

464
00:20:10,360 --> 00:20:13,850
Så ls-l igen-- nu
lad os se på cat.jpg.

465
00:20:13,850 --> 00:20:15,750
Og denne tilladelse
synes at have ændret sig.

466
00:20:15,750 --> 00:20:18,670
Som en sidebemærkning, hvis du laver en
fejl og du, for eksempel,

467
00:20:18,670 --> 00:20:23,210
lige lavet your-- jeg ikke know-- essay
offentligt tilgængelige ved et uheld,

468
00:20:23,210 --> 00:20:25,480
du kan gøre det modsatte, chmod a-r.

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

470
00:20:25,909 --> 00:20:28,200
Selvom ærligt, bør det ikke
være i offentlighedens bibliotek

471
00:20:28,200 --> 00:20:29,760
alligevel, hvis det er den bekymring.

472
00:20:29,760 --> 00:20:32,475
>> Så lad os nu gå tilbage til
min browser og reload.

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

474
00:20:32,904 --> 00:20:34,820
Og jeg har tænkt mig at klikke
den lille Ghostbusters

475
00:20:34,820 --> 00:20:38,030
symbolet for at fjerne den del af
skærm, så vi kan se nye anmodninger.

476
00:20:38,030 --> 00:20:40,630
Og ja, her er
Grump Cat fra før.

477
00:20:40,630 --> 00:20:43,010
Men endnu vigtigere,
teknisk, der er

478
00:20:43,010 --> 00:20:45,565
nummer 200, som
betyder, at vi fik det OK.

479
00:20:45,565 --> 00:20:47,190
Okay, så det er alt fint og godt.

480
00:20:47,190 --> 00:20:48,940
Men vi er ikke at gøre
det bedste af hjemmesider,

481
00:20:48,940 --> 00:20:51,967
heller ikke vil vi forsøge alt for hårdt til
gøre mest fantasifulde af hjemmesider i dag.

482
00:20:51,967 --> 00:20:54,550
Men lad os i det mindste gøre noget
super velkendt før raslende

483
00:20:54,550 --> 00:20:56,030
fra et par andre mærker.

484
00:20:56,030 --> 00:20:58,470
Så formoder jeg ikke bare vil have en kat her.

485
00:20:58,470 --> 00:21:02,530
Antag jeg rent faktisk ønsker dette
kat til at linke til noget.

486
00:21:02,530 --> 00:21:07,210
>> Jeg kunne for eksempel
gøre noget som dette.

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

488
00:21:08,580 --> 00:21:12,890
en for anker href for
hyper henvisning equals--

489
00:21:12,890 --> 00:21:17,440
og lad os bare gøre noget
ligesom www.google.com close

490
00:21:17,440 --> 00:21:19,540
citere tæt beslag.

491
00:21:19,540 --> 00:21:22,000
Og nu søge efter katte.

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

493
00:21:23,520 --> 00:21:26,760
Så dette har kun én slags
af fundamentalt nye detaljer.

494
00:21:26,760 --> 00:21:28,190
Mærkaten naturligvis er forskellige.

495
00:21:28,190 --> 00:21:31,770
Det er det navn, en for anker
href eller hyper reference.

496
00:21:31,770 --> 00:21:35,269
>> Men endnu vigtigere, er der
denne syntaktiske træk her.

497
00:21:35,269 --> 00:21:37,810
Dette er, hvad vi vil begynde at kalde
ikke et tag, men en attribut.

498
00:21:37,810 --> 00:21:40,830
Og en attribut er noget,
modificerer opførslen af ​​en tag.

499
00:21:40,830 --> 00:21:45,400
Og denne attribut, href, midler
ændre adfærd dette anker

500
00:21:45,400 --> 00:21:48,430
så når der klikkes på,
det går til denne URL her.

501
00:21:48,430 --> 00:21:50,330
Og selvfølgelig, at webadressen er Google.

502
00:21:50,330 --> 00:21:53,951
>> I mellemtiden, hvad er dette
tekst her kommer til at være?

503
00:21:53,951 --> 00:21:55,950
Nå, der kommer til at være
hvad det menneskelige faktisk

504
00:21:55,950 --> 00:21:58,470
ser som det understregede
link, så simpelt er det.

505
00:21:58,470 --> 00:21:59,220
Så lad os prøve dette.

506
00:21:59,220 --> 00:21:59,980
Lad mig gemme det.

507
00:21:59,980 --> 00:22:01,650
Jeg er stadig i hello.html.

508
00:22:01,650 --> 00:22:05,360
Men i de udgaver online, vil du se
de faktiske filnavne vi allerede forberedt.

509
00:22:05,360 --> 00:22:06,805
Lad mig gå videre og genindlæse.

510
00:22:06,805 --> 00:22:08,680
Og nu er det en meget
underwhelming side stadig.

511
00:22:08,680 --> 00:22:10,910
Men hvis jeg svæve over there--
og det er en lidt lille,

512
00:22:10,910 --> 00:22:13,576
men-- du kan se i bunden
venstre hjørne af skærmen,

513
00:22:13,576 --> 00:22:15,242
det er faktisk at gå til google.com.

514
00:22:15,242 --> 00:22:19,280
Og hvis jeg klikker der, vil det
piskeris mig vej til den faktiske Google.

515
00:22:19,280 --> 00:22:22,610
>> Men bemærk her en mulighed for
udnyttelse, lige som en sidebemærkning.

516
00:22:22,610 --> 00:22:25,150
Og vi vil komme tilbage til andre
spørgsmål om sikkerhed inden længe.

517
00:22:25,150 --> 00:22:29,290
Fordi der er denne dikotomi
mellem hvor du gå og hvad du siger,

518
00:22:29,290 --> 00:22:34,722
du kunne gøre noget lignende
denne-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, og nu, hvis jeg genindlæse
efter at have gemt den pågældende side,

520
00:22:37,134 --> 00:22:38,800
det ser ud som jeg har tænkt mig at gå til Google.

521
00:22:38,800 --> 00:22:40,966
Men der er ingen grund til at jeg
nødt til at gå til Google, right?

522
00:22:40,966 --> 00:22:47,460
Jeg kunne faktisk gå til noget lignende
badguy.com, genindlæse siden herovre.

523
00:22:47,460 --> 00:22:49,750
Og varsel, det ligner stadig Google.

524
00:22:49,750 --> 00:22:52,020
Og kun hvis jeg er skarp
nok til at svæve over her

525
00:22:52,020 --> 00:22:54,770
ser jeg det endda gå til
gå til en anden placering.

526
00:22:54,770 --> 00:22:57,400
>> Så hvis du nogensinde har fået
en e-mail, især

527
00:22:57,400 --> 00:22:59,610
en fra Paypal, eller
tilsyneladende fra Paypal

528
00:22:59,610 --> 00:23:01,830
beder dig om at logge ind
til din konto, dette

529
00:23:01,830 --> 00:23:06,380
Derfor bør du aldrig
nogensinde klikke links i e-mails,

530
00:23:06,380 --> 00:23:07,930
helt ærligt, nogen links i e-mails.

531
00:23:07,930 --> 00:23:10,380
Hvis du ved, du har den faktiske
penge i Paypal eller Bank

532
00:23:10,380 --> 00:23:14,250
of America eller Fidelity eller ethvert
websted, skal du skrive det i.

533
00:23:14,250 --> 00:23:17,530
Fordi se hvor nemt det er at
narre nogen til at præsentere, hvad

534
00:23:17,530 --> 00:23:18,526
ligner et link.

535
00:23:18,526 --> 00:23:20,400
Men det faktisk kunne
gå absolut overalt.

536
00:23:20,400 --> 00:23:23,301
>> Og der er langt større
trusler end dette.

537
00:23:23,301 --> 00:23:25,300
I virkeligheden er dette en smule
af en tangent nu, men en

538
00:23:25,300 --> 00:23:28,430
af de bedste jeg nogensinde har set
som siden er blevet lukket,

539
00:23:28,430 --> 00:23:34,060
er der nogen førte folk
at-- så dette kan sige,

540
00:23:34,060 --> 00:23:37,660
klik her for at logge ind på din
konto, en bankkonto.

541
00:23:37,660 --> 00:23:40,985
Og dette var Bank of the West.

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

543
00:23:43,030 --> 00:23:44,250
>> Så nogen har købt dette.

544
00:23:44,250 --> 00:23:47,090
Og det er lidt nemmere at se
det i en mono afstand font zoomet

545
00:23:47,090 --> 00:23:49,190
ind på en 30-fods projektor.

546
00:23:49,190 --> 00:23:51,720
Men når det er lille skrifttype i en
e-mail, du modtager,

547
00:23:51,720 --> 00:23:54,690
dette ligner bankofthewest.com,
ikke bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
som nogen havde betalt $ 10 at købe.

549
00:23:58,230 --> 00:24:00,840
Og så førte dem til
svarende til nogle dårlige hjemmeside.

550
00:24:00,840 --> 00:24:05,540
>> Og du vil se too-- faktisk vi kan gøre
denne-- hvis jeg går til selve hjemmesiden,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com igen,
tilbagekaldelse fra sidste gang

552
00:24:10,335 --> 00:24:13,210
at hvis dette er deres webside og
du er spændt på, hvordan det virker,

553
00:24:13,210 --> 00:24:15,610
du kan helt sikkert gå til
Chromes udviklingsværktøjer.

554
00:24:15,610 --> 00:24:18,890
Og du kan se alle de
HTML pænt formateret der.

555
00:24:18,890 --> 00:24:20,890
>> Men mere til det punkt,
du cam-- lad os lukke

556
00:24:20,890 --> 00:24:24,760
denne-- du kan gå til Vis
Udvikler Vis kilde.

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

558
00:24:25,770 --> 00:24:28,350
Hvorfor kan jeg ikke bare kopiere
alle, og så er jeg

559
00:24:28,350 --> 00:24:31,630
kan gå ind i min lille gedit vindue
her og gøre min egen webside.

560
00:24:31,630 --> 00:24:33,210
Gem dette i hello.html.

561
00:24:33,210 --> 00:24:36,770
Og sandsynligvis dette kommer til at gå i stykker,
fordi det ikke er så nemt som regel.

562
00:24:36,770 --> 00:24:41,590
Men nu, hvis jeg genindlæse min egen side på
min egen CS50 Appliance og ramte reload,

563
00:24:41,590 --> 00:24:42,990
OK, nogle ting brød.

564
00:24:42,990 --> 00:24:45,750
Men jeg er temmelig tæt på at have
min egen bank hjemmeside, right?

565
00:24:45,750 --> 00:24:46,570
Alt dette HTML--

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

567
00:24:47,370 --> 00:24:49,210
>> David J MALAN: --Jeg
ikke actually-- og du

568
00:24:49,210 --> 00:24:52,210
ved, at der er nogen derude, som
rent faktisk ville klikke på disse links også.

569
00:24:52,210 --> 00:24:54,864
Så klart, nogle ting brød.

570
00:24:54,864 --> 00:24:56,780
Men det kommer til at føre
os ind i en diskussion,

571
00:24:56,780 --> 00:25:00,810
unødigt lige nu om, hvad
CSS, cascading style sheets, er,

572
00:25:00,810 --> 00:25:03,410
og hvordan du rent faktisk
hente de andre HTML-filer

573
00:25:03,410 --> 00:25:06,140
og JPEG-filer GIF-filer, der
hjemmesiden kan bruge.

574
00:25:06,140 --> 00:25:07,960
Men alt dette er accomplishable.

575
00:25:07,960 --> 00:25:11,110
Men det virkelig kan koges ned til
disse meget simple heuristik.

576
00:25:11,110 --> 00:25:14,450
>> Så lad os nu bare skimme igennem en
par andre eksempler på HTML

577
00:25:14,450 --> 00:25:16,680
bare for at give dig en følelse
af hvad du ellers kan gøre.

578
00:25:16,680 --> 00:25:18,670
For eksempel, det er list.html.

579
00:25:18,670 --> 00:25:23,240
Antag jeg ønskede at lave en webside
med en liste over huse i quad.

580
00:25:23,240 --> 00:25:28,960
Jeg kan bruge den ul tag for uordnet
listen og derefter listeelement barn

581
00:25:28,960 --> 00:25:33,760
og derefter gentage over-- eller liste,
rather-- husene pågældende.

582
00:25:33,760 --> 00:25:36,080
>> Og hvis jeg åbner det op, lad os gøre det.

583
00:25:36,080 --> 00:25:40,670
Lad os gå ikke til hello.html,
men at list.html.

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

585
00:25:42,160 --> 00:25:43,000
Hvordan kan jeg løse dette?

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

587
00:25:45,679 --> 00:25:47,220
Det er det samme problem som før, right?

588
00:25:47,220 --> 00:25:52,510
Så lad mig gøre chmod-- oops--
chmod a + r af list.html.

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

590
00:25:54,610 --> 00:25:59,610
Og nu, hvis jeg gå tilbage til min browser
og klik på Reload, der er det.

591
00:25:59,610 --> 00:26:02,360
Så hvis du nogensinde har ønsket at gøre
en punktopstilling, kan du gøre det.

592
00:26:02,360 --> 00:26:06,210
Hvis du ønsker at være super fancy og gøre
en ordnet liste, ikke en uordnet liste,

593
00:26:06,210 --> 00:26:10,170
ændre dem til ol, genindlæse siden, og
nu browseren vil tælle det for dig.

594
00:26:10,170 --> 00:26:11,241
>> Hvad kan vi ellers gøre?

595
00:26:11,241 --> 00:26:13,990
Nå, et par others-- hvis
du har fået lange stykker af text--

596
00:26:13,990 --> 00:26:15,698
for eksempel, nogle
Latinsk tekst som denne--

597
00:26:15,698 --> 00:26:20,730
og du vil have det i separate stykker,
åben p tæt p for afsnit tag.

598
00:26:20,730 --> 00:26:22,010
Og gør det igen og igen.

599
00:26:22,010 --> 00:26:26,600
Og hvis jeg nu åbner denne fil,
paragraphs.html, ja, det

600
00:26:26,600 --> 00:26:27,570
bliver irriterende.

601
00:26:27,570 --> 00:26:34,320
Så lad os nu bare gå tilbage til mit
prompt, chmod a + r r stjerne .html--

602
00:26:34,320 --> 00:26:36,099
en dejlig lille wild card så at sige.

603
00:26:36,099 --> 00:26:37,890
Det bør rette alle
disse problemer for mig.

604
00:26:37,890 --> 00:26:38,990
Lad os genindlæse.

605
00:26:38,990 --> 00:26:40,500
Der er tre stykker.

606
00:26:40,500 --> 00:26:42,930
>> Og lad os nu gå videre
og åbne op en anden.

607
00:26:42,930 --> 00:26:44,310
Hvordan omkring bordet?

608
00:26:44,310 --> 00:26:46,440
Du vil opdage table udseende
lidt mere kompliceret.

609
00:26:46,440 --> 00:26:49,110
Men det er den samme idea--
åbent tag, åbent tag,

610
00:26:49,110 --> 00:26:51,360
åben, åben, åbne, lukke tag, åbent tag.

611
00:26:51,360 --> 00:26:54,410
Og disse ske at stå for
bord, hvis grænse er tilsyneladende

612
00:26:54,410 --> 00:26:58,500
vil være en tykkelse 1-- uanset
at means-- tabelrække, bord

613
00:26:58,500 --> 00:27:00,320
data, hvilket betyder en celle.

614
00:27:00,320 --> 00:27:03,840
Og hvis jeg går tilbage til min browser
her og gå til table.html,

615
00:27:03,840 --> 00:27:05,840
du kan se noget
som dette, hæslige.

616
00:27:05,840 --> 00:27:07,840
Men vi vil komme til det punkt
hvor vi kan faktisk

617
00:27:07,840 --> 00:27:09,260
gøre tingene pænere end det.

618
00:27:09,260 --> 00:27:10,530
>> Så lad mig fastsætte for nu.

619
00:27:10,530 --> 00:27:11,870
Der er klaser af flere tags.

620
00:27:11,870 --> 00:27:15,225
Og HTML er vidunderligt at afhente
fordi, helt ærligt, alt hvad du behøver at gøre

621
00:27:15,225 --> 00:27:17,600
er at se på de eksisterende websider
som du kender.

622
00:27:17,600 --> 00:27:20,340
Og du er ligesom, åh, det er hvordan
de gjorde dette æstetisk.

623
00:27:20,340 --> 00:27:23,159
>> Eller du kan slå op nogen online
ressource, hvordan HTML virker,

624
00:27:23,159 --> 00:27:25,700
og du vil se at der er en
hele ordforråd af andre mærker.

625
00:27:25,700 --> 00:27:30,110
Men med den simple mentale model
alene, at næsten enhver mærke du åbner

626
00:27:30,110 --> 00:27:33,620
har at være lukket, det virkelig
er tilstrækkelig til at lære sig selv

627
00:27:33,620 --> 00:27:36,950
HTML efter forstå
disse grundlæggende ideer tags

628
00:27:36,950 --> 00:27:40,520
attributter og den veludformning
at vi har talt om,

629
00:27:40,520 --> 00:27:44,697
lukke noget, som vi måske åbne
så vi må ikke forveksle en browser.

630
00:27:44,697 --> 00:27:46,780
Så lad os nu tage dette til
et mere interessant niveau

631
00:27:46,780 --> 00:27:48,100
ved at gå til den faktiske.

632
00:27:48,100 --> 00:27:51,095
Og lad os gå til min Mac
her til google.com.

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

634
00:27:52,280 --> 00:27:54,020
Og nu notice-- lad os gøre dette.

635
00:27:54,020 --> 00:27:57,280
Jeg gong at gå til
Indstillinger, Søg Indstillinger.

636
00:27:57,280 --> 00:28:01,070
Jeg vil slå denne irriterende øjeblik
resultater ting, hvor den straks

637
00:28:01,070 --> 00:28:02,450
begynder at reagere på din indtastning.

638
00:28:02,450 --> 00:28:05,300
Lad os gøre dette ældre skole, så
vi faktisk se, hvad der foregår.

639
00:28:05,300 --> 00:28:08,260
>> Så jeg har tænkt mig at gemme min
Indstillinger for Google her.

640
00:28:08,260 --> 00:28:11,160
Og nu notice-- Jeg har tænkt mig at
søge efter noget som katte.

641
00:28:11,160 --> 00:28:14,500
Og det er stadig gør auto
komplet her, men baseret på ting

642
00:28:14,500 --> 00:28:15,970
mennesker har skrevet tidligere.

643
00:28:15,970 --> 00:28:17,490
Men bemærk, hvad der kommer til at ske.

644
00:28:17,490 --> 00:28:20,272
>> I URL'en i øjeblikket
er dette, bare google.com.

645
00:28:20,272 --> 00:28:22,650
Og teknisk set er det skråstreg.

646
00:28:22,650 --> 00:28:25,910
Google er bare spare en karakter
og ikke viser os det.

647
00:28:25,910 --> 00:28:30,400
De viser os https, bare
at være super betryggende, at vi er

648
00:28:30,400 --> 00:28:32,850
på en sikker eller krypteret side.

649
00:28:32,850 --> 00:28:35,690
>> Så lad mig gå videre og søge efter katte.

650
00:28:35,690 --> 00:28:37,670
Nu fik virkelig
overvældende hurtigt.

651
00:28:37,670 --> 00:28:39,470
Kig på længden af ​​denne webadresse.

652
00:28:39,470 --> 00:28:43,070
Men det viser sig, at de fleste af disse ting
i webadressen er faktisk temmelig ubrugelig.

653
00:28:43,070 --> 00:28:45,320
Jeg har tænkt mig at begynde at slette
ting, jeg ikke forstår.

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

655
00:28:46,560 --> 00:28:47,360
Jeg ser katte.

656
00:28:47,360 --> 00:28:48,470
Jeg forstår katte.

657
00:28:48,470 --> 00:28:50,380
Jeg ved ikke, hvorfor katte er der igen.

658
00:28:50,380 --> 00:28:52,620
Jeg ved virkelig ikke,
hvad dette nonsens er.

659
00:28:52,620 --> 00:28:56,030
Så jeg bare kommer til at holde
fremhæve og slette ting

660
00:28:56,030 --> 00:28:59,905
at jeg ikke forstår,
destillere URL'en i netop dette.

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

662
00:29:00,920 --> 00:29:02,270
>> Lad mig nu komme indtaste igen.

663
00:29:02,270 --> 00:29:03,814
Det ligner Google stadig virker.

664
00:29:03,814 --> 00:29:06,980
Så en eller anden grund, er de tilføjer en
masse ting til deres URL'er som standard.

665
00:29:06,980 --> 00:29:09,000
Men det er ikke strengt nødvendigt.

666
00:29:09,000 --> 00:29:10,340
Så hvad er nice om dette?

667
00:29:10,340 --> 00:29:13,630
Nå, lad mig gå videre og
åbne Chromes Inspector.

668
00:29:13,630 --> 00:29:15,960
Der er en lille mus genvej til det.

669
00:29:15,960 --> 00:29:17,360
>> Gå til fanen Netværk.

670
00:29:17,360 --> 00:29:19,340
Og lad mig nu genindlæse
denne side en gang mere.

671
00:29:19,340 --> 00:29:20,280
Og jeg holder Shift.

672
00:29:20,280 --> 00:29:22,520
Som en sidebemærkning browsere
tendens til at cache eller gemme

673
00:29:22,520 --> 00:29:24,697
information kun for effektivitetens skyld.

674
00:29:24,697 --> 00:29:27,280
Men som regel, holde Shift og
ladning vil tvinge alt

675
00:29:27,280 --> 00:29:28,994
at starte forfra fra begyndelsen.

676
00:29:28,994 --> 00:29:30,410
Og det er hvad jeg ønsker at gøre her.

677
00:29:30,410 --> 00:29:33,550
>> Og mærke alle disse
rækker, der bare dukkede op.

678
00:29:33,550 --> 00:29:37,920
Det viser sig, at der i enhver given webside
side, kan der være blot en fil

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- eller der
kan være 52, som i dette tilfælde.

680
00:29:43,500 --> 00:29:45,820
Når jeg besøger google.com,
tilsyneladende, min browser

681
00:29:45,820 --> 00:29:49,650
starter 52 separate HTTP-anmodninger.

682
00:29:49,650 --> 00:29:50,520
Hvorfor er det?

683
00:29:50,520 --> 00:29:53,380
>> Tja, se på, hvad der er indeni
af denne webside op øverst.

684
00:29:53,380 --> 00:29:55,620
Der er ikke kun tekst,
men der er egentlige billeder

685
00:29:55,620 --> 00:29:57,130
af katte over til højre.

686
00:29:57,130 --> 00:29:59,110
Der er en farverig logo op her til venstre.

687
00:29:59,110 --> 00:30:01,750
Der er alle disse ikoner
for en mikrofon og så videre.

688
00:30:01,750 --> 00:30:05,130
Der er en masse stykker, bygge
blokke, scratch stykker, hvis du vil,

689
00:30:05,130 --> 00:30:06,250
til denne webside.

690
00:30:06,250 --> 00:30:10,310
Og hvad browseren gør upon
at få den første fil, som

691
00:30:10,310 --> 00:30:16,180
er denne række her, det er hovedsagelig
iteration over HTML top

692
00:30:16,180 --> 00:30:19,880
til bund, venstre til højre, på udkig efter
ting som billede tags eller andre tags

693
00:30:19,880 --> 00:30:23,160
der er at nævne andre filer og
når den ser dem, går og henter dem

694
00:30:23,160 --> 00:30:26,050
via HTTP, levedygtig helhed
kuvert metafor,

695
00:30:26,050 --> 00:30:29,670
og viser dem derefter i
passende sted på websiden.

696
00:30:29,670 --> 00:30:33,370
>> Men bemærk her, hvis jeg fokuserer på
de første kast, søgning katte,

697
00:30:33,370 --> 00:30:37,090
bemærke, at, ja det er ved hjælp af HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
Og desværre, Google
Chrome lige nu i version 39

699
00:30:41,690 --> 00:30:45,110
er slags fordummelse ting ned og
ikke viser os de faktiske overskrifter.

700
00:30:45,110 --> 00:30:49,680
Men hvad var faktisk sendt en anmodning
for ikke at skråstreg, men / search? q = katte.

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

702
00:30:52,830 --> 00:30:54,340
>> Nu, hvorfor er det vigtigt?

703
00:30:54,340 --> 00:30:57,110
Nå, jeg har tænkt mig at udlede
fra dette, at hvis du Google

704
00:30:57,110 --> 00:31:01,520
understøtter forespørgsler af denne formular, hvorfor
jeg ikke gennemføre min egen søgning

705
00:31:01,520 --> 00:31:06,420
motor til CS50, men blot forsiden
ende, blot den grafiske brugergrænseflade.

706
00:31:06,420 --> 00:31:09,610
Og vi vil outsource bagenden,
den faktiske søgeresultater til Google.

707
00:31:09,610 --> 00:31:10,510
>> Så hvordan kan jeg gøre dette?

708
00:31:10,510 --> 00:31:13,820
Nå, lad mig gå ind i gedit herovre.

709
00:31:13,820 --> 00:31:19,180
Og lad mig gå videre og åbne
op, lad os sige, en ny fil.

710
00:31:19,180 --> 00:31:22,280
Og jeg har tænkt mig at gemme denne
midlertidigt som search-0.html.

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

712
00:31:25,111 --> 00:31:27,860
Og så til sidst, vil vi hurtigt
frem til den, jeg allerede forberedt.

713
00:31:27,860 --> 00:31:30,190
>> Og jeg har tænkt mig at
hurtigt piske doc typen

714
00:31:30,190 --> 00:31:33,840
html åbneparentes html
close beslag html.

715
00:31:33,840 --> 00:31:38,390
Så jeg har tænkt mig at gøre hoved
luk hoved åben titel CS50

716
00:31:38,390 --> 00:31:40,150
Søg i stedet for Google-søgning.

717
00:31:40,150 --> 00:31:43,480
Hernede Jeg har tænkt mig at have
kroppen, hernede tæt krop.

718
00:31:43,480 --> 00:31:45,835
Og nu har jeg brug CS50 Search.

719
00:31:45,835 --> 00:31:47,710
Og faktisk, lad os
bygge denne trinvist.

720
00:31:47,710 --> 00:31:51,043
Jeg har tænkt mig at gå videre og lukke denne og
faktisk sætte det i min offentlige bibliotek.

721
00:31:51,043 --> 00:31:52,730
Så giv mig bare et øjeblik.

722
00:31:52,730 --> 00:31:55,390
search-0.html-- Jeg har tænkt mig at
tidsmæssigt kalder det search.html.

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

724
00:31:56,600 --> 00:31:59,750
Jeg har tænkt mig at chmod det en + r search.html.

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

726
00:32:01,072 --> 00:32:02,280
Og nu jeg har tænkt mig at åbne den.

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

728
00:32:03,224 --> 00:32:04,390
Okay, så det var hurtigt.

729
00:32:04,390 --> 00:32:06,800
Men målet var simpelthen
at få os til det punkt,

730
00:32:06,800 --> 00:32:09,630
for at have denne tekst
fil kaldet search.html.

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

732
00:32:10,940 --> 00:32:12,790
Så ikke meget at se på endnu.

733
00:32:12,790 --> 00:32:16,970
Ja, hvis jeg går til min browser, og
gå til search.html, det er alt det er.

734
00:32:16,970 --> 00:32:17,720
Men ved du hvad?

735
00:32:17,720 --> 00:32:19,000
Jeg kan være en smule mere avanceret.

736
00:32:19,000 --> 00:32:22,710
Jeg læste i en bog, at der er
en overskrift tag kaldet H1.

737
00:32:22,710 --> 00:32:26,100
Og jeg har tænkt mig at gå videre og
bruge den åbne h1 og tæt h1.

738
00:32:26,100 --> 00:32:27,220
Genindlæse siden.

739
00:32:27,220 --> 00:32:29,600
Og nu er det større og modigere,
ikke så interessant,

740
00:32:29,600 --> 00:32:32,399
men i det mindste strukturelt
mere interessant.

741
00:32:32,399 --> 00:32:33,940
Men lad mig nu introducere et andet mærke.

742
00:32:33,940 --> 00:32:36,500
Det viser sig, at der er en form tag.

743
00:32:36,500 --> 00:32:38,400
Og lad mig lukke denne tag.

744
00:32:38,400 --> 00:32:40,830
Og det viser sig at der er
et input tag,

745
00:32:40,830 --> 00:32:44,600
har en attribut kaldet type, hvilket
er datatypen for feltet,

746
00:32:44,600 --> 00:32:45,200
hvis du vil.

747
00:32:45,200 --> 00:32:47,050
Og kommer til at være af typen tekst.

748
00:32:47,050 --> 00:32:52,200
Og dens værdi går
at være CS50 søgning.

749
00:32:52,200 --> 00:32:53,850
Tæt tag.

750
00:32:53,850 --> 00:32:57,100
Og der kommer til at være nogen begrebet
åbning og lukning med separate tags.

751
00:32:57,100 --> 00:33:00,300
>> Lad mig gå tilbage herovre og
se, hvad der foregår, genindlæse.

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

753
00:33:01,380 --> 00:33:02,950
Det ligner det er et tekstfelt.

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

755
00:33:04,080 --> 00:33:06,999
Og faktisk havde jeg ikke lyst
at sætte en værdi der endnu.

756
00:33:06,999 --> 00:33:10,040
Lad mig gå tilbage her og faktisk få
slippe af med denne værdi at holde det simpelt.

757
00:33:10,040 --> 00:33:12,939
I stedet for en værdi, hvad jeg ønskede
at give denne ting var et navn.

758
00:33:12,939 --> 00:33:15,230
Og jeg ved ikke, hvad det er,
så jeg vil vende tilbage til.

759
00:33:15,230 --> 00:33:18,270
>> Men under det, jeg vil
til at gøre input type = indsende.

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

761
00:33:19,840 --> 00:33:22,120
Og denne værdi vil være CS50 Search.

762
00:33:22,120 --> 00:33:24,850
Og vi vil se, hvorfor jeg
flyttes værdien til dette.

763
00:33:24,850 --> 00:33:28,900
Når jeg genindlæse, jeg synes at nu har
begyndelsen af ​​min egen søgning

764
00:33:28,900 --> 00:33:30,820
motor, super hæslig,
men helt ærligt, det er

765
00:33:30,820 --> 00:33:34,260
ikke et langt indkast fra hvad
Googles standard side ser ud.

766
00:33:34,260 --> 00:33:37,950
>> Hvis jeg går her nu, kan jeg skrive i
katte og forhåbentlig klik på Søg.

767
00:33:37,950 --> 00:33:40,380
Men jeg er ikke helt færdig endnu,
fordi jeg ikke har gennemført,

768
00:33:40,380 --> 00:33:41,045
naturligvis en database.

769
00:33:41,045 --> 00:33:42,940
Jeg har ikke gennemgået den
nettet for søgeresultaterne.

770
00:33:42,940 --> 00:33:44,840
Så jeg er nødt til at outsource det til Google.

771
00:33:44,840 --> 00:33:46,290
Så hvordan gør jeg det?

772
00:33:46,290 --> 00:33:49,170
>> Nå, først og fremmest vil jeg
nødt til at tilføje og handling

773
00:33:49,170 --> 00:33:58,460
tilskriver min formular tag,
er http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
Og jeg ved, at kun ved at have
udledes ved at kigge nøje

775
00:34:01,180 --> 00:34:02,505
på deres URL'er.

776
00:34:02,505 --> 00:34:03,380
Og nu tage et gæt.

777
00:34:03,380 --> 00:34:09,090
Hvad skal dette tekstfelt sandsynligvis
kaldes, baseret på, hvor vi kom

778
00:34:09,090 --> 00:34:09,754
fra før?

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

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

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

782
00:34:14,370 --> 00:34:17,800
Og vi behøver faktisk ikke spørgsmål
markere det viser sig, men q er faktisk det,

783
00:34:17,800 --> 00:34:20,489
q for forespørgsel sandsynligvis ved
standard bare fordi det er

784
00:34:20,489 --> 00:34:23,060
hvad Larry og Sergey
kom op med år siden.

785
00:34:23,060 --> 00:34:24,739
Så lad mig nu genindlæse denne side.

786
00:34:24,739 --> 00:34:26,409
Det ser ikke så forskellig.

787
00:34:26,409 --> 00:34:28,120
Men nu se hvad der sker.

788
00:34:28,120 --> 00:34:32,360
>> Hvis jeg skriver i katte og klik
CS50 Søg og lad gå,

789
00:34:32,360 --> 00:34:35,770
Bemærk, at jeg bliver pisket
væk faktiske Google.

790
00:34:35,770 --> 00:34:38,150
Nu Google er ved at blive en smule
irriterende, at de er

791
00:34:38,150 --> 00:34:41,877
tilføje en ekstra parameter,
hvis du vil, til URL'en.

792
00:34:41,877 --> 00:34:43,960
Det er alt happening
automatisk på Google side.

793
00:34:43,960 --> 00:34:48,730
>> Den vigtige del er, at jeg synes
at have genereret denne anmodning her.

794
00:34:48,730 --> 00:34:50,179
Og ja, det er hvad der sker.

795
00:34:50,179 --> 00:34:53,040
Når du har HTML,
ser sådan ud, dette

796
00:34:53,040 --> 00:34:57,620
er en slags web-udviklere notation
for at sige, gå videre og oprette en formular

797
00:34:57,620 --> 00:34:59,990
at når det er fremlagt,
det kommer til at gå til denne URL.

798
00:34:59,990 --> 00:35:03,430
Og når webadressen har givet
værdier for ting som q,

799
00:35:03,430 --> 00:35:05,440
går ikke bare til denne webadresse.

800
00:35:05,440 --> 00:35:08,210
Faktisk, gå til spørgsmål
mærket og derefter q = katte.

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

802
00:35:09,590 --> 00:35:13,060
Vedhæft parameteren, den
HTTP parameter som.

803
00:35:13,060 --> 00:35:15,590
>> Og bare for at være super præcis,
hvad der bliver udledt her--

804
00:35:15,590 --> 00:35:18,130
men jeg vil være mere explicit-- er
at den metode, jeg vil bruge

805
00:35:18,130 --> 00:35:22,270
er få, i stedet for noget lignende
indlæg, som vi til sidst vil se.

806
00:35:22,270 --> 00:35:27,710
Så kort sagt, blot ved at forstå
HTML og bruge nogle temmelig simple tags,

807
00:35:27,710 --> 00:35:30,610
kan vi nu begynde at skabe
vores egen foran slutbrugeren

808
00:35:30,610 --> 00:35:32,850
grænseflade med en søgning
motor bag det.

809
00:35:32,850 --> 00:35:34,800
>> Men dette er naturligvis temmelig hæslige.

810
00:35:34,800 --> 00:35:37,259
Så lad mig faktisk åbne op
en lidt bedre version.

811
00:35:37,259 --> 00:35:39,800
Dette er den ene jeg forberedt på
forhånd, at har nogle kommentarer.

812
00:35:39,800 --> 00:35:41,900
Men du vil se, at jeg
temmelig meget genskabt det.

813
00:35:41,900 --> 00:35:44,150
Så dette er allerede tilgængelige online.

814
00:35:44,150 --> 00:35:48,050
Og jeg tilfældigvis præventivt
gå til https bare for at holde det simpelt.

815
00:35:48,050 --> 00:35:50,610
>> Og lad os nu åbne op for en
næste iteration af dette.

816
00:35:50,610 --> 00:35:52,510
Er version 1 i stedet for 0.

817
00:35:52,510 --> 00:35:55,315
Hvad springer ud på dig så lidt
anderledes i dette eksempel?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> PUBLIKUM: [uhørligt].

820
00:36:00,440 --> 00:36:03,020
>> Ja, der er denne tekst align center.

821
00:36:03,020 --> 00:36:04,590
Dette er lidt underligt heroppe.

822
00:36:04,590 --> 00:36:06,150
Men dette er faktisk nye.

823
00:36:06,150 --> 00:36:07,800
Og måske gætte, hvad der vil ske.

824
00:36:07,800 --> 00:36:11,730
Hvis jeg går til min browser nu
og besøge search-1.html,

825
00:36:11,730 --> 00:36:13,090
det er næsten det samme.

826
00:36:13,090 --> 00:36:15,705
Men det er et skridt tættere på
at være lidt mere smuk.

827
00:36:15,705 --> 00:36:19,150
Det er stadig grim, men pænere i det
mindst Alt er nu centreret.

828
00:36:19,150 --> 00:36:23,470
>> Så det viser sig, at det, jeg bruger
er et andet sprog helt kaldet

829
00:36:23,470 --> 00:36:25,680
CSS, cascading style sheets.

830
00:36:25,680 --> 00:36:28,310
Og CSS helt ærligt, er venlig
af, i min personlige mening,

831
00:36:28,310 --> 00:36:29,775
et afskyeligt designet sprog.

832
00:36:29,775 --> 00:36:33,110
Det er meget irriterende at huske
alle de forskellige detaljer.

833
00:36:33,110 --> 00:36:38,479
Men det er hvad stylizes den
Hele worldwide web i dag.

834
00:36:38,479 --> 00:36:39,270
Jeg fornærmet nogen.

835
00:36:39,270 --> 00:36:39,769
Ok.

836
00:36:39,769 --> 00:36:43,180
Så lad os gå tilbage her og se
hvordan vi faktisk bruger dette.

837
00:36:43,180 --> 00:36:45,940
Og det viser sig, i det mindste det er
faktisk en temmelig simpelt sprog.

838
00:36:45,940 --> 00:36:49,470
Det er bare Nøgleværdiparrene, ejendomme
og værdier, egenskaber og værdier.

839
00:36:49,470 --> 00:36:52,080
Faktisk er her en
sådan ejendom og værdi.

840
00:36:52,080 --> 00:36:55,890
>> Blot ved hjælp af stil
tilskriver på min krop tag

841
00:36:55,890 --> 00:37:00,360
og give det en værdi af en
ord kolon og et andet ord,

842
00:37:00,360 --> 00:37:03,730
eller en ejendom, og en værdi,
Jeg kan påvirke æstetik

843
00:37:03,730 --> 00:37:06,210
af websiden, ikke
nødvendigvis struktur endnu,

844
00:37:06,210 --> 00:37:07,550
men æstetik det.

845
00:37:07,550 --> 00:37:10,960
Og blot ved at google rundt, jeg er klar
at CSS, cascading style sheets,

846
00:37:10,960 --> 00:37:14,170
understøtter en egenskab, der kaldes
tekst-align, hvis værdi kan

847
00:37:14,170 --> 00:37:16,980
være til venstre, højre eller centrum, for eksempel.

848
00:37:16,980 --> 00:37:19,990
>> Så nu når jeg genindlæse
denne side, hvad jeg fik

849
00:37:19,990 --> 00:37:22,730
var en centreret side,
men stadig temmelig grim.

850
00:37:22,730 --> 00:37:25,770
Lad os gå videre og åbne
up version 2 af Search.

851
00:37:25,770 --> 00:37:28,570
Og nu opdager jeg har gjort lidt mere.

852
00:37:28,570 --> 00:37:33,760
Bemærk at op her inde i hovedet
tag, kan der være mere end titel.

853
00:37:33,760 --> 00:37:35,400
I virkeligheden er der en stil tag.

854
00:37:35,400 --> 00:37:38,630
Og det er her, det bliver bare en
lidt rodet at se CSS tider.

855
00:37:38,630 --> 00:37:41,971
>> Bemærk, at jeg synes at have noget
at strukturelt ser meget anderledes.

856
00:37:41,971 --> 00:37:44,095
Men her er navnet på
tag Jeg ønsker at stiliseret.

857
00:37:44,095 --> 00:37:47,570
Her er vores gamle venner krøllet
seler og lukkede krøllet parentes.

858
00:37:47,570 --> 00:37:50,290
Og så her er, at
ejendommen og dens værdi.

859
00:37:50,290 --> 00:37:56,300
>> Hvis jeg indlæse denne fil, search2.html,
slutresultatet er identiske.

860
00:37:56,300 --> 00:37:59,300
Men det er et skridt i retning bedre design.

861
00:37:59,300 --> 00:38:04,560
Ved factoring denne CSS, jeg har
ikke blandet det med min HTML.

862
00:38:04,560 --> 00:38:07,560
Og ja, som vi skal se, jeg kunne
genbruge disse egenskaber og værdier.

863
00:38:07,560 --> 00:38:10,420
Hvis jeg ønskede at gøre klaser af
dele af min webside centreret,

864
00:38:10,420 --> 00:38:13,630
Jeg behøver ikke at skrive style = text-align
center over det hele.

865
00:38:13,630 --> 00:38:16,580
Jeg kan sætte på ét sted
måske gerne op på toppen.

866
00:38:16,580 --> 00:38:18,210
>> Men selv dette ikke er den bedste design.

867
00:38:18,210 --> 00:38:21,720
Faktisk er en af ​​de ting, du vil lære
som du bruger mere og mere tid med

868
00:38:21,720 --> 00:38:25,730
webprogrammering er, at jo mere du kan
modularize ting og faktor ting ud

869
00:38:25,730 --> 00:38:30,610
ligesom .h filer lad os faktor ting ud,
gerne helpers.c lad os faktor ting ud

870
00:38:30,610 --> 00:38:31,880
et par psets siden.

871
00:38:31,880 --> 00:38:34,200
På samme måde kan vi
ønsker at opnå dette.

872
00:38:34,200 --> 00:38:37,920
>> Så mærke i version
tre af search.html jeg har

873
00:38:37,920 --> 00:38:40,610
ryddet op lederen af
siden og bare sætte

874
00:38:40,610 --> 00:38:43,320
i dette, et link tag, som
i modsætning til det navn,

875
00:38:43,320 --> 00:38:44,700
ikke give dig et hyperlink.

876
00:38:44,700 --> 00:38:49,150
Det forbinder til en anden fil ved hjælp af
en href, hvis værdi i denne sag,

877
00:38:49,150 --> 00:38:51,586
er search-3.css

878
00:38:51,586 --> 00:38:52,960
Så jeg er klar, vi vil hurtigt.

879
00:38:52,960 --> 00:38:54,600
Men alt jeg gør er en slags
for at flytte tingene.

880
00:38:54,600 --> 00:38:55,760
Lad mig åbne search-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Der er det, intet virkelig til det.

883
00:38:58,530 --> 00:39:02,270
Jeg har lige kopieret og indsat det i en ny
fil, ligesom vi indregnet ting ud

884
00:39:02,270 --> 00:39:03,509
i andre filer før.

885
00:39:03,509 --> 00:39:05,300
Og result--
helt underwhelming--

886
00:39:05,300 --> 00:39:06,730
vil være nøjagtig den samme.

887
00:39:06,730 --> 00:39:10,490
Men vi bevæger toward-- nej, det er ikke.

888
00:39:10,490 --> 00:39:11,930
Åh, jeg ved hvorfor.

889
00:39:11,930 --> 00:39:13,790
>> Så det ser ud til at være en fejl.

890
00:39:13,790 --> 00:39:15,010
Og det er i en vis forstand.

891
00:39:15,010 --> 00:39:17,730
Men lad mig åbne min fanen Netværk.

892
00:39:17,730 --> 00:39:19,660
Lad mig genindlæse siden.

893
00:39:19,660 --> 00:39:23,315
Ah, hvorfor CSS ikke anvendes?

894
00:39:23,315 --> 00:39:26,920
Nå, den CSS-fil, på samme måde, har
at være verdens læsbar, så at sige.

895
00:39:26,920 --> 00:39:28,440
Og det er for øjeblikket forbudt.

896
00:39:28,440 --> 00:39:33,760
Så lad mig gøre en chmod a + r
af stjerne dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
vi er dot CSS er bare
filtypenavn for CSS-filer.

898
00:39:37,067 --> 00:39:38,900
Lad mig nu vende tilbage til
min browser og reload.

899
00:39:38,900 --> 00:39:40,910
OK, lidt bedre.

900
00:39:40,910 --> 00:39:42,282
>> Nu Lad mig gøre en sidste ting.

901
00:39:42,282 --> 00:39:42,990
På jagt-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Jeg har en version, som jeg troede bare
var måde køligere, omend måde mere

904
00:39:48,220 --> 00:39:48,980
kompliceret.

905
00:39:48,980 --> 00:39:50,690
Lad os se på resultatet først.

906
00:39:50,690 --> 00:39:52,290
Luk dette at give os mere plads.

907
00:39:52,290 --> 00:39:54,275
Skift denne søge-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> Og nu er en masse ting er brudt.

910
00:39:57,200 --> 00:39:59,910
Jeg har tænkt mig at gå tilbage
ind i min mappe her.

911
00:39:59,910 --> 00:40:04,190
Og nu vil jeg bare vil gøre
en chmod a + r på en file--

912
00:40:04,190 --> 00:40:07,450
fordi jeg ved, det exists-- kaldet
logo.gif, som er et billede.

913
00:40:07,450 --> 00:40:08,590
Og nu genindlæse.

914
00:40:08,590 --> 00:40:11,040
Og wow-- så nu er jeg
temmelig tæt, helt ærligt,

915
00:40:11,040 --> 00:40:15,860
at lide 1999-udgaven af ​​Google, og
helt ærligt, i 2014-versionen af ​​Google,

916
00:40:15,860 --> 00:40:16,360
højre?

917
00:40:16,360 --> 00:40:21,920
>> Så det er nu gå til deres hjemmeside,
i sidste ende, hvis jeg søger efter katte.

918
00:40:21,920 --> 00:40:23,900
Og det er faktisk.

919
00:40:23,900 --> 00:40:26,410
Men hvad gjorde jeg gøre anderledes
i denne version 4?

920
00:40:26,410 --> 00:40:28,020
Så vi vil ikke dvæle for meget på det her.

921
00:40:28,020 --> 00:40:30,100
Du vil se dette i problem
sat syv vinder.

922
00:40:30,100 --> 00:40:31,350
Men bemærk jeg gjorde et par ting.

923
00:40:31,350 --> 00:40:33,690
>> Jeg introducerede en div
tag, som er division,

924
00:40:33,690 --> 00:40:35,450
samme ånd til et stykke tag.

925
00:40:35,450 --> 00:40:38,220
Men en division er ligesom, her er
et rektangulært usynligt region

926
00:40:38,220 --> 00:40:39,150
på skærmen.

927
00:40:39,150 --> 00:40:41,680
Lad os give det en unik
identifikator, en sidefod, bare

928
00:40:41,680 --> 00:40:44,700
således at vi kan tale om
det i vores HTML andetsteds.

929
00:40:44,700 --> 00:40:47,952
Her er en anden div af siden
hvis ID vil være indhold.

930
00:40:47,952 --> 00:40:49,160
Det er indholdet af siden.

931
00:40:49,160 --> 00:40:51,090
Og heroppe er overskriften på siden.

932
00:40:51,090 --> 00:40:54,960
>> Med andre ord, har jeg
hovedsagelig i HTML am mentalt

933
00:40:54,960 --> 00:40:57,700
visning af denne webside som
tre komponenter, en header

934
00:40:57,700 --> 00:41:01,200
heroppe med denne usynlige rektangel,
indholdet i midten, og derefter

935
00:41:01,200 --> 00:41:04,800
sidefoden dernede, selv
selvom vi ikke ser disse ting.

936
00:41:04,800 --> 00:41:09,940
Fordi jeg ønsker at i mit hoved
side her eller i en .css fil,

937
00:41:09,940 --> 00:41:11,460
Jeg kan bruge denne syntaks.

938
00:41:11,460 --> 00:41:13,070
>> Header er ikke et tag.

939
00:41:13,070 --> 00:41:17,060
Det er et id, så det viser
ud at ved at gøre #header,

940
00:41:17,060 --> 00:41:20,840
Jeg kan nu anvende en eller flere
egenskaber til hovedstød.

941
00:41:20,840 --> 00:41:24,130
Jeg kan gøre det samme indhold,
den samme for indhold her.

942
00:41:24,130 --> 00:41:27,230
>> Så for eksempel, i sidefoden, varsel
alle disse egenskaber, jeg tilføjer.

943
00:41:27,230 --> 00:41:30,660
Og jeg ved, at de eksisterer blot ved læsning
op på dokumentationen for CSS.

944
00:41:30,660 --> 00:41:33,450
Skriftstørrelse bliver smaller--
så nogle relative skriftstørrelse.

945
00:41:33,450 --> 00:41:34,741
Vægten vil være fed.

946
00:41:34,741 --> 00:41:37,340
Margin-- hvor mange pixel
omkring it-- er 20 pixel.

947
00:41:37,340 --> 00:41:38,590
Og det kommer til at være centreret.

948
00:41:38,590 --> 00:41:40,256
>> Men lige nu, siden ser sådan ud.

949
00:41:40,256 --> 00:41:42,840
Hvis jeg ikke er tilfreds med
mit eksemplar lige der,

950
00:41:42,840 --> 00:41:46,560
Jeg kunne gøre noget ligesom farven rød.

951
00:41:46,560 --> 00:41:50,570
Og så jeg kan gemme denne, genindlæser
og nu har jeg stiliseret sidefoden.

952
00:41:50,570 --> 00:41:54,130
Så dette er blot antyder magt
af hvad du kan gøre i en webside

953
00:41:54,130 --> 00:41:55,510
til at ændre på tingene.

954
00:41:55,510 --> 00:41:59,080
>> Og endnu sejere end dette, hvis du ønsker
at stikke rundt med de faktiske hjemmesider,

955
00:41:59,080 --> 00:42:00,810
du kan ikke permanent ændre dem.

956
00:42:00,810 --> 00:42:03,640
Men hvis jeg åbner op
Chromes Inspector igen

957
00:42:03,640 --> 00:42:07,610
og jeg går ikke til den venstre side
her, hvilket viser Facebooks HTML,

958
00:42:07,610 --> 00:42:11,380
men viser til højre
side alle sine CSS,

959
00:42:11,380 --> 00:42:13,789
kan du enten og
ændre tingene på flue.

960
00:42:13,789 --> 00:42:15,080
Så lad mig gå videre og gøre dette.

961
00:42:15,080 --> 00:42:18,670
>> Lad mig gå videre og kontrol
klik på denne tilfældige ord her,

962
00:42:18,670 --> 00:42:21,230
underskrive, og klik på Undersøg Element.

963
00:42:21,230 --> 00:42:25,130
Chrome meget bekvemt springer til
H1 tag, som Facebook bruger.

964
00:42:25,130 --> 00:42:27,290
Og bemærk her Facebook
har slags dovent

965
00:42:27,290 --> 00:42:29,960
hårdt kodet skriftstørrelse som en egenskab her.

966
00:42:29,960 --> 00:42:33,530
>> Så cool ting er dog
at hvis jeg faktisk gå ind her

967
00:42:33,530 --> 00:42:39,560
og sige, åh, Facebook, jeg kan ikke lide det
64 pixels, kan vi nu ændre Facebook.

968
00:42:39,560 --> 00:42:42,590
Selvfølgelig er vi kun ændre det
for mig personligt i øjeblikket.

969
00:42:42,590 --> 00:42:45,150
Men dette er blot en anden
værktøj i vores værktøjskasse

970
00:42:45,150 --> 00:42:48,360
der kommer til at give os mulighed for at nappe
og finde ud af, og også diagnosticere

971
00:42:48,360 --> 00:42:49,729
spørgsmål i vores egne websider.

972
00:42:49,729 --> 00:42:52,270
Og vi kunne ligeledes gå over
her, hvilket er det samme.

973
00:42:52,270 --> 00:42:55,830
Hvis du virkelig ønsker at få fancy, jeg
betyde, nu kan du virkelig mutere siden

974
00:42:55,830 --> 00:42:57,380
og gøre skøre ting.

975
00:42:57,380 --> 00:42:59,870
>> Så hvorfor er alt dette nyttigt?

976
00:42:59,870 --> 00:43:02,330
Nå, i sidste ende, men vi er
lyst til at være

977
00:43:02,330 --> 00:43:07,110
stand til at skabe websider,
drives af vores egne bagenden,

978
00:43:07,110 --> 00:43:10,520
ikke ved bare Google og
outsourcing bagenden der.

979
00:43:10,520 --> 00:43:13,510
Vi har faktisk ønsker
værdi, for eksempel,

980
00:43:13,510 --> 00:43:18,830
af vores søgemaskine handling
tillægge gå ikke til en anden,

981
00:43:18,830 --> 00:43:24,270
men til noget som search.php,
hvor search.php er på vores egen server,

982
00:43:24,270 --> 00:43:25,670
ikke på en andens.

983
00:43:25,670 --> 00:43:30,316
>> Og så for at komme dertil, vi faktisk
behov for at indføre et nyt sprog.

984
00:43:30,316 --> 00:43:33,190
Så vi har allerede set på en ny
sprog her, eller to virkelig, HTML

985
00:43:33,190 --> 00:43:33,700
og CSS.

986
00:43:33,700 --> 00:43:36,330
Men de virkelig er bare
strukturelle og æstetiske sprog.

987
00:43:36,330 --> 00:43:38,360
De er ikke programmering
sprog per se.

988
00:43:38,360 --> 00:43:41,160
Og det er omtrent lige så meget formelle
tid, som vi vil bruge på dem.

989
00:43:41,160 --> 00:43:44,910
Fordi vi vil begynde nu
at overgangen til PHP.

990
00:43:44,910 --> 00:43:48,160
>> Så PHP er et virkeligt
programmeringssprog.

991
00:43:48,160 --> 00:43:50,750
Det er et scriptsprog
i den forstand, at det er

992
00:43:50,750 --> 00:43:52,855
menes at være lettere vægt
end noget lignende C.

993
00:43:52,855 --> 00:43:56,082
Og det er et fortolket sprog,
hvilket betyder, at det ikke er kompileret.

994
00:43:56,082 --> 00:43:58,790
Så i en nøddeskal, hvad betød det
når vi brugte et sprog som C

995
00:43:58,790 --> 00:44:00,290
og vi var nødt til at kompilere det?

996
00:44:00,290 --> 00:44:02,120
Hvad betyder det at
kompilere C kildekoden?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
PUBLIKUM: [uhørligt].

999
00:44:04,780 --> 00:44:06,184
David J MALAN: Sig det igen?

1000
00:44:06,184 --> 00:44:07,100
PUBLIKUM: [uhørligt].

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
Det forvandler det til binær.

1004
00:44:10,180 --> 00:44:14,200
Det forvandler det til nuller og ettaller
fra faktiske engelsk-lignende kildekode.

1005
00:44:14,200 --> 00:44:16,424
Og så kan vi faktisk
køre disse nuller og ettaller

1006
00:44:16,424 --> 00:44:18,840
ved at passere dem gennem
CPU ved at dobbeltklikke på et ikon

1007
00:44:18,840 --> 00:44:19,980
eller kører en kommando.

1008
00:44:19,980 --> 00:44:23,770
>> PHP og Python og Ruby
og Perl og JavaScript

1009
00:44:23,770 --> 00:44:26,250
og klaser af andre
sprog fortolkes

1010
00:44:26,250 --> 00:44:29,290
sprog, hvilket vil sige
du ikke samle dem.

1011
00:44:29,290 --> 00:44:34,220
Snarere, du fodrer dem som input til
et program kaldet en tolk.

1012
00:44:34,220 --> 00:44:36,640
Og det tolk,
som en anden skrev,

1013
00:44:36,640 --> 00:44:40,930
læser din kildekode top til bund,
venstre mod højre og blot fortolker

1014
00:44:40,930 --> 00:44:43,000
disse linjer og gør hvad du siger.

1015
00:44:43,000 --> 00:44:45,360
>> Så hvis du støder på en
linje, der siger print,

1016
00:44:45,360 --> 00:44:48,660
det ikke nødvendigvis konverteres print
til de tilsvarende nuller og ettaller.

1017
00:44:48,660 --> 00:44:51,910
Det bare har denne tolk ligesom
et stort hvis tilstand, der siger,

1018
00:44:51,910 --> 00:44:56,110
hvis programmør instruktion er
print, skal du gøre følgende.

1019
00:44:56,110 --> 00:44:58,170
Så det fortolker det bare
ved slags ræsonnement

1020
00:44:58,170 --> 00:44:59,800
gennem hvad du fortæller det at gøre.

1021
00:44:59,800 --> 00:45:01,320
>> Og PHP er et af disse sprog.

1022
00:45:01,320 --> 00:45:05,310
Og PHP år siden var designet
netop til web programmering.

1023
00:45:05,310 --> 00:45:08,160
Og det var oprindeligt en
meget sjusket rodet sprog.

1024
00:45:08,160 --> 00:45:10,940
Og ja, der er en enorm
mængde af dårlig PHP kode derude.

1025
00:45:10,940 --> 00:45:13,520
Men selve sproget
har modnet i årenes løb,

1026
00:45:13,520 --> 00:45:16,200
så meget, at nu er det
faktisk en fantastisk næste trin

1027
00:45:16,200 --> 00:45:19,970
pædagogisk fra C, fordi det er
så stoppede kender til alt

1028
00:45:19,970 --> 00:45:22,380
du lige har set i de seneste par uger.

1029
00:45:22,380 --> 00:45:25,724
>> Den ene oprindelige forskel, vi vil se
er der ingen hovedfunktion længere.

1030
00:45:25,724 --> 00:45:28,890
Når du begynder at skrive kode, det er bare
kommer til at få gennemført uanset hvad,

1031
00:45:28,890 --> 00:45:30,220
som vi skal se om et øjeblik.

1032
00:45:30,220 --> 00:45:33,320
I mellemtiden, her er hvad en
variabel ligner i PHP.

1033
00:45:33,320 --> 00:45:35,840
Det er lidt anderledes,
men kun knap.

1034
00:45:35,840 --> 00:45:39,380
>> I PHP er der ikke stærk skrive.

1035
00:45:39,380 --> 00:45:41,430
Der er uge skrive,
som netop betyder, at der

1036
00:45:41,430 --> 00:45:44,030
er datatyper som strygere
og numre og andre ting.

1037
00:45:44,030 --> 00:45:47,030
Men du ikke gider at angive
hvad de er længere.

1038
00:45:47,030 --> 00:45:48,980
PHP tal det ud for dig.

1039
00:45:48,980 --> 00:45:52,030
Den dollartegn er bare en beslutning
at PHP folk gjort år

1040
00:45:52,030 --> 00:45:54,890
siden sådan, at enhver variabel i PHP
bare starter med et dollartegn.

1041
00:45:54,890 --> 00:45:58,130
Det er faktisk slags nyttige i at
det springer ud på dig lidt mere.

1042
00:45:58,130 --> 00:46:01,315
>> Men efter, at denne
er en tilstand, PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Hvad er anderledes i forhold til C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Trick question-- ingenting,
som er faktisk virkelig rart.

1047
00:46:09,600 --> 00:46:12,140
Boolske udtryk i PHP-- samme.

1048
00:46:12,140 --> 00:46:19,354
Boolske udtryk med og versus
eller, switches, sløjfer, sløjfer, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
dette er forskellige.

1050
00:46:20,270 --> 00:46:22,660
>> Så det viser sig der er en
par andre funktioner i PHP.

1051
00:46:22,660 --> 00:46:25,243
En af dem er faktisk denne,
som er vidunderligt praktisk.

1052
00:46:25,243 --> 00:46:29,250
Hvis $ tal er en matrix, at du har
erklæret tidligere i et program,

1053
00:46:29,250 --> 00:46:33,350
du har denne fancy for hver konstruktion
at i stedet for at gøre alt dette

1054
00:46:33,350 --> 00:46:37,020
irriterende jeg er lig 0, jeg er
mindre end dette, [? Jeg ++?]

1055
00:46:37,020 --> 00:46:40,320
for hver numre som antal, hvor hver
af disse dollartegn værdier er lige

1056
00:46:40,320 --> 00:46:42,790
en variabel, og sidstnævnte
du kan tænke på som I.

1057
00:46:42,790 --> 00:46:44,290
Man kunne kalde det noget, du ønsker.

1058
00:46:44,290 --> 00:46:45,770
Jeg kaldte det nummer.

1059
00:46:45,770 --> 00:46:48,825
Dette kommer til at gentage over
array kaldet numre.

1060
00:46:48,825 --> 00:46:51,200
Og på hver iteration, er det
gå til automatisk at opdatere

1061
00:46:51,200 --> 00:46:54,340
for dig dollartegn nummer
variabel, så du hele tiden

1062
00:46:54,340 --> 00:46:58,210
har adgang til den variabel, du vil
uden at skulle gøre noget firkantet beslag

1063
00:46:58,210 --> 00:47:00,980
notation eller indeksering i et array.

1064
00:47:00,980 --> 00:47:04,950
>> Ud over, at vi har endda ting som
arrays, der ser næsten det samme,

1065
00:47:04,950 --> 00:47:08,210
bortset fra at det er meget almindeligt, da vi får
se, både i PHP og JavaScript

1066
00:47:08,210 --> 00:47:10,750
at pre initialisere et array
ved hjælp af firkantede parenteser.

1067
00:47:10,750 --> 00:47:12,040
C bruger krøllede parenteser.

1068
00:47:12,040 --> 00:47:15,330
Så det er lidt anderledes, selvom
vi virkelig ikke bruge det trick meget.

1069
00:47:15,330 --> 00:47:20,090
>> Men endnu mere kraftfuldt,
PHP har associative arrays,

1070
00:47:20,090 --> 00:47:23,100
som er en fancy måde
sige hash-tabeller.

1071
00:47:23,100 --> 00:47:31,610
I virkeligheden, hvis du ønsker at erklære en hash
Tabellen i PHP, i modsætning til i C-- hvor mange

1072
00:47:31,610 --> 00:47:34,775
kodelinjer tog det at
faktisk gennemfører en hash tabel i C?

1073
00:47:34,775 --> 00:47:38,310
Eller hvor mange linjer af kode er det
tager at gennemføre en hash tabel i C?

1074
00:47:38,310 --> 00:47:39,820
Så det er sikkert en masse, right?

1075
00:47:39,820 --> 00:47:41,680
Det er et par dusin, måske 100 eller 200.

1076
00:47:41,680 --> 00:47:42,980
Det er nontrivial.

1077
00:47:42,980 --> 00:47:45,420
Eller det er ved at være, som
vil du hurtigt se, nontrivial

1078
00:47:45,420 --> 00:47:48,080
at gennemføre en hashtabel
[Uhørligt], og også en chance.

1079
00:47:48,080 --> 00:47:50,580
Men i PHP-- og helt ærligt, jeg
sandsynligvis ikke bør fortælle dig dette

1080
00:47:50,580 --> 00:47:53,630
indtil Monday-- i PHP, hvis
du ønsker en tabel, gjort.

1081
00:47:53,630 --> 00:47:56,431
Det er en hash table-- så
med én linje kode.

1082
00:47:56,431 --> 00:47:56,930
Og

1083
00:47:56,930 --> 00:47:58,810
>> En masse sprog gør det.

1084
00:47:58,810 --> 00:48:00,190
Hav det sjovt med pset fem.

1085
00:48:00,190 --> 00:48:01,980
Så en masse sprog gøre dette.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
De giver dig disse abstraktioner
at andre mennesker, andre programmører,

1088
00:48:06,140 --> 00:48:09,870
har skabt for dig, så
du kan stå på deres skuldre

1089
00:48:09,870 --> 00:48:13,290
og begynde at bruge ideer, der er super
overbevisende, ligesom hash-tabeller og træer

1090
00:48:13,290 --> 00:48:14,140
og prøvede.

1091
00:48:14,140 --> 00:48:17,790
Men du behøver ikke nødvendigvis at
gennemføre disse ting selv.

1092
00:48:17,790 --> 00:48:20,850
>> Og så i sidste ende, hvad
vi kommer til at bruge PHP for

1093
00:48:20,850 --> 00:48:23,580
er potentielt skrive programmer
af den såkaldte kommandolinje.

1094
00:48:23,580 --> 00:48:26,600
Vi kunne genskabe hver program
vi har skrevet dette semester hidtil,

1095
00:48:26,600 --> 00:48:30,410
undtagen måske breakout som bruger SPL,
der er specifik for C i øjeblikket.

1096
00:48:30,410 --> 00:48:33,100
Men hver anden problem indstillet,
sikkert Mario og Cæsar

1097
00:48:33,100 --> 00:48:35,300
og Vigenere og
[? Crack?] Og fremefter, vi

1098
00:48:35,300 --> 00:48:39,520
kunne re-implementere i PHP, og
sandsynligvis en smule lettere.

1099
00:48:39,520 --> 00:48:43,050
>> Men hvad vi i sidste ende vil
at bruge PHP for er web programmering.

1100
00:48:43,050 --> 00:48:46,420
Og vi kommer til at indføre næste
uge en mental model, et paradigme kaldet

1101
00:48:46,420 --> 00:48:49,610
MVC, model view controller,
som hvis du har gjort programmering

1102
00:48:49,610 --> 00:48:51,610
før i Python eller
Ruby eller andre steder, du

1103
00:48:51,610 --> 00:48:54,112
måske kender af dette team med
Rails og Django og lignende.

1104
00:48:54,112 --> 00:48:55,820
Men hvis du er ny til
også dette, vil du se

1105
00:48:55,820 --> 00:48:59,652
at dette er faktisk en meget naturlig
udvidelse af faktoriseringen

1106
00:48:59,652 --> 00:49:01,360
og slags design
kode, vi har

1107
00:49:01,360 --> 00:49:04,670
gjort i C. Vi vil nu
anvende nogle af disse lektioner til PHP

1108
00:49:04,670 --> 00:49:07,190
så i sidste ende er vi
at implementere vores egne hjemmesider.

1109
00:49:07,190 --> 00:49:09,080
Og hvis du er en slags
hypnotiseret eller forbløffet

1110
00:49:09,080 --> 00:49:10,954
at vi kommer til at gøre
alle af så hurtigt,

1111
00:49:10,954 --> 00:49:13,410
indse, at næsten alle
semester, næsten 90%

1112
00:49:13,410 --> 00:49:16,560
for studerende CS50, herunder dem,
der aldrig har programmeret før,

1113
00:49:16,560 --> 00:49:20,329
ender med at gøre de endelige projekter,
er baseret på web-programmering.

1114
00:49:20,329 --> 00:49:23,120
Og så vil du se, at de vender tilbage
er høj i de kommende uger.

1115
00:49:23,120 --> 00:49:24,965
Så vi vil se dig derefter på mandag.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> SPEAKER 1: Og nu, Deep
Tanker ved Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Hash tabeller.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [Latter]

1122
00:49:38,402 --> 00:49:38,902