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

2
00:00:01,390 --> 00:00:04,890
>> [Zenelejátszó]

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

4
00:00:10,955 --> 00:00:12,580
DAVID J MALAN: Rendben, szívesen vissza.

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

6
00:00:13,600 --> 00:00:15,540
Ez a vége a hét hét.

7
00:00:15,540 --> 00:00:18,180
És ez a vége, hogy a dögevő
vadászat a problémás meghatározott négy

8
00:00:18,180 --> 00:00:19,220
hogy lehet felidézni.

9
00:00:19,220 --> 00:00:21,650
Miután vissza valamennyi
azok JPEG alkalmazottak,

10
00:00:21,650 --> 00:00:24,820
te kétségbe, ha úgy gondolja,
fényképezni magát, mint sok

11
00:00:24,820 --> 00:00:25,981
Az ilyen emberek, mint te.

12
00:00:25,981 --> 00:00:28,480
Van egy csomó beadványok
Az elmúlt hetekben,

13
00:00:28,480 --> 00:00:32,980
sőt, jó néhány jog délelőtt
ma, amelyek közül néhány az említett itt,

14
00:00:32,980 --> 00:00:37,670
fogott itt in-- néz like-- Annenberg
Hall munkaidőben, egy ide

15
00:00:37,670 --> 00:00:39,530
Lowell ház Nick.

16
00:00:39,530 --> 00:00:41,750
Itt van Ramon lebukás a telefon.

17
00:00:41,750 --> 00:00:43,870
Ez volt a CS50 ebédre.

18
00:00:43,870 --> 00:00:46,840
Ez volt a Jason Skyping
Egy kreatív osztálytársa,

19
00:00:46,840 --> 00:00:48,280
aki hívta így.

20
00:00:48,280 --> 00:00:49,690
Nem tudom, mi ez.

21
00:00:49,690 --> 00:00:51,940
>> [Nevetés]

22
00:00:51,940 --> 00:00:54,570
>> DAVID J MALAN: De
ez megér egy gigabyte.

23
00:00:54,570 --> 00:00:56,960
Itt Chang, aki
szó szaladt le a színpadról

24
00:00:56,960 --> 00:01:00,480
hogy elkerüljék, hogy fényképezett egy
nap, de végül elkapta.

25
00:01:00,480 --> 00:01:02,050
Itt van Nick.

26
00:01:02,050 --> 00:01:03,480
Itt van Nick.

27
00:01:03,480 --> 00:01:04,080
Itt van Nick.

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

29
00:01:05,090 --> 00:01:07,670
És itt van Alison le a mezőket.

30
00:01:07,670 --> 00:01:11,840
És még Zamyla találtak
egy bálterem versenyt.

31
00:01:11,840 --> 00:01:14,100
Így megy át
ezeket a képeket, kitalálni

32
00:01:14,100 --> 00:01:16,690
benyújtó a legtöbb
a legkorábbi, és jutalom

33
00:01:16,690 --> 00:01:20,662
egy mesés díjat, mivel
ígért a spec.

34
00:01:20,662 --> 00:01:23,120
És mi is nyomon mintegy
a tér, hogy a részt.

35
00:01:23,120 --> 00:01:26,860
>> Pár announcements-- így ebéd
az, megint, ez a péntek 13:15.

36
00:01:26,860 --> 00:01:30,420
Ha azt szeretné, hogy csatlakozzon hozzánk,
RSVP abban URL itt.

37
00:01:30,420 --> 00:01:33,730
Jason ismét megjelenik itt egy
a szakaszok egy pár évig

38
00:01:33,730 --> 00:01:35,510
vissza, ami történt,
esik a Halloween.

39
00:01:35,510 --> 00:01:38,950
És valóban, ő öltözött
tök az adott évre.

40
00:01:38,950 --> 00:01:42,700
Ha nézni ezt a részt
Az ő 2011-től szakasz

41
00:01:42,700 --> 00:01:46,480
nyolc, ha kíváncsi,
A CS50.tv, azt hiszem,

42
00:01:46,480 --> 00:01:49,730
ez volt az az év, amelyben
a levegő pumpa dolgozik.

43
00:01:49,730 --> 00:01:52,490
>> Ha majd nézd meg az
hasonló szakasz 2012-ben,

44
00:01:52,490 --> 00:01:55,620
meglátja ezt Jason sok leeresztett,
mivel a ruha már nem működött,

45
00:01:55,620 --> 00:01:58,060
amely csak mondani
pénteken, ha azt

46
00:01:58,060 --> 00:02:02,720
szeretnék faragni egy tök Daven
és Gabe és mások, válaszolj a fejek

47
00:02:02,720 --> 00:02:04,480
A cs50.harvard.edu címre.

48
00:02:04,480 --> 00:02:06,200
Azt ígéri, hogy jó móka lesz.

49
00:02:06,200 --> 00:02:08,660
Daven, azt mondták, a faragott
tök egész életében.

50
00:02:08,660 --> 00:02:11,930
Gabriel Brazíliából soha
faragott sütőtök a Halloween.

51
00:02:11,930 --> 00:02:14,700
Tehát ott, mert ő tanul.

52
00:02:14,700 --> 00:02:16,830
>> Szemináriumok, meanwhile--
így megtudhatja hamarosan

53
00:02:16,830 --> 00:02:20,650
arról, milyen elvárásaink vannak az
a végleges projekt, amely lényegében

54
00:02:20,650 --> 00:02:23,150
majd forraljuk le
megtervezése és végrehajtása

55
00:02:23,150 --> 00:02:26,440
a legtöbb olyan projekt érdekes
te, bár jóváhagyásával

56
00:02:26,440 --> 00:02:28,490
és útmutatást a tanítás a fickó.

57
00:02:28,490 --> 00:02:32,110
Vége felé a
félév, bemutatjuk a szám

58
00:02:32,110 --> 00:02:35,610
szemináriumok, amelyek a választható osztályok
által vezetett oktatási ösztöndíjasok és a Harvard

59
00:02:35,610 --> 00:02:38,570
munkatársai, barátai a kurzus egész
campus, különböző témák

60
00:02:38,570 --> 00:02:41,470
vannak érintőleges a
Persze a mögöttes tananyag

61
00:02:41,470 --> 00:02:45,590
de ennek ellenére alkalmazható, szórakoztató, és
különböző lehetséges végső projekteket.

62
00:02:45,590 --> 00:02:49,530
>> Például először, ha azt szeretné,
regisztrálni, fej, hogy URL-t is.

63
00:02:49,530 --> 00:02:53,010
És ez a felállás
Az idei szemináriumok egyedül.

64
00:02:53,010 --> 00:02:56,060
De észre, több tucat
szemináriumok tól az elmúlt években, melyek

65
00:02:56,060 --> 00:02:59,774
kapcsolódik a szemináriumok menü
lehetőség a kurzus honlapján.

66
00:02:59,774 --> 00:03:02,190
Tehát, ha gondolkodik
túllépve a komfort zónában

67
00:03:02,190 --> 00:03:05,060
vagy vesz fel, néhány új készségek,
például, programozási iPhone

68
00:03:05,060 --> 00:03:08,100
alkalmazásokat Swift, egy új nyelvet
Apple vagy Objective-C

69
00:03:08,100 --> 00:03:11,230
vagy Android apps vagy programozás [? dákó?]
izzók, vagy a téma

70
00:03:11,230 --> 00:03:15,490
itt és több, megfelelő ellenőrzés
ki a regisztrációs oldalt.

71
00:03:15,490 --> 00:03:19,730
>> Így kezdődött, és megállapította, a
Hétfő nézi HTTP.

72
00:03:19,730 --> 00:03:22,675
Így gyors refresher-- HTTP,
HTTP protokoll.

73
00:03:22,675 --> 00:03:24,045
De mit is jelent ez valójában?

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

75
00:03:26,805 --> 00:03:27,930
Ez mit is jelent?

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

77
00:03:30,665 --> 00:03:31,290
Ez a kéz?

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

79
00:03:33,074 --> 00:03:34,740
Tudom, hogy te csak vakarja a fejét.

80
00:03:34,740 --> 00:03:36,400
De szeretnénk javasolni mi a HTTP?

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

82
00:03:37,792 --> 00:03:40,576
>> KÖZÖNSÉG: Hogyan számítógépek
kommunikálni [hallható].

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

84
00:03:41,517 --> 00:03:43,100
DAVID J MALAN: lekéstem az utolsó rész.

85
00:03:43,100 --> 00:03:45,774
Számítógépes kommunikációs with--

86
00:03:45,774 --> 00:03:47,325
>> KÖZÖNSÉG: internetes kiszolgálók.

87
00:03:47,325 --> 00:03:50,450
DAVID J MALAN: Good-- internet
szerverek, és különösen, web szerver.

88
00:03:50,450 --> 00:03:53,533
Mert emlékszem, van egy csomó
szolgáltatások az interneten, amelyek közül néhány

89
00:03:53,533 --> 00:03:57,349
használata valószínűleg naponta közötti beszélgetés
és az üzenet, chat, és a web és e-mail,

90
00:03:57,349 --> 00:03:57,890
és a hasonlók.

91
00:03:57,890 --> 00:04:00,900
És még csak a HTTP
protokoll, amely a böngészők

92
00:04:00,900 --> 00:04:03,750
beszélni, ha kommunikál
webszerverek, és fordítva.

93
00:04:03,750 --> 00:04:05,580
És az analóg az
emberi világ lehet,

94
00:04:05,580 --> 00:04:08,730
Én kiterjeszteni a kezem, hogy rázza egyes
másik ember által, és ő

95
00:04:08,730 --> 00:04:11,970
elismeri kiterjesztve
ő kezét is.

96
00:04:11,970 --> 00:04:13,970
Szóval ez csak egy protokoll,
egy sor egyezmények.

97
00:04:13,970 --> 00:04:15,630
>> És mi valóban azok egyezmények?

98
00:04:15,630 --> 00:04:18,640
Nos, ez csak attól függ, hogy
üzenetek küldésére oda-vissza,

99
00:04:18,640 --> 00:04:19,770
ahogy itt látható.

100
00:04:19,770 --> 00:04:22,520
És van egy pár módon
amely küldhet ezeket az üzeneteket.

101
00:04:22,520 --> 00:04:24,360
És talán a legfontosabb
közös néven kap.

102
00:04:24,360 --> 00:04:26,510
És majd meglátjuk a kontraszt
e nemsokára.

103
00:04:26,510 --> 00:04:30,010
>> De egy GET kérés böngészőből
a szerver csak úgy néz ki, mint ez.

104
00:04:30,010 --> 00:04:32,960
Ez egy csomó szöveget, hogy hozza
belsejében egy virtuális boríték.

105
00:04:32,960 --> 00:04:35,854
A külső, hogy a boríték
megy egy pár darab részleteket.

106
00:04:35,854 --> 00:04:37,770
Mit kell menni a
boríték, hogy úgy mondjam,

107
00:04:37,770 --> 00:04:41,820
annak érdekében, hogy a kérelem, mint a
ezt tőlem, hogy egy webszerver?

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

109
00:04:42,320 --> 00:04:43,270
>> KÖZÖNSÉG: Az IP-cím.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J MALAN: My IP-cím
a Feladó mezőben, hogy úgy mondjam,

111
00:04:45,890 --> 00:04:49,490
és természetesen, a
címzett IP-címét.

112
00:04:49,490 --> 00:04:52,710
De abban az esetben egy web csomag,
szükségünk van egy kicsit részletesebben

113
00:04:52,710 --> 00:04:55,254
Nem elég csak a
Levél borítékot a szerveren,

114
00:04:55,254 --> 00:04:57,670
mert a kiszolgáló lehet
hallgatta a különböző típusú

115
00:04:57,670 --> 00:04:59,180
az internetes forgalmat.

116
00:04:59,180 --> 00:05:01,370
Szóval mi mást nem is kell
mellett a címzett IP?

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

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

119
00:05:03,222 --> 00:05:04,241
>> KÖZÖNSÉG: Vajon TCP?

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

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

122
00:05:06,470 --> 00:05:07,340
>> KÖZÖNSÉG: cím.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J MALAN: cím,
vagy port, ahogy hívják.

124
00:05:09,340 --> 00:05:11,010
Bezárás, de a TCP port számát.

125
00:05:11,010 --> 00:05:12,220
És van egy csomó ilyen.

126
00:05:12,220 --> 00:05:14,310
De biztosan a legtöbb
ismerős kell végül

127
00:05:14,310 --> 00:05:17,590
80, ami az alapértelmezett
használthoz internetes forgalmat.

128
00:05:17,590 --> 00:05:20,040
És még egy ismerős
egy hamarosan 443,

129
00:05:20,040 --> 00:05:24,280
mellyel a biztonságos web
forgalom, URL-ek https kezdeni.

130
00:05:24,280 --> 00:05:26,650
>> Szóval, ez az, ami megy
belsejében a borítékot.

131
00:05:26,650 --> 00:05:29,780
És kap / csak azt jelenti, hogy
nekem az alapértelmezett weboldalt.

132
00:05:29,780 --> 00:05:32,700
Adj a gyökér a kemény
meghajtó, hogy a web szerver.

133
00:05:32,700 --> 00:05:36,050
És remélhetőleg, az interneten
szerver válaszolni fog, OK

134
00:05:36,050 --> 00:05:39,630
és a 200-as, amely mindössze
egyezményt, mondván, igen, minden

135
00:05:39,630 --> 00:05:40,470
valóban az OK gombra.

136
00:05:40,470 --> 00:05:41,680
Itt az oldalt.

137
00:05:41,680 --> 00:05:45,510
A típus a weboldal fog
lehet szöveg, de pontosabban, HTML,

138
00:05:45,510 --> 00:05:47,010
amit mindjárt merülni vissza.

139
00:05:47,010 --> 00:05:49,877
És pont pont pont csak
eszköz, itt van a HTML.

140
00:05:49,877 --> 00:05:51,710
És ez az, ahol mi
vegye fel a történetet,

141
00:05:51,710 --> 00:05:55,740
tulajdonképpen írás HTML,
Hypertext Markup Language, amely

142
00:05:55,740 --> 00:05:57,727
az a nyelv, amelyen
weboldalak írva.

143
00:05:57,727 --> 00:05:59,060
Ez nem egy programozási nyelv.

144
00:05:59,060 --> 00:06:01,270
Nincs funkció
vagy hurkok vagy körülmények között.

145
00:06:01,270 --> 00:06:03,800
Ez egy leíró nyelv,
valamint újra látni ma,

146
00:06:03,800 --> 00:06:07,240
amely lehetővé teszi, hogy meghatározza
hogyan kell felépíteni és stilizálhatja

147
00:06:07,240 --> 00:06:09,300
esztétikailag egy internetes oldalon.

148
00:06:09,300 --> 00:06:11,470
>> Tehát ez volt az egyetlen
és csak az oldalon valóban

149
00:06:11,470 --> 00:06:13,930
nézett, ha röviden, hétfőn.

150
00:06:13,930 --> 00:06:16,250
És észre néhány
kiemelkedő jellemzői.

151
00:06:16,250 --> 00:06:20,170
Van egy csomó nyitott szögletes
tartó és közeli szögletes zárójel.

152
00:06:20,170 --> 00:06:23,160
A szögletes között
zárójelben vannak szavak.

153
00:06:23,160 --> 00:06:25,660
És mi fog kezdeni
amelyben ezek a szavak címkéket.

154
00:06:25,660 --> 00:06:28,800
Így nyitott zárójel fej
és zárt tartó fej

155
00:06:28,800 --> 00:06:33,620
a nyitott és zárt címkék,
vagy a kezdő és záró címkék

156
00:06:33,620 --> 00:06:37,660
illetve egy HTML elem,
ahogy mi nevezzük, az úgynevezett fej.

157
00:06:37,660 --> 00:06:41,760
És ugyanez érvényes zsargon
a test HTML és így tovább.

158
00:06:41,760 --> 00:06:43,970
>> És ami szép is
HTML-- sőt, fogunk

159
00:06:43,970 --> 00:06:47,187
szörnyen kevés időt töltenek vele,
mert akkor inkább csak kitalálni

160
00:06:47,187 --> 00:06:49,770
milyen funkciók azt, ha
valójában egy konkrét probléma

161
00:06:49,770 --> 00:06:52,820
hogy solve-- rájössz, hogy
A böngésző nagyon buta.

162
00:06:52,820 --> 00:06:56,450
Ez csak fog do-- ellentétben nem
a computer-- mit mondani, hogy igen.

163
00:06:56,450 --> 00:06:59,279
És ha van nyitva
konzol HTML legtetején

164
00:06:59,279 --> 00:07:01,320
ott, hogy lényegében
csak azt jelenti, hé, böngésző,

165
00:07:01,320 --> 00:07:04,090
itt jön egy weboldal írt HTML.

166
00:07:04,090 --> 00:07:06,130
>> Ha lát nyitva tartó
fej, ​​ez csak azt jelenti,

167
00:07:06,130 --> 00:07:10,350
hé, böngésző, itt jön a fej, vagy
a legfelső része az weboldal.

168
00:07:10,350 --> 00:07:14,192
Ha meglát egy zárt konzol
fej, ​​ez csak azt jelenti, hé,

169
00:07:14,192 --> 00:07:15,150
ez az a fej.

170
00:07:15,150 --> 00:07:16,420
Készenléti valami mást.

171
00:07:16,420 --> 00:07:18,878
És ez valami más
látszólag lesz a szervezetben.

172
00:07:18,878 --> 00:07:22,630
És ha nincs címke, mint
Ön most hello, vessző, világ,

173
00:07:22,630 --> 00:07:26,610
ami csak lesz nyers szöveget
végül jelenik meg a képernyőn.

174
00:07:26,610 --> 00:07:29,220
>> Most, észre fogod venni, túl
a behúzás itt.

175
00:07:29,220 --> 00:07:32,160
Akkor talán arra következtethetünk
hogyan vagyunk stilizáló azt.

176
00:07:32,160 --> 00:07:34,850
Minden alkalommal, amikor megnyit egy tag,
hogy úgy mondjam, én behúzása.

177
00:07:34,850 --> 00:07:38,540
És minden alkalommal, amikor bezárni
Egy tag, én un-francia,

178
00:07:38,540 --> 00:07:40,690
hasonló szellemben a kapcsos zárójeleket.

179
00:07:40,690 --> 00:07:43,470
És azon túl, hogy én vagyok a fajta
használata megítélésem.

180
00:07:43,470 --> 00:07:48,380
Vegyük észre, hogy én nem zavarta üti
Adja meg a belsejében, amely cím.

181
00:07:48,380 --> 00:07:48,990
Miért?

182
00:07:48,990 --> 00:07:51,920
Nos, úgy döntöttem, hogy nézett ki a
kicsit tisztább számomra, az ember,

183
00:07:51,920 --> 00:07:53,181
hogy csak nem zavar csinálja.

184
00:07:53,181 --> 00:07:54,930
Szóval megint, van néhány
felhívja ítélet csak

185
00:07:54,930 --> 00:07:57,670
mint ott van a C vagy bármilyen nyelven.

186
00:07:57,670 --> 00:08:04,110
>> Vegyük észre, hogy ez is behúzás
alkalmas arra, hogy a mentális modell

187
00:08:04,110 --> 00:08:05,670
nem kell túlzott bonyolítja azt.

188
00:08:05,670 --> 00:08:07,020
De egy fa, igaz?

189
00:08:07,020 --> 00:08:09,290
Ha úgy gondolja, a web
oldal, látszólag írott

190
00:08:09,290 --> 00:08:12,050
mint ez, mint
szépen tagolt így,

191
00:08:12,050 --> 00:08:17,390
akkor szinte gondolni a nyitott konzol
HTML zárt konzol tag elhatárolására

192
00:08:17,390 --> 00:08:21,380
a gyökér a csomópont, a családfa
stílus csomópont a stílus a fák

193
00:08:21,380 --> 00:08:22,900
megnéztük múlt pénteken.

194
00:08:22,900 --> 00:08:27,630
>> És valóban, már az itt
mi fogjuk hívni a DOM, D-O-M, dokumentum

195
00:08:27,630 --> 00:08:31,680
objektum modell, divatos szóval
egy fa, amely jelzi, hogy a HTML.

196
00:08:31,680 --> 00:08:36,140
És észre, hogy HTML-ben, azt fogjuk mondani,
mint egy családfát, két gyermeke van.

197
00:08:36,140 --> 00:08:37,659
A bal oldalon a feje.

198
00:08:37,659 --> 00:08:39,179
A jobb oldalon a test.

199
00:08:39,179 --> 00:08:44,220
>> És ahogy egy agyatlan gondolat gyakorlat,
fej, ​​persze, van, hogy hány gyerek

200
00:08:44,220 --> 00:08:46,070
szerint ez a szerkezet?

201
00:08:46,070 --> 00:08:48,200
Tehát csak egy, title--
és ezért van

202
00:08:48,200 --> 00:08:50,580
a nyíl megy a fejét, hogy a cím.

203
00:08:50,580 --> 00:08:55,110
Tehát, mintha az adott személy a
családfa már csak egy utód.

204
00:08:55,110 --> 00:08:58,230
És akkor maga a cím
elmondható, hogy a gyerek is.

205
00:08:58,230 --> 00:09:01,780
>> Emlékezzünk vissza, hogy a HTML volt
hello, vessző, a világ alatta.

206
00:09:01,780 --> 00:09:06,090
És én csak rajzolt belül egy
ovális helyett téglalap igazságos

207
00:09:06,090 --> 00:09:10,559
közvetíteni szemantikailag hogy bár
ez egy csomópont a fában, hogy úgy mondjam,

208
00:09:10,559 --> 00:09:12,100
ez a fajta alapvetően különböző.

209
00:09:12,100 --> 00:09:12,800
Ez nem tag.

210
00:09:12,800 --> 00:09:14,780
Vagy még pontosabban, ez nem egy elemet.

211
00:09:14,780 --> 00:09:16,590
Ez csak egy szöveges csomópont, ha úgy tetszik.

212
00:09:16,590 --> 00:09:18,990
De ezek teljesen
önkényes emberi egyezmények.

213
00:09:18,990 --> 00:09:23,180
Ez most az én utam az
képviselő, mit fogok mint összesítve

214
00:09:23,180 --> 00:09:24,340
hívja a dokumentumot.

215
00:09:24,340 --> 00:09:27,750
>> És mint félre, a dolog
A szuper bal felső sarokban,

216
00:09:27,750 --> 00:09:32,080
nyitott zárójel felkiáltójel doc
típusú HTML, ez úgy néz ki, mint egy címke,

217
00:09:32,080 --> 00:09:35,560
de ez a hülye sarok esetben, ha
hogy csak ott, a vágólapra másolni

218
00:09:35,560 --> 00:09:38,460
hogy jelezze a böngészők
Ez a HTML 5-ös verzió.

219
00:09:38,460 --> 00:09:41,540
A világ folyamatosan változik, amit a
első sorban a kód egy oldalon legyen.

220
00:09:41,540 --> 00:09:43,820
Ez csak annyit jelent, 5-ös verzió.

221
00:09:43,820 --> 00:09:45,950
Tehát nem elég
néz ki, mint a többiek.

222
00:09:45,950 --> 00:09:48,120
>> Rendben, így az, hogy
azt mondta, akkor most értékelni

223
00:09:48,120 --> 00:09:50,767
ez elég ez a hülye
tetoválás valakinek megvan.

224
00:09:50,767 --> 00:09:51,990
>> [Nevetés]

225
00:09:51,990 --> 00:09:54,210
>> DAVID J MALAN: Rendben,
és most nézzük valóban merülés

226
00:09:54,210 --> 00:09:55,710
csinál valamit ezzel.

227
00:09:55,710 --> 00:09:58,610
Majd emlékeztetnek arra, hogy utoljára
Én megnyitotta a CS50 Appliance

228
00:09:58,610 --> 00:10:01,650
és tettem valamit
egyszerű, mint megnyitása gedit.

229
00:10:01,650 --> 00:10:05,190
És én mentette a fájlt még
én desktop-- sehol special--

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

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

232
00:10:07,100 --> 00:10:10,984
>> Hadd csinálni
again-- hello.html Enter billentyűt.

233
00:10:10,984 --> 00:10:13,900
És most ebben a fájlban, megyek
megy előre, és szaporodik, amit most

234
00:10:13,900 --> 00:10:18,850
saw-- doc típusú html Akkor megyek
do nyitott konzol html zárt konzol.

235
00:10:18,850 --> 00:10:21,890
És akkor fogok preemptively
nyitni és zárni a tag.

236
00:10:21,890 --> 00:10:22,390
Miért?

237
00:10:22,390 --> 00:10:23,598
Csak így ne felejtsd el később.

238
00:10:23,598 --> 00:10:26,850
Ez csak jó gyakorlat, mint a nyitás
és záró kapcsos zárójelek egyszerre.

239
00:10:26,850 --> 00:10:28,900
>> És akkor mi következik?

240
00:10:28,900 --> 00:10:30,582
Azt hiszem a tetoválás.

241
00:10:30,582 --> 00:10:31,450
>> KÖZÖNSÉG: A fej.

242
00:10:31,450 --> 00:10:32,500
>> DAVID J MALAN: A fej.

243
00:10:32,500 --> 00:10:36,020
És akkor itt,
volt a címe, azt hiszem.

244
00:10:36,020 --> 00:10:39,886
És a cím volt önkényesen,
hello, világ közeli címet.

245
00:10:39,886 --> 00:10:42,760
És akkor itt le, a test, a
course-- akkor zárja be a body tag.

246
00:10:42,760 --> 00:10:45,660
És akkor csak némileg redundáns,
Ugyanez volt a dolog itt.

247
00:10:45,660 --> 00:10:47,150
>> Szóval azt állítják, hogy ez a weboldal.

248
00:10:47,150 --> 00:10:49,050
Ez az, amit
most már élőben az interneten,

249
00:10:49,050 --> 00:10:51,925
annak ellenére, hogy persze, ez a szó szoros értelmében
él az asztalon most.

250
00:10:51,925 --> 00:10:55,837
De tényleg, ha minimalizálni gedit,
Találkozunk az asztalon az ikonjára.

251
00:10:55,837 --> 00:10:58,420
Annak ellenére, hogy ez a készülék,
meg tudná csinálni ezt a Mac OS

252
00:10:58,420 --> 00:11:01,580
nélkül TextEdit vagy
A Windows Jegyzettömb még.

253
00:11:01,580 --> 00:11:06,115
>> És ha megy előre, és dupla kattintással
hogy még, és select-- jól, hadd

254
00:11:06,115 --> 00:11:07,990
nem választható ki, mert
Chrome nem nyílik.

255
00:11:07,990 --> 00:11:09,281
Menjünk előre, és nyissa meg a Chrome.

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

257
00:11:10,160 --> 00:11:14,040
És akkor nem Command-O nyitott
És keresse meg az asztalon

258
00:11:14,040 --> 00:11:15,320
és nyissa meg a fájlt.

259
00:11:15,320 --> 00:11:20,120
Így a böngésző értelmezi
HTML, felülről lefelé, balról jobbra.

260
00:11:20,120 --> 00:11:21,314
Hé, itt a HTML böngésző.

261
00:11:21,314 --> 00:11:21,980
Itt a fejét.

262
00:11:21,980 --> 00:11:23,250
Itt a cím.

263
00:11:23,250 --> 00:11:24,090
Itt a test.

264
00:11:24,090 --> 00:11:26,620
És valóban, ez hogyan
azt teszi, hogy a weboldal.

265
00:11:26,620 --> 00:11:27,800
>> Vegyük észre, az URL-t.

266
00:11:27,800 --> 00:11:32,430
Egyikőtök sem lehet húzni ezt a különleges
oldal a laptopok most,

267
00:11:32,430 --> 00:11:34,910
belül is a
eszköz útján, hogy URL-t,

268
00:11:34,910 --> 00:11:40,130
mivel file: // azt jelzi, hogy valójában
én fájlrendszer, a merevlemez,

269
00:11:40,130 --> 00:11:40,990
nem a tiéd.

270
00:11:40,990 --> 00:11:42,440
Szóval ez még nem minden, hogy hasznos.

271
00:11:42,440 --> 00:11:44,940
>> Nézzük most elmozdulni
a tényleges webszerver.

272
00:11:44,940 --> 00:11:48,309
És kiderül, a CS50 Appliance
több, mint egy olyan környezetben, ahol

273
00:11:48,309 --> 00:11:51,100
írhatunk C kódot és összeállítása
és fuss, mint te csináltál.

274
00:11:51,100 --> 00:11:55,500
Azt is be lett állítva a
személyzet, hogy képviselje a tipikus web

275
00:11:55,500 --> 00:11:58,290
szerver, ami az interneten,
az egyik, hogy lehet, hogy fizetni

276
00:11:58,290 --> 00:12:00,210
vagy az egyik, hogy az úgynevezett felhő.

277
00:12:00,210 --> 00:12:02,600
>> És ez működik
szabvány ingyenes, nyílt forráskódú

278
00:12:02,600 --> 00:12:06,160
szoftver, például, valami
Apache nevű, ami talán

279
00:12:06,160 --> 00:12:08,700
még mindig a legnépszerűbb internetes
szerver szoftver a világon

280
00:12:08,700 --> 00:12:11,030
hogy több ezer weboldalak használata ma.

281
00:12:11,030 --> 00:12:13,420
És ez is még van
szoftverek, mint a MySQL,

282
00:12:13,420 --> 00:12:16,240
amely egy adatbázis-kiszolgáló
hogy mi lesz végül eljut,

283
00:12:16,240 --> 00:12:18,330
amely csak mondani
Kezdhetem kezelésére

284
00:12:18,330 --> 00:12:22,040
a készülék, mint a teljes értékű szerver
hogy én nem fizet máshol.

285
00:12:22,040 --> 00:12:25,980
Csak él, a saját laptop
fejlesztés és a kényelem célra.

286
00:12:25,980 --> 00:12:27,870
>> Szóval menjünk előre, és
kihasználják ezt.

287
00:12:27,870 --> 00:12:30,120
Én megyek előre, és
nyit egy terminál ablakot.

288
00:12:30,120 --> 00:12:33,030
És én megyek előre, és
move-- valójában, először vagyok

289
00:12:33,030 --> 00:12:34,860
fog navigálni az asztalon.

290
00:12:34,860 --> 00:12:36,400
Ha én ls, ott hello.html.

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

292
00:12:37,022 --> 00:12:38,730
És én megyek
előre, és kezdi el használni

293
00:12:38,730 --> 00:12:40,800
Új könyvtár voltunk
előtt nem használt ma.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- fogok mozogni
a ../vhosts virtuális hosts--

295
00:12:46,840 --> 00:12:50,940
bővebben a future-- majd
egy könyvtár neve localhost,

296
00:12:50,940 --> 00:12:54,420
amely az adott becenév szinte
bármely számítógép, hogy ez egy Mac, PC,

297
00:12:54,420 --> 00:12:57,560
vagy Linux számítógépes, majd
különösen a könyvtárba, hogy mi,

298
00:12:57,560 --> 00:13:01,260
A személyzet már létre az Ön számára, ha
letöltötte a készülék úgynevezett

299
00:13:01,260 --> 00:13:01,760
nyilvános.

300
00:13:01,760 --> 00:13:04,551
És ahogy a neve is sugallja, valami
Tettem ebben a mappában, elméletben,

301
00:13:04,551 --> 00:13:07,790
lesz most
nyilvános, legalábbis az emberek

302
00:13:07,790 --> 00:13:10,030
aki közvetlen
kapcsolat a számítógéppel.

303
00:13:10,030 --> 00:13:13,160
>> Tehát most hadd menjen előre, és
ezt cd hogy ugyanabba a könyvtárba

304
00:13:13,160 --> 00:13:15,490
így látom, mi van
folyik és típusától ls.

305
00:13:15,490 --> 00:13:17,630
És valóban, ez a
egyetlen dolog ott.

306
00:13:17,630 --> 00:13:23,250
Azt állítják, hogy azért, mert most már, hogy ezt a
fájl hello.html belsejében egy könyvtár

307
00:13:23,250 --> 00:13:26,940
az úgynevezett nyilvános belsejében egy könyvtár
úgynevezett localhost belsejében egy könyvtár

308
00:13:26,940 --> 00:13:29,810
nevű vhostokat, amely
köszönhetően CS50 személyzet

309
00:13:29,810 --> 00:13:34,390
már előre beállítva, hogy
a gyökér a webszerver,

310
00:13:34,390 --> 00:13:36,900
Most már remélhetőleg erre.

311
00:13:36,900 --> 00:13:38,390
>> Megyek, hogy nyit egy új lapot.

312
00:13:38,390 --> 00:13:40,090
És én megyek, hogy ne file: //.

313
00:13:40,090 --> 00:13:44,520
Fogom használni a tényleges
http / localhost, amely

314
00:13:44,520 --> 00:13:47,470
ismét a beceneve
a saját szerver.

315
00:13:47,470 --> 00:13:51,085
És akkor én megyek, hogy milyen
fájl nevét, csak hogy világos?

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

317
00:13:52,680 --> 00:13:54,320
Hol van ez a történet valószínűleg megy?

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
>> Más szóval, azt akarom, hogy most ezt a
az én saját számítógép, a saját készülék,

322
00:14:04,270 --> 00:14:05,660
mintha ez egy valódi szerver.

323
00:14:05,660 --> 00:14:07,490
A becenév localhost.

324
00:14:07,490 --> 00:14:10,210
De gondolom, a localhost, úgy, mint
Facebook.com google.com, bármi.

325
00:14:10,210 --> 00:14:11,600
Ez csak az én helyi neve.

326
00:14:11,600 --> 00:14:14,810
És akkor az utolsó, amit akarok, a
gyökere a merevlemez, hogy úgy mondjam,

327
00:14:14,810 --> 00:14:17,729
vagy a gyökér a webszerver,
ergo a perjel, majd a

328
00:14:17,729 --> 00:14:18,770
a fájl neve hello.html.

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

330
00:14:19,880 --> 00:14:21,930
>> Hadd kicsinyítés és nyomja meg az Entert.

331
00:14:21,930 --> 00:14:24,266
És valóban, van most a weboldalt.

332
00:14:24,266 --> 00:14:25,390
Szóval kicsit más.

333
00:14:25,390 --> 00:14:26,880
És ez csak a underwhelming.

334
00:14:26,880 --> 00:14:27,904
Ez a régi verzió.

335
00:14:27,904 --> 00:14:29,070
Hadd összezsugorodik a betűtípus vissza.

336
00:14:29,070 --> 00:14:29,745
Ez a régi.

337
00:14:29,745 --> 00:14:30,890
Ez az új.

338
00:14:30,890 --> 00:14:35,430
De mi történik alapvetően
most az, hogy a HTTP van használatban.

339
00:14:35,430 --> 00:14:39,344
>> Nézzük, hogy ez egy kicsit több tiszta vagy,
ha úgy tetszik, egy kicsit bonyolultabb.

340
00:14:39,344 --> 00:14:41,760
Hadd menjek a jobb alsó sarokban
sarkában a készülék.

341
00:14:41,760 --> 00:14:44,000
És észre, hogy mindez
idő, ott volt a szám.

342
00:14:44,000 --> 00:14:47,330
Ez az egyedi cím
a CS50 Appliance.

343
00:14:47,330 --> 00:14:50,800
Ez egy privát címet,
szerint közvetlenül a 172,16,

344
00:14:50,800 --> 00:14:53,860
ami csak azt jelenti, csak fizikailag
férsz webszerver.

345
00:14:53,860 --> 00:14:56,340
Minden tűzfallal és
szépen védve a többi

346
00:14:56,340 --> 00:14:58,130
a világ, mert ez foglalkozik.

347
00:14:58,130 --> 00:15:01,920
>> És most észre bár ha elmegyek
ezt a címet, nem az én készüléket,

348
00:15:01,920 --> 00:15:04,340
de Mac OS-- megyek
hogy menjen vissza ide.

349
00:15:04,340 --> 00:15:05,930
Ez az én Mac most.

350
00:15:05,930 --> 00:15:08,460
És most megyek nyitni
ezt a verziót a Chrome itt.

351
00:15:08,460 --> 00:15:17,370
És én megyek a http: //172.16.25
/ És elfelejtem a rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Szóval megyek, hogy látogassa meg az én Mac
az IP-/hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
És most látom a Mac
hogy a CS50 Appliance, aki

354
00:15:29,850 --> 00:15:32,600
IP-cím az, hogy
szám, valóban viselkedik

355
00:15:32,600 --> 00:15:34,320
mint egy webszerver az interneten.

356
00:15:34,320 --> 00:15:36,944
Ez nem egy szép könnyű
megjegyezhető nevet, mint a Facebook.com,

357
00:15:36,944 --> 00:15:40,370
de ez a HTTP
látszólag, bár a Chrome

358
00:15:40,370 --> 00:15:43,560
A fajta egyszerűsítése a világ
a számunkra, de nem mutatja meg nekünk HTTP.

359
00:15:43,560 --> 00:15:46,210
De ez valóban pontosan.

360
00:15:46,210 --> 00:15:48,470
Chrome csak bizonyos megtakarítás
karakternél ezekben a napokban.

361
00:15:48,470 --> 00:15:50,530
És ez az, amit most lát.

362
00:15:50,530 --> 00:15:51,890
>> Szóval ez mind szép és jó.

363
00:15:51,890 --> 00:15:53,740
De ez egy nagyon underwhelming oldalt.

364
00:15:53,740 --> 00:15:56,230
Hadd menjen be, és tegyen valamit
most egy kicsit másképp.

365
00:15:56,230 --> 00:15:57,910
Hadd menjen vissza a gedit.

366
00:15:57,910 --> 00:16:00,580
És ahelyett, hogy hello,
világ, mondjuk egy képet.

367
00:16:00,580 --> 00:16:05,880
És igényelt before-- hadd menjen
az én localhost könyvtárba nyilvános.

368
00:16:05,880 --> 00:16:10,580
És hadd menjen előre, és másolja a
csomó fájlt a mai

369
00:16:10,580 --> 00:16:15,633
én Dropbox mappából itt.

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

371
00:16:19,470 --> 00:16:21,680
>> Most, ha az I. típusú ls, nézd
egyáltalán ezeket a fájlokat

372
00:16:21,680 --> 00:16:24,940
hogy már által terjesztett
tanfolyam honlapján előre a mai,

373
00:16:24,940 --> 00:16:26,830
amelyek közül az egyik még mindig hello.html.

374
00:16:26,830 --> 00:16:27,830
Így van, hogy az egyik.

375
00:16:27,830 --> 00:16:30,730
És emlékszem ez egy hülye
az utolsó time-- cat.jpg.

376
00:16:30,730 --> 00:16:34,550
Hadd próbálja beágyazni
cat.jpg belső én weboldal.

377
00:16:34,550 --> 00:16:37,690
>> Én megyek előre
és nem cat.jpg, mentse.

378
00:16:37,690 --> 00:16:38,950
Hadd menjen vissza a Chrome.

379
00:16:38,950 --> 00:16:41,140
És hadd nagyítani a
font és most újratölti.

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

381
00:16:43,090 --> 00:16:45,030
Hoppá, hol tettem ezt?

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

383
00:16:48,210 --> 00:16:51,520
Standby-- Én még mindig a régi
verzió az én desktop nyitva.

384
00:16:51,520 --> 00:16:56,020
Hadd menjen az én vhostod, a
localhost, a köz-, és hello.html.

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

386
00:16:57,320 --> 00:17:00,670
Tehát most hadd menjen előre, és
mondjuk cat.jpg a test belsejét

387
00:17:00,670 --> 00:17:02,830
ahol szeretnék, hogy legyen
jelenik meg, és töltse be újra.

388
00:17:02,830 --> 00:17:04,560
Természetesen, ez nem helyes.

389
00:17:04,560 --> 00:17:08,050
>> Szóval meg kell mondani a böngésző egy kicsit
még szándékosan akarom csinálni.

390
00:17:08,050 --> 00:17:10,210
Egyszerűen írja be a neve
nyilvánvalóan nem elegendő.

391
00:17:10,210 --> 00:17:15,134
Így emlékszem, hogy volt egy másik
tag, kép, img röviden.

392
00:17:15,134 --> 00:17:17,550
Ez csak azért, mert az emberek
Nem szeretem a típus teljes szavak.

393
00:17:17,550 --> 00:17:19,050
És akkor nem tehetünk source = "cat.jpg".

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

395
00:17:21,470 --> 00:17:23,550
>> És most fogok csinálni
egy dolog más itt.

396
00:17:23,550 --> 00:17:25,390
Annak ellenére, hogy az összes
a tag eddig is

397
00:17:25,390 --> 00:17:28,086
volt ez a fogalom a
kezdődik tag és egy záró tag,

398
00:17:28,086 --> 00:17:30,210
ez nem igazán
értelme egy kép, ugye?

399
00:17:30,210 --> 00:17:32,430
Egy kép vagy van, vagy nincs ott.

400
00:17:32,430 --> 00:17:36,650
És így az emberek jöttek
fel egy egyszerűbb egyezmény.

401
00:17:36,650 --> 00:17:40,310
Ha van egy címke, amely mindkét
kezdődik és ér véget az azonos time--

402
00:17:40,310 --> 00:17:43,790
lehet üres, így csak speak--
tedd a perjel belül a tag

403
00:17:43,790 --> 00:17:44,710
a legvégén.

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

405
00:17:45,776 --> 00:17:47,150
Most hadd menjek vissza a böngésző.

406
00:17:47,150 --> 00:17:50,377
Hit Reload fenébe, valami baj van.

407
00:17:50,377 --> 00:17:52,460
Ön valószínűleg látta ezt
néha az interneten,

408
00:17:52,460 --> 00:17:53,600
akkor is, ha ez nem a te hibád.

409
00:17:53,600 --> 00:17:54,766
Ez a web szerver hibája.

410
00:17:54,766 --> 00:17:56,240
Mi ódákat ez alapján úgy tűnik,?

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

412
00:17:57,450 --> 00:17:58,009
Ez törött.

413
00:17:58,009 --> 00:17:59,300
Ez az, ahol a kép is tartozik.

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

415
00:17:59,700 --> 00:18:01,560
>> KÖZÖNSÉG: De ez nem
férhetnek hozzá a képet.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J MALAN: ez nem
férhetnek hozzá a képet.

417
00:18:03,070 --> 00:18:05,230
Ez, vagy ami még rosszabb, talán
nem is létezik.

418
00:18:05,230 --> 00:18:06,729
Lássuk, ha nem tudjuk, hogy diagnosztizálni.

419
00:18:06,729 --> 00:18:09,390
Emlékezzünk az utolsó alkalom, hogy ha
a Chrome, a készülék,

420
00:18:09,390 --> 00:18:11,870
vagy akár a Mac vagy PC,
megy a fejlesztői menü

421
00:18:11,870 --> 00:18:14,650
és megy a Developer Tools
opció, amely valószínűleg akkor már

422
00:18:14,650 --> 00:18:16,850
nem sokat használt, vagy soha.

423
00:18:16,850 --> 00:18:20,780
És ha majd elmegyek Hálózat
és újratölti az oldalt,

424
00:18:20,780 --> 00:18:24,110
nézzük valóban nézd meg a HTTP
kéri, hogy tesznek.

425
00:18:24,110 --> 00:18:28,400
>> Úgy néz ki, mint az hello.html
Valóban OK, így a 200-at.

426
00:18:28,400 --> 00:18:30,630
De cat.jpg a 403.

427
00:18:30,630 --> 00:18:31,650
Tehát ez nem a 404-es.

428
00:18:31,650 --> 00:18:33,490
A fájl valószínűleg létezik.

429
00:18:33,490 --> 00:18:35,250
403. azt tilos.

430
00:18:35,250 --> 00:18:37,790
Szóval ez egy kicsit zavaró.

431
00:18:37,790 --> 00:18:42,340
Én megyek vissza
az én terminál ablak.

432
00:18:42,340 --> 00:18:43,700
Hadd nagyításhoz itt.

433
00:18:43,700 --> 00:18:44,750
És hadd tegye egy ls.

434
00:18:44,750 --> 00:18:46,430
Van ugyanezen fájlokat.

435
00:18:46,430 --> 00:18:49,410
>> Most én egy ls-l,
amit már valószínűleg

436
00:18:49,410 --> 00:18:53,350
korábban használt, hogy nézd meg a fájl
méretek talán vagy időbélyeget.

437
00:18:53,350 --> 00:18:55,590
És látunk egy csomó
elsöprő információ.

438
00:18:55,590 --> 00:18:57,040
Vegyük észre, néhány részletet.

439
00:18:57,040 --> 00:19:01,660
Itt van hello.html ebben
sor itt és itt cat.jpg.

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

441
00:19:02,934 --> 00:19:05,850
És ez csak a készülék pedig
felhasználóbarát kiemelve JPEG

442
00:19:05,850 --> 00:19:07,380
a lila, mint ez.

443
00:19:07,380 --> 00:19:11,470
De mi mást más mellett
a fájl mérete és a fájl nevét?

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

445
00:19:13,438 --> 00:19:14,754
>> KÖZÖNSÉG: [hallható].

446
00:19:14,754 --> 00:19:16,920
DAVID J MALAN: Igen, van
két R itt.

447
00:19:16,920 --> 00:19:20,170
Figyeljük meg, mi hello.html már folyik.

448
00:19:20,170 --> 00:19:24,050
Így kiderül, hogy a nevét
ez a könyvtár nyilvános fontos.

449
00:19:24,050 --> 00:19:26,400
Bármi ebben a könyvtárban
célja, hogy nyilvános.

450
00:19:26,400 --> 00:19:28,790
De ez nem elég
csak csepp a fájlokat ott.

451
00:19:28,790 --> 00:19:31,480
Azt is meg kell változtatni
A mód a fájlok,

452
00:19:31,480 --> 00:19:35,180
változtatni a jogosultságait
a fájl nem proaktív

453
00:19:35,180 --> 00:19:37,650
az alapértelmezett beállítás,
amely szerint csak tudok olvasni

454
00:19:37,650 --> 00:19:39,220
és írni, én pedig a tulajdonos.

455
00:19:39,220 --> 00:19:43,540
Azt akarom, hogy az egész világ, hogy mindenki
tudja olvasni a fájlt, hogy úgy mondjam.

456
00:19:43,540 --> 00:19:44,950
Olvasd csak azt jelenti megtekinthesse.

457
00:19:44,950 --> 00:19:49,780
>> És valóban, ahogy látni fogod a probléma
meghatározott hét, ez az, amit ezek az R átlag.

458
00:19:49,780 --> 00:19:53,160
Ez a két R átlag bárki
máshol a világon is olvasni,

459
00:19:53,160 --> 00:19:55,300
különösen most, hogy
hogy ebben a könyvtárban.

460
00:19:55,300 --> 00:19:59,620
Így a legegyszerűbb módja annak, hogy erősít ez, hogy
megy a gyors, és nem chmod a változás

461
00:19:59,620 --> 00:20:05,580
mód, majd tegye a + r, összesen,
mindenki, minden, és r olvasási,

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

463
00:20:07,944 --> 00:20:10,360
Semmi sem történik, ami
általában egy jó dolog.

464
00:20:10,360 --> 00:20:13,850
Így ls-l again-- most
nézzük meg cat.jpg.

465
00:20:13,850 --> 00:20:15,750
És ez az engedély
Úgy tűnik, hogy megváltozott.

466
00:20:15,750 --> 00:20:18,670
Mellesleg, ha egy
hiba, és, például,

467
00:20:18,670 --> 00:20:23,210
csak tette your-- nem tudom-- esszé
nyilvánosan hozzáférhető véletlenül,

468
00:20:23,210 --> 00:20:25,480
akkor nem az ellenkezőjét, a chmod-r.

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

470
00:20:25,909 --> 00:20:28,200
Bár őszintén szólva, nem kellene
legyen az állami könyvtárban

471
00:20:28,200 --> 00:20:29,760
egyébként, ha ez a probléma.

472
00:20:29,760 --> 00:20:32,475
>> Tehát most menjünk vissza
a böngésző és a reload.

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

474
00:20:32,904 --> 00:20:34,820
És megyek, hogy kattintson
A kis Szellemirtók

475
00:20:34,820 --> 00:20:38,030
szimbólum egyértelmű, hogy egy részét a
képernyőn, így láthatjuk az új kéréseket.

476
00:20:38,030 --> 00:20:40,630
És valóban, itt van
Grump Cat előtti.

477
00:20:40,630 --> 00:20:43,010
De ami még fontosabb,
Technikailag van

478
00:20:43,010 --> 00:20:45,565
a szám 200, ami
azt jelenti, hogy megvan az OK gombra.

479
00:20:45,565 --> 00:20:47,190
Rendben, szóval minden szép és jó.

480
00:20:47,190 --> 00:20:48,940
De mi nem így
legjobb weboldalak

481
00:20:48,940 --> 00:20:51,967
sem fogunk próbálni túl nehéz
hogy a fanciest weboldalak ma.

482
00:20:51,967 --> 00:20:54,550
De nézzük, legalább nem valami
szuper ismerős előtt csörgő

483
00:20:54,550 --> 00:20:56,030
ki néhány más címkéket.

484
00:20:56,030 --> 00:20:58,470
Tegyük fel, hogy én nem csak akar egy macska van.

485
00:20:58,470 --> 00:21:02,530
Tegyük fel, hogy tényleg akarom ezt
macska linkelni valamit.

486
00:21:02,530 --> 00:21:07,210
>> Én is, például
nem valami ilyesmi.

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

488
00:21:08,580 --> 00:21:12,890
a horgony href számára
hyper referencia equals--

489
00:21:12,890 --> 00:21:17,440
és nézzük csak csinál valamit
mint www.google.com bezár

490
00:21:17,440 --> 00:21:19,540
idézet záró zárójel.

491
00:21:19,540 --> 00:21:22,000
És most keresni macskák.

492
00:21:22,000 --> 00:21:23,520
Zárja horgony tag.

493
00:21:23,520 --> 00:21:26,760
Tehát ez csak egy fajta
Az alapvetően új részlet.

494
00:21:26,760 --> 00:21:28,190
A címke természetesen más.

495
00:21:28,190 --> 00:21:31,770
Ez a név a horgony
href vagy hiper hivatkozást.

496
00:21:31,770 --> 00:21:35,269
>> De ami még fontosabb, van
ez szintaktikai funkciót itt.

497
00:21:35,269 --> 00:21:37,810
Ez az, amit mi kezdjük hívás
Nem tag, hanem egy tulajdonság.

498
00:21:37,810 --> 00:21:40,830
És egy tulajdonság van valami,
módosítja a viselkedését a címke.

499
00:21:40,830 --> 00:21:45,400
És ez a tulajdonság, href, eszközök
módosítja a viselkedését e horgony

500
00:21:45,400 --> 00:21:48,430
hogy amikor valaki rákattint,
megy erre az URL itt.

501
00:21:48,430 --> 00:21:50,330
És persze, hogy a Google URL.

502
00:21:50,330 --> 00:21:53,951
>> Eközben mi ez
szöveg itt lesz?

503
00:21:53,951 --> 00:21:55,950
Nos, lesz
amit az ember valójában

504
00:21:55,950 --> 00:21:58,470
látja, mint az aláhúzott
link, ennyire egyszerű.

505
00:21:58,470 --> 00:21:59,220
Így próbáljuk meg.

506
00:21:59,220 --> 00:21:59,980
Hadd menteni.

507
00:21:59,980 --> 00:22:01,650
Én mindig hello.html.

508
00:22:01,650 --> 00:22:05,360
De a verzió online, látni fogod
a tényleges fájlnevek mi előre elkészített.

509
00:22:05,360 --> 00:22:06,805
Hadd menjek előre, és töltse be újra.

510
00:22:06,805 --> 00:22:08,680
És most ez egy nagyon
underwhelming oldal is.

511
00:22:08,680 --> 00:22:10,910
De ha felett lebeg there--
és ez egy kicsit kicsi,

512
00:22:10,910 --> 00:22:13,576
de-- láthatjuk az alján
bal sarkában a képernyő,

513
00:22:13,576 --> 00:22:15,242
ez valóban fog google.com.

514
00:22:15,242 --> 00:22:19,280
És ha rákattintok, hogy ez lesz
habverővel nekem az utat a tényleges Google.

515
00:22:19,280 --> 00:22:22,610
>> Vegyük észre, itt egy lehetőség
kizsákmányolás, mint egy félre.

516
00:22:22,610 --> 00:22:25,150
És akkor jön vissza a többi
kérdései biztonság nemsokára.

517
00:22:25,150 --> 00:22:29,290
Mert itt van ez a kettősség
között, ahová megy, és amit mondasz,

518
00:22:29,290 --> 00:22:34,722
meg tudná csinálni valami hasonló
this-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, és most, ha én reload
mentése után, hogy a lap,

520
00:22:37,134 --> 00:22:38,800
úgy néz ki, én megyek a Google.

521
00:22:38,800 --> 00:22:40,966
De nincs ok azt
kell, hogy a Google, ugye?

522
00:22:40,966 --> 00:22:47,460
Én ténylegesen menni valami hasonló
badguy.com, töltse be újra az oldalt itt.

523
00:22:47,460 --> 00:22:49,750
És észre, még mindig úgy néz ki, mint a Google.

524
00:22:49,750 --> 00:22:52,020
És csak akkor, ha én vagyok az éles
ahhoz, hogy felett lebeg ide

525
00:22:52,020 --> 00:22:54,770
látom ez is fog
megy egy másik helyre.

526
00:22:54,770 --> 00:22:57,400
>> Tehát, ha valaha is ütött
egy e-mailt, különösen

527
00:22:57,400 --> 00:22:59,610
egyet a Paypal, vagy
látszólag Paypal

528
00:22:59,610 --> 00:23:01,830
kéri, hogy jelentkezzen be
a számla, ez

529
00:23:01,830 --> 00:23:06,380
Ezért soha ne
valaha linkekre kattintva e-maileket,

530
00:23:06,380 --> 00:23:07,930
őszintén szólva, minden kapcsolatot az e-maileket.

531
00:23:07,930 --> 00:23:10,380
Ha tudja, hogy a tényleges
pénzt Paypal vagy banki

532
00:23:10,380 --> 00:23:14,250
Amerika vagy Fidelity vagy bármely
weboldal, kézzel írja be.

533
00:23:14,250 --> 00:23:17,530
Mert nézd, milyen egyszerű, hogy
trükk, hogy valaki a mi bemutató

534
00:23:17,530 --> 00:23:18,526
úgy néz ki, mint egy link.

535
00:23:18,526 --> 00:23:20,400
De valójában lehetett
megy teljesen bárhová.

536
00:23:20,400 --> 00:23:23,301
>> És még sokkal nagyobb
fenyegetések, mint ez.

537
00:23:23,301 --> 00:23:25,300
Sőt, ez egy kicsit
érintőjének most, de egy

538
00:23:25,300 --> 00:23:28,430
A legjobbak, amit valaha láttam
amelyet azóta lezárták,

539
00:23:28,430 --> 00:23:34,060
valaki vezette az embereket,
to-- így ez lehet mondani,

540
00:23:34,060 --> 00:23:37,660
Kattintson ide, hogy jelentkezzen be
számla, bankszámla.

541
00:23:37,660 --> 00:23:40,985
És ez volt a Nyugat Bank.

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

543
00:23:43,030 --> 00:23:44,250
>> Szóval valaki megvette ezt.

544
00:23:44,250 --> 00:23:47,090
És ez egy kicsit könnyebb, hogy
ez egy fekete-fehér egymástól font nagyítva

545
00:23:47,090 --> 00:23:49,190
az egy 30 méteres kivetítő.

546
00:23:49,190 --> 00:23:51,720
De amikor ez a kis méret egy
e-mail, hogy te fogadó,

547
00:23:51,720 --> 00:23:54,690
ez úgy néz ki, mint a bankofthewest.com,
nem bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
amelyet valaki fizetett 10 $ vásárolni.

549
00:23:58,230 --> 00:24:00,840
És akkor ez vezette őket, hogy a
megegyezik az egyes rossz honlapján.

550
00:24:00,840 --> 00:24:05,540
>> És látni fogod too-- valójában tehetünk
this-- ha elmegyek az aktuális weboldal,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, ismét,
visszahívással utoljára

552
00:24:10,335 --> 00:24:13,210
hogy ha ez a weboldal, és
kíváncsi, hogy hogyan működik,

553
00:24:13,210 --> 00:24:15,610
akkor biztosan menni
Chrome fejlesztői eszközök.

554
00:24:15,610 --> 00:24:18,890
És láthatjuk az összes
HTML szépen formázott ott.

555
00:24:18,890 --> 00:24:20,890
>> De még az a pont,
Ön cam-- hadd zárja

556
00:24:20,890 --> 00:24:24,760
this-- mehetsz megtekintése
Fejlesztő Forrás megtekintése.

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

558
00:24:25,770 --> 00:24:28,350
Miért nem csak másolni
minden, és akkor én

559
00:24:28,350 --> 00:24:31,630
menj be az én kis gedit ablak
itt, és a saját weboldal.

560
00:24:31,630 --> 00:24:33,210
Mentsük a hello.html.

561
00:24:33,210 --> 00:24:36,770
És valószínűleg ez lesz a szünet,
mert ez nem ilyen egyszerű általában.

562
00:24:36,770 --> 00:24:41,590
De most, ha én újratölti a saját oldalra
Saját CS50 Appliance és hit reload,

563
00:24:41,590 --> 00:24:42,990
OK, néhány dolgot tört.

564
00:24:42,990 --> 00:24:45,750
De én nagyon közel van az
saját banki honlapján, igaz?

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

566
00:24:46,570 --> 00:24:47,370
>> [Nevetés]

567
00:24:47,370 --> 00:24:49,210
>> DAVID J MALAN: -I
Nem actually-- és

568
00:24:49,210 --> 00:24:52,210
tudom, hogy van valaki, aki
valójában kattintson az alábbi linkeket is.

569
00:24:52,210 --> 00:24:54,864
Tehát egyértelműen, néhány dolgot tört.

570
00:24:54,864 --> 00:24:56,780
De ez fog vezetni
minket egy vita,

571
00:24:56,780 --> 00:25:00,810
szükségtelenül most, hogy milyen
CSS, Cascading Style Sheets, vagy,

572
00:25:00,810 --> 00:25:03,410
és hogyan, hogy tényleg
Töltse le a másik HTML fájlok

573
00:25:03,410 --> 00:25:06,140
és JPEG fájlok GIF fájlokat
A honlapon is használni.

574
00:25:06,140 --> 00:25:07,960
De minden, ami teljesíthető.

575
00:25:07,960 --> 00:25:11,110
De ez tényleg attól függ, hogy
ezek nagyon egyszerű heurisztika.

576
00:25:11,110 --> 00:25:14,450
>> Így most nézzük csak átlássa a
néhány további példát a HTML

577
00:25:14,450 --> 00:25:16,680
Csak hogy érzékeltessem
A mi mást lehet csinálni.

578
00:25:16,680 --> 00:25:18,670
Például, ez list.html.

579
00:25:18,670 --> 00:25:23,240
Tegyük fel, hogy akartam, hogy egy weboldal
egy listát a házak a quad.

580
00:25:23,240 --> 00:25:28,960
Lehet használni a ul tag rendezetlen
listából, majd a lista elem gyermek

581
00:25:28,960 --> 00:25:33,760
majd navigálhat over-- vagy lista,
rather-- a házak kérdésre.

582
00:25:33,760 --> 00:25:36,080
>> És ha kinyitom ezt fel, csináljuk ezt.

583
00:25:36,080 --> 00:25:40,670
Menjünk nem hello.html,
de list.html.

584
00:25:40,670 --> 00:25:42,160
A fene egye meg.

585
00:25:42,160 --> 00:25:43,000
Hogyan lehet ezt orvosolni?

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

587
00:25:45,679 --> 00:25:47,220
Ez ugyanaz a kérdés, mint korábban, igaz?

588
00:25:47,220 --> 00:25:52,510
Hadd tegye chmod-- oops--
chmod a + r a list.html.

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

590
00:25:54,610 --> 00:25:59,610
És most, ha megyek vissza a böngésző
és kattintson a Reload, ott van.

591
00:25:59,610 --> 00:26:02,360
Tehát, ha valaha is akartam, hogy
egy felsorolás, akkor erre.

592
00:26:02,360 --> 00:26:06,210
Ha azt szeretné, hogy szuper divatos, és
rendezett lista, nem egy rendezetlen lista,

593
00:26:06,210 --> 00:26:10,170
módosítani azokat, ol, újratölti az oldalt, és
most a böngésző létszáma az Ön számára.

594
00:26:10,170 --> 00:26:11,241
>> Mi mást tehetnénk?

595
00:26:11,241 --> 00:26:13,990
Nos, egy pár others-- ha
megvan hosszú bekezdésében text--

596
00:26:13,990 --> 00:26:15,698
például, néhány
Latin szöveget, mint this--

597
00:26:15,698 --> 00:26:20,730
és azt szeretné, hogy külön bekezdésben,
nyitott p, p közel a paragrafus.

598
00:26:20,730 --> 00:26:22,010
És újra meg újra és újra.

599
00:26:22,010 --> 00:26:26,600
És ha én most megnyitni ezt a fájlt,
paragraphs.html, nos, ez a

600
00:26:26,600 --> 00:26:27,570
kezd idegesítő.

601
00:26:27,570 --> 00:26:34,320
Tehát most menjünk vissza a
azonnali, a chmod + r csillag .html--

602
00:26:34,320 --> 00:26:36,099
Egy szép kis wild card hogy úgy mondjam.

603
00:26:36,099 --> 00:26:37,890
Meg kell oldani az összes
ezeket a problémákat nekem.

604
00:26:37,890 --> 00:26:38,990
Nézzük reload.

605
00:26:38,990 --> 00:26:40,500
Van három bekezdés.

606
00:26:40,500 --> 00:26:42,930
>> És most menjünk előre
és nyit egy másik.

607
00:26:42,930 --> 00:26:44,310
Mit szólnál asztalra?

608
00:26:44,310 --> 00:26:46,440
Észre fogod venni, asztal néz
egy kicsit bonyolultabb.

609
00:26:46,440 --> 00:26:49,110
De ez ugyanaz ötletem
nyitott tag, nyitott tag,

610
00:26:49,110 --> 00:26:51,360
nyitott, nyitott, nyitott, zárt tag, nyitott tag.

611
00:26:51,360 --> 00:26:54,410
És ezek történetesen állni
asztal, amelynek a határát láthatóan

612
00:26:54,410 --> 00:26:58,500
lesz a vastagsága 1-- bármilyen
hogy means-- táblázatsor, asztal

613
00:26:58,500 --> 00:27:00,320
adat, ami azt jelenti, egy cellába.

614
00:27:00,320 --> 00:27:03,840
És ha visszamegyek a böngésző
itt és menj table.html,

615
00:27:03,840 --> 00:27:05,840
akkor látni valamit
mint ez, undorító.

616
00:27:05,840 --> 00:27:07,840
De mi lesz a lényeg
ahol tudunk valójában

617
00:27:07,840 --> 00:27:09,260
a dolgok szebb, mint ezt.

618
00:27:09,260 --> 00:27:10,530
>> Hadd kikötik most.

619
00:27:10,530 --> 00:27:11,870
Van csokor több tag.

620
00:27:11,870 --> 00:27:15,225
És HTML csodálatos, hogy vegye fel
mert őszintén szólva, csak annyit kell tennie,

621
00:27:15,225 --> 00:27:17,600
A megnézi meglévő internetes oldalak
amellyel ismeri.

622
00:27:17,600 --> 00:27:20,340
És te, mint ó, ez hogyan
tették ezt esztétikailag.

623
00:27:20,340 --> 00:27:23,159
>> Vagy meg lehet tekinteni minden online
forrás, hogy hogyan működik a HTML,

624
00:27:23,159 --> 00:27:25,700
és látni fogja, hogy van egy
teljes szókincse más címkéket.

625
00:27:25,700 --> 00:27:30,110
De az egyszerű mentális modell
egyedül, hogy szinte minden tag megnyitja

626
00:27:30,110 --> 00:27:33,620
úgy kell lezárni, ez tényleg
nem elég tanítani magát

627
00:27:33,620 --> 00:27:36,950
HTML után érthető
ezek alapgondolata címkék

628
00:27:36,950 --> 00:27:40,520
és attribútumok és a jólformáltsági
hogy már beszéltünk,

629
00:27:40,520 --> 00:27:44,697
záró semmit, talán nyitott
hogy mi ne keverjük össze a böngésző.

630
00:27:44,697 --> 00:27:46,780
Úgyhogy most ezt a
egy sokkal érdekesebb szint

631
00:27:46,780 --> 00:27:48,100
megy a tényleges.

632
00:27:48,100 --> 00:27:51,095
És menjünk a Mac-emet
itt, a google.com.

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

634
00:27:52,280 --> 00:27:54,020
És most notice-- csináljuk.

635
00:27:54,020 --> 00:27:57,280
Én gong menni
Beállítások Keresési beállítások.

636
00:27:57,280 --> 00:28:01,070
Azt akarom, hogy kapcsolja ki a bosszantó pillanat
eredmények dolog, ha azonnal

637
00:28:01,070 --> 00:28:02,450
reagál, a gépelés.

638
00:28:02,450 --> 00:28:05,300
Csináljuk ezt a régebbi iskola olyan
valójában mi folyik itt.

639
00:28:05,300 --> 00:28:08,260
>> Szóval megyek, hogy mentse a
Google beállításokat.

640
00:28:08,260 --> 00:28:11,160
És most notice-- megyek
keresni valami, mint a macskák.

641
00:28:11,160 --> 00:28:14,500
És ez még mindig csinál auto
teljes itt, de alapuló dolgok

642
00:28:14,500 --> 00:28:15,970
ember írt a múltban.

643
00:28:15,970 --> 00:28:17,490
Vegyük észre, hogy mi fog történni.

644
00:28:17,490 --> 00:28:20,272
>> Az URL a pillanatban
ez, csak google.com.

645
00:28:20,272 --> 00:28:22,650
És technikailag, ez dőlt.

646
00:28:22,650 --> 00:28:25,910
A Google csak a megtakarítás jellegű
és nem mutatja nekünk.

647
00:28:25,910 --> 00:28:30,400
Ők megmutatták https, csak
hogy szuper megnyugtató, hogy mi vagyunk

648
00:28:30,400 --> 00:28:32,850
a biztonságos és titkosított oldalt.

649
00:28:32,850 --> 00:28:35,690
>> Szóval hadd menjen előre, és keressen a macskák.

650
00:28:35,690 --> 00:28:37,670
Most ez van igazán
elsöprő gyorsan.

651
00:28:37,670 --> 00:28:39,470
Nézd meg a hossza az URL-t.

652
00:28:39,470 --> 00:28:43,070
De kiderül, hogy a legtöbb ez a cucc
Az URL valóban elég használhatatlan.

653
00:28:43,070 --> 00:28:45,320
Fogom kezdeni törlése
dolog, amit nem értek.

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

655
00:28:46,560 --> 00:28:47,360
Látom a macskák.

656
00:28:47,360 --> 00:28:48,470
Megértem a macskák.

657
00:28:48,470 --> 00:28:50,380
Én nem tudom, miért a macskák vannak újra.

658
00:28:50,380 --> 00:28:52,620
Én tényleg nem tudom
mi ez a hülyeség.

659
00:28:52,620 --> 00:28:56,030
Szóval csak fog tartani
kiemelve és törlése dolgokat

660
00:28:56,030 --> 00:28:59,905
hogy én nem értem,
desztilláló az URL-t, csak ezt.

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

662
00:29:00,920 --> 00:29:02,270
>> Most hadd kap be újra.

663
00:29:02,270 --> 00:29:03,814
Úgy tűnik, a Google még mindig működik.

664
00:29:03,814 --> 00:29:06,980
Tehát valamilyen oknál fogva, ők hozzáadása
Sok dolog, hogy az URL-alapból.

665
00:29:06,980 --> 00:29:09,000
De ez nem feltétlenül szükséges.

666
00:29:09,000 --> 00:29:10,340
Tehát mi jó ebben?

667
00:29:10,340 --> 00:29:13,630
Nos, hadd menjen előre, és
megnyitja Chrome Inspector.

668
00:29:13,630 --> 00:29:15,960
Van egy kis egér parancsikont érte.

669
00:29:15,960 --> 00:29:17,360
>> Lépjen a Hálózat fülre.

670
00:29:17,360 --> 00:29:19,340
És most hadd töltse be
Ezen az oldalon még egyszer.

671
00:29:19,340 --> 00:29:20,280
És én, aki Shift.

672
00:29:20,280 --> 00:29:22,520
Mellesleg, a böngészők
általában a cache vagy menteni

673
00:29:22,520 --> 00:29:24,697
információ csak a hatékonyság kedvéért.

674
00:29:24,697 --> 00:29:27,280
De általában, gazdaság Shift és
újratöltés fogja kényszeríteni minden

675
00:29:27,280 --> 00:29:28,994
kezdeni az elejétől.

676
00:29:28,994 --> 00:29:30,410
És ez az, amit csinálni akarok itt.

677
00:29:30,410 --> 00:29:33,550
>> És észre mindezen
sorok csak megjelent.

678
00:29:33,550 --> 00:29:37,920
Kiderül, hogy az adott internetes
oldal, ott lehet, hogy csak egy fájlt

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- vagy ott
Lehet, hogy 52, mint ebben az esetben.

680
00:29:43,500 --> 00:29:45,820
Amikor meglátogatom google.com,
látszólag, a böngésző

681
00:29:45,820 --> 00:29:49,650
indul 52 különálló HTTP kéréseket.

682
00:29:49,650 --> 00:29:50,520
Miért van ez?

683
00:29:50,520 --> 00:29:53,380
>> Nos, nézzük meg, mi van benne
E weboldal felfelé tetején.

684
00:29:53,380 --> 00:29:55,620
Ott nem csak a szöveg,
de van a tényleges kép

685
00:29:55,620 --> 00:29:57,130
A macskák több mint a jobb.

686
00:29:57,130 --> 00:29:59,110
Van egy színes logót itt a bal oldalon.

687
00:29:59,110 --> 00:30:01,750
Van minden ilyen ikon
egy mikrofon, és így tovább.

688
00:30:01,750 --> 00:30:05,130
Van egy csomó darab, az épület
blokkok, karcolás darab, ha úgy tetszik,

689
00:30:05,130 --> 00:30:06,250
az ezen a weboldalon.

690
00:30:06,250 --> 00:30:10,310
És mi a böngésző csinál alapján
szerzés a legelső fájl, amely

691
00:30:10,310 --> 00:30:16,180
ez a sor itt, akkor lényegében
iterációjával át a HTML felső

692
00:30:16,180 --> 00:30:19,880
lefelé, balról jobbra, keres
dolgok, mint a kép a címkék vagy más címkék

693
00:30:19,880 --> 00:30:23,160
amelyek idéző ​​dokumentum és
ha látja őket, megy, és tölti le őket

694
00:30:23,160 --> 00:30:26,050
HTTP, megvalósítható az egész
boríték metafora,

695
00:30:26,050 --> 00:30:29,670
majd megjeleníti azokat a
megfelelő helyen, a weboldalon.

696
00:30:29,670 --> 00:30:33,370
>> Vegyük észre, itt, ha én összpontosítani
Az első dobás, keresés macskák,

697
00:30:33,370 --> 00:30:37,090
észre, hogy valóban ez a HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
És sajnos, a Google
Chrome most verzió 39

699
00:30:41,690 --> 00:30:45,110
a fajta dumbing dolgokat, és
nem mutatja meg nekünk a tényleges fejléceket.

700
00:30:45,110 --> 00:30:49,680
De mi valóban küldött egy kérés
a nem vágás, hanem / keresés? q = macskák.

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

702
00:30:52,830 --> 00:30:54,340
>> Nos, miért olyan fontos ez?

703
00:30:54,340 --> 00:30:57,110
Nos, megyek következtetni
ebből, hogy ha a Google

704
00:30:57,110 --> 00:31:01,520
támogatja lekérdezések ebben a formában, hogy miért
Nem én végre a saját kereső

705
00:31:01,520 --> 00:31:06,420
motor CS50, de csak az első
end, csak a grafikus felhasználói felület.

706
00:31:06,420 --> 00:31:09,610
És mi kiszervezik a back end,
a tényleges keresési eredményeket a Google.

707
00:31:09,610 --> 00:31:10,510
>> Szóval, hogyan tudom ezt megtenni?

708
00:31:10,510 --> 00:31:13,820
Nos, hadd menjen be a gedit itt.

709
00:31:13,820 --> 00:31:19,180
És hadd menjen előre, és nyissa meg
fel, mondjuk, egy új fájlt.

710
00:31:19,180 --> 00:31:22,280
És fogom menteni ezt
átmenetileg search-0.html.

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

712
00:31:25,111 --> 00:31:27,860
És akkor végül, akkor gyorsan
előre, hogy az általam előre elkészített.

713
00:31:27,860 --> 00:31:30,190
>> És fogok
gyorsan felkap doc típus

714
00:31:30,190 --> 00:31:33,840
html nyitva tartó html
záró zárójel html.

715
00:31:33,840 --> 00:31:38,390
Akkor fogok csinálni fej
szoros fej nyitott cím CS50

716
00:31:38,390 --> 00:31:40,150
Keresés helyett a Google kereső.

717
00:31:40,150 --> 00:31:43,480
Itt lent megyek, hogy
a test, ide közel szervezetben.

718
00:31:43,480 --> 00:31:45,835
És most kell CS50 Search.

719
00:31:45,835 --> 00:31:47,710
És valóban, hadd
építeni ezt fokozatosan.

720
00:31:47,710 --> 00:31:51,043
Én megyek előre, és zárja be ezt, és
ténylegesen azt a nyilvános könyvtárban.

721
00:31:51,043 --> 00:31:52,730
Így adja nekem csak egy pillanat.

722
00:31:52,730 --> 00:31:55,390
search-0.html-- megyek
időben hívják search.html.

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

724
00:31:56,600 --> 00:31:59,750
Megyek chmod + r, hogy egy search.html.

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

726
00:32:01,072 --> 00:32:02,280
És most fogom kinyitni.

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

728
00:32:03,224 --> 00:32:04,390
Rendben, hogy gyors volt.

729
00:32:04,390 --> 00:32:06,800
De a cél csak az volt
hogy minket a pont

730
00:32:06,800 --> 00:32:09,630
Az, hogy ilyen szöveg
nevű fájlt search.html.

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

732
00:32:10,940 --> 00:32:12,790
Így nem sok nézni még.

733
00:32:12,790 --> 00:32:16,970
Sőt, ha jól megy a böngésző, és
menj search.html, hogy ez minden.

734
00:32:16,970 --> 00:32:17,720
De tudod mit?

735
00:32:17,720 --> 00:32:19,000
Én is egy kicsit cifrább.

736
00:32:19,000 --> 00:32:22,710
Olvastam egy könyvben, hogy van
A fejléc címke nevű h1.

737
00:32:22,710 --> 00:32:26,100
És én megyek előre, és
használja, hogy a nyílt és közeli h1 h1.

738
00:32:26,100 --> 00:32:27,220
Az oldal újratöltődik.

739
00:32:27,220 --> 00:32:29,600
És most ez a nagyobb és merészebb,
nem olyan érdekes,

740
00:32:29,600 --> 00:32:32,399
de legalább szerkezetileg
sokkal érdekesebb.

741
00:32:32,399 --> 00:32:33,940
De most hadd mutassam be egy másik tag.

742
00:32:33,940 --> 00:32:36,500
Kiderült, van egy form tag.

743
00:32:36,500 --> 00:32:38,400
És hadd zárja a címkét.

744
00:32:38,400 --> 00:32:40,830
És kiderül, ott a
bemeneti címke, amely

745
00:32:40,830 --> 00:32:44,600
attribútummal nevű típust, amely
az adat típusa mező,

746
00:32:44,600 --> 00:32:45,200
ha úgy tetszik.

747
00:32:45,200 --> 00:32:47,050
És lesz típusú szöveget.

748
00:32:47,050 --> 00:32:52,200
És annak értéke lesz
hogy CS50 Search.

749
00:32:52,200 --> 00:32:53,850
Bezárás tag.

750
00:32:53,850 --> 00:32:57,100
És ott lesz fogalma sem
nyitó és záró külön címkékkel.

751
00:32:57,100 --> 00:33:00,300
>> Hadd menjek vissza ide, és
hogy mi folyik itt, töltse be újra.

752
00:33:00,300 --> 00:33:01,380
Első érdekes.

753
00:33:01,380 --> 00:33:02,950
Úgy néz ki, hogy ez egy szöveges mező.

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

755
00:33:04,080 --> 00:33:06,999
És tényleg, én nem akartam
hogy egy érték van még.

756
00:33:06,999 --> 00:33:10,040
Hadd menjek vissza, és valójában kap
eltűnjön ez az érték, hogy ez egyszerű.

757
00:33:10,040 --> 00:33:12,939
Ahelyett, hogy az érték, amit akartam
hogy ez a dolog volt a neve.

758
00:33:12,939 --> 00:33:15,230
És nem tudom, mi ez,
úgyhogy jöjjön vissza azt.

759
00:33:15,230 --> 00:33:18,270
>> De lent, azt akarom,
hogy nem input type = benyújtására.

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

761
00:33:19,840 --> 00:33:22,120
És ez az érték lesz CS50 Search.

762
00:33:22,120 --> 00:33:24,850
És majd meglátjuk, miért
költözött az értéket e.

763
00:33:24,850 --> 00:33:28,900
Mikor reload, úgy tűnik, hogy most már
a kezdetektől a saját kereső

764
00:33:28,900 --> 00:33:30,820
motor, szuper undorító,
bár őszintén szólva, ez

765
00:33:30,820 --> 00:33:34,260
Nem messze attól, amit dobás
A Google az alapértelmezett oldal úgy néz ki, mint a.

766
00:33:34,260 --> 00:33:37,950
>> Ha elmegyek itt, most beírhat
macskák és remélhetőleg kattintson a Keresés gombra.

767
00:33:37,950 --> 00:33:40,380
De én nem teljesen kész még,
mert én még nem hajtották végre,

768
00:33:40,380 --> 00:33:41,045
nyilván egy adatbázisban.

769
00:33:41,045 --> 00:33:42,940
Nem mászott a
internetes keresési eredményeket.

770
00:33:42,940 --> 00:33:44,840
Szóval kell szervezniük, hogy a Google-nak.

771
00:33:44,840 --> 00:33:46,290
Szóval, hogyan tudom ezt megtenni?

772
00:33:46,290 --> 00:33:49,170
>> Nos, először is azt
kell hozzá és a cselekvés

773
00:33:49,170 --> 00:33:58,460
tulajdonít a form tag azt
a http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
És tudom, hogy csak attól,
következtethet odafigyelnek

775
00:34:01,180 --> 00:34:02,505
saját URL.

776
00:34:02,505 --> 00:34:03,380
És most, hogy egy tipp.

777
00:34:03,380 --> 00:34:09,090
Mit kell ez a szöveg a területen valószínűleg
nevezni, hogy hol jöttünk

778
00:34:09,090 --> 00:34:09,754
előtti?

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

780
00:34:11,896 --> 00:34:13,290
>> KÖZÖNSÉG:? Q.

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

782
00:34:14,370 --> 00:34:17,800
És valójában nem kell kérdés
jelölje kiderül, de q valóban azt,

783
00:34:17,800 --> 00:34:20,489
q lekérdezés valószínűleg a
alapértelmezés, csak azért, mert ez

784
00:34:20,489 --> 00:34:23,060
amit Larry és Sergey
jött ki évekkel ezelőtt.

785
00:34:23,060 --> 00:34:24,739
Tehát most hadd töltse be újra ezt az oldalt.

786
00:34:24,739 --> 00:34:26,409
Ez nem úgy néz ki minden más.

787
00:34:26,409 --> 00:34:28,120
De most nézzük, mi történik.

788
00:34:28,120 --> 00:34:32,360
>> Ha én írja macskák és kattintással
CS50 keresése és elengedte,

789
00:34:32,360 --> 00:34:35,770
észre kapok felvert
el a tényleges Google.

790
00:34:35,770 --> 00:34:38,150
Most, a Google, hogy egy kicsit
bosszantó az, hogy ők

791
00:34:38,150 --> 00:34:41,877
mellékelik egy további paramétert is
ha úgy tetszik, az URL-t.

792
00:34:41,877 --> 00:34:43,960
Ez minden esemény
automatikusan a Google oldalán.

793
00:34:43,960 --> 00:34:48,730
>> A fontos az, hogy úgy tűnik,
hogy létre ezt a kérést itt.

794
00:34:48,730 --> 00:34:50,179
És valóban, ez az, ami történik.

795
00:34:50,179 --> 00:34:53,040
Ha van HTML
úgy néz ki, mint ez, ez

796
00:34:53,040 --> 00:34:57,620
egyfajta webfejlesztők jelölés
mert azt mondta, megy előre, és hozzon létre egy űrlap

797
00:34:57,620 --> 00:34:59,990
hogy ha ez be,
ez fog menni erre az URL.

798
00:34:59,990 --> 00:35:03,430
És amikor az URL biztosított
értékek a dolgok, mint q,

799
00:35:03,430 --> 00:35:05,440
nem megy csak erre az URL.

800
00:35:05,440 --> 00:35:08,210
Valójában, menjen a kérdésre
jel, majd q = macskák.

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

802
00:35:09,590 --> 00:35:13,060
Hozzáfűzése a paraméter, a
HTTP paraméter, mint ezt.

803
00:35:13,060 --> 00:35:15,590
>> És csak hogy szuper pontos,
mi is következtetni here--

804
00:35:15,590 --> 00:35:18,130
de leszek még explicit-- is
hogy a módszer szeretnék használni

805
00:35:18,130 --> 00:35:22,270
az kap, ahelyett, hogy valami hasonló
üzenetre fogunk végül látni.

806
00:35:22,270 --> 00:35:27,710
Tehát röviden, egyszerűen megértés
HTML és segítségével néhány meglehetősen egyszerű címke,

807
00:35:27,710 --> 00:35:30,610
most már kezd létrehozása
saját front end felhasználó

808
00:35:30,610 --> 00:35:32,850
felület egy keresés
motor mögött.

809
00:35:32,850 --> 00:35:34,800
>> De ez persze, elég undorító.

810
00:35:34,800 --> 00:35:37,259
Hadd valójában nyit
valamivel jobb verzió.

811
00:35:37,259 --> 00:35:39,800
Ez az egyik én készített
előre, hogy van néhány megjegyzést.

812
00:35:39,800 --> 00:35:41,900
De látni fogod, hogy én
nagyjából azt újra.

813
00:35:41,900 --> 00:35:44,150
Tehát ez már elérhető az interneten.

814
00:35:44,150 --> 00:35:48,050
És én történetesen preemptively
megy a https, csak, hogy ez egyszerű.

815
00:35:48,050 --> 00:35:50,610
>> Most pedig nyit
következő iterációs e.

816
00:35:50,610 --> 00:35:52,510
Az 1-es verzió 0 helyett.

817
00:35:52,510 --> 00:35:55,315
Mi ugrik ki téged enyhén
ebben a példában különböző?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> KÖZÖNSÉG: [hallható].

820
00:36:00,440 --> 00:36:03,020
>> Igen, van ez a szöveg igazítása központ.

821
00:36:03,020 --> 00:36:04,590
Ez egy kicsit furcsa itt.

822
00:36:04,590 --> 00:36:06,150
De ez valóban új.

823
00:36:06,150 --> 00:36:07,800
És talán kitalálni, mi fog történni.

824
00:36:07,800 --> 00:36:11,730
Ha elmegyek a böngészőm most
és látogasson el a search-1.html,

825
00:36:11,730 --> 00:36:13,090
ez majdnem ugyanaz.

826
00:36:13,090 --> 00:36:15,705
De ez egy lépéssel közelebb
hogy egy kicsit szép.

827
00:36:15,705 --> 00:36:19,150
Még mindig csúnya, de szebb, hogy a
legalább minden meg most középre.

828
00:36:19,150 --> 00:36:23,470
>> Így kiderül, hogy amit én használok
egy másik nyelv teljesen hívott

829
00:36:23,470 --> 00:36:25,680
CSS, lépcsőzetes stíluslapok.

830
00:36:25,680 --> 00:36:28,310
És CSS, őszintén szólva, kedves
Az, az én személyes véleményem,

831
00:36:28,310 --> 00:36:29,775
egy atrociously tervezett nyelv.

832
00:36:29,775 --> 00:36:33,110
Nagyon bosszantó, hogy emlékezzen
a különböző részleteket.

833
00:36:33,110 --> 00:36:38,479
De ez az, amit a stylizes
egész világhálót ma.

834
00:36:38,479 --> 00:36:39,270
Bántottam meg valakit.

835
00:36:39,270 --> 00:36:39,769
Rendben van.

836
00:36:39,769 --> 00:36:43,180
Szóval menjünk vissza, és látni
hogyan vagyunk valójában ezzel a.

837
00:36:43,180 --> 00:36:45,940
És kiderül, legalább ez
valójában egy nagyon egyszerű nyelv.

838
00:36:45,940 --> 00:36:49,470
Csak kulcs-érték párokat, tulajdonságok
és értékek, tulajdonságok és értékek.

839
00:36:49,470 --> 00:36:52,080
Sőt, itt van egy
ilyen vagyon és az érték.

840
00:36:52,080 --> 00:36:55,890
>> Egyszerűen a stílus
attribútum testemen tag

841
00:36:55,890 --> 00:37:00,360
és így ez egy értéke
szó kettőspont és egy szót sem,

842
00:37:00,360 --> 00:37:03,730
vagy a vagyon és az érték,
Én hatással lehet az esztétika

843
00:37:03,730 --> 00:37:06,210
A weboldal, nem
feltétlenül a szerkezet még,

844
00:37:06,210 --> 00:37:07,550
de az esztétika is.

845
00:37:07,550 --> 00:37:10,960
És csak a Googling körül, rájöttem,
hogy CSS, Cascading Style Sheets,

846
00:37:10,960 --> 00:37:14,170
támogatja a tulajdonság az úgynevezett
text-align, amelyek értéke

847
00:37:14,170 --> 00:37:16,980
lehet balra, jobbra, vagy középre, például.

848
00:37:16,980 --> 00:37:19,990
>> Így most, amikor reload
Az oldal, amit én kap

849
00:37:19,990 --> 00:37:22,730
volt egy középre oldal
de még mindig elég csúnya.

850
00:37:22,730 --> 00:37:25,770
Menjünk előre, és nyissa meg
fel 2-es verzióját a Search.

851
00:37:25,770 --> 00:37:28,570
És most észre tettem egy kicsit.

852
00:37:28,570 --> 00:37:33,760
Figyeljük meg, hogy itt belül, a fej
címke, nem lehet több, mint a cím.

853
00:37:33,760 --> 00:37:35,400
Sőt, van egy stílus címke.

854
00:37:35,400 --> 00:37:38,630
És ez az, ahol csak kap
kicsit zavaros látás CSS néha.

855
00:37:38,630 --> 00:37:41,971
>> Figyeljük meg, hogy úgy tűnik, hogy valami
hogy szerkezetileg nagyon különbözik.

856
00:37:41,971 --> 00:37:44,095
De itt van a neve
a címkét akarok stilizált.

857
00:37:44,095 --> 00:37:47,570
Itt vannak a régi barátok göndör
fogszabályozó és zárt zárójel.

858
00:37:47,570 --> 00:37:50,290
És akkor itt az, hogy
vagyon és az értéket.

859
00:37:50,290 --> 00:37:56,300
>> Ha betölteni ezt a fájlt, search2.html,
a végeredmény azonos.

860
00:37:56,300 --> 00:37:59,300
De ez egy lépés a jobb design.

861
00:37:59,300 --> 00:38:04,560
A faktoring ki ezt a CSS, én már
nem keverik meg a HTML.

862
00:38:04,560 --> 00:38:07,560
És valóban, ahogy látni fogjuk, én is
újra ezeket a tulajdonságokat és értékeket.

863
00:38:07,560 --> 00:38:10,420
Ha akartam tenni fürtök
rész a weboldal-központú,

864
00:38:10,420 --> 00:38:13,630
Nem kell beírni style = text-align
központ az egész hely.

865
00:38:13,630 --> 00:38:16,580
Tudom rakni egy helyen
Talán, mint felfelé a tetején.

866
00:38:16,580 --> 00:38:18,210
>> De még ez nem a legjobb design.

867
00:38:18,210 --> 00:38:21,720
Sőt, az egyik dolog, amit tanulni
ahogy többet és több időt

868
00:38:21,720 --> 00:38:25,730
webes programozás, hogy minél többet tud
moduláris rendszermagra dolgok és tényező a dolgokat

869
00:38:25,730 --> 00:38:30,610
mint .h fájlok menjünk tényező dolgokat ki,
tetszik helpers.c hadd tényező a dolgokat

870
00:38:30,610 --> 00:38:31,880
Néhány psets ezelőtt.

871
00:38:31,880 --> 00:38:34,200
Hasonlóképpen, talán mi
szeretné elérni ezt.

872
00:38:34,200 --> 00:38:37,920
>> Így hirdetmény verzió
három search.html voltam

873
00:38:37,920 --> 00:38:40,610
kitakarította a fejét
Az oldal és csak fel

874
00:38:40,610 --> 00:38:43,320
ebben, a link tag, amely
ellentétben a nevét,

875
00:38:43,320 --> 00:38:44,700
nem kapsz egy hivatkozást.

876
00:38:44,700 --> 00:38:49,150
Összeköti a másik fájl útján
egy href amelynek értéke ebben az esetben,

877
00:38:49,150 --> 00:38:51,586
a keresés-3.css

878
00:38:51,586 --> 00:38:52,960
Szóval észre megyünk gyorsan.

879
00:38:52,960 --> 00:38:54,600
De minden, amit csinálok kedves
A mozgó dolgokat.

880
00:38:54,600 --> 00:38:55,760
Hadd nyitott search-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Ott van, semmi igazán hozzá.

883
00:38:58,530 --> 00:39:02,270
Én csak a vágólapra másolni, majd új
fájlt, ugyanúgy, mint mi tényezőként dolgokat ki

884
00:39:02,270 --> 00:39:03,509
más fájlokat előtt.

885
00:39:03,509 --> 00:39:05,300
És result--
teljesen underwhelming--

886
00:39:05,300 --> 00:39:06,730
lesz pontosan ugyanaz.

887
00:39:06,730 --> 00:39:10,490
De haladunk toward-- nem, ez nem az.

888
00:39:10,490 --> 00:39:11,930
Ó, tudom, hogy miért.

889
00:39:11,930 --> 00:39:13,790
>> Tehát úgy tűnik, hogy egy hiba.

890
00:39:13,790 --> 00:39:15,010
És ez bizonyos értelemben.

891
00:39:15,010 --> 00:39:17,730
De hadd nyissa fel a Hálózat fülre.

892
00:39:17,730 --> 00:39:19,660
Hadd töltse be újra az oldalt.

893
00:39:19,660 --> 00:39:23,315
Ah, miért a CSS nem alkalmazzák?

894
00:39:23,315 --> 00:39:26,920
Nos, a CSS fájlt, hasonlóan, már
hogy a világ olvasható, hogy úgy mondjam.

895
00:39:26,920 --> 00:39:28,440
És ez is jelenleg tilos.

896
00:39:28,440 --> 00:39:33,760
Hadd csinál a chmod a + r
A csillag dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
vagyunk dot CSS csak a
fájl kiterjesztése CSS fájlokat.

898
00:39:37,067 --> 00:39:38,900
Most hadd menjek vissza
a böngésző és a reload.

899
00:39:38,900 --> 00:39:40,910
OK, egy kicsit jobban.

900
00:39:40,910 --> 00:39:42,282
>> Most én egy utolsó dolog.

901
00:39:42,282 --> 00:39:42,990
A keresés-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Nekem van egy változat, azt gondoltam,
volt, így hűvösebb, de így több

904
00:39:48,220 --> 00:39:48,980
bonyolult.

905
00:39:48,980 --> 00:39:50,690
Nézzük meg az eredményt az első.

906
00:39:50,690 --> 00:39:52,290
Zárja be ezt az, hogy nekünk több hely.

907
00:39:52,290 --> 00:39:54,275
Módosítsa ezt a keresés-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> És most egy csomó dolog van törve.

910
00:39:57,200 --> 00:39:59,910
Én megyek vissza
az én könyvtárba itt.

911
00:39:59,910 --> 00:40:04,190
És most csak csinálni
a chmod + r egy egy file--

912
00:40:04,190 --> 00:40:07,450
mert tudom, hogy az úgynevezett exists--
logo.gif, amely egy kép.

913
00:40:07,450 --> 00:40:08,590
És most reload.

914
00:40:08,590 --> 00:40:11,040
És wow-- így most vagyok
elég közel, őszintén szólva,

915
00:40:11,040 --> 00:40:15,860
hogy tetszik a 1999 változata a Google, és
őszintén szólva, a 2014 változata a Google,

916
00:40:15,860 --> 00:40:16,360
ugye?

917
00:40:16,360 --> 00:40:21,920
>> Szóval ez most megy a honlapon,
végül, ha jól keres macskák.

918
00:40:21,920 --> 00:40:23,900
És valóban így van.

919
00:40:23,900 --> 00:40:26,410
De mit csináljak másképp
ez a verzió a 4.?

920
00:40:26,410 --> 00:40:28,020
Tehát nem lakik túl sokat itt.

921
00:40:28,020 --> 00:40:30,100
Látni fogod ezt a problémát
meghatározott hét végül.

922
00:40:30,100 --> 00:40:31,350
De észre csináltam egy pár dolgot.

923
00:40:31,350 --> 00:40:33,690
>> Bevezettem egy div
tag, amely a szétválás,

924
00:40:33,690 --> 00:40:35,450
hasonló szellemben a paragrafus.

925
00:40:35,450 --> 00:40:38,220
De egy osztály olyan, mint, itt
négyszögletes láthatatlan régió

926
00:40:38,220 --> 00:40:39,150
a képernyőn.

927
00:40:39,150 --> 00:40:41,680
Adjunk egy egyedi
azonosító, lábléc, csak

928
00:40:41,680 --> 00:40:44,700
így beszélhetünk
azt a HTML máshol.

929
00:40:44,700 --> 00:40:47,952
Itt van egy másik div az oldal
akinek ID lesz tartalom.

930
00:40:47,952 --> 00:40:49,160
Ez az az oldal tartalmát.

931
00:40:49,160 --> 00:40:51,090
És itt van az az oldal fejlécében.

932
00:40:51,090 --> 00:40:54,960
>> Más szóval, én már
alapvetően HTML am szellemileg

933
00:40:54,960 --> 00:40:57,700
megtekintésével weboldalt
három komponens, a fejléc

934
00:40:57,700 --> 00:41:01,200
itt ezzel láthatatlan téglalap,
a tartalom a középső, majd a

935
00:41:01,200 --> 00:41:04,800
a lábléc lent, még
bár nem látjuk ezeket a dolgokat.

936
00:41:04,800 --> 00:41:09,940
Mert azt akarom, hogy a fejemben
oldal itt, vagy egy css fájlban

937
00:41:09,940 --> 00:41:11,460
Tudom használni ezt a szintaxist.

938
00:41:11,460 --> 00:41:13,070
>> Fejes nem tag.

939
00:41:13,070 --> 00:41:17,060
Ez egy olyan azonosítót kiderül
arra, hogy ennek révén #header,

940
00:41:17,060 --> 00:41:20,840
Most már alkalmaz egy vagy több
tulajdonságok a fejlécet.

941
00:41:20,840 --> 00:41:24,130
Meg tudom csinálni ugyanazt a tartalmat,
ugyanaz a tartalom itt.

942
00:41:24,130 --> 00:41:27,230
>> Így például, a lábléc, közlemény
mindezen tulajdonságok én hozzá.

943
00:41:27,230 --> 00:41:30,660
És tudom, hogy léteznek, csak az olvasás
fel a dokumentációt CSS.

944
00:41:30,660 --> 00:41:33,450
Betűméret lesz smaller--
így néhány relatív betűméret.

945
00:41:33,450 --> 00:41:34,741
A súlyt lesz merész.

946
00:41:34,741 --> 00:41:37,340
Margin-- hány képpont
körülbelül it-- 20 pixel.

947
00:41:37,340 --> 00:41:38,590
És ez lesz a középpontban.

948
00:41:38,590 --> 00:41:40,256
>> De most, az oldal úgy néz ki, mint ez.

949
00:41:40,256 --> 00:41:42,840
Ha nem vagyok elégedett
a másolás ott,

950
00:41:42,840 --> 00:41:46,560
Én is valami ilyesmit színe piros.

951
00:41:46,560 --> 00:41:50,570
És akkor tudom menteni ezt, újra,
és most már stilizált a lábléc.

952
00:41:50,570 --> 00:41:54,130
Szóval ez csak sejteti a teljesítmény
Az, hogy mit lehet csinálni egy weboldal

953
00:41:54,130 --> 00:41:55,510
a bizonyításra.

954
00:41:55,510 --> 00:41:59,080
>> És még hűvösebb, mint ezt, ha azt szeretné,
piszkálni körül a tényleges weboldalak,

955
00:41:59,080 --> 00:42:00,810
nem lehet tartósan megváltoztatni őket.

956
00:42:00,810 --> 00:42:03,640
De ha én nyit
Chrome Inspector újra

957
00:42:03,640 --> 00:42:07,610
és megyek, hogy nem a bal oldalon
itt, ami azt mutatja, Facebook HTML,

958
00:42:07,610 --> 00:42:11,380
de azt mutatja, a jobb oldalon
oldalán valamennyi CSS,

959
00:42:11,380 --> 00:42:13,789
akkor sem, és
változtatni a dolgokat menet közben.

960
00:42:13,789 --> 00:42:15,080
Szóval hadd menjen előre, és csinálni.

961
00:42:15,080 --> 00:42:18,670
>> Hadd menjek előre, és ellenőrzés
kattintson erre a random szó itt,

962
00:42:18,670 --> 00:42:21,230
írja alá, és kattintson az Elem vizsgálata.

963
00:42:21,230 --> 00:42:25,130
Chrome nagyon kényelmesen ugrik
a h1 tag, hogy a Facebook segítségével.

964
00:42:25,130 --> 00:42:27,290
És észre itt Facebook
van ilyen lustán

965
00:42:27,290 --> 00:42:29,960
bedrótozott betűméret mint a tulajdonság itt.

966
00:42:29,960 --> 00:42:33,530
>> Így a hűvös dolog azonban az,
hogy ha tényleg megy itt

967
00:42:33,530 --> 00:42:39,560
és azt mondják, jaj, a Facebook, nem szeretem, hogy a
64 pixel, most már változtatni a Facebook.

968
00:42:39,560 --> 00:42:42,590
Persze, mi csak azt a változó
nekem személyesen a pillanatban.

969
00:42:42,590 --> 00:42:45,150
De ez is csak egy
szerszámot a szerszám készlet

970
00:42:45,150 --> 00:42:48,360
hogy fog lehetővé teszi, hogy csípés
és kitalálni, és azt is diagnosztizálni

971
00:42:48,360 --> 00:42:49,729
kérdéseket saját weboldalakat.

972
00:42:49,729 --> 00:42:52,270
És hasonlóképpen megy át
itt, ami egy és ugyanaz.

973
00:42:52,270 --> 00:42:55,830
Ha szeretné, hogy divatos, én
értem, most már tényleg a mutáció oldal

974
00:42:55,830 --> 00:42:57,380
és nem őrült dolgokat.

975
00:42:57,380 --> 00:42:59,870
>> Miért van ez az egész hasznos?

976
00:42:59,870 --> 00:43:02,330
Nos, végül, vagyunk
szeretne majd lenni

977
00:43:02,330 --> 00:43:07,110
képes létrehozni weboldalak
hajtja a saját hátsó vége,

978
00:43:07,110 --> 00:43:10,520
nem csak a Google és
outsourcing a háttérben ott.

979
00:43:10,520 --> 00:43:13,510
Azt akarjuk, hogy a ténylegesen
érték, például,

980
00:43:13,510 --> 00:43:18,830
A keresési motor akció
attribútum menni, hogy nem valaki más,

981
00:43:18,830 --> 00:43:24,270
de valami hasonló search.php,
ahol search.php van saját szerver,

982
00:43:24,270 --> 00:43:25,670
nem valaki más.

983
00:43:25,670 --> 00:43:30,316
>> És így, hogy ott, akkor valójában
kell bevezetni az új nyelvet.

984
00:43:30,316 --> 00:43:33,190
Így már megnézte egy új
nyelv itt, vagy két igazán, HTML

985
00:43:33,190 --> 00:43:33,700
és CSS.

986
00:43:33,700 --> 00:43:36,330
De tényleg csak
szerkezeti és esztétikai nyelven.

987
00:43:36,330 --> 00:43:38,360
Ők nem programozás
nyelv önmagában.

988
00:43:38,360 --> 00:43:41,160
És ez körülbelül annyi hivatalos
időt fogunk költeni rájuk.

989
00:43:41,160 --> 00:43:44,910
Mivel kezdjük most
az átmenet a PHP.

990
00:43:44,910 --> 00:43:48,160
>> Tehát a PHP tényleges
programozási nyelv.

991
00:43:48,160 --> 00:43:50,750
Ez egy programozási nyelv
abban az értelemben, hogy ez az

992
00:43:50,750 --> 00:43:52,855
célja, hogy könnyebb súly
mint valami hasonló C.

993
00:43:52,855 --> 00:43:56,082
És ez egy értelmezett nyelv,
ami azt jelenti, hogy nem összeállítani.

994
00:43:56,082 --> 00:43:58,790
Szóval dióhéjban, mit is jelent
amikor használt nyelv, mint a C

995
00:43:58,790 --> 00:44:00,290
és mi volt az összeállításhoz?

996
00:44:00,290 --> 00:44:02,120
Mit jelent az, hogy
fordítsd C forráskód?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
KÖZÖNSÉG: [hallható].

999
00:44:04,780 --> 00:44:06,184
DAVID J MALAN: Mondd még egyszer?

1000
00:44:06,184 --> 00:44:07,100
KÖZÖNSÉG: [hallható].

1001
00:44:07,100 --> 00:44:07,962

1002
00:44:07,962 --> 00:44:08,920
DAVID J MALAN: Tökéletes.

1003
00:44:08,920 --> 00:44:10,180
Kiderült, hogy a bináris.

1004
00:44:10,180 --> 00:44:14,200
Kiderült be nullák és egyesek
a tényleges angol-szerű forráskód.

1005
00:44:14,200 --> 00:44:16,424
És akkor mi is valójában
fuss azok nullák és egyesek

1006
00:44:16,424 --> 00:44:18,840
vezetjük őket a
CPU dupla kattintással egy ikon

1007
00:44:18,840 --> 00:44:19,980
vagy futtat egy parancsot.

1008
00:44:19,980 --> 00:44:23,770
>> PHP és Python és Ruby
és Perl és JavaScript

1009
00:44:23,770 --> 00:44:26,250
és csokor más
nyelveket értelmezni

1010
00:44:26,250 --> 00:44:29,290
nyelvek, ami azt
nem kell fordítanod.

1011
00:44:29,290 --> 00:44:34,220
Inkább adsz őket bemenet
a program neve egy tolmács.

1012
00:44:34,220 --> 00:44:36,640
És ez tolmács,
amely valaki más írta,

1013
00:44:36,640 --> 00:44:40,930
beolvassa a forráskódot felülről lefelé,
balról jobbra, és csak értelmezi

1014
00:44:40,930 --> 00:44:43,000
azokat a sorokat, és azt teszi, amit mondasz.

1015
00:44:43,000 --> 00:44:45,360
>> Tehát, ha találsz egy
vonal, amely azt mondja nyomtatott,

1016
00:44:45,360 --> 00:44:48,660
ez nem feltétlenül átalakítani nyomtatás
a megfelelő nullák.

1017
00:44:48,660 --> 00:44:51,910
Csak van ez a tolmács, mint a
ha nagy a feltétellel, hogy azt mondja,

1018
00:44:51,910 --> 00:44:56,110
ha programozó utasítás
print, akkor tegye a következőket.

1019
00:44:56,110 --> 00:44:58,170
Így értelmezi, hogy csak
az a fajta érvelés

1020
00:44:58,170 --> 00:44:59,800
át, amit mondasz, hogy igen.

1021
00:44:59,800 --> 00:45:01,320
>> És a PHP az egyik ilyen nyelven.

1022
00:45:01,320 --> 00:45:05,310
És a PHP éve tervezték
Pontosan webes programozás.

1023
00:45:05,310 --> 00:45:08,160
És ez volt eredetileg a
nagyon hanyag rendetlen nyelvet.

1024
00:45:08,160 --> 00:45:10,940
És valóban, van egy hatalmas
mennyiségű rossz PHP kód odakint.

1025
00:45:10,940 --> 00:45:13,520
De a nyelv maga
érett az évek során,

1026
00:45:13,520 --> 00:45:16,200
olyannyira, hogy most már
valójában egy csodálatos következő lépés

1027
00:45:16,200 --> 00:45:19,970
pedagógiailag származó C, mert
így darned ismerős mindent

1028
00:45:19,970 --> 00:45:22,380
amit most láttam az elmúlt hetekben.

1029
00:45:22,380 --> 00:45:25,724
>> Az egyetlen különbség a kezdeti fogjuk látni
az, hogy nincs fő funkciója többé.

1030
00:45:25,724 --> 00:45:28,890
Amikor elkezdi kódot írni, ez csak
lesz, hogy végre nem számít, mit,

1031
00:45:28,890 --> 00:45:30,220
mint látni fogjuk, egy pillanat.

1032
00:45:30,220 --> 00:45:33,320
Közben itt van, amit a
változó néz ki, mint a PHP.

1033
00:45:33,320 --> 00:45:35,840
Ez egy kicsit más,
de csak alig.

1034
00:45:35,840 --> 00:45:39,380
>> A PHP, nincs erős gépelés.

1035
00:45:39,380 --> 00:45:41,430
Van hét gépelés,
ami éppen azt jelenti, hogy

1036
00:45:41,430 --> 00:45:44,030
olyan adattípusok, mint a húrok
és a számok és egyéb dolgok.

1037
00:45:44,030 --> 00:45:47,030
De nem zavarja meghatározva
mik azok többé.

1038
00:45:47,030 --> 00:45:48,980
PHP találja ki az Ön számára.

1039
00:45:48,980 --> 00:45:52,030
A dollár jel csak egy döntés
hogy a PHP nép éve

1040
00:45:52,030 --> 00:45:54,890
ezelőtt úgy, hogy minden változót a PHP
csak kezdődik a dollár jel.

1041
00:45:54,890 --> 00:45:58,130
Ez valójában olyan hasznos, hogy a
ugrik ki egy kicsit jobban.

1042
00:45:58,130 --> 00:46:01,315
>> De azután, hogy ez a
egy olyan állapot, PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Mi a különbség versus C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Trick question-- semmit,
ami valóban nagyon szép.

1047
00:46:09,600 --> 00:46:12,140
Logikai kifejezések PHP-- ugyanaz.

1048
00:46:12,140 --> 00:46:19,354
Logikai kifejezések és kontra
vagy, kapcsolók, hurkok, hurkok, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
ez egy más.

1050
00:46:20,270 --> 00:46:22,660
>> Így kiderül, van egy
pár egyéb tulajdonsága a nyelvnek.

1051
00:46:22,660 --> 00:46:25,243
Ezek közül az egyik valójában ezt,
ami csodálatosan kényelmes.

1052
00:46:25,243 --> 00:46:29,250
Ha a $ számok egy tömb, ami neked van
kijelentette, korábban a program,

1053
00:46:29,250 --> 00:46:33,350
van ez a képzelet minden konstrukció
hogy ahelyett, hogy az összes, hogy

1054
00:46:33,350 --> 00:46:37,020
bosszantó I értéke 0, I
kevesebb, mint ez, [? I ++?]

1055
00:46:37,020 --> 00:46:40,320
Az egyes számok az szám, ahol az egyes
ezen dollár jel értékeket csak

1056
00:46:40,320 --> 00:46:42,790
egy változó, és az utóbbi
lehet gondolni, mint az I.

1057
00:46:42,790 --> 00:46:44,290
Lehet nevezni, amit akarsz.

1058
00:46:44,290 --> 00:46:45,770
Hívtam szám.

1059
00:46:45,770 --> 00:46:48,825
Ez fog végighaladni
a tömb hívott számokat.

1060
00:46:48,825 --> 00:46:51,200
És minden ismétlés, ez
fog automatikusan frissíti

1061
00:46:51,200 --> 00:46:54,340
az Ön számára a dollár jel szám
változó, így állandóan

1062
00:46:54,340 --> 00:46:58,210
van, hogy a változó kívánt
anélkül, hogy ezt bármilyen szögletes zárójel

1063
00:46:58,210 --> 00:47:00,980
jelölés vagy kijelző egy tömbben.

1064
00:47:00,980 --> 00:47:04,950
>> Azon túl, hogy mi is van a dolgok, mint
tömbök, amely majdnem ugyanúgy néznek ki,

1065
00:47:04,950 --> 00:47:08,210
kivéve, hogy nagyon gyakori, ahogy fogunk
látni, mind a PHP és a JavaScript

1066
00:47:08,210 --> 00:47:10,750
előre inicializálni tömb
szögletes zárójelbe.

1067
00:47:10,750 --> 00:47:12,040
C használ kapcsos zárójeleket.

1068
00:47:12,040 --> 00:47:15,330
Szóval ez kicsit más, bár
mi nem igazán használja ezt a trükköt sok.

1069
00:47:15,330 --> 00:47:20,090
>> De még nagyobb erővel,
PHP asszociatív tömböt,

1070
00:47:20,090 --> 00:47:23,100
amely divatos módja
mondván, hash táblák.

1071
00:47:23,100 --> 00:47:31,610
Sőt, ha azt szeretnénk, hogy nyilvánítsa a hash
táblázat a PHP, ellentétben C-- hány

1072
00:47:31,610 --> 00:47:34,775
sornyi kódot tartott a
ténylegesen olyan hash tábla C?

1073
00:47:34,775 --> 00:47:38,310
Vagy hány sornyi kód van
vesz, hogy végre egy hash tábla C?

1074
00:47:38,310 --> 00:47:39,820
Szóval lehet, hogy a sok, ugye?

1075
00:47:39,820 --> 00:47:41,680
Ez egy pár tucat, talán 100 vagy 200.

1076
00:47:41,680 --> 00:47:42,980
Ez magától értetődő.

1077
00:47:42,980 --> 00:47:45,420
Vagy szól, hogy legyen, mint
Hamarosan látni, nemtriviális

1078
00:47:45,420 --> 00:47:48,080
hogy végre egy hash tábla
[Hallható], valamint egy próbát.

1079
00:47:48,080 --> 00:47:50,580
De PHP-- és őszintén szólva, én
talán nem kell mondani, ez

1080
00:47:50,580 --> 00:47:53,630
míg Monday-- PHP, ha
akarsz egy asztal, kész.

1081
00:47:53,630 --> 00:47:56,431
Ez egy hash table-- így
egy sor kódot.

1082
00:47:56,431 --> 00:47:56,930
És

1083
00:47:56,930 --> 00:47:58,810
>> Sok nyelven csinálni.

1084
00:47:58,810 --> 00:48:00,190
Jó szórakozást a PSET öt.

1085
00:48:00,190 --> 00:48:01,980
Így sok nyelven ezt.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Adnak neked ezeket absztrakciók
hogy más emberek, más programozók,

1088
00:48:06,140 --> 00:48:09,870
hoztak létre az Ön számára, hogy
tud állni a vállukon

1089
00:48:09,870 --> 00:48:13,290
és kezdi el használni ötleteket, szuper
kényszerítő, mint a hash táblák és fák

1090
00:48:13,290 --> 00:48:14,140
és megpróbálja.

1091
00:48:14,140 --> 00:48:17,790
De nem feltétlenül kell, hogy
végre ezeket a dolgokat magad.

1092
00:48:17,790 --> 00:48:20,850
>> És végül, milyen
fogjuk használni a PHP

1093
00:48:20,850 --> 00:48:23,580
potenciálisan írás programok
Az úgynevezett parancssorban.

1094
00:48:23,580 --> 00:48:26,600
Tudtuk újra minden programot
is írtam ebben a félévben eddig,

1095
00:48:26,600 --> 00:48:30,410
kivéve talán Breakout használó SPL,
amely specifikus ről C-re a pillanatban.

1096
00:48:30,410 --> 00:48:33,100
De minden más probléma beállítva,
biztosan Mario és Caesar

1097
00:48:33,100 --> 00:48:35,300
és Vigenère és
[? Crack?] És tovább, mi

1098
00:48:35,300 --> 00:48:39,520
lehet újra végrehajtani PHP, és
talán egy kicsit könnyebben.

1099
00:48:39,520 --> 00:48:43,050
>> De amit mi végül majd
használni a PHP-web programozás.

1100
00:48:43,050 --> 00:48:46,420
És fogunk bemutatni következő
hét a mentális modell, a paradigma az úgynevezett

1101
00:48:46,420 --> 00:48:49,610
MVC, modell nézet vezérlő,
amely ha tettél programozás

1102
00:48:49,610 --> 00:48:51,610
mielőtt a Python vagy
Ruby vagy máshol, akkor

1103
00:48:51,610 --> 00:48:54,112
talán tudja, ez a csapat a
Sínek és övé, és a hasonlók.

1104
00:48:54,112 --> 00:48:55,820
De ha Ön új a
ezt is látni fogod

1105
00:48:55,820 --> 00:48:59,652
hogy ez valójában egy nagyon természetes
kiterjesztése a faktorizáció

1106
00:48:59,652 --> 00:49:01,360
és az a fajta tervezés
A kód, hogy már

1107
00:49:01,360 --> 00:49:04,670
csinál C. megyünk most
alkalmazza néhány ilyen tanulságok PHP

1108
00:49:04,670 --> 00:49:07,190
így végül vagyunk
végrehajtása a saját honlapján.

1109
00:49:07,190 --> 00:49:09,080
És ha valami
megbabonázta vagy meghökkent

1110
00:49:09,080 --> 00:49:10,954
hogy fogunk csinálni
az összes olyan gyorsan,

1111
00:49:10,954 --> 00:49:13,410
észre, hogy szinte minden
félév, közel 90%

1112
00:49:13,410 --> 00:49:16,560
diákok CS50, beleértve a
akik még soha nem programozott korábban,

1113
00:49:16,560 --> 00:49:20,329
a végén így a végső projektek
alapulnak webes programozás.

1114
00:49:20,329 --> 00:49:23,120
És így látni fogja, hogy a hozamok
magasak az elkövetkező hetekben.

1115
00:49:23,120 --> 00:49:24,965
Szóval találkozunk majd hétfőn.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> SPEAKER 1: És most, mély
Gondolatok a Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Hash táblák.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [Nevetés]

1122
00:49:38,402 --> 00:49:38,902