1
00:00:00,000 --> 00:00:03,486
>> [Predvaja glasba]

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

3
00:00:10,460 --> 00:00:14,250
>> DAVID J Malan: To je CS50 in
to je začetek 7 teden.

4
00:00:14,250 --> 00:00:15,060
Torej, dobrodošli nazaj.

5
00:00:15,060 --> 00:00:17,540
In se morda spomniš, da
v problem nastaviti štiri,

6
00:00:17,540 --> 00:00:21,510
je bilo malo smetar lovski revir
za nekatere bajen nagrade, pri čemer

7
00:00:21,510 --> 00:00:24,219
ko izterja fotografij
Osebje tu in v New Haven,

8
00:00:24,219 --> 00:00:27,468
ste bili izzvani, da najdejo čim več
ti računalniški znanstveniki, kot ste lahko.

9
00:00:27,468 --> 00:00:29,550
In imamo cel
kup vlog.

10
00:00:29,550 --> 00:00:31,930
Mislil, da sem deliti nekaj
z vami sem danes tukaj.

11
00:00:31,930 --> 00:00:35,100
>> In bomo objavili vse to na spletu.

12
00:00:35,100 --> 00:00:39,310
Ampak predvsem sem želel
Opozarjam vas to-- vodnjaka eno,

13
00:00:39,310 --> 00:00:42,670
Sam je bil v kar nekaj izmed njih
na splošno pomenijo, kot je ta.

14
00:00:42,670 --> 00:00:45,750
Vendar se zdi, da je od
to jutro, zmagovalec

15
00:00:45,750 --> 00:00:51,170
je bila neka oseba z imenom Ken z
24 uslužbencev ujeli na kamero

16
00:00:51,170 --> 00:00:54,600
ali nekaj več, ko ste vzeli v
račun večkratnega zaposlenih v slikah.

17
00:00:54,600 --> 00:00:58,300
Na sliki je Ken Naslednja
Mariji v New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Zdaj, Ken, čeprav, obrne
ven je malo primeru kota

19
00:01:01,300 --> 00:01:02,880
da se še ni zgodilo.

20
00:01:02,880 --> 00:01:05,713
Izkazalo se je, da ne pride do
mi dal drobni tisk v problemu

21
00:01:05,713 --> 00:01:09,710
nastavite štiri, ki pravi, da so zaposleni
neupravičeni za bajen nagrade

22
00:01:09,710 --> 00:01:13,130
ker Ken je seveda eden
fotografi na naše osebje.

23
00:01:13,130 --> 00:01:16,820
Zdaj, s tem je dejal, da je
sprva mi je pisal reči

24
00:01:16,820 --> 00:01:19,180
prosim ne objavite te fotografije na spletu.

25
00:01:19,180 --> 00:01:21,630
Mislim, da je v veliki meri
ker večina fotografij

26
00:01:21,630 --> 00:01:24,499
da je ta fotograf je videti
malo kaj takega.

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

28
00:01:25,040 --> 00:01:28,990
>> Vendar bi Ken všeč mi je, da vas pomirim
da je on zelo dober fotograf,

29
00:01:28,990 --> 00:01:33,190
Rojen je strokovno, je potrebno
Fotografije, ki niso zamegljene,

30
00:01:33,190 --> 00:01:37,270
da so boljši v fokusu, in je
je kar nekaj lastnega osebja.

31
00:01:37,270 --> 00:01:40,370
Toda namesto da samo priznati
Ken, kar smo mislili, da smo bi naredil

32
00:01:40,370 --> 00:01:43,390
je šel skozi seznam
Dejanski študenti, ki so predloženi.

33
00:01:43,390 --> 00:01:48,640
In se izkaže, da je Lance s
15 fotografij, kot to jutro

34
00:01:48,640 --> 00:01:50,030
je bil naš zmagovalec.

35
00:01:50,030 --> 00:01:55,730
>> In na sliki, je Lance s Colton,
z Skaz, s samim seboj in s Samom.

36
00:01:55,730 --> 00:02:00,230
Ampak potem se je izkazalo, da je od
11:46, tako da samo malo nazaj,

37
00:02:00,230 --> 00:02:04,380
Šel sem nazaj na moj email in ugotovila,
da smo imeli še eno oddajo

38
00:02:04,380 --> 00:02:08,300
študent z imenom Bonnie
samo to čigar email dejal.

39
00:02:08,300 --> 00:02:10,800
Ne bom lagal, da sem
tem v razredu.

40
00:02:10,800 --> 00:02:17,620
In potem je nadaljeval, da samo priložite
14 fotografij, ena sramežljiv Lance je 15.

41
00:02:17,620 --> 00:02:22,690
>> Toda v Bonnie na fotografijah, se izkaže
ven je bilo več članov osebja, Sam

42
00:02:22,690 --> 00:02:25,960
med njimi, tako da tisto, kar smo mislili, da smo
bi naredil je priznati oba.

43
00:02:25,960 --> 00:02:29,240
Torej poleg pridobivanje Dropbox
prostor, da vsi, ki so sodelovali

44
00:02:29,240 --> 00:02:33,900
prejme, bodo tudi ti dve poglavji
prejmejo lepo poskrbljeno kosilo za njih

45
00:02:33,900 --> 00:02:36,100
in njihova odsek
Mates ta prihajajoči teden.

46
00:02:36,100 --> 00:02:38,970
In tako boste slišali od nas,
Lance in Bonnie, o tem.

47
00:02:38,970 --> 00:02:40,002
Tako velike Čestitke za njih.

48
00:02:40,002 --> 00:02:42,210
Zdaj, tiste, ki bi
kot je kosilo bolj na splošno

49
00:02:42,210 --> 00:02:45,320
vem, da je CS50 kosilo v Cambridgeu
in New Haven, je ta petek.

50
00:02:45,320 --> 00:02:48,510
Pojdi na CS50 spletno poševnico RSVP.

51
00:02:48,510 --> 00:02:49,800
In sedaj beseda o seminarjih.

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

53
00:02:50,730 --> 00:02:52,490
Torej smo bliža
točka semestra

54
00:02:52,490 --> 00:02:55,200
kjer bi morali začeti
razmišljam o končnih projektov.

55
00:02:55,200 --> 00:02:59,309
In v resnici, v samo bit, bo
tako imenovani pre predlogi zapade.

56
00:02:59,309 --> 00:03:01,850
Torej pre predlogi so namenjeni
precej majhen vpliv in res

57
00:03:01,850 --> 00:03:04,109
samo priložnost za
da si sestavite kratko opombo

58
00:03:04,109 --> 00:03:06,900
Vaše poučevanje kolegi da seznani
mu ali ji kaj vas razmišljanje

59
00:03:06,900 --> 00:03:09,140
morda želeli storiti za svoj končni projekt.

60
00:03:09,140 --> 00:03:11,730
>> Zdaj, mnogi študenti končajo
delaš spletno končnih projektov.

61
00:03:11,730 --> 00:03:13,800
In seveda, mi smo samo
Sedaj je prejšnji teden v ta

62
00:03:13,800 --> 00:03:15,890
in pozneje potapljanje v spletno programiranje.

63
00:03:15,890 --> 00:03:18,200
Torej, ne skrbite, če vas
sploh ne vem, kako

64
00:03:18,200 --> 00:03:21,594
bi graditi ideje, ki
imate morda v tvoji glavi.

65
00:03:21,594 --> 00:03:24,510
To je res samo silijo funkcija
da bi vas razmišljanje in govorjenje

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

67
00:03:25,650 --> 00:03:28,810
Ampak, da vam pomaga s tem, in
s končnim projektom nenazadnje,

68
00:03:28,810 --> 00:03:31,750
vem, da ima CS50 tradicijo
ponujajo seminarje.

69
00:03:31,750 --> 00:03:36,084
>> In ti so neobvezna, na roke,
ali predavanje, ki temelji na možnostih

70
00:03:36,084 --> 00:03:39,000
Če želite izvedeti več o temah, ki so
malo pomožna tečaj je

71
00:03:39,000 --> 00:03:43,310
učni načrt, vendar je kljub temu čudovit
Material za vožnjo končnih projektov.

72
00:03:43,310 --> 00:03:46,840
In tako je ta seznam, ki je
Osebje CS50 tukaj v New Haven

73
00:03:46,840 --> 00:03:48,600
so prišli do za
letos pa iOS

74
00:03:48,600 --> 00:03:50,730
programiranje, Android
programiranje, razvoj igre,

75
00:03:50,730 --> 00:03:54,480
in grozde več orodij
in jeziki in tehnike.

76
00:03:54,480 --> 00:03:56,780
>> Torej pazi na spletni strani CS50 je.

77
00:03:56,780 --> 00:04:00,110
In v tem času, če želite, da
če vas zanima, v katerem koli od teh,

78
00:04:00,110 --> 00:04:02,510
pojdite na CS50 je poševnico register.

79
00:04:02,510 --> 00:04:05,770
In bomo potem nadaljevanje kot na
dnevi in ​​časi letov in lokacije

80
00:04:05,770 --> 00:04:09,090
in everything-- večina bo vse
biti pretočili in na voljo tudi na povpraševanje

81
00:04:09,090 --> 00:04:11,750
potem, če ne morete dejansko uspelo.

82
00:04:11,750 --> 00:04:15,800
Torej, brez odlašanja, smo
končal zadnji čas z GET.

83
00:04:15,800 --> 00:04:19,610
>> In to je bilo, kot je sporočila, da je bil
znotraj virtualnega ovoja, se spomni,

84
00:04:19,610 --> 00:04:23,960
da smo opravili od usmerjevalnika do usmerjevalnika
Usmerjevalnik med spletnim brskalnikom in spleta

85
00:04:23,960 --> 00:04:24,487
strežnik.

86
00:04:24,487 --> 00:04:26,695
In to sporočilo pogledal
malo kaj takega.

87
00:04:26,695 --> 00:04:29,700
To je bilo bolj Skrivnosten sporočilo, ki
je dejansko znotraj ovojnice

88
00:04:29,700 --> 00:04:34,440
napisana na kos papirja, katerega
Prva vrstica pravi dobesedno, dobili poševnice.

89
00:04:34,440 --> 00:04:37,830
>> In prav tako kot preverjanje razumnosti,
kaj je slash pomenita?

90
00:04:37,830 --> 00:04:40,455
Kaj slash pomeni, ko
zahteva spletno stran?

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

92
00:04:43,070 --> 00:04:44,250
Zahtevate ga ves čas.

93
00:04:44,250 --> 00:04:47,333
Najbolj vsakič, ko obiščete spletno stran, ki jih
pa dejansko ne vnesite ime datoteke.

94
00:04:47,333 --> 00:04:50,960
Verjetno ste pojdite na Facebook.com,
vstopijo, gmail.com, ali podobno.

95
00:04:50,960 --> 00:04:52,260
In kaj slash predstavlja?

96
00:04:52,260 --> 00:04:53,506
Kakšne datoteke?

97
00:04:53,506 --> 00:04:54,630
Ali kaj stran, še posebej?

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

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

100
00:05:00,720 --> 00:05:01,810
Torej privzeto stran.

101
00:05:01,810 --> 00:05:04,810
Torej, če ne navedete datoteko
ime kot bomo začeli videti,

102
00:05:04,810 --> 00:05:07,750
ste dejansko zahtevajo le
daj mi privzeto stran Facebook

103
00:05:07,750 --> 00:05:10,800
ali naj mi Prejeto ali dati
me privzeta stran novic

104
00:05:10,800 --> 00:05:12,510
na spletni strani CNN ali podobno.

105
00:05:12,510 --> 00:05:15,220
In strežnik se nato odzove na
da sporočilo z nečim

106
00:05:15,220 --> 00:05:18,420
kot je ta, ki pravijo, da sem
govorijo HTTP različico 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, ki je status
koda, da smo ljudje le redko

108
00:05:21,130 --> 00:05:22,790
kdaj videli, ker je dober.

109
00:05:22,790 --> 00:05:26,640
Ker to pomeni, OK, zahtevek
je bilo prejetih in pravilno ravnati.

110
00:05:26,640 --> 00:05:28,960
In vrsta vsebine
očitno v odgovoru

111
00:05:28,960 --> 00:05:31,170
je precej pogosto, vendar ne vedno, besedilo.

112
00:05:31,170 --> 00:05:32,580
In še posebej, HTML.

113
00:05:32,580 --> 00:05:34,760
In to je pravzaprav
kjer gledamo danes.

114
00:05:34,760 --> 00:05:37,140
>> Torej v resnici, sem šel
naprej in odprla brskalnik.

115
00:05:37,140 --> 00:05:40,410
Bom uporabljate Chrome, lahko uporabite
Najbolj nobenega brskalnika v prihodnjih tednih.

116
00:05:40,410 --> 00:05:42,410
Mi na splošno priporočamo, Chrome
ker je zlasti

117
00:05:42,410 --> 00:05:43,750
dobro za razvijalce programske opreme.

118
00:05:43,750 --> 00:05:46,070
Ima veliko vgrajenih
orodja, ki olajšajo

119
00:05:46,070 --> 00:05:49,800
razviti ne samo HTML in CSS,
Stvari bomo začeli govoriti o danes,

120
00:05:49,800 --> 00:05:51,530
ampak tudi druge jezike, kot dobro.

121
00:05:51,530 --> 00:05:55,530
>> In bom, da gredo naprej in iti to--
Jaz grem na nadzorno klik ali desni

122
00:05:55,530 --> 00:05:57,210
kliknite kjer koli na spletni strani.

123
00:05:57,210 --> 00:05:59,070
In sem šel k Preglej element.

124
00:05:59,070 --> 00:06:03,850
In jaz grem na poteg my
Zaslon samo malo tukaj.

125
00:06:03,850 --> 00:06:05,790
Naj premakniti to do dna.

126
00:06:05,790 --> 00:06:08,140
Torej je to, kar se imenuje
Inšpektor Chrome.

127
00:06:08,140 --> 00:06:11,010
Torej, to je kot razhroščevanje
Orodje vgrajen v Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Vsi vi že imate to
Če ste bili z brskalnikom Chrome.

129
00:06:13,520 --> 00:06:17,169
In to vam omogoča, da vidite, kaj se dogaja
na pod pokrovom neke spletne strani.

130
00:06:17,169 --> 00:06:19,210
Torej, kaj je dejansko traja
poglej to takole.

131
00:06:19,210 --> 00:06:21,251
Ima način več funkcij
in skrbimo danes.

132
00:06:21,251 --> 00:06:22,760
Ampak tam je teh kartic tukaj.

133
00:06:22,760 --> 00:06:25,890
Elementi, omrežje, viri,
timeline, in nekatere druge stvari.

134
00:06:25,890 --> 00:06:27,800
Grem, da kliknete na
Omrežje za trenutek.

135
00:06:27,800 --> 00:06:30,500
>> In to je malo veliko
na prvi pogled tukaj.

136
00:06:30,500 --> 00:06:34,190
Ampak kaj bom storiti je pustiti
me je malo poenostaviti.

137
00:06:34,190 --> 00:06:37,560
Grem, da vklopite
snemanje svetlobe, tako da je rdeča.

138
00:06:37,560 --> 00:06:39,140
In bom rekel, ohranitev dnevnik.

139
00:06:39,140 --> 00:06:41,015
In to je le malo
stvar, ki sem pogruntal

140
00:06:41,015 --> 00:06:44,120
čez čas, da se dogaja, da shranite
vse, kar se dogaja v brskalniku.

141
00:06:44,120 --> 00:06:50,030
In zdaj bom šel
da http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Pravzaprav, kaj je naredil www
za dober ukrep, poševnica.

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

144
00:06:53,643 --> 00:06:56,180
Torej URL, da je veliko
ste morda obiskali.

145
00:06:56,180 --> 00:06:58,830
In zdaj Facebook je spletna
Stran pride na vrhu.

146
00:06:58,830 --> 00:07:02,350
In potem cel kup
stuff letel ga na dnu.

147
00:07:02,350 --> 00:07:04,830
In v resnici, se izkaže, da
ko obiščete facebook.com,

148
00:07:04,830 --> 00:07:09,320
ste ne samo kar eno zahtevo HTTP,
se izkaže, da gre za Facebook.com

149
00:07:09,320 --> 00:07:14,320
pošlje 41 teh ovojnic,
vsaka s svojo lastno zahtevo get,

150
00:07:14,320 --> 00:07:18,360
Kot je navedeno, čeprav za zaslonom
tod na dnu zaslona

151
00:07:18,360 --> 00:07:24,040
to pomeni, da je res, moj
Brskalnik je 41 zahtev.

152
00:07:24,040 --> 00:07:29,689
>> In skupaj, da prenese 861
kilobajtov in to je iz neznanega razloga

153
00:07:29,689 --> 00:07:31,730
kar osem sekund
prenesti vse to.

154
00:07:31,730 --> 00:07:33,790
Tako da je pravzaprav malo čudno
da bi stran Facebook je sprejeti, da

155
00:07:33,790 --> 00:07:35,600
dolgo, ampak naj bo tako v tem primeru.

156
00:07:35,600 --> 00:07:39,520
Zdaj pa vse to ne briga
o razen najvišjem zahtevo.

157
00:07:39,520 --> 00:07:46,440
Torej, pojdimo na tale tukaj
in mi pomanjšati samo za trenutek.

158
00:07:46,440 --> 00:07:47,754
>> In mi povečate na to.

159
00:07:47,754 --> 00:07:50,670
Torej, kaj sem naredil na levo, čeprav
tam je veliko dogaja tukaj

160
00:07:50,670 --> 00:07:53,360
se sem izpostavil
Facebook.com in nato

161
00:07:53,360 --> 00:07:56,540
opazili, da sem drsenje navzdol,
drsenje navzdol, drsenje navzdol,

162
00:07:56,540 --> 00:07:58,330
zahtevati glave.

163
00:07:58,330 --> 00:08:01,720
In videli boste, da Chrome kaže
me v bistvu notranja vsebina

164
00:08:01,720 --> 00:08:02,810
z zahtevo sem naredil.

165
00:08:02,810 --> 00:08:06,130
To ni formatiranje v povsem enako
način, ampak obvestilo, da je omemba dobili,

166
00:08:06,130 --> 00:08:09,481
Opazili pa je omemba gostitelja,
Facebook.com, pot, ali slash,

167
00:08:09,481 --> 00:08:10,730
ki je datoteka sem zahteval.

168
00:08:10,730 --> 00:08:12,930
>> In potem, če sem se pomaknete
nazaj gor, bomo dejansko

169
00:08:12,930 --> 00:08:17,270
videli, da tisto, kar je vrnil Facebook
se mi je vse te glave.

170
00:08:17,270 --> 00:08:21,040
Torej znotraj tega virtualnega ovoja
res veliko parov vrednosti ključev.

171
00:08:21,040 --> 00:08:23,130
Beseda, dvopičje in nato vrednost.

172
00:08:23,130 --> 00:08:25,050
Beseda, dvopičje in vrednost.

173
00:08:25,050 --> 00:08:26,160
To so imenovane glave.

174
00:08:26,160 --> 00:08:31,860
In tam je pot več podrobnosti tukaj kot
smo dejansko skrbi zdaj.

175
00:08:31,860 --> 00:08:33,750
>> Ampak to je v drugem
zadnja tam dol,

176
00:08:33,750 --> 00:08:38,809
opazili, da facebook.com strežniku,
res rekel tukaj prihaja nekaj besedila HTML.

177
00:08:38,809 --> 00:08:41,409
Torej vse to se pravi
da ko zahtevate web

178
00:08:41,409 --> 00:08:44,300
Stran iz brskalnika zavarovalnici za
Strežnik, da strežnik odziva

179
00:08:44,300 --> 00:08:47,630
s kuverto svojo lastno
znotraj katerega je besedilo.

180
00:08:47,630 --> 00:08:49,020
Z drugimi besedami, HTML.

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

182
00:08:50,590 --> 00:08:53,200
Kateri drug jezik
da bomo predstavili danes

183
00:08:53,200 --> 00:08:57,740
da ljudje ali računalniki ustvarjanje
Za izvedbo spletne strani.

184
00:08:57,740 --> 00:08:59,580
>> Natančneje, oglejmo to.

185
00:08:59,580 --> 00:09:03,277
Bom zdaj iti nazaj
na spletni strani Facebook je.

186
00:09:03,277 --> 00:09:05,360
In jaz bom samo
Nadzor klik ali desni klik

187
00:09:05,360 --> 00:09:07,634
in kliknite na gumb Ogled vira.

188
00:09:07,634 --> 00:09:10,550
In tudi če ne uporabljate Chrome,
IE lahko to stori, lahko Firefox to,

189
00:09:10,550 --> 00:09:14,060
Safari lahko to storite, čeprav meni
Možnosti lahko izgleda malo drugače.

190
00:09:14,060 --> 00:09:18,990
In to je HTML, da je Mark in
družba na Facebooku napisal.

191
00:09:18,990 --> 00:09:24,640
>> In kolektivnih, ta jezik tukaj
izvaja modro in belo stran

192
00:09:24,640 --> 00:09:26,370
da smo videli pred nekaj trenutki.

193
00:09:26,370 --> 00:09:28,030
Zdaj je to malo prepričljivo.

194
00:09:28,030 --> 00:09:31,400
Ampak, če pogledamo gor v zgornjem levem kotu, smo
bodo začeli videti nekaj vzorcev.

195
00:09:31,400 --> 00:09:34,140
Izgleda, da je veliko
od teh odprtih kotnim zaklepajem

196
00:09:34,140 --> 00:09:35,970
in potem je ta ključna beseda HTML.

197
00:09:35,970 --> 00:09:38,330
Tukaj je še odprto
Kot nosilec in glava.

198
00:09:38,330 --> 00:09:41,560
>> Tu je, če smo se pomaknite navzdol
in dol in dol, sem

199
00:09:41,560 --> 00:09:43,820
dogaja, da gredo naprej in poskusite
za iskanje nečesa.

200
00:09:43,820 --> 00:09:48,510
Obstaja način, kot na desni
tukaj je odprt oklepaj telo.

201
00:09:48,510 --> 00:09:50,800
In spomnim od lani
Čas je, da predlagana

202
00:09:50,800 --> 00:09:53,364
da najpreprostejši spletne strani
da bi človek napisati

203
00:09:53,364 --> 00:09:55,030
lahko izgleda malo nekaj takega.

204
00:09:55,030 --> 00:09:58,430
Odpri HTML tag, odprta glava
tag, odprt naslov tag,

205
00:09:58,430 --> 00:10:03,230
Nato se zapre naslov, zaprta glava, odprt
telo tag, nekaj besedila, zaprta karoserija,

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

207
00:10:04,720 --> 00:10:06,290
>> Ampak premor tukaj samo za trenutek.

208
00:10:06,290 --> 00:10:09,030
Ta koda, tudi če ste
Nikoli ga napisal pred

209
00:10:09,030 --> 00:10:11,864
vendar še vedno ne razumem povsem,
kaj se dogaja, izgleda precej dobro.

210
00:10:11,864 --> 00:10:12,821
V redu, to je zelo čista.

211
00:10:12,821 --> 00:10:14,120
To je zelo stilsko lepo.

212
00:10:14,120 --> 00:10:16,190
Veliko vdolbine in belega prostora.

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

214
00:10:18,020 --> 00:10:23,190
Torej, zakaj je Facebook toliko
slabši od mene pri pisanju HTML?

215
00:10:23,190 --> 00:10:24,310
Očitno.

216
00:10:24,310 --> 00:10:26,899
>> V redu, to je kot eno
od petih za slog.

217
00:10:26,899 --> 00:10:29,315
Tam je prepričljiv razlog
za njih zmanjšati te kotičke.

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

219
00:10:31,069 --> 00:10:33,860
Vse je v redu, tako da ne želijo
da bi bilo lažje za vas, da ga preberete.

220
00:10:33,860 --> 00:10:36,940
Torej v nekem smislu, oni
ga obfuscating, nekako ga kodiranja

221
00:10:36,940 --> 00:10:40,260
vsaj estetsko tako
da je težje za Myspace

222
00:10:40,260 --> 00:10:42,705
iti in iztrgati svoje
Domača stran in HTML za to.

223
00:10:42,705 --> 00:10:45,080
Izkazalo se je, da s programi
čeprav, vključno Chrome

224
00:10:45,080 --> 00:10:47,020
bomo lahko to pospraviti super enostavno.

225
00:10:47,020 --> 00:10:49,420
Torej, to ni čisto tako, kot razlog.

226
00:10:49,420 --> 00:10:51,290
Kaj drugega bi lahko bilo vzrok.

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

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

229
00:10:54,680 --> 00:10:55,890
Ja, podatki bele stroški prostora.

230
00:10:55,890 --> 00:10:56,598
Kaj misliš s tem?

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

232
00:11:02,250 --> 00:11:02,979
Ja, točno.

233
00:11:02,979 --> 00:11:06,020
Če ste zadeli tipko Tab veliko ali
preslednico, upoštevati posledice.

234
00:11:06,020 --> 00:11:10,060
Torej vsaka tipka na tipkovnici je
[Neslišno] zastopali en bajt.

235
00:11:10,060 --> 00:11:14,560
>> Torej domnevam, da je Mark ali katerokoli Devs
te dni hits preslednico samo enkrat

236
00:11:14,560 --> 00:11:17,899
V tej HTML stran, ki
predstavlja Facebook domačo stran.

237
00:11:17,899 --> 00:11:19,690
Facebook in ima veliko
uporabnikov teh dneh.

238
00:11:19,690 --> 00:11:24,030
Torej domnevam, da je Facebook je domača stran
je obiskalo milijarde ljudi danes.

239
00:11:24,030 --> 00:11:27,020
In nekdo na Facebooku ima
hit preslednico samo enkrat.

240
00:11:27,020 --> 00:11:29,890
>> Torej en dodaten bajt,
milijarda zahteva,

241
00:11:29,890 --> 00:11:32,790
koliko več podatkov je Facebook
prenos preko interneta

242
00:11:32,790 --> 00:11:37,160
ker je nekdo udaril
preslednico na svoji tipkovnici?

243
00:11:37,160 --> 00:11:41,660
A milijardo bajtov, ali en gigabajt
Podatki, ki se pošiljajo iz Facebook strežnikov

244
00:11:41,660 --> 00:11:43,626
ljudem okoli
svet brez pravega razloga.

245
00:11:43,626 --> 00:11:44,750
No, to je samo en prostor.

246
00:11:44,750 --> 00:11:48,866
>> Predstavljajte si, da smo dejansko čisto ta
stvar in jo zamaknjeni in dodal

247
00:11:48,866 --> 00:11:50,990
veliko beli prostor
zavihek znakov in presledkov,

248
00:11:50,990 --> 00:11:53,656
boste na koncu gigabajtov porabe,
če ne terra bajtov več prostora.

249
00:11:53,656 --> 00:11:56,640
In tako super pogosti v
Dejanski svet razvoj spletnih

250
00:11:56,640 --> 00:11:58,950
je Minimiranje kodo.

251
00:11:58,950 --> 00:12:01,280
In bomo sčasoma videli
kako lahko to storite.

252
00:12:01,280 --> 00:12:04,630
>> Ampak danes, bomo začeli pisati kodo
da je dejansko berljive z nas ljudeh.

253
00:12:04,630 --> 00:12:10,120
Izkazalo se je, čeprav, če greš nazaj
do tega orodja v Chrome Preglej element,

254
00:12:10,120 --> 00:12:12,030
prej, smo bili na jeziček Network.

255
00:12:12,030 --> 00:12:15,430
Izkazalo se je, da če greš na
Zavihek elementi, kar si dejansko videli

256
00:12:15,430 --> 00:12:19,230
Chrome je precej tiskani
različica istega HTML.

257
00:12:19,230 --> 00:12:20,640
Zato smo jo deobfuscated.

258
00:12:20,640 --> 00:12:22,472
Torej, to ni tekma za računalnik.

259
00:12:22,472 --> 00:12:24,430
In zdaj si lahko dejansko
kliknite okoli in začnite

260
00:12:24,430 --> 00:12:27,630
videti hierarhijo, da je spletna stran.

261
00:12:27,630 --> 00:12:28,780
Torej, kaj je zdaj to narediti.

262
00:12:28,780 --> 00:12:32,120
Grem, da gredo naprej in odprli na
moj Mac program, imenovan besedilo uredi.

263
00:12:32,120 --> 00:12:35,490
In opozarjajo, da je to le
super preprost program besedilo.

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

265
00:12:37,490 --> 00:12:39,820
In bom dobesedno
vnesite naslednje.

266
00:12:39,820 --> 00:12:44,650
Doc tipa HTML, odprt oklepaj
HTML, zaprt nosilec HTML,

267
00:12:44,650 --> 00:12:49,000
imamo glavo strani tod
Konec glavo strani tod

268
00:12:49,000 --> 00:12:52,310
naziv bo všeč, Hello World.

269
00:12:52,310 --> 00:12:56,660
>> In potem sem dol, moramo
telo spletne strani.

270
00:12:56,660 --> 00:12:58,050
Zaprta karoserija.

271
00:12:58,050 --> 00:13:00,700
In potem je tukaj, zdravo svet.

272
00:13:00,700 --> 00:13:01,270
V redu.

273
00:13:01,270 --> 00:13:03,350
Zato smo napisali super hiter spletno stran.

274
00:13:03,350 --> 00:13:06,675
Jaz grem, da ga shranite kot
hello.html na mojem namizju.

275
00:13:06,675 --> 00:13:09,050
My Mac se dogaja, da se pritožujejo,
misleč, da, počakaj malo,

276
00:13:09,050 --> 00:13:11,091
To je besedilna datoteka, storite
hočeš, da ga pokličete .txt?

277
00:13:11,091 --> 00:13:13,300
Ampak ne, želim uporabiti dot HTML.

278
00:13:13,300 --> 00:13:16,140
>> In kaj potem je lepo, če sem
samo dvojno kliknite na to datoteko,

279
00:13:16,140 --> 00:13:18,600
hello.html, tukaj je moja spletna stran.

280
00:13:18,600 --> 00:13:22,564
Na žalost sem
edina oseba na svetu

281
00:13:22,564 --> 00:13:23,980
ki lahko obiščete to stran zdaj.

282
00:13:23,980 --> 00:13:26,734
Ker kje je živel očitno?

283
00:13:26,734 --> 00:13:27,650
To je na mojem Mac, kajne?

284
00:13:27,650 --> 00:13:28,470
Ki je neuporabna.

285
00:13:28,470 --> 00:13:30,390
Tako kot nihče v tej sobi
kaj šele na internetu

286
00:13:30,390 --> 00:13:31,598
dejansko lahko obiščete to stran.

287
00:13:31,598 --> 00:13:33,820
Torej, danes, moramo
uvede drug element.

288
00:13:33,820 --> 00:13:36,720
>> In za to, grem na
iti naprej in se odprejo, oblak 9.

289
00:13:36,720 --> 00:13:40,090
Torej, oblak 9 je seveda
cloud temelji service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- To je vse naše delovne prostore
teče nekje na internetu.

291
00:13:44,890 --> 00:13:48,330
In to pomeni, da vse naše datotek
so že javno dostopni.

292
00:13:48,330 --> 00:13:49,830
Torej, gremo naprej in to storite.

293
00:13:49,830 --> 00:13:53,670
Grem, da gredo naprej in
ustvarite novo datoteko NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Jaz grem, da ga shranite kot prej
kot hello.html in kliknite Shrani.

295
00:13:58,819 --> 00:14:01,860
In zdaj samo za prihranek časa, bom
da gredo naprej in kopirajte prilepite to kodo

296
00:14:01,860 --> 00:14:03,470
namesto da bi jo znova natipkati.

297
00:14:03,470 --> 00:14:04,550
In jo shranite.

298
00:14:04,550 --> 00:14:07,550
In zdaj imam
datoteka z imenom hello.html.

299
00:14:07,550 --> 00:14:09,710
Ampak, kako sem dejansko
odpreti kot spletno stran?

300
00:14:09,710 --> 00:14:14,120
No, se izkaže, vgrajeno na CS50
IDE ni le prevajalnik kot Jek

301
00:14:14,120 --> 00:14:16,670
in razhroščevalnik kot GDB in
grozde drugih programov,

302
00:14:16,670 --> 00:14:21,140
tam je pravzaprav v celoti razvit
Spletni strežnik teče v CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Vsi vi, to je,
imajo svoj spletni strežnik.

304
00:14:23,900 --> 00:14:26,850
In spletni strežnik je le kos
programske opreme, katerih namen v življenju

305
00:14:26,850 --> 00:14:28,220
je, da služi up spletne strani.

306
00:14:28,220 --> 00:14:32,490
Poslušati zahteve brskalnikov in
odzvali z malo virtualnih ovojnic

307
00:14:32,490 --> 00:14:35,290
znotraj katere je
Vsebina, ki sem jih napisal.

308
00:14:35,290 --> 00:14:38,372
Torej, to spletni strežnik je
dejansko brezplačen in open source.

309
00:14:38,372 --> 00:14:40,830
Kadar je open source pomeni le
programska oprema, ki ima nekdo drug

310
00:14:40,830 --> 00:14:43,480
zapisano, da vse nas lahko
dejansko videli in prenesete in celo

311
00:14:43,480 --> 00:14:44,780
spreminjanje izvorne kode.

312
00:14:44,780 --> 00:14:46,150
In se imenuje Apache.

313
00:14:46,150 --> 00:14:51,450
>> In smo ga naredili malo lažje
uporabo v CS50IDE, da ga kliče Apache 50.

314
00:14:51,450 --> 00:14:53,780
Tako da se lahko dejansko
razumeti naslednje.

315
00:14:53,780 --> 00:14:56,560
Jaz bom rekel, Apache 50 začetek.

316
00:14:56,560 --> 00:14:58,910
In potem sem samo reči piko.

317
00:14:58,910 --> 00:15:01,080
In smo videli nekaj nekoliko
Skrivnosten sporočilo:

318
00:15:01,080 --> 00:15:04,640
nastavitev Apache je dokument [? skupina?]
domu, ubuntu, karkoli že to je,

319
00:15:04,640 --> 00:15:05,770
poševnica delovni prostor.

320
00:15:05,770 --> 00:15:08,280
Zagon spletni strežnik
Apache uspešno 2.

321
00:15:08,280 --> 00:15:11,330
>> Torej skrajšam zgodbo, sem
so samo potisne gumb

322
00:15:11,330 --> 00:15:18,000
in se obrnil na spletnem strežniku, ki je sedaj
poslušanje na internetu na vratih TCP

323
00:15:18,000 --> 00:15:20,587
80 na določenem naslovu.

324
00:15:20,587 --> 00:15:22,420
In tukaj piše, in
se bo to spremenilo Based

325
00:15:22,420 --> 00:15:26,550
na vaše uporabniško ime in drugih dejavnikov,
ampak obvestilo, zdaj, če sem kliknite to,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard in tako in
tako, opazili, da se vsem tem času

327
00:15:30,211 --> 00:15:31,960
V zadnjih nekaj
tednov, boste morda morali

328
00:15:31,960 --> 00:15:35,200
opazili, da svoje uporabniško ime
je vgrajen v zgornji desni roki

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

330
00:15:37,130 --> 00:15:41,050
>> In dejansko je bilo vse to
čas, naslov, na katerega lahko

331
00:15:41,050 --> 00:15:43,574
obisk vseh vaših datotek preko spleta.

332
00:15:43,574 --> 00:15:45,990
Do sedaj, ni važno,
ker v C, ki jih običajno

333
00:15:45,990 --> 00:15:48,073
želijo stvari poteka v
terminal, ni na spletu.

334
00:15:48,073 --> 00:15:50,800
Ampak danes, začnemo
pisanje spletnega kodo

335
00:15:50,800 --> 00:15:53,350
da si želimo
dostopne na javnih spletnih naslovov.

336
00:15:53,350 --> 00:15:56,100
Torej, kaj bom
storiti je, kliknite ta URL.

337
00:15:56,100 --> 00:16:00,880
>> In opazil, da vidim precej
grda indeks, imenik seznam,

338
00:16:00,880 --> 00:16:04,090
ampak kaj datoteka skoči ven na vas verjetno?

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

340
00:16:05,210 --> 00:16:07,870
To je zato, ker sem prihranil
datoteko v mojem delovnem prostoru.

341
00:16:07,870 --> 00:16:12,310
In tisto, kar sem povedal, Apache spletnega strežnika
se poglej v delovni prostor imeniku Davida.

342
00:16:12,310 --> 00:16:15,300
In naj nikomur v
svet vidi te datoteke.

343
00:16:15,300 --> 00:16:19,050
>> In res, če bom zdaj
kliknite na hello.html,

344
00:16:19,050 --> 00:16:22,180
Vidim v tem zavihku natanko te datoteke.

345
00:16:22,180 --> 00:16:26,430
Zdaj opazili, oblak 9 počne
nekaj malo koristno za nas.

346
00:16:26,430 --> 00:16:29,480
V CS50 IDE, obvestilo pa je
nenadoma naslovna vrstica.

347
00:16:29,480 --> 00:16:33,690
To je zato, ker, čeprav smo
uporabo Chrome obiskati CS50IDE,

348
00:16:33,690 --> 00:16:37,940
notranjost CS50IDE je njegova lastna
različica spletnega brskalnika zdaj.

349
00:16:37,940 --> 00:16:40,820
Tako namesto
zapletajo stvari, kot na primer,

350
00:16:40,820 --> 00:16:42,955
Grem, da gredo naprej
in samo kopirajte ta URL.

351
00:16:42,955 --> 00:16:45,330
Grem, da gredo naprej in samo
odpreti svoj lasten Chrome okno.

352
00:16:45,330 --> 00:16:47,800
Torej ni čarobna tukaj, ne CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Jaz sem le, da bo dobesedno prilepi
moj J Harvard URL in pritisnite tipko Enter.

354
00:16:51,800 --> 00:16:54,750
In voila, zdaj jaz, in
v teoriji, vsakdo

355
00:16:54,750 --> 00:16:57,700
na internetu, če sem nastavljen
Dovoljenja za ustrezno,

356
00:16:57,700 --> 00:16:58,720
lahko obiščete to datoteko.

357
00:16:58,720 --> 00:17:03,230
In zdaj, če sem rekel
hello.html, voila, tam

358
00:17:03,230 --> 00:17:06,366
je moj neverjetno underwhelming spletna stran.

359
00:17:06,366 --> 00:17:07,740
Torej, kaj je naredil pregled hiter prištevnosti.

360
00:17:07,740 --> 00:17:09,710
Ker vse to
je konceptualna set up.

361
00:17:09,710 --> 00:17:13,180
In smo jih dejansko ni res
naučil, kako pisati HTML per se.

362
00:17:13,180 --> 00:17:16,084
Vsa vprašanja doslej
o tem, kaj se je pravkar zgodilo?

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

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

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

366
00:17:24,290 --> 00:17:25,800
Ali CS50 lastnik te spletne strani?

367
00:17:25,800 --> 00:17:26,460
V kakšnem smislu?

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

369
00:17:28,947 --> 00:17:29,530
Dobro vprašanje.

370
00:17:29,530 --> 00:17:32,429
Torej CS50 je lastnik CS50.io.

371
00:17:32,429 --> 00:17:33,970
Mi smo res kupili to ime domene.

372
00:17:33,970 --> 00:17:37,240
In po naravi vaju
prijavi v CS50IDE,

373
00:17:37,240 --> 00:17:39,270
ste vsi dobili tisto, kar se imenuje poddomena.

374
00:17:39,270 --> 00:17:46,840
>> Torej IDE50-Malan, ali IDE50-Rob.CS50.io,
da je vaš edinstven naslov v

375
00:17:46,840 --> 00:17:47,730
naše ime domene.

376
00:17:47,730 --> 00:17:50,850
Torej v smislu predmeta
imate svoj edinstven naslov.

377
00:17:50,850 --> 00:17:55,150
Ampak smo poenostaviti stvari, ki jih
nakup domene vrhnjo CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O in potem vsi ostali, je
notranjost, da se tako izrazim.

379
00:17:58,050 --> 00:17:59,890
In bomo prišli nazaj na to
v nekaj tednih verjetno,

380
00:17:59,890 --> 00:18:01,930
zlasti na končni projekt
Čas, ko se nekateri od vas

381
00:18:01,930 --> 00:18:03,596
morda želeli, da bi dobili svoje domenskih imen.

382
00:18:03,596 --> 00:18:06,270
To je pravzaprav relativno
enostavna.

383
00:18:06,270 --> 00:18:06,770
V redu.

384
00:18:06,770 --> 00:18:07,880
Torej, kaj je zdaj to.

385
00:18:07,880 --> 00:18:11,910
Jaz bom šel nazaj v
CS50IDE, kjer mojo kartoteko prav zdaj,

386
00:18:11,910 --> 00:18:14,710
hello.html, ni vse, da je zanimivo.

387
00:18:14,710 --> 00:18:17,130
Rad bi, da narediš nekaj
malo lepše, kot je.

388
00:18:17,130 --> 00:18:19,440
Torej bom naredil kaj takega.

389
00:18:19,440 --> 00:18:21,510
Dovolite mi, odprt paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Torej je ta datoteka sem napisal vnaprej.

391
00:18:23,560 --> 00:18:26,480
Na vrhu je, kot
Vedno smo imeli pripomb.

392
00:18:26,480 --> 00:18:28,730
Toda v HTML, komentarji
poglej malo drugačna.

393
00:18:28,730 --> 00:18:33,270
On line tri in linijo 14, ki jih
glej skladnjo za začetek komentar

394
00:18:33,270 --> 00:18:34,020
in na koncu komentarja.

395
00:18:34,020 --> 00:18:36,820
>> Ampak nobeden od stvari v
Med zadevami, funkcionalno.

396
00:18:36,820 --> 00:18:40,250
To je samo opomba k
človek, kaj se dogaja tukaj.

397
00:18:40,250 --> 00:18:43,040
In prav tako hitro duševno zdravje
preveri, če sem se pomaknite navzdol,

398
00:18:43,040 --> 00:18:46,820
kaj je očitno nova
tag, ki smo jih uvedli?

399
00:18:46,820 --> 00:18:52,130
Tako daleč smo videli oznake so odprte
nosilec HTML, glava, naslov in telo.

400
00:18:52,130 --> 00:18:54,400
Toda kaj je zdaj očitno novega?

401
00:18:54,400 --> 00:18:55,200
>> Ja, str.

402
00:18:55,200 --> 00:18:57,320
P tag ali odstavek tag.

403
00:18:57,320 --> 00:19:01,182
In potem sem samo sposodil nekaj privzeto
Latinščina besedilo predstavlja moje odstavke.

404
00:19:01,182 --> 00:19:03,390
Ker tisto, kar sem želel
pokazati, kako boste morda

405
00:19:03,390 --> 00:19:05,859
predstavljajo odstavke besedila v HTML.

406
00:19:05,859 --> 00:19:08,400
In kaj se začenja dogajati
tukaj je, da je že

407
00:19:08,400 --> 00:19:09,657
vzorec razvija.

408
00:19:09,657 --> 00:19:10,990
In naj me iti naprej in to storite.

409
00:19:10,990 --> 00:19:12,760
Dovolite mi, da najprej izključite Apache.

410
00:19:12,760 --> 00:19:17,340
In bom to povedal, da se začnete
spet notranjosti današnje vira sedem

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

412
00:19:18,420 --> 00:19:20,100
Tako, da imam dostop do vsega.

413
00:19:20,100 --> 00:19:22,230
>> In zdaj, če grem nazaj
ta imenik kotacijo,

414
00:19:22,230 --> 00:19:24,846
Opazili vidim vse datoteke iz danes.

415
00:19:24,846 --> 00:19:26,720
In boste videli v
Naslednji problem set, bomo

416
00:19:26,720 --> 00:19:28,594
vam dal navodila
Za počne točno to.

417
00:19:28,594 --> 00:19:35,210
Če odprem paragraphs.html, bi to lahko
kakor tudi videti kot programskega jezika

418
00:19:35,210 --> 00:19:36,970
za vas, če ne govorite ali brati latinščino.

419
00:19:36,970 --> 00:19:40,525
Toda to je le tri odstavke
besedila, ki so označeni v HTML.

420
00:19:40,525 --> 00:19:43,100
>> In obvestilo odstavek
odmori med njimi.

421
00:19:43,100 --> 00:19:46,400
Ker se je izkazalo,
in čeprav vas

422
00:19:46,400 --> 00:19:49,210
morda nagnjeni, da to storijo,
ker je v realnem svetu,

423
00:19:49,210 --> 00:19:51,370
Če želite, da bi linijo
odmori med stvarmi,

424
00:19:51,370 --> 00:19:55,680
boste morda preprosto
to stori, in hit Shrani.

425
00:19:55,680 --> 00:19:59,460
In zdaj, če sem osvežite tukaj, obvestilo
da je vse samo zamegljuje skupaj

426
00:19:59,460 --> 00:20:01,100
V samo enem madeža besedila.

427
00:20:01,100 --> 00:20:03,570
Ker HTML je nekako neumno jeziku.

428
00:20:03,570 --> 00:20:07,230
>> Namenjen je za uporabo v tak
način, da bo brskalnik le

429
00:20:07,230 --> 00:20:09,920
narediti jasno, kaj vam je povedal, da storiti.

430
00:20:09,920 --> 00:20:12,890
Torej, če ga ne povem
daj mi nov odstavek,

431
00:20:12,890 --> 00:20:14,569
ne boš videti nov odstavek.

432
00:20:14,569 --> 00:20:16,360
In dejansko kaj
Brskalnik bo storiti

433
00:20:16,360 --> 00:20:20,020
tudi če ste zadeti nastopiti,
recimo, znova in znova

434
00:20:20,020 --> 00:20:23,190
in spet, premikanja besedila pot
navzdol po zaslonu in nato shranite

435
00:20:23,190 --> 00:20:26,610
in nato osvežite, brskalnik se dogaja
kolaps vse te belega prostora

436
00:20:26,610 --> 00:20:29,021
v samo eno, vidno presledkov.

437
00:20:29,021 --> 00:20:29,520
V redu.

438
00:20:29,520 --> 00:20:30,869
Torej, to je točka tag.

439
00:20:30,869 --> 00:20:32,910
In kaj je vzorec
da se razvija tu?

440
00:20:32,910 --> 00:20:37,450
No, zdi se, da se zgodi, da
HTML je vse o začetni oznako

441
00:20:37,450 --> 00:20:38,460
in konča oznako.

442
00:20:38,460 --> 00:20:39,300
In kaj je oznaka?

443
00:20:39,300 --> 00:20:41,160
No, to je samo kos sintakse.

444
00:20:41,160 --> 00:20:44,400
Odpri nosilec, ključne besede,
zaprt nosilec, je oznaka.

445
00:20:44,400 --> 00:20:45,510
Ali začeti oznako.

446
00:20:45,510 --> 00:20:48,590
In potem, ko ste
storiti izražanje sebe,

447
00:20:48,590 --> 00:20:52,300
kot ste končali z odstavkom,
vam tako rekoč nasprotno.

448
00:20:52,300 --> 00:20:55,480
Ampak nasprotno ni povsem nazaj.

449
00:20:55,480 --> 00:21:00,630
>> Vi preprosto predpono isti tag je
poimenovati s poševnico, kot je ta.

450
00:21:00,630 --> 00:21:01,130
V redu.

451
00:21:01,130 --> 00:21:02,570
Torej ni vse tako vznemirljivo.

452
00:21:02,570 --> 00:21:05,270
In v resnici, ne bomo zaradi česar je
Spletni vse to bolj zanimivo.

453
00:21:05,270 --> 00:21:07,630
Kaj pa, če želim, da bi
Stvari večji in drzne?

454
00:21:07,630 --> 00:21:11,780
Tako se izkaže, da tu je primer
v headings.html, kjer je v mojem telesu,

455
00:21:11,780 --> 00:21:17,280
Imam H1 tag, H2, H3,
štiri, pet ali šest, od katerih so vsi

456
00:21:17,280 --> 00:21:18,310
zdi precej Skrivnosten.

457
00:21:18,310 --> 00:21:21,010
Ampak, če sem šel odpreti to
Na primer, vzemimo pogled.

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

459
00:21:22,490 --> 00:21:27,030
>> Tako lahko brskalniki privzeto vam besedilo
da je velik in krepko neenakih velikosti.

460
00:21:27,030 --> 00:21:28,070
H1 je velika.

461
00:21:28,070 --> 00:21:31,240
H6 je manjši in nato
vse ostalo vmes.

462
00:21:31,240 --> 00:21:34,170
Tako, da je zanimivo, vendar še vedno
ni res web vem.

463
00:21:34,170 --> 00:21:36,870
Kaj pa, če želimo, da imam
nekaj podobnega seznama. .

464
00:21:36,870 --> 00:21:40,190
Torej, tukaj je označen seznam z
tri Harvard hiš.

465
00:21:40,190 --> 00:21:41,600
>> Kako ste se lotili tem?

466
00:21:41,600 --> 00:21:45,410
No, si oglejte list.html.

467
00:21:45,410 --> 00:21:47,870
In tukaj, smo videli
malo funkiness

468
00:21:47,870 --> 00:21:49,630
ampak kaj je razmisliti, kaj se dogaja.

469
00:21:49,630 --> 00:21:56,182
Torej, ki temelji na tisto, kar ste pravkar videli,
UL je kratica za neurejen seznam.

470
00:21:56,182 --> 00:21:57,640
Neurejen seznam pomeni samo oznakami.

471
00:21:57,640 --> 00:21:58,431
Tukaj ni številke.

472
00:21:58,431 --> 00:22:01,850
Tam je tudi nekaj, kar se imenuje
urejen seznam, ki je OL na oznako.

473
00:22:01,850 --> 00:22:05,350
Potem LI, seznam postavka je vse to pomeni.

474
00:22:05,350 --> 00:22:07,790
>> In naj bo tako samodejno
številke vse za vas.

475
00:22:07,790 --> 00:22:11,270
Ampak še enkrat, vse moje vdolbine
in beli prostor je samo za mene.

476
00:22:11,270 --> 00:22:13,050
Brskalnik ni
dejansko dogaja, da je vseeno.

477
00:22:13,050 --> 00:22:16,670
Torej, čeprav si ne bi mogla
to storiti, samo da bo jasno,

478
00:22:16,670 --> 00:22:19,880
vam ni treba, čeprav
bo brskalnik še vedno

479
00:22:19,880 --> 00:22:22,130
biti sposobni razumeti čisto v redu.

480
00:22:22,130 --> 00:22:24,590
Jaz sem hitting reload v moji
brskalnik, sem kliknite Reload

481
00:22:24,590 --> 00:22:26,760
in ne spremembe se dogajajo
ker brskalnik še vedno

482
00:22:26,760 --> 00:22:29,550
počne točno to, kar sem povedal, da storiti.

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

484
00:22:30,050 --> 00:22:31,340
Torej je to vse samo besedilo.

485
00:22:31,340 --> 00:22:33,730
Zdaj pa dajmo narediti nekaj bolj zanimivega.

486
00:22:33,730 --> 00:22:36,660
Grem, da gredo naprej in
sposoditi nekaj tega HTML.

487
00:22:36,660 --> 00:22:40,910
Grem, da gredo naprej in
ustvarite novo datoteko tukaj.

488
00:22:40,910 --> 00:22:43,370
In bomo to imenujemo rick.html.

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

490
00:22:46,190 --> 00:22:48,916
Imamo nesorazmerno
Rabljen nekaj

491
00:22:48,916 --> 00:22:51,290
imenuje Rick roll v tem
Razred letos, ne vem,

492
00:22:51,290 --> 00:22:53,880
je pravkar zgodilo organsko.

493
00:22:53,880 --> 00:22:55,397
>> In zdaj se je ušel iz nadzora.

494
00:22:55,397 --> 00:22:56,730
Tako da sem le, da bo šel z njo.

495
00:22:56,730 --> 00:22:59,700
In če grem na Google
Slike in Rick Astley.

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

497
00:23:02,450 --> 00:23:06,170
Če ne veste, zakaj delamo
to, samo bral o Wikipediji.

498
00:23:06,170 --> 00:23:11,520
Vsakič, ko ste kliknili na povezavo,
nekdo je bil smeh nekje.

499
00:23:11,520 --> 00:23:14,860
In mi gredo ahead-- tam
gremo, dajmo to sliko.

500
00:23:14,860 --> 00:23:16,750
>> Torej, tukaj imamo
slik v Google Images.

501
00:23:16,750 --> 00:23:19,390
In kaj je domnevati, da je to
razumno povsod na internetu.

502
00:23:19,390 --> 00:23:22,570
Tako da bom za domnevo, da je v redu za mene
dejansko dal to v moji spletni strani.

503
00:23:22,570 --> 00:23:24,820
Grem, da gredo naprej
in kopirajte URL slike.

504
00:23:24,820 --> 00:23:28,600
In zdaj, če grem nazaj v oblaku
9, poglejmo, kaj lahko storim tukaj.

505
00:23:28,600 --> 00:23:30,630
Torej, tukaj je samo spletna stran.

506
00:23:30,630 --> 00:23:39,020
To je Rick Astley, haha,
Bom zdaj iti nazaj

507
00:23:39,020 --> 00:23:43,510
na mojem brskalniku, osvežite in zanimivo.

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

509
00:23:44,530 --> 00:23:46,050
Torej, da vidim, kaj se je zgodilo.

510
00:23:46,050 --> 00:23:49,114
Pravzaprav, bom
pretvarjati, da nisem naredil.

511
00:23:49,114 --> 00:23:50,280
[Neslišno] ga dal noter.

512
00:23:50,280 --> 00:23:52,520
Bomo prišli nazaj, da je v tem trenutku.

513
00:23:52,520 --> 00:23:54,200
Torej, tukaj je rick.html.

514
00:23:54,200 --> 00:23:56,070
Torej to ni Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Tako se izkaže, smo lahko
ga dejansko dodate tukaj.

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

517
00:24:00,830 --> 00:24:06,680
Jaz bom rekel, da mi sliko, katere
vir je URL sem kopiral, ki

518
00:24:06,680 --> 00:24:09,110
očitno je srečen
rojstni dan nekaj, ali drugo.

519
00:24:09,110 --> 00:24:13,280
>> In zdaj bom
zaprite oznako, kot je ta.

520
00:24:13,280 --> 00:24:15,170
Torej je to zavijanje super dolgo.

521
00:24:15,170 --> 00:24:17,740
Ampak obvestilo, da je vse, kar sem imel
storiti je odprt nosilec podobe,

522
00:24:17,740 --> 00:24:20,270
vir z atributom to.

523
00:24:20,270 --> 00:24:21,530
In to je res dolgo URL.

524
00:24:21,530 --> 00:24:23,720
In čisto na koncu, opazijo.

525
00:24:23,720 --> 00:24:29,530
Zakaj sem naredil slash kotna konzola
namesto da bi, tako kot vsako drugo oznako,

526
00:24:29,530 --> 00:24:33,590
ima odprt nosilec,
IMG, zaprt nosilec?

527
00:24:33,590 --> 00:24:37,040
Samo ugibati, tudi če ste
ne poznam whatsoever

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

529
00:24:40,410 --> 00:24:42,710
>> Tako je, kako se zapre
ukaz, ampak zakaj

530
00:24:42,710 --> 00:24:45,850
ne res intuitivno
občutek, da narediš nekaj malo bolj

531
00:24:45,850 --> 00:24:48,820
zgovornega kot neposredni sliki?

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

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

534
00:24:52,000 --> 00:24:55,620
Samo pomensko, ni občutka
začenši sliko in konča sliko,

535
00:24:55,620 --> 00:24:56,870
to je bodisi tam ali pa je ni.

536
00:24:56,870 --> 00:25:00,960
Tako da nima smisla, da zapusti vrzel
za kaj drugega znotraj slike.

537
00:25:00,960 --> 00:25:02,010
Ne moreš narediti.

538
00:25:02,010 --> 00:25:03,720
In tako sintakso
bi na splošno lahko samo

539
00:25:03,720 --> 00:25:07,910
storiti poševnico notranjosti
odprte oznako ali začetnem tag

540
00:25:07,910 --> 00:25:09,020
in nato pritisnite Shrani.

541
00:25:09,020 --> 00:25:13,350
>> Torej, če sem zdaj osvežite to datoteko, zdaj
Imam dober spletni strani kuhanje tukaj.

542
00:25:13,350 --> 00:25:15,100
In smo lahko zagotovo
res nagajati ljudem

543
00:25:15,100 --> 00:25:17,010
s namesto embedding
kot povezavo YouTube.

544
00:25:17,010 --> 00:25:19,350
In dejansko kadarkoli
ste kdaj šli na YouTube,

545
00:25:19,350 --> 00:25:22,190
in me pustil pravzaprav po naključju
rick roll sem tukaj.

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

547
00:25:25,770 --> 00:25:29,592
Torej Rick roll-- bom iti tukaj.

548
00:25:29,592 --> 00:25:31,900
>> [Predvaja glasba]

549
00:25:31,900 --> 00:25:33,730
>> OK, ena oseba všeč, da.

550
00:25:33,730 --> 00:25:37,270
Tako opazijo ves ta čas, če vas
kliknite Share povezavo, vam seveda

551
00:25:37,270 --> 00:25:41,390
dobili URL, ki lahko dejansko
vlagati v elektronski pošti ali forenzične slike

552
00:25:41,390 --> 00:25:43,730
ali v problem nastaviti ali diapozitiv.

553
00:25:43,730 --> 00:25:49,055
In zdaj, če sem namesto kliknite na embed,
obvestilo, da ves ta čas, ta stvar

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

555
00:25:49,680 --> 00:25:50,910
Grem, da gredo naprej in kopirati to.

556
00:25:50,910 --> 00:25:54,000
>> In samo zato, da bomo lahko videli bolje, da sem
tekoč, da ga prilepite v mojem urejevalniku besedil.

557
00:25:54,000 --> 00:25:55,860
Obvestilo, da je to tisto, kar
YouTube je bil ti govoril.

558
00:25:55,860 --> 00:25:57,693
Vsakič, ko obiščete
YouTube video, če vas

559
00:25:57,693 --> 00:26:00,410
želite vlagati video na vaš
spletna stran, preprosto zgrabi to.

560
00:26:00,410 --> 00:26:03,350
Torej je to še en
HTML tag imenuje iframe.

561
00:26:03,350 --> 00:26:04,590
Ali v vrstico okvirju.

562
00:26:04,590 --> 00:26:08,680
Torej je tudi izgleda malo bolj
zapleten, kot vse druge.

563
00:26:08,680 --> 00:26:11,950
Tako se izkaže, da je na sliki
tag in očitno iframe tag

564
00:26:11,950 --> 00:26:13,370
vzeti kaj so imenovani atributi.

565
00:26:13,370 --> 00:26:15,710
>> In to je še
kos skladnje HTML.

566
00:26:15,710 --> 00:26:19,240
Poleg tega, da je oznaka je
ime, odprti oklepaj ime oznake,

567
00:26:19,240 --> 00:26:23,780
lahko nadzorujete vedenje tag
ki jih imajo cel kup atributa

568
00:26:23,780 --> 00:26:24,860
enako vrednost.

569
00:26:24,860 --> 00:26:26,290
Lastnost enaka vrednosti.

570
00:26:26,290 --> 00:26:28,100
In tako, na primer,
YouTube se nam povedali

571
00:26:28,100 --> 00:26:31,990
Če želite širino tega videa
biti 420 pikslov in višina

572
00:26:31,990 --> 00:26:35,470
biti 315 slikovnih točk, ki je
kako ga izraziti v HTML.

573
00:26:35,470 --> 00:26:38,480
>> Vir video bo
da bo tako dolgo YouTube URL

574
00:26:38,480 --> 00:26:40,830
in še nekaj drugih stvari
kot okvir meja je nič,

575
00:26:40,830 --> 00:26:43,500
tako da verjetno pomeni, da je
No Border okoli stvar.

576
00:26:43,500 --> 00:26:45,450
Dovoli poln zaslon verjetno
pomeni, da uporabnik

577
00:26:45,450 --> 00:26:47,840
lahko s klikom na gumb in
dejansko celozaslonski video.

578
00:26:47,840 --> 00:26:52,870
Torej, če si res želim, da bi
impresivna tukaj v Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
namesto da uporabite oznako slike, naj
me izbrisali, da prilepite to.

580
00:26:58,490 --> 00:27:00,810
In zdaj osvežite.

581
00:27:00,810 --> 00:27:02,500
In tukaj smo spet tam.

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

583
00:27:04,979 --> 00:27:06,020
V redu, to je dovolj.

584
00:27:06,020 --> 00:27:08,970
Vse je v redu, da bom poskusil
težko, da ne bi naredil še enkrat.

585
00:27:08,970 --> 00:27:11,400
Torej, kaj so nekateri od takeaways tukaj?

586
00:27:11,400 --> 00:27:15,130
Torej HTML, tako grdo, saj teh spletnih straneh
so, je pravzaprav zelo preprost.

587
00:27:15,130 --> 00:27:16,467
To ni programski jezik.

588
00:27:16,467 --> 00:27:17,550
Nima funkcije.

589
00:27:17,550 --> 00:27:18,410
Nima zank.

590
00:27:18,410 --> 00:27:19,535
To nima pogojev.

591
00:27:19,535 --> 00:27:22,900
Vse kar je na ducate
različne oznake, od katerih je vsak

592
00:27:22,900 --> 00:27:24,620
ima nič ali več atributov.

593
00:27:24,620 --> 00:27:27,320
In v resnici, kaj je zabavno o
HTML, kot ste začeli, da se potopite v

594
00:27:27,320 --> 00:27:29,560
je, da je zelo samostojno teachable.

595
00:27:29,560 --> 00:27:32,880
>> Vse to se je razumevanje
splošnega okvira HTML.

596
00:27:32,880 --> 00:27:36,510
Kaj je oznaka, kaj je atribut,
kako ste dejansko konfigurirate spletno stran

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

598
00:27:37,250 --> 00:27:40,720
In vse ostalo je res rezultat
gledanja v spletni sklic

599
00:27:40,720 --> 00:27:43,080
ali googling kako narediti nekaj
Tehnika ali kot smo videli,

600
00:27:43,080 --> 00:27:45,371
gledaš Facebook je vir
koda, ki je videti na spletni strani

601
00:27:45,371 --> 00:27:48,710
da vam je všeč na njej je izvorna koda in
razumevanju, kako razvijalci tam

602
00:27:48,710 --> 00:27:50,550
dejansko določeni stvari.

603
00:27:50,550 --> 00:27:52,180
>> Torej ne moremo storiti slike kot tudi.

604
00:27:52,180 --> 00:27:53,994
In v resnici, smo to storili pred nekaj trenutki.

605
00:27:53,994 --> 00:27:55,410
Naj gredo naprej in samo ti pokažem.

606
00:27:55,410 --> 00:27:56,770
Tukaj je nekaj vzorčno kodo.

607
00:27:56,770 --> 00:27:58,380
Če boste kdaj želeli videti Godrnjavček mačko.

608
00:27:58,380 --> 00:28:00,620
Tako opazili, da sem lahko
ima oznako slike tukaj.

609
00:28:00,620 --> 00:28:02,090
In imam pripombo nad njo.

610
00:28:02,090 --> 00:28:04,490
Imam alternativo
besedilo za dostopnost.

611
00:28:04,490 --> 00:28:07,250
Torej, nekdo, ki je s pomočjo zaslona
Bralec iz razlogov pogled

612
00:28:07,250 --> 00:28:10,172
lahko dejansko pa imajo svoje
bralnik zaslona pravijo zlovoljen mačko.

613
00:28:10,172 --> 00:28:11,880
Ker če ne morejo
glej slike, ki jih

614
00:28:11,880 --> 00:28:14,504
lahko vsaj imajo svoj računalnik
povej jim, verbalno, kaj je to.

615
00:28:14,504 --> 00:28:18,020
In vir te datoteke je cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Torej v bistvu, če sem res hotel
dobili pameten, kaj bi lahko imela done--

617
00:28:22,472 --> 00:28:25,680
Obljubim, da ne bo šel na Rick Astley, tako
Jaz grem na google za mačko namesto.

618
00:28:25,680 --> 00:28:28,290
In če grem na Google Slike
tukaj, mi pa bomo prevzeti

619
00:28:28,290 --> 00:28:30,040
da je to slika mojega mačka.

620
00:28:30,040 --> 00:28:35,070
>> Recimo, da imam nadzor kliknil
ali desno kliknil na to, po naključju

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

622
00:28:35,630 --> 00:28:40,320
In cat.jpeg grem
shranite na mojem namizju.

623
00:28:40,320 --> 00:28:44,700
Naj zdaj iti nazaj v oblak 9.

624
00:28:44,700 --> 00:28:48,150
Obvestilo, da je tu, sem lahko
pojdite na upload lokalne datoteke.

625
00:28:48,150 --> 00:28:51,530
In če sem zgrabi to
Datoteka, cat.jpeg obvestilo

626
00:28:51,530 --> 00:28:54,674
da sem lahko povlečete in
ga spustite v oblak 9

627
00:28:54,674 --> 00:28:56,090
in to se dogaja, da kričati name tukaj.

628
00:28:56,090 --> 00:28:59,000
>> Ker smo že
ti dal cat.jpeg datoteko,

629
00:28:59,000 --> 00:29:01,430
ampak to je super enostavno
zgrabi fotografijo, ki ste jo

630
00:29:01,430 --> 00:29:03,220
vzeta iz Facebook
ali Flickr ali podobno

631
00:29:03,220 --> 00:29:05,678
in dejansko povlecite in ga spustite
v oblak 9, nato pa ga

632
00:29:05,678 --> 00:29:07,970
del svoje osebne
Spletna stran ali problem

633
00:29:07,970 --> 00:29:10,442
nastavite sedem ali osem, kot bomo kmalu videli.

634
00:29:10,442 --> 00:29:12,150
In potem, ko vas
končno obiščejo to mačko,

635
00:29:12,150 --> 00:29:16,610
ob predpostavki, da sem prenesli to isto mačko,
Obvestilo that-- da je bil čudovit.

636
00:29:16,610 --> 00:29:19,160
>> Kaj boste videli, je
nekaj podobnega ta obraz tukaj.

637
00:29:19,160 --> 00:29:21,810
Torej datotek, ki jih
Referenčna znotraj spletne strani

638
00:29:21,810 --> 00:29:26,050
lahko bodisi lokalno v svoj
račun ali na daljavo na drugem strežniku

639
00:29:26,050 --> 00:29:29,670
kot v primeru Rick
Astley fotografija malo nazaj.

640
00:29:29,670 --> 00:29:32,990
Torej, kje else-- kaj
še lahko storimo tu?

641
00:29:32,990 --> 00:29:34,890
Torej, dajmo si oglejte spodaj.

642
00:29:34,890 --> 00:29:36,160
Veš, kaj je nekako kul?

643
00:29:36,160 --> 00:29:39,330
>> Tako smo sedaj česar
zelo statične spletne strani.

644
00:29:39,330 --> 00:29:41,830
Rad bi začinilo stvari, kot sledi.

645
00:29:41,830 --> 00:29:44,344
Želim, da bi svoj iskalnik.

646
00:29:44,344 --> 00:29:47,010
Torej, da bi iskalnik, Dovolite
iti naprej in začeti početje to.

647
00:29:47,010 --> 00:29:52,570
Grem, da gredo naprej in ustvarjanje
novo datoteko z imenom search.html.

648
00:29:52,570 --> 00:29:54,890
In smo prefabed različice spletu.

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

650
00:29:56,027 --> 00:29:57,610
Ne prilepite v vašo terminalsko okno.

651
00:29:57,610 --> 00:29:58,744
Montažne različice spletu.

652
00:29:58,744 --> 00:30:00,160
In jaz bom za začetek, kot sledi.

653
00:30:00,160 --> 00:30:04,490
Torej, tukaj je začetek
datoteka z imenom search.html.

654
00:30:04,490 --> 00:30:07,510
Jaz grem, da ga shranite v
današnja vir imenika.

655
00:30:07,510 --> 00:30:09,079
Bom poklical to iskanje.

656
00:30:09,079 --> 00:30:10,370
Pravzaprav, bomo bolje.

657
00:30:10,370 --> 00:30:13,600
CS50 iskanje in dejansko je blagovna znamka.

658
00:30:13,600 --> 00:30:17,500
In zdaj, sem hotel reči
nekaj podobnega H1 CS50 iskanje.

659
00:30:17,500 --> 00:30:20,930
In potem sem dol, H2 kmalu.

660
00:30:20,930 --> 00:30:23,230
In samo, da povzamem, H1 in
H2 pomeni tisto, kar v tem zaporedju?

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

662
00:30:26,750 --> 00:30:30,320
>> Ja, tako velik in krepko, in
ni tako velika, vendar še vedno krepko.

663
00:30:30,320 --> 00:30:37,375
Torej, če sem rešil to in pojdi tja,
Poglejmo datoteko search.html.

664
00:30:37,375 --> 00:30:42,560
Vse je v redu, in to
je right-- [neslišno].

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

666
00:30:46,980 --> 00:30:49,110
Ostani v pripravljenosti.

667
00:30:49,110 --> 00:30:49,945
David je zmeden.

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

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

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

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

672
00:30:55,420 --> 00:30:56,660
Torej, tam je.

673
00:30:56,660 --> 00:30:58,350
Torej CS50 iskanje kmalu.

674
00:30:58,350 --> 00:31:00,370
Torej, zdaj, dajmo sintetizirajo
kaj smo naredili prejšnji teden.

675
00:31:00,370 --> 00:31:03,400
>> Kjer smo se pogovarjali o
nižji mehanika nivojske HTTP.

676
00:31:03,400 --> 00:31:05,780
In te nove ideje
HTML, je, ki samo

677
00:31:05,780 --> 00:31:08,890
ta označevalni jezik, kjer vas
povej brskalnik natanko, kaj naj naredim

678
00:31:08,890 --> 00:31:10,740
in implementirati svoj iskalnik.

679
00:31:10,740 --> 00:31:12,520
Torej, namesto samo
rekoč kmalu sem

680
00:31:12,520 --> 00:31:14,810
dogaja, da uvedejo
nekaj, kar se imenuje obrazec oznako.

681
00:31:14,810 --> 00:31:19,610
In v tej obliki, bom na
imajo nekaj podobnega vnosno polje.

682
00:31:19,610 --> 00:31:22,450
>> In ime tega vhoda
polje, jaz grem, da ga pokličete Q.

683
00:31:22,450 --> 00:31:26,240
In vrsta te vnosno polje
Jaz bom rekel, je le "besedilo".

684
00:31:26,240 --> 00:31:29,130
In polje za besedilo, kot bomo
glej, je samo polje z besedilom.

685
00:31:29,130 --> 00:31:32,830
In zato ne zaznamo tukaj za
kaj znotraj njega na tej točki.

686
00:31:32,830 --> 00:31:35,320
In tako sem preprosto dogaja
zapreti oznako z da

687
00:31:35,320 --> 00:31:38,099
naprej poševnica desno v tag sami.

688
00:31:38,099 --> 00:31:39,890
In potem bom
imajo en drug vhod.

689
00:31:39,890 --> 00:31:43,480
Vrsta vhodnega enaka oddajte.

690
00:31:43,480 --> 00:31:45,320
In potem bom
zaprite to eno preveč.

691
00:31:45,320 --> 00:31:46,840
>> In zdaj bom šel nazaj.

692
00:31:46,840 --> 00:31:49,520
In že smo videli,
čeprav precej grda, nimam

693
00:31:49,520 --> 00:31:52,460
dobil začetke
moje iskanje stran tukaj.

694
00:31:52,460 --> 00:31:55,150
Dejstvo je, da mi poskusite
čistiti to gor malo.

695
00:31:55,150 --> 00:31:57,330
Izkaže se, da na
input tukaj, imam lahko

696
00:31:57,330 --> 00:31:59,910
en atribut imenovan ogrado.

697
00:31:59,910 --> 00:32:05,165
In morda vidim nekaj podobnega ključnih besed,
ali natančneje, poizvedovanje za q.

698
00:32:05,165 --> 00:32:07,820
>> In opazili, zdaj imam
ta vrsta sive besedila

699
00:32:07,820 --> 00:32:10,440
da izgine
Takoj, ko začnem tipkati,

700
00:32:10,440 --> 00:32:12,930
ampak to je verjetno nekaj
ki ste jih videli v drugih spletnih straneh.

701
00:32:12,930 --> 00:32:14,650
Res ne všeč gumb Pošlji.

702
00:32:14,650 --> 00:32:18,320
Tako da sem dejansko dogaja, da daje
Gumb Submit vrednost iskanju.

703
00:32:18,320 --> 00:32:21,680
In zdaj, če sem se osvežite, opazil, da
moj gumb postane imenovan iskanje.

704
00:32:21,680 --> 00:32:24,140
Veš, jaz res ne
kot logotipom tukaj.

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

706
00:32:27,140 --> 00:32:28,820
>> Želim, da to še dodatno začiniti.

707
00:32:28,820 --> 00:32:30,660
Torej CS50 iskanje.

708
00:32:30,660 --> 00:32:31,870
Dovolite mi, da ustvarite svoj lasten logotip.

709
00:32:31,870 --> 00:32:33,080
To izgleda lepo.

710
00:32:33,080 --> 00:32:36,945
Torej, zdaj mi rešiti ta as-- pridi.

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

712
00:32:40,710 --> 00:32:43,120
Kje se dogaja?

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

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

715
00:32:44,160 --> 00:32:44,980
Ga zamudili.

716
00:32:44,980 --> 00:32:47,740
Shrani kot.

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

718
00:32:49,470 --> 00:32:51,700
Stati ob strani, da bomo
popraviti to enkrat za vselej.

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

720
00:32:57,650 --> 00:32:58,590
Tam gremo.

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

722
00:32:59,090 --> 00:32:59,600
Žal mi je.

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

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

725
00:33:02,310 --> 00:33:03,160
Izhod iz celozaslonskega načina.

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

727
00:33:04,150 --> 00:33:06,870
>> Zdaj, kot je normalno
Oseba, shranite sliko kot.

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

729
00:33:08,810 --> 00:33:13,194
Zdaj bom šel v CS50IDE in
Bom preprosto zgrabite logotip,

730
00:33:13,194 --> 00:33:15,360
Jaz grem, da ga povlečete v
moj vir sedem imenik,

731
00:33:15,360 --> 00:33:17,002
datoteka že obstaja, jaz sem v redu s tem.

732
00:33:17,002 --> 00:33:19,210
Torej bom preglasijo
ker sem ga že imela.

733
00:33:19,210 --> 00:33:20,630
In zdaj kako se znebiti tega?

734
00:33:20,630 --> 00:33:24,670
>> Pojdimo naprej tu in narediti
vir slika enaka logo.gif.

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

736
00:33:25,490 --> 00:33:26,050
Shranite.

737
00:33:26,050 --> 00:33:30,560
In zdaj, če grem nazaj na moje iskanje
stran, zdaj pa je videti precej dobro.

738
00:33:30,560 --> 00:33:33,610
Vse je v redu, zato je ni
precej storiti nič uporabnega.

739
00:33:33,610 --> 00:33:37,000
Dejstvo je, da mi poskusite z iskanjem
za mačke in glej kaj se zgodi.

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

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

742
00:33:39,420 --> 00:33:41,400
Ne samo delo, očitno.

743
00:33:41,400 --> 00:33:43,760
Torej, kaj je ključni del
da manjka tu?

744
00:33:43,760 --> 00:33:49,100
>> Dobro, tudi če ne veste, katero koli HTML,
Sem začel označevanje up obrazec telefon

745
00:33:49,100 --> 00:33:54,130
in sem jo povedal, kako priti vložkov,
dajte mi polje z besedilom in gumb predložiti,

746
00:33:54,130 --> 00:33:55,730
kar kos je očitno manjka?

747
00:33:55,730 --> 00:33:58,975
Recimo, da želimo dejansko dobili
ta stvar deluje pravilno.

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

749
00:34:02,420 --> 00:34:05,360
Kaj moramo storiti?

750
00:34:05,360 --> 00:34:08,860
Imamo potrebo po izvajanju zadnji konec
podatkovna baza ali samo iskalnik,

751
00:34:08,860 --> 00:34:11,210
in da se dogaja, da traja
cel kup časa, odkrito.

752
00:34:11,210 --> 00:34:13,380
>> Torej, se spomnite, kaj smo storili zadnjič.

753
00:34:13,380 --> 00:34:18,230
Torej, če iščete nekaj na Googlu
in ste vnaprej izklopljen,

754
00:34:18,230 --> 00:34:20,355
odpoklic, takojšnje iskanje.

755
00:34:20,355 --> 00:34:22,230
Torej mi zavijemo da izklopite
tako, da to dejansko

756
00:34:22,230 --> 00:34:26,650
obnaša kot starejši šolski brskalnika,
če sem zdaj išče nekaj podobnega mačke,

757
00:34:26,650 --> 00:34:28,190
spomniti, kaj je URL izgleda.

758
00:34:28,190 --> 00:34:29,449
To je precej skrivnosten.

759
00:34:29,449 --> 00:34:33,000
Vendar vgrajeni v tam,
odpoklic, je iskanje poševnica.

760
00:34:33,000 --> 00:34:35,100
Vprašanje znamka q enaka mačke.

761
00:34:35,100 --> 00:34:37,760
>> In da se zdi, da bi me
cel kup rezultatov iskanja.

762
00:34:37,760 --> 00:34:39,134
Tako da boste vedeli, kaj bom naredil?

763
00:34:39,134 --> 00:34:41,650
Jaz grem sposoditi
Google za samo minuto.

764
00:34:41,650 --> 00:34:43,670
Bom šel čez
tu in bom rekel,

765
00:34:43,670 --> 00:34:47,850
da ta predstavlja ukrepe ali
destinacija, tako rekoč,

766
00:34:47,850 --> 00:34:49,330
bi morali dobesedno Google.

767
00:34:49,330 --> 00:34:52,590
In način sem si želel
za uporabo se bo dobil.

768
00:34:52,590 --> 00:34:53,560
>> Torej, kaj je?

769
00:34:53,560 --> 00:34:55,760
Ukrep je nenavadno imenovan,
ampak to samo pomeni,

770
00:34:55,760 --> 00:34:58,120
kdo bo ročaj
tožba tega obrazca?

771
00:34:58,120 --> 00:35:00,820
Ko sem kliknite Išči, kjer
bi moral rezultat iti?

772
00:35:00,820 --> 00:35:05,300
In če bom zdaj šel nazaj na moj obliki
tukaj in osvežite svojo spletno stran

773
00:35:05,300 --> 00:35:09,000
in zdaj išče nekaj
kot pes, opazili zdaj

774
00:35:09,000 --> 00:35:10,850
Sem ponovno izvajajo Google.

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

776
00:35:11,350 --> 00:35:14,141
>> Če želim iskati nekaj
drugega, da dela za ne samo psi,

777
00:35:14,141 --> 00:35:16,400
deluje tudi za mačke.

778
00:35:16,400 --> 00:35:21,930
Deluje tudi CS50.

779
00:35:21,930 --> 00:35:24,310
In OK, to je samo
pod whelming, kajne?

780
00:35:24,310 --> 00:35:25,920
Vse je v redu, vendar je dejansko deluje.

781
00:35:25,920 --> 00:35:27,360
Torej, kaj se dejansko dogaja?

782
00:35:27,360 --> 00:35:31,340
Torej sem se učil svoj brskalnik, s pomočjo
HTML, da sprejme vnos od uporabnika

783
00:35:31,340 --> 00:35:35,810
in dejansko poslati vhod
na oddaljeni strežnik z uporabo HTTP.

784
00:35:35,810 --> 00:35:39,120
>> In ker moj brskalnik
razume HTTP, dejansko

785
00:35:39,120 --> 00:35:43,500
zgraditi URL nastaviti tako, da kaj
Sem na koncu več kot v mojem brskalniku,

786
00:35:43,500 --> 00:35:45,660
opazili, kaj se zgodi
ko sem iskal psa.

787
00:35:45,660 --> 00:35:49,270
Če sem kliknite Išči, opazili, da
URL spremeni, kot sem nameraval

788
00:35:49,270 --> 00:35:52,770
da google.com/search~~V poizvedbo enaka psa.

789
00:35:52,770 --> 00:35:56,020
In to zato, ker obliki
ve, ker metoda je dobil,

790
00:35:56,020 --> 00:35:59,560
da ga preprosto pripet na ta URL tam.

791
00:35:59,560 --> 00:36:01,730
>> Zdaj te spletne strani so še vedno grd.

792
00:36:01,730 --> 00:36:04,890
Torej, kaj je uvedla ena druga
kos skladnje če bomo lahko danes.

793
00:36:04,890 --> 00:36:07,640
In to je nekaj, znana
kot kaskadnih slogov.

794
00:36:07,640 --> 00:36:10,720
Zato mi dovolite, si oglejte
ta primer tukaj in si oglejte

795
00:36:10,720 --> 00:36:12,380
če lahko sklepamo, kaj se dogaja.

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

797
00:36:14,520 --> 00:36:16,532
In to je, če stvari
dobil malo grdo.

798
00:36:16,532 --> 00:36:18,490
Ker žal,
v svetu spleta,

799
00:36:18,490 --> 00:36:20,920
HTML sama ne more narediti vsega.

800
00:36:20,920 --> 00:36:22,920
In tako, če želite, da
Stilizovati vašo spletno stran,

801
00:36:22,920 --> 00:36:28,370
boste dejansko morali osredotočiti na
estetika na drugačen način.

802
00:36:28,370 --> 00:36:33,090
Torej, tukaj imam truplo mojega spleta
Stran znotraj katerega je velik div.

803
00:36:33,090 --> 00:36:34,700
In div samo pomeni delitev.

804
00:36:34,700 --> 00:36:38,060
Torej, to je kot točki, vendar pa
nima iste semantiko

805
00:36:38,060 --> 00:36:39,180
iz odstavka besedila.

806
00:36:39,180 --> 00:36:40,940
>> To samo pomeni, da na
brskalnik, tukaj prihaja

807
00:36:40,940 --> 00:36:45,210
velik pravokoten regija mojem spletu
Stran, rad bi uredil posebej.

808
00:36:45,210 --> 00:36:47,420
Zdaj, linija 21 je, če se začne, da div.

809
00:36:47,420 --> 00:36:48,770
In vzemite ugibati.

810
00:36:48,770 --> 00:36:53,080
Kakšen je učinek linije 21 na
Preostanek vsebine stran?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Ga centriranje.

813
00:36:56,311 --> 00:36:56,810
To je vse.

814
00:36:56,810 --> 00:36:58,830
Torej nismo videli način
dejansko centriranje besedila.

815
00:36:58,830 --> 00:37:00,996
>> V bistvu, moj iskalnik,
za razliko od dejanskega Google,

816
00:37:00,996 --> 00:37:03,040
je bilo vse upravičeno čez levo.

817
00:37:03,040 --> 00:37:07,430
In tako zdaj v vrstici 21, sem rekel, hej
brskalnik, ustvarjajo delitev strani.

818
00:37:07,430 --> 00:37:09,450
Daj mi veliko, neviden pravokotnik.

819
00:37:09,450 --> 00:37:11,490
To je, kako želim
pomislite na spletni strani.

820
00:37:11,490 --> 00:37:13,870
In nato Stilizovati kot sledi.

821
00:37:13,870 --> 00:37:16,900
Znotraj teh citatov,
zdaj, je drugi jezik

822
00:37:16,900 --> 00:37:19,969
da smo uvedli danes
imenovane kaskadnih slogov.

823
00:37:19,969 --> 00:37:22,010
K sreči pa tudi ni
programski jezik,

824
00:37:22,010 --> 00:37:26,470
tako da je zelo omejena v svojem sintakso, ampak
Prav tako zelo omejena funkcionalnosti

825
00:37:26,470 --> 00:37:30,670
ker HTML je vse okoli
označevanje up podatke spletne strani

826
00:37:30,670 --> 00:37:32,130
in struktura spletne strani.

827
00:37:32,130 --> 00:37:35,320
CSS je na splošno približno
last mile, estetika,

828
00:37:35,320 --> 00:37:40,160
pridobivanje velikosti in barve in
umestitev ravno prav na spletni strani.

829
00:37:40,160 --> 00:37:43,000
In res je tvorjen
s ključnimi parov vrednosti.

830
00:37:43,000 --> 00:37:46,290
>> Premoženja, kot je ta, besedila
poravnati sledi kolona,

831
00:37:46,290 --> 00:37:49,720
sledi vrednosti, ki
premoženje, ki je v tem primeru center.

832
00:37:49,720 --> 00:37:51,910
In zdaj vas opazijo
lahko gnezdo te stvari.

833
00:37:51,910 --> 00:37:56,780
Če sem hotel vse, da
Sem poudaril, da je treba na sredino,

834
00:37:56,780 --> 00:38:00,270
da je, zakaj imam linijo 21 in
ustrezna črta 31.

835
00:38:00,270 --> 00:38:04,820
Recimo zdaj hočeš povedati John
Harvard, dobrodošli na moji domači strani.

836
00:38:04,820 --> 00:38:06,530
>> Simbol Copyright John Harvard.

837
00:38:06,530 --> 00:38:09,180
In domnevam želim najprej
te vrstice, da je precej velik.

838
00:38:09,180 --> 00:38:10,450
36 pik.

839
00:38:10,450 --> 00:38:11,530
Tako da je dostojno velikosti.

840
00:38:11,530 --> 00:38:13,240
In sem si želel svojo težo, da bo krepko.

841
00:38:13,240 --> 00:38:15,450
Ampak potem spodaj, da
Hočem manjše besedilo.

842
00:38:15,450 --> 00:38:19,980
In spodaj, da hočem
še manjši besedilo.

843
00:38:19,980 --> 00:38:20,480
Žal mi je.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Danes se počuti kot off dan.

846
00:38:26,940 --> 00:38:29,840
>> Torej sedaj, kaj počnem, da izrazi to?

847
00:38:29,840 --> 00:38:34,580
Tukaj na liniji 22 je vgrajen
div ali ugnezdene div, če hočete.

848
00:38:34,580 --> 00:38:36,190
Tudi ta ima svoj stil oznako.

849
00:38:36,190 --> 00:38:38,160
Določim velikost pisave 36.

850
00:38:38,160 --> 00:38:40,460
Določim težo pisave krepko.

851
00:38:40,460 --> 00:38:43,360
Tukaj sem navesti le 24 točk.

852
00:38:43,360 --> 00:38:45,960
In končno, v skladu 28., določim 12.

853
00:38:45,960 --> 00:38:49,070
Torej samo kot preverjanje hitro razumnosti
in kot človeško branje je ta,

854
00:38:49,070 --> 00:38:52,545
katere besede na zaslonu so
dejansko bo krepko?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Katere linije so dejansko krepko?

857
00:38:58,760 --> 00:38:59,570
>> Samo John Harvard.

858
00:38:59,570 --> 00:39:00,070
Prav?

859
00:39:00,070 --> 00:39:05,940
Ker tako kot pravi linija 22 hey
brskalnik, tukaj je delitev strani.

860
00:39:05,940 --> 00:39:07,920
Naj bo velikost pisave 36 točko.

861
00:39:07,920 --> 00:39:09,460
Naredite teža pisavo krepko.

862
00:39:09,460 --> 00:39:11,920
Takoj, ko pridete
Ustrezna končna oznaka

863
00:39:11,920 --> 00:39:15,340
ali zaprt tag na liniji 24,
to pomeni, hej brskalnik,

864
00:39:15,340 --> 00:39:17,640
stop počne karkoli že počnete.

865
00:39:17,640 --> 00:39:21,020
In obvestilo, da bo jasno, čeprav
linija 22 ima vse te lastnosti

866
00:39:21,020 --> 00:39:24,430
kot stilu, ko vas
zaprite oznako v skladu 24,

867
00:39:24,430 --> 00:39:25,940
si omenil samo ime tag je.

868
00:39:25,940 --> 00:39:29,990
>> Vi ne ponovi slog besedo ali
vse, kar je znotraj teh citatov.

869
00:39:29,990 --> 00:39:32,860
In tako, če gledam na to zdaj
V mojem brskalniku, vzemimo

870
00:39:32,860 --> 00:39:38,060
poglej na končni rezultat. Spusti me
naprej, da te datoteke, ki je CSS 0.

871
00:39:38,060 --> 00:39:41,814
In to je še vedno precej navaden,
vendar pa postaja zelo zanimivo.

872
00:39:41,814 --> 00:39:43,980
Vendar se izkaže, tam je
druge stvari, kar lahko storim tukaj,

873
00:39:43,980 --> 00:39:46,490
in na tveganja, da bi
to popolnoma ostudno,

874
00:39:46,490 --> 00:39:48,630
Opazili tukaj, da je v moji
telo moje spletne strani,

875
00:39:48,630 --> 00:39:53,930
Jaz lahko naredim nekaj smešnega
kot bg ali barvo ozadja.

876
00:39:53,930 --> 00:39:56,670
>> In hitro, kaj je tvoja najljubša barva?

877
00:39:56,670 --> 00:39:57,720
Green sem slišal.

878
00:39:57,720 --> 00:39:58,750
V redu.

879
00:39:58,750 --> 00:40:02,920
Torej, zdaj, če sem udaril reload zdaj,
imamo zeleno spletno stran.

880
00:40:02,920 --> 00:40:04,710
Vse je v redu, tako da ni slabo.

881
00:40:04,710 --> 00:40:08,350
In zdaj, če želim, da bi to res
cool, bom lahko barvo mojega besedila

882
00:40:08,350 --> 00:40:09,360
celo rdeče.

883
00:40:09,360 --> 00:40:10,870
Torej, poglejmo, kaj to izgleda.

884
00:40:10,870 --> 00:40:12,230
Zdaj pa je videti precej dobro.

885
00:40:12,230 --> 00:40:15,460
In tukaj dol, če si res
želim, da igraš z nekom

886
00:40:15,460 --> 00:40:17,487
ali, če želite, da bo
eden izmed tistih ljudi, ki so

887
00:40:17,487 --> 00:40:20,570
poskušal, da vas napeljejo obiščete spletno
stran, ker so jih Prevarala Google

888
00:40:20,570 --> 00:40:27,610
v razmišljanju, tam je cel kup
od like-- ključne besede, poglejmo, osvežite.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Kje je šlo?

891
00:40:30,680 --> 00:40:31,530
In nas tam.

892
00:40:31,530 --> 00:40:32,030
V redu.

893
00:40:32,030 --> 00:40:34,905
Zato pravim, da je to prahi, bomo
govoriti o tej stvari v nekaj tednih

894
00:40:34,905 --> 00:40:36,740
ko govorimo o
varnost, če ste dejansko

895
00:40:36,740 --> 00:40:38,852
embed cele grozde
ključne besede v spletne strani,

896
00:40:38,852 --> 00:40:41,810
četudi oni niso vidni k
človek, nekdo, kot so Google, seveda,

897
00:40:41,810 --> 00:40:43,250
pravzaprav še vedno lahko našli to.

898
00:40:43,250 --> 00:40:45,820
Vse je v redu, tako da je precej
ostuden precej hitro.

899
00:40:45,820 --> 00:40:48,420
>> In v resnici, to ni vse
da je veliko razliko moji spletni

900
00:40:48,420 --> 00:40:51,480
Stran kot dodiplomski, ki
Začel sem googling okoli, da bi našli

901
00:40:51,480 --> 00:40:53,690
pretekle različice mojih starih spletnih strani.

902
00:40:53,690 --> 00:40:54,500
Bilo je precej hudo.

903
00:40:54,500 --> 00:40:56,650
V bistvu sem si najti
eden tik pred razred.

904
00:40:56,650 --> 00:40:58,620
Ampak tam je slabše tam.

905
00:40:58,620 --> 00:41:01,534
To očitno je bil moj
Domača stran nazaj v letu 1996.

906
00:41:01,534 --> 00:41:04,200
Očitno sem mislil, da je
primerno vprašati ljudi svoje ime

907
00:41:04,200 --> 00:41:05,991
preden se lahko
dejansko videli mojo spletno stran.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> In potem sem jim pokazala,
nekaj neumnega, verjetno.

910
00:41:11,920 --> 00:41:13,450
Bom izkopljemo več za naslednjič.

911
00:41:13,450 --> 00:41:16,220
Ampak za zdaj, kaj je
razmisli malo načrtovanja.

912
00:41:16,220 --> 00:41:17,444
Mi smo se pogovarjali o slogu.

913
00:41:17,444 --> 00:41:19,735
In ta stran tako daleč
Najbolj vse sem napisal

914
00:41:19,735 --> 00:41:21,890
je precej čist slogovno.

915
00:41:21,890 --> 00:41:23,320
Kaj pa design?

916
00:41:23,320 --> 00:41:25,990
No, tam je veliko redundance
V kaj sem počel tukaj.

917
00:41:25,990 --> 00:41:28,156
>> Sem omenil besedo
barva na nekaj mestih.

918
00:41:28,156 --> 00:41:31,630
Sem omenil velikost pisave v nekaj
kraji in krepko v nekaj mestih.

919
00:41:31,630 --> 00:41:34,870
In v bistvu, sem co
druženje dveh jezikov.

920
00:41:34,870 --> 00:41:38,100
Imam HTML z mojimi oznakami in my
atribute in potem kar naenkrat,

921
00:41:38,100 --> 00:41:40,100
med narekovaji, imam
danes drugi jezik

922
00:41:40,100 --> 00:41:43,830
imenovana CSS, ki je spet, je le ta
Ključne pari vrednosti ali te lastnosti

923
00:41:43,830 --> 00:41:45,280
ločeni z dvopičjem.

924
00:41:45,280 --> 00:41:47,700
>> Izkazalo se je, da je veliko
kot pri C, pri čemer smo

925
00:41:47,700 --> 00:41:50,550
lahko začnete dejavnik ven
nekateri kodo v glavi datoteke,

926
00:41:50,550 --> 00:41:53,520
tako da lahko delamo enako v HTML.

927
00:41:53,520 --> 00:41:56,030
In korak v smeri, ki je, kot sledi.

928
00:41:56,030 --> 00:42:02,230
Opazimo, da CSS1.html je ta različica
strukturno točno isto spletno stran.

929
00:42:02,230 --> 00:42:05,250
Torej imam cel kup
od Divs, toda tokrat sem imel

930
00:42:05,250 --> 00:42:07,220
Znebila ovoja
div, kot boste videli.

931
00:42:07,220 --> 00:42:12,390
>> In sem dal te tri Divs
top, srednji in spodnji, edinstvene identitete.

932
00:42:12,390 --> 00:42:14,760
To je lepo, ker ga
kar te delitve

933
00:42:14,760 --> 00:42:18,715
strani edinstvenih identifikatorjev,
Jaz jih lahko reference drugod.

934
00:42:18,715 --> 00:42:19,215
Kje?

935
00:42:19,215 --> 00:42:21,070
No, naj se pomaknite navzgor.

936
00:42:21,070 --> 00:42:24,070
In tako daleč, kadarkoli smo pogledal
na čelu spletne strani, kar je

937
00:42:24,070 --> 00:42:28,560
edina oznaka, ki smo jih imeli v
vodja spletne strani?

938
00:42:28,560 --> 00:42:29,740
Malo glasneje.

939
00:42:29,740 --> 00:42:30,799
Samo naslov doslej.

940
00:42:30,799 --> 00:42:32,590
Vendar se izkaže, tam je
nekaj drugih stvari

941
00:42:32,590 --> 00:42:35,840
lahko dajo noter, eno od
ki se imenuje slog tag.

942
00:42:35,840 --> 00:42:37,850
Torej, pred nekaj trenutki smo pogledal
na slog atribut.

943
00:42:37,850 --> 00:42:39,150
Izkazalo se je, da je slog tag.

944
00:42:39,150 --> 00:42:41,200
Spada v notranjosti
vodja spletne strani.

945
00:42:41,200 --> 00:42:42,840
In zdaj opazili, kaj počnem.

946
00:42:42,840 --> 00:42:46,540
Moram znotraj tega
slog tag naslednji.

947
00:42:46,540 --> 00:42:51,190
Jaz sem dobesedno navedbo na liniji 20
ime oznake, da sem želite Stilizovati.

948
00:42:51,190 --> 00:42:53,489
>> Potem imam odprt kodrasti oklepaja
in zaprt kodrasti oklepaja.

949
00:42:53,489 --> 00:42:56,030
Torej podobno kot v duhu C, vendar
Tudi to ni funkcija,

950
00:42:56,030 --> 00:42:57,796
to je samo skladenjsko podrobnosti tukaj.

951
00:42:57,796 --> 00:43:00,170
In potem seveda, sem povedal
brskalnik, hej brskalnik,

952
00:43:00,170 --> 00:43:05,210
da celotno telo stran
imajo poravnavo besedila centra.

953
00:43:05,210 --> 00:43:06,930
In potem je to rekel naslednje.

954
00:43:06,930 --> 00:43:12,600
Hej brskalnik, če vidiš HTML
element ali tag na strani, ki

955
00:43:12,600 --> 00:43:17,040
ima edinstven identifikator vrhu,
tako simbol hash tu pomeni le

956
00:43:17,040 --> 00:43:21,010
edinstvena ideja vrha, gredo naprej
in da je njegova velikost pisave 36

957
00:43:21,010 --> 00:43:22,490
in njegova teža pisavo krepko.

958
00:43:22,490 --> 00:43:26,840
>> Hej brskalnik, element, čigar
ID je srednji, da je 24 pik.

959
00:43:26,840 --> 00:43:31,070
In hej brskalnik, če vidite
Ideja dna, da bi bilo 12 točk.

960
00:43:31,070 --> 00:43:33,540
Učinek na koncu
je popolnoma sam.

961
00:43:33,540 --> 00:43:36,500
Če grem v CSS 1, se
Stran izgleda enako.

962
00:43:36,500 --> 00:43:39,810
Vendar smo korak v smeri
nekoliko boljši dizajn.

963
00:43:39,810 --> 00:43:44,850
Naj zdaj iti nazaj k CSS2
in glej, kaj sem naredil.

964
00:43:44,850 --> 00:43:48,030
>> Sedaj stran je res, res čist.

965
00:43:48,030 --> 00:43:50,730
V bistvu sem lahko fit vse
vsebine na strani tukaj.

966
00:43:50,730 --> 00:43:54,270
Toda kaj novega tag sem
uveden, seveda?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
In to ni najboljše ime za oznako,
ker to ni povezava v tem smislu,

969
00:43:57,853 --> 00:44:00,780
ki jo poznamo, vendar to pomeni,
povezava v kakšni drugi datoteki.

970
00:44:00,780 --> 00:44:02,890
To je nekako kot oster vključujejo v C.

971
00:44:02,890 --> 00:44:06,280
>> To je pot v HTML
reči hej brskalnik

972
00:44:06,280 --> 00:44:10,240
pojdi na vsebino
datoteka imenuje css2.css.

973
00:44:10,240 --> 00:44:12,880
Odnos do mene,
je, da je slog stanja.

974
00:44:12,880 --> 00:44:17,980
In res, da je tisto, kar eden
S je v kaskadnih slogov sredstvi.

975
00:44:17,980 --> 00:44:20,350
To je slog stanja.

976
00:44:20,350 --> 00:44:23,120
To je samo besedilna datoteka, ki vsebuje
cel kup nepremičnin.

977
00:44:23,120 --> 00:44:25,940
To je cel kup stilov
ki jih želite uporabljati na stran.

978
00:44:25,940 --> 00:44:28,860
>> In tako je to očitno je
ki se nanaša na drugi datoteki.

979
00:44:28,860 --> 00:44:32,970
In če odprem, da CSS2.css,
opazili, da vse sem naredil

980
00:44:32,970 --> 00:44:35,900
je kopiraj in prilepi vse
od tega v to datoteko.

981
00:44:35,900 --> 00:44:38,220
In zdaj, tudi če ste nikoli
Pred kodirani te stvari,

982
00:44:38,220 --> 00:44:40,700
pomislimo le z
pregovorno inženiring hat

983
00:44:40,700 --> 00:44:44,220
no, zakaj je to
boljše načrtovanje verjetno?

984
00:44:44,220 --> 00:44:48,910
Faktoring iz te CSS lastnosti,
njihovo dajanje v svojem spisu.

985
00:44:48,910 --> 00:44:51,330
Čeprav smo to rešili
problem kot pet minut nazaj

986
00:44:51,330 --> 00:44:52,600
v zelo prvi različici.

987
00:44:52,600 --> 00:44:55,730
>> Mi smo ne izboljša
Stran slogovno,

988
00:44:55,730 --> 00:44:57,520
to je samo bolje
Oblikovanje v nekem smislu.

989
00:44:57,520 --> 00:44:58,990
Zakaj pa ti misliš?

990
00:44:58,990 --> 00:45:01,510
Ja.

991
00:45:01,510 --> 00:45:02,260
Bolj prilagodljivi, kako?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Ja.

994
00:45:05,540 --> 00:45:07,373
Torej, če želite, da gredo
nazaj in spremeniti stvari,

995
00:45:07,373 --> 00:45:09,540
sedaj imate eno mesto
kjer si lahko stvari spremenimo.

996
00:45:09,540 --> 00:45:11,622
In v resnici, za nekaj
kot problem nastaviti sedem,

997
00:45:11,622 --> 00:45:13,690
kjer bomo izvaja načrt
Stock Trading spletna stran,

998
00:45:13,690 --> 00:45:15,523
da se dogaja, da imajo
cel kup straneh.

999
00:45:15,523 --> 00:45:17,620
In da bi bilo res
nadležno, če se boste odločili, hm,

1000
00:45:17,620 --> 00:45:21,630
Res ne všeč 24 pik, želim
da bi bilo 28 točk ali nekoliko večji.

1001
00:45:21,630 --> 00:45:23,550
In potem še narediti
globalna najti in zamenjati

1002
00:45:23,550 --> 00:45:27,560
ali odpreti vse vaše spletne strani datotek
preprosto, da dejansko spremeniti eno vrednost.

1003
00:45:27,560 --> 00:45:31,290
Z faktoring teh stilov
v enem osrednjem mestu,

1004
00:45:31,290 --> 00:45:34,720
Zdaj lahko odprete eno besedilno datoteko
v CS50IDE v katerem koli programu,

1005
00:45:34,720 --> 00:45:36,479
spremeniti, ga shranite in storiti.

1006
00:45:36,479 --> 00:45:38,270
Vi ste se razmnožujejo s tistimi
Spremembe povsod.

1007
00:45:38,270 --> 00:45:42,450
In da bi bil enak
v dot h datoteki, kot tudi.

1008
00:45:42,450 --> 00:45:46,697
Torej vsa vprašanja tako
daleč na tej sintaksi?

1009
00:45:46,697 --> 00:45:48,530
Vse je v redu, zato smo
storiti vse, kar se zdi

1010
00:45:48,530 --> 00:45:51,170
razen dejansko izvajati hiperpovezave.

1011
00:45:51,170 --> 00:45:52,740
In tako gremo naprej, in to stori.

1012
00:45:52,740 --> 00:45:54,830
Naj gredo naprej in
ustvarite novo datoteko tukaj.

1013
00:45:54,830 --> 00:45:59,970
Jaz grem, da ga pokličete
link.html, dal v današnjem kodo.

1014
00:45:59,970 --> 00:46:03,000
>> In bom naredil odprt
Nosilec tip doc html.

1015
00:46:03,000 --> 00:46:05,970
Naj omenim, da ta stvar na
top, to doc vrsta deklaracije,

1016
00:46:05,970 --> 00:46:08,420
to je edina, ki je čudno
s klicajem.

1017
00:46:08,420 --> 00:46:12,100
Moraš to storiti tam in je
pomeni, da smo s pomočjo različico HTML 5.

1018
00:46:12,100 --> 00:46:14,460
Starejše različice
jezik imeli veliko več

1019
00:46:14,460 --> 00:46:16,400
strune, da ste potrebni, da tam čaka.

1020
00:46:16,400 --> 00:46:18,620
Torej, tukaj je primer imenuje povezava.

1021
00:46:18,620 --> 00:46:20,950
>> Rabim telo moji spletni strani tukaj.

1022
00:46:20,950 --> 00:46:29,770
In v tukaj, a href Ene
recimo HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
in moja najljubša spletna stran, bomo rekli.

1024
00:46:35,420 --> 00:46:38,550
Vse je v redu, tako da je zelo
neškodljive, uporabniku prijazna stran.

1025
00:46:38,550 --> 00:46:42,950
Če bi zdaj šel v mojem imeniku
kotacijo tukaj in odprla link.html,

1026
00:46:42,950 --> 00:46:44,780
imamo hiper besedilo.

1027
00:46:44,780 --> 00:46:47,410
>> In res, to je, če
H v HTTP prihaja.

1028
00:46:47,410 --> 00:46:51,580
Hypertext Transfer Protocol
Gre za prenos besedila

1029
00:46:51,580 --> 00:46:53,840
da ima hiperpovezave do drugih virov.

1030
00:46:53,840 --> 00:46:58,210
In res, tukaj je znano,
če retro, modra povezava, da če kliknili,

1031
00:46:58,210 --> 00:47:02,607
me bo dejansko privede do Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Zdaj pa, oh, da prihaja kmalu.

1033
00:47:03,940 --> 00:47:08,970
Vse je v redu, zdaj, kaj so nekateri
posledic tega?

1034
00:47:08,970 --> 00:47:11,610
>> In odkrito povedano, svet začne
da bi dobili malo bolj seznanjeni

1035
00:47:11,610 --> 00:47:15,090
in tudi malo strašnejši
ampak tudi malo bolj

1036
00:47:15,090 --> 00:47:17,840
sam zagovarjati, ko začnete
razumeti te stvari.

1037
00:47:17,840 --> 00:47:21,610
Ker so možnosti, nekateri od vas, če greste
skozi vaš spam mapo Gmail ali celo

1038
00:47:21,610 --> 00:47:23,990
vaš poštni predal, ste verjetno
dobila nekakšen elektronski pošti

1039
00:47:23,990 --> 00:47:26,980
ki je vas prosi, da spremenite vaš
Geslo morda ali morda preveriti

1040
00:47:26,980 --> 00:47:28,910
poverilnice ali malenkosti PayPal.

1041
00:47:28,910 --> 00:47:34,510
>> In v resnici, ste morda prejeli
nekaj, kar pravi, kot klik tukaj

1042
00:47:34,510 --> 00:47:42,260
za ponastavitev gesla PayPal.

1043
00:47:42,260 --> 00:47:44,130
In zdaj, opazili, če
to ni Disney.com

1044
00:47:44,130 --> 00:47:51,600
ampak kot badplace.com in
osvežite, upoštevajte, da je besedilo tukaj

1045
00:47:51,600 --> 00:47:53,710
Lahko bi rekli ničesar whatsoever.

1046
00:47:53,710 --> 00:47:55,260
In v resnici je to le besede.

1047
00:47:55,260 --> 00:48:04,610
Zakaj ne bom dejansko super zlonamerna
in pravijo http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Kliknite tukaj ponastavite PayPal
geslo in zdaj osvežite.

1049
00:48:14,090 --> 00:48:16,220
To izgleda precej legitimno, kajne?

1050
00:48:16,220 --> 00:48:20,470
Mislim, da ne bom kliknite na
email, ki pravi samo to.

1051
00:48:20,470 --> 00:48:22,450
Ampak obvestilo dihotomijo tukaj.

1052
00:48:22,450 --> 00:48:26,880
Piše www.paypal.com,
in v resnici, počakaj malo,

1053
00:48:26,880 --> 00:48:29,210
vemo, da želite
S za varnost.

1054
00:48:29,210 --> 00:48:35,450
Torej sedaj, pojdite na www.paypal.com HTTPS,
vendar če ste nikoli prej ni počel,

1055
00:48:35,450 --> 00:48:38,182
ne pride v navado
lebdi nad majhne povezav tukaj.

1056
00:48:38,182 --> 00:48:39,890
In to je težko videti
Na zaslonu tam,

1057
00:48:39,890 --> 00:48:41,340
in to še ni vse, da je lažje tukaj.

1058
00:48:41,340 --> 00:48:43,615
Ampak tukaj pot navzdol v
majhen majhen kotiček

1059
00:48:43,615 --> 00:48:45,740
does brskalnik dejansko
vam, da gremo povedati

1060
00:48:45,740 --> 00:48:48,850
da badplace.com namesto PayPal.com.

1061
00:48:48,850 --> 00:48:51,620
Zdaj, kam gremo s tem?

1062
00:48:51,620 --> 00:48:54,859
Vsi primeri, ki smo jih danes storili,
smo težko kodirane in vnesli ročno.

1063
00:48:54,859 --> 00:48:56,900
Splet je neverjetno
nezanimiv, ko vam je težko

1064
00:48:56,900 --> 00:48:59,844
kodo vaše spletne strani, tako da te vsebine
je statična in nikoli ne spreminjajo.

1065
00:48:59,844 --> 00:49:01,760
Seveda so vsi naši
priljubljenih spletnih strani danes

1066
00:49:01,760 --> 00:49:04,470
ali je Gmail ali Twitter ali
Facebook ali poljubno število drugih

1067
00:49:04,470 --> 00:49:05,290
so dinamični.

1068
00:49:05,290 --> 00:49:07,340
Oni spreminja v
odziv na vnos uporabnika

1069
00:49:07,340 --> 00:49:08,840
tako kot v rezultatih iskanja Google.

1070
00:49:08,840 --> 00:49:12,415
>> In tako v sredo, kar počnemo, je
odidemo HTML in uvedbo CSS

1071
00:49:12,415 --> 00:49:14,290
za nami in vzamemo
za samoumevno, da imamo zdaj

1072
00:49:14,290 --> 00:49:16,640
poznate in uvajamo
nov programski jezik

1073
00:49:16,640 --> 00:49:19,050
imenuje PHP, ki je všeč
C, se dogaja, da se nam

1074
00:49:19,050 --> 00:49:22,450
moč dejansko ustvarjanje programov
da sami ustvarjajo izhod.

1075
00:49:22,450 --> 00:49:25,900
V tem primeru bomo uporabljali
PHP ustvariti dinamično spletu

1076
00:49:25,900 --> 00:49:27,340
Strani, ki uporabljajo ta nov jezik.

1077
00:49:27,340 --> 00:49:28,989
Torej, več o tem v sredo.

1078
00:49:28,989 --> 00:49:29,530
Se vidimo potem.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [Predvaja glasba]

1081
00:49:37,380 --> 00:52:38,864