1
00:00:00,000 --> 00:00:03,486
>> [Muusika mängib]

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

3
00:00:10,460 --> 00:00:14,250
>> DAVID J Humala: See on CS50 ja
see on algus nädal 7.

4
00:00:14,250 --> 00:00:15,060
Nii tere tulemast tagasi.

5
00:00:15,060 --> 00:00:17,540
Ja te võite meelde tuletada, et
probleemide seatud neli,

6
00:00:17,540 --> 00:00:21,510
seal oli natuke tänavapühkija hunt
mõned vapustav auhindu, mille

7
00:00:21,510 --> 00:00:24,219
pärast tagasi fotod
personali nii siin kui New Haven,

8
00:00:24,219 --> 00:00:27,468
sa nakatati leida nii palju
need arvuti teadlased kui võiks.

9
00:00:27,468 --> 00:00:29,550
Ja meil on kogu
kamp sõlmimiseks.

10
00:00:29,550 --> 00:00:31,930
Mõtlesin, et ma jagan mõned
teiega täna siin.

11
00:00:31,930 --> 00:00:35,100
>> Ja me postiga kõiki neid online.

12
00:00:35,100 --> 00:00:39,310
Aga eelkõige tahtsin
juhtida teie tähelepanu mina-- ka üks,

13
00:00:39,310 --> 00:00:42,670
Sam oli nii mõnelgi neist
Üldiselt tekitavad niimoodi.

14
00:00:42,670 --> 00:00:45,750
Aga selgub, et alates
Täna hommikul võitja

15
00:00:45,750 --> 00:00:51,170
oli teatud keegi nimega Ken koos
24 personali püütud kaamera

16
00:00:51,170 --> 00:00:54,600
või mõne rohkem kui võetakse
moodustavad mitu personali pilte.

17
00:00:54,600 --> 00:00:58,300
Pildil on Ken järgmine
Mary on New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Nüüd, Ken, aga muutub
välja on natuke nurgas juhul

19
00:01:01,300 --> 00:01:02,880
mis ei ole veel juhtunud varem.

20
00:01:02,880 --> 00:01:05,713
Selgub, et see ei toimunud
mulle panna trahvi print probleem

21
00:01:05,713 --> 00:01:09,710
seatud neli, mis ütleb, et töötajad on
jaoks kõlbmatuks vapustav auhindu

22
00:01:09,710 --> 00:01:13,130
sest Ken on muidugi üks
fotograafid meie töötajad.

23
00:01:13,130 --> 00:01:16,820
Nüüd, et ütles, et ta
Algselt kirjutas mulle öelda

24
00:01:16,820 --> 00:01:19,180
Palun ärge postitage neid fotosid.

25
00:01:19,180 --> 00:01:21,630
Ma arvan, et suur osa
sest enamik pilte

26
00:01:21,630 --> 00:01:24,499
et see fotograaf võttis otsima
natuke midagi sellist.

27
00:01:24,499 --> 00:01:25,040
Jms.

28
00:01:25,040 --> 00:01:28,990
>> Aga Ken tahaks mind veenda teid
et ta on väga hea fotograaf,

29
00:01:28,990 --> 00:01:33,190
Ta on professionaalne, ta võtab
pildid, mis ei ole udune,

30
00:01:33,190 --> 00:01:37,270
mis on parem keskenduda, ja ta
võttis üsna vähe meie enda töötajad.

31
00:01:37,270 --> 00:01:40,370
Aga mitte ainult tunnistama
Ken, mida me arvasime me tahaks teha

32
00:01:40,370 --> 00:01:43,390
on läbida nimekiri
tegelik õpilased, kes esitasid.

33
00:01:43,390 --> 00:01:48,640
Ja selgub, et Lance koos
15 fotot tänase hommiku seisuga

34
00:01:48,640 --> 00:01:50,030
oli meie võitja.

35
00:01:50,030 --> 00:01:55,730
>> Ja pildil on Lance koos Colton,
koos Skaz, mina ja Sam.

36
00:01:55,730 --> 00:02:00,230
Aga siis selgub, et alates
11:46, nii et natuke tagasi,

37
00:02:00,230 --> 00:02:04,380
Ma läksin tagasi oma email ja leitud
et meil oli veel üks esitamine

38
00:02:04,380 --> 00:02:08,300
Õpilase poolt nimega Bonnie
kelle e-posti ütles ainult seda.

39
00:02:08,300 --> 00:02:10,800
Ei kavatse valetada, ma olen
Seejuures ajal klassis.

40
00:02:10,800 --> 00:02:17,620
Ja siis asus lisada ainult
14 fotot, üks häbelik Lance on 15.

41
00:02:17,620 --> 00:02:22,690
>> Aga Bonnie fotod, selgub
välja oli mitu töötajat, Sam

42
00:02:22,690 --> 00:02:25,960
nende seas, nii me arvasime me
teeks on tunnustada mõlemat.

43
00:02:25,960 --> 00:02:29,240
Nii et lisaks saada Dropbox
ruumi, et igaüks, kes osales

44
00:02:29,240 --> 00:02:33,900
saab need kaks lõigud ka
saada kena süüa lõunat neid

45
00:02:33,900 --> 00:02:36,100
ja nende osa
koertega tuleval nädalal.

46
00:02:36,100 --> 00:02:38,970
Ja siis anname endast teada,
Lance ja Bonnie, sellest.

47
00:02:38,970 --> 00:02:40,002
Nii suur Õnnitlused neile.

48
00:02:40,002 --> 00:02:42,210
Nüüd neile, kes
nagu lõuna- üldisemalt

49
00:02:42,210 --> 00:02:45,320
tean, et CS50 lõunat Cambridge
ja New Haven on sel reedel.

50
00:02:45,320 --> 00:02:48,510
Mine CS50 veebilehte kaldkriipsuga RSVP.

51
00:02:48,510 --> 00:02:49,800
Ja nüüd sõna seminare.

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

53
00:02:50,730 --> 00:02:52,490
Nii et me lähenemas
punkti semestri

54
00:02:52,490 --> 00:02:55,200
kus sa peaks algama
mõtled lõplik projekte.

55
00:02:55,200 --> 00:02:59,309
Ja tegelikult, vaid natuke, eks
nn pre ettepanekuid maksta.

56
00:02:59,309 --> 00:03:01,850
Nii pre ettepanekud on mõeldud
päris väike mõju ja tegelikult

57
00:03:01,850 --> 00:03:04,109
lihtsalt võimalus
teil koostada lühike ülevaade

58
00:03:04,109 --> 00:03:06,900
õpetust mehe üles teavitama
teda mida sa mõtled sina

59
00:03:06,900 --> 00:03:09,140
Võiksid teha oma lõplik projekt.

60
00:03:09,140 --> 00:03:11,730
>> Nüüd on paljud õpilased lõpuks
teeme veebipõhine lõplik projekte.

61
00:03:11,730 --> 00:03:13,800
Ja muidugi, me oleme lihtsalt
nüüd viimase nädala selle

62
00:03:13,800 --> 00:03:15,890
ja pärast sukeldumist veebi programmeerimine.

63
00:03:15,890 --> 00:03:18,200
Nii ei pea muretsema, kui sa
ei ole absoluutselt aimugi, kuidas

64
00:03:18,200 --> 00:03:21,594
siis oleks ehitada ideed
sa võisid meelt.

65
00:03:21,594 --> 00:03:24,510
See on tõesti ainult sundides funktsiooni
saada sa mõtled ja räägid

66
00:03:24,510 --> 00:03:25,650
Teie TF midagi.

67
00:03:25,650 --> 00:03:28,810
Aga mis aitavad teil selle, ja
lõplikud projektid lõpuks

68
00:03:28,810 --> 00:03:31,750
tean, et CS50 on traditsioon
pakkuda seminare.

69
00:03:31,750 --> 00:03:36,084
>> Ja need on vabatahtlik, käed,
või loengu põhineb võimalused

70
00:03:36,084 --> 00:03:39,000
rohkem teada teemad, mis on
väike kõrvaltegevus kursuse

71
00:03:39,000 --> 00:03:43,310
ainekava, kuid siiski imeline
materjali sõita lõplik projekte.

72
00:03:43,310 --> 00:03:46,840
Ja nii see on nimekiri, mis on
CS50 töötajad siin New Haven

73
00:03:46,840 --> 00:03:48,600
on tulla ette
Sel aastal umbes iOS

74
00:03:48,600 --> 00:03:50,730
programmeerimine, Android
programmeerimine, mängu areng,

75
00:03:50,730 --> 00:03:54,480
ja kobarad rohkem vahendeid
ja keelte ja tehnikaid.

76
00:03:54,480 --> 00:03:56,780
>> Nii et hoidke silm peal CS50 veebisaidil.

77
00:03:56,780 --> 00:04:00,110
Ja vahepeal, kui soovite
registreerige oma huvi mõni neist,

78
00:04:00,110 --> 00:04:02,510
minna CS50 on kaldkriipsuga register.

79
00:04:02,510 --> 00:04:05,770
Ja me siis jälgida selle kohta,
päeva ja lennuaegade ja kohad

80
00:04:05,770 --> 00:04:09,090
ja everything-- kõige kõik saab
striimitakse ja ka nõudmise

81
00:04:09,090 --> 00:04:11,750
pärast, kui sa ei saa tegelikult teha.

82
00:04:11,750 --> 00:04:15,800
Nii ilma pikema jututa, me
jäi viimase aja saad.

83
00:04:15,800 --> 00:04:19,610
>> Ja see oli nagu sõnum, mis oli
sees virtuaalne ümbrik, mäletate,

84
00:04:19,610 --> 00:04:23,960
et me möödunud ruuter ruuter
ruuteri vahel veebilehitseja ja veebi

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

86
00:04:24,487 --> 00:04:26,695
Ja et sõnum tundus
natuke midagi sellist.

87
00:04:26,695 --> 00:04:29,700
See oli rohkem kauge sõnum, et
Tegelikult oli sees ümbrik

88
00:04:29,700 --> 00:04:34,440
kirjutatud paberile, kelle
Esimene rida ütleb sõna-sõnalt, saada kaldkriipsuga.

89
00:04:34,440 --> 00:04:37,830
>> Ja nii nagu meelerahu kontrolli,
mida ei kaldkriipsuga tähistavad?

90
00:04:37,830 --> 00:04:40,455
Mida kaldkriipsuga mõtlen, kui
taotlev veebileht?

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

92
00:04:43,070 --> 00:04:44,250
Sa nõuda seda kogu aeg.

93
00:04:44,250 --> 00:04:47,333
Enamik iga kord, kui külastada veebilehte, siis
tegelikult ei kirjuta faili nimi.

94
00:04:47,333 --> 00:04:50,960
Sa ilmselt lihtsalt minema Facebook.com,
siseneda, gmail.com, vms.

95
00:04:50,960 --> 00:04:52,260
Ja mida kaldkriipsuga esindavad?

96
00:04:52,260 --> 00:04:53,506
Mis faili?

97
00:04:53,506 --> 00:04:54,630
Või mis lehel, täpsemalt?

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

99
00:04:59,642 --> 00:05:00,720
>> Indeks, yeah.

100
00:05:00,720 --> 00:05:01,810
Nii vaikimisi lehel.

101
00:05:01,810 --> 00:05:04,810
Nii et kui sa ei määra fail
nime me hakkame nägema,

102
00:05:04,810 --> 00:05:07,750
sa oled tegelikult lihtsalt paludes
anna mulle default lehel Facebook

103
00:05:07,750 --> 00:05:10,800
või anna mulle minu postkasti või anda
minu vaikimisi lehe uudised

104
00:05:10,800 --> 00:05:12,510
CNN kodulehel vms.

105
00:05:12,510 --> 00:05:15,220
Ja server siis reageerib
et sõnum midagi

106
00:05:15,220 --> 00:05:18,420
niimoodi, öeldes jah, ma
rääkida HTTP versioon 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, mis on status
kood, mis me inimesed harva

108
00:05:21,130 --> 00:05:22,790
kunagi näha, sest see on hea.

109
00:05:22,790 --> 00:05:26,640
Sest see tähendab, OK, taotluse
sai ja käideldud nõuetekohaselt.

110
00:05:26,640 --> 00:05:28,960
Ja sisutüüpi
ilmselt vastus

111
00:05:28,960 --> 00:05:31,170
On üsna tihti, kuid mitte alati, teksti.

112
00:05:31,170 --> 00:05:32,580
Ja just, HTML.

113
00:05:32,580 --> 00:05:34,760
Ja see on tegelikult
kus me vaatame täna.

114
00:05:34,760 --> 00:05:37,140
>> Nii et tegelikult ma lähen
edasi ja avada brauseri.

115
00:05:37,140 --> 00:05:40,410
Ma lähen kasutada Chrome, mida saab kasutada
Kõige tahes brauseri lähinädalatel.

116
00:05:40,410 --> 00:05:42,410
Soovitame tavaliselt Chrome
sest see on eriti

117
00:05:42,410 --> 00:05:43,750
hea tarkvaraarendajatele.

118
00:05:43,750 --> 00:05:46,070
See ju palju ehitatud
vahendid, mis lihtsustavad

119
00:05:46,070 --> 00:05:49,800
arendada mitte ainult HTML ja CSS,
asju hakkame täna räägime,

120
00:05:49,800 --> 00:05:51,530
vaid ka teistes keeltes samuti.

121
00:05:51,530 --> 00:05:55,530
>> Ja ma lähen edasi minna ja minna mina--
Ma lähen juhtimine Kliki või paremal

122
00:05:55,530 --> 00:05:57,210
kliki kusagil veebilehel.

123
00:05:57,210 --> 00:05:59,070
Ja ma lähen kontrollida Element.

124
00:05:59,070 --> 00:06:03,850
Ja ma lähen näpistama minu
ekraan natuke siin.

125
00:06:03,850 --> 00:06:05,790
Lubage mul liikuda selle põhja.

126
00:06:05,790 --> 00:06:08,140
Nii et see on see, mida nimetatakse
Chrome'i inspektor.

127
00:06:08,140 --> 00:06:11,010
Nii et see on nagu silumine
näitaja ehitatud Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Kõik te juba seda
Kui olete kasutanud Chrome.

129
00:06:13,520 --> 00:06:17,169
Ja siis saab näha, mis toimub
kohta all kapuuts mõned veebilehele.

130
00:06:17,169 --> 00:06:19,210
Nii saab tegelikult võtta
vaata seda järgmiselt.

131
00:06:19,210 --> 00:06:21,251
See on viis rohkem funktsioone
ja me hoolime täna.

132
00:06:21,251 --> 00:06:22,760
Aga seal on neid kaarte siin.

133
00:06:22,760 --> 00:06:25,890
Elemendid, võrgu, allikad,
ajakava ja mõned muud kraami.

134
00:06:25,890 --> 00:06:27,800
Ma lähen klikkima
Võrk hetkeks.

135
00:06:27,800 --> 00:06:30,500
>> Ja see on natuke suur
Esmapilgul siin.

136
00:06:30,500 --> 00:06:34,190
Aga mida ma lähen tegema, on lasta
mulle lihtsustada seda natuke.

137
00:06:34,190 --> 00:06:37,560
Ma lähen sisse lülitada
Salvestamise valgust, nii et see on punane.

138
00:06:37,560 --> 00:06:39,140
Ja ma ütlen säilitada samamoodi.

139
00:06:39,140 --> 00:06:41,015
Ja see on vaid väike
asi, mida ma arvasin

140
00:06:41,015 --> 00:06:44,120
aja jooksul, mis läheb säästa
kõik, mis juhtub brauseris.

141
00:06:44,120 --> 00:06:50,030
Ja nüüd ma lähen
to http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Tegelikult teeme www
hea meede, kaldkriips.

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

144
00:06:53,643 --> 00:06:56,180
Nii URL, et paljud
võite käinud.

145
00:06:56,180 --> 00:06:58,830
Ja nüüd Facebook veebi
lk kerkib tipus.

146
00:06:58,830 --> 00:07:02,350
Ja siis terve hunnik
kraam lendas allosas.

147
00:07:02,350 --> 00:07:04,830
Ja tegelikult, selgub, et
kui sa külastad Facebook.com,

148
00:07:04,830 --> 00:07:09,320
sa ei ole lihtsalt teha üks HTTP taotlust,
Selgub, et läheb Facebook.com

149
00:07:09,320 --> 00:07:14,320
saadab 41 neist ümbrikud,
igaühel on oma get taotluse,

150
00:07:14,320 --> 00:07:18,360
märgitud, kuigi taga ekraanil
Siin allosas ekraani,

151
00:07:18,360 --> 00:07:24,040
see näitab, et tõepoolest, mu
brauser tegi 41 taotlustest.

152
00:07:24,040 --> 00:07:29,689
>> Ja kogu see üle 861
kilobaiti ja see võttis miskipärast

153
00:07:29,689 --> 00:07:31,730
tervelt kaheksa sekundit
alla laadida kõike seda.

154
00:07:31,730 --> 00:07:33,790
Nii et tegelikult natuke imelik
et Facebook saidi võtaks selle

155
00:07:33,790 --> 00:07:35,600
pikk, kuid nii on see ka käesoleval juhul.

156
00:07:35,600 --> 00:07:39,520
Nüüd on see kõik ma tõesti ei hooli
umbes välja arvatud tipmine taotluse.

157
00:07:39,520 --> 00:07:46,440
Nii lähme selle ühe siin
ja lubage mul suumimiseks hetkeks.

158
00:07:46,440 --> 00:07:47,754
>> Ja las ma suumida seda.

159
00:07:47,754 --> 00:07:50,670
Mida ma olen teinud on jäänud, kuigi
seal on palju toimub siin

160
00:07:50,670 --> 00:07:53,360
on mul esile
Facebook.com ja seejärel

161
00:07:53,360 --> 00:07:56,540
märgata, et ma alla kerimine,
allakerimine, kerimine alla

162
00:07:56,540 --> 00:07:58,330
nõuda päised.

163
00:07:58,330 --> 00:08:01,720
Ja te näete, et Chrome näitab
mulle sisuliselt sisemine sisu

164
00:08:01,720 --> 00:08:02,810
taotluse tegin.

165
00:08:02,810 --> 00:08:06,130
See ei ole vorming päris sama
Muide, kuid teate, seal on mainitud saada,

166
00:08:06,130 --> 00:08:09,481
märkate seal mainitud peremehe
Facebook.com, tee või kaldkriipsuga

167
00:08:09,481 --> 00:08:10,730
mis on fail palusin.

168
00:08:10,730 --> 00:08:12,930
>> Ja siis, kui ma liikuda
varundada, siis me tegelikult

169
00:08:12,930 --> 00:08:17,270
näha, et mida Facebook tagasi
mulle on kõik need pealkirjad.

170
00:08:17,270 --> 00:08:21,040
Nii sees, et virtuaalne ümbrik
tõepoolest on palju põhiväärtus paari.

171
00:08:21,040 --> 00:08:23,130
Sõna, koolon ja seejärel väärtus.

172
00:08:23,130 --> 00:08:25,050
Sõna, koolon ja väärtus.

173
00:08:25,050 --> 00:08:26,160
Neid nimetatakse päised.

174
00:08:26,160 --> 00:08:31,860
Ja seal on viis siin täpsemalt kui
me tegelikult hoolivad kohe.

175
00:08:31,860 --> 00:08:33,750
>> Aga see on teine
viimane sinna,

176
00:08:33,750 --> 00:08:38,809
märkate, et Facebook.com serverisse,
tõepoolest ütles siin on mingi tekst HTML.

177
00:08:38,809 --> 00:08:41,409
Nii see kõik tähendab
et kui sa taotleda web

178
00:08:41,409 --> 00:08:44,300
lehe brauseri kuni
server, et server vastab

179
00:08:44,300 --> 00:08:47,630
ümbrisglükoproteiiniga oma
mille sees on tekstis.

180
00:08:47,630 --> 00:08:49,020
Teisisõnu, HTML.

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

182
00:08:50,590 --> 00:08:53,200
Milline on teine ​​keel
et tutvustame täna

183
00:08:53,200 --> 00:08:57,740
et inimestele või arvutite genereerida
et rakendada veebilehti.

184
00:08:57,740 --> 00:08:59,580
>> Täpsemalt vaatame seda.

185
00:08:59,580 --> 00:09:03,277
Ma lähen nüüd tagasi minna
Facebooki kodulehel.

186
00:09:03,277 --> 00:09:05,360
Ja ma lähen lihtsalt
kontrolli kliki või paremklõps

187
00:09:05,360 --> 00:09:07,634
ja kliki View Page Source.

188
00:09:07,634 --> 00:09:10,550
Ja isegi kui sa ei kasuta Chrome,
IE ei tee seda, Firefox seda teha,

189
00:09:10,550 --> 00:09:14,060
Safari seda teha, kuigi menüü
võimalused võivad pisut erineda.

190
00:09:14,060 --> 00:09:18,990
Ja see on HTML, et Mark ja
Ettevõte Facebookis on kirjutatud.

191
00:09:18,990 --> 00:09:24,640
>> Ja ühiselt, selles keeles siin
rakendab sinine ja valge leht

192
00:09:24,640 --> 00:09:26,370
me nägime hetk tagasi.

193
00:09:26,370 --> 00:09:28,030
Nüüd on see veidi suur.

194
00:09:28,030 --> 00:09:31,400
Aga kui me vaatame üles ülaosas vasakul, me oleme
kavatsen alustada, et näha mõned mustrid.

195
00:09:31,400 --> 00:09:34,140
Tundub, seal on palju
Nende avatud nurksulu

196
00:09:34,140 --> 00:09:35,970
ja siis seal on see märksõna HTML.

197
00:09:35,970 --> 00:09:38,330
Siin on veel lahtine
nurksulu ja head.

198
00:09:38,330 --> 00:09:41,560
>> Siin on, kui me keri
ja alla ja alla, ma olen

199
00:09:41,560 --> 00:09:43,820
läheb edasi minna ja proovida
otsida midagi.

200
00:09:43,820 --> 00:09:48,510
Seal viis üle paremale
Siin on avatud sulg keha.

201
00:09:48,510 --> 00:09:50,800
Ja mäletate viimast
aega, et tegime ettepaneku

202
00:09:50,800 --> 00:09:53,364
et lihtsam veebileht
et inimene võib kirjutada

203
00:09:53,364 --> 00:09:55,030
näeb ehk midagi sellist.

204
00:09:55,030 --> 00:09:58,430
Avatud HTML tag avatud juht
tag, avatud pealkiri tag,

205
00:09:58,430 --> 00:10:03,230
Seejärel suletakse pealkiri, suletud peas, avatud
body, mingi tekst, suletud keha,

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

207
00:10:04,720 --> 00:10:06,290
>> Aga paus siin hetkeks.

208
00:10:06,290 --> 00:10:09,030
See kood, isegi kui olete
kunagi kirjutatud enne

209
00:10:09,030 --> 00:10:11,864
kuid siiski ei saa päris hästi aru
mis toimub, tundub päris hea.

210
00:10:11,864 --> 00:10:12,821
Õigus, see on väga puhas.

211
00:10:12,821 --> 00:10:14,120
See on väga stiililiselt kena.

212
00:10:14,120 --> 00:10:16,190
Palju taandus ja valge ruum.

213
00:10:16,190 --> 00:10:18,020
Facebook ei ole.

214
00:10:18,020 --> 00:10:23,190
Miks on Facebook nii palju
hullem kui ma kirjutamiseks HTML?

215
00:10:23,190 --> 00:10:24,310
Ilmselt.

216
00:10:24,310 --> 00:10:26,899
>> Õigus, see on nagu üks
viiest stiili.

217
00:10:26,899 --> 00:10:29,315
Seal on mõjuv põhjus
neil lõigatakse need nurkades.

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

219
00:10:31,069 --> 00:10:33,860
Kõik õige, et nad ei taha
oleks lihtsam lugeda.

220
00:10:33,860 --> 00:10:36,940
Nii mõnes mõttes, et nad on
obfuscating see, omamoodi skrambleerimisbittide see

221
00:10:36,940 --> 00:10:40,260
vähemalt esteetiliselt nii
et see on raskem Myspace

222
00:10:40,260 --> 00:10:42,705
minna ja šantažeerima oma
Avaleheks ja HTML ta.

223
00:10:42,705 --> 00:10:45,080
Tuleb välja, et programmid
kuigi, sealhulgas Chrome,

224
00:10:45,080 --> 00:10:47,020
saame puhastada see üles super lihtsalt.

225
00:10:47,020 --> 00:10:49,420
Nii see ei ole päris nii, nagu põhjust.

226
00:10:49,420 --> 00:10:51,290
Mis veel võiks olla põhjuseks.

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

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

229
00:10:54,680 --> 00:10:55,890
Jah, valge ruumi kulude andmed.

230
00:10:55,890 --> 00:10:56,598
Mida sa silmas pead?

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

232
00:11:02,250 --> 00:11:02,979
Jah, täpselt.

233
00:11:02,979 --> 00:11:06,020
Kui vajutad klahvi Tab palju või
tühikut, arvesse mõju.

234
00:11:06,020 --> 00:11:10,060
Nii et iga klahvi on
[Kuuldamatu] esindatud ühe baidi.

235
00:11:10,060 --> 00:11:14,560
>> Nii oletame, et Mark või mõne devs
nendel päevadel tabab tühiku ainult üks kord

236
00:11:14,560 --> 00:11:17,899
Selles HTML lehekülge
esindab Facebook kodulehte.

237
00:11:17,899 --> 00:11:19,690
Ja Facebook on palju
kasutajate nendel päevadel.

238
00:11:19,690 --> 00:11:24,030
Nii oletame, et Facebook kodulehte
külastab miljard inimest täna.

239
00:11:24,030 --> 00:11:27,020
Ja keegi Facebook on
vajuta tühikut, vaid üks kord.

240
00:11:27,020 --> 00:11:29,890
>> Nii veel üks bait,
miljardi taotlusi,

241
00:11:29,890 --> 00:11:32,790
kui palju andmeid on Facebook
kandes üle interneti

242
00:11:32,790 --> 00:11:37,160
sest keegi tabas
tühikut oma klaviatuuri?

243
00:11:37,160 --> 00:11:41,660
Miljard baiti, või üks gigabait
andmed on saadetud Facebook serverid

244
00:11:41,660 --> 00:11:43,626
inimesed ümber
maailma mingit põhjust.

245
00:11:43,626 --> 00:11:44,750
Nüüd, see on lihtsalt üks ruum.

246
00:11:44,750 --> 00:11:48,866
>> Kujutage ette, kui me tegelikult puhastamiseks
asi üles ja liigestatud ta ja lisas,

247
00:11:48,866 --> 00:11:50,990
palju tühja ruumi ja
tab ja tühikute,

248
00:11:50,990 --> 00:11:53,656
sa lõpuks kulutusi gigabaiti,
kui mitte terra baiti rohkem ruumi.

249
00:11:53,656 --> 00:11:56,640
Ja nii super levinud
reaalse maailmaga veebi arengut

250
00:11:56,640 --> 00:11:58,950
on alahindama oma koodi.

251
00:11:58,950 --> 00:12:01,280
Ja me lõpuks näha
kuidas sa võiksid seda teha.

252
00:12:01,280 --> 00:12:04,630
>> Aga täna, me kirjutame koodi
see on tegelikult loetav meile inimestele.

253
00:12:04,630 --> 00:12:10,120
Selgub aga, kui sa lähed tagasi
Selle tööriista Chrome Kontrollige Element,

254
00:12:10,120 --> 00:12:12,030
Varem olime Network alt.

255
00:12:12,030 --> 00:12:15,430
Tuleb välja, et kui te lähete
elemendid tab, mida sa tegelikult näha

256
00:12:15,430 --> 00:12:19,230
on Chrome'i päris trükitud
versioon sama HTML.

257
00:12:19,230 --> 00:12:20,640
Nii oleme deobfuscated ta.

258
00:12:20,640 --> 00:12:22,472
Nii et see on ei sobi arvuti.

259
00:12:22,472 --> 00:12:24,430
Ja nüüd saab tegelikult
kliki ümber ja alustada

260
00:12:24,430 --> 00:12:27,630
näha hierarhiat, mis on veebilehel.

261
00:12:27,630 --> 00:12:28,780
Nii saab tegelikult teha.

262
00:12:28,780 --> 00:12:32,120
Ma lähen edasi minna ja avada edasi
minu Mac programm nimega teksti muuta.

263
00:12:32,120 --> 00:12:35,490
Ja meenutada, et see on lihtsalt
super lihtne tekst programm.

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

265
00:12:37,490 --> 00:12:39,820
Ja ma sõna-sõnalt
tippige järgmine.

266
00:12:39,820 --> 00:12:44,650
Doc tüübist HTML, avatud sulg
HTML, suletud sulg HTML,

267
00:12:44,650 --> 00:12:49,000
meil peas leht siin,
lõpus juht leht siin,

268
00:12:49,000 --> 00:12:52,310
pealkiri on nagu, tere.

269
00:12:52,310 --> 00:12:56,660
>> Ja siis siin peame
keha veebilehel.

270
00:12:56,660 --> 00:12:58,050
Suletud keha.

271
00:12:58,050 --> 00:13:00,700
Ja siis siin, tere.

272
00:13:00,700 --> 00:13:01,270
Hästi.

273
00:13:01,270 --> 00:13:03,350
Nii oleme kirjutanud super kiire veebilehel.

274
00:13:03,350 --> 00:13:06,675
Ma lähen salvestage see
hello.html minu töölaual.

275
00:13:06,675 --> 00:13:09,050
Minu Mac läheb kurdavad,
mõtlesin, et oodake minut,

276
00:13:09,050 --> 00:13:11,091
see on tekstifail, teha
soovite seda kutsuda txt?

277
00:13:11,091 --> 00:13:13,300
Aga ei, ma tahan kasutada dot HTML.

278
00:13:13,300 --> 00:13:16,140
>> Ja mis siis on tore, kui ma
lihtsalt topeltklõps faili,

279
00:13:16,140 --> 00:13:18,600
hello.html, siin on minu veebilehele.

280
00:13:18,600 --> 00:13:22,564
Kahjuks olen
ainus inimene maailmas

281
00:13:22,564 --> 00:13:23,980
kes ei külasta seda lehekülge kohe.

282
00:13:23,980 --> 00:13:26,734
Sest kus ta elab ilmselt?

283
00:13:26,734 --> 00:13:27,650
See on minu Mac, eks?

284
00:13:27,650 --> 00:13:28,470
Milline on kasutu.

285
00:13:28,470 --> 00:13:30,390
Nagu keegi siin ruumis
rääkimata internetis

286
00:13:30,390 --> 00:13:31,598
võib tegelikult külastada seda lehekülge.

287
00:13:31,598 --> 00:13:33,820
Nii et täna peame
tutvustada teise element.

288
00:13:33,820 --> 00:13:36,720
>> Ja teha seda, ma lähen
minna ja avada pilv 9.

289
00:13:36,720 --> 00:13:40,090
Nii pilve 9 on muidugi
pilv põhinev service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- See on kõik meie tööruumid
töötab kusagil internetis.

291
00:13:44,890 --> 00:13:48,330
Ja see tähendab, et kõik meie faile
on avalikkusele kättesaadav juba.

292
00:13:48,330 --> 00:13:49,830
Nii saab minna ja teha seda.

293
00:13:49,830 --> 00:13:53,670
Ma lähen edasi minna ja
Uue faili NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Ma lähen salvestage see enne
kui hello.html ja klõpsake päästa.

295
00:13:58,819 --> 00:14:01,860
Ja nüüd lihtsalt säästa aega, ma lähen
minna ja kopeerida kleebi see kood

296
00:14:01,860 --> 00:14:03,470
mitte korrake seda.

297
00:14:03,470 --> 00:14:04,550
Ja see salvestada.

298
00:14:04,550 --> 00:14:07,550
Ja nii nüüd on mul
fail nimega hello.html.

299
00:14:07,550 --> 00:14:09,710
Aga kuidas ma tegelikult
avada seda veebilehte?

300
00:14:09,710 --> 00:14:14,120
Noh, selgub ehitatud, et CS50
IDE ei ole ainult koostaja nagu rõkkama

301
00:14:14,120 --> 00:14:16,670
ja siluri nagu GDB ja
kobarad teisi programme,

302
00:14:16,670 --> 00:14:21,140
seal on tegelikult küps
veebiserver töötab jooksul CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Kõik te, see tähendab,
on oma veebiserver.

304
00:14:23,900 --> 00:14:26,850
Ja veebiserver on lihtsalt tükk
tarkvara, mille eesmärk elus

305
00:14:26,850 --> 00:14:28,220
on teenida kuni veebilehti.

306
00:14:28,220 --> 00:14:32,490
Kuulata taotlusi brauserid ja
vastata vähe virtuaalne ümbrikud

307
00:14:32,490 --> 00:14:35,290
mille sees on
sisu, mis olen kirjutanud.

308
00:14:35,290 --> 00:14:38,372
Nii et see veebiserver on
tegelikult tasuta ja avatud lähtekoodiga.

309
00:14:38,372 --> 00:14:40,830
Kui avatud lähtekoodiga tähendab lihtsalt
tarkvara, et keegi teine ​​on

310
00:14:40,830 --> 00:14:43,480
kirjutatud, et kõik meist ei saa
tegelikult näha ja alla laadida ning isegi

311
00:14:43,480 --> 00:14:44,780
muuta lähtekoodi.

312
00:14:44,780 --> 00:14:46,150
Ja seda nimetatakse Apache.

313
00:14:46,150 --> 00:14:51,450
>> Ja me oleme teinud natuke lihtsam
kasutada CS50IDE nimetades seda Apache 50.

314
00:14:51,450 --> 00:14:53,780
Nii et see võib tegelikult
mõista järgmine.

315
00:14:53,780 --> 00:14:56,560
Ma ütlen Apache 50 algus.

316
00:14:56,560 --> 00:14:58,910
Ja siis ma lihtsalt ütlen dot.

317
00:14:58,910 --> 00:15:01,080
Ja me näeme mõned mõnevõrra
kauge sõnum

318
00:15:01,080 --> 00:15:04,640
milles Apache dokumendis [? rühmas?]
koju, ubuntu, mis iganes see on,

319
00:15:04,640 --> 00:15:05,770
kaldkriips tööruumi.

320
00:15:05,770 --> 00:15:08,280
Alates veebiserver
Apache 2 edukalt.

321
00:15:08,280 --> 00:15:11,330
>> Nii pikk lugu lühike, ma
just surutakse nupp

322
00:15:11,330 --> 00:15:18,000
ja välja veebiserver, kes on nüüd
kuulata internetis TCP port

323
00:15:18,000 --> 00:15:20,587
80 kindlal aadressil.

324
00:15:20,587 --> 00:15:22,420
Ja ta ütleb siin, ja
see muutub Based

325
00:15:22,420 --> 00:15:26,550
Teie kasutajanimi ja muid tegureid,
aga märkate nüüd, kui ma vajutan seda,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard ja nii ja
nii, märkate, et kõik see aeg

327
00:15:30,211 --> 00:15:31,960
mitmendat
nädalat, siis võib-olla

328
00:15:31,960 --> 00:15:35,200
märkasin, et oma kasutajanimi
on põimitud üleval paremal

329
00:15:35,200 --> 00:15:37,130
nurgas CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> Ja et tegelikult on see kõik
ajalt aadress, mille kaudu saab

331
00:15:41,050 --> 00:15:43,574
külastada kõiki oma faile veebi kaudu.

332
00:15:43,574 --> 00:15:45,990
Seni ei ole Olulised,
sest C, siis üldiselt

333
00:15:45,990 --> 00:15:48,073
tahad asju kulgeb
terminal, mitte netis.

334
00:15:48,073 --> 00:15:50,800
Aga täna, hakkame
kirjalikult veebipõhine koodi

335
00:15:50,800 --> 00:15:53,350
et me tahame
kättesaadav avalik URL.

336
00:15:53,350 --> 00:15:56,100
Mis ma lähen
tegema, on klõpsa selle URL.

337
00:15:56,100 --> 00:16:00,880
>> Ja teate, mis ma näen üsna
kole indeks, firmaregistris,

338
00:16:00,880 --> 00:16:04,090
aga mis faili hüppab välja siis ilmselt?

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

340
00:16:05,210 --> 00:16:07,870
Seda sellepärast, et ma päästsin
faili minu tööruumi.

341
00:16:07,870 --> 00:16:12,310
Ja mida ma olen öelnud, Apache veebiserver
on vaadata Davidi tööruumi kataloogi.

342
00:16:12,310 --> 00:16:15,300
Ja las keegi
maailma näha neid faile.

343
00:16:15,300 --> 00:16:19,050
>> Ja tõepoolest, kui ma nüüd
kliki hello.html,

344
00:16:19,050 --> 00:16:22,180
Ma näen selles tab täpselt, et failist.

345
00:16:22,180 --> 00:16:26,430
Nüüd märkate, pilved 9 teeb
midagi veidi kasulik meile.

346
00:16:26,430 --> 00:16:29,480
Jooksul CS50 IDE, märkate seal
äkki aadressiribale.

347
00:16:29,480 --> 00:16:33,690
Seda sellepärast, et kuigi me oleme
kasutades Chrome külastada CS50IDE,

348
00:16:33,690 --> 00:16:37,940
sees CS50IDE on oma
versioon veebilehitsejat kohe.

349
00:16:37,940 --> 00:16:40,820
Ja nii mitte
keeruliseks asju sellistena,

350
00:16:40,820 --> 00:16:42,955
Ma lähen edasi minna
ja lihtsalt kopeeri see URL.

351
00:16:42,955 --> 00:16:45,330
Ma lähen edasi minna ja lihtsalt
avada oma Chrome aknast.

352
00:16:45,330 --> 00:16:47,800
Seega puudub magic siin ei CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Ma lihtsalt sõna otseses mõttes kleebi
minu J Harvard URL ja vajuta Enter.

354
00:16:51,800 --> 00:16:54,750
Ja voila, nüüd ma ja
teoreetiliselt kõik

355
00:16:54,750 --> 00:16:57,700
Internetis, kui olen seadistatud
vastavad õigused,

356
00:16:57,700 --> 00:16:58,720
saab külastada seda pilti.

357
00:16:58,720 --> 00:17:03,230
Ja nii nüüd, kui ma ütlesin
hello.html, voila, seal

358
00:17:03,230 --> 00:17:06,366
Mul on väga underwhelming veebilehel.

359
00:17:06,366 --> 00:17:07,740
Nii teeme kiire meelerahu kontrolli.

360
00:17:07,740 --> 00:17:09,710
Kuna kõik see
on kontseptuaalne loodud.

361
00:17:09,710 --> 00:17:13,180
Ja me oleme tegelikult ei ole tõesti
õpetatakse, kuidas kirjutada HTML per se.

362
00:17:13,180 --> 00:17:16,084
Kõik küsimused seni
mida see lihtsalt juhtus?

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

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

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

366
00:17:24,290 --> 00:17:25,800
Kas CS50 ise neid veebilehti?

367
00:17:25,800 --> 00:17:26,460
Mis mõttes?

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

369
00:17:28,947 --> 00:17:29,530
Hea küsimus.

370
00:17:29,530 --> 00:17:32,429
Nii CS50 on omab CS50.io.

371
00:17:32,429 --> 00:17:33,970
Me oleme tõepoolest ostis, et domeeninimi.

372
00:17:33,970 --> 00:17:37,240
Ja loomult kutid
logige CS50IDE,

373
00:17:37,240 --> 00:17:39,270
te kõik saada, mida nimetatakse alamdomeen.

374
00:17:39,270 --> 00:17:46,840
>> Nii IDE50-Humala või IDE50-Rob.CS50.io,
mis on sinu sees unikaalne aadress

375
00:17:46,840 --> 00:17:47,730
Meie domeeninime.

376
00:17:47,730 --> 00:17:50,850
Nii eesmärgil käigus,
teil on oma unikaalne aadress.

377
00:17:50,850 --> 00:17:55,150
Aga me oleme lihtsustatud asju
osta tippdomeeni, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O ja siis kõik teised on
sees, et nii-öelda.

379
00:17:58,050 --> 00:17:59,890
Ja me tuleme tagasi, et
paari nädala arvatavasti

380
00:17:59,890 --> 00:18:01,930
eriti lõplik projekt
aega, kui mõned teist

381
00:18:01,930 --> 00:18:03,596
Võiksid saada oma domeeninime.

382
00:18:03,596 --> 00:18:06,270
See on tegelikult suhteliselt
lihtne.

383
00:18:06,270 --> 00:18:06,770
Hästi.

384
00:18:06,770 --> 00:18:07,880
Nii saab nüüd teha.

385
00:18:07,880 --> 00:18:11,910
Ma lähen tagasi
CS50IDE, kus mu faili kohe,

386
00:18:11,910 --> 00:18:14,710
hello.html, ei ole nii huvitav.

387
00:18:14,710 --> 00:18:17,130
Sooviksin teha midagi
veidi kenamaks kui see.

388
00:18:17,130 --> 00:18:19,440
Nii et ma teen midagi sellist.

389
00:18:19,440 --> 00:18:21,510
Lubage mul avatud paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Nii et see on faili kirjutasin eelnevalt.

391
00:18:23,560 --> 00:18:26,480
Ülaosas see, nagu
Alati on meil kommentaarid.

392
00:18:26,480 --> 00:18:28,730
Aga HTML, kommentaarid
pisut erineda.

393
00:18:28,730 --> 00:18:33,270
On line kolm ja joon 14, siis
vaata süntaks alustatakse kommentaari

394
00:18:33,270 --> 00:18:34,020
ja lõpuks kommentaari.

395
00:18:34,020 --> 00:18:36,820
>> Aga ükski kraami
vahel küsimustes funktsionaalselt.

396
00:18:36,820 --> 00:18:40,250
See on lihtsalt märkme
inimese, mis toimub siin.

397
00:18:40,250 --> 00:18:43,040
Ja nagu kiire meelerahu
vaadake, kui ma keri,

398
00:18:43,040 --> 00:18:46,820
Milline on ilmne uusi
tag, et oleme kasutusele?

399
00:18:46,820 --> 00:18:52,130
Tags seni oleme näinud on avatud
sulg HTML juht, pealkiri ja keha.

400
00:18:52,130 --> 00:18:54,400
Aga mis on ilmselt uue nüüd?

401
00:18:54,400 --> 00:18:55,200
>> Jah, nii p.

402
00:18:55,200 --> 00:18:57,320
P tag või lõikes tag.

403
00:18:57,320 --> 00:19:01,182
Ja siis ma lihtsalt laenatud default
Ladina teksti moodustavad minu punktid.

404
00:19:01,182 --> 00:19:03,390
Sest see, mis ma tahtsin
näidata, kuidas te võite

405
00:19:03,390 --> 00:19:05,859
esindavad paragrahvi teksti HTML.

406
00:19:05,859 --> 00:19:08,400
Ja mis on hakanud juhtuma
siin on see, et seal on juba

407
00:19:08,400 --> 00:19:09,657
muster arendada.

408
00:19:09,657 --> 00:19:10,990
Ja lubage mul minna ja teha seda.

409
00:19:10,990 --> 00:19:12,760
Lubage mul kõigepealt välja lülitada Apache.

410
00:19:12,760 --> 00:19:17,340
Ja ma ütlen, et alustada ise
jälle sees tänapäeva allikas seitse

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

412
00:19:18,420 --> 00:19:20,100
Nii et mul on juurdepääs kõike.

413
00:19:20,100 --> 00:19:22,230
>> Ja nüüd, kui ma lähen tagasi
Selle kataloogi sisu,

414
00:19:22,230 --> 00:19:24,846
märka ma näen iga faili täna.

415
00:19:24,846 --> 00:19:26,720
Ja te näete, et
Järgmine probleem komplekti, siis me

416
00:19:26,720 --> 00:19:28,594
teile juhiseid
teeme just seda.

417
00:19:28,594 --> 00:19:35,210
Kui ma avan paragraphs.html, võib see
samuti välja nagu programmeerimiskeelt

418
00:19:35,210 --> 00:19:36,970
kui sa ei räägi või lugeda ladina keeles.

419
00:19:36,970 --> 00:19:40,525
Aga see on vaid kolm lõiku
teksti, mis on märgistatud HTML.

420
00:19:40,525 --> 00:19:43,100
>> Ja märka lõikes
vaheaegadega.

421
00:19:43,100 --> 00:19:46,400
Kuna selgub,
ja kuigi sa

422
00:19:46,400 --> 00:19:49,210
olla valmis selleks,
samas reaalses maailmas,

423
00:19:49,210 --> 00:19:51,370
kui sa tahad panna line
pause vahel asju,

424
00:19:51,370 --> 00:19:55,680
Sa võid lihtsalt
Selleks tabas Save.

425
00:19:55,680 --> 00:19:59,460
Ja nüüd, kui ma uuesti siin, teate
et kõik lihtsalt hägustab kokku

426
00:19:59,460 --> 00:20:01,100
vaid üks kämp teksti.

427
00:20:01,100 --> 00:20:03,570
Kuna HTML on selline loll keeles.

428
00:20:03,570 --> 00:20:07,230
>> See on mõeldud kasutamiseks selliste
nii, et brauser ainult

429
00:20:07,230 --> 00:20:09,920
teha selgelt, mida sa öelda tahad.

430
00:20:09,920 --> 00:20:12,890
Nii et kui sa ei ütle seda
anna mulle uus lõige,

431
00:20:12,890 --> 00:20:14,569
sa ei kavatse näha uus lõige.

432
00:20:14,569 --> 00:20:16,360
Ja tegelikult, mida
brauseri tegema hakkab

433
00:20:16,360 --> 00:20:20,020
isegi kui sa Enter,
oletame uuesti ja uuesti

434
00:20:20,020 --> 00:20:23,190
ja jälle liigub see tekst teed
Ekraanil väheneb ja seejärel salvestada

435
00:20:23,190 --> 00:20:26,610
ja pange brauser läheb
ahendada kõik, et valge ruumi

436
00:20:26,610 --> 00:20:29,021
arvesse vaid ühe nähtav tühik.

437
00:20:29,021 --> 00:20:29,520
Hästi.

438
00:20:29,520 --> 00:20:30,869
Nii et lõikes tag.

439
00:20:30,869 --> 00:20:32,910
Ja mis siis on muster
mis areneb siin?

440
00:20:32,910 --> 00:20:37,450
Noh, see tundub olevat nii, et
HTML on kõike alustades tag

441
00:20:37,450 --> 00:20:38,460
ja lõpetades tag.

442
00:20:38,460 --> 00:20:39,300
Ja mis on silt?

443
00:20:39,300 --> 00:20:41,160
Noh, see on lihtsalt patakas süntaks.

444
00:20:41,160 --> 00:20:44,400
Avatud sulg, märksõna,
suletud sulg, on tag.

445
00:20:44,400 --> 00:20:45,510
Või alustada tag.

446
00:20:45,510 --> 00:20:48,590
Ja siis, kui sa oled
teinud väljendada ennast,

447
00:20:48,590 --> 00:20:52,300
kui sa oled teinud lõikes,
sa nii rääkida vastupidist.

448
00:20:52,300 --> 00:20:55,480
Aga vastupidine ei ole päris tahapoole.

449
00:20:55,480 --> 00:21:00,630
>> Sa lihtsalt eesliide sama sildi
nimi kaldkriipsuga niimoodi.

450
00:21:00,630 --> 00:21:01,130
Hästi.

451
00:21:01,130 --> 00:21:02,570
Nii ei ole sugugi nii põnev.

452
00:21:02,570 --> 00:21:05,270
Ja tegelikult, me ei tee
web kõik, et huvitavam.

453
00:21:05,270 --> 00:21:07,630
Mis siis, kui ma tahan teha
asjad suuremaks ja julge?

454
00:21:07,630 --> 00:21:11,780
Nii selgub, et siin on näide
in headings.html, kus mu keha,

455
00:21:11,780 --> 00:21:17,280
Mul on H1 tag, H2, H3,
nelja, viie või kuue, mis kõik

456
00:21:17,280 --> 00:21:18,310
tunduda üsna kauge.

457
00:21:18,310 --> 00:21:21,010
Aga kui ma lähen avada
Näiteks võtame pilk.

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

459
00:21:22,490 --> 00:21:27,030
>> Nii brauserid vaikimisi teile anda teksti
see on suur ja julge erinevad suurused.

460
00:21:27,030 --> 00:21:28,070
H1 on suur.

461
00:21:28,070 --> 00:21:31,240
H6 on väiksem ja seejärel
kõik muu vahel.

462
00:21:31,240 --> 00:21:34,170
Nii et huvitav, kuid siiski
ei ole tõesti web ma tean.

463
00:21:34,170 --> 00:21:36,870
Mis siis, kui me tahame, et mul on
midagi nimekirja. .

464
00:21:36,870 --> 00:21:40,190
Nii et siin on täppidega nimekirja
kolm Harvardi maju.

465
00:21:40,190 --> 00:21:41,600
>> Kuidas sa minna seda teed?

466
00:21:41,600 --> 00:21:45,410
Noh, kui heita pilk list.html.

467
00:21:45,410 --> 00:21:47,870
Ja siin me näeme
natuke funkiness

468
00:21:47,870 --> 00:21:49,630
kuid Vaatleme, mis toimub.

469
00:21:49,630 --> 00:21:56,182
Nii selle põhjal, mida sa oled näinud,
UL tähistab järjestamata nimekirja.

470
00:21:56,182 --> 00:21:57,640
Tavalise nimekirja tähendab lihtsalt täppidega.

471
00:21:57,640 --> 00:21:58,431
Pole numbrid.

472
00:21:58,431 --> 00:22:01,850
Seal on ka midagi, mida nimetatakse
järjestuses, mis on OL kell tag.

473
00:22:01,850 --> 00:22:05,350
Siis LI, loendiüksusele on kõik see tähendab.

474
00:22:05,350 --> 00:22:07,790
>> Ja nii see automaatselt
numbrid kõike teile.

475
00:22:07,790 --> 00:22:11,270
Aga jälle, kõik mu taandus
ja valge ruum on lihtsalt minu pärast.

476
00:22:11,270 --> 00:22:13,050
Brauser ei ole
tegelikult läheb huvita.

477
00:22:13,050 --> 00:22:16,670
Nii et isegi kui sa ei saanud
Selleks, lihtsalt olla kindel,

478
00:22:16,670 --> 00:22:19,880
siis ei tohiks kuigi
Brauseri ikkagi

479
00:22:19,880 --> 00:22:22,130
aru saama, et just fine.

480
00:22:22,130 --> 00:22:24,590
Ma lööb reload oma
brauser, ma klikkides reload

481
00:22:24,590 --> 00:22:26,760
ja ei muutu toimub
sest brauser veel

482
00:22:26,760 --> 00:22:29,550
teeb täpselt seda, mida ma ütlen seda teha.

483
00:22:29,550 --> 00:22:30,050
>> Hästi.

484
00:22:30,050 --> 00:22:31,340
Nii et see kõik on lihtsalt teksti.

485
00:22:31,340 --> 00:22:33,730
Nüüd teeme midagi huvitavat.

486
00:22:33,730 --> 00:22:36,660
Ma lähen edasi minna ja
laenata seda HTML.

487
00:22:36,660 --> 00:22:40,910
Ma lähen edasi minna ja
luua uus pilt siin.

488
00:22:40,910 --> 00:22:43,370
Ja me nimetame seda rick.html.

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

490
00:22:46,190 --> 00:22:48,916
Meil on ebaproportsionaalselt
Kasutatud midagi

491
00:22:48,916 --> 00:22:51,290
nimetatakse rick roll selles
klassi sel aastal, ma ei tea,

492
00:22:51,290 --> 00:22:53,880
see lihtsalt juhtus orgaaniliselt.

493
00:22:53,880 --> 00:22:55,397
>> Ja nüüd on see väljusid kontrolli alt.

494
00:22:55,397 --> 00:22:56,730
Nii et ma lähen lihtsalt minna sellega.

495
00:22:56,730 --> 00:22:59,700
Ja kui ma lähen Google
Pildid ja Rick Astley.

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

497
00:23:02,450 --> 00:23:06,170
Kui sa ei tea, miks me seda teeme
see lihtsalt lugeda üles Wikipedia.

498
00:23:06,170 --> 00:23:11,520
Iga kord, kui olete klikkinud lingile,
keegi naernud kusagil.

499
00:23:11,520 --> 00:23:14,860
Ja lase mul minna ahead-- seal
me läheme, olgem näha seda pilti.

500
00:23:14,860 --> 00:23:16,750
>> Nii et siin on meil
image Google Images.

501
00:23:16,750 --> 00:23:19,390
Ja Oletame, et see on
mõistlikult kõikjal internetis.

502
00:23:19,390 --> 00:23:22,570
Nii et ma lähen eeldada, et see on OK minu jaoks
tegelikult panna see minu veebilehele.

503
00:23:22,570 --> 00:23:24,820
Ma lähen edasi minna
ja kopeerida URL.

504
00:23:24,820 --> 00:23:28,600
Ja nüüd, kui ma lähen tagasi Cloud
9, vaatame, mis teha siin.

505
00:23:28,600 --> 00:23:30,630
Nii et siin on lihtsalt veebilehele.

506
00:23:30,630 --> 00:23:39,020
See on Rick Astley, haha,
Ma lähen nüüd tagasi minna

507
00:23:39,020 --> 00:23:43,510
minu brauser, reload, ja huvitav.

508
00:23:43,510 --> 00:23:44,530
>> Kus on Rick?

509
00:23:44,530 --> 00:23:46,050
Nii et lubage mul vaadata, mis juhtus.

510
00:23:46,050 --> 00:23:49,114
Tegelikult, ma lähen
teeselda nagu ma ei teinud seda.

511
00:23:49,114 --> 00:23:50,280
[Kuuldamatu] pani ta siin.

512
00:23:50,280 --> 00:23:52,520
Me tuleme tagasi, et ühel hetkel.

513
00:23:52,520 --> 00:23:54,200
Nii et siin on rick.html.

514
00:23:54,200 --> 00:23:56,070
Nii et see ei Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Nii selgub saame
tegelikult lisada teda siin.

516
00:23:59,680 --> 00:24:00,830
See on Rick Astley.

517
00:24:00,830 --> 00:24:06,680
Ma ütlen mulle pildi, kelle
allikas on URL ma lihtsalt kopeerida, mille

518
00:24:06,680 --> 00:24:09,110
Ilmselt on õnnelik
sünnipäeva või millegi muu.

519
00:24:09,110 --> 00:24:13,280
>> Ja nüüd ma lähen
sulgeda tag niimoodi.

520
00:24:13,280 --> 00:24:15,170
Nii et see on ümbriste super pikk.

521
00:24:15,170 --> 00:24:17,740
Aga teate, et ma olen
teha on avatud sulg pilti,

522
00:24:17,740 --> 00:24:20,270
allikas atribuut seda.

523
00:24:20,270 --> 00:24:21,530
Ja see on tõesti pikk URL.

524
00:24:21,530 --> 00:24:23,720
Ja päris lõpus, märka seda.

525
00:24:23,720 --> 00:24:29,530
Miks ma olen teinud kaldkriipsuga angled sulg
selle asemel, nagu iga teine ​​silt,

526
00:24:29,530 --> 00:24:33,590
võttes avatud sulg,
IMG suletud sulg?

527
00:24:33,590 --> 00:24:37,040
Võtke vist isegi siis, kui
ei ole harjunud üldse

528
00:24:37,040 --> 00:24:40,410
HTML varem.

529
00:24:40,410 --> 00:24:42,710
>> Nii see on, kuidas see sulgub
käsu, kuid miks

530
00:24:42,710 --> 00:24:45,850
see ei ole tõesti intuitiivne
mõtet teha midagi veidi

531
00:24:45,850 --> 00:24:48,820
lobise nagu tihe pilti?

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

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

534
00:24:52,000 --> 00:24:55,620
Just semantiliselt, ei ole mõttes
alates pilti ja lõpetades pilt,

535
00:24:55,620 --> 00:24:56,870
see kas on või seda ei ole.

536
00:24:56,870 --> 00:25:00,960
Seega ei ole mõtet jätta lõhe
midagi muud sees pilt.

537
00:25:00,960 --> 00:25:02,010
Sa lihtsalt ei saa seda teha.

538
00:25:02,010 --> 00:25:03,720
Ja nii süntaks
korral oleks lihtsalt

539
00:25:03,720 --> 00:25:07,910
teha kaldkriipsuga sees
Avatud tag või algusmärgendi

540
00:25:07,910 --> 00:25:09,020
ja siis vajuta Save.

541
00:25:09,020 --> 00:25:13,350
>> Nii et kui ma nüüd uuesti selle faili, nüüd
Mul on hea veebilehe toiduvalmistamise siin.

542
00:25:13,350 --> 00:25:15,100
Ja me võiksime kindlasti
tõesti tüütama inimesi

543
00:25:15,100 --> 00:25:17,010
kinnistades asemel
nagu YouTube link.

544
00:25:17,010 --> 00:25:19,350
Ja tegelikult, ükskõik millal
olete kunagi läinud YouTube,

545
00:25:19,350 --> 00:25:22,190
ja las ma tegelikult kogemata
Rick rulli ennast siin.

546
00:25:22,190 --> 00:25:25,770
Nii Rick roll.

547
00:25:25,770 --> 00:25:29,592
Nii Rick roll-- ma lähen siin.

548
00:25:29,592 --> 00:25:31,900
>> [Muusika mängib]

549
00:25:31,900 --> 00:25:33,730
>> OK, üks inimene meeldis seda.

550
00:25:33,730 --> 00:25:37,270
Nii märkate kõik see aeg, kui te
kliki Share link, siis muidugi

551
00:25:37,270 --> 00:25:41,390
saada URL, et saate tegelikult
kinnistada talle või kohtuekspertiisi pilt

552
00:25:41,390 --> 00:25:43,730
või probleem esitatud või slaidi.

553
00:25:43,730 --> 00:25:49,055
Ja nüüd, kui ma selle asemel klõpsata embed,
märgata, et kogu see aeg, seda kraami

554
00:25:49,055 --> 00:25:49,680
on olemas.

555
00:25:49,680 --> 00:25:50,910
Ma lähen edasi minna ja kopeeri see.

556
00:25:50,910 --> 00:25:54,000
>> Ja just nii me näeme seda parem, ma olen
läheb kleepige see oma tekstiredaktoris.

557
00:25:54,000 --> 00:25:55,860
Pange tähele, et see, mida
YouTube on teile rääkinud.

558
00:25:55,860 --> 00:25:57,693
Iga kord, kui külastada
YouTube video, kui te

559
00:25:57,693 --> 00:26:00,410
soovite embed video oma
Veebilehe lihtsalt rüütama see.

560
00:26:00,410 --> 00:26:03,350
Nii et see on järjekordne
HTML sildi iframe.

561
00:26:03,350 --> 00:26:04,590
Või on raamiks.

562
00:26:04,590 --> 00:26:08,680
Seega liiga paistab pisut rohkem
keerulisem kui kõik teised.

563
00:26:08,680 --> 00:26:11,950
Nii selgub, et pilti
tag ja ilmselt iframe tag

564
00:26:11,950 --> 00:26:13,370
võtta nn atribuudid.

565
00:26:13,370 --> 00:26:15,710
>> Ja see on veel üks
tükk süntaks HTML.

566
00:26:15,710 --> 00:26:19,240
Lisaks sildi
nimi, avatud sulg sildi nimi

567
00:26:19,240 --> 00:26:23,780
saate kontrollida käitumist tag
võttes terve hunnik atribuut

568
00:26:23,780 --> 00:26:24,860
võrdub väärtusega.

569
00:26:24,860 --> 00:26:26,290
Oskus võrdne väärtus.

570
00:26:26,290 --> 00:26:28,100
Ja nii näiteks
YouTube on meile

571
00:26:28,100 --> 00:26:31,990
Kui soovite laiusega video
olema 420 pikslit ja kõrgus

572
00:26:31,990 --> 00:26:35,470
olla 315 pikslit, mis on
kuidas väljendada seda HTML.

573
00:26:35,470 --> 00:26:38,480
>> Allikas video läheb
olla nii kaua YouTube URL

574
00:26:38,480 --> 00:26:40,830
ja siis mõned muud kraami
nagu Raami on null,

575
00:26:40,830 --> 00:26:43,500
nii et ilmselt tähendab seal
no raami asi.

576
00:26:43,500 --> 00:26:45,450
Laske täisekraanil ilmselt
tähendab, et kasutaja

577
00:26:45,450 --> 00:26:47,840
võib klõpsata nuppu ja
tegelikult täisekraanil video.

578
00:26:47,840 --> 00:26:52,870
Nii et kui ma tõesti tahan olla
muljetavaldav siin Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
mitte kasutada pildi tag, las
minu kustutada, et mitte kleepida.

580
00:26:58,490 --> 00:27:00,810
Ja nüüd uuesti.

581
00:27:00,810 --> 00:27:02,500
Ja nüüd siin me läheme uuesti.

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

583
00:27:04,979 --> 00:27:06,020
Olgu, see on piisavalt.

584
00:27:06,020 --> 00:27:08,970
Kõik õige, ma püüan
raske mitte teha seda uuesti.

585
00:27:08,970 --> 00:27:11,400
Millised on mõned takeaways siin?

586
00:27:11,400 --> 00:27:15,130
Nii HTML, nii kole kui neid veebilehti
on, on tegelikult üsna lihtne.

587
00:27:15,130 --> 00:27:16,467
See ei ole programmeerimiskeel.

588
00:27:16,467 --> 00:27:17,550
See ei pea funktsioone.

589
00:27:17,550 --> 00:27:18,410
See ei pea silmad.

590
00:27:18,410 --> 00:27:19,535
See ei pea tingimused.

591
00:27:19,535 --> 00:27:22,900
Kõik see on on kümneid
eri silte, millest igaüks

592
00:27:22,900 --> 00:27:24,620
on null või enam atribuute.

593
00:27:24,620 --> 00:27:27,320
Ja tegelikult, millised on lõbus kohta
HTML kui hakkate sukelduda

594
00:27:27,320 --> 00:27:29,560
on see, et see on väga self sõnavõtlik.

595
00:27:29,560 --> 00:27:32,880
>> Kõik see võtab on arusaam
üldise raamistiku HTML.

596
00:27:32,880 --> 00:27:36,510
Mis on silt, mis on atribuut,
kuidas sa tegelikult seadistada veebilehe

597
00:27:36,510 --> 00:27:37,250
järgnevalt.

598
00:27:37,250 --> 00:27:40,720
Ja kõik muu on tõesti tulemus
soojaks online-viide

599
00:27:40,720 --> 00:27:43,080
või googling kuidas teha mõned
tehnika või nagu me oleme näinud,

600
00:27:43,080 --> 00:27:45,371
Vaadates Facebook allikas
kood, vaadates veebileht

601
00:27:45,371 --> 00:27:48,710
mis sulle meeldib on see lähtekoodi ja
mõista, kuidas arendajad seal

602
00:27:48,710 --> 00:27:50,550
tegelikult ette asju teha.

603
00:27:50,550 --> 00:27:52,180
>> Nii saame teha pilte ka.

604
00:27:52,180 --> 00:27:53,994
Ja tegelikult, me tegime seda hetk tagasi.

605
00:27:53,994 --> 00:27:55,410
Lubage mul minna ja lihtsalt näitan sulle.

606
00:27:55,410 --> 00:27:56,770
Siin on mõned proovi kood.

607
00:27:56,770 --> 00:27:58,380
Kui sa kunagi tahad näha tõre kass.

608
00:27:58,380 --> 00:28:00,620
Nii märkate, et ma suudan
on pilt tag siin.

609
00:28:00,620 --> 00:28:02,090
Ja mul on kommentaar selle kohal.

610
00:28:02,090 --> 00:28:04,490
Mul alternatiivi
teksti kättesaadavuse.

611
00:28:04,490 --> 00:28:07,250
Nii et keegi, kes on kasutades ekraani
Lugeja põhjustel vaatepilt

612
00:28:07,250 --> 00:28:10,172
võib tegelikult siis on nende
ekraanilugeja öelda tõre kass.

613
00:28:10,172 --> 00:28:11,880
Sest kui nad ei saa
vaata pilti, nad

614
00:28:11,880 --> 00:28:14,504
saab vähemalt on oma arvuti
ütle neile verbaalselt, mis see on.

615
00:28:14,504 --> 00:28:18,020
Ja allikas, et fail on cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Nii et tegelikult, kui ma tõesti tahtsin
saada tark, mida ma oleks võinud done--

617
00:28:22,472 --> 00:28:25,680
Ma luban mitte minna Rick Astley, nii
Ma lähen google kass asemel.

618
00:28:25,680 --> 00:28:28,290
Ja kui ma lähen Google Images
siin, ja me eeldame

619
00:28:28,290 --> 00:28:30,040
et see on pilt minu kass.

620
00:28:30,040 --> 00:28:35,070
>> Oletame, et mul on kontrolli klõpsanud
või klõpsata selle kogemata

621
00:28:35,070 --> 00:28:35,630
jube.

622
00:28:35,630 --> 00:28:40,320
Ja cat.jpeg ma lähen
päästa minu töölaual.

623
00:28:40,320 --> 00:28:44,700
Lubage mul nüüd minna tagasi pilve 9.

624
00:28:44,700 --> 00:28:48,150
Pange tähele, et siin, ma ei saa
mine laadida kohalikku faili.

625
00:28:48,150 --> 00:28:51,530
Ja kui ma haarata selle
faili, cat.jpeg, teate

626
00:28:51,530 --> 00:28:54,674
et ma ei lohista ja
raputage see pilv 9

627
00:28:54,674 --> 00:28:56,090
ja see läheb peale karjuda siin.

628
00:28:56,090 --> 00:28:59,000
>> Sest me oleme juba
andnud teile cat.jpeg faili

629
00:28:59,000 --> 00:29:01,430
aga see on super lihtne
haarata photo, et olete

630
00:29:01,430 --> 00:29:03,220
võetud Facebook
või Flickr vms

631
00:29:03,220 --> 00:29:05,678
ja tegelikult lohistada see
arvesse pilv 9 ja siis oleks

632
00:29:05,678 --> 00:29:07,970
osa oma isikliku
veebisait või probleem

633
00:29:07,970 --> 00:29:10,442
pani seitse või kaheksa, kui me kohe näha.

634
00:29:10,442 --> 00:29:12,150
Ja siis, kui sa
Lõpuks külastada, et kass,

635
00:29:12,150 --> 00:29:16,610
eeldades, ma alla, et sama kass,
teate selle-- et oli jumalik.

636
00:29:16,610 --> 00:29:19,160
>> Mis sa näeksid on
midagi sellist nägu siin.

637
00:29:19,160 --> 00:29:21,810
Nii failide
viide jooksul veebilehe

638
00:29:21,810 --> 00:29:26,050
võib olla kas kohalik oma
konto või serveri mõnel teisel server

639
00:29:26,050 --> 00:29:29,670
nagu näiteks, et Rick
Astley photo natuke tagasi.

640
00:29:29,670 --> 00:29:32,990
Nii et kui else-- mida
me saame teha siin?

641
00:29:32,990 --> 00:29:34,890
Võtame pilk järgmine.

642
00:29:34,890 --> 00:29:36,160
Sa tead, mis selline lahe?

643
00:29:36,160 --> 00:29:39,330
>> Meil on seni olnud tegemist
väga staatiline veebilehti.

644
00:29:39,330 --> 00:29:41,830
Ma tahan vürtsi asju üles järgmiselt.

645
00:29:41,830 --> 00:29:44,344
Ma tahan teha oma otsingumootori.

646
00:29:44,344 --> 00:29:47,010
Nii, et otsingumootor, olgem
minna ja hakata seda tegema.

647
00:29:47,010 --> 00:29:52,570
Ma lähen edasi minna ja luua
uus fail nimega search.html.

648
00:29:52,570 --> 00:29:54,890
Ja me oleme prefabed versioonid online.

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

650
00:29:56,027 --> 00:29:57,610
Ärge kleepige oma terminali aknas.

651
00:29:57,610 --> 00:29:58,744
Prefab versioonid online.

652
00:29:58,744 --> 00:30:00,160
Ja ma hakkan järgmiselt.

653
00:30:00,160 --> 00:30:04,490
Nii et siin on algusest
fail nimega search.html.

654
00:30:04,490 --> 00:30:07,510
Ma lähen salvestada
Tänapäeva allikas kataloog.

655
00:30:07,510 --> 00:30:09,079
Ma nimetan seda Search.

656
00:30:09,079 --> 00:30:10,370
Tegelikult me ​​teeme seda parem.

657
00:30:10,370 --> 00:30:13,600
CS50 Otsi ja tegelikult brändi see.

658
00:30:13,600 --> 00:30:17,500
Ja nüüd, ma ütlen
midagi H1 CS50 Otsi.

659
00:30:17,500 --> 00:30:20,930
Ja siis siia, H2 varsti.

660
00:30:20,930 --> 00:30:23,230
Ja just jäämast, H1 ja
H2 tähenda see, mida vastavalt?

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

662
00:30:26,750 --> 00:30:30,320
>> Jah, nii suur ja julge, ja
ei ole nii suur, kuid siiski julge.

663
00:30:30,320 --> 00:30:37,375
Nii et kui ma hoian seda ja minna üle siin,
Vaatame faili search.html.

664
00:30:37,375 --> 00:30:42,560
Kõik õige, ja see üks
on right-- [kuuldamatu].

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

666
00:30:46,980 --> 00:30:49,110
Ootel.

667
00:30:49,110 --> 00:30:49,945
David on segaduses.

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

669
00:30:52,610 --> 00:30:54,080
Oh, see on seal.

670
00:30:54,080 --> 00:30:54,860
David on idioot.

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

672
00:30:55,420 --> 00:30:56,660
Nii et see on.

673
00:30:56,660 --> 00:30:58,350
Nii CS50 otsing varsti.

674
00:30:58,350 --> 00:31:00,370
Nüüd oletame, sünteesida
mida me tegime eelmisel nädalal.

675
00:31:00,370 --> 00:31:03,400
>> Kus me rääkisime
madalamal tasemel mehaanika HTTP.

676
00:31:03,400 --> 00:31:05,780
Ja neid uusi ideid
HTML, mis on lihtsalt

677
00:31:05,780 --> 00:31:08,890
Selle märgistuskeel, kus te
rääkige brauser täpselt, mida teha

678
00:31:08,890 --> 00:31:10,740
ja rakendada oma otsingumootori.

679
00:31:10,740 --> 00:31:12,520
Nii et selle asemel, et lihtsalt
öeldes varsti, ma olen

680
00:31:12,520 --> 00:31:14,810
tuvustada
midagi, mida nimetatakse vormi tag.

681
00:31:14,810 --> 00:31:19,610
Ja sellisel kujul, ma lähen
on midagi sisestusväli.

682
00:31:19,610 --> 00:31:22,450
>> Ja nime selle sisendi
valdkonnas, ma lähen kutsun seda Q.

683
00:31:22,450 --> 00:31:26,240
Ja millist tüüpi see sisestusväli
Ma ütlen lihtsalt "text".

684
00:31:26,240 --> 00:31:29,130
Ja tekstivälja, nagu me tulen
vaata, on lihtsalt teksti kasti.

685
00:31:29,130 --> 00:31:32,830
Ja nii see ei tunneta siin on
midagi sees on sel hetkel.

686
00:31:32,830 --> 00:31:35,320
Ja nii ma lihtsalt lähen
sulgeda silt, et

687
00:31:35,320 --> 00:31:38,099
kaldkriipsuga õige tag ise.

688
00:31:38,099 --> 00:31:39,890
Ja siis ma lähen
on üks teine ​​sisend.

689
00:31:39,890 --> 00:31:43,480
Input type võrdub esitada.

690
00:31:43,480 --> 00:31:45,320
Ja siis ma lähen
sulgeda see ka.

691
00:31:45,320 --> 00:31:46,840
>> Ja nüüd ma lähen siia tagasi.

692
00:31:46,840 --> 00:31:49,520
Ja juba näeme,
kuigi päris kole, ma olen

693
00:31:49,520 --> 00:31:52,460
sai alguse
minu otsingu lehekülge siin.

694
00:31:52,460 --> 00:31:55,150
Tegelikult, las ma püüan
puhastada selle üles natuke.

695
00:31:55,150 --> 00:31:57,330
Selgub, et on
input siin, saan

696
00:31:57,330 --> 00:31:59,910
teine ​​omadus nimega kohatäide.

697
00:31:59,910 --> 00:32:05,165
Ja ma võin näha midagi märksõnu
või täpsemalt, otsingusõnaks q.

698
00:32:05,165 --> 00:32:07,820
>> Ja teate, nüüd on mul
selline hall tekst

699
00:32:07,820 --> 00:32:10,440
et kaob
Niipea, kui ma kirjutama hakata,

700
00:32:10,440 --> 00:32:12,930
aga see on ilmselt midagi
olete näinud teistes veebilehti.

701
00:32:12,930 --> 00:32:14,650
Ma tõesti ei meeldi nuppu Esita.

702
00:32:14,650 --> 00:32:18,320
Nii et ma tegelikult toimub anda
Saada nuppu väärtuses otsing.

703
00:32:18,320 --> 00:32:21,680
Ja nüüd, kui ma uuesti, märkad, et
minu nupp muutub nimega otsing.

704
00:32:21,680 --> 00:32:24,140
Tead, ma tõesti ei
nagu logo siin.

705
00:32:24,140 --> 00:32:27,140
Nii Google Font generaator.

706
00:32:27,140 --> 00:32:28,820
>> Ma tahan vürtsi see üles veelgi.

707
00:32:28,820 --> 00:32:30,660
Nii CS50 otsing.

708
00:32:30,660 --> 00:32:31,870
Lubage mul luua oma logo.

709
00:32:31,870 --> 00:32:33,080
See ilus.

710
00:32:33,080 --> 00:32:36,945
Nüüd lubage mul salvestada kui-- tule.

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

712
00:32:40,710 --> 00:32:43,120
Kus see läheb?

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

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

715
00:32:44,160 --> 00:32:44,980
Vastamata seda.

716
00:32:44,980 --> 00:32:47,740
Salvesta kui.

717
00:32:47,740 --> 00:32:49,470
Stupid brauseritega.

718
00:32:49,470 --> 00:32:51,700
Stand by me läheme
määrata see üks kord ja kõik.

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

720
00:32:57,650 --> 00:32:58,590
Seal me läheme.

721
00:32:58,590 --> 00:32:59,090
Hästi.

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

723
00:32:59,600 --> 00:33:00,750
Väljas päev.

724
00:33:00,750 --> 00:33:02,310
Nüüd see on funky.

725
00:33:02,310 --> 00:33:03,160
Exit täisekraanil.

726
00:33:03,160 --> 00:33:04,150
Hästi.

727
00:33:04,150 --> 00:33:06,870
>> Nüüd nagu tavaline
isik, salvestada pilt.

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

729
00:33:08,810 --> 00:33:13,194
Nüüd ma lähen minema CS50IDE ja
Ma lähen lihtsalt haarata logo,

730
00:33:13,194 --> 00:33:15,360
Ma lähen lohista see
minu allikas seitse kataloog,

731
00:33:15,360 --> 00:33:17,002
fail on juba olemas, ma olen OK sellega.

732
00:33:17,002 --> 00:33:19,210
Nii et ma lähen alistada
sest ma juba olnud.

733
00:33:19,210 --> 00:33:20,630
Ja nüüd, kuidas ma saan lahti sellest?

734
00:33:20,630 --> 00:33:24,670
>> Lähme edasi siin ja teha
Pildi allikas võrdne logo.gif.

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

736
00:33:25,490 --> 00:33:26,050
Säästa.

737
00:33:26,050 --> 00:33:30,560
Ja nüüd, kui ma lähen tagasi oma otsingut
lehele, nüüd ta otsib päris hea.

738
00:33:30,560 --> 00:33:33,610
Olgu, nii et see ei ole
üsna teinud midagi kasulikku.

739
00:33:33,610 --> 00:33:37,000
Tegelikult, las ma proovida otsida
kass ja vaata, mis juhtub.

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

741
00:33:38,890 --> 00:33:39,420
Pagan võtaks.

742
00:33:39,420 --> 00:33:41,400
See ei ole lihtsalt töö, ilmselt.

743
00:33:41,400 --> 00:33:43,760
Mis siis tähtsaim osa
mis siit puudu?

744
00:33:43,760 --> 00:33:49,100
>> Õigus, isegi kui te ei tea ühtegi HTML,
Olen hakanud märgistus Telefoni kujul

745
00:33:49,100 --> 00:33:54,130
ja ma olen öelnud seda, kuidas sisendid,
mulle teksti kasti ning esitama nuppu,

746
00:33:54,130 --> 00:33:55,730
Mis tükk on ilmselt kadunud?

747
00:33:55,730 --> 00:33:58,975
Oletame, et me tahame tegelikult saada
see asi töötab korralikult.

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

749
00:34:02,420 --> 00:34:05,360
Mida me peame tegema?

750
00:34:05,360 --> 00:34:08,860
Meil on vaja rakendada kolp
andmebaasi või otsingumootori ise,

751
00:34:08,860 --> 00:34:11,210
ja et läheb võtma
palju aega, ausalt.

752
00:34:11,210 --> 00:34:13,380
>> Seega pidage meeles, mida me tegime viimast korda.

753
00:34:13,380 --> 00:34:18,230
Nii et kui te otsite midagi Google
ja olete eelnevalt välja lülitatud,

754
00:34:18,230 --> 00:34:20,355
Meenuta, instant search.

755
00:34:20,355 --> 00:34:22,230
Nii et lubage mul pöörduda, et välja
nii, et see tegelikult

756
00:34:22,230 --> 00:34:26,650
käitub nagu vanemad kooli brauser,
kui ma nüüd otsida midagi kassid,

757
00:34:26,650 --> 00:34:28,190
meenutada, mida URL näeb välja.

758
00:34:28,190 --> 00:34:29,449
See on päris segasena.

759
00:34:29,449 --> 00:34:33,000
Aga varjatud seal,
Meenuta, on kaldkriipsuga otsing.

760
00:34:33,000 --> 00:34:35,100
Küsimärk q võrdub kassid.

761
00:34:35,100 --> 00:34:37,760
>> Ja see tundub mulle
terve hunnik otsingutulemustes.

762
00:34:37,760 --> 00:34:39,134
Nii et sa tead, mida ma lähen tegema?

763
00:34:39,134 --> 00:34:41,650
Ma laenata
Google vaid mõne minuti.

764
00:34:41,650 --> 00:34:43,670
Ma lähen üle
siin ja ma ütlen

765
00:34:43,670 --> 00:34:47,850
et see moodustab tegevuse või
kohtades, nii et rääkida,

766
00:34:47,850 --> 00:34:49,330
peaks olema sõna otseses mõttes Google.

767
00:34:49,330 --> 00:34:52,590
Ja meetod tahtsin
kasutamisega saab olema saada.

768
00:34:52,590 --> 00:34:53,560
>> Mis on tegevus?

769
00:34:53,560 --> 00:34:55,760
Tegevus on kummaliselt nimega,
kuid see tähendab lihtsalt

770
00:34:55,760 --> 00:34:58,120
kes läheb tegelema
tegevuse sellisel kujul?

771
00:34:58,120 --> 00:35:00,820
Kui ma vajutan Search, kus
Kui tulemus minna?

772
00:35:00,820 --> 00:35:05,300
Ja kui ma nüüd lähen tagasi oma vormi
siin ja uuesti oma veebilehele

773
00:35:05,300 --> 00:35:09,000
ja nüüd otsida midagi
nagu koer, märkate nüüd

774
00:35:09,000 --> 00:35:10,850
Olen taas ellu Google.

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

776
00:35:11,350 --> 00:35:14,141
>> Kui ma tahan, et otsida midagi
muud, see toimib mitte ainult koerad,

777
00:35:14,141 --> 00:35:16,400
see töötab ka kassidele.

778
00:35:16,400 --> 00:35:21,930
Samuti töötab CS50.

779
00:35:21,930 --> 00:35:24,310
Ja OK, see on lihtsalt
all whelming, kas pole?

780
00:35:24,310 --> 00:35:25,920
Kõik õige, kuid see toimib.

781
00:35:25,920 --> 00:35:27,360
Mis siis tegelikult toimub?

782
00:35:27,360 --> 00:35:31,340
Nii et ma olen õpetanud oma brauseri abil
HTML, võtta kasutajalt

783
00:35:31,340 --> 00:35:35,810
ja tegelikult talle, et sisend
serveritega HTTP.

784
00:35:35,810 --> 00:35:39,120
>> Ja kuna minu brauser
mõistab HTTP, siis tegelikult

785
00:35:39,120 --> 00:35:43,500
ehitada URL, nii et mida
Ma lõpuks üle minu brauser,

786
00:35:43,500 --> 00:35:45,660
pane tähele, mis juhtub
kui ma otsinud koer.

787
00:35:45,660 --> 00:35:49,270
Kui ma vajutan Search, märkate, et
URL muutub, kui ma mõeldud

788
00:35:49,270 --> 00:35:52,770
to google.com/search~~V päringu võrdub koer.

789
00:35:52,770 --> 00:35:56,020
Ja et sellepärast kujul
teab, sest meetod saada,

790
00:35:56,020 --> 00:35:59,560
lihtsalt lisada see, et URL on.

791
00:35:59,560 --> 00:36:01,730
>> Nüüd on need veebilehti on ikka kole.

792
00:36:01,730 --> 00:36:04,890
Nii saab tutvustada üks muu
tükk süntaks kui me suudame täna.

793
00:36:04,890 --> 00:36:07,640
Ja see on midagi, tuntud
kui Kaskaadlaadistik.

794
00:36:07,640 --> 00:36:10,720
Nii et lubage mul heita pilk
Selle näiteks on siin ja vaata

795
00:36:10,720 --> 00:36:12,380
kui saame järeldada, mis toimub.

796
00:36:12,380 --> 00:36:14,520
See on CSS0.html.

797
00:36:14,520 --> 00:36:16,532
Ja see on koht, kus asjad
natuke kole.

798
00:36:16,532 --> 00:36:18,490
Sest kahjuks
maailma veebis,

799
00:36:18,490 --> 00:36:20,920
HTML üksi ei suuda kõike teha.

800
00:36:20,920 --> 00:36:22,920
Ja kui sa tahad
Stilisoida oma veebilehel,

801
00:36:22,920 --> 00:36:28,370
sa tegelikult vaja keskenduda
esteetika teistmoodi.

802
00:36:28,370 --> 00:36:33,090
Nii et siin, mul on keha minu web
leht, mille sees on suur div.

803
00:36:33,090 --> 00:36:34,700
Ja div lihtsalt tähendab jagamist.

804
00:36:34,700 --> 00:36:38,060
Nii et see on nagu punkt, kuid see
ei ole sama semantika

805
00:36:38,060 --> 00:36:39,180
Lõigu teksti.

806
00:36:39,180 --> 00:36:40,940
>> See tähendab lihtsalt, et
brauser, siin

807
00:36:40,940 --> 00:36:45,210
suur ristkülikukujuline piirkond minu web
lehele, ma tahan sellega hakkama spetsiaalselt.

808
00:36:45,210 --> 00:36:47,420
Nüüd joon 21 on koht, kus see div hakkab.

809
00:36:47,420 --> 00:36:48,770
Ja lihtsalt võtta vist.

810
00:36:48,770 --> 00:36:53,080
Milline on mõju line 21 kohta
Ülejäänud lehe sisu?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Tsentreerimine ta.

813
00:36:56,311 --> 00:36:56,810
See on kõik.

814
00:36:56,810 --> 00:36:58,830
Nii et me ei ole näinud viis
tegelikult keskele teksti.

815
00:36:58,830 --> 00:37:00,996
>> Tegelikult minu otsingumootori
Erinevalt tegelike Google,

816
00:37:00,996 --> 00:37:03,040
kõik oli õigustatud üle vasakule.

817
00:37:03,040 --> 00:37:07,430
Ja nii nüüd joon 21, ma räägin, hey
brauser, luua jagamise lehel.

818
00:37:07,430 --> 00:37:09,450
Anna mulle suur, nähtamatu ristkülik.

819
00:37:09,450 --> 00:37:11,490
See, kuidas ma tahan
mõtle veebilehel.

820
00:37:11,490 --> 00:37:13,870
Ja siis Stilisoida see järgmiselt.

821
00:37:13,870 --> 00:37:16,900
Toas jutumärgid,
Nüüd on teine ​​keel

822
00:37:16,900 --> 00:37:19,969
et me tutvustas täna
nimetatakse Kaskaadlaadistik.

823
00:37:19,969 --> 00:37:22,010
Õnneks see liiga ei
programmeerimiskeel,

824
00:37:22,010 --> 00:37:26,470
nii et see on väga piiratud tema süntaks, kuid
Samuti väga piiratud funktsionaalsus

825
00:37:26,470 --> 00:37:30,670
samas HTML on kõike
markeerimiseks andmed veebilehekülje

826
00:37:30,670 --> 00:37:32,130
ja struktuuri veebilehel.

827
00:37:32,130 --> 00:37:35,320
CSS on üldiselt umbes
viimane miil, esteetika,

828
00:37:35,320 --> 00:37:40,160
saada suuruse ja värvi ning
paigutuse täpselt õige veebilehele.

829
00:37:40,160 --> 00:37:43,000
Ja tõepoolest, see on moodustatud
peamiste väärtus paare.

830
00:37:43,000 --> 00:37:46,290
>> Vara niimoodi, teksti
joondada järgneb koolon,

831
00:37:46,290 --> 00:37:49,720
järgneb väärtusest antud
vara, mis antud juhul on keskel.

832
00:37:49,720 --> 00:37:51,910
Ja nüüd näevad sind
saab pesa neid asju.

833
00:37:51,910 --> 00:37:56,780
Kui ma tahtsin kõike, mis
Olen rõhutanud, et tsentreeritud,

834
00:37:56,780 --> 00:38:00,270
Sellepärast ma pean line 21 ja
vastavale reale 31.

835
00:38:00,270 --> 00:38:04,820
Aga oletame nüüd tahan öelda John
Harvard, tere tulemast minu kodulehekülg.

836
00:38:04,820 --> 00:38:06,530
>> Copyright sümbol John Harvard.

837
00:38:06,530 --> 00:38:09,180
Ja arvan, et ma tahan, et esimene
need read on päris suur.

838
00:38:09,180 --> 00:38:10,450
36 pikslit.

839
00:38:10,450 --> 00:38:11,530
Nii et korralik suurus.

840
00:38:11,530 --> 00:38:13,240
Ja ma tahtsin selle kaal olla julge.

841
00:38:13,240 --> 00:38:15,450
Aga siis allapoole,
Ma tahan väiksem tekst.

842
00:38:15,450 --> 00:38:19,980
Ja allpool, et ma tahan
isegi väiksem tekst.

843
00:38:19,980 --> 00:38:20,480
Vabandust.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Täna tundub off päev.

846
00:38:26,940 --> 00:38:29,840
>> Nüüd, mida ma teen, et väljendada seda?

847
00:38:29,840 --> 00:38:34,580
Siin on line 22 on varjatud
div või nested div, kui soovite.

848
00:38:34,580 --> 00:38:36,190
See liiga on oma stiil tag.

849
00:38:36,190 --> 00:38:38,160
Ma määrata kirjasuurus 36.

850
00:38:38,160 --> 00:38:40,460
Ma määrata fondi paksuseks julge.

851
00:38:40,460 --> 00:38:43,360
Alla siin, ma määrata ainult 24 pikslit.

852
00:38:43,360 --> 00:38:45,960
Ja lõpuks, vastavalt 28, täpsustatakse I 12.

853
00:38:45,960 --> 00:38:49,070
Nii nagu kiire meelerahu kontrolli
ja kui inimlugemine Selle

854
00:38:49,070 --> 00:38:52,545
mis sõnad ekraanil on
tegelikult saab olema julge?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Milline read on tegelikult julge?

857
00:38:58,760 --> 00:38:59,570
>> Just John Harvard.

858
00:38:59,570 --> 00:39:00,070
Õigus?

859
00:39:00,070 --> 00:39:05,940
Sest nagu line 22 ütleb hei
brauser, siin on jagunemisel lehel.

860
00:39:05,940 --> 00:39:07,920
Tee font size 36 punkti.

861
00:39:07,920 --> 00:39:09,460
Tee font kaalu julge.

862
00:39:09,460 --> 00:39:11,920
Niipea kui jõuad
vastava lõpumärgendi

863
00:39:11,920 --> 00:39:15,340
või suletud tag line 24,
See tähendab, hey brauser,

864
00:39:15,340 --> 00:39:17,640
stop teed iganes see on te teete.

865
00:39:17,640 --> 00:39:21,020
Ja teate olevat selge, kuigi
line 22 on kõik need omadused

866
00:39:21,020 --> 00:39:24,430
nagu stiilis, kui
sulgeda sildi line 24,

867
00:39:24,430 --> 00:39:25,940
sa ainult mainida sildi nime.

868
00:39:25,940 --> 00:39:29,990
>> Sa ei korda sõna stiilis või
midagi, mis on seestpoolt neid hinnapakkumisi.

869
00:39:29,990 --> 00:39:32,860
Ja kui ma vaatan seda nüüd
minu brauser, võtame

870
00:39:32,860 --> 00:39:38,060
pilk lõpptulemus. Lase mul minna
edasi, et see fail, mis on CSS 0.

871
00:39:38,060 --> 00:39:41,814
Ja see on ikka päris tavaline,
kuid saan päris huvitav.

872
00:39:41,814 --> 00:39:43,980
Aga selgub, et tema
muid asju mida ma teha saan siin

873
00:39:43,980 --> 00:39:46,490
ja riisikol teha
see täiesti kole,

874
00:39:46,490 --> 00:39:48,630
märkate siin, et minu
keha minu veebilehele,

875
00:39:48,630 --> 00:39:53,930
Ma ei tee midagi naljakat
nagu bg või taustavärvi.

876
00:39:53,930 --> 00:39:56,670
>> Ja kiire, millised on sinu lemmikvärv?

877
00:39:56,670 --> 00:39:57,720
Roheline kuulsin.

878
00:39:57,720 --> 00:39:58,750
Hästi.

879
00:39:58,750 --> 00:40:02,920
Nüüd, kui ma tabanud reload nüüd,
meil on roheline veebilehel.

880
00:40:02,920 --> 00:40:04,710
Hea küll, nii et pole paha.

881
00:40:04,710 --> 00:40:08,350
Ja nüüd, kui ma tahan teha seda tõesti
lahe, ma saan teha minu värv teksti

882
00:40:08,350 --> 00:40:09,360
isegi punane.

883
00:40:09,360 --> 00:40:10,870
Vaatame, mis see välja näeb.

884
00:40:10,870 --> 00:40:12,230
Nüüd ta otsib päris hea.

885
00:40:12,230 --> 00:40:15,460
Ja siin, kui sa tõesti
taha jama keegi

886
00:40:15,460 --> 00:40:17,487
või kui sa tahad olla
üks neist inimestest, kes

887
00:40:17,487 --> 00:40:20,570
üritab petta teid külastavad veebi
lehte, sest nad on petnud Google

888
00:40:20,570 --> 00:40:27,610
mõtlema, seal on terve hunnik
võtmesõnadeks like-- vaatame, laadida.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Kust see minna?

891
00:40:30,680 --> 00:40:31,530
Ja seal juures.

892
00:40:31,530 --> 00:40:32,030
Hästi.

893
00:40:32,030 --> 00:40:34,905
Nii et ma ütlen seda kui kõrvale, siis me
räägime seda kraami paari nädala jooksul

894
00:40:34,905 --> 00:40:36,740
kui me räägime
turvalisuse, kui te tegelikult

895
00:40:36,740 --> 00:40:38,852
kinnistada kogu kobarad
märksõnad veebilehele,

896
00:40:38,852 --> 00:40:41,810
isegi kui nad ei ole nähtav
inimese, keegi nagu Google, muidugi,

897
00:40:41,810 --> 00:40:43,250
saab ikka tegelikult leida seda.

898
00:40:43,250 --> 00:40:45,820
Hea küll, et on päris
kole päris kiiresti.

899
00:40:45,820 --> 00:40:48,420
>> Ja tegelikult, see pole veel kõik
et palju erinevalt oma veebi

900
00:40:48,420 --> 00:40:51,480
lk bakalaureuseõppe, mis
Hakkasin googling ümber leida

901
00:40:51,480 --> 00:40:53,690
viimase versiooni oma vana veebilehed.

902
00:40:53,690 --> 00:40:54,500
See oli päris halb.

903
00:40:54,500 --> 00:40:56,650
Tegelikult ma ei leia
üks vahetult enne klassi.

904
00:40:56,650 --> 00:40:58,620
Aga seal on veel hullem seal.

905
00:40:58,620 --> 00:41:01,534
See ilmselt oli minu
avalehele tagasi 1996. aastal.

906
00:41:01,534 --> 00:41:04,200
Ilmselt ma arvasin, et see oli
asjakohane küsida inimestelt oma nime

907
00:41:04,200 --> 00:41:05,991
enne kui nad võivad
tegelikult näha oma veebilehel.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> Ja siis ma näitasin neile
midagi loll, ilmselt.

910
00:41:11,920 --> 00:41:13,450
Ma kaevama rohkem järgmiseks korraks.

911
00:41:13,450 --> 00:41:16,220
Aga nüüd, olgem
kaaluda natuke disaini.

912
00:41:16,220 --> 00:41:17,444
Me rääkisime stiilis.

913
00:41:17,444 --> 00:41:19,735
Ja see leht siiani ja
Kõige kõike olen kirjutanud

914
00:41:19,735 --> 00:41:21,890
on päris puhas stiililiselt.

915
00:41:21,890 --> 00:41:23,320
Aga kujundus?

916
00:41:23,320 --> 00:41:25,990
Noh, seal on palju koondamine
mida ma olen teinud siin.

917
00:41:25,990 --> 00:41:28,156
>> Olen mainitud sõna
värv paar kohti.

918
00:41:28,156 --> 00:41:31,630
Olen mainitud fondi suurust paari
kohti ja julge paar kohti.

919
00:41:31,630 --> 00:41:34,870
Ja põhimõtteliselt, ma olen co
segunemine kahes keeles.

920
00:41:34,870 --> 00:41:38,100
Mul HTML minu sildid ja minu
atribuutide ja siis äkki,

921
00:41:38,100 --> 00:41:40,100
jutumärkides, mul on
teine ​​keel täna

922
00:41:40,100 --> 00:41:43,830
nimetatakse CSS, mis jällegi on ainult need
põhiväärtus paari või nende omadused

923
00:41:43,830 --> 00:41:45,280
eraldatud kooloniga.

924
00:41:45,280 --> 00:41:47,700
>> Tuleb välja, et palju
nagu C, kus me

925
00:41:47,700 --> 00:41:50,550
saab alustada tegur välja
Mõnes kood päisfailid,

926
00:41:50,550 --> 00:41:53,520
nii saame teha sama HTML.

927
00:41:53,520 --> 00:41:56,030
Ja samm, et on järgmine.

928
00:41:56,030 --> 00:42:02,230
Pange tähele, et see versioon, CSS1.html on
Struktuurselt täpselt sama veebilehel.

929
00:42:02,230 --> 00:42:05,250
Nii et mul on terve hunnik
of divs, kuid seekord, ma olen

930
00:42:05,250 --> 00:42:07,220
saanud lahti ümbris
div nagu näete.

931
00:42:07,220 --> 00:42:12,390
>> Ja ma olen andnud neile kolmele divs
top, keskmine ja alumine, kordumatuid identiteete.

932
00:42:12,390 --> 00:42:14,760
See on tore, sest
andes vaheseinad

933
00:42:14,760 --> 00:42:18,715
lehekülje kordumatute tunnuste,
Ma ei viide neid mujal.

934
00:42:18,715 --> 00:42:19,215
Kus?

935
00:42:19,215 --> 00:42:21,070
Noh, las ma keri üles.

936
00:42:21,070 --> 00:42:24,070
Ja seni, millal me vaatasime
eesotsas veebilehe, mis on

937
00:42:24,070 --> 00:42:28,560
ainus tag oleme olnud
juht veebilehe?

938
00:42:28,560 --> 00:42:29,740
Vähe kõvemini.

939
00:42:29,740 --> 00:42:30,799
Just pealkiri siiani.

940
00:42:30,799 --> 00:42:32,590
Aga selgub, et tema
mõned muud asjad

941
00:42:32,590 --> 00:42:35,840
võite panna seal, üks
mis seda nimetatakse stiilis tag.

942
00:42:35,840 --> 00:42:37,850
Nii hetk tagasi, me vaatasime
kell stiilis atribuut.

943
00:42:37,850 --> 00:42:39,150
Selgub seal on stiilis tag.

944
00:42:39,150 --> 00:42:41,200
See kuulub sees
juht veebilehel.

945
00:42:41,200 --> 00:42:42,840
Ja nüüd märganud, mida ma teen.

946
00:42:42,840 --> 00:42:46,540
Mul on sees see
stiilis tag järgmised.

947
00:42:46,540 --> 00:42:51,190
Ma sõna otseses mõttes märkimist real 20
nimi tag, et ma tahan Stilisoida.

948
00:42:51,190 --> 00:42:53,489
>> Siis mul on avatud lokkis traksidega
ja suletud lokkis traksidega.

949
00:42:53,489 --> 00:42:56,030
Nii sarnase sisuga C, kuid
Ka see ei ole mingi funktsiooni

950
00:42:56,030 --> 00:42:57,796
see on lihtsalt süntaktiliste detail siin.

951
00:42:57,796 --> 00:43:00,170
Ja siis muidugi, ma räägin
brauser, hey brauser,

952
00:43:00,170 --> 00:43:05,210
muuta kogu keha lehekülje
on teksti viimist keskus.

953
00:43:05,210 --> 00:43:06,930
Ja siis see ütleb järgmist.

954
00:43:06,930 --> 00:43:12,600
Hei brauser, kui näed HTML
element või sildi lehekülge

955
00:43:12,600 --> 00:43:17,040
on kordumatu tunnus top,
nii räsi märk siin lihtsalt tähendab,

956
00:43:17,040 --> 00:43:21,010
unikaalne idee top, laske käia
ja teha oma fondi suurus 36

957
00:43:21,010 --> 00:43:22,490
ja selle fondi paksuseks julge.

958
00:43:22,490 --> 00:43:26,840
>> Hei brauser, element, kelle
ID on keskel, oleks 24 pikslit.

959
00:43:26,840 --> 00:43:31,070
Ja hei brauser, kui näed
Idee alt, et see 12 pikslit.

960
00:43:31,070 --> 00:43:33,540
Mõju lõpuks
on täpselt sam.

961
00:43:33,540 --> 00:43:36,500
Kui ma minema CSS 1
lehekülg näeb sama.

962
00:43:36,500 --> 00:43:39,810
Aga me oleme samm
veidi parem disain.

963
00:43:39,810 --> 00:43:44,850
Lubage mul nüüd minna tagasi siia CSS2
ja vaata, mis muidu ma olen teinud.

964
00:43:44,850 --> 00:43:48,030
>> Nüüd leht on tõesti väga puhas.

965
00:43:48,030 --> 00:43:50,730
Tegelikult ma ei sobi kõigile
sisu lehel siin.

966
00:43:50,730 --> 00:43:54,270
Aga mida uus silt on mul
kasutusele, ilmselt?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
Ja see ei ole parim nimi silti,
sest see ei ole link selles mõttes

969
00:43:57,853 --> 00:44:00,780
et me teame seda, kuid see tähendab,
link mõne muu faili.

970
00:44:00,780 --> 00:44:02,890
See on selline nagu teravad lisada C.

971
00:44:02,890 --> 00:44:06,280
>> See on viis, kuidas HTML
öelda hey brauser,

972
00:44:06,280 --> 00:44:10,240
mine saada sisu
fail nimega css2.css.

973
00:44:10,240 --> 00:44:12,880
Suhe, mulle
on see, et see on laaditabeli.

974
00:44:12,880 --> 00:44:17,980
Ja tõepoolest, see on, mida üks
Si in Kaskaadlaadistik vahenditega.

975
00:44:17,980 --> 00:44:20,350
See on stiil lehel.

976
00:44:20,350 --> 00:44:23,120
See on lihtsalt tekstifail, mis sisaldab
terve hulk vara.

977
00:44:23,120 --> 00:44:25,940
See on terve hulk stiile
mis sa tahad pöörduda lehel.

978
00:44:25,940 --> 00:44:28,860
>> Ja nii see ilmselt on
viidates teise faili.

979
00:44:28,860 --> 00:44:32,970
Ja kui ma avan, et CSS2.css,
märgata, et kõik, mida ma olen teinud

980
00:44:32,970 --> 00:44:35,900
on kopeerida kõik
Selle sellesse faili.

981
00:44:35,900 --> 00:44:38,220
Ja nüüd, isegi kui te pole kunagi
kodeeritud see kraam enne,

982
00:44:38,220 --> 00:44:40,700
lihtsalt kaaluda koos
lõpmatuseni inseneri mütsi

983
00:44:40,700 --> 00:44:44,220
kohta, miks on see on
parem disain ilmselt?

984
00:44:44,220 --> 00:44:48,910
Faktooring välja need CSS omadused,
laskmiseks oma faili.

985
00:44:48,910 --> 00:44:51,330
Kuigi me lahendada seda
probleem nagu viis minutit tagasi

986
00:44:51,330 --> 00:44:52,600
kõige esimene versioon.

987
00:44:52,600 --> 00:44:55,730
>> Meil ei ole paranenud
lk stiililiselt,

988
00:44:55,730 --> 00:44:57,520
see on lihtsalt parem
disain mõnes mõttes.

989
00:44:57,520 --> 00:44:58,990
Miks sa arvad?

990
00:44:58,990 --> 00:45:01,510
Jah.

991
00:45:01,510 --> 00:45:02,260
Paindlikum kuidas?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Jah.

994
00:45:05,540 --> 00:45:07,373
Nii et kui sa tahad minna
tagasi ja muuta asju,

995
00:45:07,373 --> 00:45:09,540
Nüüd on teil üks koht
kus saab asju muuta.

996
00:45:09,540 --> 00:45:11,622
Ja tegelikult midagi
nagu probleem pani seitse,

997
00:45:11,622 --> 00:45:13,690
kus me ellu
aktsia kauplemise kodulehel,

998
00:45:13,690 --> 00:45:15,523
et läheb on
terve hunnik lehti.

999
00:45:15,523 --> 00:45:17,620
Ja see oleks tõesti
tüütu, kui sa otsustad, hm,

1000
00:45:17,620 --> 00:45:21,630
Ma tõesti ei meeldi 24 pikslit, ma tahan
see oleks 28 pikslit või veidi suuremad.

1001
00:45:21,630 --> 00:45:23,550
Ja siis pead tegema
globaalne leida ja asendada

1002
00:45:23,550 --> 00:45:27,560
või avada kõik veebisaidi failide
lihtsalt tegelikult muuta üks väärtus.

1003
00:45:27,560 --> 00:45:31,290
Faktooringteenus neid stiile
ühte kesksesse kohta,

1004
00:45:31,290 --> 00:45:34,720
saate nüüd avada ühe tekstifaili
in CS50IDE ühtegi programmi,

1005
00:45:34,720 --> 00:45:36,479
muuta, salvestada ja teha.

1006
00:45:36,479 --> 00:45:38,270
Olete paljundatud neid
muutused kõikjal.

1007
00:45:38,270 --> 00:45:42,450
Ja see oleks sama
a dot h faili ka.

1008
00:45:42,450 --> 00:45:46,697
Nii küsimusi seega
palju selle süntaksit?

1009
00:45:46,697 --> 00:45:48,530
Olgu, mistõttu oleme
teinud kõik tundub

1010
00:45:48,530 --> 00:45:51,170
va tegelikult ellu linke.

1011
00:45:51,170 --> 00:45:52,740
Ja nii lähme edasi ja tee seda.

1012
00:45:52,740 --> 00:45:54,830
Lubage mul minna ja
luua uus pilt siin.

1013
00:45:54,830 --> 00:45:59,970
Ma kutsun seda
link.html, panna tänapäeva koodi.

1014
00:45:59,970 --> 00:46:03,000
>> Ja ma teen avatud
sulg doc tüübist html.

1015
00:46:03,000 --> 00:46:05,970
Selle kõrvale, et see asi on
top, see doc tüübideklaratsiooniga,

1016
00:46:05,970 --> 00:46:08,420
see on ainus, mis on imelik
koos hüüumärk.

1017
00:46:08,420 --> 00:46:12,100
Sa lihtsalt pead tegema seda seal ja see
tähendab, et me kasutame HTML versioon 5.

1018
00:46:12,100 --> 00:46:14,460
Vanemad versioonid
keel oli palju kauem

1019
00:46:14,460 --> 00:46:16,400
stringe, mis teil on vaja panna sinna.

1020
00:46:16,400 --> 00:46:18,620
Nii et siin on näide nn link.

1021
00:46:18,620 --> 00:46:20,950
>> Vajan keha minu veebileht siin.

1022
00:46:20,950 --> 00:46:29,770
Ja siin, a href võrdsete
oletame HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
ja minu lemmik veebilehel, siis ütlen.

1024
00:46:35,420 --> 00:46:38,550
Olgu, nii väga
kahjutud, kasutajasõbralik lehel.

1025
00:46:38,550 --> 00:46:42,950
Kui ma nüüd minema minu kataloog
loetledes siin ja avada link.html,

1026
00:46:42,950 --> 00:46:44,780
meil hüper teksti.

1027
00:46:44,780 --> 00:46:47,410
>> Ja tõepoolest, see on koht, kus
H HTTP pärineb.

1028
00:46:47,410 --> 00:46:51,580
Hypertext Transfer Protocol
on umbes kandes teksti

1029
00:46:51,580 --> 00:46:53,840
mis on hüperlinke teistele ressurssidele.

1030
00:46:53,840 --> 00:46:58,210
Ja tõepoolest, siin on tuttav,
kui retro, sinine link, et kui klõpsad,

1031
00:46:58,210 --> 00:47:02,607
tegelikult viib mind Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Nüüd, oh, mis on tulemas varsti.

1033
00:47:03,940 --> 00:47:08,970
Olgu, nii et nüüd, milline on mõned
ning selle mõju?

1034
00:47:08,970 --> 00:47:11,610
>> Ja ausalt öeldes, maailm hakkab
saada natuke rohkem tuttavad

1035
00:47:11,610 --> 00:47:15,090
ja ka veidi scarier
aga ka veidi rohkem

1036
00:47:15,090 --> 00:47:17,840
ise kaitstav kui hakkate
mõista neid asju.

1037
00:47:17,840 --> 00:47:21,610
Kuna tõenäosus on, et mõned teist, kui sa lähed
läbi Gmaili rämpsposti kausta või isegi

1038
00:47:21,610 --> 00:47:23,990
postkasti, oled ilmselt
saanud mingi email

1039
00:47:23,990 --> 00:47:26,980
mis küsib muuta oma
Parooli äkki või äkki kontrollida

1040
00:47:26,980 --> 00:47:28,910
Paypal volikirja või tühi-tähi.

1041
00:47:28,910 --> 00:47:34,510
>> Ja tegelikult, võite saanud
midagi, mis ütleb, nagu siit

1042
00:47:34,510 --> 00:47:42,260
taastada oma PayPal salasõna.

1043
00:47:42,260 --> 00:47:44,130
Ja nüüd, märkate, kui
see ei ole Disney.com

1044
00:47:44,130 --> 00:47:51,600
kuid nagu badplace.com ja
uuesti, pange tähele, et tekst siin

1045
00:47:51,600 --> 00:47:53,710
Võiks öelda midagi üldse.

1046
00:47:53,710 --> 00:47:55,260
Ja tegelikult, see on lihtsalt sõnad.

1047
00:47:55,260 --> 00:48:04,610
Miks ma ei tegelikult super pahatahtlik
ja öelda http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Vajuta siia taastada oma PayPal
parool ja nüüd uuesti.

1049
00:48:14,090 --> 00:48:16,220
See tundub üsna õigustatud, eks?

1050
00:48:16,220 --> 00:48:20,470
Ma mõtlen, et ma ei kliki
talle, et lihtsalt ütleb seda.

1051
00:48:20,470 --> 00:48:22,450
Aga märgata dihhotoomia siin.

1052
00:48:22,450 --> 00:48:26,880
Ta ütleb www.paypal.com,
ja tegelikult, oodake minut,

1053
00:48:26,880 --> 00:48:29,210
me teame, et sa tahad
s turvalisuse.

1054
00:48:29,210 --> 00:48:35,450
Nüüd minge www.paypal.com HTTPS,
aga kui sa oled seda kunagi varem teinud,

1055
00:48:35,450 --> 00:48:38,182
ei sattuda harjumus
Uusehitise üle vähe lingid siin.

1056
00:48:38,182 --> 00:48:39,890
Ja see on raske mõista
Ekraanil on,

1057
00:48:39,890 --> 00:48:41,340
ja see pole veel kõik, et lihtsam siin.

1058
00:48:41,340 --> 00:48:43,615
Aga tee alla siin
väike vähe nurgas

1059
00:48:43,615 --> 00:48:45,740
ei brauser tegelikult
öelda, et me ei kavatse

1060
00:48:45,740 --> 00:48:48,850
to badplace.com asemel Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Nüüd, kus me tahame seda?

1062
00:48:51,620 --> 00:48:54,859
Kõik näited oleme teinud täna
oleme kõva kodeeritud ja trükitud käsitsi.

1063
00:48:54,859 --> 00:48:56,900
Veebis on uskumatult
ebahuvitav kui raske

1064
00:48:56,900 --> 00:48:59,844
koodataksesi veebilehti, et sisu
on staatiline ja kunagi muutub.

1065
00:48:59,844 --> 00:49:01,760
Muidugi, kõik meie
lemmik veebilehed täna

1066
00:49:01,760 --> 00:49:04,470
kas see on Gmail või Twitter või
Facebook või mitmeid teisi

1067
00:49:04,470 --> 00:49:05,290
on dünaamiline.

1068
00:49:05,290 --> 00:49:07,340
Nad muutuvad
vastuseks kasutaja sisend

1069
00:49:07,340 --> 00:49:08,840
nagu Google otsingutulemustes.

1070
00:49:08,840 --> 00:49:12,415
>> Ja nii kolmapäeval, mida me teeme, on
jätame HTML ja CSS sissejuhatus

1071
00:49:12,415 --> 00:49:14,290
möödas ja me võtame
iseenesestmõistetavaks, et me nüüd

1072
00:49:14,290 --> 00:49:16,640
tean, et see ja tutvustame
uus programmeerimiskeel

1073
00:49:16,640 --> 00:49:19,050
nimetatakse PHP, mis meeldib
C, läheb meile

1074
00:49:19,050 --> 00:49:22,450
võimu tegelikult luua programme
et ise luua väljund.

1075
00:49:22,450 --> 00:49:25,900
Sel juhul me kasutame
PHP genereerida dünaamiliselt web

1076
00:49:25,900 --> 00:49:27,340
lehekülge kasutades seda uut keelt.

1077
00:49:27,340 --> 00:49:28,989
Nii rohkem, et kolmapäeval.

1078
00:49:28,989 --> 00:49:29,530
Näeme siis.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [Muusika mängib]

1081
00:49:37,380 --> 00:52:38,864