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

2
00:00:01,390 --> 00:00:04,890
>> [Prehrávanie hudby]

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

4
00:00:10,955 --> 00:00:12,580
DAVID J Malan: Dobre, vitaj späť.

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

6
00:00:13,600 --> 00:00:15,540
To je koniec týždňa sedem.

7
00:00:15,540 --> 00:00:18,180
A to je koniec tohto živiacich sa zdochlinami
lov z problému nastaviť štyri

8
00:00:18,180 --> 00:00:19,220
ktoré by vás mohli vyvolať.

9
00:00:19,220 --> 00:00:21,650
Po uzdravení všetkých
tieto JPEG zamestnancov,

10
00:00:21,650 --> 00:00:24,820
si vyzval, ak by ste chceli,
fotografovať sa s čo najviac

11
00:00:24,820 --> 00:00:25,981
z tých ľudí, ako môžete.

12
00:00:25,981 --> 00:00:28,480
Máme veľa príspevkov
v posledných niekoľkých týždňoch,

13
00:00:28,480 --> 00:00:32,980
naozaj, celkom málo tesne pred poludním
dnes, z ktorých niektoré sú tu,

14
00:00:32,980 --> 00:00:37,670
tu chytil in-- vyzerá like-- Annenberg
Hall v úradných hodinách, jeden tu

15
00:00:37,670 --> 00:00:39,530
v Lowell dom s Nickom.

16
00:00:39,530 --> 00:00:41,750
Tu je Ramon bol chytený na telefóne.

17
00:00:41,750 --> 00:00:43,870
To bolo na CS50 obed.

18
00:00:43,870 --> 00:00:46,840
To bol Jason Skyping sa
viac kreatívne spolužiak,

19
00:00:46,840 --> 00:00:48,280
ktorý mu volal týmto spôsobom.

20
00:00:48,280 --> 00:00:49,690
Nevieme, čo to je.

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

22
00:00:51,940 --> 00:00:54,570
>> DAVID J Malan: Ale
že to stojí za gigabyte.

23
00:00:54,570 --> 00:00:56,960
Tu je Chang, ktorý
doslova utiekol javisko

24
00:00:56,960 --> 00:01:00,480
aby sa vyhli fotografoval jeden
deň, ale bol nakoniec chytený.

25
00:01:00,480 --> 00:01:02,050
Tu je Nick.

26
00:01:02,050 --> 00:01:03,480
Tu je Nick.

27
00:01:03,480 --> 00:01:04,080
Tu je Nick.

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

29
00:01:05,090 --> 00:01:07,670
A tu je Alison podľa oblasti.

30
00:01:07,670 --> 00:01:11,840
A Zamyla dokonca bolo zistené,
u tanečného sály súťaže.

31
00:01:11,840 --> 00:01:14,100
Tak sme sa prejsť
tieto fotografie, prísť na to,

32
00:01:14,100 --> 00:01:16,690
ktorí podali najviac
najskôr, a odmena

33
00:01:16,690 --> 00:01:20,662
jeden báječný cena, as
sľúbil vo špec.

34
00:01:20,662 --> 00:01:23,120
A budeme tiež sledovať informácie o
priestor, ktorý bol zapojený.

35
00:01:23,120 --> 00:01:26,860
>> Pár announcements-- tak obed
je opäť tento piatok v 13:15.

36
00:01:26,860 --> 00:01:30,420
Ak by ste sa k nám pripojiť,
Odpovedz na tejto adrese tu.

37
00:01:30,420 --> 00:01:33,730
Znovu sa objaví Jason tu z jedného
sekcií pár rokov

38
00:01:33,730 --> 00:01:35,510
späť, čo sa stalo
padnúť na Halloween.

39
00:01:35,510 --> 00:01:38,950
A skutočne, sa prezliekol za
tekvica danom roku.

40
00:01:38,950 --> 00:01:42,700
Ak sa budete pozerať tejto sekcii
jeho od roku 2011 sekcia

41
00:01:42,700 --> 00:01:46,480
osem, ak ste zvedaví,
na CS50.tv, myslím, že

42
00:01:46,480 --> 00:01:49,730
to bol rok, v ktorom
Jeho vzduchové čerpadlo pracoval.

43
00:01:49,730 --> 00:01:52,490
>> Ak máte teda sledovať
podobný oddiel v roku 2012,

44
00:01:52,490 --> 00:01:55,620
uvidíte túto Jasona moc vypustená,
pretože oblek už fungoval,

45
00:01:55,620 --> 00:01:58,060
čo je len povedať
tento piatok, ak chcete

46
00:01:58,060 --> 00:02:02,720
chcel vyrezať tekvicu s Daven
a Gabe a iní, RSVP k hlavám

47
00:02:02,720 --> 00:02:04,480
na cs50.harvard.edu adresu.

48
00:02:04,480 --> 00:02:06,200
To sľubuje, že bude skvelá zábava.

49
00:02:06,200 --> 00:02:08,660
Daven, nám bolo povedané, má vyrezávané
Tekvica celý svoj život.

50
00:02:08,660 --> 00:02:11,930
Gabriel z Brazílie má nikdy
vyrezávané tekvice na Halloween.

51
00:02:11,930 --> 00:02:14,700
Takže sa tam s nimi, ako sa učia.

52
00:02:14,700 --> 00:02:16,830
>> Semináre, meanwhile--
takže sa dozviete čoskoro

53
00:02:16,830 --> 00:02:20,650
o tom, čo naše očakávania sú
záverečný projekt, ktorý v podstate

54
00:02:20,650 --> 00:02:23,150
sa redukuje na
navrhovanie a implementáciu

55
00:02:23,150 --> 00:02:26,440
väčšina akýkoľvek projekt zaujímať
vy, aj keď s výhradou schválenia

56
00:02:26,440 --> 00:02:28,490
a vedenie zo svojho učiteľského kolegami.

57
00:02:28,490 --> 00:02:32,110
Ku koncu
semester, sme predstavili rad

58
00:02:32,110 --> 00:02:35,610
seminárov, ktoré sú nepovinné triedy
pod vedením výučbových kolegami a Harvard

59
00:02:35,610 --> 00:02:38,570
zamestnanci, priatelia kurzu cez
kampus, na rôzne témy, ktoré

60
00:02:38,570 --> 00:02:41,470
sú dotýkajúcej sa
ihrisko je základná osnova

61
00:02:41,470 --> 00:02:45,590
však platí, zábava a
iný potenciálny záverečných prác.

62
00:02:45,590 --> 00:02:49,530
>> Napríklad, prvý, ak budete chcieť
zaregistrovať, zamierte do tamtej URL.

63
00:02:49,530 --> 00:02:53,010
A to je zostava pre
Tohtoročné semináre sám.

64
00:02:53,010 --> 00:02:56,060
Ale vykonávame máme desiatky
semináre z rokov minulých, z ktorých všetky

65
00:02:56,060 --> 00:02:59,774
sú spojené v menu semináre
Možnosť webových stránok stránke kurzu je.

66
00:02:59,774 --> 00:03:02,190
Takže ak uvažujete o
presahuje svoju zónu pohodlia

67
00:03:02,190 --> 00:03:05,060
alebo vyzdvihnúť nejaké nové zručnosti,
Napríklad, programovanie iPhone

68
00:03:05,060 --> 00:03:08,100
aplikácie s Swift, nový jazyk
od Apple alebo Objective-C

69
00:03:08,100 --> 00:03:11,230
alebo Android alebo programovania [? cue?]
žiarovky, alebo na ktorúkoľvek tém

70
00:03:11,230 --> 00:03:15,490
tu a viac, vďaka kontrola
z registračnej stránke.

71
00:03:15,490 --> 00:03:19,730
>> Tak sme začali, a dospel k záveru o
Pondelok sa pri pohľade na HTTP.

72
00:03:19,730 --> 00:03:22,675
Tak rýchlo refresher-- HTTP,
HyperText Transfer Protocol.

73
00:03:22,675 --> 00:03:24,045
Ale čo to vlastne znamená?

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

75
00:03:26,805 --> 00:03:27,930
Čo to vlastne znamená?

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

77
00:03:30,665 --> 00:03:31,290
Je to ruka?

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

79
00:03:33,074 --> 00:03:34,740
Viem, že ste práve poškriabaniu vašej hlave.

80
00:03:34,740 --> 00:03:36,400
Ale chcete navrhnúť, čo HTTP je?

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

82
00:03:37,792 --> 00:03:40,576
>> Divákov: Ako počítače
komunikovať s [nepočuteľné].

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

84
00:03:41,517 --> 00:03:43,100
DAVID J Malan: Cnelo sa mi posledná časť.

85
00:03:43,100 --> 00:03:45,774
Komunikáciu počítačov with--

86
00:03:45,774 --> 00:03:47,325
>> Divákov: internetové servery.

87
00:03:47,325 --> 00:03:50,450
DAVID J Malan: Good-- s internetom
servery, a najmä, webové servery.

88
00:03:50,450 --> 00:03:53,533
Vzhľadom k tomu, odvolanie, je tu banda
služby na internete, z ktorých niektoré

89
00:03:53,533 --> 00:03:57,349
Používate pravdepodobne denne medzi chatu
a správy, chat, a web a e-mail,

90
00:03:57,349 --> 00:03:57,890
a podobne.

91
00:03:57,890 --> 00:04:00,900
A HTTP je len
Protokol, ktorý webové prehliadače

92
00:04:00,900 --> 00:04:03,750
hovorí pri komunikácii s
webové servery, a vice versa.

93
00:04:03,750 --> 00:04:05,580
A analóg v
Ľudský svet môže byť,

94
00:04:05,580 --> 00:04:08,730
Aj rozšíriť moju ruku sa triasť niektoré
ďalší človek je, a on alebo ona

95
00:04:08,730 --> 00:04:11,970
berie na vedomie, rozšírením
jeho alebo jej ruku rovnako.

96
00:04:11,970 --> 00:04:13,970
Tak to je len protokol,
súbor konvencií.

97
00:04:13,970 --> 00:04:15,630
>> A čo vlastne sú tie konvencie?

98
00:04:15,630 --> 00:04:18,640
No, je to len scvrkáva na
odosielanie správ tam a späť,

99
00:04:18,640 --> 00:04:19,770
ako vidíte na obrázku.

100
00:04:19,770 --> 00:04:22,520
A je tu niekoľko spôsobov, ako
ktoré môžete posielať tieto správy.

101
00:04:22,520 --> 00:04:24,360
A snáď najviac
spoločné je známy ako get.

102
00:04:24,360 --> 00:04:26,510
A uvidíme kontrast
to netrvalo dlho.

103
00:04:26,510 --> 00:04:30,010
>> Ale požiadavka dostať z prehliadača
na server len vyzerá takto.

104
00:04:30,010 --> 00:04:32,960
Je to banda textu, ktorý kladie
vnútri virtuálneho obálky.

105
00:04:32,960 --> 00:04:35,854
Na vonkajšej strane tohto krytia
ísť pár kúskov detailov.

106
00:04:35,854 --> 00:04:37,770
Čo je potrebné ísť ďalej
obálka, aby som tak povedal,

107
00:04:37,770 --> 00:04:41,820
s cieľom získať žiadosť ako
to odo mňa na webový server?

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

109
00:04:42,320 --> 00:04:43,270
>> Divákov: Vaša IP adresa.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J Malan: Moja IP adresa
V poli Od, aby som tak povedal,

111
00:04:45,890 --> 00:04:49,490
a samozrejme,
IP adresa príjemcu.

112
00:04:49,490 --> 00:04:52,710
Avšak v prípade, že webové paketu,
potrebujeme trochu viac detailov

113
00:04:52,710 --> 00:04:55,254
Nestačí len
poslať obálku na server,

114
00:04:55,254 --> 00:04:57,670
pretože server môže byť
počúvania pre rôzne typy

115
00:04:57,670 --> 00:04:59,180
internetového prevádzky.

116
00:04:59,180 --> 00:05:01,370
Tak čo ešte potrebujeme
okrem príjemcu IP?

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

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

119
00:05:03,222 --> 00:05:04,241
>> Divákov: Je to TCP?

120
00:05:04,241 --> 00:05:05,074
DAVID J Malan: Dobrý.

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

122
00:05:06,470 --> 00:05:07,340
>> Divákov: adresa.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J Malan: Adresa,
alebo port, ako sa to volá.

124
00:05:09,340 --> 00:05:11,010
Blízko, ale číslo portu TCP.

125
00:05:11,010 --> 00:05:12,220
A je tu veľa z nich.

126
00:05:12,220 --> 00:05:14,310
Ale určite najviac
oboznámení by nakoniec

127
00:05:14,310 --> 00:05:17,590
80, čo je predvolené nastavenie
ktorý sa používa pre webového prevádzky.

128
00:05:17,590 --> 00:05:20,040
A ďalší povedomý
brzo bude 443,

129
00:05:20,040 --> 00:05:24,280
ktorý sa používa pre bezpečné webu
prevádzka, adresy URL, ktoré začínajú reťazcom https.

130
00:05:24,280 --> 00:05:26,650
>> Tak toto je, čo sa deje
vnútri tejto obálky.

131
00:05:26,650 --> 00:05:29,780
A dostať sa / jednoducho znamená, dať
me predvolené webové stránky.

132
00:05:29,780 --> 00:05:32,700
Daj mi koreň tvrdý
pohon na tomto serveri.

133
00:05:32,700 --> 00:05:36,050
A dúfajme, web
server odpovie, OK

134
00:05:36,050 --> 00:05:39,630
a číslo 200, ktorý je len
konvencie hovorí, áno, všetky

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

136
00:05:40,470 --> 00:05:41,680
Tu je stránka.

137
00:05:41,680 --> 00:05:45,510
Typ webovej stránky, bude
byť text, ale konkrétnejšie, HTML,

138
00:05:45,510 --> 00:05:47,010
ktoré sa chystáme potápať späť do.

139
00:05:47,010 --> 00:05:49,877
A dot dot dot len
znamená, tu je HTML.

140
00:05:49,877 --> 00:05:51,710
A to je miesto, kde sme
vyzdvihnúť príbeh dnes,

141
00:05:51,710 --> 00:05:55,740
vlastne písanie HTML,
HyperText Markup Language, čo

142
00:05:55,740 --> 00:05:57,727
je jazyk, v ktorom
Webové stránky sú písané.

143
00:05:57,727 --> 00:05:59,060
Nie je to programovací jazyk.

144
00:05:59,060 --> 00:06:01,270
Tam je žiadne funkcie
alebo slučky alebo podmienok.

145
00:06:01,270 --> 00:06:03,800
Je to značkovací jazyk,
rovnako zase vidím dnes,

146
00:06:03,800 --> 00:06:07,240
ktorý umožňuje určiť
ako štruktúrovať a štylizovať

147
00:06:07,240 --> 00:06:09,300
esteticky webové stránky.

148
00:06:09,300 --> 00:06:11,470
>> Tak toto bol ten,
a len stránky naozaj

149
00:06:11,470 --> 00:06:13,930
Pozrel sa na, ak je krátko, v pondelok.

150
00:06:13,930 --> 00:06:16,250
A všimnite si pár
charakteristickými črtami.

151
00:06:16,250 --> 00:06:20,170
Je tu veľa otvorených uhlový
držiak a zatvorte uhlový držiak.

152
00:06:20,170 --> 00:06:23,160
Medzi tými, uhlový
držiaky sú slová.

153
00:06:23,160 --> 00:06:25,660
A ideme na začiatok
volá tieto slová tagy.

154
00:06:25,660 --> 00:06:28,800
Tak otvorený držiak hlavice
a uzavretý držiak hlavice

155
00:06:28,800 --> 00:06:33,620
sú otvorené a uzavreté tagy,
alebo počiatočné a koncové značky

156
00:06:33,620 --> 00:06:37,660
respektíve elementu HTML,
ako budeme hovoriť, volal hlavu.

157
00:06:37,660 --> 00:06:41,760
A platí rovnaký žargón
k telu v HTML a tak ďalej.

158
00:06:41,760 --> 00:06:43,970
>> A čo je pekné je
HTML-- a naozaj, budeme

159
00:06:43,970 --> 00:06:47,187
stráviť strašne málo času na to,
pretože budete väčšinou len prísť na to,

160
00:06:47,187 --> 00:06:49,770
aké funkcie to má, keď vás
vlastne mať konkrétny problém

161
00:06:49,770 --> 00:06:52,820
na solve-- zistíte, že
prehliadač je dosť hlúpe.

162
00:06:52,820 --> 00:06:56,450
Je to len tak do-- nie je na rozdiel od
computer--, čo poviete, že to urobiť.

163
00:06:56,450 --> 00:06:59,279
A tak, keď máte otvorené
držiak HTML na samom vrchole

164
00:06:59,279 --> 00:07:01,320
tam, že v podstate
jednoducho znamená, hej, prehliadač,

165
00:07:01,320 --> 00:07:04,090
Tu je webová stránka napísaná v HTML.

166
00:07:04,090 --> 00:07:06,130
>> Keď to vidia otvorený držiak
hlava, to len znamená,

167
00:07:06,130 --> 00:07:10,350
hey, prehliadač, tu je hlava, alebo
najvyššia časť mojej webovej stránky.

168
00:07:10,350 --> 00:07:14,192
Keď to vidia uzavretý držiak
hlava, to len znamená, hej,

169
00:07:14,192 --> 00:07:15,150
to je na hlavu.

170
00:07:15,150 --> 00:07:16,420
Pohotovostný režim na niečo iné.

171
00:07:16,420 --> 00:07:18,878
A to niečo je
zrejme bude telo.

172
00:07:18,878 --> 00:07:22,630
A keď nemáte značku, ako je
máte len ahoj, čiarka, svet,

173
00:07:22,630 --> 00:07:26,610
to je len bude raw text
nakoniec sa zobrazí na obrazovke.

174
00:07:26,610 --> 00:07:29,220
>> Teraz si možno všimnete, príliš
odsadenie tu.

175
00:07:29,220 --> 00:07:32,160
Môžete si asi odvodiť
ako sme to štylizácia.

176
00:07:32,160 --> 00:07:34,850
Zakaždým, keď otvoríte záznam,
aby som tak povedal, som odsadiť.

177
00:07:34,850 --> 00:07:38,540
A zakaždým, keď zavriem
tag som un-zarážka,

178
00:07:38,540 --> 00:07:40,690
svojim duchom podobať zložených zátvoriek.

179
00:07:40,690 --> 00:07:43,470
A za to, že som typ
použitie môj úsudok.

180
00:07:43,470 --> 00:07:48,380
Všimnite si, že som sa neobťažoval biť
Zadajte vnútri tohto názvu značky.

181
00:07:48,380 --> 00:07:48,990
Prečo?

182
00:07:48,990 --> 00:07:51,920
No, proste som sa rozhodol, že to vyzeralo
malý vysávač pre mňa, človeka,

183
00:07:51,920 --> 00:07:53,181
len neobťažoval robiť, že.

184
00:07:53,181 --> 00:07:54,930
Takže znovu, je tu nejaký
rozsudok zavolala

185
00:07:54,930 --> 00:07:57,670
ako je v C alebo akomkoľvek jazyku.

186
00:07:57,670 --> 00:08:04,110
>> Ale všimnite si tiež, že tento zárez
požičiava seba k duševnej modelu,

187
00:08:04,110 --> 00:08:05,670
, Aby sa príliš komplikovať.

188
00:08:05,670 --> 00:08:07,020
Ale strom, nie?

189
00:08:07,020 --> 00:08:09,290
Ak si myslíte, že na webe
Stránka zrejme písaný

190
00:08:09,290 --> 00:08:12,050
takto, ako
pekne členité, že tak,

191
00:08:12,050 --> 00:08:17,390
môžete takmer myslieť na otvorenom držiaku
HTML uzavretý držiak tag je vymedzenie

192
00:08:17,390 --> 00:08:21,380
koreň uzla, rodokmeň
štýl uzol v štýle stromov

193
00:08:21,380 --> 00:08:22,900
sme sa pozreli na minulý piatok.

194
00:08:22,900 --> 00:08:27,630
>> A skutočne, máme na tu
čo zavoláme DOM, D-O-M, dokument

195
00:08:27,630 --> 00:08:31,680
objektový model, ozdobný spôsob, ako hovoriť
strom, ktorý prehlasuje, že HTML.

196
00:08:31,680 --> 00:08:36,140
A všimnite si, že HTML má, budeme hovoriť,
ako rodokmeň, má dve deti.

197
00:08:36,140 --> 00:08:37,659
Na ľavej strane je hlava.

198
00:08:37,659 --> 00:08:39,179
Na pravej strane je telo.

199
00:08:39,179 --> 00:08:44,220
>> A rovnako ako bezduché myšlienky cvičenie,
hlava, má samozrejme, koľko detí

200
00:08:44,220 --> 00:08:46,070
Podľa tejto štruktúry?

201
00:08:46,070 --> 00:08:48,200
Takže len jeden, title--
a to je dôvod, prečo máme

202
00:08:48,200 --> 00:08:50,580
šípkou od hlavy až k titulu.

203
00:08:50,580 --> 00:08:55,110
Takže je to ako by táto osoba vo
rodokmeň mal len jednu potomkov.

204
00:08:55,110 --> 00:08:58,230
A potom samotný názov môže
sa povedať, že mať dieťa taky.

205
00:08:58,230 --> 00:09:01,780
>> Pripomeňme, že HTML mala
Dobrý deň, čiarka, svet pod ním.

206
00:09:01,780 --> 00:09:06,090
A ja som proste čerpané v rámci
oválny miesto obdĺžnika práve

207
00:09:06,090 --> 00:09:10,559
sprostredkovať sémanticky, že aj keď
je to uzol v strome, aby som tak povedal,

208
00:09:10,559 --> 00:09:12,100
je to niečo zásadne líši.

209
00:09:12,100 --> 00:09:12,800
Nie je to tag.

210
00:09:12,800 --> 00:09:14,780
Alebo presnejšie povedané, nie je to prvok.

211
00:09:14,780 --> 00:09:16,590
Je to len textový uzol, ak chcete.

212
00:09:16,590 --> 00:09:18,990
Ale to sú úplne
ľubovoľnej ľudskej konvencie.

213
00:09:18,990 --> 00:09:23,180
To je teraz môj spôsob, ako
predstavuje, čo budem ako súhrn

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

215
00:09:24,340 --> 00:09:27,750
>> A ako stranou, veci na
Super ľavom hornom rohu,

216
00:09:27,750 --> 00:09:32,080
otvorený držiak výkričník doc
typ HTML, toto vyzerá ako značku,

217
00:09:32,080 --> 00:09:35,560
ale je to hlúpe roh prípad, kedy
to je len tam, skopírovať a vložiť

218
00:09:35,560 --> 00:09:38,460
ukázať prehliadačov
toto je HTML verzia 5.

219
00:09:38,460 --> 00:09:41,540
Svet sa neustále mení, čo sa
Prvý riadok kódu do stránky by mali byť.

220
00:09:41,540 --> 00:09:43,820
To jednoducho znamená, verzia 5.

221
00:09:43,820 --> 00:09:45,950
Takže to nie je úplne
vyzerajú ako ostatné.

222
00:09:45,950 --> 00:09:48,120
>> Dobre, tak s tým
povedal, budete teraz oceniť

223
00:09:48,120 --> 00:09:50,767
to celkom to hlúpy
tetovanie niekto dostal.

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

225
00:09:51,990 --> 00:09:54,210
>> DAVID J Malan: Tak jo,
a teraz sa to vlastne skok

226
00:09:54,210 --> 00:09:55,710
aby robili niečo s tým.

227
00:09:55,710 --> 00:09:58,610
Spomeňte si, že naposledy
Otvoril som hore CS50 Appliance

228
00:09:58,610 --> 00:10:01,650
a ja som niečo ako
jednoduché, ako otvára gedit.

229
00:10:01,650 --> 00:10:05,190
A zachránil som súbor, aj na
môj desktop-- nikde special--

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

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

232
00:10:07,100 --> 00:10:10,984
>> Takže dovoľte mi, aby som to urobil
again-- hello.html Enter.

233
00:10:10,984 --> 00:10:13,900
A teraz v tomto súbore, budem
pokračovať a opakovať to, čo sme práve

234
00:10:13,900 --> 00:10:18,850
saw-- doc typu html Potom idem
robiť otvorený držiak html uzavretý držiak.

235
00:10:18,850 --> 00:10:21,890
A potom budem preventívne
otvoriť a zatvoriť tag.

236
00:10:21,890 --> 00:10:22,390
Prečo?

237
00:10:22,390 --> 00:10:23,598
Len tak som sa nezabudnite neskôr.

238
00:10:23,598 --> 00:10:26,850
Je to proste dobré praxe, ako je otvorenie
a pravú zloženú zátvorkou naraz.

239
00:10:26,850 --> 00:10:28,900
>> A čo potom prišiel ďalší?

240
00:10:28,900 --> 00:10:30,582
Môžete myslieť na tetovanie.

241
00:10:30,582 --> 00:10:31,450
>> Divákov: hlava.

242
00:10:31,450 --> 00:10:32,500
>> DAVID J Malan: hlava.

243
00:10:32,500 --> 00:10:36,020
A potom tu, som
mal titul, myslím.

244
00:10:36,020 --> 00:10:39,886
A titul bol svojvoľne,
ahoj, svet blízko titulu.

245
00:10:39,886 --> 00:10:42,760
A potom tu dole, telo, z
course-- potom zatvorte značku tela.

246
00:10:42,760 --> 00:10:45,660
A potom už len trochu redundantné,
Mal som to isté tu dole.

247
00:10:45,660 --> 00:10:47,150
>> Tak som sa tvrdí, že sa jedná o webové stránky.

248
00:10:47,150 --> 00:10:49,050
To je niečo, čo
by teraz naživo na webe,

249
00:10:49,050 --> 00:10:51,925
aj keď samozrejme, je to doslova
žiť na mojom desktope práve teraz.

250
00:10:51,925 --> 00:10:55,837
Ale naozaj, keď som minimalizovať gedit,
Pozriem sa na mojom desktope jeho ikonu.

251
00:10:55,837 --> 00:10:58,420
Aj napriek tomu, že sa jedná o zariadenie,
toto mohol robiť na Mac OS

252
00:10:58,420 --> 00:11:01,580
bez TextEdit alebo
Windows Poznámkový blok i.

253
00:11:01,580 --> 00:11:06,115
>> A keď som do toho pustite a dvakrát kliknite
že dokonca aj vyberte-- dobre, poďme

254
00:11:06,115 --> 00:11:07,990
nemožno vybrať, ktoré z dôvodu
Chrome nie je otvorenie.

255
00:11:07,990 --> 00:11:09,281
Poďme ďalej a otvorte Chrome.

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

257
00:11:10,160 --> 00:11:14,040
A potom to Command-O pre otvorené
A prejdite na mojom desktope

258
00:11:14,040 --> 00:11:15,320
a tento súbor otvoriť.

259
00:11:15,320 --> 00:11:20,120
To je, ako prehliadač interpretuje
HTML, zhora nadol, zľava doprava.

260
00:11:20,120 --> 00:11:21,314
Hele, tu je HTML prehliadač.

261
00:11:21,314 --> 00:11:21,980
Tu je hlava.

262
00:11:21,980 --> 00:11:23,250
Tu je titul.

263
00:11:23,250 --> 00:11:24,090
Tu je telo.

264
00:11:24,090 --> 00:11:26,620
A skutočne, to je ako
to robí, že webové stránky.

265
00:11:26,620 --> 00:11:27,800
>> Ale všimnite si URL.

266
00:11:27,800 --> 00:11:32,430
Nikto z vás by mohol vytiahnuť tomto konkrétnom
strana na svoje notebooky práve teraz,

267
00:11:32,430 --> 00:11:34,910
dokonca aj vnútri vašich
zariadení prostredníctvom tejto adresy URL,

268
00:11:34,910 --> 00:11:40,130
pretože súbor: // ukáže, že to je v skutočnosti
na mojom súborovom systéme, môj pevný disk,

269
00:11:40,130 --> 00:11:40,990
nie je vaša.

270
00:11:40,990 --> 00:11:42,440
Takže to nie je všetko, že užitočné.

271
00:11:42,440 --> 00:11:44,940
>> Poďme sa teraz presunúť k
použitím skutočnej webový server.

272
00:11:44,940 --> 00:11:48,309
A ukázalo sa, na CS50 Appliance
je viac než len prostredie, kde

273
00:11:48,309 --> 00:11:51,100
môžete písať kód v C a zostaviť
a spustite ho, ako si robil.

274
00:11:51,100 --> 00:11:55,500
To tiež bol konfigurovaný
Zamestnanci predstavujú typickú web

275
00:11:55,500 --> 00:11:58,290
server, ktorý je na internete,
ten, ktorý by ste mohli platiť za

276
00:11:58,290 --> 00:12:00,210
alebo ten, ktorý je v tzv cloude.

277
00:12:00,210 --> 00:12:02,600
>> A je to beh
štandardná open source

278
00:12:02,600 --> 00:12:06,160
Softvér, napríklad, niečo
s názvom Apache, čo je možno

279
00:12:06,160 --> 00:12:08,700
stále najpopulárnejší web
Server softvér na svete

280
00:12:08,700 --> 00:12:11,030
že tisíce webových stránok, používajú aj dnes.

281
00:12:11,030 --> 00:12:13,420
A tiež má dokonca
softvér, ako je MySQL,

282
00:12:13,420 --> 00:12:16,240
čo je databázový server
že budeme nakoniec dostať,

283
00:12:16,240 --> 00:12:18,330
čo je len povedať
Môžem začať liečbu

284
00:12:18,330 --> 00:12:22,040
Môj spotrebič ako plnohodnotného servera
že nie som platiť za inde.

285
00:12:22,040 --> 00:12:25,980
Je to jednoducho žije na svojom vlastnom notebooku pre
vývoj a pohodlie účely.

286
00:12:25,980 --> 00:12:27,870
>> Tak poďme do toho a
využiť tohto.

287
00:12:27,870 --> 00:12:30,120
Chystám sa ísť dopredu a
otvoriť okno terminálu.

288
00:12:30,120 --> 00:12:33,030
A ja idem ďalej a
move-- vlastne prvýkrát som

289
00:12:33,030 --> 00:12:34,860
bude navigovať na mojom desktope.

290
00:12:34,860 --> 00:12:36,400
Ak sa mi ls, je tu hello.html.

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

292
00:12:37,022 --> 00:12:38,730
A ja idem
dopredu a začať používať

293
00:12:38,730 --> 00:12:40,800
nový adresár máme
nepoužíval pred dnes.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- budem pohybovať
na ../vhosts pre virtuálne hosts--

295
00:12:46,840 --> 00:12:50,940
o tom viac v future-- a potom
do adresára s názvom localhost,

296
00:12:50,940 --> 00:12:54,420
čo je prezývka daná takmer
akýkoľvek počítač, či už je to Mac, PC,

297
00:12:54,420 --> 00:12:57,560
alebo Linux počítač, a potom
konkrétne do adresára, ktorý sme my,

298
00:12:57,560 --> 00:13:01,260
Zamestnanci už vytvorili pre vás, keď
ste si prístroj s názvom

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

300
00:13:01,760 --> 00:13:04,551
A ako už názov napovedá, čokoľvek
Dal som v tejto zložke, v teórii,

301
00:13:04,551 --> 00:13:07,790
bude teraz
verejnosti, aspoň pre ľudí

302
00:13:07,790 --> 00:13:10,030
ktorí majú priamy
pripojenie k počítaču.

303
00:13:10,030 --> 00:13:13,160
>> Takže teraz nechaj ma ísť dopredu a
robiť cd toho istého adresára

304
00:13:13,160 --> 00:13:15,490
tak vidím, čo je
deje a typu ls.

305
00:13:15,490 --> 00:13:17,630
A vskutku, to je
Jediné, čo tam je.

306
00:13:17,630 --> 00:13:23,250
Tvrdím teraz, že preto, že som si toto
súbor hello.html vnútri adresára

307
00:13:23,250 --> 00:13:26,940
nazýva verejná vnútri adresára
s názvom localhost vnútri adresára

308
00:13:26,940 --> 00:13:29,810
tzv vhosts, ktoré
vďaka zamestnancom CS50

309
00:13:29,810 --> 00:13:34,390
bol pre-nakonfigurovaný tak, aby ich
koreň webového servera,

310
00:13:34,390 --> 00:13:36,900
Teraz môžem snáď urobiť.

311
00:13:36,900 --> 00:13:38,390
>> Idem otvoriť novú kartu.

312
00:13:38,390 --> 00:13:40,090
A ja idem nie file: //.

313
00:13:40,090 --> 00:13:44,520
Chystám sa použiť skutočný
http / localhost, čo

314
00:13:44,520 --> 00:13:47,470
znova, je prezývka
pre moju vlastnú server.

315
00:13:47,470 --> 00:13:51,085
A potom som ísť s tým, čo
názov súboru, len aby bolo jasno?

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

317
00:13:52,680 --> 00:13:54,320
Ak je tento príbeh asi bude?

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
>> Takže inými slovami, chcem teraz toto
je môj vlastný počítač, moje vlastné zariadenie,

322
00:14:04,270 --> 00:14:05,660
ako by ich to skutočné servera.

323
00:14:05,660 --> 00:14:07,490
Jeho prezývka je localhost.

324
00:14:07,490 --> 00:14:10,210
Ale myslieť na localhost ako ako
Facebook.com google.com, čokoľvek.

325
00:14:10,210 --> 00:14:11,600
Je to len môj miestny názov.

326
00:14:11,600 --> 00:14:14,810
A potom finále chcem, je v
koreň pevného disku, aby som tak povedal,

327
00:14:14,810 --> 00:14:17,729
alebo koreň webového servera,
ergo lomítko a potom

328
00:14:17,729 --> 00:14:18,770
názov súboru hello.html.

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

330
00:14:19,880 --> 00:14:21,930
>> Dovoľte mi, aby som oddialiť a stlačte Enter.

331
00:14:21,930 --> 00:14:24,266
A naozaj, tam je teraz moje webové stránky.

332
00:14:24,266 --> 00:14:25,390
Takže je to trochu inak.

333
00:14:25,390 --> 00:14:26,880
A to je len ako nezaujatý.

334
00:14:26,880 --> 00:14:27,904
Toto je stará verzia.

335
00:14:27,904 --> 00:14:29,070
Dovoľte mi, aby som zmenšiť písmo späť.

336
00:14:29,070 --> 00:14:29,745
To je starý.

337
00:14:29,745 --> 00:14:30,890
To je nová.

338
00:14:30,890 --> 00:14:35,430
Ale čo je v podstate deje
teraz je, že HTTP je používaný.

339
00:14:35,430 --> 00:14:39,344
>> Urobme to trochu jasnejšie, alebo
ak chcete, trochu komplikovanejšia.

340
00:14:39,344 --> 00:14:41,760
Nechaj ma ísť na pravom dolnom rohu
v pravom hornom rohu môjho zariadenia.

341
00:14:41,760 --> 00:14:44,000
A všimnite si, že to všetko
čas, tam bolo veľa.

342
00:14:44,000 --> 00:14:47,330
To je jedinečná adresa
vášho CS50 Appliance.

343
00:14:47,330 --> 00:14:50,800
Je to súkromná adresa,
Ako vyplýva z 172,16,

344
00:14:50,800 --> 00:14:53,860
čo jednoducho znamená len fyzicky
prístup k tejto webový server.

345
00:14:53,860 --> 00:14:56,340
Všetko je firewallom a
pekne chránený od zvyšku

346
00:14:56,340 --> 00:14:58,130
sveta pretože toto riešenie.

347
00:14:58,130 --> 00:15:01,920
>> A teraz si všimnúť ale keď pôjdem do
táto adresa nie je v mojom zariadení,

348
00:15:01,920 --> 00:15:04,340
ale Mac OS-- idem
vrátiť sa sem.

349
00:15:04,340 --> 00:15:05,930
To je môj Mac teraz.

350
00:15:05,930 --> 00:15:08,460
A teraz idem otvoriť
táto verzia Chrome tu.

351
00:15:08,460 --> 00:15:17,370
A ja idem na http: //172.16.25
/ A som zabudnúť na rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Takže idem na návštevu z môjho počítača Mac
že IP adresa /hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
A teraz vidím z môjho počítača Mac
že moje CS50 Appliance, ktorý je

354
00:15:29,850 --> 00:15:32,600
IP adresa je, že
číslo, skutočne chová

355
00:15:32,600 --> 00:15:34,320
ako webový server na internete.

356
00:15:34,320 --> 00:15:36,944
Nemá pekný ľahké
zapamätateľný názov ako Facebook.com,

357
00:15:36,944 --> 00:15:40,370
ale je to pomocou HTTP
Zdá sa, že aj keď chróm

358
00:15:40,370 --> 00:15:43,560
je druh zjednodušenie svet
pre nás, ale nám to ukazuje HTTP.

359
00:15:43,560 --> 00:15:46,210
Ale je to naozaj presne to.

360
00:15:46,210 --> 00:15:48,470
Chrome je len ukladanie niektorých
úderov v týchto dňoch.

361
00:15:48,470 --> 00:15:50,530
A to je to, čo vidíme.

362
00:15:50,530 --> 00:15:51,890
>> Tak to je všetko v poriadku a dobré.

363
00:15:51,890 --> 00:15:53,740
Ale je to celkom nezaujatý stránku.

364
00:15:53,740 --> 00:15:56,230
Nechaj ma ísť a niečo urobiť
dnes trochu inak.

365
00:15:56,230 --> 00:15:57,910
Tak nechaj ma ísť späť do gedit.

366
00:15:57,910 --> 00:16:00,580
A namiesto toho, ahoj,
svet, poďme dať obrázok.

367
00:16:00,580 --> 00:16:05,880
A ja som tvrdil, zo before-- nechaj ma ísť
do mojej localhost adresára verejnosti.

368
00:16:05,880 --> 00:16:10,580
A nechaj ma ísť napred a kopírovanie
celá partia súborov od dnešného dňa

369
00:16:10,580 --> 00:16:15,633
z môjho Dropbox zložky na tu.

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

371
00:16:19,470 --> 00:16:21,680
>> Teraz, keď som typ LS, pozrite sa
na všetkých týchto súboroch

372
00:16:21,680 --> 00:16:24,940
že som distribuované
Webová stránka ihrisko je v predstihu dnes,

373
00:16:24,940 --> 00:16:26,830
z ktorých jeden je ešte hello.html.

374
00:16:26,830 --> 00:16:27,830
Takže tam je to jedno.

375
00:16:27,830 --> 00:16:30,730
A pripomínajú túto hlúpu jeden
z minulého time-- cat.jpg.

376
00:16:30,730 --> 00:16:34,550
Tak skúsim vložiť
cat.jpg vnútri mojej webovej stránky.

377
00:16:34,550 --> 00:16:37,690
>> Chystám sa ísť dopredu
a to cat.jpg, zachrániť.

378
00:16:37,690 --> 00:16:38,950
Nechaj ma ísť späť do prehliadača Chrome.

379
00:16:38,950 --> 00:16:41,140
A dovoľte mi priblížiť
písmo a teraz znovu.

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

381
00:16:43,090 --> 00:16:45,030
Jejda, kde som si to?

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

383
00:16:48,210 --> 00:16:51,520
Standby-- stále mám ten starý
verzia z môjho stolného Open.

384
00:16:51,520 --> 00:16:56,020
Tak nechaj ma ísť do môjho VHOST, môj
localhost, môj verejný a hello.html.

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

386
00:16:57,320 --> 00:17:00,670
Takže teraz nechaj ma ísť dopredu a
hovoria cat.jpg vnútri tela

387
00:17:00,670 --> 00:17:02,830
tam, kde chcem, aby to bolo
Zobrazí sa a znova.

388
00:17:02,830 --> 00:17:04,560
Samozrejme, že to nie je správne.

389
00:17:04,560 --> 00:17:08,050
>> Tak musím povedať, prehliadača malý
viac zámerne, čo chcem, aby to robiť.

390
00:17:08,050 --> 00:17:10,210
Jednoducho napísaním názov
samozrejme nie je dostačujúca.

391
00:17:10,210 --> 00:17:15,134
Tak pripomenúť, že tam bol ďalší
tag, obraz, img krátkosti.

392
00:17:15,134 --> 00:17:17,550
Je to len preto, že ľudia
nepáči typu Plný slová.

393
00:17:17,550 --> 00:17:19,050
A potom môžeme urobiť zdroj = "cat.jpg".

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

395
00:17:21,470 --> 00:17:23,550
>> A teraz budem robiť
Jedna vec tu iný.

396
00:17:23,550 --> 00:17:25,390
Aj keď všetky
Naše značky, doteraz

397
00:17:25,390 --> 00:17:28,086
mal tento pojem
začať tag a koncový tag,

398
00:17:28,086 --> 00:17:30,210
že nie je naozaj
zmysel pre obrázok, nie?

399
00:17:30,210 --> 00:17:32,430
Obraz je buď tam, alebo tam nie je.

400
00:17:32,430 --> 00:17:36,650
A tak ľudia prišli
s jednoduchšie dohovoru.

401
00:17:36,650 --> 00:17:40,310
Ak máte značku, ktorá môže ako
začínať a končiť v rovnakom time--

402
00:17:40,310 --> 00:17:43,790
to môže byť prázdny, tak sa speak-- len
vložiť lomítko vnútri tagu

403
00:17:43,790 --> 00:17:44,710
na samom konci.

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

405
00:17:45,776 --> 00:17:47,150
Teraz mi dovoľte vrátiť sa k môjmu prehliadači.

406
00:17:47,150 --> 00:17:50,377
Hit Reload Sakra, niečo je zle.

407
00:17:50,377 --> 00:17:52,460
Pravdepodobne ste videl
občas na webe,

408
00:17:52,460 --> 00:17:53,600
aj keď to nie je tvoja vina.

409
00:17:53,600 --> 00:17:54,766
Je to chyba webového servera.

410
00:17:54,766 --> 00:17:56,240
Čo ódy to naznačujú?

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

412
00:17:57,450 --> 00:17:58,009
Je to rozbité.

413
00:17:58,009 --> 00:17:59,300
To je miesto, kde sa obraz patrí.

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

415
00:17:59,700 --> 00:18:01,560
>> Divákov: Ale to nie je
majú prístup k obrazu.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J Malan: Nezáleží
majú prístup k obrazu.

417
00:18:03,070 --> 00:18:05,230
Že, alebo ešte horšie, možno
nie je ani neexistuje.

418
00:18:05,230 --> 00:18:06,729
Uvidíme, či sa nemôžeme diagnostikovať, že.

419
00:18:06,729 --> 00:18:09,390
Pripomeňme si z poslednej doby, že ak
Chrome, v zariadení,

420
00:18:09,390 --> 00:18:11,870
alebo dokonca aj na vašom počítači Mac alebo PC,
idete do menu pre vývojárov

421
00:18:11,870 --> 00:18:14,650
a prejdite na Nástroje pre vývojárov
možnosť, ktorá pravdepodobne nemáš

422
00:18:14,650 --> 00:18:16,850
moc nepoužíva, alebo vôbec.

423
00:18:16,850 --> 00:18:20,780
A keď pôjdem k sieti
a znova načítajte stránku,

424
00:18:20,780 --> 00:18:24,110
poďme sa vlastne pozrieť na HTTP
požiadavky, ktoré sú vyrobené.

425
00:18:24,110 --> 00:18:28,400
>> Vyzerá to, že je hello.html
naozaj v poriadku, teda 200.

426
00:18:28,400 --> 00:18:30,630
Ale cat.jpg je 403.

427
00:18:30,630 --> 00:18:31,650
Takže to nie je 404.

428
00:18:31,650 --> 00:18:33,490
Súbor pravdepodobne existuje.

429
00:18:33,490 --> 00:18:35,250
403 znamená zakázané.

430
00:18:35,250 --> 00:18:37,790
Tak to je trochu mätúce.

431
00:18:37,790 --> 00:18:42,340
Chystám sa vrátiť
k môjmu terminálovom okne.

432
00:18:42,340 --> 00:18:43,700
Dovoľte mi, aby som priblíženie tu.

433
00:18:43,700 --> 00:18:44,750
A dovoľte mi urobiť ls.

434
00:18:44,750 --> 00:18:46,430
Je tu tie isté súbory.

435
00:18:46,430 --> 00:18:49,410
>> Teraz mi dovoľte urobiť ls-l,
ktoré ste pravdepodobne

436
00:18:49,410 --> 00:18:53,350
používa pred pozrieť sa na súbor
Veľkosti možná alebo časové pečiatky.

437
00:18:53,350 --> 00:18:55,590
A vidíme veľa
zdrvujúcu informácie.

438
00:18:55,590 --> 00:18:57,040
Ale všimnite si, že pár detailov.

439
00:18:57,040 --> 00:19:01,660
Tu je hello.html v tomto
riadku tu a tu je cat.jpg.

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

441
00:19:02,934 --> 00:19:05,850
A to je práve spotrebičom
užívateľsky prívetivý zvýraznením JPEG je

442
00:19:05,850 --> 00:19:07,380
vo fialovej takhle.

443
00:19:07,380 --> 00:19:11,470
Ale čo iného sa líši u
veľkosť súboru a názov súboru?

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

445
00:19:13,438 --> 00:19:14,754
>> Divákov: [nepočuteľné].

446
00:19:14,754 --> 00:19:16,920
DAVID J Malan: Jo, je tu
viac dve R je tu.

447
00:19:16,920 --> 00:19:20,170
Všimnite si, čo hello.html sa deje.

448
00:19:20,170 --> 00:19:24,050
Tak to dopadá, že mená
tento adresár verejnosť je dôležité.

449
00:19:24,050 --> 00:19:26,400
Všetko, čo v tomto adresári
má byť verejná.

450
00:19:26,400 --> 00:19:28,790
Ale to nestačí
len presúvať súbory tam.

451
00:19:28,790 --> 00:19:31,480
Tiež je potrebné zmeniť
spôsob súborov,

452
00:19:31,480 --> 00:19:35,180
zmeniť povolenia
súbor, ktorý chcete aktívne nie

453
00:19:35,180 --> 00:19:37,650
je predvolené nastavenie,
čo je to, že len viem čítať

454
00:19:37,650 --> 00:19:39,220
a písať, ja ako vlastník.

455
00:19:39,220 --> 00:19:43,540
Chcem celý svet všetky v
môcť prečítať môj súbor, aby som tak povedal.

456
00:19:43,540 --> 00:19:44,950
Prečítajte si jednoducho znamená zobrazenie.

457
00:19:44,950 --> 00:19:49,780
>> A skutočne, ako uvidíte v probléme
nastaviť sedem, to je to, čo znamenajú, že takýto R je.

458
00:19:49,780 --> 00:19:53,160
Tieto dve R je priemerná nechať všetky
inde vo svete aj prečítať,

459
00:19:53,160 --> 00:19:55,300
zvlášť teraz,
je to v tomto adresári.

460
00:19:55,300 --> 00:19:59,620
Takže najjednoduchší spôsob, ako to napraviť, je
ísť do môjho riadku a to chmod k zmene

461
00:19:59,620 --> 00:20:05,580
Režim a potom vykonajte + R, dohromady,
všetci, všetci, a r pre čítanie,

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

463
00:20:07,944 --> 00:20:10,360
Sa zdanlivo nič nedeje, čo
obvykle znamená dobrú vec.

464
00:20:10,360 --> 00:20:13,850
Takže ls-l again-- teraz
Poďme sa pozrieť na cat.jpg.

465
00:20:13,850 --> 00:20:15,750
A toto oprávnenie
Zdá sa, že sa zmenili.

466
00:20:15,750 --> 00:20:18,670
Mimochodom, ak urobíte
chyba a vy, napríklad,

467
00:20:18,670 --> 00:20:23,210
práve urobil your-- nemám víš-- esej
verejne prístupné náhodou,

468
00:20:23,210 --> 00:20:25,480
môžete robiť pravý opak, chmod a-R.

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

470
00:20:25,909 --> 00:20:28,200
Aj keď úprimne povedané, to by nemalo
vo verejnom zozname

471
00:20:28,200 --> 00:20:29,760
rovnako, či je to problém.

472
00:20:29,760 --> 00:20:32,475
>> Takže teraz sa vráťme do
môj prehliadač a Obnoviť.

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

474
00:20:32,904 --> 00:20:34,820
A ja idem na tlačidlo
malý Ghostbusters

475
00:20:34,820 --> 00:20:38,030
symbol jasné, že časť
obrazovky, takže môžeme vidieť nové požiadavky.

476
00:20:38,030 --> 00:20:40,630
A skutočne, tu je
Priadka Cat pred rokom.

477
00:20:40,630 --> 00:20:43,010
Ale oveľa dôležitejšie je,
technicky, je

478
00:20:43,010 --> 00:20:45,565
číslo 200, ktorá
znamená, že to mám v poriadku.

479
00:20:45,565 --> 00:20:47,190
Dobre, tak to je všetko v poriadku a dobré.

480
00:20:47,190 --> 00:20:48,940
Ale my nie robiť
to najlepšie z webových stránok,

481
00:20:48,940 --> 00:20:51,967
ani sa budeme snažiť príliš ťažké
aby najmódnejšie webových stránok dnes.

482
00:20:51,967 --> 00:20:54,550
Ale poďme aspoň niečo
Super zoznámiť pred hrkajúce

483
00:20:54,550 --> 00:20:56,030
okrem niekoľkých ďalších značiek.

484
00:20:56,030 --> 00:20:58,470
Takže predpokladám, že nemám len chcete mačku tu.

485
00:20:58,470 --> 00:21:02,530
Dajme tomu, že vlastne chcem to
mačka odkazy na niečo.

486
00:21:02,530 --> 00:21:07,210
>> By som mohol, napríklad
niečo také.

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

488
00:21:08,580 --> 00:21:12,890
pre kotevné preklad pre
hyper referencie equals--

489
00:21:12,890 --> 00:21:17,440
a povedzme niečo
ako www.google.com konci

490
00:21:17,440 --> 00:21:19,540
citovať zatvoriť držiak.

491
00:21:19,540 --> 00:21:22,000
A teraz hľadať pre mačky.

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

493
00:21:23,520 --> 00:21:26,760
Takže to má len jeden druh
z úplne novej detail.

494
00:21:26,760 --> 00:21:28,190
Tag samozrejme, je iný.

495
00:21:28,190 --> 00:21:31,770
Je to názov pre kotvu
href alebo hyper referencie.

496
00:21:31,770 --> 00:21:35,269
>> Ale oveľa dôležitejšie je, že je
tento syntaktický funkcie tu.

497
00:21:35,269 --> 00:21:37,810
To je to, čo začneme volať
nie tag, ale atribút.

498
00:21:37,810 --> 00:21:40,830
A atribút je niečo, čo
mení správanie značky.

499
00:21:40,830 --> 00:21:45,400
A tento atribút href, prostriedky
zmeniť správanie tohto kotvy

500
00:21:45,400 --> 00:21:48,430
tak, že keď je to klikli,
to ide na túto adresu URL tu.

501
00:21:48,430 --> 00:21:50,330
A samozrejme, že URL je Google.

502
00:21:50,330 --> 00:21:53,951
>> Medzitým, čo je to
text tu bude?

503
00:21:53,951 --> 00:21:55,950
No, že to bude
čo vlastne ľudské

504
00:21:55,950 --> 00:21:58,470
vidí ako podčiarknutý
odkaz, tak jednoduché, ako to.

505
00:21:58,470 --> 00:21:59,220
Takže skúsme to.

506
00:21:59,220 --> 00:21:59,980
Dovoľte mi, aby som ho uložíte.

507
00:21:59,980 --> 00:22:01,650
Som stále v hello.html.

508
00:22:01,650 --> 00:22:05,360
Ale vo verziách pre on-line, uvidíte
skutočné názvy súborov sme vopred pripravených.

509
00:22:05,360 --> 00:22:06,805
Nechaj ma ísť dopredu a znova.

510
00:22:06,805 --> 00:22:08,680
A teraz je to veľmi
nezaujatý strana stále.

511
00:22:08,680 --> 00:22:10,910
Ale keď som sa vznášať sa nad there--
a je to trochu malé,

512
00:22:10,910 --> 00:22:13,576
ale- môžete vidieť na spodnej časti
ľavom rohu obrazovky,

513
00:22:13,576 --> 00:22:15,242
to naozaj bude google.com.

514
00:22:15,242 --> 00:22:19,280
A keď som kliknite na to, že to bude
metla mi cestu k vlastnému Google.

515
00:22:19,280 --> 00:22:22,610
>> Ale všimnite tu príležitosť pre
vykorisťovania, rovnako ako stranou.

516
00:22:22,610 --> 00:22:25,150
A vrátime sa k iným
otázky bezpečnosti pred dlho.

517
00:22:25,150 --> 00:22:29,290
Vzhľadom k tomu, že je táto dichotómia
medzi, kam ísť, a to, čo hovoríte,

518
00:22:29,290 --> 00:22:34,722
by ste mohli urobiť niečo ako
tohle-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, a teraz keď som znova
po uložení túto stránku,

520
00:22:37,134 --> 00:22:38,800
to vyzerá, že pôjdem na Google.

521
00:22:38,800 --> 00:22:40,966
Ale neexistuje žiadny dôvod, prečo som
ísť na Google, nie?

522
00:22:40,966 --> 00:22:47,460
Mohol by som naozaj ísť do niečoho, ako je
badguy.com, znova načítajte stránku sem.

523
00:22:47,460 --> 00:22:49,750
A oznámenia, stále vyzerá ako Google.

524
00:22:49,750 --> 00:22:52,020
A iba v prípade, že som ostrý
dosť vznášať sa nad tu

525
00:22:52,020 --> 00:22:54,770
Nevidím to dokonca ísť
ísť na iné miesto.

526
00:22:54,770 --> 00:22:57,400
>> Takže ak ste niekedy dostali
e-mail, a to najmä

527
00:22:57,400 --> 00:22:59,610
jeden z Paypal, alebo
zdanlivo z Paypal

528
00:22:59,610 --> 00:23:01,830
s výzvou na prihlásenie
na váš účet, to

529
00:23:01,830 --> 00:23:06,380
je dôvod, prečo by ste mali nikdy
niekedy na odkazy v e-mailoch,

530
00:23:06,380 --> 00:23:07,930
úprimne povedané, všetky odkazy v e-mailoch.

531
00:23:07,930 --> 00:23:10,380
Ak viete, že máte skutočný
peniaze na Paypal alebo bankou

532
00:23:10,380 --> 00:23:14,250
Ameriky alebo Fidelity alebo na ktorúkoľvek
webové stránky, ručne zadajte ju.

533
00:23:14,250 --> 00:23:17,530
Vzhľadom k tomu, pozrite sa, ako ľahké je
prinútiť niekoho do prezentovať to, čo

534
00:23:17,530 --> 00:23:18,526
vyzerá ako odkaz.

535
00:23:18,526 --> 00:23:20,400
Ale v skutočnosti išlo
ísť absolútne kdekoľvek.

536
00:23:20,400 --> 00:23:23,301
>> A je tu oveľa väčšia
hrozby, ako toto.

537
00:23:23,301 --> 00:23:25,300
V skutočnosti, je to trochu
dotyčnice teraz, ale jeden

538
00:23:25,300 --> 00:23:28,430
z tých najlepších, čo som kedy videl
ktorá od tej doby bola uzavretá,

539
00:23:28,430 --> 00:23:34,060
je niekto viedol ľudia
to-- tak to by mohol povedať,

540
00:23:34,060 --> 00:23:37,660
Kliknite tu pre prihlásenie do vášho
účet, bankový účet.

541
00:23:37,660 --> 00:23:40,985
A to bola Bank of the West.

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

543
00:23:43,030 --> 00:23:44,250
>> Takže niekto kúpil toto.

544
00:23:44,250 --> 00:23:47,090
A je to trochu lepšie vidieť
je v mono rozložené písmo zväčšovať

545
00:23:47,090 --> 00:23:49,190
v na 30 stôp projektorom.

546
00:23:49,190 --> 00:23:51,720
Ale keď je to malé písmo
e-mail, že ste príjem,

547
00:23:51,720 --> 00:23:54,690
to vyzerá ako bankofthewest.com,
nie bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
ktoré niekto zaplatil 10 dolárov kúpiť.

549
00:23:58,230 --> 00:24:00,840
A potom to viedlo je, aby
ekvivalent nejaké zlé webové stránky.

550
00:24:00,840 --> 00:24:05,540
>> A uvidíte too-- vlastne môžeme urobiť
tohle-- keď pôjdem na aktuálnej webovej stránky,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, opäť,
stiahnutie z poslednej doby

552
00:24:10,335 --> 00:24:13,210
že ak je to ich webové stránky a
ste zvedaví, ako to funguje,

553
00:24:13,210 --> 00:24:15,610
môžete samozrejme ísť do
Vývojárske nástroje Chrome.

554
00:24:15,610 --> 00:24:18,890
A môžete vidieť všetky
HTML tam pekne formátovaný.

555
00:24:18,890 --> 00:24:20,890
>> Ale viac k veci,
ste cam-- poďme uzavrieť

556
00:24:20,890 --> 00:24:24,760
tohle-- môžete ísť Zobraziť
Developer Zobraziť zdrojový kód.

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

558
00:24:25,770 --> 00:24:28,350
Prečo som len kopírovať
to všetko a potom som

559
00:24:28,350 --> 00:24:31,630
môže ísť do môjho malého gedit okne
tu a vytvoriť svoj vlastný webové stránky.

560
00:24:31,630 --> 00:24:33,210
Uložte na túto hello.html.

561
00:24:33,210 --> 00:24:36,770
A pravdepodobne to bude zlomiť,
pretože to nie je tak jednoduché zvyčajne.

562
00:24:36,770 --> 00:24:41,590
Ale teraz, keď znovu načítať svoju vlastnú stránku na
moje vlastné CS50 Appliance a stlačte Restore,

563
00:24:41,590 --> 00:24:42,990
OK, niektoré veci zlomil.

564
00:24:42,990 --> 00:24:45,750
Ale som dosť blízko, aby s
moje vlastné bankové webové stránky, nie?

565
00:24:45,750 --> 00:24:46,570
To všetko HTML--

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

567
00:24:47,370 --> 00:24:49,210
>> DAVID J Malan: --I
ani actually-- a

568
00:24:49,210 --> 00:24:52,210
viem, že je to niekto, kto
by v skutočnosti kliknite na tieto odkazy tiež.

569
00:24:52,210 --> 00:24:54,864
Tak jasne, niektoré veci zlomil.

570
00:24:54,864 --> 00:24:56,780
Ale to povedie
nám do diskusie,

571
00:24:56,780 --> 00:25:00,810
zbytočne práve teraz, na to, čo
CSS, kaskádové štýly, sú,

572
00:25:00,810 --> 00:25:03,410
a ako ste vlastne
stiahnuť ďalšie súbory HTML

573
00:25:03,410 --> 00:25:06,140
a JPEG súbory GIF súbory, ktoré
Webové stránky by mohli byť pomocou.

574
00:25:06,140 --> 00:25:07,960
Ale to všetko je uskutočniteľný.

575
00:25:07,960 --> 00:25:11,110
Ale je to naozaj scvrkáva
Tieto veľmi jednoduché heuristiky.

576
00:25:11,110 --> 00:25:14,450
>> Takže teraz poďme len prelistovať
Niekoľko ďalších príkladov HTML

577
00:25:14,450 --> 00:25:16,680
len aby vám pocit
čo iného môžete robiť.

578
00:25:16,680 --> 00:25:18,670
Napríklad, to je list.html.

579
00:25:18,670 --> 00:25:23,240
Dajme tomu, že som chcel, aby sa webové stránky
so zoznamom domov v quad.

580
00:25:23,240 --> 00:25:28,960
Mohol by som použiť tag ul pre neusporiadaný
zoznam a potom položka zoznamu dieťa

581
00:25:28,960 --> 00:25:33,760
a potom opakovať over-- alebo zoznamu,
rather-- domy v otázke.

582
00:25:33,760 --> 00:25:36,080
>> A keď som to otvoriť sa, ideme na to.

583
00:25:36,080 --> 00:25:40,670
Poďme nie hello.html,
ale list.html.

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

585
00:25:42,160 --> 00:25:43,000
Ako môžem tento problém vyriešiť?

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

587
00:25:45,679 --> 00:25:47,220
Je to rovnaký problém ako predtým, nie?

588
00:25:47,220 --> 00:25:52,510
Tak ma nechaj robiť chmod-- oops--
chmod + r list.html.

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

590
00:25:54,610 --> 00:25:59,610
A teraz keď som sa vrátiť do svojho prehliadača
a kliknite na tlačidlo Načítať znovu, tu to je.

591
00:25:59,610 --> 00:26:02,360
Takže ak ste niekedy chceli, aby
zoznam s odrážkami, môžete to urobiť.

592
00:26:02,360 --> 00:26:06,210
Ak chcete byť super fantázie a vytvoriť
usporiadaného zoznamu, nie je neusporiadaný zoznam,

593
00:26:06,210 --> 00:26:10,170
zmeniť tie, ol, znova načítajte stránku, a
Teraz prehliadač bude počítať za vás.

594
00:26:10,170 --> 00:26:11,241
>> Čo iného môžeme robiť?

595
00:26:11,241 --> 00:26:13,990
No, pár others-- ak
máte dlhé odsekov text--

596
00:26:13,990 --> 00:26:15,698
Napríklad, niektoré
Latinský text ako tohle--

597
00:26:15,698 --> 00:26:20,730
a budete chcieť v samostatných odsekoch,
open p, v blízkosti p tagu odseku.

598
00:26:20,730 --> 00:26:22,010
A to znova a znova.

599
00:26:22,010 --> 00:26:26,600
A keď som teraz otvoriť tento súbor,
paragraphs.html, dobre, to

600
00:26:26,600 --> 00:26:27,570
je stále nepríjemné.

601
00:26:27,570 --> 00:26:34,320
Takže teraz poďme sa vrátiť k môjmu
výzva, chmod a + r r hviezda .html--

602
00:26:34,320 --> 00:26:36,099
pekný malý divoká karta, aby som tak povedal.

603
00:26:36,099 --> 00:26:37,890
To by mali stanoviť všetky
tieto problémy pre mňa.

604
00:26:37,890 --> 00:26:38,990
Poďme znova.

605
00:26:38,990 --> 00:26:40,500
K dispozícii sú tri body.

606
00:26:40,500 --> 00:26:42,930
>> A teraz poďme do toho
a otvoriť jednu ďalšiu.

607
00:26:42,930 --> 00:26:44,310
Ako sa o stôl?

608
00:26:44,310 --> 00:26:46,440
Určite ste si všimli stolný vzhľad
trochu zložitejšie.

609
00:26:46,440 --> 00:26:49,110
Ale je to rovnaké idea--
open tag, open tag,

610
00:26:49,110 --> 00:26:51,360
open, open, open, close tag, open tag.

611
00:26:51,360 --> 00:26:54,410
A to sa stalo, stať
stôl, ktorého hranice je zrejme

612
00:26:54,410 --> 00:26:58,500
Bude hrúbku 1-- čokoľvek
že means-- riadok tabuľky, tabuľka

613
00:26:58,500 --> 00:27:00,320
dát, čo znamená bunku.

614
00:27:00,320 --> 00:27:03,840
A keď som sa vrátiť do svojho prehliadača
tu a ísť do table.html,

615
00:27:03,840 --> 00:27:05,840
môžete vidieť niečo
takto, odporná.

616
00:27:05,840 --> 00:27:07,840
Ale dostaneme do bodu,
kde môžeme skutočne

617
00:27:07,840 --> 00:27:09,260
robiť veci krajšie než to.

618
00:27:09,260 --> 00:27:10,530
>> Dovoľte mi teda stanoviť teraz.

619
00:27:10,530 --> 00:27:11,870
Je tu zväzky viac značiek.

620
00:27:11,870 --> 00:27:15,225
A HTML je úžasné vyzdvihnúť
pretože úprimne povedané, všetko, čo potrebujete urobiť,

621
00:27:15,225 --> 00:27:17,600
sa pozrieť na existujúcich webových stránok
s ktorými ste sa zoznámili.

622
00:27:17,600 --> 00:27:20,340
A ty si ako, oh, to je ako
robili to esteticky.

623
00:27:20,340 --> 00:27:23,159
>> Alebo sa môžete pozrieť na všetky on-line
zdroje o tom, ako funguje HTML,

624
00:27:23,159 --> 00:27:25,700
a uvidíte, že tam je
Celý slovník ďalších značiek.

625
00:27:25,700 --> 00:27:30,110
Ale s jednoduchým mentálnym modelu
sám, že takmer akýkoľvek štítok otvorení

626
00:27:30,110 --> 00:27:33,620
musia byť uzavreté, je to naozaj
sa stačí naučiť sám

627
00:27:33,620 --> 00:27:36,950
HTML po porozumieť
tieto základné myšlienky značiek

628
00:27:36,950 --> 00:27:40,520
a atribúty a dobre formedness
že sme hovorili o tom,

629
00:27:40,520 --> 00:27:44,697
zavrieť niečo, čo by sme mohli otvoriť
takže nemáme pliesť prehliadač.

630
00:27:44,697 --> 00:27:46,780
Takže poďme sa teraz to
zaujímavejšie úrovne

631
00:27:46,780 --> 00:27:48,100
tým, že pôjdete na aktuálnu.

632
00:27:48,100 --> 00:27:51,095
A poďme na mojom Macu
tu, na google.com.

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

634
00:27:52,280 --> 00:27:54,020
A teraz notice-- poďme to urobiť.

635
00:27:54,020 --> 00:27:57,280
Som gong ísť
Nastavenie, Nastavenie hľadania.

636
00:27:57,280 --> 00:28:01,070
Chcem vypnúť tento nepríjemný okamih
Výsledky vec, okamžite tam, kde

637
00:28:01,070 --> 00:28:02,450
začne reagovať na vaše písanie.

638
00:28:02,450 --> 00:28:05,300
Poďme to urobiť staršie školu tak
sme skutočne vidieť, čo sa deje.

639
00:28:05,300 --> 00:28:08,260
>> Takže ja idem, aby som si zachránil
Nastavenie tu Google.

640
00:28:08,260 --> 00:28:11,160
A teraz notice-- budem
hľadať niečo ako mačky.

641
00:28:11,160 --> 00:28:14,500
A je to stále robí auto
Kompletné tu, ale na základe vecí,

642
00:28:14,500 --> 00:28:15,970
ľudia zadali v minulosti.

643
00:28:15,970 --> 00:28:17,490
Povšimnime si ale, čo sa bude diať.

644
00:28:17,490 --> 00:28:20,272
>> V URL v okamihu, keď
je to len google.com.

645
00:28:20,272 --> 00:28:22,650
A technicky je to lomítko.

646
00:28:22,650 --> 00:28:25,910
Google práve ukladanie znak
a nie je nám to ukazuje.

647
00:28:25,910 --> 00:28:30,400
Sú nám ukazuje https, len
byť super upokojujúce, že sme

648
00:28:30,400 --> 00:28:32,850
v zabezpečenom alebo šifrované stránky.

649
00:28:32,850 --> 00:28:35,690
>> Tak nechaj ma ísť dopredu a hľadať pre mačky.

650
00:28:35,690 --> 00:28:37,670
Teraz to bol naozaj
ohromujúci rýchlo.

651
00:28:37,670 --> 00:28:39,470
Pozrite sa na dĺžke tejto adresy URL.

652
00:28:39,470 --> 00:28:43,070
Ale ukazuje sa, že väčšina z týchto vecí
v URL je vlastne k ničomu.

653
00:28:43,070 --> 00:28:45,320
Chystám sa začať mazať
veci nerozumiem.

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

655
00:28:46,560 --> 00:28:47,360
Vidím mačky.

656
00:28:47,360 --> 00:28:48,470
Chápem mačky.

657
00:28:48,470 --> 00:28:50,380
Neviem, prečo mačky sú tam znova.

658
00:28:50,380 --> 00:28:52,620
Ja naozaj neviem,
čo to nezmysel je.

659
00:28:52,620 --> 00:28:56,030
Tak som len tak, aby
zvýraznenie a mazanie veci

660
00:28:56,030 --> 00:28:59,905
že nechápem,
destilácie URL do práve tento.

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

662
00:29:00,920 --> 00:29:02,270
>> Teraz mi dovoľte si znovu zadávať.

663
00:29:02,270 --> 00:29:03,814
Vyzerá to, že Google stále pracuje.

664
00:29:03,814 --> 00:29:06,980
Takže z nejakého dôvodu, že pridávate
veľa vecí na ich adresy URL v predvolenom nastavení.

665
00:29:06,980 --> 00:29:09,000
Ale to nie je nevyhnutne nutné.

666
00:29:09,000 --> 00:29:10,340
Takže to, čo je pekné o tom?

667
00:29:10,340 --> 00:29:13,630
No, nechaj ma ísť dopredu a
otvoriť Chrome Inspector.

668
00:29:13,630 --> 00:29:15,960
Tam je to trochu skratka myš pre neho.

669
00:29:15,960 --> 00:29:17,360
>> Prejdite na kartu Sieť.

670
00:29:17,360 --> 00:29:19,340
A teraz mi dovoľte znova
Táto stránka ešte raz.

671
00:29:19,340 --> 00:29:20,280
A ja stlačeným klávesom Shift.

672
00:29:20,280 --> 00:29:22,520
Mimochodom, prehliadačov
majú tendenciu do medzipamäte alebo uložiť

673
00:29:22,520 --> 00:29:24,697
informácie len kvôli účinnosti je.

674
00:29:24,697 --> 00:29:27,280
Ale obvykle, držanie Shift a
prekládka donúti všetko

675
00:29:27,280 --> 00:29:28,994
začať znovu od začiatku.

676
00:29:28,994 --> 00:29:30,410
A to je to, čo chcem robiť.

677
00:29:30,410 --> 00:29:33,550
>> A všimnite si všetky tieto
riadky, ktoré práve objavil.

678
00:29:33,550 --> 00:29:37,920
Ukazuje sa, že v danom web
strana, môže tam byť len jeden súbor

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- alebo tam
môže byť 52, ako v tomto prípade.

680
00:29:43,500 --> 00:29:45,820
Keď som sa navštíviť google.com,
zdá sa, že môj prehliadač

681
00:29:45,820 --> 00:29:49,650
začína 52 jednotlivé HTTP požiadavky.

682
00:29:49,650 --> 00:29:50,520
Prečo tomu tak je?

683
00:29:50,520 --> 00:29:53,380
>> No, pozrite sa na to, čo je vo vnútri
tejto webovej stránky do hornej časti.

684
00:29:53,380 --> 00:29:55,620
K dispozícii je nielen text,
ale je tu skutočné obrazy

685
00:29:55,620 --> 00:29:57,130
mačiek viac ako na pravej strane.

686
00:29:57,130 --> 00:29:59,110
K dispozícii je farebné logo tu na ľavej strane.

687
00:29:59,110 --> 00:30:01,750
Je tu všetko z týchto ikon
pre mikrofón a tak ďalej.

688
00:30:01,750 --> 00:30:05,130
Je tu veľa kusov, stavebné
bloky, stieracie kúsky, ak chcete,

689
00:30:05,130 --> 00:30:06,250
na tejto webovej stránke.

690
00:30:06,250 --> 00:30:10,310
A čo je na tom prehliadač na
dostať úplne prvý súbor, ktorý

691
00:30:10,310 --> 00:30:16,180
je tento riadok tu, ako sa v podstate
iterácia cez vrchol HTML

692
00:30:16,180 --> 00:30:19,880
nadol, zľava doprava, hľadá
veci, ako je imidž značky alebo iné značky

693
00:30:19,880 --> 00:30:23,160
ktoré sa spomenúť ďalšie súbory a
keď to vidí, ide a načíta ich

694
00:30:23,160 --> 00:30:26,050
cez HTTP, životaschopný celok
obálka metafora,

695
00:30:26,050 --> 00:30:29,670
a potom sa zobrazí v
vhodné umiestnenie na webovej stránke.

696
00:30:29,670 --> 00:30:33,370
>> Ale všimnite tu, ak sa zameriam na
Prvý hod, vyhľadávanie mačiek,

697
00:30:33,370 --> 00:30:37,090
Všimnite si, že v skutočnosti je to pomocou protokolu HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
A bohužiaľ, Google
Chrome práve teraz vo verzii 39

699
00:30:41,690 --> 00:30:45,110
je druh dumbing veci dole a
Nie je nám ukazuje skutočné hlavičky.

700
00:30:45,110 --> 00:30:49,680
Ale to, čo sa skutočne poslal, je požiadavka
za to, lomítko, ale / search? q = mačky.

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

702
00:30:52,830 --> 00:30:54,340
>> Teraz, prečo je to tak dôležité?

703
00:30:54,340 --> 00:30:57,110
No, ja idem na odvodenie
z toho, že ak Google

704
00:30:57,110 --> 00:31:01,520
podporuje otázky tohto formulára, prečo
nie mám implementovať svoje vlastné hľadanie

705
00:31:01,520 --> 00:31:06,420
motor CS50, ale len predné
koniec, len grafické užívateľské rozhranie.

706
00:31:06,420 --> 00:31:09,610
A budeme zadávať zadná časť,
výsledky skutočné hľadanie na Google.

707
00:31:09,610 --> 00:31:10,510
>> Tak ako to mám urobiť?

708
00:31:10,510 --> 00:31:13,820
No, nechaj ma ísť do gedit sem.

709
00:31:13,820 --> 00:31:19,180
A nechaj ma ísť napred a otvoriť
up, povedzme, nový súbor.

710
00:31:19,180 --> 00:31:22,280
A ja idem zachrániť tento
dočasne ako hľadanie-0.html.

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

712
00:31:25,111 --> 00:31:27,860
A nakoniec, budeme rýchlo
vpred na ktorú som vopred pripravených.

713
00:31:27,860 --> 00:31:30,190
>> A ja idem
rýchlo vybičovať typu doc

714
00:31:30,190 --> 00:31:33,840
html otvorený držiak html
v blízkosti držiak html.

715
00:31:33,840 --> 00:31:38,390
Potom budem robiť hlavu
v blízkosti hlavy otvorené titul CS50

716
00:31:38,390 --> 00:31:40,150
Hľadať miesto vyhľadávania Google.

717
00:31:40,150 --> 00:31:43,480
Tu budem mať
telo, tu blízko tela.

718
00:31:43,480 --> 00:31:45,835
A teraz musím CS50 hľadania.

719
00:31:45,835 --> 00:31:47,710
A vlastne, poďme
stavať to postupne.

720
00:31:47,710 --> 00:31:51,043
Chystám sa ísť dopredu a zavrite to a
skutočne dať to v mojom verejnom zozname.

721
00:31:51,043 --> 00:31:52,730
Tak mi daj len jeden okamih.

722
00:31:52,730 --> 00:31:55,390
search-0.html-- Chystám sa
časovo hovoria search.html.

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

724
00:31:56,600 --> 00:31:59,750
Chystám sa chmod to + r search.html.

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

726
00:32:01,072 --> 00:32:02,280
A teraz idem otvoriť.

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

728
00:32:03,224 --> 00:32:04,390
V poriadku, takže to bolo rýchlo.

729
00:32:04,390 --> 00:32:06,800
Ale cieľom jednoducho bolo
aby sme sa dostali do bodu,

730
00:32:06,800 --> 00:32:09,630
mať tento text
Súbor s názvom search.html.

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

732
00:32:10,940 --> 00:32:12,790
Takže nie je moc na pohľad, ale.

733
00:32:12,790 --> 00:32:16,970
V skutočnosti, keď pôjdem do svojho prehliadača, a
prejsť na search.html, to je všetko, čo je.

734
00:32:16,970 --> 00:32:17,720
Ale viete čo?

735
00:32:17,720 --> 00:32:19,000
Aj môže byť trochu milovník.

736
00:32:19,000 --> 00:32:22,710
Čítal som v knihe, že je tu
tag záhlavie s názvom h1.

737
00:32:22,710 --> 00:32:26,100
A ja idem ďalej a
používať túto open H1 a zavrieť h1.

738
00:32:26,100 --> 00:32:27,220
Znovu načítate stránku.

739
00:32:27,220 --> 00:32:29,600
A teraz je to väčšie a odvážnejšie,
nie je tak zaujímavé,

740
00:32:29,600 --> 00:32:32,399
ale aspon štrukturálne
zaujímavejšie.

741
00:32:32,399 --> 00:32:33,940
Ale teraz mi dovoľte predstaviť inú značku.

742
00:32:33,940 --> 00:32:36,500
Ukazuje sa, že je to tag formulára.

743
00:32:36,500 --> 00:32:38,400
A dovoľte mi ukončiť tento tag.

744
00:32:38,400 --> 00:32:40,830
A ukázalo sa, je tu
vstupné tag, ktorý

745
00:32:40,830 --> 00:32:44,600
má atribút s názvom typu, ktorý
je dátový typ poľa,

746
00:32:44,600 --> 00:32:45,200
ak chcete.

747
00:32:45,200 --> 00:32:47,050
A bude typu textu.

748
00:32:47,050 --> 00:32:52,200
A jeho hodnota sa deje
byť CS50 hľadanie.

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

750
00:32:53,850 --> 00:32:57,100
A tam to bude bez pojem
otváranie a zatváranie s oddelenými tagy.

751
00:32:57,100 --> 00:33:00,300
>> Dovoľte mi, aby som sa vrátiť sem a
zistiť, čo sa deje, znova.

752
00:33:00,300 --> 00:33:01,380
Začína byť zaujímavé.

753
00:33:01,380 --> 00:33:02,950
Vyzerá to, že je to textové pole.

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

755
00:33:04,080 --> 00:33:06,999
A vlastne, ja som nechcel
dať hodnotu tam ešte.

756
00:33:06,999 --> 00:33:10,040
Nechaj ma ísť späť a skutočne dostať
zbaviť tejto hodnoty, aby to jednoduché.

757
00:33:10,040 --> 00:33:12,939
Namiesto toho, aby hodnoty, čo som chcel
aby túto vec bol názov.

758
00:33:12,939 --> 00:33:15,230
A ja neviem, čo to je,
tak sa vrátim k tomu.

759
00:33:15,230 --> 00:33:18,270
>> Ale pod tým chcem
robiť input type = odoslať.

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

761
00:33:19,840 --> 00:33:22,120
A táto hodnota bude CS50 hľadanie.

762
00:33:22,120 --> 00:33:24,850
A uvidíme, prečo som
presunul hodnotu tohto.

763
00:33:24,850 --> 00:33:28,900
Keď som sa znova, sa mi zdá teraz
Počiatky mojej vlastnej vyhľadávanie

764
00:33:28,900 --> 00:33:30,820
motor, super odporná,
ale úprimne povedané, je to

765
00:33:30,820 --> 00:33:34,260
nie ďaleko dohodil od toho, čo
Predvolená stránka Google vyzerá.

766
00:33:34,260 --> 00:33:37,950
>> Ak idem teraz tu, môžem zadať
mačky a dúfajme, kliknite na tlačidlo Hľadať.

767
00:33:37,950 --> 00:33:40,380
Ale ja nie som úplne neskončil,
preto, že som nevykonal,

768
00:33:40,380 --> 00:33:41,045
Je zrejmé, že databáza.

769
00:33:41,045 --> 00:33:42,940
Nemám liezol
web na výsledky vyhľadávania.

770
00:33:42,940 --> 00:33:44,840
Tak som potrebné zadávať, že pre Google.

771
00:33:44,840 --> 00:33:46,290
Tak ako to mám urobiť?

772
00:33:46,290 --> 00:33:49,170
>> No, v prvom rade by som
je potrebné pridať a akcie

773
00:33:49,170 --> 00:33:58,460
pripisovať mojej forme tagu, ktorý
je http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
A viem, že len z nutnosti
vyvodiť bližšom pohľade

775
00:34:01,180 --> 00:34:02,505
v ich URL.

776
00:34:02,505 --> 00:34:03,380
A teraz hádajte.

777
00:34:03,380 --> 00:34:09,090
Čo by mal tento text poľa pravdepodobne
nazvať, podľa toho, kde sme prišli

778
00:34:09,090 --> 00:34:09,754
pred rokom?

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

780
00:34:11,896 --> 00:34:13,290
>> Divákov :? Q.

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

782
00:34:14,370 --> 00:34:17,800
A už vôbec sa skutočne potrebujú otázku
označiť to dopadá, ale q je skutočne to,

783
00:34:17,800 --> 00:34:20,489
q na dotaz, pravdepodobne
default, len preto, že to je

784
00:34:20,489 --> 00:34:23,060
čo Larry a Sergey
prišiel s rokmi.

785
00:34:23,060 --> 00:34:24,739
Takže teraz mi dovoľte znova načítajte túto stránku.

786
00:34:24,739 --> 00:34:26,409
Nevyzerá to tak odlišné.

787
00:34:26,409 --> 00:34:28,120
Ale teraz sledujte, čo sa stane.

788
00:34:28,120 --> 00:34:32,360
>> Keby som zadajte mačiek a kliknite na tlačidlo
CS50 Hľadanie a pustiť,

789
00:34:32,360 --> 00:34:35,770
Všimol som si bleskurýchlo
od skutočnej Google.

790
00:34:35,770 --> 00:34:38,150
Teraz Google je, že je trochu
nepríjemné v tom, že sú

791
00:34:38,150 --> 00:34:41,877
pripojí ďalší parameter,
ak chcete, na adresu URL.

792
00:34:41,877 --> 00:34:43,960
To je všetko deje
automaticky na strane Google.

793
00:34:43,960 --> 00:34:48,730
>> Dôležitou súčasťou je, že sa zdá
aby priniesli túto žiadosť tu.

794
00:34:48,730 --> 00:34:50,179
A naozaj, to, čo sa stane.

795
00:34:50,179 --> 00:34:53,040
Ak máte HTML, ktoré
vyzerá to, toto

796
00:34:53,040 --> 00:34:57,620
je druh webové vývojárov zápisu
že to hovorím, choďte do toho a vytvoriť formulár

797
00:34:57,620 --> 00:34:59,990
že keď je predložený,
to bude ísť na túto adresu URL.

798
00:34:59,990 --> 00:35:03,430
A keď URL poskytol
hodnoty pre veci, ako je Q,

799
00:35:03,430 --> 00:35:05,440
nechodia len na túto adresu URL.

800
00:35:05,440 --> 00:35:08,210
Vlastne, prejdite na otázku
značka a potom q = mačky.

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

802
00:35:09,590 --> 00:35:13,060
Pripojiť parameter,
Parameter HTTP takhle.

803
00:35:13,060 --> 00:35:15,590
>> A práve byť super presné,
to, čo je odvodiť here--

804
00:35:15,590 --> 00:35:18,130
ale budem viac explicit-- je
že metóda, ktorú chcete použiť

805
00:35:18,130 --> 00:35:22,270
je dostať, miesto niečoho ako
príspevok, ktorý budeme nakoniec vidieť.

806
00:35:22,270 --> 00:35:27,710
Takže v skratke, jednoducho tým, že pochopenie
HTML a používať niektoré celkom jednoduché tagy,

807
00:35:27,710 --> 00:35:30,610
teraz môžeme začať vytvárať
naše predný koncový užívateľ

808
00:35:30,610 --> 00:35:32,850
rozhranie s vyhľadávania
Motor za ním.

809
00:35:32,850 --> 00:35:34,800
>> Ale to je samozrejme celkom odporná.

810
00:35:34,800 --> 00:35:37,259
Dovoľte mi teda vlastne otvárajú
o niečo lepšia verzia.

811
00:35:37,259 --> 00:35:39,800
To je ten, Aj pripravené v
vopred, že má nejaké pripomienky.

812
00:35:39,800 --> 00:35:41,900
Ale uvidíte, že ja
do značnej miery znovu ju.

813
00:35:41,900 --> 00:35:44,150
Tak to je on-line už k dispozícii.

814
00:35:44,150 --> 00:35:48,050
A ja som náhodou preventívne
ísť na https len, aby to jednoduché.

815
00:35:48,050 --> 00:35:50,610
>> A teraz poďme otvoriť
ďalšie iterácie tohto.

816
00:35:50,610 --> 00:35:52,510
Je verzia 1 miesto 0.

817
00:35:52,510 --> 00:35:55,315
Čo vyskočí na vás ako mierne
rôzne v tomto príklade?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> Divákov: [nepočuteľné].

820
00:36:00,440 --> 00:36:03,020
>> Jo, je tu tento text align centrum.

821
00:36:03,020 --> 00:36:04,590
To je trochu divný tu.

822
00:36:04,590 --> 00:36:06,150
Ale toto je naozaj nový.

823
00:36:06,150 --> 00:36:07,800
A možno hádajte, čo sa bude diať.

824
00:36:07,800 --> 00:36:11,730
Ak idem do svojho prehliadača teraz
a navštíviť search-1.html,

825
00:36:11,730 --> 00:36:13,090
je to skoro to isté.

826
00:36:13,090 --> 00:36:15,705
Ale je to krok bližšie
je trochu krajší.

827
00:36:15,705 --> 00:36:19,150
Je to stále škaredá, ale krajšie v tom, že
aspoň všetko je teraz v stredu.

828
00:36:19,150 --> 00:36:23,470
>> Tak sa ukáže, že to, čo som pomocou
je iný jazyk úplne volal

829
00:36:23,470 --> 00:36:25,680
CSS, kaskádové štýly.

830
00:36:25,680 --> 00:36:28,310
A CSS, úprimne povedané, je druh
na, podľa môjho osobného názoru,

831
00:36:28,310 --> 00:36:29,775
otrasne navrhnutý jazyk.

832
00:36:29,775 --> 00:36:33,110
To je veľmi nepríjemné na pamäti
všetky rôzne detaily.

833
00:36:33,110 --> 00:36:38,479
Ale to je to, čo štylizuje
Celý celosvetovo web dnes.

834
00:36:38,479 --> 00:36:39,270
Som urazil niekoho.

835
00:36:39,270 --> 00:36:39,769
Dobrá.

836
00:36:39,769 --> 00:36:43,180
Takže poďme späť a vidieť
ako sme vlastne používať to.

837
00:36:43,180 --> 00:36:45,940
A ukázalo sa, aspoň, že je to
vlastne celkom jednoduchý jazyk.

838
00:36:45,940 --> 00:36:49,470
Je to len dvojica kľúčov hodnota, vlastnosti
a hodnoty, vlastnosti a hodnoty.

839
00:36:49,470 --> 00:36:52,080
Naozaj, tu je jeden
taký majetok a hodnotu.

840
00:36:52,080 --> 00:36:55,890
>> Jednoducho pomocou štýlu
atribút môjho tela tagu

841
00:36:55,890 --> 00:37:00,360
a dávať to hodnotu
Slovo hrubého čreva a ďalšie slovo,

842
00:37:00,360 --> 00:37:03,730
alebo vlastnosť a hodnotu,
Môžem ovplyvniť estetiku

843
00:37:03,730 --> 00:37:06,210
webové stránky, nie
ešte nutne štruktúra,

844
00:37:06,210 --> 00:37:07,550
ale estetika nej.

845
00:37:07,550 --> 00:37:10,960
A práve Googling okolo, som si uvedomil,
že CSS, kaskádové štýly,

846
00:37:10,960 --> 00:37:14,170
podporuje vlastnosť nazvanú
text-align, ktorého hodnota môže

847
00:37:14,170 --> 00:37:16,980
sa doľava, doprava alebo na stred, napríklad.

848
00:37:16,980 --> 00:37:19,990
>> Takže teraz, keď som sa znova
Táto stránka, čo som si

849
00:37:19,990 --> 00:37:22,730
bol stred stránky,
ale stále dosť škaredé.

850
00:37:22,730 --> 00:37:25,770
Poďme ďalej a otvorte
up verzia 2 Hľadať.

851
00:37:25,770 --> 00:37:28,570
A teraz Všimol som si urobil trochu viac.

852
00:37:28,570 --> 00:37:33,760
Všimnite si, že sa tu vnútri hlavy
tag, môže existovať viac ako titul.

853
00:37:33,760 --> 00:37:35,400
V skutočnosti, tam je tag štýl.

854
00:37:35,400 --> 00:37:38,630
A to je miesto, kde to len dostane
Trochu chaotický videnie CSS niekedy.

855
00:37:38,630 --> 00:37:41,971
>> Všimnite si, že som sa zdá, že majú niečo
že štrukturálne vyzerá úplne inak.

856
00:37:41,971 --> 00:37:44,095
Ale tu je názov
tag chcem štylizované.

857
00:37:44,095 --> 00:37:47,570
Tu sú naše staré priateľov kučeravé
traky a uzavreté zložená zátvorka.

858
00:37:47,570 --> 00:37:50,290
A potom je, že
majetku a jeho hodnota.

859
00:37:50,290 --> 00:37:56,300
>> Keby som načítať tento súbor, search2.html,
Konečný výsledok je rovnaký.

860
00:37:56,300 --> 00:37:59,300
Ale je to krok smerom k lepšiemu dizajnu.

861
00:37:59,300 --> 00:38:04,560
Vytknutím túto CSS, som
nie pomiešané s mojím HTML.

862
00:38:04,560 --> 00:38:07,560
A skutočne, ako uvidíme, mohol by som
znovu použiť tieto vlastnosti a hodnoty.

863
00:38:07,560 --> 00:38:10,420
Keby som chcel, aby sa kytice
časti mojej webovej stránky na stred,

864
00:38:10,420 --> 00:38:13,630
Nemám písať style = text-align
centrum všade.

865
00:38:13,630 --> 00:38:16,580
Môžem dať na jednom mieste
Možno, rád sa hore.

866
00:38:16,580 --> 00:38:18,210
>> Ale ani to nie je najlepší návrh.

867
00:38:18,210 --> 00:38:21,720
V skutočnosti, jedna z vecí, sa dozviete
ako budete tráviť viac a viac času s

868
00:38:21,720 --> 00:38:25,730
web programovania je, že čím viac si môžete
modularizovat vecí a faktorov veci

869
00:38:25,730 --> 00:38:30,610
ako .h súbory dajte nám faktora veci von,
Páči sa helpers.c dajte nám faktorov veci

870
00:38:30,610 --> 00:38:31,880
niekoľkých psets rokmi.

871
00:38:31,880 --> 00:38:34,200
Rovnako tak by sme mohli
chcete dosiahnuť.

872
00:38:34,200 --> 00:38:37,920
>> Takže si všimnúť vo verzii
tri search.html som

873
00:38:37,920 --> 00:38:40,610
vyčistiť hlavu
stránky a len dať

874
00:38:40,610 --> 00:38:43,320
v tomto, tag link, ktorý
na rozdiel od mena,

875
00:38:43,320 --> 00:38:44,700
nedáva hypertextový odkaz.

876
00:38:44,700 --> 00:38:49,150
To odkazuje na iný súbor prostredníctvom
href, ktorého hodnota je v tomto prípade,

877
00:38:49,150 --> 00:38:51,586
je search-3.css

878
00:38:51,586 --> 00:38:52,960
Tak som si uvedomiť, že budeme rýchlo.

879
00:38:52,960 --> 00:38:54,600
Ale všetko, čo robím, je druh
pohybujúcich sa veci okolo.

880
00:38:54,600 --> 00:38:55,760
Dovoľte mi, aby som otvoriť Search-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Tu to je, naozaj nič k tomu.

883
00:38:58,530 --> 00:39:02,270
Len som skopírovať a vložiť ju do novej
súboru, rovnako ako my zapracované veci z

884
00:39:02,270 --> 00:39:03,509
do iných súborov pred.

885
00:39:03,509 --> 00:39:05,300
A result--
úplne underwhelming--

886
00:39:05,300 --> 00:39:06,730
bude úplne rovnaký.

887
00:39:06,730 --> 00:39:10,490
Ale ideme toward-- nie, to nie.

888
00:39:10,490 --> 00:39:11,930
Oh, ja viem prečo.

889
00:39:11,930 --> 00:39:13,790
>> Takže sa zdá, že sa túto chybu.

890
00:39:13,790 --> 00:39:15,010
A to je v nejakom zmysle.

891
00:39:15,010 --> 00:39:17,730
Ale dovoľte mi, aby som otvorila svoju kartu Sieť.

892
00:39:17,730 --> 00:39:19,660
Dovoľte mi, aby som znovu načítate stránku.

893
00:39:19,660 --> 00:39:23,315
Ach, prečo je CSS nepoužívajú?

894
00:39:23,315 --> 00:39:26,920
No, súbor CSS, podobne, má
byť svet čitateľný, aby som tak povedal.

895
00:39:26,920 --> 00:39:28,440
A tiež je v súčasnosti zakázané.

896
00:39:28,440 --> 00:39:33,760
Dovoľte mi teda robiť chmod + R
hviezdy dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
sme bodka CSS je len
Prípona súboru CSS súborov.

898
00:39:37,067 --> 00:39:38,900
Teraz mi dovoľte vrátiť sa
môj prehliadač a Obnoviť.

899
00:39:38,900 --> 00:39:40,910
OK, trochu lepšie.

900
00:39:40,910 --> 00:39:42,282
>> Teraz mi dovoľte urobiť jednu poslednú vec.

901
00:39:42,282 --> 00:39:42,990
Vo vyhľadávaní-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Mám verziu, že som si myslel,
bola cesta chladnejšie, aj keď oveľa viac

904
00:39:48,220 --> 00:39:48,980
komplikované.

905
00:39:48,980 --> 00:39:50,690
Poďme sa pozrieť na výsledok ako prvý.

906
00:39:50,690 --> 00:39:52,290
Zavrite to nám viac priestoru.

907
00:39:52,290 --> 00:39:54,275
Zmeniť to hľadať-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> A teraz veľa vecí, sú rozbité.

910
00:39:57,200 --> 00:39:59,910
Chystám sa vrátiť
do môjho zoznamu tu.

911
00:39:59,910 --> 00:40:04,190
A teraz som len robiť
chmod o + r na file--

912
00:40:04,190 --> 00:40:07,450
pretože viem, že exists-- nazýva
logo.gif, čo je obraz.

913
00:40:07,450 --> 00:40:08,590
A teraz znova.

914
00:40:08,590 --> 00:40:11,040
A wow-- tak teraz som
celkom blízko, úprimne povedané,

915
00:40:11,040 --> 00:40:15,860
rád verzii Google 1999, a
úprimne povedané, verzia Google 2014

916
00:40:15,860 --> 00:40:16,360
že jo?

917
00:40:16,360 --> 00:40:21,920
>> Takže to teraz bude na svoje webové stránky,
nakoniec, keď som hľadať pre mačky.

918
00:40:21,920 --> 00:40:23,900
A skutočne je.

919
00:40:23,900 --> 00:40:26,410
Ale to, čo som urobil inak
V tejto verzii 4?

920
00:40:26,410 --> 00:40:28,020
Takže nebudeme zaoberať príliš veľa na to tu.

921
00:40:28,020 --> 00:40:30,100
Uvidíte to v probléme
nastaviť sedem nakoniec.

922
00:40:30,100 --> 00:40:31,350
Všimnime si ale urobil som si pár vecí.

923
00:40:31,350 --> 00:40:33,690
>> Predstavil som div
tag, čo je divízia,

924
00:40:33,690 --> 00:40:35,450
svojim duchom podobať tagu odseku.

925
00:40:35,450 --> 00:40:38,220
Ale rozdelenie je, rovnako ako, tu je
obdĺžnikový neviditeľný región

926
00:40:38,220 --> 00:40:39,150
obrazovky.

927
00:40:39,150 --> 00:40:41,680
Poďme dať jedinečný
identifikátor, päty, len

928
00:40:41,680 --> 00:40:44,700
takže môžeme hovoriť o
je v našom HTML inde.

929
00:40:44,700 --> 00:40:47,952
Tu je ďalší div stránky
ktorého číslo bude spokojný.

930
00:40:47,952 --> 00:40:49,160
Je to obsah stránky.

931
00:40:49,160 --> 00:40:51,090
A tu je hlavička stránky.

932
00:40:51,090 --> 00:40:54,960
>> Inými slovami, som
v podstate v HTML som mentálne

933
00:40:54,960 --> 00:40:57,700
prehliadanie tejto webovej stránky, ako
tri zložky, hlavičkové

934
00:40:57,700 --> 00:41:01,200
sem s touto neviditeľnou obdĺžnik,
obsah v stredu, a potom

935
00:41:01,200 --> 00:41:04,800
pätu dole, a to aj
keď nevidíme tie veci.

936
00:41:04,800 --> 00:41:09,940
Pretože chcem, aby v mojej hlave
strana tu, alebo v súbore CSS,

937
00:41:09,940 --> 00:41:11,460
Môžem použiť túto syntax.

938
00:41:11,460 --> 00:41:13,070
>> Header nie tag.

939
00:41:13,070 --> 00:41:17,060
Je to číslo, takže sa ukáže,
na to, že tým, že robí #header,

940
00:41:17,060 --> 00:41:20,840
Teraz môžem použiť jeden alebo viac
vlastnosti do hlavičky.

941
00:41:20,840 --> 00:41:24,130
Môžem robiť rovnaký obsah,
rovnaký za obsah tu.

942
00:41:24,130 --> 00:41:27,230
>> Tak napríklad, v zápätí, oznámenia
Všetky tieto vlastnosti som pridávanie.

943
00:41:27,230 --> 00:41:30,660
A ja viem, že existujú len tým, že čítanie
sa na dokumentáciu pre CSS.

944
00:41:30,660 --> 00:41:33,450
Veľkosť písma bude smaller--
takže niektoré relatívna veľkosť písma.

945
00:41:33,450 --> 00:41:34,741
Hmotnosť bude tučne.

946
00:41:34,741 --> 00:41:37,340
Margin-- koľko pixelov
okolo to-- je 20 pixelov.

947
00:41:37,340 --> 00:41:38,590
A to bude v stredu.

948
00:41:38,590 --> 00:41:40,256
>> Ale teraz, stránka vyzerá takto.

949
00:41:40,256 --> 00:41:42,840
Ak nie som spokojný s
moja kópia práve tam,

950
00:41:42,840 --> 00:41:46,560
Mohol som urobiť niečo ako červenou farbou.

951
00:41:46,560 --> 00:41:50,570
A potom som si to uložiť, načítať,
a teraz som štylizované pätu.

952
00:41:50,570 --> 00:41:54,130
Takže je to len naznačuje na napájanie
o tom, čo môžete urobiť na webovej stránke

953
00:41:54,130 --> 00:41:55,510
zmeniť veci okolo.

954
00:41:55,510 --> 00:41:59,080
>> A dokonca chladnejšie než to, ak chcete
tropit si s aktuálnej webovej stránky,

955
00:41:59,080 --> 00:42:00,810
nemožno ich trvalo zmeniť.

956
00:42:00,810 --> 00:42:03,640
Ale keď otvorím
Znovu Chrome Inspector

957
00:42:03,640 --> 00:42:07,610
a idem nie na ľavej strane
tú, ktorá ukazuje Facebooku HTML,

958
00:42:07,610 --> 00:42:11,380
ale ukazuje na pravej strane
na pravej strane všetky svoje CSS,

959
00:42:11,380 --> 00:42:13,789
môžete buď a
zmeniť veci v reálnom čase.

960
00:42:13,789 --> 00:42:15,080
Tak nechaj ma ísť dopredu a to.

961
00:42:15,080 --> 00:42:18,670
>> Nechaj ma ísť napred a kontrola
Kliknutím na tejto náhodné slovo tu,

962
00:42:18,670 --> 00:42:21,230
podpísať, a kliknite na tlačidlo Skontrolovať prvok.

963
00:42:21,230 --> 00:42:25,130
Chrome veľmi výhodnú skočí na
tag h1, že Facebook používa.

964
00:42:25,130 --> 00:42:27,290
A všimnite si tu Facebook
má trochu lenivo

965
00:42:27,290 --> 00:42:29,960
pevne danej veľkosti písma ako vlastnosť tu.

966
00:42:29,960 --> 00:42:33,530
>> Takže super vec však je,
že keď som vlastne ísť sem

967
00:42:33,530 --> 00:42:39,560
a hovoria, oh, Facebook, nepáči sa mi, že
64 pixelov, môžeme teraz zmeniť Facebook.

968
00:42:39,560 --> 00:42:42,590
Samozrejme, že sme len ho zmeniť
pre mňa osobne v túto chvíľu.

969
00:42:42,590 --> 00:42:45,150
Ale to je len ďalší
nástrojom v našom sade náradia

970
00:42:45,150 --> 00:42:48,360
, Čo sa deje, aby nám vylepšiť
a prísť na to, a tiež diagnostikovať

971
00:42:48,360 --> 00:42:49,729
problémy v našich vlastných webových stránkach.

972
00:42:49,729 --> 00:42:52,270
A mohli by sme podobne prejsť
tu, čo je to isté.

973
00:42:52,270 --> 00:42:55,830
Ak sa naozaj chcete dostať fantázie, som
znamenať, teraz môžete skutočne mutovať stránku

974
00:42:55,830 --> 00:42:57,380
a robiť šialené veci.

975
00:42:57,380 --> 00:42:59,870
>> Tak prečo je to všetko užitočné?

976
00:42:59,870 --> 00:43:02,330
No, nakoniec sme
bude chcieť byť

977
00:43:02,330 --> 00:43:07,110
schopný vytvoriť webové stránky, ktoré
sú poháňané vlastnými zadných koncoch,

978
00:43:07,110 --> 00:43:10,520
nie len Google a
outsourcing back-end tam.

979
00:43:10,520 --> 00:43:13,510
Vlastne chceme
hodnoty, napríklad,

980
00:43:13,510 --> 00:43:18,830
akcie nášho vyhľadávača
atribút ísť nie na niekoho iného,

981
00:43:18,830 --> 00:43:24,270
ale niečo ako search.php,
kde search.php je na našom vlastnom serveri,

982
00:43:24,270 --> 00:43:25,670
nie na niekoho iného.

983
00:43:25,670 --> 00:43:30,316
>> A tak sa tam dostať, sme vlastne
je potrebné zaviesť nový jazyk.

984
00:43:30,316 --> 00:43:33,190
Tak už sme sa pozrel na jeden nový
Jazyk tu, alebo dva naozaj, HTML

985
00:43:33,190 --> 00:43:33,700
a CSS.

986
00:43:33,700 --> 00:43:36,330
Ale v skutočnosti sú len
konštrukčné a estetické jazyky.

987
00:43:36,330 --> 00:43:38,360
Nie sú to programovanie
jazyky samy o sebe.

988
00:43:38,360 --> 00:43:41,160
A to je asi tak formálne
čas ako budeme tráviť na nich.

989
00:43:41,160 --> 00:43:44,910
Vzhľadom k tomu, začneme teraz
prejsť na PHP.

990
00:43:44,910 --> 00:43:48,160
>> PHP, takže je aktuálne
programovací jazyk.

991
00:43:48,160 --> 00:43:50,750
Je to skriptovací jazyk
v tom zmysle, že je to

992
00:43:50,750 --> 00:43:52,855
má byť ľahšia
než niečo ako C

993
00:43:52,855 --> 00:43:56,082
A to je interpretovaný jazyk,
čo znamená, že to nie je vybudovaný.

994
00:43:56,082 --> 00:43:58,790
Takže v skratke, čo to znamená,
keď sme použili jazyk C

995
00:43:58,790 --> 00:44:00,290
a museli sme ho zostaviť?

996
00:44:00,290 --> 00:44:02,120
Čo to znamená
kompilovať C zdrojový kód?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
Divákov: [nepočuteľné].

999
00:44:04,780 --> 00:44:06,184
DAVID J Malan: Povedz to znova?

1000
00:44:06,184 --> 00:44:07,100
Divákov: [nepočuteľné].

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
Ukazuje to na binárne.

1004
00:44:10,180 --> 00:44:14,200
Ukazuje to do nuly a tie
z aktuálnej anglicky ako zdrojový kód.

1005
00:44:14,200 --> 00:44:16,424
A potom môžeme skutočne
spustiť tieto nuly a tie

1006
00:44:16,424 --> 00:44:18,840
priechodom
CPU poklepaním na ikonu

1007
00:44:18,840 --> 00:44:19,980
alebo spustením príkazu.

1008
00:44:19,980 --> 00:44:23,770
>> PHP a Python a Ruby
a Perl a JavaScript

1009
00:44:23,770 --> 00:44:26,250
a kytice ostatné
jazyky sú interpretované

1010
00:44:26,250 --> 00:44:29,290
jazykmi, čo znamená,
nemáte zostaví z nich.

1011
00:44:29,290 --> 00:44:34,220
Skôr, kŕmiť ako vstup do
program s názvom tlmočníka.

1012
00:44:34,220 --> 00:44:36,640
A to interpret,
ktorý niekto napísal,

1013
00:44:36,640 --> 00:44:40,930
číta zdrojový kód zhora nadol,
zľava doprava a len interpretov

1014
00:44:40,930 --> 00:44:43,000
tieto riadky a robí to, čo hovoríte.

1015
00:44:43,000 --> 00:44:45,360
>> Takže ak narazíte na
riadok, ktorý hovorí, že tlač,

1016
00:44:45,360 --> 00:44:48,660
nemusí to nutne previesť tlač
so zodpovedajúcimi núl a jednotiek.

1017
00:44:48,660 --> 00:44:51,910
Je to len má túto tlmočníka ako
big Ak podmienka, ktorá hovorí,

1018
00:44:51,910 --> 00:44:56,110
ak inštrukcie programátora je
tlač, vykonajte nasledujúce kroky.

1019
00:44:56,110 --> 00:44:58,170
Tak to interpretuje práve
podľa druhu uvažovania

1020
00:44:58,170 --> 00:44:59,800
tým, čo hovoríte to urobiť.

1021
00:44:59,800 --> 00:45:01,320
>> A PHP je jedným z týchto jazykov.

1022
00:45:01,320 --> 00:45:05,310
A pred PHP rokmi bol navrhnutý tak,
Práve pre programovanie pre web.

1023
00:45:05,310 --> 00:45:08,160
A to bolo spočiatku
veľmi nedbalý chaotický jazyk.

1024
00:45:08,160 --> 00:45:10,940
A naozaj, je tu obrovský
Množstvo zlé PHP kódu tam.

1025
00:45:10,940 --> 00:45:13,520
Ale jazyk sám
dozrela v priebehu rokov,

1026
00:45:13,520 --> 00:45:16,200
natoľko, že teraz je to
v skutočnosti nádherný ďalší krok

1027
00:45:16,200 --> 00:45:19,970
pedagogicky z C, pretože je to
tak sakramentsky povedome všetko

1028
00:45:19,970 --> 00:45:22,380
ste práve videli v posledných niekoľkých týždňoch.

1029
00:45:22,380 --> 00:45:25,724
>> Jeden počiatočný rozdiel uvidíme
je nie je hlavnou funkciou už.

1030
00:45:25,724 --> 00:45:28,890
Keď začnete písať kód, je to len
bude vykonaný bez ohľadu na to,

1031
00:45:28,890 --> 00:45:30,220
ako uvidíme za chvíľu.

1032
00:45:30,220 --> 00:45:33,320
Medzitým, tu je to, čo
premenná vyzerá v PHP.

1033
00:45:33,320 --> 00:45:35,840
Je to trochu inak,
ale len ťažko.

1034
00:45:35,840 --> 00:45:39,380
>> V PHP, že to nie je silný písanie.

1035
00:45:39,380 --> 00:45:41,430
Je tu týždeň písanie,
ktorá sa práve tu znamená,

1036
00:45:41,430 --> 00:45:44,030
sú dátové typy, ako sú reťazce
a čísla a ďalších vecí.

1037
00:45:44,030 --> 00:45:47,030
Ale nemusíte sa obťažovať s uvedením
to, čo oni sú už nie.

1038
00:45:47,030 --> 00:45:48,980
PHP čísla je pre vás.

1039
00:45:48,980 --> 00:45:52,030
Znak dolára je len rozhodnutie
že PHP ľud rokov

1040
00:45:52,030 --> 00:45:54,890
Pred tak, že všetky premenné v PHP
práve začína znakom dolára.

1041
00:45:54,890 --> 00:45:58,130
Je to vlastne trochu užitočný v tom, že
vyskočí na vás trochu viac.

1042
00:45:58,130 --> 00:46:01,315
>> Ale po tom, toto
je stav, v PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
To, čo je v porovnaní s C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Trick question-- nič,
čo je v skutočnosti naozaj pekné.

1047
00:46:09,600 --> 00:46:12,140
Booleovské výrazy v PHP-- rovnaké.

1048
00:46:12,140 --> 00:46:19,354
Booleovské výrazy sa a oproti
alebo prepínače, slučky, slučky, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
to je iný.

1050
00:46:20,270 --> 00:46:22,660
>> Tak to dopadá, že je
pár ďalších funkcií v PHP.

1051
00:46:22,660 --> 00:46:25,243
Jedným z nich je v skutočnosti to,
ktorý je úžasne pohodlné.

1052
00:46:25,243 --> 00:46:29,250
Ak je $ čísel je pole, ktoré ste
deklarovaný predtým v programe,

1053
00:46:29,250 --> 00:46:33,350
Máte tento chuť na každý konštrukt
že namiesto toho, aby to všetko

1054
00:46:33,350 --> 00:46:37,020
nepríjemné I = 0, I je
menej než to, [? Aj ++?]

1055
00:46:37,020 --> 00:46:40,320
pre každý čísel ako čísla, kde každý
z týchto znamení hodnoty dolára je len

1056
00:46:40,320 --> 00:46:42,790
variabilný, a druhý
si môžete myslieť ako ja

1057
00:46:42,790 --> 00:46:44,290
Dalo by sa to nazvať, čo chcete.

1058
00:46:44,290 --> 00:46:45,770
Zavolal som to číslo.

1059
00:46:45,770 --> 00:46:48,825
To bude iterovat cez
pole volaných čísel.

1060
00:46:48,825 --> 00:46:51,200
A v každej iterácii, je to
bude automaticky aktualizovať

1061
00:46:51,200 --> 00:46:54,340
pre teba číslo znak dolára
variabilný, takže si neustále

1062
00:46:54,340 --> 00:46:58,210
majú prístup k premennej, ktorú chcete
aby bolo nutné robiť žiadne hranatú zátvorku

1063
00:46:58,210 --> 00:47:00,980
notácie alebo indexovania do matice.

1064
00:47:00,980 --> 00:47:04,950
>> Okrem toho, máme dokonca veci, ako je
pole, ktoré vyzerajú takmer rovnako,

1065
00:47:04,950 --> 00:47:08,210
okrem toho, že je to veľmi časté, ako sme to
vidieť, ako v PHP a JavaScripte

1066
00:47:08,210 --> 00:47:10,750
vykonať predbežnú inicializáciu poľa
pomocou hranatých zátvoriek.

1067
00:47:10,750 --> 00:47:12,040
C používa zložené zátvorky.

1068
00:47:12,040 --> 00:47:15,330
Takže je to trochu odlišné, aj keď
sme sa naozaj použiť ten trik moc.

1069
00:47:15,330 --> 00:47:20,090
>> Ale ešte mocnejšie,
PHP je asociatívne pole,

1070
00:47:20,090 --> 00:47:23,100
čo je ozdobný spôsob, ako
hovoriť hash tabuľky.

1071
00:47:23,100 --> 00:47:31,610
V skutočnosti, ak chcete deklarovať hash
Tabuľka v PHP, na rozdiel od C- koľko

1072
00:47:31,610 --> 00:47:34,775
riadkov kódu trvalo
skutočne realizovať hash tabuľky v C?

1073
00:47:34,775 --> 00:47:38,310
Alebo koľko riadkov kódu je to z
pri vykonávaní hash tabuľky v C?

1074
00:47:38,310 --> 00:47:39,820
Takže je to asi veľa, že?

1075
00:47:39,820 --> 00:47:41,680
Je to niekoľko desiatok, možno 100 alebo 200.

1076
00:47:41,680 --> 00:47:42,980
To je netriviálne.

1077
00:47:42,980 --> 00:47:45,420
Alebo je to o tom, že, ako
budete čoskoro vidieť, netriviálne

1078
00:47:45,420 --> 00:47:48,080
realizovať hash tabuľky
[Nepočuteľné] a tiež vyskúšať.

1079
00:47:48,080 --> 00:47:50,580
Ale v PHP-- a úprimne povedané, ja
asi nemal ti to povedať,

1080
00:47:50,580 --> 00:47:53,630
až Monday-- v PHP, ak
chcete tabuľku, hotovo.

1081
00:47:53,630 --> 00:47:56,431
To je hash table-- tak
s jedným riadkom kódu.

1082
00:47:56,431 --> 00:47:56,930
A

1083
00:47:56,930 --> 00:47:58,810
>> Mnoho jazykov urobiť.

1084
00:47:58,810 --> 00:48:00,190
Bavte sa s pset päť.

1085
00:48:00,190 --> 00:48:01,980
Takže veľa jazykov urobiť.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Dávajú vám tieto abstrakcie
že iní ľudia, iné programátorov,

1088
00:48:06,140 --> 00:48:09,870
vytvorili pre vás tak, že
môžete postaviť na svojich pleciach

1089
00:48:09,870 --> 00:48:13,290
a začať používať myšlienky, ktoré sú super
presvedčivé, ako hash tabuľky a stromy

1090
00:48:13,290 --> 00:48:14,140
a snaží sa.

1091
00:48:14,140 --> 00:48:17,790
Ale nemusíte nutne
vykonávať tie veci sami.

1092
00:48:17,790 --> 00:48:20,850
>> A tak nakoniec to, čo
budeme používať PHP pre

1093
00:48:20,850 --> 00:48:23,580
je potenciálne písanie programov
z tzv príkazového riadku.

1094
00:48:23,580 --> 00:48:26,600
Mohli by sme sa znovu každý program
sme napísal tento semester tak ďaleko,

1095
00:48:26,600 --> 00:48:30,410
snáď s výnimkou Breakout, ktorý využíva SPL,
ktorá je špecifická pre C v súčasnej dobe.

1096
00:48:30,410 --> 00:48:33,100
Ale každý iný problém nastaviť,
určite Mario a Caesar

1097
00:48:33,100 --> 00:48:35,300
a Vigener a
[? Crack?] A ďalej sme

1098
00:48:35,300 --> 00:48:39,520
mohla opätovne zaviesť v PHP, a
asi trochu ľahšie.

1099
00:48:39,520 --> 00:48:43,050
>> Ale čo my nakoniec bude
PHP používať ich web programovanie.

1100
00:48:43,050 --> 00:48:46,420
A budeme zavádzať ďalšie
týždeň mentálny model, vzor nazvaný

1101
00:48:46,420 --> 00:48:49,610
MVC, pohľad modelu regulátor,
ktoré, ak ste urobili programovania

1102
00:48:49,610 --> 00:48:51,610
predtým v Pythone alebo
Ruby alebo inom mieste, budete

1103
00:48:51,610 --> 00:48:54,112
možno viete, tento tím sa
Koľajnice a Django a podobne.

1104
00:48:54,112 --> 00:48:55,820
Ale ak ste novým
to taky, uvidíte

1105
00:48:55,820 --> 00:48:59,652
že je to v skutočnosti veľmi prirodzený
rozšírenie faktorizace

1106
00:48:59,652 --> 00:49:01,360
a druh konštrukcie
kódu, ktorý máme

1107
00:49:01,360 --> 00:49:04,670
robil v C. Budeme teraz
použiť niektoré z týchto lekcií do PHP

1108
00:49:04,670 --> 00:49:07,190
takže nakoniec sme
vykonávanie našich vlastných webových stránok.

1109
00:49:07,190 --> 00:49:09,080
A ak ste trochu
uchvátený alebo ohromený

1110
00:49:09,080 --> 00:49:10,954
že budeme robiť
všetky tak rýchlo,

1111
00:49:10,954 --> 00:49:13,410
Uvedomujem si, že takmer každý
semester, takmer 90%

1112
00:49:13,410 --> 00:49:16,560
študentov CS50, vrátane tých,
ktorí nikdy naprogramované,

1113
00:49:16,560 --> 00:49:20,329
skončiť robiť záverečné projekty, ktoré
sú založené na webovom programovaní.

1114
00:49:20,329 --> 00:49:23,120
A tak uvidíte, že sa vráti
sú vysoko v nasledujúcich týždňoch.

1115
00:49:23,120 --> 00:49:24,965
Tak sme vás vidieť a potom v pondelok.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> SPEAKER 1: A teraz, Hlboká
Myšlienky od Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Hash tabuľky.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [SMIECH]

1122
00:49:38,402 --> 00:49:38,902