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

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

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

4
00:00:10,955 --> 00:00:12,580
DAVID J MALAN: Bine, bine ai revenit.

5
00:00:12,580 --> 00:00:13,600
Acest lucru este CS50.

6
00:00:13,600 --> 00:00:15,540
Acesta este sfârșitul săptămânii șapte.

7
00:00:15,540 --> 00:00:18,180
Și Finalul acestei măturător de stradă
vânătoare de problemă stabilite patru

8
00:00:18,180 --> 00:00:19,220
care v-ar aminti.

9
00:00:19,220 --> 00:00:21,650
După recuperarea integrală a
acele JPEG de personal,

10
00:00:21,650 --> 00:00:24,820
ai fost provocat, dacă doriți,
pentru a te fotografia cu cât mai multe

11
00:00:24,820 --> 00:00:25,981
de acei oameni, după cum puteți.

12
00:00:25,981 --> 00:00:28,480
Avem o grămadă de observații
în ultimele câteva săptămâni,

13
00:00:28,480 --> 00:00:32,980
într-adevăr, destul de puține chiar înainte de prânz
astăzi, dintre care unele sunt acelea aici,

14
00:00:32,980 --> 00:00:37,670
prins aici in-- pare like-- Annenberg
Sala de la orele de birou, o aici

15
00:00:37,670 --> 00:00:39,530
în Lowell Casa cu Nick.

16
00:00:39,530 --> 00:00:41,750
Iată Ramon fiind prins la telefon.

17
00:00:41,750 --> 00:00:43,870
Acest lucru a fost la un prânz CS50.

18
00:00:43,870 --> 00:00:46,840
Acest lucru a fost Jason sistemul Skype cu
un coleg de clasa mai creativ,

19
00:00:46,840 --> 00:00:48,280
care l-au sunat în acest fel.

20
00:00:48,280 --> 00:00:49,690
Nu știm ce a fost asta.

21
00:00:49,690 --> 00:00:51,940
>> [Râsete]

22
00:00:51,940 --> 00:00:54,570
>> DAVID J MALAN: Dar
care este în valoare de un gigabyte.

23
00:00:54,570 --> 00:00:56,960
Iată Chang, care
literalmente a fugit de pe scenă

24
00:00:56,960 --> 00:01:00,480
pentru a evita sa fie fotografiat unul
zi, dar a fost în cele din urmă prins.

25
00:01:00,480 --> 00:01:02,050
Aici e Nick.

26
00:01:02,050 --> 00:01:03,480
Aici e Nick.

27
00:01:03,480 --> 00:01:04,080
Aici e Nick.

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

29
00:01:05,090 --> 00:01:07,670
Și aici este Alison în funcție de domeniile.

30
00:01:07,670 --> 00:01:11,840
Și Zamyla chiar a fost găsit
la un concurs sală de bal.

31
00:01:11,840 --> 00:01:14,100
Deci, vom merge prin
aceste fotografii, dau seama

32
00:01:14,100 --> 00:01:16,690
care a prezentat cel mai
cea mai veche, și răsplata

33
00:01:16,690 --> 00:01:20,662
un premiu fabulos, ca
a promis în spec.

34
00:01:20,662 --> 00:01:23,120
Și vom urmări și ele despre
spațiul care a fost implicat.

35
00:01:23,120 --> 00:01:26,860
>> Un cuplu de announcements-- astfel masa de prânz
este, din nou, vineri la 13:15.

36
00:01:26,860 --> 00:01:30,420
Dacă doriți să vă alăturați nouă,
RSVP la acea adresă URL aici.

37
00:01:30,420 --> 00:01:33,730
Jason apare din nou aici la un
a secțiunilor un cuplu de ani

38
00:01:33,730 --> 00:01:35,510
înapoi, ceea ce sa întâmplat
să cadă de Halloween.

39
00:01:35,510 --> 00:01:38,950
Și într-adevăr, el îmbrăcat ca un
dovleac acel an.

40
00:01:38,950 --> 00:01:42,700
Dacă te uiți la această secțiune
de la 2011 pct său

41
00:01:42,700 --> 00:01:46,480
opt, dacă sunteți curioși,
la CS50.tv, cred

42
00:01:46,480 --> 00:01:49,730
acesta a fost anul în care
pompa lui de aer a fost de lucru.

43
00:01:49,730 --> 00:01:52,490
>> Dacă te uiți atunci
secțiune similară, în 2012,

44
00:01:52,490 --> 00:01:55,620
veți vedea această Jason mult dezumflat,
deoarece costumul nu mai funcționau,

45
00:01:55,620 --> 00:01:58,060
care este doar de a spune
aceasta vineri, dacă ai fi

46
00:01:58,060 --> 00:02:02,720
Vrei să sculpteze un dovleac cu Daven
și Gabe și alții, rog, la capetele

47
00:02:02,720 --> 00:02:04,480
la adresa cs50.harvard.edu.

48
00:02:04,480 --> 00:02:06,200
Acesta promite să fie foarte distractiv.

49
00:02:06,200 --> 00:02:08,660
Daven, ni se spune, a sculptat
Dovleci toată viața lui.

50
00:02:08,660 --> 00:02:11,930
Gabriel din Brazilia nu are
sculptat un dovleac pentru Halloween.

51
00:02:11,930 --> 00:02:14,700
Deci, să fie acolo cu ei ca el învață.

52
00:02:14,700 --> 00:02:16,830
>> Seminarii, meanwhile--
astfel încât veți afla în curând

53
00:02:16,830 --> 00:02:20,650
despre ceea ce așteptările noastre sunt pentru
proiectul final, care, în esență,

54
00:02:20,650 --> 00:02:23,150
va fierbe până la
proiectarea și punerea în aplicare

55
00:02:23,150 --> 00:02:26,440
cele mai multe orice proiect de interes pentru
tu, chiar dacă sub rezerva aprobării

56
00:02:26,440 --> 00:02:28,490
și de orientare de la colegul dumneavoastră de predare.

57
00:02:28,490 --> 00:02:32,110
Spre sfârșitul
semestru, vom introduce un număr

58
00:02:32,110 --> 00:02:35,610
de seminarii, care sunt cursuri opționale
condus de semenii didactice și Harvard

59
00:02:35,610 --> 00:02:38,570
personal, prieteni ai cursului intreaga
campus, pe diverse teme că

60
00:02:38,570 --> 00:02:41,470
sunt tangent la
Programa de bază curs de

61
00:02:41,470 --> 00:02:45,590
dar cu toate acestea este cazul, distracție, și
diferit pentru potențialii proiecte finale.

62
00:02:45,590 --> 00:02:49,530
>> De exemplu, în primul rând, în cazul în care doriți
să se înregistreze, cap de faptul că URL-ul acolo.

63
00:02:49,530 --> 00:02:53,010
Și acest lucru este gama de
seminarii numai din acest an.

64
00:02:53,010 --> 00:02:56,060
Dar dau seama avem zeci de
seminarii din ultimii ani, toate din care

65
00:02:56,060 --> 00:02:59,774
sunt legate în meniul Seminarii
opțiune de site-ul cursului.

66
00:02:59,774 --> 00:03:02,190
Deci, dacă te gândești
dincolo de zona ta de confort

67
00:03:02,190 --> 00:03:05,060
sau ridicarea unor noi competențe,
de exemplu, programarea iPhone

68
00:03:05,060 --> 00:03:08,100
aplicații cu Swift, o nouă limbă
de la Apple sau Objective-C

69
00:03:08,100 --> 00:03:11,230
sau Android sau de programare [? tac?]
becuri, sau oricare dintre subiectele

70
00:03:11,230 --> 00:03:15,490
aici și mai mult, din cauza verificare
pagina de înregistrare.

71
00:03:15,490 --> 00:03:19,730
>> Așa că am început și încheiat la data de
Luni cu uita la HTTP.

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

73
00:03:22,675 --> 00:03:24,045
Dar ce înseamnă de fapt acest lucru?

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

75
00:03:26,805 --> 00:03:27,930
Ce înseamnă de fapt acest lucru?

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

77
00:03:30,665 --> 00:03:31,290
Este faptul că o mână de ajutor?

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

79
00:03:33,074 --> 00:03:34,740
Știu că ești doar lamureste.

80
00:03:34,740 --> 00:03:36,400
Dar vrei să propună ceea ce HTTP este?

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

82
00:03:37,792 --> 00:03:40,576
>> Audiența: Cât de calculatoare
comunica cu [inaudibil].

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

84
00:03:41,517 --> 00:03:43,100
DAVID J MALAN: Am ratat ultima parte.

85
00:03:43,100 --> 00:03:45,774
Cum calculatoare comunica aplice:

86
00:03:45,774 --> 00:03:47,325
>> Serverele de Internet: audienta.

87
00:03:47,325 --> 00:03:50,450
DAVID J MALAN: Good-- cu internet
servere, și în special, servere de web.

88
00:03:50,450 --> 00:03:53,533
Pentru că rechemare, există o grămadă de
servicii pe internet, dintre care unele

89
00:03:53,533 --> 00:03:57,349
folosiți, probabil, zilnic între chat-
și mesajul, chat, și web, și de e-mail,

90
00:03:57,349 --> 00:03:57,890
și altele asemenea.

91
00:03:57,890 --> 00:04:00,900
Și HTTP este doar
protocol care browserele web

92
00:04:00,900 --> 00:04:03,750
vorbi atunci când comunică cu
servere de web, și vice-versa.

93
00:04:03,750 --> 00:04:05,580
Și analogul în
lumea umană ar putea fi,

94
00:04:05,580 --> 00:04:08,730
Am întind mâna mea pentru a se agită unele
alt om și el sau ea

95
00:04:08,730 --> 00:04:11,970
recunoaște prin extinderea
lui sau mâna la fel de bine.

96
00:04:11,970 --> 00:04:13,970
Așa că e doar un protocol,
un set de convenții.

97
00:04:13,970 --> 00:04:15,630
>> Și ce într-adevăr sunt acele convenții?

98
00:04:15,630 --> 00:04:18,640
Ei bine, pur și simplu se reduce la
trimiterea de mesaje înainte și înapoi,

99
00:04:18,640 --> 00:04:19,770
așa cum am descris aici.

100
00:04:19,770 --> 00:04:22,520
Și există o serie de moduri în
pe care le puteți trimite aceste mesaje.

101
00:04:22,520 --> 00:04:24,360
Și, probabil, cel mai
comună este cunoscut ca get.

102
00:04:24,360 --> 00:04:26,510
Și vom vedea un contrast
la aceasta înainte de mult timp.

103
00:04:26,510 --> 00:04:30,010
>> Dar o cerere de a obține de la un browser
la server doar arata ca aceasta.

104
00:04:30,010 --> 00:04:32,960
E o grămadă de text care se pune
în interiorul unui plic virtuale.

105
00:04:32,960 --> 00:04:35,854
La exterior din care plic
du-te câteva bucăți de detalii.

106
00:04:35,854 --> 00:04:37,770
Ce trebuie pentru a merge pe
plic, ca să spunem așa,

107
00:04:37,770 --> 00:04:41,820
în scopul de a obține o cerere ca
aceasta de la mine la un server de web?

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

109
00:04:42,320 --> 00:04:43,270
>> Audiența: Adresa dvs. de IP.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J MALAN: IP-ul meu
în domeniul de la, să spunem așa,

111
00:04:45,890 --> 00:04:49,490
și, desigur,
adresa IP destinatarului.

112
00:04:49,490 --> 00:04:52,710
Dar, în cazul unui pachet de web,
avem nevoie de un pic mai multe detalii

113
00:04:52,710 --> 00:04:55,254
Nu este suficient doar pentru a
trimite un plic la un server,

114
00:04:55,254 --> 00:04:57,670
pentru că acel server ar putea fi
ascultare pentru diferite tipuri de

115
00:04:57,670 --> 00:04:59,180
din traficul de pe internet.

116
00:04:59,180 --> 00:05:01,370
Deci, ce altceva mai avem nevoie
în afară de IP a destinatarului?

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

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

119
00:05:03,222 --> 00:05:04,241
>> Audiența: Este TCP?

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

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

122
00:05:06,470 --> 00:05:07,340
>> Audiența: Adresa.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J MALAN: Adresă,
sau port, așa cum se numește.

124
00:05:09,340 --> 00:05:11,010
Aproape, dar un număr de port TCP.

125
00:05:11,010 --> 00:05:12,220
Și există o grămadă de acestea.

126
00:05:12,220 --> 00:05:14,310
Dar cu siguranță cel mai mult
familiar ar trebui în cele din urmă

127
00:05:14,310 --> 00:05:17,590
80, care este implicită
unul folosit pentru traficul web.

128
00:05:17,590 --> 00:05:20,040
Și un alt familiar
unul în curând vor fi 443,

129
00:05:20,040 --> 00:05:24,280
care este folosit pentru securizată web
trafic, adrese URL care încep cu https.

130
00:05:24,280 --> 00:05:26,650
>> Deci, asta este ceea ce se întâmplă
în interiorul acestei plic.

131
00:05:26,650 --> 00:05:29,780
Și obține / doar mijloace, da
mă pagina de web implicit.

132
00:05:29,780 --> 00:05:32,700
Dă-mi rădăcina greu
conduce pe acel server web.

133
00:05:32,700 --> 00:05:36,050
Și, sperăm, pe web
serverul va raspunde cu, OK

134
00:05:36,050 --> 00:05:39,630
și numărul 200, care este doar
o convenție a zis, da, toate

135
00:05:39,630 --> 00:05:40,470
este într-adevăr în regulă.

136
00:05:40,470 --> 00:05:41,680
Iată pagina.

137
00:05:41,680 --> 00:05:45,510
Tipul de pagina web este de gând să
fie text, dar mai precis, HTML,

138
00:05:45,510 --> 00:05:47,010
pe care suntem pe cale să se scufunde înapoi în.

139
00:05:47,010 --> 00:05:49,877
Iar punctul dot dot locații
mijloace, aici este HTML.

140
00:05:49,877 --> 00:05:51,710
Și asta e în cazul în care ne-am
ridica povestea de azi,

141
00:05:51,710 --> 00:05:55,740
scris de fapt HTML,
HyperText Markup Language, care

142
00:05:55,740 --> 00:05:57,727
este limba în care
pagini web sunt scrise.

143
00:05:57,727 --> 00:05:59,060
Nu este un limbaj de programare.

144
00:05:59,060 --> 00:06:01,270
Nu există funcții
sau bucle sau condiții.

145
00:06:01,270 --> 00:06:03,800
Este un limbaj de marcare,
precum și a se vedea din nou astăzi,

146
00:06:03,800 --> 00:06:07,240
care vă permite să specificați
cum de a structura și stiliza

147
00:06:07,240 --> 00:06:09,300
estetic o pagină web.

148
00:06:09,300 --> 00:06:11,470
>> Deci, aceasta a fost cea
și numai pagina cu adevarat

149
00:06:11,470 --> 00:06:13,930
sa uitat la, dacă pentru scurt timp, pe luni.

150
00:06:13,930 --> 00:06:16,250
Și observați câteva
Caracteristicile importante.

151
00:06:16,250 --> 00:06:20,170
Există o mulțime de deschis în unghi
suport și aproape placuta unghi.

152
00:06:20,170 --> 00:06:23,160
În între cele înclinată
paranteze sunt cuvinte.

153
00:06:23,160 --> 00:06:25,660
Și vom începe
de asteptare aceste cuvinte etichete.

154
00:06:25,660 --> 00:06:28,800
Cap de suport atât de deschis
și cap de suport inchis

155
00:06:28,800 --> 00:06:33,620
sunt tag-uri deschise și închise,
sau etichetele de început și sfârșit

156
00:06:33,620 --> 00:06:37,660
respectiv, a unui element HTML,
așa cum vom numi, numit cap.

157
00:06:37,660 --> 00:06:41,760
Și aplică aceeași jargonul
la corp în HTML și așa mai departe.

158
00:06:41,760 --> 00:06:43,970
>> Și ceea ce este frumos este
HTML-- și, într-adevăr, vom

159
00:06:43,970 --> 00:06:47,187
petrece foarte puțin timp pe ea,
pentru că veți cea mai mare parte doar dau seama

160
00:06:47,187 --> 00:06:49,770
ce caracteristici are, atunci când
de fapt, au o problemă de beton

161
00:06:49,770 --> 00:06:52,820
pentru solve-- veți găsi că
un browser este destul de prost.

162
00:06:52,820 --> 00:06:56,450
E doar de gând să do-- nu spre deosebire de
un computer-- ceea ce-l spune să faci.

163
00:06:56,450 --> 00:06:59,279
Și așa că atunci când ai deschis
suport HTML la foarte de sus

164
00:06:59,279 --> 00:07:01,320
acolo, că, în esență,
înseamnă doar, hei, browser-ul,

165
00:07:01,320 --> 00:07:04,090
aici vine o pagină web scris în HTML.

166
00:07:04,090 --> 00:07:06,130
>> Când vede suport deschis
cap, asta înseamnă doar,

167
00:07:06,130 --> 00:07:10,350
hei, browser-ul, aici vine cap, sau
porțiunea superioară a paginii mele web.

168
00:07:10,350 --> 00:07:14,192
Atunci când vede un suport închis
cap, asta înseamnă doar, hei,

169
00:07:14,192 --> 00:07:15,150
asta este pentru cap.

170
00:07:15,150 --> 00:07:16,420
Regimul de așteptare pentru altceva.

171
00:07:16,420 --> 00:07:18,878
Și că altceva este
se pare că va fi organismul.

172
00:07:18,878 --> 00:07:22,630
Iar atunci când nu aveți o etichetă, cum ar fi
trebuie doar salut, virgulă, lume,

173
00:07:22,630 --> 00:07:26,610
care este doar de gând să fi text crud care
în cele din urmă este afișat pe ecran.

174
00:07:26,610 --> 00:07:29,220
>> Acum, veți observa prea
amprentei aici.

175
00:07:29,220 --> 00:07:32,160
Probabil Puteți deduce
cum suntem o stylizing.

176
00:07:32,160 --> 00:07:34,850
De fiecare dată când deschid o etichetă,
ca să spunem așa, am liniuță.

177
00:07:34,850 --> 00:07:38,540
Și de fiecare dată când închid
o etichetă, ne-am liniuță,

178
00:07:38,540 --> 00:07:40,690
similară în spirit de acolade.

179
00:07:40,690 --> 00:07:43,470
Și, dincolo de asta, eu sunt un fel
de a folosi judecata mea.

180
00:07:43,470 --> 00:07:48,380
Observați că nu am deranja lovind
Introduceți în interiorul tag-ul care din titlu.

181
00:07:48,380 --> 00:07:48,990
De ce?

182
00:07:48,990 --> 00:07:51,920
Ei bine, am decis părea o
puțin mai curat pentru mine, omul,

183
00:07:51,920 --> 00:07:53,181
pentru a nu deranja doar fac asta.

184
00:07:53,181 --> 00:07:54,930
Deci, din nou, există unele
hotărâre solicită doar

185
00:07:54,930 --> 00:07:57,670
ca nu este in C sau orice limbă.

186
00:07:57,670 --> 00:08:04,110
>> Dar observați de asemenea că această indentare
se pretează la un model mental,

187
00:08:04,110 --> 00:08:05,670
nu supra complica ea.

188
00:08:05,670 --> 00:08:07,020
Dar un copac, nu?

189
00:08:07,020 --> 00:08:09,290
Dacă vă gândiți la un web
pagina, aparent scris

190
00:08:09,290 --> 00:08:12,050
ca aceasta, ca fiind
frumos aliniat în acest fel,

191
00:08:12,050 --> 00:08:17,390
vă puteți gândi aproape de suportul deschis
HTML suport închis tag-ul este delimitarea

192
00:08:17,390 --> 00:08:21,380
rădăcina unui nod, un arbore genealogic
nod stil în stilul de copaci

193
00:08:21,380 --> 00:08:22,900
ne-am uitat la vinerea trecută.

194
00:08:22,900 --> 00:08:27,630
>> Și într-adevăr, avem pe dreapta aici
ceea ce vom numi o DOM, D-O-M, documentul

195
00:08:27,630 --> 00:08:31,680
Modelul obiect, un mod fantezist de a spune
un copac care reprezintă acea HTML.

196
00:08:31,680 --> 00:08:36,140
Și observați că HTML are, vom spune,
ca un arbore genealogic, doi copii.

197
00:08:36,140 --> 00:08:37,659
Pe partea stângă este șeful.

198
00:08:37,659 --> 00:08:39,179
In partea dreapta este trupul.

199
00:08:39,179 --> 00:08:44,220
>> Și, la fel ca și un exercițiu de gândire fără minte,
șef, desigur, are cât de mulți copii

200
00:08:44,220 --> 00:08:46,070
în conformitate cu această structură?

201
00:08:46,070 --> 00:08:48,200
Deci, doar unul, title--
și de aceea ne-am

202
00:08:48,200 --> 00:08:50,580
săgeata merge de la cap la titlu.

203
00:08:50,580 --> 00:08:55,110
Deci, este ca și cum acea persoană în
arbore genealogic a avut doar un singur pui.

204
00:08:55,110 --> 00:08:58,230
Și apoi din titlu se poate
se spune că are un copil prea.

205
00:08:58,230 --> 00:09:01,780
>> Amintiti-va ca HTML avut
Bună ziua, virgulă, lumea de dedesubt.

206
00:09:01,780 --> 00:09:06,090
Și am am desenat pur și simplu într-o
oval în loc de un dreptunghi doar

207
00:09:06,090 --> 00:09:10,559
pentru a transmite semantică faptul că, deși
este un nod în copac, ca să spunem așa,

208
00:09:10,559 --> 00:09:12,100
e un fel de fundamental diferite.

209
00:09:12,100 --> 00:09:12,800
Nu este o etichetă.

210
00:09:12,800 --> 00:09:14,780
Sau, mai corect, nu e un element.

211
00:09:14,780 --> 00:09:16,590
E doar un nod text, dacă vreți.

212
00:09:16,590 --> 00:09:18,990
Dar acestea sunt complet
convențiile umane arbitrare.

213
00:09:18,990 --> 00:09:23,180
Aceasta este doar felul meu de acum
reprezentând ceea ce voi ca un agregat

214
00:09:23,180 --> 00:09:24,340
sun documentul.

215
00:09:24,340 --> 00:09:27,750
>> Și, ca o paranteza, lucrul la
colțul din stânga sus de super,

216
00:09:27,750 --> 00:09:32,080
Suport deschis semn de exclamare doc
tip HTML, acest lucru arata ca o etichetă,

217
00:09:32,080 --> 00:09:35,560
dar este cazul stupid de colț în cazul în care
că este pur și simplu acolo, copiat și inserat

218
00:09:35,560 --> 00:09:38,460
pentru a indica browsere
acest lucru este HTML 5 versiune.

219
00:09:38,460 --> 00:09:41,540
Lumea se schimbă ceea ce
prima linie de cod într-o pagină ar trebui să fie.

220
00:09:41,540 --> 00:09:43,820
Acest lucru înseamnă doar versiunea 5.

221
00:09:43,820 --> 00:09:45,950
Asa ca nu destul de
arata ca ceilalți.

222
00:09:45,950 --> 00:09:48,120
>> În regulă, astfel încât cu
a spus, veți aprecia acum

223
00:09:48,120 --> 00:09:50,767
acest destul de prost aceasta
tatuaj pe cineva prins.

224
00:09:50,767 --> 00:09:51,990
>> [Râsete]

225
00:09:51,990 --> 00:09:54,210
>> DAVID J MALAN: Bine,
și acum hai efectiv se arunca cu capul

226
00:09:54,210 --> 00:09:55,710
în a face ceva cu asta.

227
00:09:55,710 --> 00:09:58,610
Veți reamintească faptul că ultima dată
Am deschis Appliance CS50

228
00:09:58,610 --> 00:10:01,650
și am făcut ceva ca
simplu ca deschiderea gedit.

229
00:10:01,650 --> 00:10:05,190
Și am salvat fișierul chiar și pe
desktop-- mea nicăieri special--

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

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

232
00:10:07,100 --> 00:10:10,984
>> Așa că lasă-mă să fac asta
again-- hello.html Enter.

233
00:10:10,984 --> 00:10:13,900
Și acum, în acest dosar, am de gând să
mergeți mai departe și să reproducă ceea ce tocmai am

234
00:10:13,900 --> 00:10:18,850
saw-- tip doc html Apoi am de gând să
se deschid html placuta placuta închis.

235
00:10:18,850 --> 00:10:21,890
Și apoi am de gând să preventiv
deschide și închide tag-ul.

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

237
00:10:22,390 --> 00:10:23,598
Doar asa ca nu uita mai târziu.

238
00:10:23,598 --> 00:10:26,850
E doar o bună practică, cum ar fi de deschidere
și închiderea acolade dintr-o dată.

239
00:10:26,850 --> 00:10:28,900
>> Și apoi ce a urmat?

240
00:10:28,900 --> 00:10:30,582
Vă puteți gândi de tatuaj.

241
00:10:30,582 --> 00:10:31,450
>> Audiența: cap.

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

243
00:10:32,500 --> 00:10:36,020
Și apoi aici, m-am
a avut titlul, cred.

244
00:10:36,020 --> 00:10:39,886
Și titlul era arbitrar,
Bună ziua, lume din titlu aproape.

245
00:10:39,886 --> 00:10:42,760
Și apoi aici, corpul, de
course-- apoi ne închideți tag-ul body.

246
00:10:42,760 --> 00:10:45,660
Și apoi doar oarecum redundant,
Am avut același lucru aici.

247
00:10:45,660 --> 00:10:47,150
>> Așa că am susțin că aceasta este o pagină web.

248
00:10:47,150 --> 00:10:49,050
Acest lucru este ceva care
ar putea trăi acum pe web,

249
00:10:49,050 --> 00:10:51,925
chiar dacă, desigur, este literalmente
care trăiesc pe desktop chiar acum.

250
00:10:51,925 --> 00:10:55,837
Dar, într-adevăr, dacă am reduce la minimum gedit,
Voi vedea pe desktop pictograma sa.

251
00:10:55,837 --> 00:10:58,420
Chiar dacă acest lucru este aparatul,
ai putea face acest lucru pe Mac OS

252
00:10:58,420 --> 00:11:01,580
fără TextEdit sau
Ferestre cu Notepad chiar.

253
00:11:01,580 --> 00:11:06,115
>> Și dacă am merge mai departe și dublu clic
că, chiar și select-- bine, să

254
00:11:06,115 --> 00:11:07,990
Nu selectați asta pentru că
Chrome nu se deschide.

255
00:11:07,990 --> 00:11:09,281
Să mergem mai departe și să deschideți Chrome.

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

257
00:11:10,160 --> 00:11:14,040
Și apoi face comandă-O pentru deschis
Și să navigați pe desktop-ul meu

258
00:11:14,040 --> 00:11:15,320
și deschideți acel fișier.

259
00:11:15,320 --> 00:11:20,120
Acesta este modul în care interpretează un browser
HTML, de sus în jos, la stânga la dreapta.

260
00:11:20,120 --> 00:11:21,314
Hei, browser-ul aici e HTML.

261
00:11:21,314 --> 00:11:21,980
Iată capul.

262
00:11:21,980 --> 00:11:23,250
Iată titlul.

263
00:11:23,250 --> 00:11:24,090
Iată corpul.

264
00:11:24,090 --> 00:11:26,620
Și într-adevăr, acesta este modul
se face că pagina web.

265
00:11:26,620 --> 00:11:27,800
>> Dar observați URL-ul.

266
00:11:27,800 --> 00:11:32,430
Nici unul dintre voi ar putea trage acest specific
pagina pe laptop-uri, chiar acum,

267
00:11:32,430 --> 00:11:34,910
chiar în interiorul tău
aparat prin faptul că URL-ul,

268
00:11:34,910 --> 00:11:40,130
deoarece file: // indică de fapt
pe sistemul meu de fișiere, hard-disk,

269
00:11:40,130 --> 00:11:40,990
nu a ta.

270
00:11:40,990 --> 00:11:42,440
Deci, acest lucru nu este tot ceea ce util.

271
00:11:42,440 --> 00:11:44,940
>> Să acum muta spre
utilizând un server web actuale.

272
00:11:44,940 --> 00:11:48,309
Și se pare că CS50 Appliance
este mai mult decât un mediu în care

273
00:11:48,309 --> 00:11:51,100
puteți scrie cod C și compila
și rulați-l ca și cum le-ați făcut.

274
00:11:51,100 --> 00:11:55,500
De asemenea, a fost configurat de către
personalul să reprezinte un web tipică

275
00:11:55,500 --> 00:11:58,290
server care e pe internet,
una care v-ar plăti pentru

276
00:11:58,290 --> 00:12:00,210
sau unul care este în așa-numitul nor.

277
00:12:00,210 --> 00:12:02,600
>> Și se rulează
standard, open source gratuit

278
00:12:02,600 --> 00:12:06,160
software, de exemplu, ceva
numita Apache, care este, probabil

279
00:12:06,160 --> 00:12:08,700
încă cel mai popular web
software de tip server în lume

280
00:12:08,700 --> 00:12:11,030
că mii de site-uri web folosesc astăzi.

281
00:12:11,030 --> 00:12:13,420
Și este, de asemenea, chiar are
software-ul ca MySQL,

282
00:12:13,420 --> 00:12:16,240
care este un server de baze de date
că vom ajunge în cele din urmă la,

283
00:12:16,240 --> 00:12:18,330
care este doar de a spune
Eu pot începe tratamentul

284
00:12:18,330 --> 00:12:22,040
aparat mea ca un server cu drepturi depline
că eu nu plătesc pentru în altă parte.

285
00:12:22,040 --> 00:12:25,980
Pur și simplu trăiește pe propria ta laptop pentru
în scopuri de dezvoltare și de cartier.

286
00:12:25,980 --> 00:12:27,870
>> Așa că hai să mergem mai departe și
să profite de acest lucru.

287
00:12:27,870 --> 00:12:30,120
Am de gând să merg mai departe și
deschide o fereastră terminal.

288
00:12:30,120 --> 00:12:33,030
Și am de gând să merg mai departe și
move-- de fapt, în primul rând eu sunt

289
00:12:33,030 --> 00:12:34,860
de gând să mergeți la desktop-ul meu.

290
00:12:34,860 --> 00:12:36,400
Dacă o fac E, nu e hello.html.

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

292
00:12:37,022 --> 00:12:38,730
Și am de gând să merg
înainte și începe să utilizați

293
00:12:38,730 --> 00:12:40,800
un nou director ne-am
nu este utilizat înainte de ziua de azi.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- am de gând să se mute
a ../vhosts pentru hosts-- virtuală

295
00:12:46,840 --> 00:12:50,940
mai mult pe faptul că, în viitor: și apoi
într-un director numit localhost,

296
00:12:50,940 --> 00:12:54,420
care este porecla dată de aproape
orice calculator, indiferent dacă este un Mac, PC,

297
00:12:54,420 --> 00:12:57,560
sau Linux calculator, și apoi
în mod special într-un director pe care noi,

298
00:12:57,560 --> 00:13:01,260
personalul deja creat pentru tine, atunci când
ai descărcat aparatul numit

299
00:13:01,260 --> 00:13:01,760
publică.

300
00:13:01,760 --> 00:13:04,551
Și, după cum și numele sugerează, nimic
Am pus în acest dosar, în teorie,

301
00:13:04,551 --> 00:13:07,790
va fi acum
publice, cel puțin la oameni

302
00:13:07,790 --> 00:13:10,030
care au o directă
conexiune la calculatorul meu.

303
00:13:10,030 --> 00:13:13,160
>> Deci, acum lasă-mă să merg mai departe și
face cd aceleiași director

304
00:13:13,160 --> 00:13:15,490
așa că am putea vedea ce e
întâmplă și tastați ls.

305
00:13:15,490 --> 00:13:17,630
Și într-adevăr, asta e
Singurul lucru pe acolo.

306
00:13:17,630 --> 00:13:23,250
Eu susțin acum că pentru că am pus această
fișier hello.html interiorul unui director

307
00:13:23,250 --> 00:13:26,940
numit în interiorul publică a unui director
numit localhost interiorul unui director

308
00:13:26,940 --> 00:13:29,810
numite vhosts, care
datorită personalului CS50

309
00:13:29,810 --> 00:13:34,390
a fost pre-configurat pentru a fi
rădăcina serverul de web,

310
00:13:34,390 --> 00:13:36,900
Pot să sperăm că face acum acest lucru.

311
00:13:36,900 --> 00:13:38,390
>> Am de gând să deschidă o filă nouă.

312
00:13:38,390 --> 00:13:40,090
Și am de gând să merg să nu depună: //.

313
00:13:40,090 --> 00:13:44,520
Am de gând să utilizeze efectiv
http / localhost, care

314
00:13:44,520 --> 00:13:47,470
din nou, este porecla
pentru propriul meu server de.

315
00:13:47,470 --> 00:13:51,085
Și apoi am de gând să merg la ce
numele de fișier, doar pentru a fi clar?

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

317
00:13:52,680 --> 00:13:54,320
În cazul în care se povestea asta, probabil, merge?

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
>> Deci, cu alte cuvinte, vreau sa acum acest
este propria mea computerul, propriul meu aparat,

322
00:14:04,270 --> 00:14:05,660
ca și cum e un server actuale.

323
00:14:05,660 --> 00:14:07,490
Porecla sa este localhost.

324
00:14:07,490 --> 00:14:10,210
Dar cred că de localhost ca cum ar fi
Facebook.com google.com, indiferent de.

325
00:14:10,210 --> 00:14:11,600
E doar numele meu local.

326
00:14:11,600 --> 00:14:14,810
Și apoi finala vreau este în
rădăcină de pe hard disc, ca să spunem așa,

327
00:14:14,810 --> 00:14:17,729
sau radacina a serverului web,
ergo slash și apoi

328
00:14:17,729 --> 00:14:18,770
hello.html nume de fișier.

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

330
00:14:19,880 --> 00:14:21,930
>> Lasă-mă să zoom out și apăsați Enter.

331
00:14:21,930 --> 00:14:24,266
Și într-adevăr, există acum pagina mea de web.

332
00:14:24,266 --> 00:14:25,390
Deci, e puțin diferit.

333
00:14:25,390 --> 00:14:26,880
Și e la fel de underwhelming.

334
00:14:26,880 --> 00:14:27,904
Aceasta este versiunea veche.

335
00:14:27,904 --> 00:14:29,070
Lasă-mă să micsora fontul spate.

336
00:14:29,070 --> 00:14:29,745
Aceasta este vechi.

337
00:14:29,745 --> 00:14:30,890
Aceasta este noua.

338
00:14:30,890 --> 00:14:35,430
Dar ceea ce se întâmplă în mod fundamental
acum este faptul că HTTP este utilizat.

339
00:14:35,430 --> 00:14:39,344
>> Să facem acest lucru un pic mai clar sau,
dacă vreți, un pic mai complicat.

340
00:14:39,344 --> 00:14:41,760
Lasă-mă să merg la dreapta jos
Cornerul este parte a aparatului meu.

341
00:14:41,760 --> 00:14:44,000
Și observați că toată această
timp, a avut loc un număr.

342
00:14:44,000 --> 00:14:47,330
Aceasta este adresa unică
de aparatul CS50.

343
00:14:47,330 --> 00:14:50,800
E o adresă privată,
cum implicate de 172.16,

344
00:14:50,800 --> 00:14:53,860
ceea ce înseamnă doar numai tu fizic
pot accesa acest server web.

345
00:14:53,860 --> 00:14:56,340
Totul este in spatele unui firewall și
frumos protejat de restul

346
00:14:56,340 --> 00:14:58,130
din lume, din această cauză adresare.

347
00:14:58,130 --> 00:15:01,920
>> Și acum observați, deși, dacă mă duc la
această adresă, nu în aparat mea,

348
00:15:01,920 --> 00:15:04,340
dar în Mac OS-- am de gând
să mă întorc aici.

349
00:15:04,340 --> 00:15:05,930
Aceasta este Mac-ul meu acum.

350
00:15:05,930 --> 00:15:08,460
Și acum am de gând să deschidă
această versiune de Chrome aici.

351
00:15:08,460 --> 00:15:17,370
Și am de gând să merg la http: //172.16.25
/ Și am uitat rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Așa că am de gând să-l vizitezi din Mac-ul meu
că adresa IP /hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
Și acum văd de la Mac-ul meu
că CS50 Appliance mea, care e

354
00:15:29,850 --> 00:15:32,600
Adresă IP este că
număr, este într-adevăr comportă

355
00:15:32,600 --> 00:15:34,320
ca un server web de pe internet.

356
00:15:34,320 --> 00:15:36,944
Ea nu are un frumos ușor de
amintesc nume ca Facebook.com,

357
00:15:36,944 --> 00:15:40,370
dar se folosește HTTP
aparent, chiar dacă Chrome

358
00:15:40,370 --> 00:15:43,560
este un fel de simplificare a lumii
pentru noi, dar nu ne arată HTTP.

359
00:15:43,560 --> 00:15:46,210
Dar acest lucru este într-adevăr exact acest lucru.

360
00:15:46,210 --> 00:15:48,470
Chrome este doar de economisire unele
intrarile de la tastatura in aceste zile.

361
00:15:48,470 --> 00:15:50,530
Și asta este ceea ce vedem acum.

362
00:15:50,530 --> 00:15:51,890
>> Deci, asta e tot bine și bună.

363
00:15:51,890 --> 00:15:53,740
Dar este o pagină destul de underwhelming.

364
00:15:53,740 --> 00:15:56,230
Lasă-mă să merg și să fac ceva
un pic diferit acum.

365
00:15:56,230 --> 00:15:57,910
Așa că lasă-mă să mă întorc la gedit.

366
00:15:57,910 --> 00:16:00,580
Și în loc de salut,
lume, sa pus o imagine.

367
00:16:00,580 --> 00:16:05,880
Și am pretins de la before-- lasă-mă să merg
în mea publică director localhost.

368
00:16:05,880 --> 00:16:10,580
Și lasă-mă să merg mai departe și a copia un
grămadă de fișiere de azi

369
00:16:10,580 --> 00:16:15,633
din dosarul meu de Dropbox în aici.

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

371
00:16:19,470 --> 00:16:21,680
>> Acum, dacă am de tip ls, uita-te
la toate aceste fișiere

372
00:16:21,680 --> 00:16:24,940
care le-am distribuit de către
site-ul curs, în avans de ziua de azi,

373
00:16:24,940 --> 00:16:26,830
dintre care unul este încă hello.html.

374
00:16:26,830 --> 00:16:27,830
Deci nu e asta.

375
00:16:27,830 --> 00:16:30,730
Și amintesc asta prostesc
de la ultima cat.jpg time--.

376
00:16:30,730 --> 00:16:34,550
Așa că lasă-mă să încerc să încorporați
cat.jpg interiorul pagina mea de web.

377
00:16:34,550 --> 00:16:37,690
>> Am de gând să merg mai departe
și de a face cat.jpg, salva.

378
00:16:37,690 --> 00:16:38,950
Lasă-mă să mă întorc la Chrome.

379
00:16:38,950 --> 00:16:41,140
Și lasă-mă să zoom în
font și acum reîncărca.

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

381
00:16:43,090 --> 00:16:45,030
Hopa, unde am pus acest lucru?

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

383
00:16:48,210 --> 00:16:51,520
Standby-- am încă vechi
Versiunea de la deschis meu desktop.

384
00:16:51,520 --> 00:16:56,020
Așa că lasă-mă să intru în vhost mea, mea
localhost, publicul meu, și hello.html.

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

386
00:16:57,320 --> 00:17:00,670
Deci, acum lasă-mă să merg mai departe și
spune cat.jpg interiorul corpului

387
00:17:00,670 --> 00:17:02,830
în cazul în care vreau să fie
afișate și reîncărcați.

388
00:17:02,830 --> 00:17:04,560
Desigur, acest lucru nu este corect.

389
00:17:04,560 --> 00:17:08,050
>> Așa că am nevoie să spun browser-ul un pic
mai mult în mod deliberat ceea ce vreau să fac.

390
00:17:08,050 --> 00:17:10,210
Pur și simplu introduceți numele este
în mod evident, nu este suficient.

391
00:17:10,210 --> 00:17:15,134
Astfel amintesc că a existat un alt
tag-ul, imagine, img scurt.

392
00:17:15,134 --> 00:17:17,550
Asta doar pentru că oamenii
Nu-mi place tipul cuvintele pline.

393
00:17:17,550 --> 00:17:19,050
Și apoi putem face source = "cat.jpg".

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

395
00:17:21,470 --> 00:17:23,550
>> Și acum am de gând să fac
un lucru diferit aici.

396
00:17:23,550 --> 00:17:25,390
Chiar dacă toți
Tag-uri noastre au până acum

397
00:17:25,390 --> 00:17:28,086
a avut această noțiune a unui
începe tag-ul și o eticheta de final,

398
00:17:28,086 --> 00:17:30,210
care nu face într-adevăr
sens pentru o imagine, nu?

399
00:17:30,210 --> 00:17:32,430
O imagine este fie acolo sau nu acolo.

400
00:17:32,430 --> 00:17:36,650
Și astfel oamenii au venit
cu o convenție simplu.

401
00:17:36,650 --> 00:17:40,310
Cand ai o etichetă care poate atât
începe și se termină în același time--

402
00:17:40,310 --> 00:17:43,790
ea poate fi gol, astfel încât să speak-- doar
a pus slash interiorul tag-ul

403
00:17:43,790 --> 00:17:44,710
la sfârșitul.

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

405
00:17:45,776 --> 00:17:47,150
Acum, lasă-mă să mă întorc la browser-ul meu.

406
00:17:47,150 --> 00:17:50,377
Hit Reload La naiba, ceva e în neregulă.

407
00:17:50,377 --> 00:17:52,460
Ați văzut, probabil aceasta
ocazional pe web,

408
00:17:52,460 --> 00:17:53,600
chiar dacă aceasta nu a fost vina ta.

409
00:17:53,600 --> 00:17:54,766
E vina serverul de web.

410
00:17:54,766 --> 00:17:56,240
Ce ode par să indice acest lucru?

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

412
00:17:57,450 --> 00:17:58,009
E rupt.

413
00:17:58,009 --> 00:17:59,300
Asta în cazul în care face parte imaginea.

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

415
00:17:59,700 --> 00:18:01,560
>> Audiența: Dar nu o face
au acces la imagine.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J MALAN: nu
au acces la imagine.

417
00:18:03,070 --> 00:18:05,230
Asta, sau chiar mai rău, poate
aceasta nici măcar nu există.

418
00:18:05,230 --> 00:18:06,729
Să vedem dacă nu putem diagnostica asta.

419
00:18:06,729 --> 00:18:09,390
Rechemare din ultima dată că, dacă
în Chrome, în aparatul,

420
00:18:09,390 --> 00:18:11,870
sau chiar pe Mac sau PC-ul dvs.,
te duci la meniul Developer

421
00:18:11,870 --> 00:18:14,650
și du-te la Tools pentru dezvoltatori
opțiune, care, probabil, le-ați

422
00:18:14,650 --> 00:18:16,850
care nu sunt utilizate de mult sau vreodată.

423
00:18:16,850 --> 00:18:20,780
Și dacă mă duc în rețea
și reîncărcați pagina,

424
00:18:20,780 --> 00:18:24,110
permite, de fapt, uita-te la HTTP
cererile care sunt făcute.

425
00:18:24,110 --> 00:18:28,400
>> Se pare ca hello.html este
într-adevăr, OK, deci 200.

426
00:18:28,400 --> 00:18:30,630
Dar cat.jpg este o 403.

427
00:18:30,630 --> 00:18:31,650
Deci, nu e un 404.

428
00:18:31,650 --> 00:18:33,490
Fișier probabil există.

429
00:18:33,490 --> 00:18:35,250
403 înseamnă interzisa.

430
00:18:35,250 --> 00:18:37,790
Deci, acesta este un pic confuz.

431
00:18:37,790 --> 00:18:42,340
Am de gând să mă întorc
la fereastra mea terminal.

432
00:18:42,340 --> 00:18:43,700
Lasă-mă să mări de până aici.

433
00:18:43,700 --> 00:18:44,750
Și să-mi fac o ls.

434
00:18:44,750 --> 00:18:46,430
E aceleași fișiere.

435
00:18:46,430 --> 00:18:49,410
>> Acum, permiteți-mi să fac o ls-l,
pe care le-am, probabil,

436
00:18:49,410 --> 00:18:53,350
folosit înainte să se uite la dosar
Dimensiunile poate sau marcajele de timp.

437
00:18:53,350 --> 00:18:55,590
Și vom vedea o grămadă de
informații copleșitoare.

438
00:18:55,590 --> 00:18:57,040
Dar observați câteva detalii.

439
00:18:57,040 --> 00:19:01,660
Iată hello.html în acest
rând aici și aici este cat.jpg.

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

441
00:19:02,934 --> 00:19:05,850
Și e doar aparatul fiind
user friendly prin evidențierea lui JPEG

442
00:19:05,850 --> 00:19:07,380
în violet ca aceasta.

443
00:19:07,380 --> 00:19:11,470
Dar ce altceva este diferit lângă
dimensiunea fișierului și numele de fișier?

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

445
00:19:13,438 --> 00:19:14,754
>> Audiența: [inaudibil].

446
00:19:14,754 --> 00:19:16,920
DAVID J MALAN: Da, nu e
mai mult de două R e aici.

447
00:19:16,920 --> 00:19:20,170
Observați ce hello.html a merge mai departe.

448
00:19:20,170 --> 00:19:24,050
Deci, se dovedește că numele lui
public acest director este important.

449
00:19:24,050 --> 00:19:26,400
Nimic în acest director
este menit să fie publice.

450
00:19:26,400 --> 00:19:28,790
Dar nu e suficient
doar pentru a fixa fișierele în acolo.

451
00:19:28,790 --> 00:19:31,480
De asemenea, aveți nevoie pentru a schimba
modul de fișiere,

452
00:19:31,480 --> 00:19:35,180
schimba permisiunile
fișierul proactiv nu

453
00:19:35,180 --> 00:19:37,650
fi setarea implicită,
ceea ce este că doar eu pot citi

454
00:19:37,650 --> 00:19:39,220
și-l scrie, eu fiind proprietarul.

455
00:19:39,220 --> 00:19:43,540
Vreau întreaga lume pentru toata lumea
fie capabil să citească dosarul meu, ca să spunem așa.

456
00:19:43,540 --> 00:19:44,950
Citește înseamnă doar ao vizualiza.

457
00:19:44,950 --> 00:19:49,780
>> Și într-adevăr, așa cum veți vedea în problemă
stabilit șapte, asta e ceea ce înseamnă aceste R lui.

458
00:19:49,780 --> 00:19:53,160
Înseamnă aceste două R de toată lumea
altundeva în lume, de asemenea, citit-o,

459
00:19:53,160 --> 00:19:55,300
mai ales acum că
este în acest director.

460
00:19:55,300 --> 00:19:59,620
Deci, cel mai simplu mod de a stabili acest lucru este de a
du-te la prompte mea și de a face chmod pentru schimbare

461
00:19:59,620 --> 00:20:05,580
Mod și apoi face o + r, cu totul,
pentru toată lumea, toate, plus r de citit,

462
00:20:05,580 --> 00:20:07,944
și apoi cat.jpg Enter.

463
00:20:07,944 --> 00:20:10,360
Nimic nu pare să se întâmple, care
de obicei, înseamnă un lucru bun.

464
00:20:10,360 --> 00:20:13,850
Deci, ls-l again-- acum
să ne uităm la cat.jpg.

465
00:20:13,850 --> 00:20:15,750
Și această permisiune
par să se fi schimbat.

466
00:20:15,750 --> 00:20:18,670
Ca o paranteza, dacă faceți o
greșeală și tu, de exemplu,

467
00:20:18,670 --> 00:20:23,210
doar voi your-- eu nu stiu-- eseu
accesibil publicului prin accident,

468
00:20:23,210 --> 00:20:25,480
poti sa faci exact opusul, chmod o-r.

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

470
00:20:25,909 --> 00:20:28,200
Desi sincer, nu ar trebui
fie în directorul publică

471
00:20:28,200 --> 00:20:29,760
oricum, dacă asta e preocuparea.

472
00:20:29,760 --> 00:20:32,475
>> Deci, acum să ne întoarcem la
Browser-ul și reîncărcare mea.

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

474
00:20:32,904 --> 00:20:34,820
Și am de gând să faceți clic pe
mic Ghostbusters

475
00:20:34,820 --> 00:20:38,030
simbol să îndepărteze acea parte a
ecran astfel încât să putem vedea noi cereri.

476
00:20:38,030 --> 00:20:40,630
Și într-adevăr, aici este
Cat Grump de mai înainte.

477
00:20:40,630 --> 00:20:43,010
Dar, mai important,
punct de vedere tehnic, există

478
00:20:43,010 --> 00:20:45,565
numărul 200, care
înseamnă că a luat-o bine.

479
00:20:45,565 --> 00:20:47,190
Bine, asta e tot bine și bună.

480
00:20:47,190 --> 00:20:48,940
Dar noi nu facem
cele mai bune site-uri,

481
00:20:48,940 --> 00:20:51,967
nici nu vom încerca prea greu pentru a
face cele mai fancy de site-uri de azi.

482
00:20:51,967 --> 00:20:54,550
Dar hai sa facem ceva, cel puțin
super-familiar înainte zăngănit

483
00:20:54,550 --> 00:20:56,030
de pe alte cateva tag-uri.

484
00:20:56,030 --> 00:20:58,470
Deci, să presupunem că nu vreau doar o pisică aici.

485
00:20:58,470 --> 00:21:02,530
Să presupunem că vreau de fapt acest lucru
pisica să se leagă de ceva.

486
00:21:02,530 --> 00:21:07,210
>> I s-ar putea, de exemplu,
face așa ceva.

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

488
00:21:08,580 --> 00:21:12,890
o ancoră pentru href pentru
equals-- referință hiper

489
00:21:12,890 --> 00:21:17,440
și hai să facem ceva
cum ar fi www.google.com închidere

490
00:21:17,440 --> 00:21:19,540
cita suport aproape.

491
00:21:19,540 --> 00:21:22,000
Și acum caută pisici.

492
00:21:22,000 --> 00:21:23,520
Închide ancora tag-ul.

493
00:21:23,520 --> 00:21:26,760
Deci, aceasta are doar un fel
de fundamental noi detaliu.

494
00:21:26,760 --> 00:21:28,190
Tag-ul, desigur, este diferit.

495
00:21:28,190 --> 00:21:31,770
E un nume de ancora pentru
referință href sau hiper.

496
00:21:31,770 --> 00:21:35,269
>> Dar, mai important, nu e
această funcție sintactică aici.

497
00:21:35,269 --> 00:21:37,810
Aceasta este ceea ce vom începe de asteptare
nu o etichetă, ci un atribut.

498
00:21:37,810 --> 00:21:40,830
Și un atribut este ceva care
modifică comportamentul unui tag.

499
00:21:40,830 --> 00:21:45,400
Și acest atribut, href, mijloace
modifica comportamentul de această ancoră

500
00:21:45,400 --> 00:21:48,430
astfel încât atunci când este apasat,
merge la această adresă URL aici.

501
00:21:48,430 --> 00:21:50,330
Și, bineînțeles, că URL-ul este Google.

502
00:21:50,330 --> 00:21:53,951
>> Între timp, ceea ce este aceasta
textul de aici o să fie?

503
00:21:53,951 --> 00:21:55,950
Ei bine, care va fi
ceea ce omul de fapt

504
00:21:55,950 --> 00:21:58,470
vede ca Subliniat
link-ul, la fel de simplu ca asta.

505
00:21:58,470 --> 00:21:59,220
Așa că hai să încercăm acest lucru.

506
00:21:59,220 --> 00:21:59,980
Lasă-mă să-l salveze.

507
00:21:59,980 --> 00:22:01,650
Sunt încă în hello.html.

508
00:22:01,650 --> 00:22:05,360
Dar, în versiunile on-line, veți vedea
numele fișierelor reale cu care ne pre-pregătit.

509
00:22:05,360 --> 00:22:06,805
Lasă-mă să mergeți mai departe și să reîncărcați.

510
00:22:06,805 --> 00:22:08,680
Și acum e un foarte
pagina underwhelming încă.

511
00:22:08,680 --> 00:22:10,910
Dar dacă treceți peste there--
și e un pic mai mic,

512
00:22:10,910 --> 00:22:13,576
dar-- puteți vedea în partea de jos
coltul din stanga a ecranului,

513
00:22:13,576 --> 00:22:15,242
este într-adevăr de gând să google.com.

514
00:22:15,242 --> 00:22:19,280
Și dacă faceți click că, aceasta va
amestecati-mi mod efectiv, în Google.

515
00:22:19,280 --> 00:22:22,610
>> Dar observați aici o oportunitate pentru
exploatare, la fel ca și o parte.

516
00:22:22,610 --> 00:22:25,150
Și ne întoarcem la alte
probleme de securitate înainte de mult timp.

517
00:22:25,150 --> 00:22:29,290
Pentru că există această dihotomie
între unde te duci și ceea ce spui,

518
00:22:29,290 --> 00:22:34,722
ai putea face ceva de genul
astea-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, iar acum dacă am reincarca
după salvarea acea pagină,

520
00:22:37,134 --> 00:22:38,800
se pare ca am de gând să merg la Google.

521
00:22:38,800 --> 00:22:40,966
Dar nu e nici un motiv I
trebuie să meargă la Google, nu?

522
00:22:40,966 --> 00:22:47,460
Aș putea merge de fapt la ceva de genul
badguy.com, reîncărcați pagina aici.

523
00:22:47,460 --> 00:22:49,750
Și aviz, aceasta încă arată ca Google.

524
00:22:49,750 --> 00:22:52,020
Și numai dacă sunt ascuțite
suficient pentru a trece peste aici

525
00:22:52,020 --> 00:22:54,770
nu am vedea că este chiar o să
du-te la o locație diferită.

526
00:22:54,770 --> 00:22:57,400
>> Deci, dacă ați ajuns vreodată
un e-mail, în special

527
00:22:57,400 --> 00:22:59,610
unul din Paypal, sau
aparent de la Paypal

528
00:22:59,610 --> 00:23:01,830
care vă solicită să vă conectați la
la contul dvs., acest

529
00:23:01,830 --> 00:23:06,380
De aceea, trebuie niciodată
faceți clic pe link-uri vreodată în e-mailuri,

530
00:23:06,380 --> 00:23:07,930
sincer, orice link-uri din e-mailuri.

531
00:23:07,930 --> 00:23:10,380
Dacă știți că aveți real
bani in Paypal sau bancar

532
00:23:10,380 --> 00:23:14,250
ale Americii sau Fidelity sau orice
site-ul, introduceți-l manual în.

533
00:23:14,250 --> 00:23:17,530
Pentru că uite cât de ușor este să
truc cineva în prezentarea ce

534
00:23:17,530 --> 00:23:18,526
Se pare ca un link.

535
00:23:18,526 --> 00:23:20,400
Dar de fapt ar putea
du-te absolut oriunde.

536
00:23:20,400 --> 00:23:23,301
>> Și nu e cu mult mai mare
amenințări decât aceasta.

537
00:23:23,301 --> 00:23:25,300
De fapt, acesta este un pic
de o tangentă acum, dar una

538
00:23:25,300 --> 00:23:28,430
din cele mai bune l-am văzut vreodată
care a fost închis,

539
00:23:28,430 --> 00:23:34,060
este cineva condus de oameni
sa-- astfel încât aceasta s-ar putea spune,

540
00:23:34,060 --> 00:23:37,660
click aici pentru a vă conecta la dumneavoastră
cont, un cont bancar.

541
00:23:37,660 --> 00:23:40,985
Și acest lucru a fost Banca de Vest.

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

543
00:23:43,030 --> 00:23:44,250
>> Deci, cineva a cumpărat acest lucru.

544
00:23:44,250 --> 00:23:47,090
Și e un pic mai ușor pentru a vedea
într-un font mono distanțate mărită

545
00:23:47,090 --> 00:23:49,190
într-un proiector de 30 de metri.

546
00:23:49,190 --> 00:23:51,720
Dar atunci când este font mic într-o
e-mail pe care îl primiți,

547
00:23:51,720 --> 00:23:54,690
acest lucru arata ca bankofthewest.com,
nu bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
care cineva a plătit 10 dolari pentru a cumpara.

549
00:23:58,230 --> 00:24:00,840
Și apoi acest lucru le dus la
echivalent de unele site-ul rău.

550
00:24:00,840 --> 00:24:05,540
>> Și veți vedea too-- de fapt, putem face
astea-- dacă mă duc la site-ul real,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, din nou,
rechemare din ultima perioadă

552
00:24:10,335 --> 00:24:13,210
că în cazul în care aceasta este pagina lor web și
esti curios cu privire la modul în care funcționează,

553
00:24:13,210 --> 00:24:15,610
poti sa te duci cu siguranță la
Instrumente de dezvoltare Chrome.

554
00:24:15,610 --> 00:24:18,890
Și puteți vedea toate
HTML frumos formatat acolo.

555
00:24:18,890 --> 00:24:20,890
>> Dar mai mult, până la punctul,
tu cam-- să închidă

556
00:24:20,890 --> 00:24:24,760
asta: poti sa te duci la View
Developer View Source.

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

558
00:24:25,770 --> 00:24:28,350
De ce nu doar să copiați
toate astea Și atunci am

559
00:24:28,350 --> 00:24:31,630
poate intra în fereastra mea gedit mic
aici și să-mi pagina web proprie.

560
00:24:31,630 --> 00:24:33,210
Salvați această în hello.html.

561
00:24:33,210 --> 00:24:36,770
Și, probabil, acest lucru se va rupe,
pentru ca nu este atat de usor de obicei.

562
00:24:36,770 --> 00:24:41,590
Dar acum, dacă am reincarca propria ta pagina pe
propria ta CS50 Appliance și reîncărcare a lovit,

563
00:24:41,590 --> 00:24:42,990
OK, niște chestii rupt.

564
00:24:42,990 --> 00:24:45,750
Dar sunt destul de aproape de a avea
site-ul meu bancar propriu, nu?

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

566
00:24:46,570 --> 00:24:47,370
>> [Râsete]

567
00:24:47,370 --> 00:24:49,210
>> DAVID J MALAN: --I
Nu actually-- și tu

568
00:24:49,210 --> 00:24:52,210
știu că e cineva acolo care
ar click fapt, aceste link-uri prea.

569
00:24:52,210 --> 00:24:54,864
Deci, în mod clar, unele chestii rupt.

570
00:24:54,864 --> 00:24:56,780
Dar care va conduce
ne într-o discuție,

571
00:24:56,780 --> 00:25:00,810
inutil chiar acum, cu privire la ce
CSS, foi de stil în cascadă, sunt,

572
00:25:00,810 --> 00:25:03,410
si se pare ca tu de fapt
descarca alte fișiere HTML

573
00:25:03,410 --> 00:25:06,140
și JPEG Fișiere GIF că
site-ul ar putea fi utilizați.

574
00:25:06,140 --> 00:25:07,960
Dar toate acestea sunt realizabile.

575
00:25:07,960 --> 00:25:11,110
Dar într-adevăr se reduce la
aceste euristici foarte simplu.

576
00:25:11,110 --> 00:25:14,450
>> Deci, acum hai să răsfoiesc prin intermediul unui
câteva alte exemple de HTML

577
00:25:14,450 --> 00:25:16,680
doar pentru a vă oferi un sentiment
de ce altceva mai puteți face.

578
00:25:16,680 --> 00:25:18,670
De exemplu, aceasta este list.html.

579
00:25:18,670 --> 00:25:23,240
Să presupunem că am vrut să fac o pagină web
cu o listă de case din quad.

580
00:25:23,240 --> 00:25:28,960
S-ar putea folosi eticheta ul pentru neordonate
listă și apoi copilul element listă

581
00:25:28,960 --> 00:25:33,760
și apoi repeta over-- sau listă,
rather-- casele în cauză.

582
00:25:33,760 --> 00:25:36,080
>> Și dacă am deschis asta, să facem acest lucru.

583
00:25:36,080 --> 00:25:40,670
Să mergem nu la hello.html,
dar la list.html.

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

585
00:25:42,160 --> 00:25:43,000
Cum pot remedia acest lucru?

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

587
00:25:45,679 --> 00:25:47,220
E aceeași problemă ca și mai înainte, nu?

588
00:25:47,220 --> 00:25:52,510
Așa că lasă-mă să fac oops-- chmod--
chmod o + r de list.html.

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

590
00:25:54,610 --> 00:25:59,610
Și acum, dacă mă duc înapoi la browser-ul meu
și faceți clic pe Reload, nu este.

591
00:25:59,610 --> 00:26:02,360
Deci, dacă v-ați dorit vreodată să facă
o listă cu marcatori, poți să faci asta.

592
00:26:02,360 --> 00:26:06,210
Daca vrei sa fi super-fantezie și face
o lista ordonata, nu o lista neordonata,

593
00:26:06,210 --> 00:26:10,170
schimba cei ol, reîncărcați pagina, și
acum browser-ul va număra pentru tine.

594
00:26:10,170 --> 00:26:11,241
>> Ce altceva putem face?

595
00:26:11,241 --> 00:26:13,990
Ei bine, o pereche de others-- în cazul în care
ai alineatele lungi de text--

596
00:26:13,990 --> 00:26:15,698
de exemplu, unele
Text latin ca asta:

597
00:26:15,698 --> 00:26:20,730
și tu o vrei la punctele distincte,
p deschis, aproape p pentru tag-ul paragraf.

598
00:26:20,730 --> 00:26:22,010
Și o facem din nou și din nou.

599
00:26:22,010 --> 00:26:26,600
Și dacă am deschis acum cu acest dosar,
paragraphs.html, ei bine, acest

600
00:26:26,600 --> 00:26:27,570
devine enervant.

601
00:26:27,570 --> 00:26:34,320
Deci, acum hai să mergem înapoi la meu
prompte, chmod a + r r stea .html--

602
00:26:34,320 --> 00:26:36,099
o carte frumos sălbatic mic ca să spunem așa.

603
00:26:36,099 --> 00:26:37,890
Acesta ar trebui să stabilească toate
aceste probleme pentru mine.

604
00:26:37,890 --> 00:26:38,990
Să reîncărca.

605
00:26:38,990 --> 00:26:40,500
Nu e de trei paragrafe.

606
00:26:40,500 --> 00:26:42,930
>> Și acum să mergem mai departe
și deschide un altul.

607
00:26:42,930 --> 00:26:44,310
Ce zici de masă?

608
00:26:44,310 --> 00:26:46,440
Veți observa aspectul de masă
un pic mai complex.

609
00:26:46,440 --> 00:26:49,110
Dar e aceeași idee,
tag-ul deschis, tag-ul deschis,

610
00:26:49,110 --> 00:26:51,360
deschis, deschis, deschis, tag aproape, tag-ul deschis.

611
00:26:51,360 --> 00:26:54,410
Și acestea se întâmplă să stea
masă, a cărui frontieră este aparent

612
00:26:54,410 --> 00:26:58,500
Va fi o grosime 1-- indiferent
că rând tabel means--, masa de

613
00:26:58,500 --> 00:27:00,320
date, ceea ce înseamnă o celulă.

614
00:27:00,320 --> 00:27:03,840
Și dacă mă duc înapoi la browser-ul meu
aici și du-te la table.html,

615
00:27:03,840 --> 00:27:05,840
puteți vedea ceva
ca aceasta, hidos.

616
00:27:05,840 --> 00:27:07,840
Dar vom ajunge la punctul
unde putem de fapt

617
00:27:07,840 --> 00:27:09,260
face lucrurile mai frumos decât asta.

618
00:27:09,260 --> 00:27:10,530
>> Așa că lasă-mă să prevadă pentru acum.

619
00:27:10,530 --> 00:27:11,870
Nu e buchete de mai multe tag-uri.

620
00:27:11,870 --> 00:27:15,225
Și HTML este minunat pentru a ridica
pentru că, sincer, tot ce trebuie sa faci

621
00:27:15,225 --> 00:27:17,600
este sa te uiti la paginile web existente
cu care ești familiarizat.

622
00:27:17,600 --> 00:27:20,340
Și tu ești ca, oh, așa
au facut acest punct de vedere estetic.

623
00:27:20,340 --> 00:27:23,159
>> Sau poti sa te uiti la orice on-line
resursă ca să cum functioneaza HTML,

624
00:27:23,159 --> 00:27:25,700
și veți vedea că există o
vocabular întreagă de alte tag-uri.

625
00:27:25,700 --> 00:27:30,110
Dar cu modelul mental simplu
numai că aproape orice etichetă deschideți

626
00:27:30,110 --> 00:27:33,620
trebuie să fie închis, într-adevăr
este suficient pentru a se preda

627
00:27:33,620 --> 00:27:36,950
HTML după înțelege
aceste idei de bază ale tag-uri

628
00:27:36,950 --> 00:27:40,520
și atributele și bine formate
că am vorbit despre,

629
00:27:40,520 --> 00:27:44,697
închiderea ceva care ne-ar putea deschide
astfel încât să nu se confunda un browser.

630
00:27:44,697 --> 00:27:46,780
Așa că haideți să ia acum asta
un nivel mult mai interesant

631
00:27:46,780 --> 00:27:48,100
de a merge la real.

632
00:27:48,100 --> 00:27:51,095
Și să mergem la Mac-ul meu
aici, la google.com.

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

634
00:27:52,280 --> 00:27:54,020
Și acum notice-- să facem acest lucru.

635
00:27:54,020 --> 00:27:57,280
Mă gong să merg la
Setări, Setări de căutare.

636
00:27:57,280 --> 00:28:01,070
Vreau să dezactivați această clipă enervant
Rezultate lucru în cazul în care imediat

637
00:28:01,070 --> 00:28:02,450
începe răspuns la tastarea ta.

638
00:28:02,450 --> 00:28:05,300
Să facem aceasta scoala vârstă atât de
noi de fapt vedem ce se întâmplă.

639
00:28:05,300 --> 00:28:08,260
>> Așa că am de gând să salveze meu
Setările Google aici.

640
00:28:08,260 --> 00:28:11,160
Și acum notice-- am de gând să
caută ceva de genul pisici.

641
00:28:11,160 --> 00:28:14,500
Și este încă face auto
complet aici, dar pe baza lucrurilor

642
00:28:14,500 --> 00:28:15,970
oamenii au scris în trecut.

643
00:28:15,970 --> 00:28:17,490
Dar observați ce se va întâmpla.

644
00:28:17,490 --> 00:28:20,272
>> În URL-ul în acest moment
este aceasta, doar google.com.

645
00:28:20,272 --> 00:28:22,650
Și punct de vedere tehnic, e slash.

646
00:28:22,650 --> 00:28:25,910
Google e doar un personaj de economisire
și nu ne arată că.

647
00:28:25,910 --> 00:28:30,400
Ele sunt arătându-ne https, doar
a fi super liniștitor că suntem

648
00:28:30,400 --> 00:28:32,850
la o pagină securizată sau criptat.

649
00:28:32,850 --> 00:28:35,690
>> Așa că lasă-mă să mergeți mai departe și de căutare pentru pisici.

650
00:28:35,690 --> 00:28:37,670
Acum, aceasta a primit într-adevăr
copleșitoare repede.

651
00:28:37,670 --> 00:28:39,470
Uită-te la lungimea de acest URL.

652
00:28:39,470 --> 00:28:43,070
Dar se pare că cele mai multe din aceste lucruri
în URL-ul este, de fapt destul de inutil.

653
00:28:43,070 --> 00:28:45,320
Am de gând să înceapă ștergerea
lucruri pe care nu le înțeleg.

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

655
00:28:46,560 --> 00:28:47,360
Văd pisici.

656
00:28:47,360 --> 00:28:48,470
Am înțeles pisici.

657
00:28:48,470 --> 00:28:50,380
Nu știu de ce pisicile sunt acolo din nou.

658
00:28:50,380 --> 00:28:52,620
Eu chiar nu știu
ceea ce acest nonsens este.

659
00:28:52,620 --> 00:28:56,030
Deci, eu sunt doar de gând să păstreze
evidențierea și ștergerea chestii

660
00:28:56,030 --> 00:28:59,905
că eu nu înțeleg,
distilarea URL-ul în doar asta.

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

662
00:29:00,920 --> 00:29:02,270
>> Acum, lasă-mă să te intra din nou.

663
00:29:02,270 --> 00:29:03,814
Se pare că Google încă mai funcționează.

664
00:29:03,814 --> 00:29:06,980
Deci, pentru un motiv oarecare, ei adăugând o
mulțime de lucruri pentru a implicit URL-ul lor.

665
00:29:06,980 --> 00:29:09,000
Dar nu este strict necesar.

666
00:29:09,000 --> 00:29:10,340
Deci, ce este frumos despre asta?

667
00:29:10,340 --> 00:29:13,630
Ei bine, lasă-mă să mergeți mai departe și
deschide Inspector Chrome.

668
00:29:13,630 --> 00:29:15,960
E o scurtătură mouse-ul mic pentru el.

669
00:29:15,960 --> 00:29:17,360
>> Du-te la fila Rețea.

670
00:29:17,360 --> 00:29:19,340
Și acum lasă-mă să reîncărcați
aceasta pagina încă o dată.

671
00:29:19,340 --> 00:29:20,280
Și eu care deține Shift.

672
00:29:20,280 --> 00:29:22,520
Ca o paranteza, browsere
au tendința de a cache sau salva

673
00:29:22,520 --> 00:29:24,697
informații doar de dragul eficienței lui.

674
00:29:24,697 --> 00:29:27,280
Dar, de obicei, care deține Shift și
reîncărcare va forța tot

675
00:29:27,280 --> 00:29:28,994
pentru a porni de la început.

676
00:29:28,994 --> 00:29:30,410
Și asta e ceea ce vreau să fac aici.

677
00:29:30,410 --> 00:29:33,550
>> Și observați toate acestea
rânduri că tocmai a apărut.

678
00:29:33,550 --> 00:29:37,920
Se pare că, în orice web dat
pagina, ar putea fi doar un singur fișier

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- sau acolo
ar putea fi 52, ca și în acest caz.

680
00:29:43,500 --> 00:29:45,820
Când m-am vizita google.com,
aparent, browser-ul meu

681
00:29:45,820 --> 00:29:49,650
începe 52 de cereri HTTP separate.

682
00:29:49,650 --> 00:29:50,520
De ce este asta?

683
00:29:50,520 --> 00:29:53,380
>> Ei bine, uita-te la ceea ce este în interior
a acestei pagini web până sus.

684
00:29:53,380 --> 00:29:55,620
Nu e doar text,
dar există din imagini reale

685
00:29:55,620 --> 00:29:57,130
de pisici peste la dreapta.

686
00:29:57,130 --> 00:29:59,110
E un logo colorat aici, la stânga.

687
00:29:59,110 --> 00:30:01,750
Nu e toate aceste icoane
pentru un microfon și așa mai departe.

688
00:30:01,750 --> 00:30:05,130
Există o mulțime de piese, construind
Blocuri, piese de reîncărcare, dacă vreți,

689
00:30:05,130 --> 00:30:06,250
la aceasta pagina web.

690
00:30:06,250 --> 00:30:10,310
Și ce browser-ul este de a face pe
asistent primul dosar, care

691
00:30:10,310 --> 00:30:16,180
este acest rând aici, acesta este, în esență,
iterarea peste partea de sus HTML

692
00:30:16,180 --> 00:30:19,880
în jos, la stânga la dreapta, în căutarea
lucruri cum ar fi etichete de imagine sau alte tag-uri

693
00:30:19,880 --> 00:30:23,160
care sunt de menționat alte fișiere și
atunci când le vede, se duce și le preia

694
00:30:23,160 --> 00:30:26,050
prin HTTP, tot viabil
metaforă plic,

695
00:30:26,050 --> 00:30:29,670
și apoi le afișează în
loc adecvat în pagina web.

696
00:30:29,670 --> 00:30:33,370
>> Dar observați aici, dacă mă concentrez asupra
primele pisici mingea de la margine, de căutare,

697
00:30:33,370 --> 00:30:37,090
observă că, într-adevăr, se folosește HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
Și, din păcate, Google
Chrome chiar acum în versiunea 39

699
00:30:41,690 --> 00:30:45,110
este un fel de lucruri amuțire jos și
Nu ne arată antetele reale.

700
00:30:45,110 --> 00:30:49,680
Dar ceea ce a fost, într-adevăr trimis este o cerere
pentru a nu reduce, ci / căutare? q = pisici.

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

702
00:30:52,830 --> 00:30:54,340
>> Acum, de ce este așa de important?

703
00:30:54,340 --> 00:30:57,110
Ei bine, am de gând să deducă
din aceasta că, dacă Google

704
00:30:57,110 --> 00:31:01,520
sprijină interogări ale acestui formular, de ce
Nu am pune în aplicare propria ta căutare

705
00:31:01,520 --> 00:31:06,420
motor pentru CS50, dar doar partea din față
capăt, doar interfața grafică de utilizator.

706
00:31:06,420 --> 00:31:09,610
Și vom externaliza capătul din spate,
căutarea real rezultatele la Google.

707
00:31:09,610 --> 00:31:10,510
>> Deci, cum pot face acest lucru?

708
00:31:10,510 --> 00:31:13,820
Ei bine, lasă-mă să intru în gedit aici.

709
00:31:13,820 --> 00:31:19,180
Și lasă-mă să merg mai departe și deschide
în sus, să zicem, un nou fișier.

710
00:31:19,180 --> 00:31:22,280
Și am de gând pentru a salva acest
temporar în calitate de căutare-0.html.

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

712
00:31:25,111 --> 00:31:27,860
Și apoi în cele din urmă, vom rapid
înainte de cea pe care am pre-pregătit.

713
00:31:27,860 --> 00:31:30,190
>> Și am de gând să
biciul rapid tip doc

714
00:31:30,190 --> 00:31:33,840
html suport deschis html
aproape html suport.

715
00:31:33,840 --> 00:31:38,390
Apoi am de gând să fac cap
închidere cap titlu deschis CS50

716
00:31:38,390 --> 00:31:40,150
Căutare în loc de căutare Google.

717
00:31:40,150 --> 00:31:43,480
Aici am de gând să aibă
organismul, aici aproape corpului.

718
00:31:43,480 --> 00:31:45,835
Și acum am nevoie CS50 căutare.

719
00:31:45,835 --> 00:31:47,710
Și, de fapt, să
construi acest incremental.

720
00:31:47,710 --> 00:31:51,043
Am de gând să mergeți mai departe și să închidă acest lucru și
de fapt, pune-l în directorul meu public.

721
00:31:51,043 --> 00:31:52,730
Deci, da-mi doar o clipă.

722
00:31:52,730 --> 00:31:55,390
căutare-0.html-- am de gând să
temporal se numesc search.html.

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

724
00:31:56,600 --> 00:31:59,750
Am de gând să-l chmod a + r search.html.

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

726
00:32:01,072 --> 00:32:02,280
Și acum am de gând să-l deschidă.

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

728
00:32:03,224 --> 00:32:04,390
În regulă, astfel încât a fost rapid.

729
00:32:04,390 --> 00:32:06,800
Dar scopul pur și simplu a fost
pentru a ne ajunge la punctul de

730
00:32:06,800 --> 00:32:09,630
de a avea acest text
fișier numit search.html.

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

732
00:32:10,940 --> 00:32:12,790
Deci, nu de mult să se uite la încă.

733
00:32:12,790 --> 00:32:16,970
Într-adevăr, dacă mă duc la browser-ul meu, și
du-te la search.html, asta e tot ce este.

734
00:32:16,970 --> 00:32:17,720
Dar știi ce?

735
00:32:17,720 --> 00:32:19,000
Pot fi un pic crescator.

736
00:32:19,000 --> 00:32:22,710
Am citit într-o carte că există
o etichetă poziție numit h1.

737
00:32:22,710 --> 00:32:26,100
Și am de gând să merg mai departe și
utilizați ca h1 deschid și se închid h1.

738
00:32:26,100 --> 00:32:27,220
Reîncărcați pagina.

739
00:32:27,220 --> 00:32:29,600
Și acum e mai mare și mai îndrăzneață,
Nu tot ceea ce interesant,

740
00:32:29,600 --> 00:32:32,399
dar cel puțin structural
mai interesant.

741
00:32:32,399 --> 00:32:33,940
Dar acum, permiteți-mi să introducă o altă etichetă.

742
00:32:33,940 --> 00:32:36,500
Se pare că există o etichetă formular.

743
00:32:36,500 --> 00:32:38,400
Și lasă-mă închide această etichetă.

744
00:32:38,400 --> 00:32:40,830
Și se pare că nu există
o etichetă de intrare care

745
00:32:40,830 --> 00:32:44,600
are un atribut numit tip, care
este tipul de date de pe teren,

746
00:32:44,600 --> 00:32:45,200
dacă vrei.

747
00:32:45,200 --> 00:32:47,050
Și va fi de tip text.

748
00:32:47,050 --> 00:32:52,200
Iar valoarea sa este de gând
pentru a fi CS50 căutare.

749
00:32:52,200 --> 00:32:53,850
Închide etichetă.

750
00:32:53,850 --> 00:32:57,100
Și nu va fi nici o noțiune de
deschiderea și închiderea cu tag-uri separate.

751
00:32:57,100 --> 00:33:00,300
>> Lasă-mă să mă întorc aici și
a se vedea ce se întâmplă, a reîncărca.

752
00:33:00,300 --> 00:33:01,380
Noțiuni de bază interesant.

753
00:33:01,380 --> 00:33:02,950
Se pare că e un câmp de text.

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

755
00:33:04,080 --> 00:33:06,999
Și, de fapt, n-am vrut
pentru a pune o valoare acolo încă.

756
00:33:06,999 --> 00:33:10,040
Lasă-mă să mă întorc aici și de fapt a obține
scapă de această valoare să-l păstrați simplu.

757
00:33:10,040 --> 00:33:12,939
În loc de o valoare, ceea ce mi-am dorit
pentru a se obține acest lucru a fost un nume.

758
00:33:12,939 --> 00:33:15,230
Și eu nu știu ce este,
așa că voi reveni la asta.

759
00:33:15,230 --> 00:33:18,270
>> Dar de mai jos că, vreau
să facă input type = submit.

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

761
00:33:19,840 --> 00:33:22,120
Și această valoare va fi CS50 căutare.

762
00:33:22,120 --> 00:33:24,850
Și vom vedea de ce am
sa mutat la valoarea de acest lucru.

763
00:33:24,850 --> 00:33:28,900
Când m-am reincarca, mi se pare să aibă acum
începuturile propria ta căutare

764
00:33:28,900 --> 00:33:30,820
motor, super hidos,
deși sincer, e

765
00:33:30,820 --> 00:33:34,260
Nu mingea de la margine departe de ceea ce
Pagina implicit Google arată.

766
00:33:34,260 --> 00:33:37,950
>> Dacă mă duc aici, acum, am posibilitatea să tastați în
pisici și, sperăm, faceți clic pe Căutare.

767
00:33:37,950 --> 00:33:40,380
Dar eu nu sunt destul de terminat încă,
pentru că nu au pus în aplicare,

768
00:33:40,380 --> 00:33:41,045
în mod evident, o bază de date.

769
00:33:41,045 --> 00:33:42,940
Nu am târât
web pentru rezultatele de căutare.

770
00:33:42,940 --> 00:33:44,840
Așa că am nevoie să externalizeze care la Google.

771
00:33:44,840 --> 00:33:46,290
Deci, cum fac asta?

772
00:33:46,290 --> 00:33:49,170
>> Ei bine, în primul rând I
trebuie să adăugați și acțiune

773
00:33:49,170 --> 00:33:58,460
atribuie formă tag-mi că
este http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
Și știu că doar de a avea
dedus uitandu-te atent

775
00:34:01,180 --> 00:34:02,505
la URL-lor.

776
00:34:02,505 --> 00:34:03,380
Și acum să ia o presupunere.

777
00:34:03,380 --> 00:34:09,090
Ce ar trebui acest câmp de text, probabil,
fi numit, pe baza de unde am venit

778
00:34:09,090 --> 00:34:09,754
de mai înainte?

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

780
00:34:11,896 --> 00:34:13,290
>> Audiența:? Q.

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

782
00:34:14,370 --> 00:34:17,800
Și nu avem nevoie de fapt întrebare
marca se pare, dar q este într-adevăr,

783
00:34:17,800 --> 00:34:20,489
q de interogare, probabil, de
În mod implicit, doar pentru că asta e

784
00:34:20,489 --> 00:34:23,060
ceea ce Larry și Sergey
a venit cu ani în urmă.

785
00:34:23,060 --> 00:34:24,739
Deci, acum lasă-mă să reîncărcați această pagină.

786
00:34:24,739 --> 00:34:26,409
Ea nu arata tot ce diferit.

787
00:34:26,409 --> 00:34:28,120
Dar ai grija acum ce se întâmplă.

788
00:34:28,120 --> 00:34:32,360
>> Dacă tip I la pisici și click
CS50 Căutați și da drumul,

789
00:34:32,360 --> 00:34:35,770
observați voi fi whisked
departe de real Google.

790
00:34:35,770 --> 00:34:38,150
Acum, Google este în curs un pic
enervant în care acestea sunt

791
00:34:38,150 --> 00:34:41,877
adăugarea unui parametru adițional,
dacă vreți, la adresa URL.

792
00:34:41,877 --> 00:34:43,960
Asta e tot întâmplă
în mod automat pe partea Google.

793
00:34:43,960 --> 00:34:48,730
>> Partea importantă este că mi se pare
să fi generat această cerere aici.

794
00:34:48,730 --> 00:34:50,179
Și într-adevăr, asta e ceea ce se întâmplă.

795
00:34:50,179 --> 00:34:53,040
Cand ai HTML care
arata ca acest lucru, aceasta

796
00:34:53,040 --> 00:34:57,620
este un fel de notație dezvoltatori web
pentru a spune, merge mai departe și de a crea un formular

797
00:34:57,620 --> 00:34:59,990
că atunci când este prezentată,
se va merge la această adresă URL.

798
00:34:59,990 --> 00:35:03,430
Și când a furnizat adresa URL
Valorile pentru lucruri cum ar fi q,

799
00:35:03,430 --> 00:35:05,440
nu merg doar la această adresă URL.

800
00:35:05,440 --> 00:35:08,210
De fapt, du-te la întrebarea
marca și apoi q = pisici.

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

802
00:35:09,590 --> 00:35:13,060
Adăugați parametrul,
Parametru HTTP de genul asta.

803
00:35:13,060 --> 00:35:15,590
>> Și doar pentru a fi super-precise,
ceea ce se deduce here--

804
00:35:15,590 --> 00:35:18,130
dar voi fi mai explicit-- este
că metoda vreau să utilizeze

805
00:35:18,130 --> 00:35:22,270
este de a lua, în loc de ceva de genul
poștă, pe care vom vedea în cele din urmă.

806
00:35:22,270 --> 00:35:27,710
Deci, pe scurt, pur și simplu prin înțelegere
HTML și utilizarea unor tag-uri destul de simplu,

807
00:35:27,710 --> 00:35:30,610
putem incepe acum pentru a crea
propria noastră utilizator final din față

808
00:35:30,610 --> 00:35:32,850
interfață cu o căutare
motor în spatele ei.

809
00:35:32,850 --> 00:35:34,800
>> Dar aceasta, desigur, este destul de hidos.

810
00:35:34,800 --> 00:35:37,259
Așa că lasă-mă de fapt deschid
o versiune ceva mai bine.

811
00:35:37,259 --> 00:35:39,800
Aceasta este cea pe care am preparat în
avans care are unele comentarii.

812
00:35:39,800 --> 00:35:41,900
Dar veți vedea că am
destul de mult recreat.

813
00:35:41,900 --> 00:35:44,150
Deci, acest lucru este deja disponibil on-line.

814
00:35:44,150 --> 00:35:48,050
Și eu sa întâmplat să preventiv
Mergi la https doar să-l păstrați simplu.

815
00:35:48,050 --> 00:35:50,610
>> Și acum să deschidă o
următor repetare a acestui.

816
00:35:50,610 --> 00:35:52,510
Este versiunea 1 în loc de 0.

817
00:35:52,510 --> 00:35:55,315
Ce sare la tine la fel de ușor
diferit în acest exemplu?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> Audiența: [inaudibil].

820
00:36:00,440 --> 00:36:03,020
>> Da, e un centru alin text.

821
00:36:03,020 --> 00:36:04,590
Acesta este un pic ciudat aici.

822
00:36:04,590 --> 00:36:06,150
Dar acest lucru este într-adevăr nou.

823
00:36:06,150 --> 00:36:07,800
Și poate ghici ce se va întâmpla.

824
00:36:07,800 --> 00:36:11,730
Dacă mă duc la browser-ul meu acum
și vizita căutare-1.html,

825
00:36:11,730 --> 00:36:13,090
e aproape același lucru.

826
00:36:13,090 --> 00:36:15,705
Dar e un pas mai aproape de
fiind un pic mai frumos.

827
00:36:15,705 --> 00:36:19,150
E încă urât, dar mai frumos în această
cel puțin tot ce e acum centrat.

828
00:36:19,150 --> 00:36:23,470
>> Deci, se dovedește că ceea ce eu sunt, folosind
este o altă limbă numită totul

829
00:36:23,470 --> 00:36:25,680
CSS, foi de stil în cascadă.

830
00:36:25,680 --> 00:36:28,310
Și CSS, sincer, este un fel
de, în opinia mea personală,

831
00:36:28,310 --> 00:36:29,775
un limbaj atroce proiectat.

832
00:36:29,775 --> 00:36:33,110
Este foarte enervant să-și amintească
toate diverse detalii.

833
00:36:33,110 --> 00:36:38,479
Dar aceasta este ceea ce stylizes
întregul web astăzi în întreaga lume.

834
00:36:38,479 --> 00:36:39,270
Am jignit pe cineva.

835
00:36:39,270 --> 00:36:39,769
Bine.

836
00:36:39,769 --> 00:36:43,180
Așa că haideți să ne întoarcem aici și vezi
cum suntem de fapt, folosind acest lucru.

837
00:36:43,180 --> 00:36:45,940
Și se pare că, cel puțin e
de fapt un limbaj destul de simplu.

838
00:36:45,940 --> 00:36:49,470
E doar perechi de valori-cheie, proprietăți
și valori, proprietăți și valori.

839
00:36:49,470 --> 00:36:52,080
Într-adevăr, aici este o
astfel de proprietate și valoare.

840
00:36:52,080 --> 00:36:55,890
>> Pur și simplu prin utilizarea stilului
atribut pe etichetă corpul meu

841
00:36:55,890 --> 00:37:00,360
și dându-i o valoare de un
colon cuvânt și un alt cuvânt,

842
00:37:00,360 --> 00:37:03,730
sau o proprietate și o valoare,
Eu pot afecta estetica

843
00:37:03,730 --> 00:37:06,210
a paginii web, nu
în mod necesar structura încă,

844
00:37:06,210 --> 00:37:07,550
dar estetica ea.

845
00:37:07,550 --> 00:37:10,960
Și, la fel de Googling în jur, îmi dau seama
ca foi CSS, de stil în cascadă,

846
00:37:10,960 --> 00:37:14,170
sprijină o proprietate numită
text-align, a căror valoare poate

847
00:37:14,170 --> 00:37:16,980
fie la stânga, dreapta, centru sau, de exemplu.

848
00:37:16,980 --> 00:37:19,990
>> Așa că acum, când am reincarca
această pagină, ceea ce am primit

849
00:37:19,990 --> 00:37:22,730
a fost o pagină centrat,
dar încă destul de urât.

850
00:37:22,730 --> 00:37:25,770
Să mergem mai departe și să deschideți
la versiunea 2 a de căutare.

851
00:37:25,770 --> 00:37:28,570
Și acum observați am facut un pic mai mult.

852
00:37:28,570 --> 00:37:33,760
Observați că aici în interiorul capului
tag-ul, pot exista mai mult de titlu.

853
00:37:33,760 --> 00:37:35,400
De fapt, există o etichetă de stil.

854
00:37:35,400 --> 00:37:38,630
Și acest lucru este în cazul în care acesta devine doar un
pic dezordonat CSS văzând uneori.

855
00:37:38,630 --> 00:37:41,971
>> Observați că am par a avea ceva
că structural arată foarte diferit.

856
00:37:41,971 --> 00:37:44,095
Dar aici este numele
tag-ul vreau să stilizate.

857
00:37:44,095 --> 00:37:47,570
Acestia sunt prietenii noștri vechi creț
bretele și acoladă închisă.

858
00:37:47,570 --> 00:37:50,290
Și apoi aici este că
proprietatea și valoarea sa.

859
00:37:50,290 --> 00:37:56,300
>> Dacă aș încărca acest fișier, search2.html,
rezultatul final este identic.

860
00:37:56,300 --> 00:37:59,300
Dar e un pas spre design mai bun.

861
00:37:59,300 --> 00:38:04,560
De factoring în această CSS, n-am
nu-l combinate cu HTML meu.

862
00:38:04,560 --> 00:38:07,560
Și într-adevăr, așa cum vom vedea, aș putea
reutilizarea acestor proprietăți și valori.

863
00:38:07,560 --> 00:38:10,420
Dacă aș fi vrut să fac buchete de
Piese de pe pagina mea de web centrat,

864
00:38:10,420 --> 00:38:13,630
Nu trebuie să tastați style = text-align
Centrul peste tot.

865
00:38:13,630 --> 00:38:16,580
Pot pune într-un singur loc
probabil, ca până în partea de sus.

866
00:38:16,580 --> 00:38:18,210
>> Dar chiar și acest lucru nu este cel mai bun design.

867
00:38:18,210 --> 00:38:21,720
De fapt, unul dintre lucrurile pe care le veți învăța
cum iti petreci mai mult timp cu

868
00:38:21,720 --> 00:38:25,730
Programarea web este că mai mult vă poate
modularizarea lucruri și lucruri factor out

869
00:38:25,730 --> 00:38:30,610
cum ar fi fișierele .h să ne chestii factor afară,
Vrei helpers.c Să ne lucruri factorului de afară

870
00:38:30,610 --> 00:38:31,880
în urmă cu câteva psets.

871
00:38:31,880 --> 00:38:34,200
În mod similar, s-ar putea noi
doresc să realizeze acest lucru.

872
00:38:34,200 --> 00:38:37,920
>> Deci, observa in versiune
trei de search.html Am

873
00:38:37,920 --> 00:38:40,610
curățat capul de
pagina și pune doar

874
00:38:40,610 --> 00:38:43,320
în acest sens, o etichetă link, care
contrar numelui,

875
00:38:43,320 --> 00:38:44,700
nu vă dau un hyperlink.

876
00:38:44,700 --> 00:38:49,150
Se leagă de un alt fișier cu titlu de
o href a cărui valoare în acest caz,

877
00:38:49,150 --> 00:38:51,586
Cautare-3.css

878
00:38:51,586 --> 00:38:52,960
Așa că îmi dau seama mergem repede.

879
00:38:52,960 --> 00:38:54,600
Dar tot ce fac este un fel
de lucrurile în mișcare în jurul valorii.

880
00:38:54,600 --> 00:38:55,760
Lasă-mă să-deschis căutare 3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Acolo este, într-adevăr nimic la ea.

883
00:38:58,530 --> 00:39:02,270
Tocmai am copiat și inserat o într-un nou
fișier, la fel ca ne-am luat chestii

884
00:39:02,270 --> 00:39:03,509
în alte fișiere înainte.

885
00:39:03,509 --> 00:39:05,300
Și result--
complet underwhelming--

886
00:39:05,300 --> 00:39:06,730
va fi exact la fel.

887
00:39:06,730 --> 00:39:10,490
Dar ne mișcăm toward-- nu, nu e.

888
00:39:10,490 --> 00:39:11,930
Oh, știu de ce.

889
00:39:11,930 --> 00:39:13,790
>> Deci, se pare a fi un bug.

890
00:39:13,790 --> 00:39:15,010
Și este într-un anumit sens.

891
00:39:15,010 --> 00:39:17,730
Dar permiteți-mi deschid contul meu de rețea.

892
00:39:17,730 --> 00:39:19,660
Lasă-mă să reîncărcați pagina.

893
00:39:19,660 --> 00:39:23,315
Ah, de ce este CSS nu se aplică?

894
00:39:23,315 --> 00:39:26,920
Ei bine, fișierul CSS, în mod similar, are
pentru a fi ușor de citit lume, ca să spunem așa.

895
00:39:26,920 --> 00:39:28,440
Și se prea este în prezent interzisă.

896
00:39:28,440 --> 00:39:33,760
Așa că lasă-mă să fac un un chmod + r
de stele dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
Suntem punct CSS este doar
extensie de fișier pentru fișierele CSS.

898
00:39:37,067 --> 00:39:38,900
Acum, lasă-mă să mă întorc la
Browser-ul și reîncărcare mea.

899
00:39:38,900 --> 00:39:40,910
OK, un pic mai bine.

900
00:39:40,910 --> 00:39:42,282
>> Acum, lasă-mă să fac un ultim lucru.

901
00:39:42,282 --> 00:39:42,990
În căutare-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Eu am o versiune care tocmai m-am gândit
a fost mult mai rece, deși mult mai

904
00:39:48,220 --> 00:39:48,980
complicată.

905
00:39:48,980 --> 00:39:50,690
Să ne uităm la rezultatul primei.

906
00:39:50,690 --> 00:39:52,290
Închideți acest lucru pentru a ne oferi mai mult spațiu.

907
00:39:52,290 --> 00:39:54,275
Schimbați această a căuta-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> Și acum o gramada de lucruri sunt rupte.

910
00:39:57,200 --> 00:39:59,910
Am de gând să mă întorc
în directorul meu aici.

911
00:39:59,910 --> 00:40:04,190
Și acum am doar de gând să faci
un chmod a + r pe un file--

912
00:40:04,190 --> 00:40:07,450
pentru că știu că exists-- numit
logo.gif, care este o imagine.

913
00:40:07,450 --> 00:40:08,590
Și acum reîncărca.

914
00:40:08,590 --> 00:40:11,040
Și wow-- așa că acum eu sunt
destul de aproape, sincer,

915
00:40:11,040 --> 00:40:15,860
pentru ca versiunea 1999 a Google, și
sincer, versiunea 2014 a Google,

916
00:40:15,860 --> 00:40:16,360
dreapta?

917
00:40:16,360 --> 00:40:21,920
>> Așa că acum o să site-ul lor,
în cele din urmă, dacă am căuta pentru pisici.

918
00:40:21,920 --> 00:40:23,900
Și într-adevăr este.

919
00:40:23,900 --> 00:40:26,410
Dar ce am făcut diferit
în această versiune de 4?

920
00:40:26,410 --> 00:40:28,020
Deci, nu vom insista prea mult pe ea aici.

921
00:40:28,020 --> 00:40:30,100
Veți vedea acest lucru în probleme
stabilit șapte în cele din urmă.

922
00:40:30,100 --> 00:40:31,350
Dar observați am făcut câteva lucruri.

923
00:40:31,350 --> 00:40:33,690
>> Am introdus un div
tag-ul, care este divizie,

924
00:40:33,690 --> 00:40:35,450
similară în spirit la o etichetă paragraf.

925
00:40:35,450 --> 00:40:38,220
Dar o divizie este la fel ca, aici e
o regiune invizibil dreptunghiular

926
00:40:38,220 --> 00:40:39,150
a ecranului.

927
00:40:39,150 --> 00:40:41,680
Să-l da un unic
identificator, un subsol, doar

928
00:40:41,680 --> 00:40:44,700
astfel încât să putem vorbi despre
l în HTML nostru în altă parte.

929
00:40:44,700 --> 00:40:47,952
Aici este un alt div a paginii
a cărui identitate va fi de conținut.

930
00:40:47,952 --> 00:40:49,160
Este conținutul paginii.

931
00:40:49,160 --> 00:40:51,090
Și aici este antetul paginii.

932
00:40:51,090 --> 00:40:54,960
>> Cu alte cuvinte, n-am
în esență, în HTML sunt mintal

933
00:40:54,960 --> 00:40:57,700
vizualizarea acestui pagina web ca
trei componente, un antet

934
00:40:57,700 --> 00:41:01,200
aici cu acest dreptunghi invizibil,
conținutul în mijloc, și apoi

935
00:41:01,200 --> 00:41:04,800
subsol jos, chiar
deși noi nu vedem aceste lucruri.

936
00:41:04,800 --> 00:41:09,940
Pentru că vreau să în capul meu de
pagina aici, sau într-un fișier .css,

937
00:41:09,940 --> 00:41:11,460
Pot folosi acest sintaxă.

938
00:41:11,460 --> 00:41:13,070
>> Antet nu este o etichetă.

939
00:41:13,070 --> 00:41:17,060
E o identitate așa se pare
faptul că prin a face #header,

940
00:41:17,060 --> 00:41:20,840
Pot aplica acum unul sau mai multe
proprietati antetul.

941
00:41:20,840 --> 00:41:24,130
Pot face același conținut,
la fel de conținut aici.

942
00:41:24,130 --> 00:41:27,230
>> Deci, de exemplu, în notele de subsol, aviz
toate aceste proprietăți adaug.

943
00:41:27,230 --> 00:41:30,660
Și eu știu că există doar prin lectură
pe documentația pentru CSS.

944
00:41:30,660 --> 00:41:33,450
Dimensiunea fontului va fi smaller--
astfel încât o parte dimensiunea fontului relativă.

945
00:41:33,450 --> 00:41:34,741
Greutatea va fi îndrăzneț.

946
00:41:34,741 --> 00:41:37,340
Margin-- cum multi pixeli
în jurul valorii de it-- este de 20 de pixeli.

947
00:41:37,340 --> 00:41:38,590
Și o să fie centrat.

948
00:41:38,590 --> 00:41:40,256
>> Dar acum, pagina arata ca aceasta.

949
00:41:40,256 --> 00:41:42,840
Dacă eu nu sunt mulțumit cu
copia mea acolo,

950
00:41:42,840 --> 00:41:46,560
Aș putea face ceva de genul culoare rosie.

951
00:41:46,560 --> 00:41:50,570
Și atunci eu pot salva acest lucru, reîncărca,
iar acum am stilizate subsol.

952
00:41:50,570 --> 00:41:54,130
Deci, aceasta este doar aluzie la putere
de ceea ce se poate face într-o pagină web

953
00:41:54,130 --> 00:41:55,510
pentru a schimba lucrurile în jurul valorii.

954
00:41:55,510 --> 00:41:59,080
>> Și chiar mai rece decât aceasta, dacă vrei
pentru a scormoni în jurul valorii de site-uri reale,

955
00:41:59,080 --> 00:42:00,810
nu le puteți schimba permanent.

956
00:42:00,810 --> 00:42:03,640
Dar dacă deschid
Inspector Chrome din nou

957
00:42:03,640 --> 00:42:07,610
și eu nu merg la partea stângă
aici, care arată HTML Facebook,

958
00:42:07,610 --> 00:42:11,380
dar arată pe dreapta
în partea stângă toată CSS sale,

959
00:42:11,380 --> 00:42:13,789
puteți fie și
schimba lucrurile pe zbor.

960
00:42:13,789 --> 00:42:15,080
Așa că lasă-mă să mergeți mai departe și a face acest lucru.

961
00:42:15,080 --> 00:42:18,670
>> Lasă-mă să mergeți mai departe și de control
click pe acest cuvânt aleator aici,

962
00:42:18,670 --> 00:42:21,230
semneze, și faceți clic pe Inspectați Element.

963
00:42:21,230 --> 00:42:25,130
Chrome sare foarte convenabil la
tag-ul h1 că Facebook este folosind.

964
00:42:25,130 --> 00:42:27,290
Și observați aici Facebook
are un fel de leneș

965
00:42:27,290 --> 00:42:29,960
greu codificate dimensiunea fontului ca o proprietate aici.

966
00:42:29,960 --> 00:42:33,530
>> Deci, un lucru rece, deși este
că dacă mă duc de fapt aici

967
00:42:33,530 --> 00:42:39,560
și spun, oh, Facebook, nu-mi place asta
64 de pixeli, putem schimba acum pe Facebook.

968
00:42:39,560 --> 00:42:42,590
Desigur, suntem doar o schimbare
pentru mine personal în acest moment.

969
00:42:42,590 --> 00:42:45,150
Dar aceasta este doar un alt
instrument în set nostru instrument

970
00:42:45,150 --> 00:42:48,360
care va permite să ne tweak
și dau seama și, de asemenea, diagnostica

971
00:42:48,360 --> 00:42:49,729
probleme în propriile noastre pagini web.

972
00:42:49,729 --> 00:42:52,270
Și am putea merge la fel de peste
aici, ceea ce este același lucru.

973
00:42:52,270 --> 00:42:55,830
Dacă vrei într-adevăr să obțineți fantezie, I
Adică, acum puteți evolua într-adevăr paginii

974
00:42:55,830 --> 00:42:57,380
și de a face lucruri nebunești.

975
00:42:57,380 --> 00:42:59,870
>> Deci, de ce este acest lucru toate util?

976
00:42:59,870 --> 00:43:02,330
Ei bine, în cele din urmă, suntem
O să vrea să fie

977
00:43:02,330 --> 00:43:07,110
capabil de a crea pagini web care
sunt conduse de propriile noastre scopuri spate,

978
00:43:07,110 --> 00:43:10,520
nu doar prin Google și
externalizarea sfârșitul acolo.

979
00:43:10,520 --> 00:43:13,510
Noi de fapt, doresc
valoare, de exemplu,

980
00:43:13,510 --> 00:43:18,830
de acțiune motorul nostru de căutare
atribuie nu merge la altcineva,

981
00:43:18,830 --> 00:43:24,270
dar pentru ceva de genul search.php,
în cazul în care search.php este pe cont propriu serverul nostru,

982
00:43:24,270 --> 00:43:25,670
nu pe altcineva.

983
00:43:25,670 --> 00:43:30,316
>> Și așa mai departe pentru a ajunge acolo, am de fapt
Trebuie să se introducă o nouă limbă.

984
00:43:30,316 --> 00:43:33,190
Deci, ne-am uitat deja la un nou
Limba aici, sau două într-adevăr, HTML

985
00:43:33,190 --> 00:43:33,700
și CSS.

986
00:43:33,700 --> 00:43:36,330
Dar ei de fapt sunt doar
limbi structurale și estetice.

987
00:43:36,330 --> 00:43:38,360
Nu sunt de programare
limbi în sine.

988
00:43:38,360 --> 00:43:41,160
Și asta e cam la fel de mult formală
timp ca vom cheltui pe ele.

989
00:43:41,160 --> 00:43:44,910
Pentru că vom începe acum
pentru trecerea la PHP.

990
00:43:44,910 --> 00:43:48,160
>> Deci, PHP este un real
limbaj de programare.

991
00:43:48,160 --> 00:43:50,750
Este un limbaj de scripting
în sensul că este

992
00:43:50,750 --> 00:43:52,855
menit să fie o greutate mai mică
decât ceva de genul C.

993
00:43:52,855 --> 00:43:56,082
Și este un limbaj interpretat,
ceea ce înseamnă că nu este compilat.

994
00:43:56,082 --> 00:43:58,790
Deci, pe scurt, ceea ce a însemnat
când am folosit un limbaj ca C

995
00:43:58,790 --> 00:44:00,290
și a trebuit să-l compila?

996
00:44:00,290 --> 00:44:02,120
Ce înseamnă să
compila codul sursă C?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
Audiența: [inaudibil].

999
00:44:04,780 --> 00:44:06,184
DAVID J MALAN: Spune din nou?

1000
00:44:06,184 --> 00:44:07,100
Audiența: [inaudibil].

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
Ea se transformă în binar.

1004
00:44:10,180 --> 00:44:14,200
Ea se transformă în zerouri și cele
de la codul sursă reală engleză-ca.

1005
00:44:14,200 --> 00:44:16,424
Și apoi putem de fapt
rula acele zerouri și cele

1006
00:44:16,424 --> 00:44:18,840
prin trecerea acestora prin
CPU de dublu clic pe pictograma

1007
00:44:18,840 --> 00:44:19,980
sau execută o comandă.

1008
00:44:19,980 --> 00:44:23,770
>> PHP și Python și Ruby
și Perl și JavaScript

1009
00:44:23,770 --> 00:44:26,250
și ciorchini de alte
limbile sunt interpretate

1010
00:44:26,250 --> 00:44:29,290
limbi, care este de a spune
nu le compila.

1011
00:44:29,290 --> 00:44:34,220
Mai degrabă, le hrănesc ca intrare pentru
un program numit un interpret.

1012
00:44:34,220 --> 00:44:36,640
Și că interpret,
care cineva a scris altcineva,

1013
00:44:36,640 --> 00:44:40,930
citește codul sursă sus în jos,
la stânga la dreapta și la doar interpretează

1014
00:44:40,930 --> 00:44:43,000
aceste linii și face ceea ce spui.

1015
00:44:43,000 --> 00:44:45,360
>> Deci, dacă vă confruntați cu o
line care spune imprimare,

1016
00:44:45,360 --> 00:44:48,660
nu se transforma neaparat imprimare
de zerouri și cele corespunzătoare.

1017
00:44:48,660 --> 00:44:51,910
Ea are doar acest interpret ca
o în cazul în stare de mare care spune,

1018
00:44:51,910 --> 00:44:56,110
dacă instruire programator este
de imprimare, apoi procedați în felul următor.

1019
00:44:56,110 --> 00:44:58,170
Deci, îl interpretează doar
prin tip de raționament

1020
00:44:58,170 --> 00:44:59,800
prin ceea ce se spune să facă.

1021
00:44:59,800 --> 00:45:01,320
>> Și PHP este una dintre aceste limbi.

1022
00:45:01,320 --> 00:45:05,310
Și în urmă PHP de ani a fost proiectat
tocmai pentru programare web.

1023
00:45:05,310 --> 00:45:08,160
Și a fost inițial o
Limba murdar foarte neglijent.

1024
00:45:08,160 --> 00:45:10,940
Și într-adevăr, există o foarte mare
numarul de cod PHP rău acolo.

1025
00:45:10,940 --> 00:45:13,520
Dar limbajul în sine
sa maturizat de-a lungul anilor,

1026
00:45:13,520 --> 00:45:16,200
atât de mult încât acum e
de fapt, un pas catre viitor

1027
00:45:16,200 --> 00:45:19,970
pedagogic din C, deoarece este
astfel darned familiar pentru tot

1028
00:45:19,970 --> 00:45:22,380
tocmai ați văzut în ultimele săptămâni.

1029
00:45:22,380 --> 00:45:25,724
>> O diferență inițială, vom vedea
există mai e nici o funcție principală.

1030
00:45:25,724 --> 00:45:28,890
Când porniți cod scris, e doar
mergi la a lua executat indiferent de ce,

1031
00:45:28,890 --> 00:45:30,220
așa cum vom vedea într-o clipă.

1032
00:45:30,220 --> 00:45:33,320
Între timp, aici e ceea ce o
variabilă arată ca în PHP.

1033
00:45:33,320 --> 00:45:35,840
E un pic diferit,
ci doar abia.

1034
00:45:35,840 --> 00:45:39,380
>> În PHP, nu e dactilografiere puternic.

1035
00:45:39,380 --> 00:45:41,430
Nu e săptămână dactilografiere,
ceea ce înseamnă doar acolo

1036
00:45:41,430 --> 00:45:44,030
sunt tipuri de date, cum ar fi siruri de caractere
precum și numere și alte lucruri.

1037
00:45:44,030 --> 00:45:47,030
Dar tu nu deranjez specificând
ceea ce ei mai sunt.

1038
00:45:47,030 --> 00:45:48,980
PHP se cifrele pentru tine.

1039
00:45:48,980 --> 00:45:52,030
Semnul dolar este doar o decizie
că PHP oamenii si voi ani

1040
00:45:52,030 --> 00:45:54,890
în urmă, astfel încât orice variabilă în PHP
doar începe cu un semn dolar.

1041
00:45:54,890 --> 00:45:58,130
E de fapt un fel de util în acest
se sare la tine un pic mai mult.

1042
00:45:58,130 --> 00:46:01,315
>> Dar, după asta, acest
este o afecțiune în PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Ce este diferit față de C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Truc question-- nimic,
care este de fapt foarte frumos.

1047
00:46:09,600 --> 00:46:12,140
Expresii booleene în PHP-- la fel.

1048
00:46:12,140 --> 00:46:19,354
Expresii booleene cu și față de
sau, switch-uri, bucle, bucle, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
acesta este diferit.

1050
00:46:20,270 --> 00:46:22,660
>> Deci, se dovedește nu există o
serie de alte caracteristici în PHP.

1051
00:46:22,660 --> 00:46:25,243
Una dintre ele este de fapt acest lucru,
care este minunat convenabil.

1052
00:46:25,243 --> 00:46:29,250
Dacă $ numere este o matrice care le-ați
a declarat anterior într-un program,

1053
00:46:29,250 --> 00:46:33,350
aveți această fantezie pentru fiecare construct
că, în loc de a face toate astea

1054
00:46:33,350 --> 00:46:37,020
Am enervant este egal cu 0, I este
mai puțin decât aceasta, [? Am ++?],

1055
00:46:37,020 --> 00:46:40,320
pentru fiecare număr ca număr, în cazul în care fiecare
de aceste valori semnul dolar este doar

1056
00:46:40,320 --> 00:46:42,790
o variabilă, iar acesta din urmă
vă puteți gândi ca mine

1057
00:46:42,790 --> 00:46:44,290
Ai putea numi tot ce vrei.

1058
00:46:44,290 --> 00:46:45,770
L-am sunat număr.

1059
00:46:45,770 --> 00:46:48,825
Acest lucru se va repeta peste
matrice numita numere.

1060
00:46:48,825 --> 00:46:51,200
Și pe fiecare iterație, e
O să actualizeze automat

1061
00:46:51,200 --> 00:46:54,340
pentru tine numărul de semnul dolar
variabilă, astfel încât să în mod constant

1062
00:46:54,340 --> 00:46:58,210
au acces la variabila pe care doriți
fără a fi nevoie de a face orice suport gradină

1063
00:46:58,210 --> 00:47:00,980
notație sau de indexare într-o matrice.

1064
00:47:00,980 --> 00:47:04,950
>> Dincolo de asta, avem chiar lucruri cum ar fi
tablouri, care arata aproape la fel,

1065
00:47:04,950 --> 00:47:08,210
cu excepția că este foarte frecvente, cum vom
a se vedea, atât în ​​PHP și JavaScript

1066
00:47:08,210 --> 00:47:10,750
de a verifica inițializa un tablou
folosind paranteze pătrate.

1067
00:47:10,750 --> 00:47:12,040
C folosește acolade.

1068
00:47:12,040 --> 00:47:15,330
Deci e puțin diferit, chiar dacă
nu am folosit într-adevăr că truc mult.

1069
00:47:15,330 --> 00:47:20,090
>> Dar chiar mai puternic,
PHP are tablouri asociative,

1070
00:47:20,090 --> 00:47:23,100
care este un mod fantezist
de a spune tabele de dispersie.

1071
00:47:23,100 --> 00:47:31,610
De fapt, dacă doriți să declarați un hash
masă în PHP, spre deosebire de C- câte

1072
00:47:31,610 --> 00:47:34,775
de linii de cod a fost nevoie de
punerea în aplicare de fapt un tabel hash in C?

1073
00:47:34,775 --> 00:47:38,310
Sau cât de multe linii de cod este
luând să pună în aplicare un tabel hash in C?

1074
00:47:38,310 --> 00:47:39,820
Deci, este, probabil, mult, nu?

1075
00:47:39,820 --> 00:47:41,680
E o câteva zeci, poate sute sau 200.

1076
00:47:41,680 --> 00:47:42,980
Este trivial.

1077
00:47:42,980 --> 00:47:45,420
Sau este vorba despre a fi, la fel de
veți vedea în curând, trivial

1078
00:47:45,420 --> 00:47:48,080
să pună în aplicare un tabel hash
[Inaudibil] și, de asemenea, o încercare.

1079
00:47:48,080 --> 00:47:50,580
Dar, în PHP-- și sincer, m-am
Probabil că nu ar trebui să vă spun acest lucru

1080
00:47:50,580 --> 00:47:53,630
până la Monday-- în PHP, în cazul în care
vrei o masă, făcut.

1081
00:47:53,630 --> 00:47:56,431
Asta e un hash table-- astfel
cu o linie de cod.

1082
00:47:56,431 --> 00:47:56,930
Și

1083
00:47:56,930 --> 00:47:58,810
>> O mulțime de limbi face asta.

1084
00:47:58,810 --> 00:48:00,190
Distreaza-te cu PSET cinci.

1085
00:48:00,190 --> 00:48:01,980
Deci, o mulțime de limbi face acest lucru.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Ei vă dau aceste abstracțiuni
că alți oameni, alte programatori,

1088
00:48:06,140 --> 00:48:09,870
au creat pentru tine, astfel încât
poti sta pe umerii lor

1089
00:48:09,870 --> 00:48:13,290
și a începe să utilizați idei care sunt super-
convingătoare, cum ar fi tabele de dispersie și copaci

1090
00:48:13,290 --> 00:48:14,140
și pasă.

1091
00:48:14,140 --> 00:48:17,790
Dar nu trebuie neapărat să
pună în aplicare aceste lucruri tine.

1092
00:48:17,790 --> 00:48:20,850
>> Și astfel în cele din urmă, ceea ce
vom folosi PHP pentru

1093
00:48:20,850 --> 00:48:23,580
este potențial programe de scris
de așa-numita linie de comandă.

1094
00:48:23,580 --> 00:48:26,600
Am putea recrea fiecare program
ne-am scris acest semestru până acum,

1095
00:48:26,600 --> 00:48:30,410
cu excepția, poate, Breakout, care foloseste SPL,
care este specific C în acest moment.

1096
00:48:30,410 --> 00:48:33,100
Dar toate celelalte probleme stabilite,
cu siguranță, Mario și Cezar

1097
00:48:33,100 --> 00:48:35,300
și Vigenere și
[? Crack?] Și mai departe, ne-am

1098
00:48:35,300 --> 00:48:39,520
ar putea re-pune în aplicare în PHP, și
probabil, un pic mai ușor.

1099
00:48:39,520 --> 00:48:43,050
>> Dar ceea ce vom merge în cele din urmă
de a utiliza PHP este programarea web.

1100
00:48:43,050 --> 00:48:46,420
Și vom introduce următorul
Săptămâna un model mental, o paradigmă numit

1101
00:48:46,420 --> 00:48:49,610
MVC, vedere modelul de controlor,
care dacă ai făcut programare

1102
00:48:49,610 --> 00:48:51,610
înainte în Python sau
Ruby sau în altă parte, vă

1103
00:48:51,610 --> 00:48:54,112
ar putea să știu de această echipă cu
Șine și Django și altele asemenea.

1104
00:48:54,112 --> 00:48:55,820
Dar dacă sunteți nou la
aceasta le veți vedea

1105
00:48:55,820 --> 00:48:59,652
că aceasta este de fapt o foarte natural
extinderea factorizarea

1106
00:48:59,652 --> 00:49:01,360
și un fel de proiectare
de cod care ne-am

1107
00:49:01,360 --> 00:49:04,670
făcut în C. Vom acum
aplica unele dintre aceste lecții PHP

1108
00:49:04,670 --> 00:49:07,190
astfel încât în ​​cele din urmă, noi suntem
de punere în aplicare propriile noastre site-uri web.

1109
00:49:07,190 --> 00:49:09,080
Și dacă ești un fel de
hipnotizat sau uimit

1110
00:49:09,080 --> 00:49:10,954
că vom face
Toate atat de repede,

1111
00:49:10,954 --> 00:49:13,410
dau seama că aproape fiecare
semestru, aproape 90%

1112
00:49:13,410 --> 00:49:16,560
de studenți CS50, inclusiv cele
care nu au programat mai înainte,

1113
00:49:16,560 --> 00:49:20,329
sfârși prin a face proiecte finale care
sunt bazate pe programare web.

1114
00:49:20,329 --> 00:49:23,120
Și așa veți vedea că se întoarce
sunt ridicate în săptămânile ce vor urma.

1115
00:49:23,120 --> 00:49:24,965
Deci, noi va vom vedea atunci pe luni.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> SPEAKER 1: Și acum, Deep
Gânduri de Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Tabele de dispersie.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [Râsete]

1122
00:49:38,402 --> 00:49:38,902