1
00:00:00,000 --> 00:00:03,486
>> [MUSIC JOC]

2
00:00:03,486 --> 00:00:10,460

3
00:00:10,460 --> 00:00:14,250
>> DAVID J MALAN: Aceasta este CS50 și
aceasta este începutul săptămânii 7.

4
00:00:14,250 --> 00:00:15,060
Deci, bine ai revenit.

5
00:00:15,060 --> 00:00:17,540
Și s-ar putea aminti că
în problema set de patru,

6
00:00:17,540 --> 00:00:21,510
a existat un pic de vanatoare de măturător de stradă un
pentru unele premii fabuloase în cadrul cărora

7
00:00:21,510 --> 00:00:24,219
după ce a recupera fotografiile
Personalul atât aici, cât și în New Haven,

8
00:00:24,219 --> 00:00:27,468
ai fost provocat pentru a găsi cât mai multe dintre
oamenii de stiinta de calculator ca ai putea.

9
00:00:27,468 --> 00:00:29,550
Și avem un întreg
grămadă de observații.

10
00:00:29,550 --> 00:00:31,930
Am gândit să împărtășesc câteva
cu tine astăzi aici.

11
00:00:31,930 --> 00:00:35,100
>> Și vom posta toate acestea on-line.

12
00:00:35,100 --> 00:00:39,310
Dar în special, am vrut să
atrag atenția sa-- bine unul,

13
00:00:39,310 --> 00:00:42,670
Sam a fost în destul de puține dintre ele
în general, prezintă ca aceasta.

14
00:00:42,670 --> 00:00:45,750
Dar se pare că, în calitate de
în această dimineață, câștigătorul

15
00:00:45,750 --> 00:00:51,170
a fost numit un anumit cineva Ken cu
24 a personalului capturat pe camera

16
00:00:51,170 --> 00:00:54,600
sau mai puține, atunci când se ia în
contul personal multiple în imagini.

17
00:00:54,600 --> 00:00:58,300
Imagine aici este Ken următor
Mariei în New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Acum, Ken, însă, se transformă
out este pic de un caz de colț

19
00:01:01,300 --> 00:01:02,880
care nu este încă întâmplat înainte.

20
00:01:02,880 --> 00:01:05,713
Se pare că aceasta nu a avut loc
pentru mine pentru a pune de imprimare amendă în probleme

21
00:01:05,713 --> 00:01:09,710
set patru care spune că personalul sunt
neeligibile pentru premiile fabuloase

22
00:01:09,710 --> 00:01:13,130
deoarece Ken este, desigur, unul dintre
fotografi de pe personalul nostru.

23
00:01:13,130 --> 00:01:16,820
Acum, cu care a spus, el
mi-a scris inițial să spun

24
00:01:16,820 --> 00:01:19,180
vă rugăm să nu postați aceste fotografii on-line.

25
00:01:19,180 --> 00:01:21,630
Cred că în mare parte
deoarece cele mai multe dintre fotografii

26
00:01:21,630 --> 00:01:24,499
că acest fotograf a luat uite
ceva de genul asta.

27
00:01:24,499 --> 00:01:25,040
Și altele asemenea.

28
00:01:25,040 --> 00:01:28,990
>> Dar Ken ar dori ca eu să vă asigur
că el este un fotograf foarte bun,

29
00:01:28,990 --> 00:01:33,190
El este un profesionist, el ia
fotografii care nu sunt neclare,

30
00:01:33,190 --> 00:01:37,270
că sunt mai bine focalizate, și el
a luat destul de puține de personalul nostru.

31
00:01:37,270 --> 00:01:40,370
Ci, mai degrabă decât doar recunoașteți
Ken, ce ne-am gandit ar face

32
00:01:40,370 --> 00:01:43,390
se trece prin lista de
studenții care au depus. reale

33
00:01:43,390 --> 00:01:48,640
Și se pare că Lance cu
15 fotografii sau din această dimineață

34
00:01:48,640 --> 00:01:50,030
a fost câștigătorul nostru.

35
00:01:50,030 --> 00:01:55,730
>> Și aici este imaginat Lance cu Colton,
cu Skaz, cu mine, și cu Sam.

36
00:01:55,730 --> 00:02:00,230
Dar apoi se dovedește că, în calitate de
11:46, astfel încât doar un pic în urmă,

37
00:02:00,230 --> 00:02:04,380
M-am întors la e-mail meu și am găsit
că am avut încă o prezentare mai

38
00:02:04,380 --> 00:02:08,300
de un student pe nume Bonnie
al cărui email spus doar acest lucru.

39
00:02:08,300 --> 00:02:10,800
Nu va mint, eu sunt
face acest lucru în timpul clasă.

40
00:02:10,800 --> 00:02:17,620
Și apoi a început să atașați doar
14 fotografii, una timid de Lance lui 15.

41
00:02:17,620 --> 00:02:22,690
>> Dar, în fotografii lui Bonnie, se pare
out au fost mai mulți membri ai personalului, Sam

42
00:02:22,690 --> 00:02:25,960
Dintre acestea, astfel încât ceea ce ne-am gandit
ar face este recunoaște atât a acestora.

43
00:02:25,960 --> 00:02:29,240
Deci, în plus față de obținerea Dropbox
spațiu care toți cei care au participat

44
00:02:29,240 --> 00:02:33,900
primește, aceste două secțiuni vor, de asemenea,
primesc un prânz frumos furnizat pentru ei

45
00:02:33,900 --> 00:02:36,100
și secțiunea lor
împerechează în această săptămână vine.

46
00:02:36,100 --> 00:02:38,970
Și așa veți auzi de la noi,
Lance și Bonnie, despre asta.

47
00:02:38,970 --> 00:02:40,002
Felicitări atât de mare pentru ei.

48
00:02:40,002 --> 00:02:42,210
Acum, cei care ar fi
ca masa de prânz, în general, mai mult

49
00:02:42,210 --> 00:02:45,320
Știu că masa de prânz CS50 în Cambridge
și New Haven este vineri.

50
00:02:45,320 --> 00:02:48,510
Du-te la site-ul slash RSVP CS50 lui.

51
00:02:48,510 --> 00:02:49,800
Și acum un cuvânt pe seminarii.

52
00:02:49,800 --> 00:02:50,730
Mai curricularly.

53
00:02:50,730 --> 00:02:52,490
Deci ne apropiem de
punct de semestru

54
00:02:52,490 --> 00:02:55,200
în cazul în care ar trebui să înceapă
gândesc la proiecte finale.

55
00:02:55,200 --> 00:02:59,309
Și, de fapt, în doar un pic, va
așa-numitele propuneri pre fi din cauza.

56
00:02:59,309 --> 00:03:01,850
Propunerile Deci pre sunt menite să
impact să fie destul de redus și într-adevăr

57
00:03:01,850 --> 00:03:04,109
doar o oportunitate pentru
să compuneți o scurtă notă

58
00:03:04,109 --> 00:03:06,900
colegii dumneavoastră de predare a informa
el sau ea ceea ce te gândești

59
00:03:06,900 --> 00:03:09,140
s-ar putea doriți să faceți pentru proiectul final.

60
00:03:09,140 --> 00:03:11,730
>> Acum, mulți studenți sfârșesc
face pe bază de proiecte web finale.

61
00:03:11,730 --> 00:03:13,800
Și, desigur, suntem doar
săptămâna trecută acum în acest

62
00:03:13,800 --> 00:03:15,890
și dincolo de scufundări în programare web.

63
00:03:15,890 --> 00:03:18,200
Deci, nu vă faceți griji, dacă
au absolut nici o idee cum

64
00:03:18,200 --> 00:03:21,594
v-ar construi ideile care
s-ar putea avea în mintea ta.

65
00:03:21,594 --> 00:03:24,510
Acesta este de fapt doar o funcție forțând
pentru a obține te gândești și vorbești

66
00:03:24,510 --> 00:03:25,650
cu TF dumneavoastră despre acest lucru.

67
00:03:25,650 --> 00:03:28,810
Dar, pentru a vă ajuta cu asta, și
cu proiecte finale în cele din urmă,

68
00:03:28,810 --> 00:03:31,750
știu că CS50 are o tradiție
de a oferi seminarii.

69
00:03:31,750 --> 00:03:36,084
>> Și acestea sunt opționale, mâinile pe,
sau prelegeri bazează pe posibilitățile de

70
00:03:36,084 --> 00:03:39,000
pentru a afla mai multe despre subiecte care sunt
un pic auxiliare cursului

71
00:03:39,000 --> 00:03:43,310
programa, dar cu toate acestea minunat
materiale de a conduce proiecte finale.

72
00:03:43,310 --> 00:03:46,840
Și astfel aceasta este lista care este
Personalul CS50 aici, în New Haven

73
00:03:46,840 --> 00:03:48,600
au venit cu pentru
în acest an despre iOS

74
00:03:48,600 --> 00:03:50,730
programare, Android
programare, dezvoltarea de jocuri,

75
00:03:50,730 --> 00:03:54,480
și ciorchini de mai multe instrumente
și limbi și tehnici.

76
00:03:54,480 --> 00:03:56,780
>> Deci, ține un ochi pe site-ul CS50 lui.

77
00:03:56,780 --> 00:04:00,110
Și în același timp, dacă doriți să
inregistrati interesul dumneavoastră în oricare dintre acestea,

78
00:04:00,110 --> 00:04:02,510
du-te la registru slash CS50 lui.

79
00:04:02,510 --> 00:04:05,770
Și vom urmări apoi în sus ca la
zile și ore de zbor și locații

80
00:04:05,770 --> 00:04:09,090
și everything-- mai totul va
fi transmise și, de asemenea disponibile la cerere

81
00:04:09,090 --> 00:04:11,750
după, dacă nu de fapt, pot face.

82
00:04:11,750 --> 00:04:15,800
Deci, fără alte formalități, am
rămas ultima dată cu GET.

83
00:04:15,800 --> 00:04:19,610
>> Și aceasta a fost ca mesajul pe care a fost
în interiorul plicului virtual, amintesc,

84
00:04:19,610 --> 00:04:23,960
că am trecut de la router la router la
router între un browser web și un web

85
00:04:23,960 --> 00:04:24,487
serverul.

86
00:04:24,487 --> 00:04:26,695
Și că mesajul uitat un
ceva de genul asta.

87
00:04:26,695 --> 00:04:29,700
Acesta a fost mesajul pe care mai arcane
a fost de fapt în interiorul unui plic

88
00:04:29,700 --> 00:04:34,440
scris pe o bucată de hârtie, acesta
prima linie spune literal, pentru a primi slash.

89
00:04:34,440 --> 00:04:37,830
>> Și, așa cum un control bun-simț,
ce a indica slash?

90
00:04:37,830 --> 00:04:40,455
Ce înseamnă atunci când slash
solicitând un site?

91
00:04:40,455 --> 00:04:43,070

92
00:04:43,070 --> 00:04:44,250
Solicitați tot timpul.

93
00:04:44,250 --> 00:04:47,333
Cel mai de fiecare dată când vizitați un site Web,
Nu, de fapt tastați un nume de fișier.

94
00:04:47,333 --> 00:04:50,960
Probabil te duci doar la Facebook.com,
intra, gmail.com, sau altele asemenea.

95
00:04:50,960 --> 00:04:52,260
Și ce reprezintă slash?

96
00:04:52,260 --> 00:04:53,506
Ce fișier?

97
00:04:53,506 --> 00:04:54,630
Sau ce pagină, în mod specific?

98
00:04:54,630 --> 00:04:59,642

99
00:04:59,642 --> 00:05:00,720
>> Indicele, da.

100
00:05:00,720 --> 00:05:01,810
Deci pagina implicită.

101
00:05:01,810 --> 00:05:04,810
Deci, dacă nu se specifică un fișier
nume ca vom începe să vedem,

102
00:05:04,810 --> 00:05:07,750
esti de fapt doar solicitant
da-mi pagina de Facebook implicit

103
00:05:07,750 --> 00:05:10,800
sau da-mi cutia mea poștală sau da
mi pagina implicită de știri

104
00:05:10,800 --> 00:05:12,510
pe site-ul CNN sau altele asemenea.

105
00:05:12,510 --> 00:05:15,220
Și un server răspunde apoi la
acel mesaj cu ceva

106
00:05:15,220 --> 00:05:18,420
ca aceasta, a zis da,
vorbesc HTTP versiunea 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, care este o stare
Codul că noi, oamenii foarte rar

108
00:05:21,130 --> 00:05:22,790
vezi vreodată că e bine.

109
00:05:22,790 --> 00:05:26,640
Pentru că înseamnă OK, cererea
a fost primit și manipulate în mod corespunzător.

110
00:05:26,640 --> 00:05:28,960
Și tipul de conținut
aparent în răspuns

111
00:05:28,960 --> 00:05:31,170
este destul de des, dar nu întotdeauna, text.

112
00:05:31,170 --> 00:05:32,580
Și în mod specific, HTML.

113
00:05:32,580 --> 00:05:34,760
Și asta e de fapt
în cazul în care ne uităm la ziua de azi.

114
00:05:34,760 --> 00:05:37,140
>> Deci, în fapt, am de gând să merg
înainte și deschide un browser.

115
00:05:37,140 --> 00:05:40,410
Am de gând să utilizeze Chrome, puteți utiliza
cele mai multe orice browser în săptămânile ce vor urma.

116
00:05:40,410 --> 00:05:42,410
Vă recomandăm, în general, Chrome
pentru că este deosebit de

117
00:05:42,410 --> 00:05:43,750
bun pentru dezvoltatorii de software.

118
00:05:43,750 --> 00:05:46,070
Are o mulțime de construit în
instrumente care face mai ușor

119
00:05:46,070 --> 00:05:49,800
pentru a dezvolta nu numai HTML si CSS,
lucruri pe care le vom începem să vorbim despre ziua de azi,

120
00:05:49,800 --> 00:05:51,530
dar, de asemenea, alte limbi, de asemenea.

121
00:05:51,530 --> 00:05:55,530
>> Și am de gând să mergeți mai departe și merge sa--
Am de gând să control click dreapta sau

122
00:05:55,530 --> 00:05:57,210
faceți clic oriunde pe o pagină web.

123
00:05:57,210 --> 00:05:59,070
Și am de gând să merg pentru a inspecta Element.

124
00:05:59,070 --> 00:06:03,850
Și am de gând să-mi tweak
Ecranul doar un pic aici.

125
00:06:03,850 --> 00:06:05,790
Lasă-mă să mutați acest lucru în partea de jos.

126
00:06:05,790 --> 00:06:08,140
Deci, asta este ceea ce se numește
Inspector Chrome.

127
00:06:08,140 --> 00:06:11,010
Deci, aceasta este ca o depanare
instrument construit în Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Toate aveți deja acest
Dacă ați fost utilizați Chrome.

129
00:06:13,520 --> 00:06:17,169
Și vă permite să vedeți ce se întâmplă
pe sub capota unor pagini web.

130
00:06:17,169 --> 00:06:19,210
Deci, haideți să aruncăm o de fapt
uita-te la acest cum urmează.

131
00:06:19,210 --> 00:06:21,251
Ea are mai multe caracteristici mod
și ne pasă de astăzi.

132
00:06:21,251 --> 00:06:22,760
Dar există aceste file aici.

133
00:06:22,760 --> 00:06:25,890
Elemente, de rețea, surse,
Cronologie, și alte chestii.

134
00:06:25,890 --> 00:06:27,800
Am de gând să faceți clic pe
De rețea pentru o clipă.

135
00:06:27,800 --> 00:06:30,500
>> Și e un pic copleșitoare
la prima vedere aici.

136
00:06:30,500 --> 00:06:34,190
Dar ceea ce am de gând să fac este să
mine un pic simplifica.

137
00:06:34,190 --> 00:06:37,560
Am de gând pentru a porni
înregistrare lumina, astfel încât este de culoare roșie.

138
00:06:37,560 --> 00:06:39,140
Și am de gând să spun păstra jurnal.

139
00:06:39,140 --> 00:06:41,015
Iar acesta este doar un pic
lucru am dat seama

140
00:06:41,015 --> 00:06:44,120
în timp ce se va salva
tot ce se întâmplă în browser.

141
00:06:44,120 --> 00:06:50,030
Iar acum am de gând să merg
la http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> De fapt, hai sa facem www
pentru o bună măsură, slash.

143
00:06:52,690 --> 00:06:53,643
Enter.

144
00:06:53,643 --> 00:06:56,180
Deci, o adresă URL pe care mulți dintre
s-ar putea fi vizitat.

145
00:06:56,180 --> 00:06:58,830
Și acum Facebook web
Pagina vine în partea de sus.

146
00:06:58,830 --> 00:07:02,350
Și apoi o grămadă de
lucruri a zburat de la partea de jos.

147
00:07:02,350 --> 00:07:04,830
Și, de fapt, se dovedește că
atunci când vizitați Facebook.com,

148
00:07:04,830 --> 00:07:09,320
tu nu faci doar o cerere HTTP,
se dovedește că o să Facebook.com

149
00:07:09,320 --> 00:07:14,320
trimite 41 dintre aceste plicuri,
fiecare cu propria sa cerere get,

150
00:07:14,320 --> 00:07:18,360
așa cum este indicat, deși în spatele ecranului
aici, în partea de jos a ecranului,

151
00:07:18,360 --> 00:07:24,040
indică faptul că, într-adevăr, mi
Browser-ul a făcut 41 de cereri.

152
00:07:24,040 --> 00:07:29,689
>> Și în total, 861 transferat
kilobytes și a luat pentru un motiv oarecare

153
00:07:29,689 --> 00:07:31,730
cât mai multe opt secunde
pentru a descărca toate acestea.

154
00:07:31,730 --> 00:07:33,790
Așa că e de fapt un pic ciudat
că site-ul Facebook ar lua asta

155
00:07:33,790 --> 00:07:35,600
lung, dar așa să fie, în acest caz.

156
00:07:35,600 --> 00:07:39,520
Acum, toate acestea nu-mi pasă cu adevărat
despre excepția cel mai de sus cererii.

157
00:07:39,520 --> 00:07:46,440
Așa că hai să mergem la cea de aici
și lasă-mă să zoom out pentru o clipă.

158
00:07:46,440 --> 00:07:47,754
>> Și lasă-mă să măriți această.

159
00:07:47,754 --> 00:07:50,670
Deci, ceea ce am făcut la stânga, chiar dacă
există o mulțime întâmplă aici

160
00:07:50,670 --> 00:07:53,360
este Am evidențiat
Facebook.com și apoi

161
00:07:53,360 --> 00:07:56,540
observați că eu sunt defilare în jos,
defilare în jos, defilare în jos,

162
00:07:56,540 --> 00:07:58,330
pentru a solicita antetele.

163
00:07:58,330 --> 00:08:01,720
Și veți vedea că Chrome dă
mi esență conținutul interioare

164
00:08:01,720 --> 00:08:02,810
cererii am făcut.

165
00:08:02,810 --> 00:08:06,130
Nu e de formatare în destul de aceeași
Astfel, nu observ există o mențiune a obține,

166
00:08:06,130 --> 00:08:09,481
observa există o mențiune a gazdei,
Facebook.com, calea, sau slash,

167
00:08:09,481 --> 00:08:10,730
care este fișierul am cerut.

168
00:08:10,730 --> 00:08:12,930
>> Și apoi, dacă am defila
copii de rezervă, vom fapt

169
00:08:12,930 --> 00:08:17,270
vezi că ceea ce sa întors Facebook
pentru mine este toate aceste antete.

170
00:08:17,270 --> 00:08:21,040
Deci, în interiorul acestui plic virtuale
într-adevăr, sunt o mulțime de perechi de valoare cheie.

171
00:08:21,040 --> 00:08:23,130
Un cuvânt, o colon, iar apoi o valoare.

172
00:08:23,130 --> 00:08:25,050
Un cuvânt, o colon, și o valoare.

173
00:08:25,050 --> 00:08:26,160
Acestea sunt numite antete.

174
00:08:26,160 --> 00:08:31,860
Și există cale mai multe detalii aici decât
am de fapt, pasa acum.

175
00:08:31,860 --> 00:08:33,750
>> Dar acest lucru este al doilea
ultima acolo,

176
00:08:33,750 --> 00:08:38,809
observă, că serverul Facebook.com lui,
într-adevăr, a spus aici vine un text HTML.

177
00:08:38,809 --> 00:08:41,409
Deci, toate acestea este de a spune
că, atunci când solicitați o web

178
00:08:41,409 --> 00:08:44,300
Pagina de la un browser la o
Server, serverul răspunde că

179
00:08:44,300 --> 00:08:47,630
cu un plic proprie
in interiorul caruia este text.

180
00:08:47,630 --> 00:08:49,020
Cu alte cuvinte, HTML.

181
00:08:49,020 --> 00:08:50,590
HyperText Markup Language.

182
00:08:50,590 --> 00:08:53,200
Care este o altă limbă
că vom introduce astăzi

183
00:08:53,200 --> 00:08:57,740
ca oamenii sau calculatoare genera
în scopul de a pune în aplicare pagini web.

184
00:08:57,740 --> 00:08:59,580
>> Mai exact, să ne uităm la asta.

185
00:08:59,580 --> 00:09:03,277
Am de gând să merg acum înapoi
la site-ul Facebook.

186
00:09:03,277 --> 00:09:05,360
Și am de gând să doar
Controlul clic sau clic dreapta

187
00:09:05,360 --> 00:09:07,634
și faceți clic pe Vedeți sursa paginii.

188
00:09:07,634 --> 00:09:10,550
Și chiar dacă nu utilizați Chrome,
IE se poate face acest lucru, Firefox poate face acest lucru,

189
00:09:10,550 --> 00:09:14,060
Safari poate face acest lucru, chiar dacă meniul
opțiuni ar putea arata un pic diferit.

190
00:09:14,060 --> 00:09:18,990
Și aceasta este HTML care Mark și
companie la Facebook au scris.

191
00:09:18,990 --> 00:09:24,640
>> Și în mod colectiv, acest limbaj aici
implementează albastru și alb pagina

192
00:09:24,640 --> 00:09:26,370
că am văzut în urmă cu o clipă.

193
00:09:26,370 --> 00:09:28,030
Acum, acest lucru este un pic copleșitoare.

194
00:09:28,030 --> 00:09:31,400
Dar dacă ne uităm în sus la stânga sus, suntem
va începe pentru a vedea unele modele.

195
00:09:31,400 --> 00:09:34,140
Se pare că există o mulțime
dintre acestea suport cu unghi deschis

196
00:09:34,140 --> 00:09:35,970
și apoi există acest cuvânt cheie HTML.

197
00:09:35,970 --> 00:09:38,330
Iată un alt deschis
suport unghi și cap.

198
00:09:38,330 --> 00:09:41,560
>> Iată, dacă derulați în jos
și în jos și în jos, eu sunt

199
00:09:41,560 --> 00:09:43,820
O să mergeți mai departe și să încerce
pentru a căuta ceva.

200
00:09:43,820 --> 00:09:48,510
Există mult peste pe dreapta
aici este trupul suport deschis.

201
00:09:48,510 --> 00:09:50,800
Și amintesc de ultima
timp în care ne-am propus

202
00:09:50,800 --> 00:09:53,364
că cea mai simplă pagina web
că un om s-ar putea scrie

203
00:09:53,364 --> 00:09:55,030
s-ar putea uita-te un pic ceva de genul asta.

204
00:09:55,030 --> 00:09:58,430
Tag-ul deschis HTML, cap deschis
tag-ul, tag-ul titlu deschis,

205
00:09:58,430 --> 00:10:03,230
apoi titlul închis, cap inchis, deschis
tag-ul body, un text, închis corp,

206
00:10:03,230 --> 00:10:04,720
HTML închis.

207
00:10:04,720 --> 00:10:06,290
>> Dar o pauză aici pentru un moment.

208
00:10:06,290 --> 00:10:09,030
Acest cod, chiar dacă ați
nu scris înainte

209
00:10:09,030 --> 00:10:11,864
dar încă nu înțeleg destul de
ce se întâmplă, arata destul de bine.

210
00:10:11,864 --> 00:10:12,821
Corect, e foarte curat.

211
00:10:12,821 --> 00:10:14,120
E foarte frumos stilistic.

212
00:10:14,120 --> 00:10:16,190
O mulțime de indentare și spațiu alb.

213
00:10:16,190 --> 00:10:18,020
Facebook nu este.

214
00:10:18,020 --> 00:10:23,190
Deci, de ce este atât de mult Facebook
mai rău decât mi-am scris la HTML?

215
00:10:23,190 --> 00:10:24,310
Se pare că.

216
00:10:24,310 --> 00:10:26,899
>> Drept, acest lucru este ca o
din cinci pentru stil.

217
00:10:26,899 --> 00:10:29,315
Există un motiv convingător
pentru ei de a reduce aceste colțuri.

218
00:10:29,315 --> 00:10:31,069

219
00:10:31,069 --> 00:10:33,860
Bine, așa că nu doresc să
face mai ușor pentru tine să-l citiți.

220
00:10:33,860 --> 00:10:36,940
Deci, într-un fel, ele sunt
obfuscating aceasta, un fel de ea codare

221
00:10:36,940 --> 00:10:40,260
cel puțin estetic așa
că este mai greu pentru Myspace

222
00:10:40,260 --> 00:10:42,705
să meargă și să rip off lor
pagina de start și HTML pentru aceasta.

223
00:10:42,705 --> 00:10:45,080
Se pare că, odată cu programele
deși, inclusiv Chrome,

224
00:10:45,080 --> 00:10:47,020
putem curăța asta super-ușor.

225
00:10:47,020 --> 00:10:49,420
Deci, nu chiar ca e ca motiv.

226
00:10:49,420 --> 00:10:51,290
Ce altceva ar putea fi cauza.

227
00:10:51,290 --> 00:10:51,790
Da.

228
00:10:51,790 --> 00:10:54,680

229
00:10:54,680 --> 00:10:55,890
Da, datele de costuri spatiu alb.

230
00:10:55,890 --> 00:10:56,598
Ce vrei sa spui?

231
00:10:56,598 --> 00:11:02,250

232
00:11:02,250 --> 00:11:02,979
Da, exact.

233
00:11:02,979 --> 00:11:06,020
Dacă te-a lovit tasta Tab o mulțime sau
bara de spațiu, ia în considerare implicațiile.

234
00:11:06,020 --> 00:11:10,060
Deci, fiecare tasta de pe tastatură este un
[Inaudibil] reprezentate ca un octet.

235
00:11:10,060 --> 00:11:14,560
>> Deci presupun că Mark sau la oricare dintre devs
aceste zile lovește bara de spațiu doar o singură dată

236
00:11:14,560 --> 00:11:17,899
pe această pagină HTML care
reprezintă pagina de start Facebook.

237
00:11:17,899 --> 00:11:19,690
Și Facebook are o mulțime
de utilizatori în aceste zile.

238
00:11:19,690 --> 00:11:24,030
Deci să presupunem că pagina de start Facebook
este vizitat de un miliard de oameni de azi.

239
00:11:24,030 --> 00:11:27,020
Și cineva de la Facebook are
a lovit bara de spațiu doar o singură dată.

240
00:11:27,020 --> 00:11:29,890
>> Deci, un octet suplimentar,
un miliard de cereri,

241
00:11:29,890 --> 00:11:32,790
cu cât mai mult de date este Facebook
transferarea pe internet

242
00:11:32,790 --> 00:11:37,160
pentru că cineva a lovit
SPAȚIU pe tastatura lui sau ei?

243
00:11:37,160 --> 00:11:41,660
Un miliard de bytes, sau unul gigabyte de
datele sunt trimise de pe serverele Facebook

244
00:11:41,660 --> 00:11:43,626
la oameni în jurul valorii de
lume pentru nici un motiv bun.

245
00:11:43,626 --> 00:11:44,750
Acum, asta e doar un spațiu.

246
00:11:44,750 --> 00:11:48,866
>> Imaginați-vă dacă am curăța de fapt acest lucru
lucru și-l indentat și a adăugat

247
00:11:48,866 --> 00:11:50,990
o mulțime de spațiu alb și
de caractere tab și spații,

248
00:11:50,990 --> 00:11:53,656
ajungi gigaocteți de cheltuieli,
dacă nu Terra bytes mai mult spațiu.

249
00:11:53,656 --> 00:11:56,640
Și astfel de super comune în
lumea actuală de dezvoltare web

250
00:11:56,640 --> 00:11:58,950
este de a minify codul.

251
00:11:58,950 --> 00:12:01,280
Și vom vedea în cele din urmă
cum s-ar putea face acest lucru.

252
00:12:01,280 --> 00:12:04,630
>> Dar astăzi, vom începe să scrie cod
Asta este de fapt care poate fi citit de noi, oamenii.

253
00:12:04,630 --> 00:12:10,120
Se pare, însă, dacă te duci înapoi
la acest instrument în Chrome Inspectați Element,

254
00:12:10,120 --> 00:12:12,030
Anterior, am fost pe fila Rețea.

255
00:12:12,030 --> 00:12:15,430
Se pare că, dacă te duci la
fila Elemente, ceea ce vedeți de fapt

256
00:12:15,430 --> 00:12:19,230
este Chrome imprimat destul de
Versiunea de aceeași HTML.

257
00:12:19,230 --> 00:12:20,640
Deci l-am deobfuscated.

258
00:12:20,640 --> 00:12:22,472
Deci, este nu se potrivesc pentru un calculator.

259
00:12:22,472 --> 00:12:24,430
Și acum poți de fapt
faceți clic în jurul și să înceapă

260
00:12:24,430 --> 00:12:27,630
pentru a vedea ierarhia că este o pagină web.

261
00:12:27,630 --> 00:12:28,780
Deci, hai sa facem acest lucru de fapt.

262
00:12:28,780 --> 00:12:32,120
Am de gând să merg mai departe și deschide pe
Mac-ul meu un program numit editare de text.

263
00:12:32,120 --> 00:12:35,490
Și reamintească faptul că aceasta este doar
un program de text super-simplu.

264
00:12:35,490 --> 00:12:37,490
Windows are notepad.exe.

265
00:12:37,490 --> 00:12:39,820
Și am de gând să Verbatim
tastați următoarele.

266
00:12:39,820 --> 00:12:44,650
Tip doc HTML, suport deschis
HTML, închis suport HTML,

267
00:12:44,650 --> 00:12:49,000
avem capul paginii de aici,
la sfârșitul capul paginii de aici,

268
00:12:49,000 --> 00:12:52,310
un titlu va fi ca, salut lume.

269
00:12:52,310 --> 00:12:56,660
>> Și apoi aici, avem nevoie de
corpul paginii web.

270
00:12:56,660 --> 00:12:58,050
Caroserie închisă.

271
00:12:58,050 --> 00:13:00,700
Și apoi aici, salut lume.

272
00:13:00,700 --> 00:13:01,270
In regula.

273
00:13:01,270 --> 00:13:03,350
Așa că am scris o pagină de web super rapid.

274
00:13:03,350 --> 00:13:06,675
Am de gând să-l salvați ca
hello.html pe desktop-ul meu.

275
00:13:06,675 --> 00:13:09,050
My Mac o să plâng,
gândindu-mă că, așteptați un minut,

276
00:13:09,050 --> 00:13:11,091
acest lucru este un fișier text, faceți
vrei să-i spunem .txt?

277
00:13:11,091 --> 00:13:13,300
Dar nu, vreau să folosesc punct HTML.

278
00:13:13,300 --> 00:13:16,140
>> Și atunci ce e frumos dacă am
doar dublu clic acest fișier,

279
00:13:16,140 --> 00:13:18,600
hello.html, aici e pagina mea de web.

280
00:13:18,600 --> 00:13:22,564
Din păcate, eu sunt
singura persoană din lume

281
00:13:22,564 --> 00:13:23,980
care pot vizita aceasta pagina acum.

282
00:13:23,980 --> 00:13:26,734
Pentru că în cazul în care nu-l trăiesc aparent?

283
00:13:26,734 --> 00:13:27,650
E pe Mac mea, nu?

284
00:13:27,650 --> 00:13:28,470
Ceea ce este inutil.

285
00:13:28,470 --> 00:13:30,390
Ca nimeni din această cameră
să nu mai vorbim pe internet

286
00:13:30,390 --> 00:13:31,598
Puteți vizita, de fapt pagina.

287
00:13:31,598 --> 00:13:33,820
Așa că astăzi, avem nevoie pentru a
introduce un alt element.

288
00:13:33,820 --> 00:13:36,720
>> Și pentru a face acest lucru, am de gând să
mergeți mai departe și să se deschidă nor 9.

289
00:13:36,720 --> 00:13:40,090
Deci nor 9 este, desigur, un
cloud service-- bazat CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- care are toate de spații de lucru noastre
care rulează undeva pe internet.

291
00:13:44,890 --> 00:13:48,330
Și asta înseamnă că toate fișierele noastre
sunt deja accesibile publicului.

292
00:13:48,330 --> 00:13:49,830
Așa că hai să mergem mai departe și de a face acest lucru.

293
00:13:49,830 --> 00:13:53,670
Am de gând să merg mai departe și
a crea un nou fișier NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Am de gând să-l salvați ca înainte
ca hello.html și faceți clic pe Salvare.

295
00:13:58,819 --> 00:14:01,860
Și acum doar pentru a economisi timp, am de gând
a merge mai departe și să copiați inserați acest cod

296
00:14:01,860 --> 00:14:03,470
mai degrabă decât o reintroduceți.

297
00:14:03,470 --> 00:14:04,550
Și salvați-l.

298
00:14:04,550 --> 00:14:07,550
Și așa acum am un
fișier hello.html numit.

299
00:14:07,550 --> 00:14:09,710
Dar cum am de fapt
deschideți-l ca o pagina web?

300
00:14:09,710 --> 00:14:14,120
Ei bine, se pare că construit în a CS50
IDE nu este doar un compilator ca zăngăni

301
00:14:14,120 --> 00:14:16,670
și un debugger ca GDB și
ciorchini de alte programe,

302
00:14:16,670 --> 00:14:21,140
există de fapt o cu drepturi depline
server web care rulează în CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Voi toți, adică,
au server de web proprie.

304
00:14:23,900 --> 00:14:26,850
Și un server de web este doar o bucată
de software al cărui scop în viață

305
00:14:26,850 --> 00:14:28,220
este de a servi pagini web.

306
00:14:28,220 --> 00:14:32,490
Pentru a asculta pentru cereri de la browsere și
răspunde cu mici plicuri virtuale

307
00:14:32,490 --> 00:14:35,290
de care este în interiorul
conținut care am scris.

308
00:14:35,290 --> 00:14:38,372
Deci, acest server web este
sursă de fapt, liberă și deschisă.

309
00:14:38,372 --> 00:14:40,830
În cazul în care open source înseamnă doar
software-ul care altcineva a

310
00:14:40,830 --> 00:14:43,480
scris că toți dintre noi poate
se vedea de fapt și de a descărca și chiar

311
00:14:43,480 --> 00:14:44,780
schimba codul sursă.

312
00:14:44,780 --> 00:14:46,150
Și se numește Apache.

313
00:14:46,150 --> 00:14:51,450
>> Și am făcut un pic mai ușor de
utilizați în CS50IDE de numindu-l Apache 50.

314
00:14:51,450 --> 00:14:53,780
Astfel încât să poată de fapt
înțelege următoarele.

315
00:14:53,780 --> 00:14:56,560
Am de gând să spun Apache 50 începutul.

316
00:14:56,560 --> 00:14:58,910
Și apoi am de gând doar să spun punct.

317
00:14:58,910 --> 00:15:01,080
Si vom vedea ceva oarecum
Mesajul arcane spune

318
00:15:01,080 --> 00:15:04,640
stabilirea Apache documentul [? grup?]
la domiciliu, ubuntu, indiferent că este,

319
00:15:04,640 --> 00:15:05,770
slash spațiu de lucru.

320
00:15:05,770 --> 00:15:08,280
Incepand server web
Apache 2 cu succes.

321
00:15:08,280 --> 00:15:11,330
>> Deci, pe scurt, m-am
doar au împins un buton

322
00:15:11,330 --> 00:15:18,000
și se întoarse pe un server web care e acum
asculta pe internet pe portul TCP

323
00:15:18,000 --> 00:15:20,587
80 la o anumită adresă.

324
00:15:20,587 --> 00:15:22,420
Și se spune aici, și
acest lucru se va schimba în funcție

325
00:15:22,420 --> 00:15:26,550
pe numele de utilizator și de alți factori,
dar observa acum, dacă mă faceți clic pe acest,

326
00:15:26,550 --> 00:15:30,211
IDE50 punct jharvard și așa și
astfel, observați că în tot acest timp

327
00:15:30,211 --> 00:15:31,960
In ultimii
săptămâni, s-ar putea avea

328
00:15:31,960 --> 00:15:35,200
observat că propria numele de utilizator
este încorporat în dreapta sus

329
00:15:35,200 --> 00:15:37,130
colț de CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> Și că, de fapt a fost tot acest
timp, adresa la care puteți

331
00:15:41,050 --> 00:15:43,574
vizita toate fișierele prin intermediul web.

332
00:15:43,574 --> 00:15:45,990
Până în prezent, nu a contat,
pentru că în C, ai în general

333
00:15:45,990 --> 00:15:48,073
doresc lucruri care rulează într-un
terminale, nu pe web.

334
00:15:48,073 --> 00:15:50,800
Dar astăzi, vom începe
scrierea de cod bazat pe web

335
00:15:50,800 --> 00:15:53,350
pe care le vrem
accesibil la URL-uri publice.

336
00:15:53,350 --> 00:15:56,100
Deci, ce am de gând să
face este să faceți clic această adresă URL.

337
00:15:56,100 --> 00:16:00,880
>> Și observați că văd o destul de
index urât, o listă director,

338
00:16:00,880 --> 00:16:04,090
dar ceea ce fișier sare la tine, probabil?

339
00:16:04,090 --> 00:16:05,210
Hello.html.

340
00:16:05,210 --> 00:16:07,870
Asta pentru că am salvat
fișierul în spațiul de lucru meu.

341
00:16:07,870 --> 00:16:12,310
Și ceea ce am spus Apache serverul de web
este sa te uiti in directorul spațiului de lucru a lui David.

342
00:16:12,310 --> 00:16:15,300
Și să Oricine din
lumea vedea aceste fișiere.

343
00:16:15,300 --> 00:16:19,050
>> Și într-adevăr, dacă am acum
click pe hello.html,

344
00:16:19,050 --> 00:16:22,180
Văd în această filă exact acest fișier.

345
00:16:22,180 --> 00:16:26,430
Acum observați, cloud 9 face
ceva un pic de ajutor pentru noi.

346
00:16:26,430 --> 00:16:29,480
În cadrul IDE CS50, observa există
brusc o bara de adrese.

347
00:16:29,480 --> 00:16:33,690
Asta pentru că, chiar dacă suntem
folosind Chrome pentru a vizita CS50IDE,

348
00:16:33,690 --> 00:16:37,940
interior de CS50IDE este proprie
versiune a unui browser web, chiar acum.

349
00:16:37,940 --> 00:16:40,820
Și așa, mai degrabă decât
complica lucrurile ca atare,

350
00:16:40,820 --> 00:16:42,955
Am de gând să merg mai departe
și doar să copiați acest URL.

351
00:16:42,955 --> 00:16:45,330
Am de gând să merg mai departe și doar
deschide fereastra mea proprie Chrome.

352
00:16:45,330 --> 00:16:47,800
Deci nu e nici o magie aici, nu CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Mă duc pentru a lipi literalmente
meu J Harvard URL și apăsați pe Enter.

354
00:16:51,800 --> 00:16:54,750
Și voila, acum, și
în teorie, toată lumea

355
00:16:54,750 --> 00:16:57,700
pe internet, în cazul în care am configurat
permisiuni corespunzator,

356
00:16:57,700 --> 00:16:58,720
pot vizita acest fișier.

357
00:16:58,720 --> 00:17:03,230
Și așa acum, dacă i-am spus
hello.html, Voila, acolo

358
00:17:03,230 --> 00:17:06,366
este pagina mea web incredibil de underwhelming.

359
00:17:06,366 --> 00:17:07,740
Deci, hai sa facem o verificare bun-simț rapid.

360
00:17:07,740 --> 00:17:09,710
Pentru că toate că
este set conceptual sus.

361
00:17:09,710 --> 00:17:13,180
Și nu am de fapt, într-adevăr
te-a învățat cum să scrie HTML în sine.

362
00:17:13,180 --> 00:17:16,084
Orice întrebări până acum
pe ceea ce se sa întâmplat?

363
00:17:16,084 --> 00:17:18,549

364
00:17:18,549 --> 00:17:19,049
Da.

365
00:17:19,049 --> 00:17:24,290

366
00:17:24,290 --> 00:17:25,800
Are CS50 proprii aceste pagini de web?

367
00:17:25,800 --> 00:17:26,460
In ce sens?

368
00:17:26,460 --> 00:17:28,947

369
00:17:28,947 --> 00:17:29,530
Buna intrebare.

370
00:17:29,530 --> 00:17:32,429
Deci, lui CS50 detine CS50.io.

371
00:17:32,429 --> 00:17:33,970
Am cumpărat într-adevăr că numele de domeniu.

372
00:17:33,970 --> 00:17:37,240
Și prin natura voi
logare în CS50IDE,

373
00:17:37,240 --> 00:17:39,270
voi toți obține ceea ce se numește un subdomeniu.

374
00:17:39,270 --> 00:17:46,840
>> Deci IDE50-Malan, sau IDE50-Rob.CS50.io,
asta e adresa ta unică în cadrul

375
00:17:46,840 --> 00:17:47,730
numele nostru de domeniu.

376
00:17:47,730 --> 00:17:50,850
Deci, în scopul cursului,
aveți propria adresă unică.

377
00:17:50,850 --> 00:17:55,150
Dar am simplificat lucrurile prin
cumpararea domeniului de nivel superior, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O și apoi toți ceilalți este
în interiorul că, ca să spunem așa.

379
00:17:58,050 --> 00:17:59,890
Și ne vom întoarce la care
în câteva săptămâni, probabil,

380
00:17:59,890 --> 00:18:01,930
mai ales la nivel de proiect finală
timp, când unii dintre voi

381
00:18:01,930 --> 00:18:03,596
s-ar putea doriți să obțineți dvs. nume de domeniu propriu.

382
00:18:03,596 --> 00:18:06,270
Este de fapt relativ
simplă.

383
00:18:06,270 --> 00:18:06,770
In regula.

384
00:18:06,770 --> 00:18:07,880
Deci, hai sa facem acest lucru acum.

385
00:18:07,880 --> 00:18:11,910
Am de gând să se întoarcă în
CS50IDE, în cazul în care dosarul meu acum,

386
00:18:11,910 --> 00:18:14,710
hello.html, nu este tot ceea ce interesant.

387
00:18:14,710 --> 00:18:17,130
Aș vrea să fac ceva
un pic mai frumos decât asta.

388
00:18:17,130 --> 00:18:19,440
Deci, am de gând să fac ceva de genul asta.

389
00:18:19,440 --> 00:18:21,510
Lasă-mă să paragraphs.html deschis.

390
00:18:21,510 --> 00:18:23,560
Deci, acesta este un fișier care am scris în avans.

391
00:18:23,560 --> 00:18:26,480
În partea de sus a acesteia, cum ar fi
întotdeauna, avem comentarii.

392
00:18:26,480 --> 00:18:28,730
Dar, în HTML, comentarii
uite un pic diferit.

393
00:18:28,730 --> 00:18:33,270
On line trei și linia 14, vă
vezi sintaxa pentru a începe un comentariu

394
00:18:33,270 --> 00:18:34,020
și se încheie un comentariu.

395
00:18:34,020 --> 00:18:36,820
>> Dar nici unul din lucrurile de la
între aspectele funcțional.

396
00:18:36,820 --> 00:18:40,250
E doar o notă la un
uman ce se întâmplă aici.

397
00:18:40,250 --> 00:18:43,040
Și, așa cum un bun-simț rapid
verifica, dacă aș defilați în jos,

398
00:18:43,040 --> 00:18:46,820
ceea ce este evident noul
tag că am introdus?

399
00:18:46,820 --> 00:18:52,130
Tag-urile până acum le-am vazut sunt deschise
suport HTML, cap, titlu, și a corpului.

400
00:18:52,130 --> 00:18:54,400
Dar ceea ce este, evident, noi acum?

401
00:18:54,400 --> 00:18:55,200
>> Da, așa p.

402
00:18:55,200 --> 00:18:57,320
Tag-ul p sau punctul tag.

403
00:18:57,320 --> 00:19:01,182
Și apoi am împrumutat niște implicit
Text latin pentru a constitui punctele mele.

404
00:19:01,182 --> 00:19:03,390
Pentru că ceea ce am vrut să
demonstra cum s-ar putea

405
00:19:03,390 --> 00:19:05,859
reprezintă paragrafe de text în HTML.

406
00:19:05,859 --> 00:19:08,400
Și așa mai departe ceea ce începe să se întâmple
aici este că nu există deja

407
00:19:08,400 --> 00:19:09,657
un model de dezvoltare.

408
00:19:09,657 --> 00:19:10,990
Și lasă-mă să merg mai departe și a face acest lucru.

409
00:19:10,990 --> 00:19:12,760
Lasă-mă să rândul său, primul off Apache.

410
00:19:12,760 --> 00:19:17,340
Și am de gând să-l spun pentru a se începe
din nou în interiorul sursei de astăzi șapte

411
00:19:17,340 --> 00:19:18,420
director m.

412
00:19:18,420 --> 00:19:20,100
Așa că am acces la tot.

413
00:19:20,100 --> 00:19:22,230
>> Și acum, dacă mă întorc la
această listare director,

414
00:19:22,230 --> 00:19:24,846
observați Văd fiecare fișier din ziua de azi.

415
00:19:24,846 --> 00:19:26,720
Și veți vedea în
următor set problemă, vom

416
00:19:26,720 --> 00:19:28,594
vă dau instrucțiuni
pentru a face exact acest lucru.

417
00:19:28,594 --> 00:19:35,210
Dacă am deschis paragraphs.html, aceasta ar putea
precum și arata ca un limbaj de programare

418
00:19:35,210 --> 00:19:36,970
pentru tine, dacă nu vorbești sau de a citi latina.

419
00:19:36,970 --> 00:19:40,525
Dar acest lucru este doar trei paragrafe
de text care sunt marcate în HTML.

420
00:19:40,525 --> 00:19:43,100
>> Și observați alineatul
pauzele dintre ele.

421
00:19:43,100 --> 00:19:46,400
Pentru că se pare,
si chiar daca

422
00:19:46,400 --> 00:19:49,210
ar putea fi înclinați să facă acest lucru,
în timp ce în lumea reală,

423
00:19:49,210 --> 00:19:51,370
dacă doriți să puneți linia
pauzele dintre lucruri,

424
00:19:51,370 --> 00:19:55,680
s-ar putea pur și simplu
face acest lucru și a lovit Save.

425
00:19:55,680 --> 00:19:59,460
Și acum, dacă aș reîncărcați aici, aviz
că totul doar estompeaza împreună

426
00:19:59,460 --> 00:20:01,100
într-o singură pată de text.

427
00:20:01,100 --> 00:20:03,570
Deoarece HTML este un fel de un limbaj prost.

428
00:20:03,570 --> 00:20:07,230
>> Este destinat a fi utilizat într-o astfel
un mod care browser-ul va numai

429
00:20:07,230 --> 00:20:09,920
face în mod explicit ceea ce-l spun să faci.

430
00:20:09,920 --> 00:20:12,890
Deci, dacă nu-l spun
da-mi un nou alineat,

431
00:20:12,890 --> 00:20:14,569
nu te duci sa vezi un nou alineat.

432
00:20:14,569 --> 00:20:16,360
Și, de fapt, ceea ce
Browser-ul va face

433
00:20:16,360 --> 00:20:20,020
este chiar dacă te-a lovit Enter,
să zicem nou și din nou

434
00:20:20,020 --> 00:20:23,190
și din nou, se deplasează în acest fel de text
în jos pe ecran și apoi salvați

435
00:20:23,190 --> 00:20:26,610
și apoi reîncărcați, browser-ul va
să se prăbușească toate acestea spațiu alb

436
00:20:26,610 --> 00:20:29,021
într-un singur spațiu, vizibil.

437
00:20:29,021 --> 00:20:29,520
In regula.

438
00:20:29,520 --> 00:20:30,869
Deci, asta e punctul tag.

439
00:20:30,869 --> 00:20:32,910
Și așa mai departe ceea ce este modelul
care este în curs de dezvoltare aici?

440
00:20:32,910 --> 00:20:37,450
Ei bine, se pare a fi cazul în care
HTML este vorba de a începe un tag

441
00:20:37,450 --> 00:20:38,460
și se încheie o etichetă.

442
00:20:38,460 --> 00:20:39,300
Și ceea ce este o etichetă?

443
00:20:39,300 --> 00:20:41,160
Ei bine, e doar o bucată de sintaxă.

444
00:20:41,160 --> 00:20:44,400
Deschis suport, un cuvânt cheie,
suport închis, este o etichetă.

445
00:20:44,400 --> 00:20:45,510
Sau de a începe tag.

446
00:20:45,510 --> 00:20:48,590
Și apoi atunci când sunteți
făcut să te exprimi,

447
00:20:48,590 --> 00:20:52,300
la fel ca în ai terminat cu paragraf
ce faci ca să spunem așa opus.

448
00:20:52,300 --> 00:20:55,480
Dar opusul nu este destul de în spate.

449
00:20:55,480 --> 00:21:00,630
>> Tu pur și simplu prefixul aceeași etichetă anii
nume cu un slash înainte ca aceasta.

450
00:21:00,630 --> 00:21:01,130
In regula.

451
00:21:01,130 --> 00:21:02,570
Deci, nu tot ceea ce interesant.

452
00:21:02,570 --> 00:21:05,270
Și, de fapt, nu suntem ceea ce face
web toate că mai interesant.

453
00:21:05,270 --> 00:21:07,630
Ce se întâmplă dacă vreau să fac
lucruri mai mari și mai îndrăznețe?

454
00:21:07,630 --> 00:21:11,780
Deci, se dovedește că aici este un exemplu
în headings.html, în cazul în care în corpul meu,

455
00:21:11,780 --> 00:21:17,280
Am o etichetă H1, H2, H3,
patru, cinci, sau șase, toate acestea

456
00:21:17,280 --> 00:21:18,310
par destul de arcane.

457
00:21:18,310 --> 00:21:21,010
Dar dacă mă duc deschide acest
exemplu, să aruncăm o privire.

458
00:21:21,010 --> 00:21:22,490
Headings.html.

459
00:21:22,490 --> 00:21:27,030
>> Deci, în mod implicit browsere pot da textul
care este mare si indrazneata de dimensiuni disparate.

460
00:21:27,030 --> 00:21:28,070
H1 este mare.

461
00:21:28,070 --> 00:21:31,240
H6 este mai mic și apoi
orice altceva în între.

462
00:21:31,240 --> 00:21:34,170
Așa că e interesant, dar încă
nu chiar pe web știu.

463
00:21:34,170 --> 00:21:36,870
Ce se întâmplă dacă vrem să am
ceva ca o listă. .

464
00:21:36,870 --> 00:21:40,190
Deci, aici este o listă cu marcatori de
trei case Harvard lui.

465
00:21:40,190 --> 00:21:41,600
>> Cum ai merge despre a face acest lucru?

466
00:21:41,600 --> 00:21:45,410
Ei bine, să ia o privire la list.html.

467
00:21:45,410 --> 00:21:47,870
Și aici, vom vedea o
pic de funkiness

468
00:21:47,870 --> 00:21:49,630
dar să ia în considerare ceea ce se întâmplă.

469
00:21:49,630 --> 00:21:56,182
Deci, bazat pe ceea ce tocmai ai văzut,
UL standuri pentru lista neordonata.

470
00:21:56,182 --> 00:21:57,640
Lista neordonata înseamnă doar marcatori.

471
00:21:57,640 --> 00:21:58,431
Nu sunt numere.

472
00:21:58,431 --> 00:22:01,850
Există, de asemenea ceva numit un
Lista, care este un OL la etichetă ordonat.

473
00:22:01,850 --> 00:22:05,350
Apoi LI, element din listă este tot ce înseamnă.

474
00:22:05,350 --> 00:22:07,790
>> Și atât de în mod automat
Numerele totul pentru tine.

475
00:22:07,790 --> 00:22:11,270
Dar, din nou, toate de indentare mele
și spațiu alb este doar de dragul meu.

476
00:22:11,270 --> 00:22:13,050
Browser-ul nu e
de fapt de gând să aibă grijă.

477
00:22:13,050 --> 00:22:16,670
Deci, chiar dacă nu a putut
face acest lucru, doar pentru a fi clar,

478
00:22:16,670 --> 00:22:19,880
nu ar trebui să, chiar dacă
browser-ul va mai

479
00:22:19,880 --> 00:22:22,130
putea să-l înțeleagă foarte bine.

480
00:22:22,130 --> 00:22:24,590
Am lovit reload în mea
browser-ul, eu clic reload

481
00:22:24,590 --> 00:22:26,760
și nici o schimbare se intampla
deoarece browser-ul încă

482
00:22:26,760 --> 00:22:29,550
face exact ceea ce am spus să fac.

483
00:22:29,550 --> 00:22:30,050
>> In regula.

484
00:22:30,050 --> 00:22:31,340
Deci, aceasta este tot doar text.

485
00:22:31,340 --> 00:22:33,730
Acum, haideți să facem ceva mai interesant.

486
00:22:33,730 --> 00:22:36,660
Am de gând să merg mai departe și
imprumuta o parte din acest cod HTML.

487
00:22:36,660 --> 00:22:40,910
Am de gând să merg mai departe și
a crea un nou fișier aici.

488
00:22:40,910 --> 00:22:43,370
Și vom numi acest rick.html.

489
00:22:43,370 --> 00:22:46,190

490
00:22:46,190 --> 00:22:48,916
Avem disproporționat
ceva second-hand

491
00:22:48,916 --> 00:22:51,290
numit o rola Rick în acest
clasă în acest an, nu știu,

492
00:22:51,290 --> 00:22:53,880
aceasta sa întâmplat organic.

493
00:22:53,880 --> 00:22:55,397
>> Și acum e scăpat de sub control.

494
00:22:55,397 --> 00:22:56,730
Așa că am doar de gând să merg cu ea.

495
00:22:56,730 --> 00:22:59,700
Și dacă mă duc la Google
Imagini și Rick Astley.

496
00:22:59,700 --> 00:23:02,450

497
00:23:02,450 --> 00:23:06,170
Dacă nu știu de ce facem
acest, citit doar pe Wikipedia.

498
00:23:06,170 --> 00:23:11,520
De fiecare dată când ați făcut clic pe link-ul,
cineva a fost râs undeva.

499
00:23:11,520 --> 00:23:14,860
Și lasă-mă să merg acolo ahead--
mergem, să vezi această imagine.

500
00:23:14,860 --> 00:23:16,750
>> Deci, aici avem o
imagine în Google Images.

501
00:23:16,750 --> 00:23:19,390
Și să presupunem că acest lucru este
rezonabil peste tot pe internet.

502
00:23:19,390 --> 00:23:22,570
Deci, am de gând să-și asume că e bine pentru mine
pentru a pune de fapt acest lucru în pagina mea de web.

503
00:23:22,570 --> 00:23:24,820
Am de gând să merg mai departe
și copiați URL-ul imaginii.

504
00:23:24,820 --> 00:23:28,600
Și acum, dacă mă întorc la Cloud
9, să vedem ce pot face aici.

505
00:23:28,600 --> 00:23:30,630
Deci, aici este doar o pagină web.

506
00:23:30,630 --> 00:23:39,020
Acest lucru este Rick Astley, haha,
Am de gând să merg acum înapoi

507
00:23:39,020 --> 00:23:43,510
la browser-ul meu, reîncărcați, și interesant.

508
00:23:43,510 --> 00:23:44,530
>> În cazul în care este Rick?

509
00:23:44,530 --> 00:23:46,050
Deci, lasă-mă să văd ce sa întâmplat.

510
00:23:46,050 --> 00:23:49,114
De fapt, am de gând să
pretind ca n-am făcut asta.

511
00:23:49,114 --> 00:23:50,280
[Inaudibil] l-au pus aici.

512
00:23:50,280 --> 00:23:52,520
Vom reveni la asta într-un moment.

513
00:23:52,520 --> 00:23:54,200
Deci, aici e rick.html.

514
00:23:54,200 --> 00:23:56,070
Așa că nu-i Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Deci, se dovedește putem
de fapt, adauga-l aici.

516
00:23:59,680 --> 00:24:00,830
Aceasta este Rick Astley.

517
00:24:00,830 --> 00:24:06,680
Am de gând să spun da-mi o imagine a cărei
sursa este adresa URL doar am copiat, care

518
00:24:06,680 --> 00:24:09,110
aparent este un fericit
ceva ziua de nastere sau alte.

519
00:24:09,110 --> 00:24:13,280
>> Iar acum am de gând să
închide tag-ul de genul asta.

520
00:24:13,280 --> 00:24:15,170
Deci, acest lucru este de ambalaj foarte mult timp.

521
00:24:15,170 --> 00:24:17,740
Dar observați că tot ce am
făcut este imagine placuta deschis,

522
00:24:17,740 --> 00:24:20,270
sursă cu un atribut de acest lucru.

523
00:24:20,270 --> 00:24:21,530
Și e un URL foarte lung.

524
00:24:21,530 --> 00:24:23,720
Iar la sfârșit, observa acest lucru.

525
00:24:23,720 --> 00:24:29,530
Slash ce am făcut suport în unghi
în loc de, ca orice alt tag-ul,

526
00:24:29,530 --> 00:24:33,590
având un suport deschis,
IMG, închis suport?

527
00:24:33,590 --> 00:24:37,040
Doar să ia o presupunere, chiar dacă
nu au nici un fel de familiaritate

528
00:24:37,040 --> 00:24:40,410
cu HTML înainte.

529
00:24:40,410 --> 00:24:42,710
>> Deci, este modul în care aceasta se închide
comanda, dar de ce

530
00:24:42,710 --> 00:24:45,850
nu-l face cu adevărat intuitiv nu
sens de a face ceva un pic mai mult

531
00:24:45,850 --> 00:24:48,820
verbose ca aproape imagine?

532
00:24:48,820 --> 00:24:51,400
Da.

533
00:24:51,400 --> 00:24:52,000
Da.

534
00:24:52,000 --> 00:24:55,620
Doar semantic, nu e nici un sens de
incepand o imagine și se încheie o imagine,

535
00:24:55,620 --> 00:24:56,870
este fie acolo sau nu este.

536
00:24:56,870 --> 00:25:00,960
Deci, nu are sens să lase un gol
pentru altceva în interiorul unei imagini.

537
00:25:00,960 --> 00:25:02,010
Tu chiar nu se poate face asta.

538
00:25:02,010 --> 00:25:03,720
Și așa sintaxa
ar fi, în general, doar

539
00:25:03,720 --> 00:25:07,910
pentru a face slash în interiorul
de tag-ul deschis sau tag-ul de start

540
00:25:07,910 --> 00:25:09,020
și apoi a lovit Salvare.

541
00:25:09,020 --> 00:25:13,350
>> Deci, dacă acum reîncărcați acest fișier, acum
Am un bun pagină web de gătit aici.

542
00:25:13,350 --> 00:25:15,100
Și am putea cu siguranță
enerva într-adevăr oameni

543
00:25:15,100 --> 00:25:17,010
prin încorporarea în schimb
ca un link YouTube.

544
00:25:17,010 --> 00:25:19,350
Și, de fapt, în orice moment
ai plecat vreodată la YouTube,

545
00:25:19,350 --> 00:25:22,190
și lasă-mă de fapt accidental
Rick mă rostogolesc aici.

546
00:25:22,190 --> 00:25:25,770
Deci, Rick rola.

547
00:25:25,770 --> 00:25:29,592
Deci, Rick roll-- am de gând să merg aici.

548
00:25:29,592 --> 00:25:31,900
>> [MUSIC JOC]

549
00:25:31,900 --> 00:25:33,730
>> OK, o persoană a placut asta.

550
00:25:33,730 --> 00:25:37,270
Deci observați tot acest timp, daca
faceți clic pe link Share, vă desigur

551
00:25:37,270 --> 00:25:41,390
obține URL-ul pe care le puteți de fapt
încorpora într-un e-mail sau o imagine medico-legale

552
00:25:41,390 --> 00:25:43,730
sau într-o problemă sau stabilit într-un diapozitiv.

553
00:25:43,730 --> 00:25:49,055
Și acum, dacă în loc să faceți clic pe embed,
observați că în tot acest timp, chestia asta

554
00:25:49,055 --> 00:25:49,680
a fost acolo.

555
00:25:49,680 --> 00:25:50,910
Am de gând să merg mai departe și să copiați acest lucru.

556
00:25:50,910 --> 00:25:54,000
>> Și astfel încât să putem vedea mai bine, eu sunt
O să-l lipiți în editorul meu de text.

557
00:25:54,000 --> 00:25:55,860
Observați că această ceea ce
YouTube a fost spui că.

558
00:25:55,860 --> 00:25:57,693
De fiecare dată când vizitați un
Video de pe YouTube, dacă

559
00:25:57,693 --> 00:26:00,410
doriți să încorporați video pe dvs.
pagină web, pur și simplu apuca acest lucru.

560
00:26:00,410 --> 00:26:03,350
Astfel încât acesta este încă un alt
Tag-ul HTML numit iframe.

561
00:26:03,350 --> 00:26:04,590
Sau un cadru în linie.

562
00:26:04,590 --> 00:26:08,680
Deci, se pare prea un pic mai mult
complexă decât toate celelalte.

563
00:26:08,680 --> 00:26:11,950
Deci, se dovedește că imaginea
tag-ul și se pare că eticheta iframe

564
00:26:11,950 --> 00:26:13,370
ia ceea ce se numesc atribute.

565
00:26:13,370 --> 00:26:15,710
>> Și aceasta este o altă
bucată de sintaxă în HTML.

566
00:26:15,710 --> 00:26:19,240
În plus față de etichetă anilor
numele, deschis suport nume tag-ul,

567
00:26:19,240 --> 00:26:23,780
puteți controla comportamentul tag-ul
de a avea o grămadă de atribut

568
00:26:23,780 --> 00:26:24,860
este egal cu valoarea.

569
00:26:24,860 --> 00:26:26,290
Atribut este egal cu valoarea.

570
00:26:26,290 --> 00:26:28,100
Și astfel, de exemplu,
YouTube ne spune

571
00:26:28,100 --> 00:26:31,990
dacă doriți ca lățimea acest videoclip
să fie 420 pixeli și înălțimea

572
00:26:31,990 --> 00:26:35,470
să fie 315 pixeli, care este
cum ai exprima în HTML.

573
00:26:35,470 --> 00:26:38,480
>> Sursa video se întâmplă
să fie că URL-ul lung YouTube

574
00:26:38,480 --> 00:26:40,830
și apoi alte chestii
ca cadru de frontieră este zero,

575
00:26:40,830 --> 00:26:43,500
astfel încât, probabil, înseamnă că e
nu de frontieră în jurul valorii de lucru.

576
00:26:43,500 --> 00:26:45,450
Permiteți ecran complet, probabil,
înseamnă că utilizatorul

577
00:26:45,450 --> 00:26:47,840
posibilitatea să faceți clic pe un buton și
de fapt, ecran complet video.

578
00:26:47,840 --> 00:26:52,870
Deci, dacă eu chiar vreau să fiu
impresionant aici, în Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
mai degrabă decât a utiliza eticheta de imagine, să
mi șterge că, în loc să inserați acest.

580
00:26:58,490 --> 00:27:00,810
Și acum reîncărca.

581
00:27:00,810 --> 00:27:02,500
Și acum aici vom merge din nou.

582
00:27:02,500 --> 00:27:04,979

583
00:27:04,979 --> 00:27:06,020
Bine, asta e de ajuns.

584
00:27:06,020 --> 00:27:08,970
Bine, așa că am să încerc
greu să nu faci asta din nou.

585
00:27:08,970 --> 00:27:11,400
Deci, ce sunt unele dintre cele mai takeaways aici?

586
00:27:11,400 --> 00:27:15,130
Deci HTML, la fel de urât ca aceste pagini de web
sunt, este, de fapt destul de simplu.

587
00:27:15,130 --> 00:27:16,467
Nu este un limbaj de programare.

588
00:27:16,467 --> 00:27:17,550
Ea nu are funcții.

589
00:27:17,550 --> 00:27:18,410
Ea nu are bucle.

590
00:27:18,410 --> 00:27:19,535
Ea nu are condiții.

591
00:27:19,535 --> 00:27:22,900
Tot ce are este zeci de
tag-uri diferite, fiecare dintre care

592
00:27:22,900 --> 00:27:24,620
are zero sau mai multe atribute.

593
00:27:24,620 --> 00:27:27,320
Și, de fapt, ceea ce este distractiv despre
HTML pe măsură ce începe să se scufunde în

594
00:27:27,320 --> 00:27:29,560
este că este de sine docil foarte.

595
00:27:29,560 --> 00:27:32,880
>> Tot ce trebuie este o înțelegere
de cadrul general de HTML.

596
00:27:32,880 --> 00:27:36,510
Ce este o etichetă, ceea ce este un atribut,
cum a face tu configurați de fapt o pagină web

597
00:27:36,510 --> 00:27:37,250
după cum urmează.

598
00:27:37,250 --> 00:27:40,720
Și orice altceva este de fapt rezultatul
de a privi într-o referință on-line

599
00:27:40,720 --> 00:27:43,080
sau googling cum se face unele
tehnici sau cum am văzut,

600
00:27:43,080 --> 00:27:45,371
uita la sursă Facebook
cod, se uită la un site web

601
00:27:45,371 --> 00:27:48,710
care vă place la el e codul sursă și
intelegerea modului dezvoltatorii de acolo

602
00:27:48,710 --> 00:27:50,550
de fapt, a pus lucrurile.

603
00:27:50,550 --> 00:27:52,180
>> Astfel încât să putem face imagini la fel de bine.

604
00:27:52,180 --> 00:27:53,994
Și, de fapt, am făcut-o în urmă cu un moment.

605
00:27:53,994 --> 00:27:55,410
Lasă-mă să merg mai departe și doar vă arăt.

606
00:27:55,410 --> 00:27:56,770
Iată câteva mostre de cod.

607
00:27:56,770 --> 00:27:58,380
Dacă doriți vreodată să vadă grumpy cat.

608
00:27:58,380 --> 00:28:00,620
Deci observați că pot
au o etichetă imagine aici.

609
00:28:00,620 --> 00:28:02,090
Și am un comentariu de mai sus ea.

610
00:28:02,090 --> 00:28:04,490
Am o alternativă
text pentru accesibilitate.

611
00:28:04,490 --> 00:28:07,250
Deci cineva care e cu ajutorul unui ecran
cititor din motive de vedere

612
00:28:07,250 --> 00:28:10,172
poate apoi au de fapt lor
cititor de ecran spun cat morocănos.

613
00:28:10,172 --> 00:28:11,880
Pentru că în cazul în care nu pot
vedea imaginea, ei

614
00:28:11,880 --> 00:28:14,504
cel puțin pot avea computerul lor
spune-le verbal ce este.

615
00:28:14,504 --> 00:28:18,020
Și sursa de care fișier este cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Deci, în fapt, dacă am vrut să
obține inteligent, ceea ce am putea avea done--

617
00:28:22,472 --> 00:28:25,680
Nu promit să meargă la Rick Astley, așa
Am de gând să Google pentru o pisica in loc.

618
00:28:25,680 --> 00:28:28,290
Și dacă mă duc la Google Images
aici, și vom presupune

619
00:28:28,290 --> 00:28:30,040
că aceasta este o imagine de pisica mea.

620
00:28:30,040 --> 00:28:35,070
>> Să presupunem că am avea un control apasat
sau chiar făcut clic pe acest lucru, accidental

621
00:28:35,070 --> 00:28:35,630
înfiorător.

622
00:28:35,630 --> 00:28:40,320
Și am de gând cat.jpeg
pentru a salva pe desktop-ul meu.

623
00:28:40,320 --> 00:28:44,700
Lasă-mă să mă întorc acum la nor 9.

624
00:28:44,700 --> 00:28:48,150
Observați că aici, pot
du-te pentru a încărca fișiere locale.

625
00:28:48,150 --> 00:28:51,530
Și dacă am apuca acest
fișier, cat.jpeg, aviz

626
00:28:51,530 --> 00:28:54,674
că pot să-l trage și
plasați-l în nor 9

627
00:28:54,674 --> 00:28:56,090
și o să țipi la mine aici.

628
00:28:56,090 --> 00:28:59,000
>> Pentru ca ne-am deja
dat un fișier cat.jpeg,

629
00:28:59,000 --> 00:29:01,430
dar este foarte ușor de
apuca o fotografie pe care ați

630
00:29:01,430 --> 00:29:03,220
luate de la Facebook
sau Flickr sau altele asemenea

631
00:29:03,220 --> 00:29:05,678
și de fapt drag and drop-l
în nor 9 și apoi face

632
00:29:05,678 --> 00:29:07,970
o parte din propriul personal
site-ul sau o problemă

633
00:29:07,970 --> 00:29:10,442
set șapte sau opt ca vom vedea în curând.

634
00:29:10,442 --> 00:29:12,150
Și apoi când
vizita în cele din urmă că pisica,

635
00:29:12,150 --> 00:29:16,610
presupunând Am descarcat aceeași pisică,
Notă that-- care a fost adorabil.

636
00:29:16,610 --> 00:29:19,160
>> Ceea ce ar vedea este
ceva de genul asta fata aici.

637
00:29:19,160 --> 00:29:21,810
Deci, fișierele pe care le
referință într-o pagină web

638
00:29:21,810 --> 00:29:26,050
poate fi locală în propria
cont sau de la distanță pe unele alt server

639
00:29:26,050 --> 00:29:29,670
ca în cazul Rick
Astley fotografie un pic în urmă.

640
00:29:29,670 --> 00:29:32,990
Deci, în cazul în care ceea ce else--
altceva putem face aici?

641
00:29:32,990 --> 00:29:34,890
Deci, haideți să aruncăm o privire la următoarele.

642
00:29:34,890 --> 00:29:36,160
Știi ce fel de rece?

643
00:29:36,160 --> 00:29:39,330
>> Am fost până acum făcând
pagini web foarte statice.

644
00:29:39,330 --> 00:29:41,830
Vreau să condimenteze lucrurile, după cum urmează.

645
00:29:41,830 --> 00:29:44,344
Vreau sa fac propria motorul meu de căutare.

646
00:29:44,344 --> 00:29:47,010
Deci, pentru a face un motor de căutare, să
mergeți mai departe și începe să faci acest lucru.

647
00:29:47,010 --> 00:29:52,570
Am de gând să mergeți mai departe și de a crea
un nou fisier numit search.html.

648
00:29:52,570 --> 00:29:54,890
Si ne-am prefabed versiuni on-line.

649
00:29:54,890 --> 00:29:56,027
Hopa.

650
00:29:56,027 --> 00:29:57,610
Nu lipiți în fereastra terminal.

651
00:29:57,610 --> 00:29:58,744
Versiunile prefabricate online.

652
00:29:58,744 --> 00:30:00,160
Și am de gând să încep, după cum urmează.

653
00:30:00,160 --> 00:30:04,490
Deci, aici e începutul
un fișier numit search.html.

654
00:30:04,490 --> 00:30:07,510
Am de gând să-l salvați în
directorul sursă de astăzi.

655
00:30:07,510 --> 00:30:09,079
Am de gând pentru a apela această căutare.

656
00:30:09,079 --> 00:30:10,370
De fapt, vom face mai bine.

657
00:30:10,370 --> 00:30:13,600
CS50 căutare și de fapt de brand-l.

658
00:30:13,600 --> 00:30:17,500
Și acum, am de gând să spun
ceva de genul H1 CS50 Căutare.

659
00:30:17,500 --> 00:30:20,930
Și apoi aici, H2 în curând.

660
00:30:20,930 --> 00:30:23,230
Și doar pentru a recapitula, H1 și
H2 înseamnă respectiv ce?

661
00:30:23,230 --> 00:30:26,750

662
00:30:26,750 --> 00:30:30,320
>> Da, atât de mare și îndrăzneț, și
nu la fel de mare, dar încă îndrăzneț.

663
00:30:30,320 --> 00:30:37,375
Deci, dacă am salva acest lucru și du-te de aici,
să vedem search.html fișier.

664
00:30:37,375 --> 00:30:42,560
Bine, și asta
este right-- [neauzit].

665
00:30:42,560 --> 00:30:46,980

666
00:30:46,980 --> 00:30:49,110
Așteptare.

667
00:30:49,110 --> 00:30:49,945
David este confuz.

668
00:30:49,945 --> 00:30:52,610

669
00:30:52,610 --> 00:30:54,080
Oh, e chiar acolo.

670
00:30:54,080 --> 00:30:54,860
David e un idiot.

671
00:30:54,860 --> 00:30:55,420
BINE.

672
00:30:55,420 --> 00:30:56,660
Deci nu este.

673
00:30:56,660 --> 00:30:58,350
Deci, de căutare CS50 în curând.

674
00:30:58,350 --> 00:31:00,370
Deci, acum, hai să sintetiza
ceea ce am făcut săptămâna trecută.

675
00:31:00,370 --> 00:31:03,400
>> În cazul în care am vorbit despre
de nivel inferior Mecanica HTTP.

676
00:31:03,400 --> 00:31:05,780
Și aceste idei noi
de HTML, care este doar

677
00:31:05,780 --> 00:31:08,890
acest limbaj de marcare în cazul în care
spune unui browser exact ce să facă

678
00:31:08,890 --> 00:31:10,740
și punerea în aplicare propria motorul nostru de cautare.

679
00:31:10,740 --> 00:31:12,520
Deci, în loc de doar
spunând în curând, eu sunt

680
00:31:12,520 --> 00:31:14,810
de gând să introducă
ceva numit o etichetă formular.

681
00:31:14,810 --> 00:31:19,610
Și în această formă, am de gând să
au ceva de genul un câmp de intrare.

682
00:31:19,610 --> 00:31:22,450
>> Și numele această intrare
câmp, am de gând să-l numesc Q.

683
00:31:22,450 --> 00:31:26,240
Și tipul de acest câmp de introducere
Am de gând să spun este doar "text".

684
00:31:26,240 --> 00:31:29,130
Și un câmp de text, cum vom
vezi, este doar o casetă de text.

685
00:31:29,130 --> 00:31:32,830
Și așa nu simt aici pentru a avea
ceva în interiorul-o la acest punct.

686
00:31:32,830 --> 00:31:35,320
Și așa am de gând pur și simplu
pentru a închide tag cu care

687
00:31:35,320 --> 00:31:38,099
oblică chiar în tag-ul în sine.

688
00:31:38,099 --> 00:31:39,890
Și apoi am de gând să
au o altă intrare.

689
00:31:39,890 --> 00:31:43,480
Tipul de intrare este egal cu prezenta.

690
00:31:43,480 --> 00:31:45,320
Și apoi am de gând să
închide acest unul.

691
00:31:45,320 --> 00:31:46,840
>> Iar acum am de gând să mă întorc aici.

692
00:31:46,840 --> 00:31:49,520
Si deja vedem,
deși destul de urât, am

693
00:31:49,520 --> 00:31:52,460
Trebuie începuturile
propria pagina mea de căutare aici.

694
00:31:52,460 --> 00:31:55,150
De fapt, lasă-mă să încerc să
curăța asta un pic.

695
00:31:55,150 --> 00:31:57,330
Se pare că, în
intrare aici, pot avea

696
00:31:57,330 --> 00:31:59,910
un alt atribut numit substituent.

697
00:31:59,910 --> 00:32:05,165
Și am putea vedea ceva de genul cuvinte cheie,
sau mai precis, interoga pentru q.

698
00:32:05,165 --> 00:32:07,820
>> Și observați, acum, am
acest tip de text gri

699
00:32:07,820 --> 00:32:10,440
care dispare ca
Imediat ce am început să tastați,

700
00:32:10,440 --> 00:32:12,930
dar este, probabil, ceva
le-ați văzut în alte pagini web.

701
00:32:12,930 --> 00:32:14,650
Nu-mi place foarte mult butonul Submit.

702
00:32:14,650 --> 00:32:18,320
Așa că am de fapt de gând să dea
Butonul prezinte o valoare de căutare.

703
00:32:18,320 --> 00:32:21,680
Și acum, dacă aș reîncărcați, observați că
Butonul meu devine numit de căutare.

704
00:32:21,680 --> 00:32:24,140
Știi, eu nu prea
ca logo-ul de aici.

705
00:32:24,140 --> 00:32:27,140
Deci, generator de Google Font.

706
00:32:27,140 --> 00:32:28,820
>> Vreau să-și condimenteze asta mai departe.

707
00:32:28,820 --> 00:32:30,660
De căutare, astfel CS50.

708
00:32:30,660 --> 00:32:31,870
Lasă-mă să-mi creez propriul logo.

709
00:32:31,870 --> 00:32:33,080
Asta arată bine.

710
00:32:33,080 --> 00:32:36,945
Deci, acum lasă-mă să salveze acest as-- haide.

711
00:32:36,945 --> 00:32:40,710

712
00:32:40,710 --> 00:32:43,120
În cazul în care se merge?

713
00:32:43,120 --> 00:32:43,620
Acolo.

714
00:32:43,620 --> 00:32:44,160
BINE.

715
00:32:44,160 --> 00:32:44,980
Pierdute ea.

716
00:32:44,980 --> 00:32:47,740
Salvează ca.

717
00:32:47,740 --> 00:32:49,470
Browsere prost.

718
00:32:49,470 --> 00:32:51,700
Așteaptă, vom
rezolva această dată pentru totdeauna.

719
00:32:51,700 --> 00:32:57,650

720
00:32:57,650 --> 00:32:58,590
Nu mergem.

721
00:32:58,590 --> 00:32:59,090
In regula.

722
00:32:59,090 --> 00:32:59,600
Scuze.

723
00:32:59,600 --> 00:33:00,750
Zi libera.

724
00:33:00,750 --> 00:33:02,310
Acum, acest lucru este funky.

725
00:33:02,310 --> 00:33:03,160
Ieșiți din ecran complet.

726
00:33:03,160 --> 00:33:04,150
In regula.

727
00:33:04,150 --> 00:33:06,870
>> Acum, ca o normală
persoană, cu excepția imagine ca.

728
00:33:06,870 --> 00:33:08,810
Logo.gif.

729
00:33:08,810 --> 00:33:13,194
Acum am de gând să merg în CS50IDE și
Am de gând să apuca pur și simplu logo-ul,

730
00:33:13,194 --> 00:33:15,360
Am de gând să-l trage în
directorul meu sursă șapte,

731
00:33:15,360 --> 00:33:17,002
fișier există deja, eu sunt OK cu asta.

732
00:33:17,002 --> 00:33:19,210
Deci, am de gând să-l trece peste
pentru că am avut deja.

733
00:33:19,210 --> 00:33:20,630
Și acum cum pot scapa de asta?

734
00:33:20,630 --> 00:33:24,670
>> Să mergem mai departe și de a face aici
Image source este egal logo.gif.

735
00:33:24,670 --> 00:33:25,490
Inchide.

736
00:33:25,490 --> 00:33:26,050
Salvați.

737
00:33:26,050 --> 00:33:30,560
Și acum, dacă mă întorc la căutarea mea
pagina, acum este în căutarea destul de bine.

738
00:33:30,560 --> 00:33:33,610
Bine, deci nu are
destul de făcut ceva util.

739
00:33:33,610 --> 00:33:37,000
De fapt, lasă-mă să încercați să căutați
pentru o pisică și vedem ce se întâmplă.

740
00:33:37,000 --> 00:33:38,890
Pisici.

741
00:33:38,890 --> 00:33:39,420
La naiba.

742
00:33:39,420 --> 00:33:41,400
Ea nu doar locul de muncă, se pare.

743
00:33:41,400 --> 00:33:43,760
Deci, ce este piesa cheie
care lipsește aici?

744
00:33:43,760 --> 00:33:49,100
>> Corect, chiar dacă nu știi nici HTML,
Am început marcarea forma de telefon

745
00:33:49,100 --> 00:33:54,130
și l-am spus cum să obțineți intrări,
da-mi o casetă de text și un buton de trimitere,

746
00:33:54,130 --> 00:33:55,730
ce piesa este aparent lipsește?

747
00:33:55,730 --> 00:33:58,975
Să presupunem că doriți să obțineți de fapt,
acest lucru funcționează corect.

748
00:33:58,975 --> 00:34:02,420

749
00:34:02,420 --> 00:34:05,360
Ce trebuie să facem?

750
00:34:05,360 --> 00:34:08,860
Avem o nevoie să pună în aplicare la sfârșitul spate
de baze de date sau motorul de căutare în sine,

751
00:34:08,860 --> 00:34:11,210
și că va lua o
mulțime de timp, sincer.

752
00:34:11,210 --> 00:34:13,380
>> Deci, amintiți-vă ceea ce am făcut data trecută.

753
00:34:13,380 --> 00:34:18,230
Deci, dacă veți căuta pe Google pentru ceva
și ați anticipat oprit,

754
00:34:18,230 --> 00:34:20,355
Reamintim, căutare instantanee.

755
00:34:20,355 --> 00:34:22,230
Așa că haideți să-mi rândul său, că off
astfel încât acest fapt

756
00:34:22,230 --> 00:34:26,650
se comportă ca un browser mai vechi de școală,
dacă am căuta acum pentru ceva de genul pisici,

757
00:34:26,650 --> 00:34:28,190
amintesc ce URL-ul arata.

758
00:34:28,190 --> 00:34:29,449
E destul de criptic.

759
00:34:29,449 --> 00:34:33,000
Dar încorporate în acolo,
Reamintim, este căutare slash.

760
00:34:33,000 --> 00:34:35,100
Semn de întrebare q este egal cu pisici.

761
00:34:35,100 --> 00:34:37,760
>> Și care ar părea să-mi dea
o grămadă de rezultate de căutare.

762
00:34:37,760 --> 00:34:39,134
Deci, știi ce am de gând să fac?

763
00:34:39,134 --> 00:34:41,650
Am de gând să împrumute
Google pentru doar un minut.

764
00:34:41,650 --> 00:34:43,670
Am de gând să meargă peste
aici și am de gând să spun

765
00:34:43,670 --> 00:34:47,850
că această acțiune face sau
destinație, ca să spunem așa,

766
00:34:47,850 --> 00:34:49,330
ar trebui să fie literalmente Google.

767
00:34:49,330 --> 00:34:52,590
Și metoda am vrut
la utilizarea va fi minim.

768
00:34:52,590 --> 00:34:53,560
>> Deci, ce este o acțiune?

769
00:34:53,560 --> 00:34:55,760
Acțiune este ciudat numit,
dar asta înseamnă doar

770
00:34:55,760 --> 00:34:58,120
care este de gând să se ocupe de
acțiunea acestui formular?

771
00:34:58,120 --> 00:35:00,820
Când m-am faceți clic pe Căutare, în cazul în care
ar trebui să meargă rezultatul?

772
00:35:00,820 --> 00:35:05,300
Și dacă acum mă întorc la forma mea
aici și reîncărcați pagina mea de web

773
00:35:05,300 --> 00:35:09,000
și acum caută ceva
ca câine, observa acum

774
00:35:09,000 --> 00:35:10,850
Am re în aplicare Google.

775
00:35:10,850 --> 00:35:11,350
Dreapta?

776
00:35:11,350 --> 00:35:14,141
>> Dacă vreau pentru a căuta ceva
altceva, it works pentru nu doar câini,

777
00:35:14,141 --> 00:35:16,400
de asemenea, funcționează pentru pisici.

778
00:35:16,400 --> 00:35:21,930
De asemenea, funcționează pentru CS50.

779
00:35:21,930 --> 00:35:24,310
Și OK, aceasta este doar
sub copleșitoare, nu-i așa?

780
00:35:24,310 --> 00:35:25,920
Bine, dar chiar functioneaza.

781
00:35:25,920 --> 00:35:27,360
Deci, ce se intampla de fapt pe sa?

782
00:35:27,360 --> 00:35:31,340
Așa că am învățat browser-ul meu, cu ajutorul
HTML, pentru a lua de intrare de la utilizator

783
00:35:31,340 --> 00:35:35,810
și trimite de fapt că de intrare
la un server de la distanță prin HTTP.

784
00:35:35,810 --> 00:35:39,120
>> Și pentru că browser-ul meu
înțelege HTTP, de fapt

785
00:35:39,120 --> 00:35:43,500
construi URL-ul, astfel încât ceea ce
Ajung peste in browser-ul meu,

786
00:35:43,500 --> 00:35:45,660
observați ce se întâmplă
atunci când am cautat câine.

787
00:35:45,660 --> 00:35:49,270
Dacă am faceți clic pe Căutare, observați că
URL-ul se schimbă după cum am intenționat

788
00:35:49,270 --> 00:35:52,770
la google.com/search~~V interogare egal câine.

789
00:35:52,770 --> 00:35:56,020
Și asta pentru că forma
cunoaște, pentru că metoda este de a lua,

790
00:35:56,020 --> 00:35:59,560
pur și simplu se adăuga la această adresă URL acolo.

791
00:35:59,560 --> 00:36:01,730
>> Acum, aceste pagini web sunt încă urât.

792
00:36:01,730 --> 00:36:04,890
Deci, haideți să introducă un alt
bucată de sintaxă dacă putem astăzi.

793
00:36:04,890 --> 00:36:07,640
Și acest lucru este ceva cunoscut
foi de stil în cascadă ca.

794
00:36:07,640 --> 00:36:10,720
Deci, lasă-mă să aruncăm o privire la
acest exemplu aici și vezi

795
00:36:10,720 --> 00:36:12,380
dacă putem deduce ce se întâmplă.

796
00:36:12,380 --> 00:36:14,520
Aceasta este CSS0.html.

797
00:36:14,520 --> 00:36:16,532
Și acest lucru este în cazul în care lucrurile
obține un pic urât.

798
00:36:16,532 --> 00:36:18,490
Pentru că, din păcate,
în lumea de web,

799
00:36:18,490 --> 00:36:20,920
HTML singur nu poate face totul.

800
00:36:20,920 --> 00:36:22,920
Și deci, dacă doriți să
stiliza pagina web,

801
00:36:22,920 --> 00:36:28,370
aveți nevoie de fapt să se concentreze pe
estetica într-un mod diferit.

802
00:36:28,370 --> 00:36:33,090
Deci, aici, am corpul meu web
Pagina interiorul, care este un div mare.

803
00:36:33,090 --> 00:36:34,700
Și un div înseamnă doar diviziune.

804
00:36:34,700 --> 00:36:38,060
Deci e ca un paragraf, dar
nu are aceeași semantică

805
00:36:38,060 --> 00:36:39,180
de un paragraf de text.

806
00:36:39,180 --> 00:36:40,940
>> Acest lucru înseamnă doar la
browser-ul, aici vine

807
00:36:40,940 --> 00:36:45,210
o regiune mare dreptunghiulară de web meu
pagina, vreau să-l ocupe special.

808
00:36:45,210 --> 00:36:47,420
Acum, linia 21 este dacă acest div începe.

809
00:36:47,420 --> 00:36:48,770
Și să ia doar o presupunere.

810
00:36:48,770 --> 00:36:53,080
Care este efectul liniei 21 privind
Restul conținutului paginii?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Centrarea se.

813
00:36:56,311 --> 00:36:56,810
Asta e tot.

814
00:36:56,810 --> 00:36:58,830
Așa că nu am văzut un fel de
centrarea fapt textul.

815
00:36:58,830 --> 00:37:00,996
>> De fapt, motorul meu de căutare,
spre deosebire de real Google,

816
00:37:00,996 --> 00:37:03,040
a fost justificată peste tot la stânga.

817
00:37:03,040 --> 00:37:07,430
Și așa acum, în linie 21, vreau să spun, hei
browser-ul, de a crea o divizie a paginii.

818
00:37:07,430 --> 00:37:09,450
Dă-mi un mare dreptunghi, invizibil.

819
00:37:09,450 --> 00:37:11,490
Asta e cum vreau să
gândiți-vă la pagina de web.

820
00:37:11,490 --> 00:37:13,870
Și apoi stiliza cum urmează.

821
00:37:13,870 --> 00:37:16,900
In interiorul acestor citate,
acum, este oa doua limbă

822
00:37:16,900 --> 00:37:19,969
că am introdus astăzi
numite foi de stil în cascadă.

823
00:37:19,969 --> 00:37:22,010
Din fericire, nu este prea
un limbaj de programare,

824
00:37:22,010 --> 00:37:26,470
asa ca este foarte limitată în sintaxa, ci
de asemenea, foarte limitate în funcționalitatea sa

825
00:37:26,470 --> 00:37:30,670
întrucât HTML este despre toate
marcarea datele unei pagini web

826
00:37:30,670 --> 00:37:32,130
și structura unei pagini web.

827
00:37:32,130 --> 00:37:35,320
CSS este general, în jurul
ultima milă, estetica,

828
00:37:35,320 --> 00:37:40,160
obtinerea de dimensiunea și culoarea și
plasarea exact chiar în o pagină web.

829
00:37:40,160 --> 00:37:43,000
Și într-adevăr, aceasta este formată
cu perechi de valoare cheie.

830
00:37:43,000 --> 00:37:46,290
>> O proprietate ca aceasta, text
alinia, urmat de două puncte,

831
00:37:46,290 --> 00:37:49,720
urmată de valoarea pe care
proprietate, care, în acest caz este centru.

832
00:37:49,720 --> 00:37:51,910
Și acum observați
poate cuib aceste lucruri.

833
00:37:51,910 --> 00:37:56,780
Dacă aș fi vrut totul în care
Am evidențiat a fi centrat,

834
00:37:56,780 --> 00:38:00,270
de aceea am linie 21 și
linia corespunzătoare 31.

835
00:38:00,270 --> 00:38:04,820
Dar să presupunem că acum vreau să spun John
Harvard, bun venit pe pagina mea de start.

836
00:38:04,820 --> 00:38:06,530
>> Simbolul drepturilor de autor John Harvard.

837
00:38:06,530 --> 00:38:09,180
Și să presupunem vreau prima de
aceste linii pentru a fi destul de mare.

838
00:38:09,180 --> 00:38:10,450
36 pixeli.

839
00:38:10,450 --> 00:38:11,530
Deci asta-i o dimensiune decent.

840
00:38:11,530 --> 00:38:13,240
Și am vrut greutatea sa să fie îndrăzneț.

841
00:38:13,240 --> 00:38:15,450
Dar apoi mai jos, care,
Vreau Text mai mic.

842
00:38:15,450 --> 00:38:19,980
Și de mai jos că, vreau
Textul chiar mai mici.

843
00:38:19,980 --> 00:38:20,480
Scuze.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Astăzi se simte ca o zi liberă.

846
00:38:26,940 --> 00:38:29,840
>> Deci, acum, ce fac să-și exprime acest lucru?

847
00:38:29,840 --> 00:38:34,580
Aici, pe linia 22 este un embedded
div div sau imbricate, dacă vreți.

848
00:38:34,580 --> 00:38:36,190
Ea prea are propriul tag stil.

849
00:38:36,190 --> 00:38:38,160
Am specifica dimensiunea de 36.

850
00:38:38,160 --> 00:38:40,460
Am specifica o greutate font de bold.

851
00:38:40,460 --> 00:38:43,360
Aici jos, am specifica doar 24 de pixeli.

852
00:38:43,360 --> 00:38:45,960
Și, în sfârșit, în linie 28, pot specifica 12.

853
00:38:45,960 --> 00:38:49,070
Deci, doar ca o verificare rapidă bun-simț
și ca o lectură uman acest lucru,

854
00:38:49,070 --> 00:38:52,545
care cuvintele de pe ecran sunt
de fapt, va fi îndrăzneț?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Liniile care sunt de fapt îndrăzneț?

857
00:38:58,760 --> 00:38:59,570
>> Doar John Harvard.

858
00:38:59,570 --> 00:39:00,070
Dreapta?

859
00:39:00,070 --> 00:39:05,940
Pentru că așa cum spune linia 22 hey
browser-ul, aici este o divizie a paginii.

860
00:39:05,940 --> 00:39:07,920
Face dimensiunea fontului 36 puncte.

861
00:39:07,920 --> 00:39:09,460
Face greutatea font bold.

862
00:39:09,460 --> 00:39:11,920
De îndată ce a ajunge la
eticheta de final corespunzător

863
00:39:11,920 --> 00:39:15,340
sau tag-ul închis pe linia 24,
Asta înseamnă că, hei browser,

864
00:39:15,340 --> 00:39:17,640
nu mai faci ceea ce este faci.

865
00:39:17,640 --> 00:39:21,020
Și o notificare să fie clar, chiar dacă
line 22 are toate aceste atribute

866
00:39:21,020 --> 00:39:24,430
ca stil, atunci când
închide tag-ul, în conformitate 24,

867
00:39:24,430 --> 00:39:25,940
ai spus doar numele tag-ul este.

868
00:39:25,940 --> 00:39:29,990
>> Tu nu repeta stilul cuvânt sau
ceva care este în interiorul acestor citate.

869
00:39:29,990 --> 00:39:32,860
Și așa că, dacă mă uit la acest lucru acum
în browser-ul meu, să ia

870
00:39:32,860 --> 00:39:38,060
O privire la rezultatul final. Lasa-ma sa plec
înainte de a acest fișier, care este CSS 0.

871
00:39:38,060 --> 00:39:41,814
Și este încă destul de simplu,
dar obtinerea destul de interesant.

872
00:39:41,814 --> 00:39:43,980
Dar se pare că nu e
alte lucruri pot face aici,

873
00:39:43,980 --> 00:39:46,490
și cu riscul de a face
acest complet hidos,

874
00:39:46,490 --> 00:39:48,630
observă aici că, în mea
corp de pagina mea de web,

875
00:39:48,630 --> 00:39:53,930
Pot să fac ceva amuzant
cum ar fi bg sau culoare de fundal.

876
00:39:53,930 --> 00:39:56,670
>> Și rapid, ceea ce este culoarea ta preferata?

877
00:39:56,670 --> 00:39:57,720
Green-am auzit.

878
00:39:57,720 --> 00:39:58,750
In regula.

879
00:39:58,750 --> 00:40:02,920
Deci, acum, dacă am lovit reload acum,
avem o pagină web verde.

880
00:40:02,920 --> 00:40:04,710
Bine, pentru ca nu e rău.

881
00:40:04,710 --> 00:40:08,350
Și acum, dacă vreau să fac acest lucru cu adevărat
rece, pot face culoarea textului meu

882
00:40:08,350 --> 00:40:09,360
chiar roșu.

883
00:40:09,360 --> 00:40:10,870
Deci, haideți să vedem ce arata asta ca.

884
00:40:10,870 --> 00:40:12,230
Acum este în căutarea destul de bine.

885
00:40:12,230 --> 00:40:15,460
Și aici, dacă într-adevăr
vrei să te pui cu cineva

886
00:40:15,460 --> 00:40:17,487
sau dacă doriți să fie
unul dintre acei oameni care

887
00:40:17,487 --> 00:40:20,570
încearcă să vă păcălească să vizita un web
pagină pentru că au păcălit Google

888
00:40:20,570 --> 00:40:27,610
în gândire există o grămadă
de cuvinte cheie like-- să vedem, reîncărcați.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
În cazul în care sa dus?

891
00:40:30,680 --> 00:40:31,530
Și acolo ne-l.

892
00:40:31,530 --> 00:40:32,030
In regula.

893
00:40:32,030 --> 00:40:34,905
Deci, eu spun ca o parte, vom
vorbesc despre aceste lucruri în câteva săptămâni

894
00:40:34,905 --> 00:40:36,740
atunci când vorbim despre
securitate, în cazul în care tu de fapt

895
00:40:36,740 --> 00:40:38,852
buchete întregi încorporează de
cuvinte cheie într-o pagină web,

896
00:40:38,852 --> 00:40:41,810
chiar dacă acestea nu sunt vizibile la o
umane, cum ar fi Google cineva, desigur,

897
00:40:41,810 --> 00:40:43,250
poate găsi încă de fapt acest lucru.

898
00:40:43,250 --> 00:40:45,820
Bine, pentru ca e destul de
hidos destul de repede.

899
00:40:45,820 --> 00:40:48,420
>> Și, de fapt, nu e tot
că, spre deosebire de mult propria mea web

900
00:40:48,420 --> 00:40:51,480
Pagina ca un student, care
Am început googling în jurul pentru a găsi

901
00:40:51,480 --> 00:40:53,690
versiunile anterioare de site-uri web. vechile mele

902
00:40:53,690 --> 00:40:54,500
A fost destul de rău.

903
00:40:54,500 --> 00:40:56,650
De fapt, am găsit
o chiar înainte de clasă.

904
00:40:56,650 --> 00:40:58,620
Dar nu e mai rău acolo.

905
00:40:58,620 --> 00:41:01,534
Aceasta pare că a fost meu
pagina principală în 1996.

906
00:41:01,534 --> 00:41:04,200
Se pare că m-am gândit a fost
adecvat de a cere oamenilor numele lor

907
00:41:04,200 --> 00:41:05,991
înainte de a putea
se vedea de fapt pagina mea de web.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> Și apoi m-am le-a arătat
ceva stupid, probabil.

910
00:41:11,920 --> 00:41:13,450
Voi dezgropa mai mult pentru data viitoare.

911
00:41:13,450 --> 00:41:16,220
Dar pentru moment, să
ia în considerare un pic de proiectare.

912
00:41:16,220 --> 00:41:17,444
Am vorbit despre stil.

913
00:41:17,444 --> 00:41:19,735
Și această pagină până în prezent și
mai tot ce am scris

914
00:41:19,735 --> 00:41:21,890
este destul de curat stilistic.

915
00:41:21,890 --> 00:41:23,320
Dar ce despre design?

916
00:41:23,320 --> 00:41:25,990
Ei bine, există o mulțime de concediere
în ceea ce am făcut aici.

917
00:41:25,990 --> 00:41:28,156
>> Am menționat cuvântul
culoare într-un cuplu de locuri.

918
00:41:28,156 --> 00:41:31,630
Am menționat dimensiunea fontului într-o pereche de
locuri și îndrăzneț într-un cuplu de locuri.

919
00:41:31,630 --> 00:41:34,870
Și fundamental, sunt co
amesteca două limbi.

920
00:41:34,870 --> 00:41:38,100
Am HTML cu Tag-urile mele și mi
atributele și apoi dintr-o dată,

921
00:41:38,100 --> 00:41:40,100
între ghilimele, am
a doua limbă de azi

922
00:41:40,100 --> 00:41:43,830
numit CSS, care din nou, este doar acestea
perechi de chei valoarea sau aceste proprietăți

923
00:41:43,830 --> 00:41:45,280
separate de două puncte.

924
00:41:45,280 --> 00:41:47,700
>> Se pare că de mult
ca în C, unde ne-am

925
00:41:47,700 --> 00:41:50,550
poate începe să factor în
un cod în fișiere antet,

926
00:41:50,550 --> 00:41:53,520
astfel încât putem face același lucru în HTML.

927
00:41:53,520 --> 00:41:56,030
Și un pas spre care este după cum urmează.

928
00:41:56,030 --> 00:42:02,230
Observați că această versiune, este CSS1.html
aceeași pagină web exact structural.

929
00:42:02,230 --> 00:42:05,250
Așa că am o grămadă
de divs, dar de data aceasta, am

930
00:42:05,250 --> 00:42:07,220
scăpat de înfășurare
div după cum veți vedea.

931
00:42:07,220 --> 00:42:12,390
>> Și am dat aceste trei divs
top, middle, și de jos, ID-uri unice.

932
00:42:12,390 --> 00:42:14,760
Acest lucru este frumos, pentru că de
da aceste divizii

933
00:42:14,760 --> 00:42:18,715
a identificatorilor unici pagini,
Pot să le referință în altă parte.

934
00:42:18,715 --> 00:42:19,215
Unde?

935
00:42:19,215 --> 00:42:21,070
Ei bine, lasă-mă să derulați în sus.

936
00:42:21,070 --> 00:42:24,070
Și până acum, în orice moment ne-am uitat
în fruntea unei pagini web, ceea ce este

937
00:42:24,070 --> 00:42:28,560
singura eticheta care le-am avut în
capul unei pagini web?

938
00:42:28,560 --> 00:42:29,740
Un pic mai tare.

939
00:42:29,740 --> 00:42:30,799
Doar titlul până în prezent.

940
00:42:30,799 --> 00:42:32,590
Dar se pare că nu e
alte câteva lucruri

941
00:42:32,590 --> 00:42:35,840
puteți pune acolo, unul dintre
care se numește o etichetă stil.

942
00:42:35,840 --> 00:42:37,850
Deci, un moment în urmă, ne-am uitat
la un atribut de stil.

943
00:42:37,850 --> 00:42:39,150
Se pare că există o etichetă stil.

944
00:42:39,150 --> 00:42:41,200
Acesta aparține în interiorul
capul unei pagini web.

945
00:42:41,200 --> 00:42:42,840
Și acum observați ce fac.

946
00:42:42,840 --> 00:42:46,540
Am interiorul acestui
tag stil următoarele.

947
00:42:46,540 --> 00:42:51,190
Sunt literalmente menționat pe linia 20
Numele unei etichete pe care vreau să stiliza.

948
00:42:51,190 --> 00:42:53,489
>> Atunci am bretele buclat deschise
și a închis bretele cret.

949
00:42:53,489 --> 00:42:56,030
Atât de asemănătoare în spirit de C, dar
din nou, acest lucru nu este o funcție,

950
00:42:56,030 --> 00:42:57,796
aceasta este doar un detaliu sintactic aici.

951
00:42:57,796 --> 00:43:00,170
Și apoi, desigur, eu spun
browser-ul, browser-ul hei,

952
00:43:00,170 --> 00:43:05,210
face întregul corp a paginii
au o aliniere de text de centru.

953
00:43:05,210 --> 00:43:06,930
Și apoi acest spune următoarele.

954
00:43:06,930 --> 00:43:12,600
Hei browser, dacă vedeți un HTML
element sau eticheta în pagina care

955
00:43:12,600 --> 00:43:17,040
are un identificator unic de top,
astfel încât simbolul hash aici înseamnă doar

956
00:43:17,040 --> 00:43:21,010
idee unică de top, dă-i drumul
și să facă dimensiunea fontului 36

957
00:43:21,010 --> 00:43:22,490
iar greutatea sa font bold.

958
00:43:22,490 --> 00:43:26,840
>> Hei browser, un element a cărui
ID-ul este de mijloc, face 24 de pixeli.

959
00:43:26,840 --> 00:43:31,070
Și hei browser, dacă vedeți un
Ideea de fund, face 12 de pixeli.

960
00:43:31,070 --> 00:43:33,540
Efectul în cele din urmă
este exact SAM.

961
00:43:33,540 --> 00:43:36,500
Dacă mă duc în CSS 1, The
pagină are un aspect la fel.

962
00:43:36,500 --> 00:43:39,810
Dar suntem un pas spre
un design ceva mai bine.

963
00:43:39,810 --> 00:43:44,850
Lasă-mă să mă întorc acum aici pentru a CSS2
și a vedea ce altceva am făcut.

964
00:43:44,850 --> 00:43:48,030
>> Acum pagina este foarte, foarte curat.

965
00:43:48,030 --> 00:43:50,730
De fapt, eu pot potrivi toate
conținutul pe o pagină aici.

966
00:43:50,730 --> 00:43:54,270
Dar ceea ce tag-ul nou am
a introdus, în mod evident?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
Și nu e cel mai bun nume pentru o etichetă,
pentru ca nu este un link, în sensul

969
00:43:57,853 --> 00:44:00,780
că o știm, dar acest lucru înseamnă
un link într-un alt fișier.

970
00:44:00,780 --> 00:44:02,890
Aceasta este un fel de ascuțite include în C.

971
00:44:02,890 --> 00:44:06,280
>> Acesta este modul în HTML
să spun hei browser,

972
00:44:06,280 --> 00:44:10,240
du-te conținutul de
fișierul numit css2.css.

973
00:44:10,240 --> 00:44:12,880
Relația, pentru mine,
este că este o foaie de stil.

974
00:44:12,880 --> 00:44:17,980
Și într-adevăr, asta e ceea ce-unul din
S in stil cascadă foi mijloace.

975
00:44:17,980 --> 00:44:20,350
Aceasta este o foaie de stil.

976
00:44:20,350 --> 00:44:23,120
E doar fișierul text care conține
o grămadă de proprietate.

977
00:44:23,120 --> 00:44:25,940
E o grămadă de stiluri
pe care doriți să se aplice la o pagină.

978
00:44:25,940 --> 00:44:28,860
>> Și așa se pare că acest lucru este
referindu-se la un al doilea fișier.

979
00:44:28,860 --> 00:44:32,970
Și dacă am deschis că, CSS2.css,
observa că tot ce am făcut

980
00:44:32,970 --> 00:44:35,900
este copiați și lipiți toate
de acest lucru în acest dosar.

981
00:44:35,900 --> 00:44:38,220
Și acum, chiar dacă nu ați mai
codificate chestia asta înainte,

982
00:44:38,220 --> 00:44:40,700
doar ia în considerare cu
pălărie de inginerie proverbial

983
00:44:40,700 --> 00:44:44,220
pe, de ce este aceasta o
mai bine de proiectare, probabil?

984
00:44:44,220 --> 00:44:48,910
Factoring acele proprietăți CSS,
punerea lor în propriul dosar.

985
00:44:48,910 --> 00:44:51,330
Chiar dacă am rezolvat aceasta
acum problema ca cinci minute

986
00:44:51,330 --> 00:44:52,600
în prima versiune.

987
00:44:52,600 --> 00:44:55,730
>> Noi nu am îmbunătățit
Pagina stilistic,

988
00:44:55,730 --> 00:44:57,520
acest lucru este doar mai bine
Design într-un sens.

989
00:44:57,520 --> 00:44:58,990
De ce crezi?

990
00:44:58,990 --> 00:45:01,510
Da.

991
00:45:01,510 --> 00:45:02,260
Mai flexibil cum?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Da.

994
00:45:05,540 --> 00:45:07,373
Deci, dacă vrei să mergi
înapoi și de a schimba lucrurile,

995
00:45:07,373 --> 00:45:09,540
acum, aveți un singur loc
în cazul în care vă puteți schimba lucrurile.

996
00:45:09,540 --> 00:45:11,622
Și, de fapt, pentru ceva
ca problemă set de șapte,

997
00:45:11,622 --> 00:45:13,690
în cazul în care vom pune în aplicare o
stoc site comercial,

998
00:45:13,690 --> 00:45:15,523
care va avea un
grămadă de pagini.

999
00:45:15,523 --> 00:45:17,620
Și ar fi într-adevăr
enervant, dacă vă decideți, hm,

1000
00:45:17,620 --> 00:45:21,630
Nu-mi place foarte mult 24 pixeli, vreau
să fie de 28 de pixeli sau ușor mai mare.

1001
00:45:21,630 --> 00:45:23,550
Și apoi trebuie să faci un
global găsi și înlocui

1002
00:45:23,550 --> 00:45:27,560
sau deschide toate fișierele site-ul dvs.
pur și simplu pentru a schimba de fapt o valoare.

1003
00:45:27,560 --> 00:45:31,290
De factoring aceste stiluri
într-un singur loc central,

1004
00:45:31,290 --> 00:45:34,720
aveți posibilitatea să deschideți un fișier text acum
în CS50IDE în orice program,

1005
00:45:34,720 --> 00:45:36,479
schimba-l, salvați-l, și a făcut.

1006
00:45:36,479 --> 00:45:38,270
Ai propagate cele
schimbări peste tot.

1007
00:45:38,270 --> 00:45:42,450
Și că ar fi la fel
într-un fișier punct h, de asemenea.

1008
00:45:42,450 --> 00:45:46,697
Astfel încât orice întrebări astfel
acum pe această sintaxă?

1009
00:45:46,697 --> 00:45:48,530
Bine, așa că am
făcut tot se pare

1010
00:45:48,530 --> 00:45:51,170
cu excepția de fapt punerea în aplicare a hyperlink-uri.

1011
00:45:51,170 --> 00:45:52,740
Și așa să mergem mai departe și de a face acest lucru.

1012
00:45:52,740 --> 00:45:54,830
Lasă-mă să merg mai departe și
a crea un nou fișier aici.

1013
00:45:54,830 --> 00:45:59,970
Am de gând să-l sun
link.html, pune în codul de astăzi.

1014
00:45:59,970 --> 00:46:03,000
>> Și am de gând să fac deschide
Suport de tip doc html.

1015
00:46:03,000 --> 00:46:05,970
Ca o paranteza, asta la
top, această declarație tip doc,

1016
00:46:05,970 --> 00:46:08,420
e singurul care e ciudat
cu semn de exclamare.

1017
00:46:08,420 --> 00:46:12,100
Trebuie doar să o fac acolo și-l
înseamnă că sunt utilizați HTML versiunea 5.

1018
00:46:12,100 --> 00:46:14,460
Versiunile mai vechi de
limbă a avut mult mai mult

1019
00:46:14,460 --> 00:46:16,400
siruri de caractere pe care le necesare pentru a pune acolo.

1020
00:46:16,400 --> 00:46:18,620
Deci, aici este un exemplu numit link.

1021
00:46:18,620 --> 00:46:20,950
>> Am nevoie de un corp de pagina mea de web aici.

1022
00:46:20,950 --> 00:46:29,770
Și aici, un egal href
să spunem HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
și site-ul meu preferat, vom spune.

1024
00:46:35,420 --> 00:46:38,550
Bine, deci o foarte
, pagina inofensive ușor de utilizat.

1025
00:46:38,550 --> 00:46:42,950
Dacă acum mă duc în directorul meu
listarea aici și deschide link.html,

1026
00:46:42,950 --> 00:46:44,780
avem Hyper Text.

1027
00:46:44,780 --> 00:46:47,410
>> Și într-adevăr, în cazul în care acest lucru este
H în HTTP vine de la.

1028
00:46:47,410 --> 00:46:51,580
Hypertext transfer protocol
este despre transferul de text

1029
00:46:51,580 --> 00:46:53,840
care are hyperlink-uri către alte resurse.

1030
00:46:53,840 --> 00:46:58,210
Și într-adevăr, aici este familiar,
dacă retro, albastru legătură că, dacă a făcut clic,

1031
00:46:58,210 --> 00:47:02,607
mă va duce de fapt la Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Acum, oh, care vine în curând.

1033
00:47:03,940 --> 00:47:08,970
Bine, asa ca acum, care sunt unele
de implicațiile acestei?

1034
00:47:08,970 --> 00:47:11,610
>> Și sincer, lumea începe
pentru a obține un pic mai familiar

1035
00:47:11,610 --> 00:47:15,090
și, de asemenea, un pic înfricoșător
dar, de asemenea, un pic mai

1036
00:47:15,090 --> 00:47:17,840
auto apărat odată ce începi
pentru a înțelege aceste lucruri.

1037
00:47:17,840 --> 00:47:21,610
Deoarece cote de pariuri sunt, unii dintre voi, dacă te duci
prin dosarul spam Gmail sau chiar

1038
00:47:21,610 --> 00:47:23,990
Inbox, ai probabil
ajuns un fel de e-mail

1039
00:47:23,990 --> 00:47:26,980
care este vă cere să schimbați
parola verifica poate sau poate

1040
00:47:26,980 --> 00:47:28,910
acreditările PayPal sau fleacuri.

1041
00:47:28,910 --> 00:47:34,510
>> Și, de fapt, s-ar putea fi primit
ceva care spune ca aici click

1042
00:47:34,510 --> 00:47:42,260
pentru a reseta parola PayPal.

1043
00:47:42,260 --> 00:47:44,130
Și acum, observați, dacă
acest lucru nu este Disney.com

1044
00:47:44,130 --> 00:47:51,600
dar, ca și badplace.com
reîncărcați, act de faptul că textul de aici

1045
00:47:51,600 --> 00:47:53,710
ar putea spune un fel de nimic.

1046
00:47:53,710 --> 00:47:55,260
Și, de fapt, aceasta este doar cuvinte.

1047
00:47:55,260 --> 00:48:04,610
De ce nu am fi de fapt foarte rău intenționat
și spune http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Click aici pentru a reseta PayPal ta
parola și acum reîncărcați.

1049
00:48:14,090 --> 00:48:16,220
Acest lucru pare destul de legitim, nu?

1050
00:48:16,220 --> 00:48:20,470
Adică, n-aș click pe
un e-mail care spune doar acest lucru.

1051
00:48:20,470 --> 00:48:22,450
Dar observați dihotomia aici.

1052
00:48:22,450 --> 00:48:26,880
Se spune www.paypal.com,
și, de fapt, așteptați un minut,

1053
00:48:26,880 --> 00:48:29,210
știm că doriți
S pentru securitate.

1054
00:48:29,210 --> 00:48:35,450
Deci, acum, du-te la www.paypal.com HTTPS,
dar dacă nu ați făcut acest lucru înainte,

1055
00:48:35,450 --> 00:48:38,182
ajung în obiceiul de a
situându-se peste link-uri mici aici.

1056
00:48:38,182 --> 00:48:39,890
Și e greu să vezi
pe ecran acolo,

1057
00:48:39,890 --> 00:48:41,340
și nu e tot ce mai ușor aici.

1058
00:48:41,340 --> 00:48:43,615
Dar aici, în mod jos
colțul micuț

1059
00:48:43,615 --> 00:48:45,740
face browser-ul de fapt,
vă că vom spune

1060
00:48:45,740 --> 00:48:48,850
la badplace.com loc de Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Acum, în cazul în care mergem cu asta?

1062
00:48:51,620 --> 00:48:54,859
Toate exemplele care le-am făcut astăzi,
am codat greu și tastat manual.

1063
00:48:54,859 --> 00:48:56,900
Web-ul este incredibil de
neinteresant atunci când greu

1064
00:48:56,900 --> 00:48:59,844
codul paginile dvs. de web, astfel încât conținutul
este static și nu schimbarea.

1065
00:48:59,844 --> 00:49:01,760
Desigur, toate noastre
site-uri favorite astăzi,

1066
00:49:01,760 --> 00:49:04,470
fie că este vorba Gmail sau Twitter sau
Facebook sau orice număr de alte

1067
00:49:04,470 --> 00:49:05,290
sunt dinamice.

1068
00:49:05,290 --> 00:49:07,340
Sunt schimbare în
ca răspuns la datele introduse de utilizator

1069
00:49:07,340 --> 00:49:08,840
la fel ca rezultatele de căutare Google.

1070
00:49:08,840 --> 00:49:12,415
>> Și așa, miercuri, ceea ce facem noi este
lăsăm HTML și CSS introducere

1071
00:49:12,415 --> 00:49:14,290
în spatele nostru și vom lua
pentru a acordat că acum

1072
00:49:14,290 --> 00:49:16,640
Știu că și vom introduce
un nou limbaj de programare

1073
00:49:16,640 --> 00:49:19,050
numit PHP, care place
C, este de gând să ne dea

1074
00:49:19,050 --> 00:49:22,450
puterea de a crea, de fapt programe
care se generează de ieșire.

1075
00:49:22,450 --> 00:49:25,900
În acest caz, vom folosi
PHP pentru a genera dinamic web

1076
00:49:25,900 --> 00:49:27,340
pagini utilizând acest nou limbaj.

1077
00:49:27,340 --> 00:49:28,989
Cu atât mai mult cu privire la acest miercuri.

1078
00:49:28,989 --> 00:49:29,530
Ne vedem atunci.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [MUSIC JOC]

1081
00:49:37,380 --> 00:52:38,864