1
00:00:00,000 --> 00:00:03,486
>> [Prehrávanie hudby]

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

3
00:00:10,460 --> 00:00:14,250
>> DAVID J Malan: To je CS50 a
to je začiatok týždňa 7.

4
00:00:14,250 --> 00:00:15,060
Takže vitajte späť.

5
00:00:15,060 --> 00:00:17,540
A môžete pripomenúť, že
v probléme set štyri,

6
00:00:17,540 --> 00:00:21,510
tam bol trochu lov
pre niektoré atraktívne ceny, pričom

7
00:00:21,510 --> 00:00:24,219
Po obnoviť fotky
Zamestnanci ako tu, tak v New Haven,

8
00:00:24,219 --> 00:00:27,468
ste boli vyzvaní, aby si čo najviac
títo počítačoví odborníci, ako by ste mohli.

9
00:00:27,468 --> 00:00:29,550
A máme celý
banda podanie.

10
00:00:29,550 --> 00:00:31,930
Myslel som, že by som zdieľať pár
s vami dnes.

11
00:00:31,930 --> 00:00:35,100
>> A budeme písať všetky tieto online.

12
00:00:35,100 --> 00:00:39,310
Ale predovšetkým som chcel
upozorniť to-- studne jeden,

13
00:00:39,310 --> 00:00:42,670
Sam bol v pomerne málo z nich
všeobecne predstavujúce takhle.

14
00:00:42,670 --> 00:00:45,750
Zdá sa však, že od
dnes ráno, víťaz

15
00:00:45,750 --> 00:00:51,170
bola určitá niekto menom Ken s
24 zamestnancov zachytil na kameru

16
00:00:51,170 --> 00:00:54,600
alebo málo viac, keď vezmete v
predstavujú viac zamestnancov v obrázkoch.

17
00:00:54,600 --> 00:00:58,300
Na snímke je tu ďalšia Ken
Márii v New Havene.

18
00:00:58,300 --> 00:01:01,300
>> Teraz, Ken, keď sa zmení
out je trochu rohového prípadu

19
00:01:01,300 --> 00:01:02,880
že sa ešte nestalo skôr.

20
00:01:02,880 --> 00:01:05,713
Ukazuje sa, že nenastalo
sa mi dať drobným písmom v probléme

21
00:01:05,713 --> 00:01:09,710
nastaviť štyri, ktoré hovorí, že zamestnanci sú
nespôsobilé pre atraktívne ceny

22
00:01:09,710 --> 00:01:13,130
pretože Ken je, samozrejme, jeden z
fotografi na našich zamestnancov.

23
00:01:13,130 --> 00:01:16,820
Teraz, s tým povedal,
Pôvodne mi písal hovoriť

24
00:01:16,820 --> 00:01:19,180
Prosím, nevkladajte tieto fotografie online.

25
00:01:19,180 --> 00:01:21,630
Myslím si, že z veľkej časti
pretože väčšina z fotografií

26
00:01:21,630 --> 00:01:24,499
že tento fotograf sa pozrieť
trochu niečo také.

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

28
00:01:25,040 --> 00:01:28,990
>> Ale Ken by som, aby som vás uistil
že je to veľmi dobrý fotograf,

29
00:01:28,990 --> 00:01:33,190
on je profesionál, vezme
fotky, ktoré nie sú rozmazané,

30
00:01:33,190 --> 00:01:37,270
že sú lepší v centre pozornosti, a on
trvalo pomerne málo z našich vlastných zamestnancov.

31
00:01:37,270 --> 00:01:40,370
Ale skôr než len potvrdiť
Ken, čo sme si mysleli by sme robiť

32
00:01:40,370 --> 00:01:43,390
sa prejsť zoznam
Skutočné študenti, ktorí predložili.

33
00:01:43,390 --> 00:01:48,640
A ukázalo sa, že Lance sa
15 fotiek ako z dnešného rána

34
00:01:48,640 --> 00:01:50,030
bol náš víťaz.

35
00:01:50,030 --> 00:01:55,730
>> A tu snímky je s Lance Colton,
s Skazi, sama so sebou a so Samom.

36
00:01:55,730 --> 00:02:00,230
Ale potom sa ukázalo, že od
11:46, takže pred len trochu,

37
00:02:00,230 --> 00:02:04,380
Vrátil som sa do svojho e-mailu a zistil,
že sme mali ešte jeden podania

38
00:02:04,380 --> 00:02:08,300
študent menom Bonnie
ktorých e-mail povedal len toto.

39
00:02:08,300 --> 00:02:10,800
Nebudem klamať, že som
Pritom počas vyučovania.

40
00:02:10,800 --> 00:02:17,620
A potom pokračoval pripojiť len
14 fotografií, jeden plachý Lance je 15.

41
00:02:17,620 --> 00:02:22,690
>> Ale v Bonnie fotografiách, sa ukazuje,
out boli viac zamestnancami, Sam

42
00:02:22,690 --> 00:02:25,960
medzi nimi, takže to, čo sme si mysleli,
by sa urobiť, je uznať oboch týchto technológií.

43
00:02:25,960 --> 00:02:29,240
Takže okrem získania Dropbox
priestor, ktorý každý, kto sa podieľali

44
00:02:29,240 --> 00:02:33,900
prijíma, budú aj tieto dve časti
získať peknú zaistený obed pre nich

45
00:02:33,900 --> 00:02:36,100
a ich časť
Mates tento nadchádzajúci týždeň.

46
00:02:36,100 --> 00:02:38,970
A tak budete počuť od nás,
Lance a Bonnie, o tom.

47
00:02:38,970 --> 00:02:40,002
Tak veľké gratulácie k nim.

48
00:02:40,002 --> 00:02:42,210
A teraz, kto by ti z vás,
rovnako ako obed všeobecnejšie

49
00:02:42,210 --> 00:02:45,320
vedieť, že CS50 obed v Cambridge
a New Haven je tento piatok.

50
00:02:45,320 --> 00:02:48,510
Prejsť na CS50 web lomítko RSVP.

51
00:02:48,510 --> 00:02:49,800
A teraz pár slov o seminároch.

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

53
00:02:50,730 --> 00:02:52,490
Takže sme blíži
bod semestra

54
00:02:52,490 --> 00:02:55,200
kde by ste mali začať
premýšľať o záverečných prác.

55
00:02:55,200 --> 00:02:59,309
A v skutočnosti, len v trochu, bude
takzvané predbežné návrhy je splatná.

56
00:02:59,309 --> 00:03:01,850
Takže predbežné návrhy sú určené pre
byť dosť nízky vplyv a naozaj

57
00:03:01,850 --> 00:03:04,109
len príležitosť pre
skladať krátku poznámku

58
00:03:04,109 --> 00:03:06,900
Váš kolega učenie zoznámiť
ho alebo ju, čo si myslíš

59
00:03:06,900 --> 00:03:09,140
chcieť urobiť pre svoje finálne projekt.

60
00:03:09,140 --> 00:03:11,730
>> Teraz, veľa študentov končí
robí webový záverečných prác.

61
00:03:11,730 --> 00:03:13,800
A samozrejme, sme len
Teraz minulý týždeň v tejto

62
00:03:13,800 --> 00:03:15,890
a za potápanie do programovania webu.

63
00:03:15,890 --> 00:03:18,200
Takže nie sa báť, ak vás
nemajú absolútne žiadnu predstavu, ako

64
00:03:18,200 --> 00:03:21,594
by ste stavať myšlienky, ktoré
môžete mať vo svojej mysli.

65
00:03:21,594 --> 00:03:24,510
To je naozaj len nútiť funkcie
aby vám premýšľať a hovoriť

66
00:03:24,510 --> 00:03:25,650
s TF o tom.

67
00:03:25,650 --> 00:03:28,810
Ale aby som vám pomôcť s tým, a
s konečnými projektmi v konečnom dôsledku,

68
00:03:28,810 --> 00:03:31,750
vedia, že CS50 má tradíciu
ponúkať semináre.

69
00:03:31,750 --> 00:03:36,084
>> A to sú voliteľné, ruky na,
alebo prednášať na základe príležitosti

70
00:03:36,084 --> 00:03:39,000
sa dozvedieť viac o témach, ktoré sú
trochu vedľajšej do kurzu je

71
00:03:39,000 --> 00:03:43,310
osnovy, ale napriek tomu nádherné
Materiál riadiť záverečných prác.

72
00:03:43,310 --> 00:03:46,840
A tak to je zoznam, ktorý je
Zamestnanci CS50 tu v New Haven

73
00:03:46,840 --> 00:03:48,600
prišli s pre
v tomto roku o iOS

74
00:03:48,600 --> 00:03:50,730
programovanie, Android
programovanie, vývoj hier,

75
00:03:50,730 --> 00:03:54,480
a zväzky viac nástrojov
a jazykov a techniky.

76
00:03:54,480 --> 00:03:56,780
>> Takže pozor na internetových stránkach CS50 je.

77
00:03:56,780 --> 00:04:00,110
A do tej doby, ak chcete
zaregistrujte ako záujemcovia o niektorý z nich,

78
00:04:00,110 --> 00:04:02,510
prejsť na CS50 je lomítko registra.

79
00:04:02,510 --> 00:04:05,770
A potom budeme sledovať, ako na
dni a letové časy a miesta

80
00:04:05,770 --> 00:04:09,090
a všechno-- najviac všetko bude
možné sledovať, a tiež k dispozícii na vyžiadanie

81
00:04:09,090 --> 00:04:11,750
po ak si nemôžete vlastne robiť to.

82
00:04:11,750 --> 00:04:15,800
Takže bez ďalších okolkov, my
prestali minule s GET.

83
00:04:15,800 --> 00:04:19,610
>> A to bolo ako správu, ktorá bola
vnútri virtuálneho obálky, pripomínajú,

84
00:04:19,610 --> 00:04:23,960
že sme míňali na routeru, aby
router medzi webovým prehliadačom a web

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

86
00:04:24,487 --> 00:04:26,695
A toto posolstvo vyzeral
Trochu niečo také.

87
00:04:26,695 --> 00:04:29,700
To bolo viac tajomné posolstvo, ktoré
bol vlastne vo vnútri obálky

88
00:04:29,700 --> 00:04:34,440
napísané na kuse papiera, ktorého
Prvý riadok hovorí, že doslova, dostať lomítko.

89
00:04:34,440 --> 00:04:37,830
>> A rovnako ako kontrola sanitačného,
čo ste lomítko naznačovať?

90
00:04:37,830 --> 00:04:40,455
Čo znamená, keď lomka
žiada o webové stránky?

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

92
00:04:43,070 --> 00:04:44,250
Môžete požiadať o to celý čas.

93
00:04:44,250 --> 00:04:47,333
Väčšina kedykoľvek návšteve webovej stránky, budete
nie sú v skutočnosti zadajte názov súboru.

94
00:04:47,333 --> 00:04:50,960
Pravdepodobne ste jednoducho ísť na Facebook.com,
vstupovať, gmail.com, alebo podobne.

95
00:04:50,960 --> 00:04:52,260
A čo lomítko predstavuje?

96
00:04:52,260 --> 00:04:53,506
Jaky súbor?

97
00:04:53,506 --> 00:04:54,630
Alebo čo strana, konkrétne?

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

99
00:04:59,642 --> 00:05:00,720
>> Index, jo.

100
00:05:00,720 --> 00:05:01,810
Takže východiskové stránku.

101
00:05:01,810 --> 00:05:04,810
Takže ak nechcete určiť súbor
menujeme začneme vidieť,

102
00:05:04,810 --> 00:05:07,750
ste vlastne len žiadajúci
daj mi predvolenú stránku Facebook

103
00:05:07,750 --> 00:05:10,800
alebo mi môj e-mailovej schránky alebo dať
me predvolená stránka noviniek

104
00:05:10,800 --> 00:05:12,510
na webových stránkach CNN alebo podobne.

105
00:05:12,510 --> 00:05:15,220
A server reaguje na
že správa s niečím

106
00:05:15,220 --> 00:05:18,420
takto, hovoriť áno,
hovoriť HTTP verzie 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, čo je stav
kód, ktorý my, ľudia len zriedka

108
00:05:21,130 --> 00:05:22,790
niekedy vidieť, pretože je to dobré.

109
00:05:22,790 --> 00:05:26,640
Pretože to znamená, že OK, žiadosť
bol prijatý a správne zaobchádzať.

110
00:05:26,640 --> 00:05:28,960
A typ obsahu
zrejme v odpovedi

111
00:05:28,960 --> 00:05:31,170
je pomerne často, ale nie vždy, text.

112
00:05:31,170 --> 00:05:32,580
A konkrétne, HTML.

113
00:05:32,580 --> 00:05:34,760
A to je vlastne
kde sa pozrieme na dnes.

114
00:05:34,760 --> 00:05:37,140
>> Takže v skutočnosti, ja idem
vpred a otvoriť prehliadač.

115
00:05:37,140 --> 00:05:40,410
Budem používať Chrome, môžete použiť
Najviac ľubovoľného prehliadača v najbližších týždňoch.

116
00:05:40,410 --> 00:05:42,410
Všeobecne odporúčame Chrome
pretože je to obzvlášť

117
00:05:42,410 --> 00:05:43,750
dobré pre vývojárov softvéru.

118
00:05:43,750 --> 00:05:46,070
Je tu veľa postavená v roku
nástroje, ktoré uľahčujú

119
00:05:46,070 --> 00:05:49,800
rozvíjať nielen HTML a CSS,
veci, začneme hovoriť o dnes,

120
00:05:49,800 --> 00:05:51,530
ale aj iné jazyky tiež.

121
00:05:51,530 --> 00:05:55,530
>> A budem pokračovať a ísť to--
Budem Ovládanie tlačidlom alebo vpravo

122
00:05:55,530 --> 00:05:57,210
kliknite na ľubovoľné miesto na webovej stránke.

123
00:05:57,210 --> 00:05:59,070
A ja idem do Skontrolujte Element.

124
00:05:59,070 --> 00:06:03,850
A budem vyladiť moje
Obrazovka len trochu sem.

125
00:06:03,850 --> 00:06:05,790
Dovoľte mi, aby som to presunúť na dno.

126
00:06:05,790 --> 00:06:08,140
Takže toto je to, čo sa hovorí
Chrome inšpektor.

127
00:06:08,140 --> 00:06:11,010
Takže toto je ako ladenie
Nástroj vstavaný do prehliadača Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Všetci z vás už tento
Ak ste pomocou prehliadača Chrome.

129
00:06:13,520 --> 00:06:17,169
A to vám umožní vidieť, čo sa deje
Na pod pokrievku nejaké webové stránky.

130
00:06:17,169 --> 00:06:19,210
Takže poďme vlastne trvať
Pozri sa na to takto.

131
00:06:19,210 --> 00:06:21,251
Má cesta viac funkcií
a staráme sa o dnes.

132
00:06:21,251 --> 00:06:22,760
Ale je tu tieto karty sem.

133
00:06:22,760 --> 00:06:25,890
Prvky, siete, zdroje,
časová os, a niektoré ďalšie veci.

134
00:06:25,890 --> 00:06:27,800
Budem kliknite na
Siete na chvíľu.

135
00:06:27,800 --> 00:06:30,500
>> A je to trochu ohromujúci
na prvý pohľad tu.

136
00:06:30,500 --> 00:06:34,190
Ale to, čo budem robiť, je nechať
ma to trochu zjednodušiť.

137
00:06:34,190 --> 00:06:37,560
Budem zapnúť
záznam svetla, takže sa to červené.

138
00:06:37,560 --> 00:06:39,140
A ja som chcel povedať zachovať log.

139
00:06:39,140 --> 00:06:41,015
A to je len trochu
vec, ktorú som prišiel na to,

140
00:06:41,015 --> 00:06:44,120
v priebehu času, že to bude šetriť
Všetko, čo sa deje v prehliadači.

141
00:06:44,120 --> 00:06:50,030
A teraz idem
na http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> V skutočnosti, poďme urobiť www
pre istotu, lomítko.

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

144
00:06:53,643 --> 00:06:56,180
Takže URL, že mnoho z
ste mohli navštívili.

145
00:06:56,180 --> 00:06:58,830
A teraz Facebook je web
strana prichádza v hornej časti.

146
00:06:58,830 --> 00:07:02,350
A potom celá partia
veci letel na dne.

147
00:07:02,350 --> 00:07:04,830
A v skutočnosti, sa ukazuje, že
pri návšteve Facebook.com,

148
00:07:04,830 --> 00:07:09,320
ste nielen robiť jednu prosbu HTTP,
Ukazuje sa, že ísť na Facebook.com

149
00:07:09,320 --> 00:07:14,320
pošle 41 z týchto obálok,
každý s jeho vlastnú žiadosť get,

150
00:07:14,320 --> 00:07:18,360
ako je uvedené, aj keď za obrazovkou
tu, v dolnej časti obrazovky,

151
00:07:18,360 --> 00:07:24,040
znamená to, že naozaj, my
browser urobil 41 žiadostí.

152
00:07:24,040 --> 00:07:29,689
>> A celkom, to previedlo 861
kB a trvalo nejakého dôvodu

153
00:07:29,689 --> 00:07:31,730
toľko ako osem sekunda
k stiahnutiu všetko.

154
00:07:31,730 --> 00:07:33,790
Takže je to vlastne trochu divný
že stránky Facebook by vziať

155
00:07:33,790 --> 00:07:35,600
dlho, ale budiž v tomto prípade.

156
00:07:35,600 --> 00:07:39,520
A teraz, to všetko mi to jedno
o s výnimkou najvrchnejšiu požiadavku.

157
00:07:39,520 --> 00:07:46,440
Tak poďme k tomuto tady
a dovoľte mi, aby som oddialiť len na chvíľu.

158
00:07:46,440 --> 00:07:47,754
>> A dovoľte mi priblížiť na túto tému.

159
00:07:47,754 --> 00:07:50,670
Takže to, čo som urobil v vľavo, hoci
je tu veľa deje tu

160
00:07:50,670 --> 00:07:53,360
Je som zvýrazní
Facebook.com a potom

161
00:07:53,360 --> 00:07:56,540
Všimnite si, že som rolovanie dole,
rolovanie dole, rolovanie dole,

162
00:07:56,540 --> 00:07:58,330
požiadať o hlavičky.

163
00:07:58,330 --> 00:08:01,720
A uvidíte, že Chrome je zobrazené
me podstate vnútorný obsah

164
00:08:01,720 --> 00:08:02,810
žiadosti Aj vyrobená.

165
00:08:02,810 --> 00:08:06,130
Nie je to formátovanie v úplne rovnaké
cesta, ale všimnete, je tam zmienka o získanie,

166
00:08:06,130 --> 00:08:09,481
Všimnite si, že je zmienka o hostiteľa,
Facebook.com, cesta, alebo lomka,

167
00:08:09,481 --> 00:08:10,730
čo je súbor som požiadal.

168
00:08:10,730 --> 00:08:12,930
>> A potom, keď som sa prechádzať
zálohovať, budeme vlastne

169
00:08:12,930 --> 00:08:17,270
vidieť, že to, čo sa vrátil Facebook
pre mňa je všetky tieto hlavičky.

170
00:08:17,270 --> 00:08:21,040
Takže v tejto virtuálnej obálky
naozaj veľa kľúčových párov hodnôt.

171
00:08:21,040 --> 00:08:23,130
Slovo, dvojbodka, a potom hodnota.

172
00:08:23,130 --> 00:08:25,050
Slovo, dvojbodka, a hodnota.

173
00:08:25,050 --> 00:08:26,160
Jedná sa o tzv hlavičky.

174
00:08:26,160 --> 00:08:31,860
A je tu oveľa viac, než detail tu
sme vlastne záleží práve teraz.

175
00:08:31,860 --> 00:08:33,750
>> Ale to je druhý
posledná tam dole,

176
00:08:33,750 --> 00:08:38,809
Všimnite si, že serveru facebook.com je,
naozaj tu povedal, príde nejaký textu HTML.

177
00:08:38,809 --> 00:08:41,409
Takže všetko je to, povedať,
že pri požiadavke web

178
00:08:41,409 --> 00:08:44,300
Stránka z prehliadača na
Server, ktorý server odpovie

179
00:08:44,300 --> 00:08:47,630
s obálkou jeho vlastné
vnútri ktorého je textu.

180
00:08:47,630 --> 00:08:49,020
Inými slovami, HTML.

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

182
00:08:50,590 --> 00:08:53,200
Čo je iný jazyk
že sme zaviedli dnes

183
00:08:53,200 --> 00:08:57,740
že ľudia alebo počítača generovať
, Na vykonávanie webové stránky.

184
00:08:57,740 --> 00:08:59,580
>> Konkrétne, poďme sa pozrieť na to.

185
00:08:59,580 --> 00:09:03,277
Chystám sa teraz vrátiť
na webových stránkach Facebook.

186
00:09:03,277 --> 00:09:05,360
A ja len
Ovládanie kliknutím alebo kliknite pravým tlačidlom myši

187
00:09:05,360 --> 00:09:07,634
a kliknite na tlačidlo Zobraziť zdrojový kód stránky.

188
00:09:07,634 --> 00:09:10,550
A aj keď nechcete používať Chrome,
IE to urobiť, Firefox môže to urobiť,

189
00:09:10,550 --> 00:09:14,060
Safari môžete to urobiť, aj keď v ponuke
Možnosti môže vyzerať trochu inak.

190
00:09:14,060 --> 00:09:18,990
A to je HTML, že Mark a
Firma na Facebooku písali.

191
00:09:18,990 --> 00:09:24,640
>> A spoločne, tento jazyk tu
implementuje modrá a biela stránka

192
00:09:24,640 --> 00:09:26,370
že sme videli pred chvíľou.

193
00:09:26,370 --> 00:09:28,030
Teraz, to je trošku zložitejšie.

194
00:09:28,030 --> 00:09:31,400
Ale keď sa pozrieme sa na ľavom hornom rohu, sme
začnú sa pozrieť na nejaké vzory.

195
00:09:31,400 --> 00:09:34,140
Vyzerá to, že je tu veľa
z týchto otváracia značke

196
00:09:34,140 --> 00:09:35,970
a potom je tu toto kľúčové slovo HTML.

197
00:09:35,970 --> 00:09:38,330
Tu je ďalší open
uhol rameno a hlava.

198
00:09:38,330 --> 00:09:41,560
>> Tu je, ak budeme posúvať dole
a dole a dole, ja som

199
00:09:41,560 --> 00:09:43,820
ísť do toho a skúste
niečo hľadať.

200
00:09:43,820 --> 00:09:48,510
Existuje spôsob, ako cez vpravo
Tu je otvorený držiak telo.

201
00:09:48,510 --> 00:09:50,800
A spomínam z poslednej
čas, ktorý sme navrhli

202
00:09:50,800 --> 00:09:53,364
že najjednoduchšie webové stránky
že človek môže napísať

203
00:09:53,364 --> 00:09:55,030
by mohol vyzerať trochu niečo také.

204
00:09:55,030 --> 00:09:58,430
Otvorené HTML tag, otvorená hlava
tag, otvorený názov značky,

205
00:09:58,430 --> 00:10:03,230
potom uzavrie titul, uzavreté hlava, otvorený
telo tag, nejaký text, uzavretá karoséria,

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

207
00:10:04,720 --> 00:10:06,290
>> Ale pauza tu len na chvíľu.

208
00:10:06,290 --> 00:10:09,030
Tento kód, aj keď ste
Nikdy napísal predtým

209
00:10:09,030 --> 00:10:11,864
ale stále nie celkom pochopiť
čo sa deje, vyzerá celkom dobre.

210
00:10:11,864 --> 00:10:12,821
Dobre, to je veľmi čisté.

211
00:10:12,821 --> 00:10:14,120
Je to veľmi pekné štylisticky.

212
00:10:14,120 --> 00:10:16,190
Veľa odrazenie a biele miesto.

213
00:10:16,190 --> 00:10:18,020
Facebook nie je.

214
00:10:18,020 --> 00:10:23,190
Tak prečo je Facebook toľko
horšie, než som sa na písanie HTML?

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

216
00:10:24,310 --> 00:10:26,899
>> Jasné, to je ako jeden
z piatich pre štýl.

217
00:10:26,899 --> 00:10:29,315
Existuje pádny dôvod
pre nich znížiť tieto rohy.

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

219
00:10:31,069 --> 00:10:33,860
No dobre, tak oni nechcú
aby to pre vás jednoduchšie si ho prečítať.

220
00:10:33,860 --> 00:10:36,940
Takže v nejakom zmysle, že sú
pliesť to, tak nejako to zakódovanie

221
00:10:36,940 --> 00:10:40,260
aspoň tak esteticky
že je to ťažšie pre Myspace

222
00:10:40,260 --> 00:10:42,705
ísť a odparené ich
Domovskú a HTML pre ňu.

223
00:10:42,705 --> 00:10:45,080
Ukazuje sa, že programy
aj keď, vrátane Chrome,

224
00:10:45,080 --> 00:10:47,020
môžeme vyčistiť toto hore výborný ľahko.

225
00:10:47,020 --> 00:10:49,420
Takže to nie je tak ako dôvod.

226
00:10:49,420 --> 00:10:51,290
Čo iné by mohlo byť príčinou.

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

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

229
00:10:54,680 --> 00:10:55,890
Jo, biele náklady dátového priestoru.

230
00:10:55,890 --> 00:10:56,598
Čo tým myslíte?

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

232
00:11:02,250 --> 00:11:02,979
Jo, presne tak.

233
00:11:02,979 --> 00:11:06,020
Ak stlačíte klávesy TAB veľa, alebo
medzerník, zvážiť dôsledky.

234
00:11:06,020 --> 00:11:10,060
Takže každý kláves na vašej klávesnici je
[Nepočuteľný] reprezentovaný ako jeden bajt.

235
00:11:10,060 --> 00:11:14,560
>> Takže predpokladám, že Mark alebo niektorý z vývojárov
v týchto dňoch zasiahne medzerník len raz

236
00:11:14,560 --> 00:11:17,899
V tejto HTML stránke, ktorá
reprezentuje Facebook domovskú stránku.

237
00:11:17,899 --> 00:11:19,690
A Facebook má veľa
užívateľov v týchto dňoch.

238
00:11:19,690 --> 00:11:24,030
Takže predpokladám, že Facebook je homepage
dnes je navštevovaný miliardy ľudí.

239
00:11:24,030 --> 00:11:27,020
A niekto na Facebooku má
hit medzerníka len raz.

240
00:11:27,020 --> 00:11:29,890
>> Takže jeden ďalší bajt,
miliarda žiadostí,

241
00:11:29,890 --> 00:11:32,790
koľko viac dát je Facebook
prenos cez internet

242
00:11:32,790 --> 00:11:37,160
preto, že niekto hit
medzerníka na jeho klávesnici?

243
00:11:37,160 --> 00:11:41,660
A miliarda bytov, alebo jeden gigabajt
odosielanie dát z Facebooku serverov

244
00:11:41,660 --> 00:11:43,626
ľuďom po celom
Svet bez dobrého dôvodu.

245
00:11:43,626 --> 00:11:44,750
Teraz, to je len jeden priestor.

246
00:11:44,750 --> 00:11:48,866
>> Predstavte si, že sme vlastne čistiť to
vec a členité a doplnil

247
00:11:48,866 --> 00:11:50,990
veľa prázdneho miesta a
znaky tabulátora a medzery,

248
00:11:50,990 --> 00:11:53,656
môžete skončiť výdavkov gigabajtov,
ak nie terra bajty viac priestoru.

249
00:11:53,656 --> 00:11:56,640
A tak výborný obyčajný v
Skutočný svet vývoj webových aplikácií

250
00:11:56,640 --> 00:11:58,950
je minify váš kód.

251
00:11:58,950 --> 00:12:01,280
A budeme nakoniec vidieť
ako by ste mohli urobiť.

252
00:12:01,280 --> 00:12:04,630
>> Ale dnes, začneme písať kód
to je vlastne čitateľný pre nás ľudí.

253
00:12:04,630 --> 00:12:10,120
Ukazuje sa, aj keď, ak idete späť
do tohto nástroja v Chrome Preskúmať prvok,

254
00:12:10,120 --> 00:12:12,030
Predtým sme boli na záložke Network.

255
00:12:12,030 --> 00:12:15,430
Ukazuje sa, že ak idete do
Záložka prvky, čo je skutočne vidieť

256
00:12:15,430 --> 00:12:19,230
je Chrome je celkom tlačený
verzie toho istého HTML.

257
00:12:19,230 --> 00:12:20,640
Takže sme deobfuscated to.

258
00:12:20,640 --> 00:12:22,472
Takže je to žiadnym súperom pre počítač.

259
00:12:22,472 --> 00:12:24,430
A teraz môžete skutočne
kliknite okolo a začať

260
00:12:24,430 --> 00:12:27,630
vidieť hierarchiu, ktorá je webová stránka.

261
00:12:27,630 --> 00:12:28,780
Takže poďme to vlastne robiť.

262
00:12:28,780 --> 00:12:32,120
Chystám sa ísť dopredu a otvoriť na
môj Mac program s názvom úpravu textu.

263
00:12:32,120 --> 00:12:35,490
A pripomínajú, že to je len
super jednoduchý textový programu.

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

265
00:12:37,490 --> 00:12:39,820
A ja idem na Verbatim
zadajte nasledovné.

266
00:12:39,820 --> 00:12:44,650
Doc typu HTML, otvorený držiak
HTML, uzavretý konzola HTML,

267
00:12:44,650 --> 00:12:49,000
máme hlavu stránky tu,
koniec záhlaví stránky tu,

268
00:12:49,000 --> 00:12:52,310
titul bude ako, hello world.

269
00:12:52,310 --> 00:12:56,660
>> A potom tu dole, my potrebujeme
Telo webové stránky.

270
00:12:56,660 --> 00:12:58,050
Uzavretá karoséria.

271
00:12:58,050 --> 00:13:00,700
A potom tu, hello world.

272
00:13:00,700 --> 00:13:01,270
Dobre.

273
00:13:01,270 --> 00:13:03,350
Takže písali sme super rýchly webovú stránku.

274
00:13:03,350 --> 00:13:06,675
Budem ho uložiť ako
hello.html na mojom desktope.

275
00:13:06,675 --> 00:13:09,050
My Mac deje sťažovať,
myslieť si, že, počkajte chvíľu,

276
00:13:09,050 --> 00:13:11,091
to je textový súbor, vykonajte
Ak chcete volať to .txt?

277
00:13:11,091 --> 00:13:13,300
Ale nie, chcem použiť dot HTML.

278
00:13:13,300 --> 00:13:16,140
>> A čo potom je to pekné, keby som
stačí dvakrát na tento súbor,

279
00:13:16,140 --> 00:13:18,600
hello.html, tu je moje webové stránky.

280
00:13:18,600 --> 00:13:22,564
Bohužiaľ, ja som
jediný človek na svete,

281
00:13:22,564 --> 00:13:23,980
ktorí môžu navštíviť túto stránku práve teraz.

282
00:13:23,980 --> 00:13:26,734
Vzhľadom k tomu, kde to žije zdanlivo?

283
00:13:26,734 --> 00:13:27,650
Je to na mojom Macu, že jo?

284
00:13:27,650 --> 00:13:28,470
Čo je k ničomu.

285
00:13:28,470 --> 00:13:30,390
Rovnako ako nikto v tejto miestnosti
nieto na internete

286
00:13:30,390 --> 00:13:31,598
môže skutočne navštíviť túto stránku.

287
00:13:31,598 --> 00:13:33,820
Takže dnes, musíme
zavádzať ďalší prvok.

288
00:13:33,820 --> 00:13:36,720
>> A ako to urobiť, budem
choďte do toho a otvoriť Cloud 9.

289
00:13:36,720 --> 00:13:40,090
Takže Cloud 9 je samozrejme
cloud založené service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE--, ktorý má všetky naše pracovné priestory
beží niekde na internete.

291
00:13:44,890 --> 00:13:48,330
A to znamená, že všetky naše súbory
sú už verejne prístupné.

292
00:13:48,330 --> 00:13:49,830
Tak poďme do toho a to urobiť.

293
00:13:49,830 --> 00:13:53,670
Chystám sa ísť dopredu a
vytvorenie nového súboru NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Budem ho uložiť ako predtým
as hello.html a kliknite na tlačidlo Uložiť.

295
00:13:58,819 --> 00:14:01,860
A teraz len preto, aby ušetrili čas, idem
ísť dopredu a skopírujte vložiť tento kód

296
00:14:01,860 --> 00:14:03,470
skôr než ju prepíšte.

297
00:14:03,470 --> 00:14:04,550
A uložte ho.

298
00:14:04,550 --> 00:14:07,550
A tak teraz mám
súbor s názvom hello.html.

299
00:14:07,550 --> 00:14:09,710
Ale ako to mám vlastne
otvoriť ako webovú stránku?

300
00:14:09,710 --> 00:14:14,120
No, to dopadá vstavaný do CS50
IDE nie je len prekladač, ako kovový zvuk

301
00:14:14,120 --> 00:14:16,670
a debugger, ako GDB a
zväzky iných programov,

302
00:14:16,670 --> 00:14:21,140
je to vlastne plnohodnotným
webový server beží v CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Všetci z vás, to znamená,
mať svoj vlastný webový server.

304
00:14:23,900 --> 00:14:26,850
A webový server je len kus
o softvér, ktorého zmysel života

305
00:14:26,850 --> 00:14:28,220
má slúžiť až webových stránok.

306
00:14:28,220 --> 00:14:32,490
Ak chcete počúvať na požiadavku od prehliadača a
reagovať s malými virtuálnymi obálkami

307
00:14:32,490 --> 00:14:35,290
vnútri ktorej je
obsah, ktorý som napísal.

308
00:14:35,290 --> 00:14:38,372
Takže to web server
skutočne zadarmo a open source.

309
00:14:38,372 --> 00:14:40,830
V prípade, open source len znamená,
softvér, ktorý niekto iný

310
00:14:40,830 --> 00:14:43,480
napísal, že každý z nás môže
skutočne vidieť a stiahnuť a dokonca

311
00:14:43,480 --> 00:14:44,780
zmeniť zdrojový kód.

312
00:14:44,780 --> 00:14:46,150
A je to len Apache.

313
00:14:46,150 --> 00:14:51,450
>> A urobili sme to trochu jednoduchšie
použitie v CS50IDE tým, že volá ho Apache 50.

314
00:14:51,450 --> 00:14:53,780
Tak, že to môže vlastne
pochopiť nasledujúce.

315
00:14:53,780 --> 00:14:56,560
Budem hovoriť Apache 50 štart.

316
00:14:56,560 --> 00:14:58,910
A potom som len chcel povedať bodku.

317
00:14:58,910 --> 00:15:01,080
A vidíme niektoré trochu
Arcane správa hovorí,

318
00:15:01,080 --> 00:15:04,640
Nastavenie Apache dokumentu [? Skupina?]
domov, ubuntu, čo to je,

319
00:15:04,640 --> 00:15:05,770
lomítko pracovný priestor.

320
00:15:05,770 --> 00:15:08,280
Spustenie web server
Apache 2 úspešne.

321
00:15:08,280 --> 00:15:11,330
>> Tak dlhý príbeh krátky, ja
práve stlačil tlačidlo

322
00:15:11,330 --> 00:15:18,000
a obrátil sa na webovom serveri, ktorý je teraz
počúva na Internete na TCP porte

323
00:15:18,000 --> 00:15:20,587
80 na konkrétnu adresu.

324
00:15:20,587 --> 00:15:22,420
A hovorí, že tu, a
to sa bude meniť v závislosti

325
00:15:22,420 --> 00:15:26,550
na svoje používateľské meno a ďalších faktoroch,
nevšimnúť teraz, keď som kliknite na to,

326
00:15:26,550 --> 00:15:30,211
IDE50 bodka jharvard a tak aj
tak si všimnite, že celú tú dobu

327
00:15:30,211 --> 00:15:31,960
Za posledných niekoľko
týždne, môžete mať

328
00:15:31,960 --> 00:15:35,200
si všimol, že vaše vlastné užívateľské meno
je zakotvený v hornej pravej ruke

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

330
00:15:37,130 --> 00:15:41,050
>> A to vlastne bolo to všetko
načasovať adresu, na ktorej si môžete

331
00:15:41,050 --> 00:15:43,574
navštíviť všetky súbory cez web.

332
00:15:43,574 --> 00:15:45,990
Až do teraz, to nie je záležalo,
pretože v C, je zvyčajne

333
00:15:45,990 --> 00:15:48,073
chcú veci beží v
terminál, nie na webe.

334
00:15:48,073 --> 00:15:50,800
Ale dnes, začneme
písanie webovým kódu

335
00:15:50,800 --> 00:15:53,350
že my chceme
prístupné na verejných URL.

336
00:15:53,350 --> 00:15:56,100
Takže to, čo budem
urobiť, je kliknite na túto adresu URL.

337
00:15:56,100 --> 00:16:00,880
>> A všimnite si, že vidím pomerne
škaredý index, je výpis adresára,

338
00:16:00,880 --> 00:16:04,090
ale to, čo súbor vyskočí na vás asi?

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

340
00:16:05,210 --> 00:16:07,870
To preto, že som ušetril
súbor vo svojom pracovnom priestore.

341
00:16:07,870 --> 00:16:12,310
A to, čo som povedal, Apache ja webový server
je hľadať v Dávidovom pracovného priestoru adresára.

342
00:16:12,310 --> 00:16:15,300
A nech niekto na
svet vidieť tie súbory.

343
00:16:15,300 --> 00:16:19,050
>> A skutočne, ak teraz
kliknite na hello.html,

344
00:16:19,050 --> 00:16:22,180
Vidím v rámci tejto karte presne v tomto súbore.

345
00:16:22,180 --> 00:16:26,430
Teraz si všimnúť, Cloud 9 to urobil
niečo trochu užitočné pre nás.

346
00:16:26,430 --> 00:16:29,480
V rámci CS50 IDE, Všimnite si, že je
Zrazu adresa bar.

347
00:16:29,480 --> 00:16:33,690
To preto, že aj keď sme
Chrome používate k návšteve CS50IDE,

348
00:16:33,690 --> 00:16:37,940
vnútri CS50IDE je vlastný
verzia webového prehliadača práve teraz.

349
00:16:37,940 --> 00:16:40,820
A tak skôr než
komplikovať veci ako také,

350
00:16:40,820 --> 00:16:42,955
Chystám sa pokračovať
a stačí skopírovať túto adresu URL.

351
00:16:42,955 --> 00:16:45,330
Chystám sa ísť dopredu a len
otvoriť svoje vlastné okno Chrome.

352
00:16:45,330 --> 00:16:47,800
Takže tam žiadna kúzla tu, nie CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Ja som jednoducho ísť doslova vložiť
môj J Harvard URL a stlačte Enter.

354
00:16:51,800 --> 00:16:54,750
A voila, teraz som, a
teoreticky, všetci

355
00:16:54,750 --> 00:16:57,700
na internete, či som nakonfigurovaný
oprávnenie primerane,

356
00:16:57,700 --> 00:16:58,720
môžu navštíviť tento súbor.

357
00:16:58,720 --> 00:17:03,230
A tak teraz, keď som povedal,
hello.html, voila, tam

358
00:17:03,230 --> 00:17:06,366
je môj neuveriteľne nezaujatý webové stránky.

359
00:17:06,366 --> 00:17:07,740
Takže poďme urobiť rýchlu kontrolu zdravý rozum.

360
00:17:07,740 --> 00:17:09,710
Vzhľadom k tomu, to všetko
je koncepčný nastaviť.

361
00:17:09,710 --> 00:17:13,180
A my sme v skutočnosti naozaj
naučil, ako písať HTML sám o sebe.

362
00:17:13,180 --> 00:17:16,084
Akékoľvek otázky tak ďaleko
o tom, čo sa stalo?

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

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

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

366
00:17:24,290 --> 00:17:25,800
Má CS50 vlastné tieto webové stránky?

367
00:17:25,800 --> 00:17:26,460
V akom zmysle?

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

369
00:17:28,947 --> 00:17:29,530
Dobrá otázka.

370
00:17:29,530 --> 00:17:32,429
Takže CS50 je vlastníkom CS50.io.

371
00:17:32,429 --> 00:17:33,970
Sme naozaj kúpil tento názov domény.

372
00:17:33,970 --> 00:17:37,240
A od prírody z vás
prihlásenie do CS50IDE,

373
00:17:37,240 --> 00:17:39,270
vy všetci dostanete to, čo sa hovorí subdoménu.

374
00:17:39,270 --> 00:17:46,840
>> Takže IDE50-Malan, alebo IDE50-Rob.CS50.io,
to je vaša jedinečná adresa v

375
00:17:46,840 --> 00:17:47,730
naše meno domény.

376
00:17:47,730 --> 00:17:50,850
Takže na účely kurzu,
máte svoj vlastný unikátny adresu.

377
00:17:50,850 --> 00:17:55,150
Ale my sme zjednodušený veci podľa
nákup domény najvyššej úrovne, CS50 bodka

378
00:17:55,150 --> 00:17:58,050
I / O a potom všetci ostatní
Vnútri toho, aby som tak povedal.

379
00:17:58,050 --> 00:17:59,890
A vrátime sa k tomu
za pár týždňov pravdepodobne,

380
00:17:59,890 --> 00:18:01,930
najmä na záverečný projekt
Doba, kedy niektorí z vás

381
00:18:01,930 --> 00:18:03,596
chcieť, aby si svoje vlastné názvy domén.

382
00:18:03,596 --> 00:18:06,270
Je to vlastne pomerne
priamočiare.

383
00:18:06,270 --> 00:18:06,770
Dobre.

384
00:18:06,770 --> 00:18:07,880
Takže poďme teraz toto urobiť.

385
00:18:07,880 --> 00:18:11,910
Chystám sa vrátiť do
CS50IDE, kde môj súbor práve teraz,

386
00:18:11,910 --> 00:18:14,710
hello.html, nie je všetko tak zaujímavé.

387
00:18:14,710 --> 00:18:17,130
Chcel by som urobiť niečo
trochu krajší ako to.

388
00:18:17,130 --> 00:18:19,440
Takže ja budem robiť niečo také.

389
00:18:19,440 --> 00:18:21,510
Dovoľte mi, aby som otvorené paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Tak to je súbor, som napísal v predstihu.

391
00:18:23,560 --> 00:18:26,480
V jeho hornej časti, ako je
vždy máme pripomienky.

392
00:18:26,480 --> 00:18:28,730
Ale v HTML, komentáre
vyzerať trochu inak.

393
00:18:28,730 --> 00:18:33,270
On line a tri linky 14, vy
zobraziť syntax pre spustenie komentár

394
00:18:33,270 --> 00:18:34,020
a končí komentár.

395
00:18:34,020 --> 00:18:36,820
>> Ale nič z vecí v
Medzi záležitosti funkčne.

396
00:18:36,820 --> 00:18:40,250
Je to len poznámku do
človek, čo sa tu deje.

397
00:18:40,250 --> 00:18:43,040
A rovnako ako rýchly zdravého rozumu
skontrolujte, či som posunúť nadol,

398
00:18:43,040 --> 00:18:46,820
čo je jasné nový
tag, že sme zaviedli?

399
00:18:46,820 --> 00:18:52,130
Tagy doteraz sme videli, sú otvorené
držiak HTML, hlava, titul, a telo.

400
00:18:52,130 --> 00:18:54,400
Ale to, čo je teraz zrejme nové?

401
00:18:54,400 --> 00:18:55,200
>> Jo, s.

402
00:18:55,200 --> 00:18:57,320
P tag alebo odsek tag.

403
00:18:57,320 --> 00:19:01,182
A potom som len požičal nejaké default
Latinský text predstavovať svoje odsekov.

404
00:19:01,182 --> 00:19:03,390
Pretože to, čo som chcel
ukazujú, je, ako by ste mohli

405
00:19:03,390 --> 00:19:05,859
predstavujú odsekov textu vo formáte HTML.

406
00:19:05,859 --> 00:19:08,400
A tak to, čo sa začína diať
Tu je to, že tam je už

407
00:19:08,400 --> 00:19:09,657
vzor vyvíja.

408
00:19:09,657 --> 00:19:10,990
A nechaj ma ísť ďalej a urobiť.

409
00:19:10,990 --> 00:19:12,760
Dovoľte mi, aby som najprv vypnúť Apache.

410
00:19:12,760 --> 00:19:17,340
A budem sa povedať, že začať sám
opäť v dnešnej zdroje siedmich

411
00:19:17,340 --> 00:19:18,420
m adresár.

412
00:19:18,420 --> 00:19:20,100
Tak, že mám prístup ku všetkému.

413
00:19:20,100 --> 00:19:22,230
>> A teraz, keď som sa vrátiť do
Tento výpis adresáre,

414
00:19:22,230 --> 00:19:24,846
Všimol som si, vidieť každý súbor z dnes.

415
00:19:24,846 --> 00:19:26,720
A uvidíte v
Ďalším problémom set, budeme

416
00:19:26,720 --> 00:19:28,594
poskytne usmernenia
pre robenie presne toto.

417
00:19:28,594 --> 00:19:35,210
Ak otvorím paragraphs.html, by to mohlo
rovnako vyzerajú ako programovací jazyk

418
00:19:35,210 --> 00:19:36,970
pre vás, ak nechcete hovoriť alebo čítať latinsky.

419
00:19:36,970 --> 00:19:40,525
Ale to je len tri body
z textu, ktoré sú označené v HTML.

420
00:19:40,525 --> 00:19:43,100
>> A všimnite si odseku
prestávky medzi nimi.

421
00:19:43,100 --> 00:19:46,400
Pretože sa ukázalo,
a aj keď vás

422
00:19:46,400 --> 00:19:49,210
môže mať sklon k tomu,
zatiaľ čo v reálnom svete,

423
00:19:49,210 --> 00:19:51,370
ak chcete, aby riadok
prestávky medzi vecami,

424
00:19:51,370 --> 00:19:55,680
by ste mohli jednoducho
to a hit Uložiť.

425
00:19:55,680 --> 00:19:59,460
A teraz, keď som znovu tu, oznámenia
že všetko, čo len stiera spolu

426
00:19:59,460 --> 00:20:01,100
len v jednom machuľa texte.

427
00:20:01,100 --> 00:20:03,570
Vzhľadom k tomu, HTML je trochu hlúpy jazyka.

428
00:20:03,570 --> 00:20:07,230
>> Je určený pre použitie v takom
spôsobom, že prehliadač bude len

429
00:20:07,230 --> 00:20:09,920
robiť explicitne, čo si to povedať robiť.

430
00:20:09,920 --> 00:20:12,890
Takže ak nechcete to povedať
daj mi nový odsek,

431
00:20:12,890 --> 00:20:14,569
vy nebudete vidieť nový odsek.

432
00:20:14,569 --> 00:20:16,360
A v skutočnosti, čo
Prehliadač bude robiť

433
00:20:16,360 --> 00:20:20,020
je aj v prípade, že stlačíte klávesu Enter,
povedzme, že znovu a znovu

434
00:20:20,020 --> 00:20:23,190
a znovu, pohybujúce sa tento textový spôsobom
nadol na obrazovke a potom uložiť

435
00:20:23,190 --> 00:20:26,610
a potom znova načítať, prehliadač sa deje
k zrúteniu všetky tie biele miesto

436
00:20:26,610 --> 00:20:29,021
do len jediné viditeľné medzery.

437
00:20:29,021 --> 00:20:29,520
Dobre.

438
00:20:29,520 --> 00:20:30,869
Tak to je značka odseku.

439
00:20:30,869 --> 00:20:32,910
A tak to, čo je vzor
že rozvíjajúce sa tu?

440
00:20:32,910 --> 00:20:37,450
No, zdá sa, že v prípade, že
HTML je predovšetkým o začatí značku

441
00:20:37,450 --> 00:20:38,460
a končí tag.

442
00:20:38,460 --> 00:20:39,300
A čo je to značka?

443
00:20:39,300 --> 00:20:41,160
No, je to len kus syntaxe.

444
00:20:41,160 --> 00:20:44,400
Otvorte držiak, kľúčové slovo,
uzavretý držiak, je značka.

445
00:20:44,400 --> 00:20:45,510
Alebo počiatočný značka.

446
00:20:45,510 --> 00:20:48,590
A potom, keď ste
urobil vyjadrenie seba samého,

447
00:20:48,590 --> 00:20:52,300
rovnako ako v budete hotoví s odsekom,
urobíte tak povediac opak.

448
00:20:52,300 --> 00:20:55,480
Ale opak nie je úplne dozadu.

449
00:20:55,480 --> 00:21:00,630
>> Proste prefix rovnaká značka je
meno s lomkou, ako je tento.

450
00:21:00,630 --> 00:21:01,130
Dobre.

451
00:21:01,130 --> 00:21:02,570
Takže nie je všetko, čo vzrušujúce.

452
00:21:02,570 --> 00:21:05,270
A v skutočnosti, nie sme urobiť
web všetko zaujímavejšie.

453
00:21:05,270 --> 00:21:07,630
Čo keď chcem, aby sa
veci väčšie a odvážne?

454
00:21:07,630 --> 00:21:11,780
Tak to dopadá, že tu je príklad
v headings.html, kde sa v mojom tele,

455
00:21:11,780 --> 00:21:17,280
Mám tag H1, H2, H3,
štyri, päť, alebo šesť, z ktorých všetky

456
00:21:17,280 --> 00:21:18,310
Zdá sa celkom Arcana.

457
00:21:18,310 --> 00:21:21,010
Ale keď idem otvoriť tento
príklad, poďme sa pozrieť.

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

459
00:21:22,490 --> 00:21:27,030
>> Takže prehliadačov v predvolenom nastavení vám môže dať textu
to je veľký a odvážny nesúrodých veľkostí.

460
00:21:27,030 --> 00:21:28,070
H1 je veľký.

461
00:21:28,070 --> 00:21:31,240
H6 je menší a potom
všetko ostatné medzi tým.

462
00:21:31,240 --> 00:21:34,170
Tak to je zaujímavé, ale stále
nie je naozaj web viem.

463
00:21:34,170 --> 00:21:36,870
Čo ak chceme mám
niečo ako zoznam. ,

464
00:21:36,870 --> 00:21:40,190
Takže tu je zoznam s odrážkami
tri z Harvardu domov.

465
00:21:40,190 --> 00:21:41,600
>> Ako ste ísť o robí?

466
00:21:41,600 --> 00:21:45,410
No, pozrite sa na list.html.

467
00:21:45,410 --> 00:21:47,870
A tu vidíme
trochu funkiness

468
00:21:47,870 --> 00:21:49,630
ale uvažujme, čo sa deje.

469
00:21:49,630 --> 00:21:56,182
Takže na základe toho, čo ste práve videli,
UL je skratka pre zoznamu.

470
00:21:56,182 --> 00:21:57,640
Nečíslovaný zoznam jednoducho znamená odrážkami.

471
00:21:57,640 --> 00:21:58,431
Neexistuje žiadne čísla.

472
00:21:58,431 --> 00:22:01,850
K dispozícii je tiež niečo, čo nazýva
objednať zoznam, ktorý je OL na značku.

473
00:22:01,850 --> 00:22:05,350
Potom LI, zoznam položiek je všetko, čo znamená.

474
00:22:05,350 --> 00:22:07,790
>> A automaticky, takže ho
Čísla všetko za vás.

475
00:22:07,790 --> 00:22:11,270
Ale opäť, všetky moje odsadenie
a biely priestor je len kvôli mne.

476
00:22:11,270 --> 00:22:13,050
Prehliadač nie je
vlastne bude starať.

477
00:22:13,050 --> 00:22:16,670
Takže aj keď ste nemohli
to urobiť, len aby bolo jasno,

478
00:22:16,670 --> 00:22:19,880
by ste nemali, hoci
prehliadač bude stále

479
00:22:19,880 --> 00:22:22,130
byť schopný pochopiť, že v pohode.

480
00:22:22,130 --> 00:22:24,590
Som biť znovu načítať v mojom
prehliadač, ja kliknutím znovu načítať

481
00:22:24,590 --> 00:22:26,760
a žiadna zmena sa deje
pretože prehliadač stále

482
00:22:26,760 --> 00:22:29,550
robí presne to, čo ti poviem to urobiť.

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

484
00:22:30,050 --> 00:22:31,340
Tak to je všetko len textu.

485
00:22:31,340 --> 00:22:33,730
Teraz poďme robiť niečo zaujímavejšie.

486
00:22:33,730 --> 00:22:36,660
Chystám sa ísť dopredu a
požičiavať si niektoré z týchto HTML.

487
00:22:36,660 --> 00:22:40,910
Chystám sa ísť dopredu a
vytvorenie nového súboru tu.

488
00:22:40,910 --> 00:22:43,370
A budeme nazývať rick.html.

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

490
00:22:46,190 --> 00:22:48,916
Máme neúmerne
Použité niečo

491
00:22:48,916 --> 00:22:51,290
volal valec rick v tomto
triedy v tomto roku, ja neviem,

492
00:22:51,290 --> 00:22:53,880
proste sa to stalo organicky.

493
00:22:53,880 --> 00:22:55,397
>> A teraz sa to vymkne z rúk.

494
00:22:55,397 --> 00:22:56,730
Takže som jednoducho ísť s ním.

495
00:22:56,730 --> 00:22:59,700
A keď pôjdem do Google
Obrazy a Rick Astley.

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

497
00:23:02,450 --> 00:23:06,170
Ak neviete, prečo robíme
to, len prečítať na Wikipédii.

498
00:23:06,170 --> 00:23:11,520
Zakaždým, keď ste klikli na odkaz,
niekto smial niekde.

499
00:23:11,520 --> 00:23:14,860
A nechaj ma ísť tam ahead--
ideme, poďme zobraziť tento obrázok.

500
00:23:14,860 --> 00:23:16,750
>> Takže tu máme
obraz v Google Images.

501
00:23:16,750 --> 00:23:19,390
A predpokladajme, že je to
rozumne všade na internete.

502
00:23:19,390 --> 00:23:22,570
Takže budem predpokladať, že je to v poriadku pre mňa
aby skutočne dať to do mojej webovej stránky.

503
00:23:22,570 --> 00:23:24,820
Chystám sa pokračovať
a skopírujte adresu URL obrázku.

504
00:23:24,820 --> 00:23:28,600
A teraz, keď som sa vrátiť do Cloud
9, poďme sa pozrieť, čo sa dá robiť.

505
00:23:28,600 --> 00:23:30,630
Tak tu je len webové stránky.

506
00:23:30,630 --> 00:23:39,020
To je Rick Astley, haha,
Chystám sa teraz vrátiť

507
00:23:39,020 --> 00:23:43,510
do svojho prehliadača, znova, a zaujímavé.

508
00:23:43,510 --> 00:23:44,530
>> Kde je Rick?

509
00:23:44,530 --> 00:23:46,050
Tak sa ukážte, čo sa stalo.

510
00:23:46,050 --> 00:23:49,114
Vlastne, budem
predstierať, že som to neurobil.

511
00:23:49,114 --> 00:23:50,280
[Nepočuteľný] ho sem.

512
00:23:50,280 --> 00:23:52,520
Vrátime k tomu za chvíľu.

513
00:23:52,520 --> 00:23:54,200
Tak tu je rick.html.

514
00:23:54,200 --> 00:23:56,070
Takže to nie je Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Tak to dopadá v našich silách
v skutočnosti ho pridať sem.

516
00:23:59,680 --> 00:24:00,830
To je Rick Astley.

517
00:24:00,830 --> 00:24:06,680
Chystám sa povedať, aby mi snímku, ktorého
Zdroj je URL som kopírované, ktorý

518
00:24:06,680 --> 00:24:09,110
zrejme je šťastný
narodeniny niečo alebo iný.

519
00:24:09,110 --> 00:24:13,280
>> A teraz budem
zatvoriť značku, ako je tento.

520
00:24:13,280 --> 00:24:15,170
Tak to je super dlhé balenie.

521
00:24:15,170 --> 00:24:17,740
Ale všimnite si, že všetko, čo som
urobil, je otvorený držiak imidž,

522
00:24:17,740 --> 00:24:20,270
zdroj s atribútom tohto.

523
00:24:20,270 --> 00:24:21,530
A je to naozaj dlhá URL.

524
00:24:21,530 --> 00:24:23,720
A na samom konci, nevšimol.

525
00:24:23,720 --> 00:24:29,530
Prečo som urobil lomítko uhlový držiak
miesto, ako každý iný tag,

526
00:24:29,530 --> 00:24:33,590
majúci otvorený držiak,
IMG, uzavretý držiak?

527
00:24:33,590 --> 00:24:37,040
Len sa hádať, aj keď ste
nemajú znalosti vôbec

528
00:24:37,040 --> 00:24:40,410
HTML predtým.

529
00:24:40,410 --> 00:24:42,710
>> Tak to je, ako sa zavrie
príkaz, ale prečo

530
00:24:42,710 --> 00:24:45,850
to nie je naozaj robiť intuitívne
zmysel urobiť niečo trochu viac

531
00:24:45,850 --> 00:24:48,820
ukecaný ako úzke image?

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

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

534
00:24:52,000 --> 00:24:55,620
Len sémanticky, neexistuje žiadny zmysel
začatím obraz a končiac obraz,

535
00:24:55,620 --> 00:24:56,870
je to buď tam, alebo to nie je.

536
00:24:56,870 --> 00:25:00,960
Takže to nemá zmysel nechať medzeru
pre nič iné vnútri obrazu.

537
00:25:00,960 --> 00:25:02,010
Ty jednoducho nemôže urobiť.

538
00:25:02,010 --> 00:25:03,720
A tak sa syntaxe
by vo všeobecnosti byť len

539
00:25:03,720 --> 00:25:07,910
urobiť lomítko vnútri
otvoreného tagu alebo počiatočné značkou

540
00:25:07,910 --> 00:25:09,020
a potom kliknúť na Uložiť.

541
00:25:09,020 --> 00:25:13,350
>> Takže keď som sa teraz znovu načítať tento súbor, teraz
Mám dobrý web stránok kuchyni sem.

542
00:25:13,350 --> 00:25:15,100
A mohli by sme iste
naozaj obťažujú ľudí

543
00:25:15,100 --> 00:25:17,010
vložením miesto
ako odkaz na YouTube.

544
00:25:17,010 --> 00:25:19,350
A v skutočnosti, kedykoľvek
ste niekedy išiel na YouTube,

545
00:25:19,350 --> 00:25:22,190
a dovoľte mi, aby som vlastne náhodou
rick role som tu.

546
00:25:22,190 --> 00:25:25,770
Takže Rick role.

547
00:25:25,770 --> 00:25:29,592
Takže Rick roll-- ja idem sem.

548
00:25:29,592 --> 00:25:31,900
>> [Prehrávanie hudby]

549
00:25:31,900 --> 00:25:33,730
>> OK, jeden človek sa to páčilo.

550
00:25:33,730 --> 00:25:37,270
Takže si všimnúť celú tú dobu, ak vás
kliknite na odkaz Zdieľať, vás samozrejme

551
00:25:37,270 --> 00:25:41,390
získať adresu URL, ktoré môžete v skutočnosti
vložiť do e-mailu alebo forenznú image

552
00:25:41,390 --> 00:25:43,730
alebo vo problém nastaviť alebo v snímke.

553
00:25:43,730 --> 00:25:49,055
A teraz, keď som namiesto toho kliknite na embed,
Všimnite si, že celú tú dobu, tohle

554
00:25:49,055 --> 00:25:49,680
bol tam.

555
00:25:49,680 --> 00:25:50,910
Chystám sa ísť dopredu a kopírovať to.

556
00:25:50,910 --> 00:25:54,000
>> A len tak môžeme lepšie vidieť, že som
chystá vložiť ho do textového editora.

557
00:25:54,000 --> 00:25:55,860
Všimnite si, že toto
YouTube bol hovorím.

558
00:25:55,860 --> 00:25:57,693
Zakaždým, keď navštívite
YouTube video, ak ste

559
00:25:57,693 --> 00:26:00,410
chcete vložiť video na
webové stránky, jednoducho uchopiť toto.

560
00:26:00,410 --> 00:26:03,350
Takže toto je ďalší
HTML tag nazvaný iframe.

561
00:26:03,350 --> 00:26:04,590
Alebo in line rámu.

562
00:26:04,590 --> 00:26:08,680
Tak to aj vyzerá trochu viac
zložitejšie než všetky ostatné.

563
00:26:08,680 --> 00:26:11,950
Tak to dopadá, že obraz
tag a zrejme tag iframe

564
00:26:11,950 --> 00:26:13,370
vziať, čo sa nazýva atribúty.

565
00:26:13,370 --> 00:26:15,710
>> A to je ďalší
kus syntax v HTML.

566
00:26:15,710 --> 00:26:19,240
Okrem tagu
názov, otvorený držiak menovka,

567
00:26:19,240 --> 00:26:23,780
môžete ovládať správanie tagu
tým, že má veľa atribútu

568
00:26:23,780 --> 00:26:24,860
sa rovná hodnote.

569
00:26:24,860 --> 00:26:26,290
Atribút sa rovná hodnote.

570
00:26:26,290 --> 00:26:28,100
A tak napríklad,
YouTube nám hovorí,

571
00:26:28,100 --> 00:26:31,990
ak chcete, šírku tohto videa
byť 420 pixelov a výška

572
00:26:31,990 --> 00:26:35,470
byť 315 pixelov, to je
ako to vyjadriť vo formáte HTML.

573
00:26:35,470 --> 00:26:38,480
>> Zdrojom videa sa deje
sa, že dlhé YouTube URL

574
00:26:38,480 --> 00:26:40,830
a potom niektoré ďalšie veci
ako rám hranica je nula,

575
00:26:40,830 --> 00:26:43,500
takže pravdepodobne znamená, že je
bez ohraničenia okolo veci.

576
00:26:43,500 --> 00:26:45,450
Umožniť celú obrazovku pravdepodobne
Znamená to, že užívateľ

577
00:26:45,450 --> 00:26:47,840
môžete kliknúť na tlačidlo a
vlastne celej obrazovke video.

578
00:26:47,840 --> 00:26:52,870
Takže či naozaj chcem byť
pôsobivý tu v Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
skôr než použiť značku obrazu, nech
me odstrániť, že namiesto toho vložiť tento.

580
00:26:58,490 --> 00:27:00,810
A teraz znovu.

581
00:27:00,810 --> 00:27:02,500
A teraz je to tu zase.

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

583
00:27:04,979 --> 00:27:06,020
Dobre, to stačí.

584
00:27:06,020 --> 00:27:08,970
Dobre, takže sa budem snažiť
ťažké to urobiť znovu.

585
00:27:08,970 --> 00:27:11,400
Takže aké sú niektoré z takeaways tu?

586
00:27:11,400 --> 00:27:15,130
Takže HTML, tak škaredá, ako týchto webových stránkach
sú, je vlastne celkom jednoduchý.

587
00:27:15,130 --> 00:27:16,467
Nie je to programovací jazyk.

588
00:27:16,467 --> 00:27:17,550
Nemá funkcie.

589
00:27:17,550 --> 00:27:18,410
Nemá slučky.

590
00:27:18,410 --> 00:27:19,535
Nemá podmienky.

591
00:27:19,535 --> 00:27:22,900
Všetko, čo to má, je desiatky
rôzne značky, z ktorých každá

592
00:27:22,900 --> 00:27:24,620
má nulovú alebo viac atribútov.

593
00:27:24,620 --> 00:27:27,320
A v skutočnosti to, čo je zábavné o
HTML ako začnete ponoriť do

594
00:27:27,320 --> 00:27:29,560
je, že je veľmi seba učenlivý.

595
00:27:29,560 --> 00:27:32,880
>> Všetko, čo to vyžaduje, je pochopenie
všeobecného rámca HTML.

596
00:27:32,880 --> 00:27:36,510
Čo je to značka, aká je atribútom,
ako si vlastne nakonfigurovať webovú stránku

597
00:27:36,510 --> 00:27:37,250
nasledovne.

598
00:27:37,250 --> 00:27:40,720
A všetko ostatné je naozaj výsledok
pozerať sa v on-line referencie

599
00:27:40,720 --> 00:27:43,080
alebo googling ako urobiť nejaké
techniky alebo ako sme videli,

600
00:27:43,080 --> 00:27:45,371
pri pohľade na Facebook zdroje
kódu, pri pohľade na webové stránky

601
00:27:45,371 --> 00:27:48,710
že sa vám páči na to je zdrojový kód a
pochopenie toho, ako vývojári tam

602
00:27:48,710 --> 00:27:50,550
vlastne položil veci.

603
00:27:50,550 --> 00:27:52,180
>> Takže môžeme robiť obrazy rovnako.

604
00:27:52,180 --> 00:27:53,994
A v skutočnosti, to urobili sme pred chvíľou.

605
00:27:53,994 --> 00:27:55,410
Nechaj ma ísť napred a len ukázať vám.

606
00:27:55,410 --> 00:27:56,770
Tu je niekoľko ukážkový kód.

607
00:27:56,770 --> 00:27:58,380
Ak ste niekedy chceli vidieť nevrlý mačku.

608
00:27:58,380 --> 00:28:00,620
Tak si všimnite, že môžem
majú značku obrázku tu.

609
00:28:00,620 --> 00:28:02,090
A ja mám poznámku nad ňou.

610
00:28:02,090 --> 00:28:04,490
Mám alternatívu
text pre prístupnosť.

611
00:28:04,490 --> 00:28:07,250
Takže niekto, kto je pomocou obrazovky
čitateľ z dôvodov pohľad

612
00:28:07,250 --> 00:28:10,172
môžu v skutočnosti potom majú svoje
Čítačka obrazovky hovoria nevrlý mačku.

613
00:28:10,172 --> 00:28:11,880
Pretože ak to nie je možné
viď obrázok, oni

614
00:28:11,880 --> 00:28:14,504
môžu mať aspoň ich počítač
povedzte im, ústne, čo to je.

615
00:28:14,504 --> 00:28:18,020
A zdrojom tohto súboru je cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Takže v skutočnosti, keď som chcel
dostať šikovný, čo som mohol mať done--

617
00:28:22,472 --> 00:28:25,680
Sľubujem, že nebudem ísť do Rick Astley, tak
Budem google pre mačku miesto.

618
00:28:25,680 --> 00:28:28,290
A keď som sa ísť na Google Images
tu, a my predpokladáme,

619
00:28:28,290 --> 00:28:30,040
že sa jedná o obraz môjho kocúra.

620
00:28:30,040 --> 00:28:35,070
>> Predpokladajme, že mám kontrola klikol
alebo vpravo klikli na to, náhodne

621
00:28:35,070 --> 00:28:35,630
strašidelný.

622
00:28:35,630 --> 00:28:40,320
A cat.jpeg Idem
ušetriť na mojom desktope.

623
00:28:40,320 --> 00:28:44,700
Dovoľte mi, aby som sa vrátiť k Cloud 9.

624
00:28:44,700 --> 00:28:48,150
Všimnite si, že tu môžem
ísť nahrať miestne súbory.

625
00:28:48,150 --> 00:28:51,530
A keď som to chytiť
Súbor, cat.jpeg, oznámenie

626
00:28:51,530 --> 00:28:54,674
že môžem pretiahnuť a
hodiť ho do Cloud 9

627
00:28:54,674 --> 00:28:56,090
a to bude kričať na mňa tu.

628
00:28:56,090 --> 00:28:59,000
>> Pretože sme už
vám dal súbor cat.jpeg,

629
00:28:59,000 --> 00:29:01,430
ale je to super ľahko
urvat fotografiu, ktorú ste si

630
00:29:01,430 --> 00:29:03,220
prevzaté z Facebooku
alebo Flickr alebo podobne

631
00:29:03,220 --> 00:29:05,678
a vlastne ho pretiahnite
do Cloud 9 a potom sa to

632
00:29:05,678 --> 00:29:07,970
súčasťou vášho vlastného osobného
webové stránky alebo problém

633
00:29:07,970 --> 00:29:10,442
nastaviť sedem alebo osem, ako budeme čoskoro vidieť.

634
00:29:10,442 --> 00:29:12,150
A potom, keď vás
konečne navštíviť tú mačku,

635
00:29:12,150 --> 00:29:16,610
za predpokladu, Stiahol som si, že rovnaké mačku,
Oznámenia that-- že bol rozkošný.

636
00:29:16,610 --> 00:29:19,160
>> Čo by ste vidieť, je
niečo také tvár tu.

637
00:29:19,160 --> 00:29:21,810
Takže súbory, ktoré ste
Odkaz na webové stránky

638
00:29:21,810 --> 00:29:26,050
môžu byť buď lokálne vo svojej vlastnej
účet alebo vzdialené na inom serveri

639
00:29:26,050 --> 00:29:29,670
ako je tomu v prípade Rick
Astley fotografie pred chvíľou.

640
00:29:29,670 --> 00:29:32,990
Tak kde to, čo else--
inak môžeme robiť?

641
00:29:32,990 --> 00:29:34,890
Takže poďme sa pozrieť na nasledujúce.

642
00:29:34,890 --> 00:29:36,160
Viete, čo je trochu cool?

643
00:29:36,160 --> 00:29:39,330
>> Doteraz sme robili
veľmi statické webové stránky.

644
00:29:39,330 --> 00:29:41,830
Chcem okoreniť veci takto.

645
00:29:41,830 --> 00:29:44,344
Chcem, aby moje vlastné vyhľadávač.

646
00:29:44,344 --> 00:29:47,010
Tak, aby sa vyhľadávače, poďme
choďte do toho a začať robiť to.

647
00:29:47,010 --> 00:29:52,570
Chystám sa ísť dopredu a vytvoriť
nový súbor s názvom search.html.

648
00:29:52,570 --> 00:29:54,890
A my sme prefabed verzie on-line.

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

650
00:29:56,027 --> 00:29:57,610
Nepoužívajte vložiť do okna vášho terminálu.

651
00:29:57,610 --> 00:29:58,744
Montované verzie on-line.

652
00:29:58,744 --> 00:30:00,160
A ja začnem nasledovne.

653
00:30:00,160 --> 00:30:04,490
Tak tu je to začiatok
súbor s názvom search.html.

654
00:30:04,490 --> 00:30:07,510
Budem uložiť ho do
dnešné zdrojový adresár.

655
00:30:07,510 --> 00:30:09,079
Budem volať túto Hľadať.

656
00:30:09,079 --> 00:30:10,370
Vlastne, budeme robiť to lepšie.

657
00:30:10,370 --> 00:30:13,600
CS50 Search a vlastne to značka.

658
00:30:13,600 --> 00:30:17,500
A teraz, budem hovoriť
niečo ako H1 CS50 Search.

659
00:30:17,500 --> 00:30:20,930
A potom tu dole, H2 čoskoro.

660
00:30:20,930 --> 00:30:23,230
A len zhrnúť, H1 a
H2 mysli to, čo v tomto poradí?

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

662
00:30:26,750 --> 00:30:30,320
>> Jo, tak veľké a odvážne, a
nie je tak veľký, ale stále tučne.

663
00:30:30,320 --> 00:30:37,375
Takže keď som sa zachrániť to a ísť sem,
pozrime sa súbor search.html.

664
00:30:37,375 --> 00:30:42,560
Dobre, a ten
je right-- [nepočuteľný].

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

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

667
00:30:49,110 --> 00:30:49,945
David je zmätený.

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

669
00:30:52,610 --> 00:30:54,080
Oh, je to priamo tam.

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

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

672
00:30:55,420 --> 00:30:56,660
Tak tu to je.

673
00:30:56,660 --> 00:30:58,350
Takže CS50 hľadanie čoskoro.

674
00:30:58,350 --> 00:31:00,370
Takže teraz, poďme syntetizovať
to, čo sme robili minulý týždeň.

675
00:31:00,370 --> 00:31:03,400
>> Tam, kde sme hovorili o
nižšej mechanika HTTP úrovni.

676
00:31:03,400 --> 00:31:05,780
A tieto nové nápady
HTML, ktorý je len

677
00:31:05,780 --> 00:31:08,890
to značkovací jazyk kde na vás
povedzte prehliadač presne, čo robiť

678
00:31:08,890 --> 00:31:10,740
a realizovať naše vlastné vyhľadávač.

679
00:31:10,740 --> 00:31:12,520
Takže namiesto toho len
povediac skoro, ja som

680
00:31:12,520 --> 00:31:14,810
chystá zaviesť
niečo, čo nazýva tag formulára.

681
00:31:14,810 --> 00:31:19,610
A v tejto podobe, budem
mať niečo ako vstupné pole.

682
00:31:19,610 --> 00:31:22,450
>> A meno tohto vstupu
pole, budem to hovoriť Q.

683
00:31:22,450 --> 00:31:26,240
A typ tomto vstupnom poli
Chystám sa povedať, je len "text".

684
00:31:26,240 --> 00:31:29,130
A textové pole, ako sme to
vidieť, je len textové pole.

685
00:31:29,130 --> 00:31:32,830
A tak to nie je zmysel tu mať
niečo vnútri nej na tomto mieste.

686
00:31:32,830 --> 00:31:35,320
A tak som jednoducho ísť
zavrieť tag s tým

687
00:31:35,320 --> 00:31:38,099
lomítko priamo v tagu sám.

688
00:31:38,099 --> 00:31:39,890
A potom budem
jeden iný vstup.

689
00:31:39,890 --> 00:31:43,480
Typ vstupu rovná odoslať.

690
00:31:43,480 --> 00:31:45,320
A potom budem
zatvoriť tento taky.

691
00:31:45,320 --> 00:31:46,840
>> A teraz ja idem späť.

692
00:31:46,840 --> 00:31:49,520
A už vidíme,
aj keď celkom škaredý, som

693
00:31:49,520 --> 00:31:52,460
dostal začiatky
moje vlastné vyhľadávacie stránku tu.

694
00:31:52,460 --> 00:31:55,150
V skutočnosti, dovoľte mi, aby som sa snaží
vyčistiť to sa trochu.

695
00:31:55,150 --> 00:31:57,330
Ukazuje sa, že na
vstup tu, môžem mať

696
00:31:57,330 --> 00:31:59,910
ďalší atribút s názvom zástupný symbol.

697
00:31:59,910 --> 00:32:05,165
A ja som mohol vidieť niečo ako kľúčové slová,
alebo viac špecificky, otázka pre q.

698
00:32:05,165 --> 00:32:07,820
>> A všimnite si, teraz, mám
tento druh šedej texte

699
00:32:07,820 --> 00:32:10,440
že zmizne as
Akonáhle začnem písať,

700
00:32:10,440 --> 00:32:12,930
ale je to asi niečo
ste videli v iných webových stránkach.

701
00:32:12,930 --> 00:32:14,650
Nemám naozaj rád na tlačidlo Odoslať.

702
00:32:14,650 --> 00:32:18,320
Takže som vlastne bude dať
Tlačidlo pre odoslanie hodnotu vyhľadávanie.

703
00:32:18,320 --> 00:32:21,680
A teraz, keď som znovu, všimnite si, že
môj Tlačidlo stane menoval vyhľadávania.

704
00:32:21,680 --> 00:32:24,140
Viete, ja naozaj nemám
rovnako ako logo tu.

705
00:32:24,140 --> 00:32:27,140
Takže generátor Google Font.

706
00:32:27,140 --> 00:32:28,820
>> Chcem okoreniť to ešte vyššie.

707
00:32:28,820 --> 00:32:30,660
Takže CS50 vyhľadávania.

708
00:32:30,660 --> 00:32:31,870
Dovoľte mi, aby som vytvoriť vlastné logo.

709
00:32:31,870 --> 00:32:33,080
To vyzerá pekne.

710
00:32:33,080 --> 00:32:36,945
Takže teraz mi dovoľte zachrániť tento as-- poď.

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

712
00:32:40,710 --> 00:32:43,120
Tam, kde to ide?

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

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

715
00:32:44,160 --> 00:32:44,980
Minul.

716
00:32:44,980 --> 00:32:47,740
Uložiť ako.

717
00:32:47,740 --> 00:32:49,470
Hlúpy prehliadačov.

718
00:32:49,470 --> 00:32:51,700
Stand by, budeme
opraviť raz navždy.

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

720
00:32:57,650 --> 00:32:58,590
Tam sme ísť.

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

722
00:32:59,090 --> 00:32:59,600
Prepáčte.

723
00:32:59,600 --> 00:33:00,750
Off deň.

724
00:33:00,750 --> 00:33:02,310
Teraz je to funky.

725
00:33:02,310 --> 00:33:03,160
Ukončite celú obrazovku.

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

727
00:33:04,150 --> 00:33:06,870
>> Teraz, ako normálny
osoba, uložiť obrázok ako.

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

729
00:33:08,810 --> 00:33:13,194
Teraz idem do CS50IDE a
Chystám sa jednoducho chytiť logá,

730
00:33:13,194 --> 00:33:15,360
Chystám sa pretiahnuť do
Môj zdroj siedmich adresár,

731
00:33:15,360 --> 00:33:17,002
Súbor už existuje, ja som s tým OK.

732
00:33:17,002 --> 00:33:19,210
Takže budem ho prepísať
preto, že už som ho mal.

733
00:33:19,210 --> 00:33:20,630
A teraz ako to mám zbaviť tohto?

734
00:33:20,630 --> 00:33:24,670
>> Poďme napred sem a robiť
obrázok zdroj rovná logo.gif.

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

736
00:33:25,490 --> 00:33:26,050
Ušetrite.

737
00:33:26,050 --> 00:33:30,560
A teraz, keď som sa vrátiť do svojho vyhľadávania
strana, teraz vyzerá to celkom dobre.

738
00:33:30,560 --> 00:33:33,610
Dobre, tak to nemá
docela urobil niečo užitočné.

739
00:33:33,610 --> 00:33:37,000
V skutočnosti, dovoľte mi, aby som skúsiť vyhľadávanie
pre mačku a uvidíme, čo sa stane.

740
00:33:37,000 --> 00:33:38,890
Mačky.

741
00:33:38,890 --> 00:33:39,420
Dočerta.

742
00:33:39,420 --> 00:33:41,400
To nie je len práca, zrejme.

743
00:33:41,400 --> 00:33:43,760
Takže to, čo je kľúč kus
že je tu chýba?

744
00:33:43,760 --> 00:33:49,100
>> Dobre, aj keď nepoznáte žiadne HTML,
Začal som označenie, ktorý formulár telefónu

745
00:33:49,100 --> 00:33:54,130
a ja som povedal, to, ako sa dostať vstupov,
daj mi textové pole a tlačidlo pre odoslanie,

746
00:33:54,130 --> 00:33:55,730
čo kus zjavne chýba?

747
00:33:55,730 --> 00:33:58,975
Predpokladajme, že chceme, aby skutočne dostať
táto vec pracuje správne.

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

749
00:34:02,420 --> 00:34:05,360
Čo musíme urobiť?

750
00:34:05,360 --> 00:34:08,860
Máme potrebu zaviesť zadný koniec
databázu alebo vyhľadávač sám,

751
00:34:08,860 --> 00:34:11,210
a že to bude trvať
veľa času, úprimne.

752
00:34:11,210 --> 00:34:13,380
>> Takže pamätajte, čo sme robili minule.

753
00:34:13,380 --> 00:34:18,230
Takže ak hľadáte niečo na Googli
a vy ste v predstihu vypnutý,

754
00:34:18,230 --> 00:34:20,355
Pripomeňme, okamžité vyhľadávanie.

755
00:34:20,355 --> 00:34:22,230
Dovoľte mi teda vypni to
tak, že toto v skutočnosti

756
00:34:22,230 --> 00:34:26,650
sa chová ako starší školský prehliadača,
keď som teraz hľadať niečo ako mačky,

757
00:34:26,650 --> 00:34:28,190
spomenúť, čo URL vyzerá.

758
00:34:28,190 --> 00:34:29,449
Je to celkom tajomný.

759
00:34:29,449 --> 00:34:33,000
Ale vložené tam,
Pripomeňme, je lomítko vyhľadávanie.

760
00:34:33,000 --> 00:34:35,100
Otáznik q sa rovná mačky.

761
00:34:35,100 --> 00:34:37,760
>> A to sa zdá, aby mi
celá partia výsledkov vyhľadávania.

762
00:34:37,760 --> 00:34:39,134
Takže viete, čo budem robiť?

763
00:34:39,134 --> 00:34:41,650
Idem si požičať
Google na chvíľku.

764
00:34:41,650 --> 00:34:43,670
Chystám sa ísť cez
tu a budem hovoriť

765
00:34:43,670 --> 00:34:47,850
že tieto tvoria opatrenia alebo
cieľ, aby som tak povedal,

766
00:34:47,850 --> 00:34:49,330
by mala byť doslova Google.

767
00:34:49,330 --> 00:34:52,590
A metóda som chcel
po použití bude mať.

768
00:34:52,590 --> 00:34:53,560
>> Takže to, čo je akcia?

769
00:34:53,560 --> 00:34:55,760
Akcia je podivne pomenovaný,
ale to len znamená,

770
00:34:55,760 --> 00:34:58,120
kto bude spracovávať
akcie tohto formulára?

771
00:34:58,120 --> 00:35:00,820
Keď som kliknite na tlačidlo Hľadať, kde
by mal výsledok ísť?

772
00:35:00,820 --> 00:35:05,300
A keď som sa teraz vrátiť k mojej podobe
tu a obnovte mojej webovej stránky

773
00:35:05,300 --> 00:35:09,000
a teraz niečo hľadať
ako pes, všimnite si teraz

774
00:35:09,000 --> 00:35:10,850
Som znovu zavedená Google.

775
00:35:10,850 --> 00:35:11,350
Je to tak?

776
00:35:11,350 --> 00:35:14,141
>> Ak chcem niečo hľadať
inak, to funguje u nielen psy,

777
00:35:14,141 --> 00:35:16,400
funguje aj pre mačky.

778
00:35:16,400 --> 00:35:21,930
Funguje tiež na CS50.

779
00:35:21,930 --> 00:35:24,310
A OK, je to len
pod zdrvujúcu, nie je to?

780
00:35:24,310 --> 00:35:25,920
Dobre, ale to vlastne funguje.

781
00:35:25,920 --> 00:35:27,360
Tak čo sa skutočne deje?

782
00:35:27,360 --> 00:35:31,340
Takže som učil môj prehliadač, pomocou
HTML, aby sa vstup od užívateľa

783
00:35:31,340 --> 00:35:35,810
a vlastne poslať ten vstup
k vzdialenému serveru pomocou protokolu HTTP.

784
00:35:35,810 --> 00:35:39,120
>> A pretože mojom prehliadači
chápe HTTP, to vlastne

785
00:35:39,120 --> 00:35:43,500
konštruovať tak, aby to, čo URL
Skončím cez v mojom prehliadači,

786
00:35:43,500 --> 00:35:45,660
Všimnite si, čo sa stane,
keď som hľadal psa.

787
00:35:45,660 --> 00:35:49,270
Keby som kliknite na tlačidlo Hľadať, Všimnite si, že
URL sa mení, ako som zamýšľal

788
00:35:49,270 --> 00:35:52,770
na google.com/search~~V dotaz rovná psa.

789
00:35:52,770 --> 00:35:56,020
A to preto, že forme
vie, pretože metóda je získať,

790
00:35:56,020 --> 00:35:59,560
jednoducho pripojiť ju k tejto tam URL.

791
00:35:59,560 --> 00:36:01,730
>> Teraz, tieto webové stránky sú stále škaredé.

792
00:36:01,730 --> 00:36:04,890
Takže poďme predstaviť jeden ďalší
kus syntaxe ak môžeme dnes.

793
00:36:04,890 --> 00:36:07,640
A to je niečo, známy
ako kaskádových štýlov.

794
00:36:07,640 --> 00:36:10,720
Dovoľte mi teda sa pozrieť na
Tento príklad tu a vidieť

795
00:36:10,720 --> 00:36:12,380
ak môžeme odvodiť, čo sa deje.

796
00:36:12,380 --> 00:36:14,520
To je CSS0.html.

797
00:36:14,520 --> 00:36:16,532
A to je miesto, kde sa veci
trochu škaredé.

798
00:36:16,532 --> 00:36:18,490
Vzhľadom k tomu, bohužiaľ,
vo svete internetu,

799
00:36:18,490 --> 00:36:20,920
HTML sám o sebe nemôže robiť všetko.

800
00:36:20,920 --> 00:36:22,920
A tak ak chcete
štylizovať svoje webové stránky,

801
00:36:22,920 --> 00:36:28,370
je skutočne potrebné sa zamerať na
estetika v odlišným spôsobom.

802
00:36:28,370 --> 00:36:33,090
Tak tu, mám telo mojom webe
strana, ktorého vnútrajšok je veľký div.

803
00:36:33,090 --> 00:36:34,700
A div jednoducho znamená rozdelenie.

804
00:36:34,700 --> 00:36:38,060
Takže je to ako bod, ale to
nemá rovnakú sémantiku

805
00:36:38,060 --> 00:36:39,180
z odseku textu.

806
00:36:39,180 --> 00:36:40,940
>> To len znamená, že k
prehliadača, prichádza

807
00:36:40,940 --> 00:36:45,210
veľký obdĺžnikový oblasť mojom webe
strana, chcem s ňou zaobchádzať zvlášť.

808
00:36:45,210 --> 00:36:47,420
Teraz, linka 21 je miesto, kde začína, že div.

809
00:36:47,420 --> 00:36:48,770
A stačí sa hádať.

810
00:36:48,770 --> 00:36:53,080
Aký je vplyv riadku 21 na
Zvyšok obsahu stránky?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Centrovacie to.

813
00:36:56,311 --> 00:36:56,810
To je všetko.

814
00:36:56,810 --> 00:36:58,830
Takže sme nevideli spôsob
v skutočnosti centrovanie textu.

815
00:36:58,830 --> 00:37:00,996
>> V skutočnosti, moja vyhľadávače,
na rozdiel od skutočného Google,

816
00:37:00,996 --> 00:37:03,040
všetko bolo odôvodnené smerom doľava.

817
00:37:03,040 --> 00:37:07,430
A tak teraz v riadku 21, hovorím, hej
browser, vytvorte rozdelenie stránky.

818
00:37:07,430 --> 00:37:09,450
Len mi dajte veľký, neviditeľný obdĺžnik.

819
00:37:09,450 --> 00:37:11,490
To je to, ako chcem
myslieť na webové stránky.

820
00:37:11,490 --> 00:37:13,870
A potom to štylizácia takto.

821
00:37:13,870 --> 00:37:16,900
Vo vnútri týchto citácií,
Teraz, je druhý jazyk

822
00:37:16,900 --> 00:37:19,969
že sme zaviedli dnes
tzv kaskádové štýly.

823
00:37:19,969 --> 00:37:22,010
Našťastie, to tiež nie je
programovací jazyk,

824
00:37:22,010 --> 00:37:26,470
tak je to veľmi obmedzený v jeho syntaxi, ale
tiež veľmi obmedzený vo svojej funkčnosti

825
00:37:26,470 --> 00:37:30,670
vzhľadom k tomu, HTML je všetko okolo
značkovanie dáta webové stránky

826
00:37:30,670 --> 00:37:32,130
a štruktúra webovej stránky.

827
00:37:32,130 --> 00:37:35,320
CSS je všeobecne o
poslednej míle, estetika,

828
00:37:35,320 --> 00:37:40,160
ako veľkosť a farbu a
umiestnenie presne priamo na webovej stránke.

829
00:37:40,160 --> 00:37:43,000
A skutočne, to je tvorené
s kľúče a hodnoty.

830
00:37:43,000 --> 00:37:46,290
>> Nehnuteľnosť ako je tento, textu
zladiť, nasledované dvojbodkou,

831
00:37:46,290 --> 00:37:49,720
nasledované hodnotou, ktorá
majetok, ktorý je v tomto prípade je centrom.

832
00:37:49,720 --> 00:37:51,910
A teraz všimnete
môže hniezdo tieto veci.

833
00:37:51,910 --> 00:37:56,780
Keby som chcel všetko v tom, že
Ja som zvýrazní sa na stred,

834
00:37:56,780 --> 00:38:00,270
to je dôvod, prečo mám linku 21 a
zodpovedajúci riadok 31.

835
00:38:00,270 --> 00:38:04,820
Ale čo teraz chcem povedať, John
Harvard, vitajte na mojej domovskej stránke.

836
00:38:04,820 --> 00:38:06,530
>> Copyright symbol John Harvard.

837
00:38:06,530 --> 00:38:09,180
A predpokladám, že chcem, aby prvý
tieto riadky byť docela veľký.

838
00:38:09,180 --> 00:38:10,450
36 pixelov.

839
00:38:10,450 --> 00:38:11,530
Tak to je slušná veľkosť.

840
00:38:11,530 --> 00:38:13,240
A chcel som jeho váhu byť odvážni.

841
00:38:13,240 --> 00:38:15,450
Ale potom pod tým,
Chcem menšie text.

842
00:38:15,450 --> 00:38:19,980
A pod tým, chcem
ešte menšie textu.

843
00:38:19,980 --> 00:38:20,480
Prepáčte.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Dnes sa cíti ako off deň.

846
00:38:26,940 --> 00:38:29,840
>> Takže teraz, čo vlastne robím to vyjadriť?

847
00:38:29,840 --> 00:38:34,580
Tu na linke 22 je vložený
div alebo vnorené div, ak chcete.

848
00:38:34,580 --> 00:38:36,190
To má svoj vlastný štýl značky taky.

849
00:38:36,190 --> 00:38:38,160
Aj špecifikovať veľkosť písma 36.

850
00:38:38,160 --> 00:38:40,460
Aj špecifikovať váhu písma tučne.

851
00:38:40,460 --> 00:38:43,360
Tu dole, ja len zadať 24 pixelov.

852
00:38:43,360 --> 00:38:45,960
A konečne, v rade 28, I 12 špecifikovať.

853
00:38:45,960 --> 00:38:49,070
Takže rovnako ako rýchlu kontrolu sanitačného
a ako ľudské čítanie to,

854
00:38:49,070 --> 00:38:52,545
ktoré slová na obrazovke,
v skutočnosti bude tučný?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Ktoré linky sú vlastne bold?

857
00:38:58,760 --> 00:38:59,570
>> Len John Harvard.

858
00:38:59,570 --> 00:39:00,070
Je to tak?

859
00:39:00,070 --> 00:39:05,940
Vzhľadom k tomu, rovnako ako linka 22 hovorí, že hej
browser, tu je rozdelenie stránky.

860
00:39:05,940 --> 00:39:07,920
Nech je to veľkosť písma 36 bodu.

861
00:39:07,920 --> 00:39:09,460
Make hmotnosť písmo tučne.

862
00:39:09,460 --> 00:39:11,920
Akonáhle dosiahnete
zodpovedajúce koncová značka

863
00:39:11,920 --> 00:39:15,340
alebo uzavretý tag na linke 24,
to znamená, hej prehliadač,

864
00:39:15,340 --> 00:39:17,640
prestať robiť, čo to je, čo robíte.

865
00:39:17,640 --> 00:39:21,020
A upozornenie, aby bolo jasné, hoci
potrubie 22 má všetky tieto atribúty

866
00:39:21,020 --> 00:39:24,430
ako je štýl, keď vás
zatvoriť značku v rade 24,

867
00:39:24,430 --> 00:39:25,940
si len spomenul názov tagu.

868
00:39:25,940 --> 00:39:29,990
>> Nemusíte opakovať štýl slovo, alebo
všetko, čo je vo vnútri týchto úvodzoviek.

869
00:39:29,990 --> 00:39:32,860
A tak, keď sa pozriem na toto teraz
vo svojom prehliadači, poďme

870
00:39:32,860 --> 00:39:38,060
Pozrite sa na konečný výsledok. Nechaj ma ísť
vpred na tento súbor, ktorý je CSS 0.

871
00:39:38,060 --> 00:39:41,814
A to je ešte celkom obyčajný,
ale stále dosť zaujímavé.

872
00:39:41,814 --> 00:39:43,980
Ale ukazuje sa, že je
ďalšie veci, môžem robiť tu,

873
00:39:43,980 --> 00:39:46,490
a na riziko tvorby
Tento úplne odporný,

874
00:39:46,490 --> 00:39:48,630
Všimnite si, že v mojom
Telo mojej webovej stránky,

875
00:39:48,630 --> 00:39:53,930
Môžem urobiť niečo vtipné
ako bg alebo farby pozadia.

876
00:39:53,930 --> 00:39:56,670
>> A rýchlo, aký je vaša obľúbená farba?

877
00:39:56,670 --> 00:39:57,720
Green Počul som.

878
00:39:57,720 --> 00:39:58,750
Dobre.

879
00:39:58,750 --> 00:40:02,920
Takže teraz, keď som trafil znovu načítať teraz,
máme zelenú webovú stránku.

880
00:40:02,920 --> 00:40:04,710
Dobre, takže to nie je zlé.

881
00:40:04,710 --> 00:40:08,350
A teraz, keď chcem, aby to naozaj
pohode, môžem farbu môjho textu

882
00:40:08,350 --> 00:40:09,360
i červené.

883
00:40:09,360 --> 00:40:10,870
Takže poďme sa pozrieť, ako to vyzerá.

884
00:40:10,870 --> 00:40:12,230
Teraz vyzerá to celkom dobre.

885
00:40:12,230 --> 00:40:15,460
A tu dole, ak ste naozaj
chcem si s niekým

886
00:40:15,460 --> 00:40:17,487
alebo ak chcete byť
jeden z tých ľudí, ktorí

887
00:40:17,487 --> 00:40:20,570
sa snaží prinútiť vás k návšteve web
strana preto, že som napálil Google

888
00:40:20,570 --> 00:40:27,610
do myslenia je tu celá partia
kľúčových slov jako-- pozrime sa, reload.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Kde to šlo?

891
00:40:30,680 --> 00:40:31,530
A tam nás to.

892
00:40:31,530 --> 00:40:32,030
Dobre.

893
00:40:32,030 --> 00:40:34,905
Takže hovorím to ako stranou, budeme
hovoriť o tejto veci za pár týždňov

894
00:40:34,905 --> 00:40:36,740
keď hovoríme o
bezpečnosť, ak ste v skutočnosti

895
00:40:36,740 --> 00:40:38,852
embed celé zväzky
kľúčové slová na webovej stránke,

896
00:40:38,852 --> 00:40:41,810
aj keď nie sú viditeľné pre
ľudský, niekto ako Google, samozrejme,

897
00:40:41,810 --> 00:40:43,250
stále môžete skutočne nájsť to.

898
00:40:43,250 --> 00:40:45,820
Dobre, takže to je celkom
príšerná celkom rýchlo.

899
00:40:45,820 --> 00:40:48,420
>> A v skutočnosti, to nie je všetko
že veľa na rozdiel od mojej vlastnej web

900
00:40:48,420 --> 00:40:51,480
Strana ako vysokoškolák, ktorý
Začal som googling okolo nájsť

901
00:40:51,480 --> 00:40:53,690
minulej verzie mojich starých webových stránok.

902
00:40:53,690 --> 00:40:54,500
Bolo to dosť zlé.

903
00:40:54,500 --> 00:40:56,650
V skutočnosti, som si
jednej tesne pred triedy.

904
00:40:56,650 --> 00:40:58,620
Ale je tu ešte horšie tam vonku.

905
00:40:58,620 --> 00:41:01,534
Toto zrejme bola moja
Domovská stránka už v roku 1996.

906
00:41:01,534 --> 00:41:04,200
Zrejme som si myslel, že to
vhodné pýtať ľudí, ich mená

907
00:41:04,200 --> 00:41:05,991
pred tým, než mohol
skutočne vidieť mojej webovej stránky.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> A potom som im ukázal
niečo hlúpy, pravdepodobne.

910
00:41:11,920 --> 00:41:13,450
Budem vykopať viac pre nabudúce.

911
00:41:13,450 --> 00:41:16,220
Ale teraz, poďme
zvážiť trochu dizajnu.

912
00:41:16,220 --> 00:41:17,444
Už sme hovorili o štýle.

913
00:41:17,444 --> 00:41:19,735
A túto stránku tak ďaleko
väčšina všetko, čo som napísal

914
00:41:19,735 --> 00:41:21,890
je veľmi čistý štylisticky.

915
00:41:21,890 --> 00:41:23,320
Ale čo o dizajne?

916
00:41:23,320 --> 00:41:25,990
No, je tu veľa nadbytočnosti
v tom, čo som robil tu.

917
00:41:25,990 --> 00:41:28,156
>> Zmienil som sa o slovo
farba v niekoľkých miestach.

918
00:41:28,156 --> 00:41:31,630
Zmienil som sa o veľkosť písma v páre
miesta a odvážny v niekoľkých miestach.

919
00:41:31,630 --> 00:41:34,870
A v podstate, ja som čo
miešali dva jazyky.

920
00:41:34,870 --> 00:41:38,100
Mám HTML so svojimi značkami a my
atribúty a potom naraz,

921
00:41:38,100 --> 00:41:40,100
medzi úvodzovkách, mám
druhý jazyk dnes

922
00:41:40,100 --> 00:41:43,830
s názvom CSS, čo je opäť len tie
kľúče a hodnoty, alebo tieto vlastnosti

923
00:41:43,830 --> 00:41:45,280
oddelené dvojbodkou.

924
00:41:45,280 --> 00:41:47,700
>> Ukazuje sa, že veľa
rovnako ako v C, kde sme

925
00:41:47,700 --> 00:41:50,550
môžete začať vytknúť
nejaký kód do hlavičkových súborov,

926
00:41:50,550 --> 00:41:53,520
takže môžeme urobiť to isté v HTML.

927
00:41:53,520 --> 00:41:56,030
A krok k, ktorý je nasledujúci.

928
00:41:56,030 --> 00:42:02,230
Všimnite si, že táto verzia, je CSS1.html
Štrukturálne presne rovnakú webovú stránku.

929
00:42:02,230 --> 00:42:05,250
Tak som dostal veľa
z divs, ale tentoraz som

930
00:42:05,250 --> 00:42:07,220
zbavili obalu
div ako uvidíte.

931
00:42:07,220 --> 00:42:12,390
>> A ja som dal tie tri divy
hornej, strednej a dolnej, jedinečné ID.

932
00:42:12,390 --> 00:42:14,760
To je pekné, pretože by
dávať tie divízie

933
00:42:14,760 --> 00:42:18,715
zo stránky jedinečných identifikátorov,
Aj na ne odkazovať inde.

934
00:42:18,715 --> 00:42:19,215
Kde?

935
00:42:19,215 --> 00:42:21,070
No, dovoľte mi, aby som posúvať nahor.

936
00:42:21,070 --> 00:42:24,070
A tak ďaleko, kedykoľvek sme sa pozrel
v čele webové stránky, čo je

937
00:42:24,070 --> 00:42:28,560
štítok iba sme mali v
hlava webové stránky?

938
00:42:28,560 --> 00:42:29,740
Trochu hlasnejšie.

939
00:42:29,740 --> 00:42:30,799
Len titul doteraz.

940
00:42:30,799 --> 00:42:32,590
Ale ukazuje sa, že je
niekoľko ďalších vecí,

941
00:42:32,590 --> 00:42:35,840
si môžete dať tam, jeden z
ktoré sa to nazýva tag štýl.

942
00:42:35,840 --> 00:42:37,850
Takže pred chvíľou sme sa pozreli
v atribútu štýle.

943
00:42:37,850 --> 00:42:39,150
Ukázalo sa, že je tu značka štýl.

944
00:42:39,150 --> 00:42:41,200
Patrí vnútri
hlava webové stránky.

945
00:42:41,200 --> 00:42:42,840
A teraz si všimnúť, čo robím.

946
00:42:42,840 --> 00:42:46,540
Mám vnútri tohto
style tag nasledujúce.

947
00:42:46,540 --> 00:42:51,190
Som doslova za zmienku na riadku 20 sa
názov tagu, ktorý chcem štylizovať.

948
00:42:51,190 --> 00:42:53,489
>> Potom mám otvorenú zloženou zátvorkou
a uzavreté kučeravé ortézu.

949
00:42:53,489 --> 00:42:56,030
Takže svojim duchom podobať C, ale
opäť, to nie je funkcia,

950
00:42:56,030 --> 00:42:57,796
to je len detail syntaktická tu.

951
00:42:57,796 --> 00:43:00,170
A potom samozrejme, hovorím
prehliadač, hej prehliadač,

952
00:43:00,170 --> 00:43:05,210
aby celé telo stránky
majú zarovnanie textu z centra.

953
00:43:05,210 --> 00:43:06,930
A potom sa to hovorí nasledovné.

954
00:43:06,930 --> 00:43:12,600
Hele prehliadač, keď vidíte HTML
prvok alebo značku na stránke, ktorá

955
00:43:12,600 --> 00:43:17,040
má jedinečný identifikátor vrchole,
takže symbol hash tu jednoducho znamená,

956
00:43:17,040 --> 00:43:21,010
Unikátna myšlienka hore, choďte do toho
a aby jeho veľkosť písma 36

957
00:43:21,010 --> 00:43:22,490
a jeho váha písmo tučne.

958
00:43:22,490 --> 00:43:26,840
>> Hej prehliadač, prvok, ktorého
ID je stredná, aby bolo 24 pixelov.

959
00:43:26,840 --> 00:43:31,070
A hele prehliadač, ak vidíte
Myšlienka na dne, aby bolo 12 pixelov.

960
00:43:31,070 --> 00:43:33,540
Účinok na konci
je presne sam.

961
00:43:33,540 --> 00:43:36,500
Ak by som ísť do CSS 1,
Stránka vyzerá rovnako.

962
00:43:36,500 --> 00:43:39,810
Ale my sme o krok smerom k
o niečo lepší návrh.

963
00:43:39,810 --> 00:43:44,850
Dovoľte mi, aby som sa vrátiť sem do CSS2
a uvidíte, čo ešte som urobil.

964
00:43:44,850 --> 00:43:48,030
>> Teraz je strana je naozaj, ale naozaj čistý.

965
00:43:48,030 --> 00:43:50,730
V skutočnosti, môžem sa zmestili všetky
obsah na stránke tu.

966
00:43:50,730 --> 00:43:54,270
Ale to, čo nová značka som
predstavil, samozrejme?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
A nie je to najlepšie meno pre značku,
pretože to nie je odkaz v tom zmysle,

969
00:43:57,853 --> 00:44:00,780
že ho poznáme, ale to znamená,
odkaz v nejakom inom súbore.

970
00:44:00,780 --> 00:44:02,890
To je niečo ako ostré patrí v C.

971
00:44:02,890 --> 00:44:06,280
>> To je spôsob, ako v HTML
hovoriť hej prehliadač,

972
00:44:06,280 --> 00:44:10,240
choď obsah
Súbor s názvom css2.css.

973
00:44:10,240 --> 00:44:12,880
Vzťah pre mňa,
je, že je to štýlov.

974
00:44:12,880 --> 00:44:17,980
A naozaj, že to, čo jedna z
S je v kaskádových štýlov prostriedkov.

975
00:44:17,980 --> 00:44:20,350
To je štýl list.

976
00:44:20,350 --> 00:44:23,120
Je to len textový súbor obsahujúci
celá partia majetku.

977
00:44:23,120 --> 00:44:25,940
Je to celý rad štýlov
ktoré chcete použiť na stránku.

978
00:44:25,940 --> 00:44:28,860
>> A tak to vraj je
s odkazom na druhého súboru.

979
00:44:28,860 --> 00:44:32,970
A keď otvorím ten, CSS2.css,
Všimnite si, že všetko, čo som urobil

980
00:44:32,970 --> 00:44:35,900
je skopírovať a vložiť všetky
z toho do tohto súboru.

981
00:44:35,900 --> 00:44:38,220
A teraz, aj keď ste nikdy
Pred kódované tejto veci,

982
00:44:38,220 --> 00:44:40,700
zváž s
príslovečná inžinierstva klobúk

983
00:44:40,700 --> 00:44:44,220
o, prečo je toto
lepší konštrukcia asi?

984
00:44:44,220 --> 00:44:48,910
Vytknutie tieto vlastnosti CSS,
ich uvedenie do vlastného súboru.

985
00:44:48,910 --> 00:44:51,330
Aj napriek tomu, že sme vyriešili tento
pred problém ako päť minút

986
00:44:51,330 --> 00:44:52,600
hneď v prvej verzii.

987
00:44:52,600 --> 00:44:55,730
>> Sme nezlepšila
strana štylisticky,

988
00:44:55,730 --> 00:44:57,520
To je proste lepšia
dizajn v nejakom zmysle.

989
00:44:57,520 --> 00:44:58,990
Prečo myslíš, že?

990
00:44:58,990 --> 00:45:01,510
Jo.

991
00:45:01,510 --> 00:45:02,260
Pružnejšie ako?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Jo.

994
00:45:05,540 --> 00:45:07,373
Takže ak chcete ísť
späť a zmeniť veci,

995
00:45:07,373 --> 00:45:09,540
Teraz máte na jednom mieste
kde si môžete niečo zmeniť.

996
00:45:09,540 --> 00:45:11,622
A v skutočnosti, po niečom
ako problém set sedem,

997
00:45:11,622 --> 00:45:13,690
kde budeme implementovať
webové stránky obchodovanie na burze,

998
00:45:13,690 --> 00:45:15,523
že to bude mať
celá rada stránok.

999
00:45:15,523 --> 00:45:17,620
A to by bolo naozaj
nepríjemné, ak sa rozhodnete, hm,

1000
00:45:17,620 --> 00:45:21,630
Nemám naozaj rád 24 pixelov, chcem
aby to bolo 28 pixelov alebo o niečo väčší.

1001
00:45:21,630 --> 00:45:23,550
A potom budú musieť urobiť
globálne nájsť a nahradiť

1002
00:45:23,550 --> 00:45:27,560
alebo otvoriť všetky súbory vašich webových stránok
proste skutočne zmeniť jednu hodnotu.

1003
00:45:27,560 --> 00:45:31,290
Vytknutím tieto štýly
na jednom centrálnom mieste,

1004
00:45:31,290 --> 00:45:34,720
Teraz môžete otvoriť jeden textový súbor
v CS50IDE do akéhokoľvek programu,

1005
00:45:34,720 --> 00:45:36,479
zmeňte ju, uložiť, a hotovo.

1006
00:45:36,479 --> 00:45:38,270
Vy ste šíri tí,
zmeny všade.

1007
00:45:38,270 --> 00:45:42,450
A že by bolo rovnaké
v dot h súboru rovnako.

1008
00:45:42,450 --> 00:45:46,697
Takže nejaké otázky tak
ďaleko na túto syntax?

1009
00:45:46,697 --> 00:45:48,530
Dobre, takže máme
urobil všetko zdá

1010
00:45:48,530 --> 00:45:51,170
s výnimkou skutočne realizovať hypertextové odkazy.

1011
00:45:51,170 --> 00:45:52,740
A tak poďme do toho a to urobiť.

1012
00:45:52,740 --> 00:45:54,830
Nechaj ma ísť dopredu a
vytvorenie nového súboru tu.

1013
00:45:54,830 --> 00:45:59,970
Chystám sa to nazvať
link.html, dal v dnešnom kódu.

1014
00:45:59,970 --> 00:46:03,000
>> A ja budem robiť open
držiak typu doc ​​html.

1015
00:46:03,000 --> 00:46:05,970
Ako stranou, toto na
top, tento typ deklarácia doc,

1016
00:46:05,970 --> 00:46:08,420
to je jediná, ktorá je divný
s výkričníkom.

1017
00:46:08,420 --> 00:46:12,100
Musíte len na to tam, a to
znamená, že sme pomocou HTML verzie 5.

1018
00:46:12,100 --> 00:46:14,460
Staršie verzie
jazyka mali oveľa dlhšie

1019
00:46:14,460 --> 00:46:16,400
reťazce, ktoré ste potrebovali dať tam.

1020
00:46:16,400 --> 00:46:18,620
Takže tu je príklad tzv odkaz.

1021
00:46:18,620 --> 00:46:20,950
>> Potrebujem telo mojej webovej stránky tu.

1022
00:46:20,950 --> 00:46:29,770
A tu a href rovná
povedzme HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
a môj obľúbený webové stránky, budeme hovoriť.

1024
00:46:35,420 --> 00:46:38,550
Dobre, tak veľmi
neškodný, užívateľsky prívetivé stránky.

1025
00:46:38,550 --> 00:46:42,950
Ak by som teraz ísť do môjho adresára
výpis sem a otvoriť link.html,

1026
00:46:42,950 --> 00:46:44,780
máme hyper text.

1027
00:46:44,780 --> 00:46:47,410
>> A skutočne, to je miesto, kde
H v HTTP pochádza.

1028
00:46:47,410 --> 00:46:51,580
Hypertext Transfer Protocol
je o prenos textu

1029
00:46:51,580 --> 00:46:53,840
že má hypertextové odkazy na iné zdroje.

1030
00:46:53,840 --> 00:46:58,210
A skutočne, tu je oboznámený,
ak retro, modrý odkaz, ktorý v prípade kliknutí

1031
00:46:58,210 --> 00:47:02,607
ma skutočne viesť k Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Teraz, ach, to je vyjde čoskoro.

1033
00:47:03,940 --> 00:47:08,970
Dobre, takže teraz, aké sú niektoré
dôsledkov to?

1034
00:47:08,970 --> 00:47:11,610
>> A úprimne povedané, začína svet
sa trochu známejší

1035
00:47:11,610 --> 00:47:15,090
a tiež trochu desivejšie
ale tiež o niečo viac

1036
00:47:15,090 --> 00:47:17,840
ja obhájiteľný akonáhle začnete
pochopiť tieto veci.

1037
00:47:17,840 --> 00:47:21,610
Vzhľadom k tomu, šance sú, že niektorí z vás, keď idete
prostredníctvom vašej zložke so spamom Gmail, alebo dokonca

1038
00:47:21,610 --> 00:47:23,990
Váš e-mailovej schránky, pravdepodobne ste
dostal nejaký e-mail

1039
00:47:23,990 --> 00:47:26,980
ktorý je po vás Ak chcete zmeniť
Heslo možná alebo možno overiť

1040
00:47:26,980 --> 00:47:28,910
PayPal poverenia alebo ktovie čo ešte.

1041
00:47:28,910 --> 00:47:34,510
>> A v skutočnosti, možno ste dostali
niečo, čo hovorí, že podobne kliknite sem

1042
00:47:34,510 --> 00:47:42,260
resetovať PayPal heslo.

1043
00:47:42,260 --> 00:47:44,130
A teraz, všimnite si, ak
to nie je Disney.com

1044
00:47:44,130 --> 00:47:51,600
ale ako badplace.com a
reload, že text tu

1045
00:47:51,600 --> 00:47:53,710
Dalo by sa povedať niečo vôbec.

1046
00:47:53,710 --> 00:47:55,260
A v skutočnosti je to len slová.

1047
00:47:55,260 --> 00:48:04,610
Prečo by som vlastne byť super škodlivý
a hovoria http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Kliknite tu resetovať PayPal
heslo a teraz znovu.

1049
00:48:14,090 --> 00:48:16,220
To vyzerá celkom legitímne, že jo?

1050
00:48:16,220 --> 00:48:20,470
Chcem povedať, že by to, kliknite na
e-mail, ktorý práve hovorí, že tento.

1051
00:48:20,470 --> 00:48:22,450
Nevšimnúť tu dichotómia.

1052
00:48:22,450 --> 00:48:26,880
Hovorí www.paypal.com,
a v skutočnosti, počkajte chvíľu,

1053
00:48:26,880 --> 00:48:29,210
Vieme, že chcete
S pre bezpečnosť.

1054
00:48:29,210 --> 00:48:35,450
Takže teraz, choďte na www.paypal.com HTTPS,
ale ak ste nikdy nerobil,

1055
00:48:35,450 --> 00:48:38,182
sa dostať do zvyk
vznášajúce sa nad malé odkazy tu.

1056
00:48:38,182 --> 00:48:39,890
A je ťažké vidieť,
tam na obrazovke,

1057
00:48:39,890 --> 00:48:41,340
a je to tu nie je tak jednoduchšie.

1058
00:48:41,340 --> 00:48:43,615
Ale tu cesta dole
malý nepatrný roh

1059
00:48:43,615 --> 00:48:45,740
robí prehliadač skutočne
vám povedať, že ideme

1060
00:48:45,740 --> 00:48:48,850
na badplace.com miesto Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
A teraz, kam ideme s tým?

1062
00:48:51,620 --> 00:48:54,859
Všetky príklady sme dnes urobili,
sme tvrdo kódované a zadali ručne.

1063
00:48:54,859 --> 00:48:56,900
Web je neuveriteľne
nezaujímavé, keď budete tvrdo

1064
00:48:56,900 --> 00:48:59,844
kódovať vaše webové stránky tak, aby obsah
je statická a nikdy sa nemení.

1065
00:48:59,844 --> 00:49:01,760
Samozrejme, že všetky naše
obľúbené stránky dnes,

1066
00:49:01,760 --> 00:49:04,470
či už je to Gmail alebo Twitter alebo
Facebook alebo ľubovoľný počet ďalších

1067
00:49:04,470 --> 00:49:05,290
sú dynamické.

1068
00:49:05,290 --> 00:49:07,340
Sú meniace sa v
Reakcia na vstup užívateľa

1069
00:49:07,340 --> 00:49:08,840
rovnako ako výsledky vyhľadávania Google.

1070
00:49:08,840 --> 00:49:12,415
>> A tak v stredu, čo robíme, je
odchádzame HTML a CSS úvod

1071
00:49:12,415 --> 00:49:14,290
za nami a my sa
za samozrejmé, že teraz

1072
00:49:14,290 --> 00:49:16,640
vedieť a my predstaviť
nový programovací jazyk

1073
00:49:16,640 --> 00:49:19,050
volal PHP, ktorý rád
C, sa chystá dať nám

1074
00:49:19,050 --> 00:49:22,450
právomoc skutočne vytvoriť programy
, Že samy o sebe vytvárajú výstup.

1075
00:49:22,450 --> 00:49:25,900
V tomto prípade budeme používať
PHP generovať dynamicky web

1076
00:49:25,900 --> 00:49:27,340
stránok pomocou tohto nového jazyka.

1077
00:49:27,340 --> 00:49:28,989
Tak o tom až v stredu.

1078
00:49:28,989 --> 00:49:29,530
Vidíme sa potom.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [Prehrávanie hudby]

1081
00:49:37,380 --> 00:52:38,864