1
00:00:00,000 --> 00:00:03,486
>> [Zenelejátszási]

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

3
00:00:10,460 --> 00:00:14,250
>> DAVID J MALAN: Ez CS50 és
ez az a hét elején 7.

4
00:00:14,250 --> 00:00:15,060
Szóval szívesen vissza.

5
00:00:15,060 --> 00:00:17,540
És bizonyára emlékeznek rá, hogy
A probléma az alábbi négy,

6
00:00:17,540 --> 00:00:21,510
volt egy kicsit csillagvadászatban
néhány mesés nyereményeket, amelyben

7
00:00:21,510 --> 00:00:24,219
Miután visszaszerezze a kép
személyzet itt és New Haven,

8
00:00:24,219 --> 00:00:27,468
Ön támadták találni, mint sok
azok a számítógépes szakemberek, amit lehetett.

9
00:00:27,468 --> 00:00:29,550
És mi van egy egész
csomó beadványok.

10
00:00:29,550 --> 00:00:31,930
Gondoltam megosztani néhány
A ma itt.

11
00:00:31,930 --> 00:00:35,100
>> És feltesszük az összes ilyen online.

12
00:00:35,100 --> 00:00:39,310
De különösen akartam
felhívni a figyelmet az alábbiakra: jól egy,

13
00:00:39,310 --> 00:00:42,670
Sam volt jó néhány közülük
általában pózol, mint ez.

14
00:00:42,670 --> 00:00:45,750
De úgy tűnik, hogy, mint a
Ma reggel, a győztes

15
00:00:45,750 --> 00:00:51,170
volt egy bizonyos valakit, akit Ken együtt
24. a személyzet lencsevégre

16
00:00:51,170 --> 00:00:54,600
vagy még néhány ha figyelembe
fiók több személyzet a képeket.

17
00:00:54,600 --> 00:00:58,300
A képen van Ken következő
Mary New Havenben.

18
00:00:58,300 --> 00:01:01,300
>> Most, Ken, bár, fordul
ki van kicsit a sarokban ügyben

19
00:01:01,300 --> 00:01:02,880
ami még nem történt meg.

20
00:01:02,880 --> 00:01:05,713
Kiderül, hogy nem fordulhat elő,
nekem, hogy apró betűs részt probléma

21
00:01:05,713 --> 00:01:09,710
az alábbi négy, amely azt mondja, hogy a személyzet
nem jogosult a mesés nyeremények

22
00:01:09,710 --> 00:01:13,130
mert Ken, persze, az egyik
A fotósok a munkatársaink.

23
00:01:13,130 --> 00:01:16,820
Most, hogy azt mondta, ő
Eredetileg írta, hogy azt mondjam

24
00:01:16,820 --> 00:01:19,180
Kérjük, ne írjon ezeket a képeket az interneten.

25
00:01:19,180 --> 00:01:21,630
Azt hiszem, nagy részben
mert a legtöbb fénykép

26
00:01:21,630 --> 00:01:24,499
hogy ez a fotós vette nézd
egy kicsit valami ilyesmi.

27
00:01:24,499 --> 00:01:25,040
És a hasonlók.

28
00:01:25,040 --> 00:01:28,990
>> De Ken szeretné, ha megnyugtatni,
hogy ő egy nagyon jó fotós,

29
00:01:28,990 --> 00:01:33,190
ő egy profi, ő veszi
fényképeket, amelyek nem homályos,

30
00:01:33,190 --> 00:01:37,270
amelyek jobban a középpontban, és ő
vett jó néhány saját munkatársaink.

31
00:01:37,270 --> 00:01:40,370
De ahelyett, hogy csak elismerni
Ken, mi azt hittük volna csinálni

32
00:01:40,370 --> 00:01:43,390
A végig a listát
aktuális diákok, akik benyújtották.

33
00:01:43,390 --> 00:01:48,640
És kiderül, hogy Lance az
15 fotó a ma reggel

34
00:01:48,640 --> 00:01:50,030
volt a győztes.

35
00:01:50,030 --> 00:01:55,730
>> És a képen itt van Lance az Colton,
A Skaz, önmagammal, és Sam.

36
00:01:55,730 --> 00:02:00,230
De aztán kiderül, hogy mivel a
11:46, így csak egy kicsit ezelőtt,

37
00:02:00,230 --> 00:02:04,380
Visszamentem az email, és megállapította,
hogy mi volt számára egy újabb benyújtása

38
00:02:04,380 --> 00:02:08,300
egy diák nevezett Bonnie
akinek az e-mail mondta, csak ezt.

39
00:02:08,300 --> 00:02:10,800
Nem fogok hazudni, én vagyok
Ezzel az órákon.

40
00:02:10,800 --> 00:02:17,620
És ezután csatolni, csak
14 fotó, egy szégyenlős Lance 15.

41
00:02:17,620 --> 00:02:22,690
>> De Bonnie fotók, kiderül
ki volt több tagból áll, Sam

42
00:02:22,690 --> 00:02:25,960
köztük, akkor mi azt hittük
tenne az elismerik mindkét.

43
00:02:25,960 --> 00:02:29,240
Így amellett, hogy egyre a Dropbox
helyet, hogy mindenki, aki részt vett

44
00:02:29,240 --> 00:02:33,900
kap, ezek a két szakasz is
kap egy szép kiszolgálta ebéd számukra

45
00:02:33,900 --> 00:02:36,100
és a rész
Mates a jövő héten.

46
00:02:36,100 --> 00:02:38,970
És így fog hallani tőlünk,
Lance és Bonnie, erről.

47
00:02:38,970 --> 00:02:40,002
Szóval nagy gratula nekik.

48
00:02:40,002 --> 00:02:42,210
Most, azoknak, akik
mint az ebéd általánosabban

49
00:02:42,210 --> 00:02:45,320
tudjuk, hogy CS50 ebéd Cambridge
és New Haven van ezen a pénteken.

50
00:02:45,320 --> 00:02:48,510
Tovább a CS50 honlapján perjel RSVP.

51
00:02:48,510 --> 00:02:49,800
És most egy szót szemináriumok.

52
00:02:49,800 --> 00:02:50,730
Több curricularly.

53
00:02:50,730 --> 00:02:52,490
Szóval közeledik a
pont a félév

54
00:02:52,490 --> 00:02:55,200
ahol meg kell kezdeni
gondolkodni végleges projekteket.

55
00:02:55,200 --> 00:02:59,309
És valóban, csak egy kicsit, majd
az úgynevezett pre javaslatokat az oka.

56
00:02:59,309 --> 00:03:01,850
Tehát előre javaslatok célja, hogy
elég alacsony hatást, és tényleg

57
00:03:01,850 --> 00:03:04,109
Csak egy lehetőség
írhat egy rövid üzenetet

58
00:03:04,109 --> 00:03:06,900
A tanítási fickó számára, hogy megismerje
neki, mit gondolsz te

59
00:03:06,900 --> 00:03:09,140
érdemes csinálni a végleges projekt.

60
00:03:09,140 --> 00:03:11,730
>> Most, sok diák a végén
Ennek webes végleges projekteket.

61
00:03:11,730 --> 00:03:13,800
És persze, mi csak
Most a múlt héten ebben a

62
00:03:13,800 --> 00:03:15,890
és azon túl búvárkodás a webes programozás.

63
00:03:15,890 --> 00:03:18,200
Szóval nem kell aggódni, ha
Fogalmam sincs, hogyan

64
00:03:18,200 --> 00:03:21,594
akkor építeni az ötleteket, hogy
lehet, hogy a fejedben.

65
00:03:21,594 --> 00:03:24,510
Ez tényleg csak egy kényszerítve funkció
hogy gondolsz, és beszél

66
00:03:24,510 --> 00:03:25,650
Ön TF róla.

67
00:03:25,650 --> 00:03:28,810
De, hogy segítsek, és
A végleges projekt végső soron,

68
00:03:28,810 --> 00:03:31,750
tudjuk, hogy CS50 hagyománya
A felajánlás szemináriumok.

69
00:03:31,750 --> 00:03:36,084
>> És ezek nem kötelező, kezét,
vagy előadás alapján lehetőségek

70
00:03:36,084 --> 00:03:39,000
hogy többet tudjon témák, amelyeket
Egy kis kiegészítő a tanfolyam

71
00:03:39,000 --> 00:03:43,310
tananyag, de mégis csodálatos
anyag vezetni végleges projekteket.

72
00:03:43,310 --> 00:03:46,840
És így ez a lista, amelyet
CS50 személyzet itt New Havenben

73
00:03:46,840 --> 00:03:48,600
jöttek fel a
ebben az évben mintegy iOS

74
00:03:48,600 --> 00:03:50,730
programozás, Android
programozás, játékfejlesztés,

75
00:03:50,730 --> 00:03:54,480
és csokor több eszközt
és a nyelvek és technikák.

76
00:03:54,480 --> 00:03:56,780
>> Szóval szemmel tartani a CS50 honlapján.

77
00:03:56,780 --> 00:04:00,110
És addig, ha azt szeretné, hogy
Kérjük, válasszon ezek közül bármelyik,

78
00:04:00,110 --> 00:04:02,510
menj CS50 a perjel nyilvántartásban.

79
00:04:02,510 --> 00:04:05,770
És akkor majd nyomon követni, hogy a
nap és a repülési idők és helyszínek

80
00:04:05,770 --> 00:04:09,090
és everything-- legtöbb mindent fog
közvetíteni és is rendelkezésre áll igény

81
00:04:09,090 --> 00:04:11,750
után, ha nem tudja valójában, hogy azt.

82
00:04:11,750 --> 00:04:15,800
Tehát minden további nélkül, akkor
abbahagyta utoljára a GET.

83
00:04:15,800 --> 00:04:19,610
>> És ez olyan volt, mint az üzenet, hogy volt
belsejében a virtuális borítékot, emlékszem,

84
00:04:19,610 --> 00:04:23,960
hogy telt a router a router
router között egy webböngésző és a web

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

86
00:04:24,487 --> 00:04:26,695
És hogy nézett ki egy üzenetet
kicsit valami ilyesmi.

87
00:04:26,695 --> 00:04:29,700
Ez azért is volt misztikus üzenet
valójában belsejében egy borítékot

88
00:04:29,700 --> 00:04:34,440
írva egy darab papírra, amelynek
első sorban azt mondja szó, hogy perjel.

89
00:04:34,440 --> 00:04:37,830
>> És ahogy a józan ész csekk,
mit perjel jelöli?

90
00:04:37,830 --> 00:04:40,455
Mit jelent az, ha perjel
kérve a honlap?

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

92
00:04:43,070 --> 00:04:44,250
Ön kérheti, hogy minden alkalommal.

93
00:04:44,250 --> 00:04:47,333
A legtöbb bármikor meglátogat egy honlapot, akkor
Nem kell begépelnie a fájl nevét.

94
00:04:47,333 --> 00:04:50,960
Valószínűleg csak megy a Facebook.com,
lép, gmail.com, vagy hasonlók.

95
00:04:50,960 --> 00:04:52,260
És mit jelent perjel képviselnek?

96
00:04:52,260 --> 00:04:53,506
Milyen fájl?

97
00:04:53,506 --> 00:04:54,630
Vagy mi az oldal, konkrétan?

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

99
00:04:59,642 --> 00:05:00,720
>> Az index, igen.

100
00:05:00,720 --> 00:05:01,810
Tehát az alapértelmezett oldalt.

101
00:05:01,810 --> 00:05:04,810
Tehát, ha nem adja meg a fájl
Íme a kezdjük látni,

102
00:05:04,810 --> 00:05:07,750
te tényleg csak megkereső
adj alapértelmezett oldala Facebook

103
00:05:07,750 --> 00:05:10,800
vagy adj a postaládájába, vagy adjon
nekem alapértelmezett oldala hírek

104
00:05:10,800 --> 00:05:12,510
A CNN honlapján, vagy hasonlók.

105
00:05:12,510 --> 00:05:15,220
És a szerveren, majd válaszol a
azt az üzenetet valami

106
00:05:15,220 --> 00:05:18,420
mint ez, azt mondja igen, én
beszélnek HTTP 1.1-es verziója.

107
00:05:18,420 --> 00:05:21,130
>> 200, amely egy állapot
kód, amit az emberek ritkán

108
00:05:21,130 --> 00:05:22,790
valaha is látni, mert ez jó.

109
00:05:22,790 --> 00:05:26,640
Mert ez azt jelenti, OK, a kérelem
érkezett, és megfelelően kezelik.

110
00:05:26,640 --> 00:05:28,960
És a tartalom típusa
nyilván a választ

111
00:05:28,960 --> 00:05:31,170
elég gyakran, de nem mindig, a szöveget.

112
00:05:31,170 --> 00:05:32,580
És konkrétan, HTML.

113
00:05:32,580 --> 00:05:34,760
És ez valóban
ahol megnézzük ma.

114
00:05:34,760 --> 00:05:37,140
>> Tehát valójában, én megyek
előre, és nyissa meg a böngészőben.

115
00:05:37,140 --> 00:05:40,410
Megyek a Chrome, akkor
a legtöbb olyan böngésző elkövetkező hetekben.

116
00:05:40,410 --> 00:05:42,410
Általában azt javasoljuk, Chrome
mert ez különösen

117
00:05:42,410 --> 00:05:43,750
jó a szoftverfejlesztők számára.

118
00:05:43,750 --> 00:05:46,070
Van rajta egy csomó beépített
eszközöket, amelyek megkönnyítik

119
00:05:46,070 --> 00:05:49,800
fejlesztése nem csak a HTML és CSS,
dolgokat fogunk kezdeni beszélni ma,

120
00:05:49,800 --> 00:05:51,530
hanem más nyelveken is.

121
00:05:51,530 --> 00:05:55,530
>> És én megyek előre, és menjen az alábbiakra:
Megyek ellenőrzése kattintson jobb vagy

122
00:05:55,530 --> 00:05:57,210
kattintson bárhol a weblapon.

123
00:05:57,210 --> 00:05:59,070
És fogok menni Elem vizsgálata.

124
00:05:59,070 --> 00:06:03,850
És fogok alakítom a
képernyőn csak egy kicsit itt.

125
00:06:03,850 --> 00:06:05,790
Hadd mozgatni ezt az aljára.

126
00:06:05,790 --> 00:06:08,140
Szóval ez az, amit a neve
Chrome felügyelő.

127
00:06:08,140 --> 00:06:11,010
Tehát ez olyan, mint egy hibakereső
eszköz beépített Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Minden már van ez a
ha már a Chrome.

129
00:06:13,520 --> 00:06:17,169
És ez lehetővé teszi, hogy mi folyik
A a motorháztető alatt néhány weboldalt.

130
00:06:17,169 --> 00:06:19,210
Úgyhogy valóban megteszi a
nézd meg ezt a következőképpen.

131
00:06:19,210 --> 00:06:21,251
Ez így több jellemzői
és mi érdekel ma.

132
00:06:21,251 --> 00:06:22,760
De van ezeket a lapokat ide.

133
00:06:22,760 --> 00:06:25,890
Elemek, hálózat, források,
idővonal, és egyéb dolgok.

134
00:06:25,890 --> 00:06:27,800
Megyek kattintson
Hálózat egy pillanatra.

135
00:06:27,800 --> 00:06:30,500
>> És ez egy kicsit nyomasztó
első pillantásra itt.

136
00:06:30,500 --> 00:06:34,190
De mit fogok csinálni, hogy hagyjuk
nekem egyszerűsíteni, hogy egy kicsit.

137
00:06:34,190 --> 00:06:37,560
Megyek, hogy bekapcsolja a
felvétel világos, hogy ez a piros.

138
00:06:37,560 --> 00:06:39,140
És fogok mondani megőrzése napló.

139
00:06:39,140 --> 00:06:41,015
És ez csak egy kicsit
dolog, amit kitaláltam

140
00:06:41,015 --> 00:06:44,120
idővel ez fog menteni
minden, ami történik a böngészőben.

141
00:06:44,120 --> 00:06:50,030
És most megyek
hogy http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Igazából, csináljuk www
a jó intézkedés, perjel.

143
00:06:52,690 --> 00:06:53,643
Belép.

144
00:06:53,643 --> 00:06:56,180
Tehát egy URL, hogy sok
lehet, hogy meglátogatott.

145
00:06:56,180 --> 00:06:58,830
És most a Facebook internetes
oldal jön fel a tetején.

146
00:06:58,830 --> 00:07:02,350
És akkor egy csomó
cucc repült alján.

147
00:07:02,350 --> 00:07:04,830
És valóban, kiderül, hogy
amikor meglátogatja Facebook.com,

148
00:07:04,830 --> 00:07:09,320
akkor nem csak, hogy egy HTTP kérés,
kiderül, hogy fog Facebook.com

149
00:07:09,320 --> 00:07:14,320
küld 41 ilyen boríték,
mindegyik saját GET kérés,

150
00:07:14,320 --> 00:07:18,360
jelzett, bár a paraván mögött
itt, a képernyő alján,

151
00:07:18,360 --> 00:07:24,040
ez azt jelzi, hogy valóban, az én
böngésző készült 41 a kéréseket.

152
00:07:24,040 --> 00:07:29,689
>> És összesen, azt át 861
kilobájt, és vett valamilyen okból

153
00:07:29,689 --> 00:07:31,730
több mint nyolc másodperc
Töltse le az egésznek.

154
00:07:31,730 --> 00:07:33,790
Szóval ez tényleg egy kicsit fura
hogy a Facebook oldalára venné, hogy

155
00:07:33,790 --> 00:07:35,600
Hosszú, de ám legyen ebben az esetben.

156
00:07:35,600 --> 00:07:39,520
Most, mindez nem igazán érdekel
mintegy kivéve a legfelső kérést.

157
00:07:39,520 --> 00:07:46,440
Szóval menjünk ez itt
és hadd kicsinyítés csak egy pillanatra.

158
00:07:46,440 --> 00:07:47,754
>> És hadd ráközelít ezt.

159
00:07:47,754 --> 00:07:50,670
Tehát amit én kelt maradt annak ellenére,
van egy csomó folyik ott

160
00:07:50,670 --> 00:07:53,360
A amit kiemelt
Facebook.com majd

161
00:07:53,360 --> 00:07:56,540
észre, hogy én vagyok gördülnek le,
gördülnek le, lefelé görgetve,

162
00:07:56,540 --> 00:07:58,330
kérni fejlécet.

163
00:07:58,330 --> 00:08:01,720
És látni fogod, hogy a Chrome mutat
nekem alapvetően a belső tartalmát

164
00:08:01,720 --> 00:08:02,810
A kérelem tettem.

165
00:08:02,810 --> 00:08:06,130
Ez nem a formázás egy kicsit más
módon, de észre ott említést kap,

166
00:08:06,130 --> 00:08:09,481
észre van említés a házigazda,
Facebook.com, az út, vagy perjel,

167
00:08:09,481 --> 00:08:10,730
amely a fájl kértem.

168
00:08:10,730 --> 00:08:12,930
>> És akkor, ha görgetni
másolatot készíteni, akkor a ténylegesen

169
00:08:12,930 --> 00:08:17,270
látjuk, hogy mit Facebook visszatért
Nekem van az összes ilyen fejléceket.

170
00:08:17,270 --> 00:08:21,040
Így aztán az a virtuális borítékban
Valóban sok a legfontosabb érték párokat.

171
00:08:21,040 --> 00:08:23,130
Egy szó, egy kettőspont, majd egy érték.

172
00:08:23,130 --> 00:08:25,050
Egy szó, egy kettőspont, és értéke.

173
00:08:25,050 --> 00:08:26,160
Ezek az úgynevezett fejlécek.

174
00:08:26,160 --> 00:08:31,860
És van módja részletesebben itt, mint
mi tényleg érdekel most.

175
00:08:31,860 --> 00:08:33,750
>> De ez a második, hogy
utolsó odalent,

176
00:08:33,750 --> 00:08:38,809
észre, hogy a Facebook.com szerverén,
Valóban azt mondta itt jön néhány szöveget HTML.

177
00:08:38,809 --> 00:08:41,409
Szóval ez az egész, hogy azt mondják,
hogy ha Ön olyan web

178
00:08:41,409 --> 00:08:44,300
oldalt egy böngésző egy
szerver, hogy szerver válaszol

179
00:08:44,300 --> 00:08:47,630
egy borítékot saját
belsejében, amely szöveget.

180
00:08:47,630 --> 00:08:49,020
Más szavakkal, a HTML.

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

182
00:08:50,590 --> 00:08:53,200
Amely egy másik nyelvet
hogy be ma

183
00:08:53,200 --> 00:08:57,740
hogy az ember vagy számítógép generál
végrehajtása érdekében weboldalakat.

184
00:08:57,740 --> 00:08:59,580
>> Pontosabban, nézzük meg ezt.

185
00:08:59,580 --> 00:09:03,277
Megyek most menj vissza
a Facebook honlapján.

186
00:09:03,277 --> 00:09:05,360
És fogok csak
kontroll kattintással, vagy jobb klikk

187
00:09:05,360 --> 00:09:07,634
és kattintson Oldal forrásának megtekintése.

188
00:09:07,634 --> 00:09:10,550
És akkor is, ha nem használja Chrome,
IE képes erre, a Firefox képes erre,

189
00:09:10,550 --> 00:09:14,060
Safari képes erre, bár a menü
lehetőségek tűnhet egy kicsit más.

190
00:09:14,060 --> 00:09:18,990
És ez az a HTML, hogy Mark és
cég Facebook írtak.

191
00:09:18,990 --> 00:09:24,640
>> És hogy közösen, ezen a nyelven itt
végrehajtja a kék és a fehér oldal

192
00:09:24,640 --> 00:09:26,370
hogy láttunk egy perce.

193
00:09:26,370 --> 00:09:28,030
Nos, ez egy kicsit nyomasztó.

194
00:09:28,030 --> 00:09:31,400
De ha megnézzük akár a bal felső sarokban, mi vagyunk
fog kezdeni, hogy néhány mintát.

195
00:09:31,400 --> 00:09:34,140
Úgy néz ki, van egy csomó
Ezen nyitott hegyes zárójel

196
00:09:34,140 --> 00:09:35,970
és akkor ott van ez a kulcsszó HTML.

197
00:09:35,970 --> 00:09:38,330
Itt egy újabb nyílt
hegyes zárójel és a fej.

198
00:09:38,330 --> 00:09:41,560
>> Itt van, ha lépjünk le
és le-le, én vagyok

199
00:09:41,560 --> 00:09:43,820
fog menni előre, és próbálja
keresni valamit.

200
00:09:43,820 --> 00:09:48,510
Ott úton át a jobb
Itt tart nyitva tartó szervezet.

201
00:09:48,510 --> 00:09:50,800
És emlékszem a múlt
Ideje tehát javasolt

202
00:09:50,800 --> 00:09:53,364
hogy a legegyszerűbb weboldal
hogy az emberi írhatna

203
00:09:53,364 --> 00:09:55,030
Lehet nézni egy kicsit valami ilyesmi.

204
00:09:55,030 --> 00:09:58,430
Nyitott HTML tag, nyitott vezetője
tag, nyitott címben tag,

205
00:09:58,430 --> 00:10:03,230
majd zárt címet, zárt fej, nyitott
body tag, szöveget, zárt karosszéria,

206
00:10:03,230 --> 00:10:04,720
zárt HTML.

207
00:10:04,720 --> 00:10:06,290
>> De egy kis szünet van csak egy pillanatra.

208
00:10:06,290 --> 00:10:09,030
Ez a kód, akkor is, ha már
soha nem írt előtt

209
00:10:09,030 --> 00:10:11,864
de még mindig nem egészen értem
mi folyik itt, jól néz ki.

210
00:10:11,864 --> 00:10:12,821
Jobb, nagyon tiszta.

211
00:10:12,821 --> 00:10:14,120
Ez nagyon stilisztikailag szép.

212
00:10:14,120 --> 00:10:16,190
Sok behúzás és a fehér térben.

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

214
00:10:18,020 --> 00:10:23,190
Akkor miért van olyan sok Facebook
Rosszabb, mint a HTML-t?

215
00:10:23,190 --> 00:10:24,310
Úgy látszik.

216
00:10:24,310 --> 00:10:26,899
>> Jobb ez, mint egy
Ötből stílusban.

217
00:10:26,899 --> 00:10:29,315
Van egy kényszerítő ok
számukra, hogy csökkentsék ezeket a sarkokat.

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

219
00:10:31,069 --> 00:10:33,860
Rendben, így nem akar
megkönnyíti az Ön számára, hogy elolvassa.

220
00:10:33,860 --> 00:10:36,940
Tehát bizonyos értelemben, ők
obfuscating ez, valami kézzel-lábbal, hogy

221
00:10:36,940 --> 00:10:40,260
legalább esztétikailag így
hogy nehezebb a Myspace

222
00:10:40,260 --> 00:10:42,705
hogy menjen, és letépik a
honlapon és a HTML érte.

223
00:10:42,705 --> 00:10:45,080
Kiderül, hogy a programok
bár, beleértve a Chrome,

224
00:10:45,080 --> 00:10:47,020
mi is tiszta ez akár szuper könnyen.

225
00:10:47,020 --> 00:10:49,420
Tehát nem elég, hogy lehet az oka.

226
00:10:49,420 --> 00:10:51,290
Mi más lehet az oka.

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

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

229
00:10:54,680 --> 00:10:55,890
Ja, fehér térben költségek adatokat.

230
00:10:55,890 --> 00:10:56,598
Mire gondolsz?

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

232
00:11:02,250 --> 00:11:02,979
Igen, pontosan.

233
00:11:02,979 --> 00:11:06,020
Ha bejön a Tab gombot sokat vagy a
szóköz, fontolja meg a következményeit.

234
00:11:06,020 --> 00:11:10,060
Szóval minden gombot a billentyűzeten egy
[Hallhatatlan] képviseletében a egy bájt.

235
00:11:10,060 --> 00:11:14,560
>> Tehát tegyük fel, hogy Mark vagy a fejlesztőknek
Ezekben a napokban eléri a szóközt csak egyszer

236
00:11:14,560 --> 00:11:17,899
ebben a HTML oldalt
képviseli Facebook honlapján.

237
00:11:17,899 --> 00:11:19,690
És a Facebook már sok
A felhasználók manapság.

238
00:11:19,690 --> 00:11:24,030
Tehát tegyük fel, hogy a Facebook honlapján
látogatja egymilliárd ember ma.

239
00:11:24,030 --> 00:11:27,020
És valaki a Facebook
nyomja meg a szóköz csak egyszer.

240
00:11:27,020 --> 00:11:29,890
>> Tehát egy további byte,
Egy milliárd kéri,

241
00:11:29,890 --> 00:11:32,790
mennyivel több adat áll Facebook
átadó az interneten

242
00:11:32,790 --> 00:11:37,160
mert valaki megüt a
szóközt az ő billentyűzet?

243
00:11:37,160 --> 00:11:41,660
Egy milliárd byte, vagy egy gigabájt
adatokat küld a Facebook szerverek

244
00:11:41,660 --> 00:11:43,626
hogy az emberek szerte a
világ minden ok nélkül.

245
00:11:43,626 --> 00:11:44,750
Most, hogy ez csak egy helyet.

246
00:11:44,750 --> 00:11:48,866
>> Képzeld el, ha valóban tiszta ez
dolgot, és beljebb, és hozzátette

247
00:11:48,866 --> 00:11:50,990
sok fehér térben és
A tab karaktereket és terek,

248
00:11:50,990 --> 00:11:53,656
akkor a végén kiadások gigabájt,
ha nem terra karakter van még hely.

249
00:11:53,656 --> 00:11:56,640
És így szuper gyakori az
tényleges világa webfejlesztés

250
00:11:56,640 --> 00:11:58,950
hogy minify a kódot.

251
00:11:58,950 --> 00:12:01,280
És akkor végül látni
hogyan teheti ezt.

252
00:12:01,280 --> 00:12:04,630
>> De ma, elkezdünk írni kódot
Ez tulajdonképpen által olvasható nálunk, embereknél.

253
00:12:04,630 --> 00:12:10,120
Kiderül azonban, ha megy vissza
hogy ezt az eszközt a Chrome Elem vizsgálata,

254
00:12:10,120 --> 00:12:12,030
Korábban voltunk a Hálózat fülön.

255
00:12:12,030 --> 00:12:15,430
Kiderül, hogy ha megy a
elemek lapon, amit valóban látni

256
00:12:15,430 --> 00:12:19,230
A Chrome elég nyomtatott
változata, amely ugyanazt a HTML.

257
00:12:19,230 --> 00:12:20,640
Így már deobfuscated meg.

258
00:12:20,640 --> 00:12:22,472
Szóval ez nem illik a számítógéphez.

259
00:12:22,472 --> 00:12:24,430
És most már tényleg
kattintson körül, és indítsa

260
00:12:24,430 --> 00:12:27,630
hogy a hierarchia, amely egy internetes oldalon.

261
00:12:27,630 --> 00:12:28,780
Szóval valójában ezt.

262
00:12:28,780 --> 00:12:32,120
Én megyek előre, és nyissa fel
én Mac nevű program szöveget szerkeszteni.

263
00:12:32,120 --> 00:12:35,490
És emlékszem, hogy ez csak
Egy szuper egyszerű szöveges programot.

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

265
00:12:37,490 --> 00:12:39,820
És fogok Verbatim
írja be a következő.

266
00:12:39,820 --> 00:12:44,650
Doc típusú HTML, nyitó zárójel
HTML, zárt konzol HTML,

267
00:12:44,650 --> 00:12:49,000
mi van a feje az oldal itt,
a végén a feje az oldal itt,

268
00:12:49,000 --> 00:12:52,310
cím lesz, mint, hello world.

269
00:12:52,310 --> 00:12:56,660
>> És akkor itt lent van szükségünk
A test a weboldalt.

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

271
00:12:58,050 --> 00:13:00,700
És akkor itt, hello world.

272
00:13:00,700 --> 00:13:01,270
Minden rendben.

273
00:13:01,270 --> 00:13:03,350
Így már írt egy szuper gyors internetes oldalon.

274
00:13:03,350 --> 00:13:06,675
Megyek mentse el
hello.html az asztalon.

275
00:13:06,675 --> 00:13:09,050
My Mac megy panaszkodni,
arra gondoltam, hogy, várj egy percet,

276
00:13:09,050 --> 00:13:11,091
ez egy szöveges fájl, do
szeretné nevezni .txt?

277
00:13:11,091 --> 00:13:13,300
De nem, szeretném használni dot HTML.

278
00:13:13,300 --> 00:13:16,140
>> És akkor mi van, ha én szép
csak dupla kattintás ezt a fájlt,

279
00:13:16,140 --> 00:13:18,600
hello.html, itt az én weboldalt.

280
00:13:18,600 --> 00:13:22,564
Sajnos, én vagyok a
egyetlen ember a világon

281
00:13:22,564 --> 00:13:23,980
aki erre az oldalra most.

282
00:13:23,980 --> 00:13:26,734
Mert hol ér élnek látszólag?

283
00:13:26,734 --> 00:13:27,650
Ez az én Mac, ugye?

284
00:13:27,650 --> 00:13:28,470
Ami haszontalan.

285
00:13:28,470 --> 00:13:30,390
Mint senki ebben a szobában
nem beszélve az interneten

286
00:13:30,390 --> 00:13:31,598
ténylegesen látogasson oldalon.

287
00:13:31,598 --> 00:13:33,820
Tehát ma, meg kell
be egy másik elem.

288
00:13:33,820 --> 00:13:36,720
>> És hogy ezt, megyek
megy előre, és nyissa meg a Cloud 9.

289
00:13:36,720 --> 00:13:40,090
Tehát Cloud 9 természetesen egy
felhő alapú service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE--, amely az összes a munkaterületek
futó valahol az interneten.

291
00:13:44,890 --> 00:13:48,330
És ez azt jelenti, hogy minden kedves fájlok
a nyilvánosan hozzáférhető már.

292
00:13:48,330 --> 00:13:49,830
Szóval menjünk előre, és erre.

293
00:13:49,830 --> 00:13:53,670
Megyek megy előre, és
hozzon létre egy új fájlt NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Megyek, hogy mentse meg, mint korábban
mint hello.html és a Mentés gombra.

295
00:13:58,819 --> 00:14:01,860
És most csak időt takarít meg, megyek
hogy menjen előre, és másolja be ezt a kódot

296
00:14:01,860 --> 00:14:03,470
ahelyett, írja be ismét.

297
00:14:03,470 --> 00:14:04,550
És mentsd el.

298
00:14:04,550 --> 00:14:07,550
És így most van egy
nevű fájlt hello.html.

299
00:14:07,550 --> 00:14:09,710
De hogyan Igazából
nyissa meg a weboldalt?

300
00:14:09,710 --> 00:14:14,120
Nos, kiderült, hogy a beépített hogy CS50
IDE nem csak egy fordítóprogram, mint csengés

301
00:14:14,120 --> 00:14:16,670
és egy hibakereső, mint a GDB és
csokor más programok,

302
00:14:16,670 --> 00:14:21,140
van valójában egy teljes értékű
webszerver fut belül CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Minden van, vagyis,
Van saját webszerver.

304
00:14:23,900 --> 00:14:26,850
A webszerver és csak egy darab
A szoftver, aminek a célja az életben

305
00:14:26,850 --> 00:14:28,220
az, hogy szolgálja a weboldalak.

306
00:14:28,220 --> 00:14:32,490
Ahhoz érkező kéréseket böngészők és
válaszolnak kis virtuális borítékok

307
00:14:32,490 --> 00:14:35,290
amelynek belsejében van a
tartalommal, hogy én írtam.

308
00:14:35,290 --> 00:14:38,372
Tehát ez a webszerver
valóban szabad és nyílt forráskódú.

309
00:14:38,372 --> 00:14:40,830
Ahol a nyílt forráskódú csak azt jelenti,
szoftverek hogy valaki másnak

310
00:14:40,830 --> 00:14:43,480
írva, hogy mindannyian
valóban látni és letölteni, és még

311
00:14:43,480 --> 00:14:44,780
megváltoztatni a forráskódot.

312
00:14:44,780 --> 00:14:46,150
És ezt hívják az Apache.

313
00:14:46,150 --> 00:14:51,450
>> És tettük egy kicsit könnyebb
Használja a CS50IDE hívja meg az Apache 50.

314
00:14:51,450 --> 00:14:53,780
Úgy, hogy a ténylegesen
megérteni a következőket.

315
00:14:53,780 --> 00:14:56,560
Azt fogom mondani az Apache 50 kezd.

316
00:14:56,560 --> 00:14:58,910
És akkor én csak fog mondani dot.

317
00:14:58,910 --> 00:15:01,080
És látunk néhány valamelyest
misztikus üzenetet,

318
00:15:01,080 --> 00:15:04,640
beállítás Apache dokumentum [? csoport?]
hogy otthon, ubuntu, bármi is legyen az,

319
00:15:04,640 --> 00:15:05,770
perjel munkaterület.

320
00:15:05,770 --> 00:15:08,280
Kezdve webszerver
Az Apache 2 sikeresen.

321
00:15:08,280 --> 00:15:11,330
>> Tehát hosszú történet rövid, én
most megnyomott egy gombot,

322
00:15:11,330 --> 00:15:18,000
és be van kapcsolva a webszerver aki most
hallgatta az interneten TCP porton

323
00:15:18,000 --> 00:15:20,587
80, egy speciális címre.

324
00:15:20,587 --> 00:15:22,420
És itt azt mondja, és
ez meg fog változni alapú

325
00:15:22,420 --> 00:15:26,550
a felhasználóneve és egyéb tényezők,
de észre most, ha rákattint erre,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard és így és
igen, észre, hogy ennyi idő

327
00:15:30,211 --> 00:15:31,960
az elmúlt néhány
hét, lehet, hogy

328
00:15:31,960 --> 00:15:35,200
Észrevettem, hogy a saját nevedre
van ágyazva a jobb felső

329
00:15:35,200 --> 00:15:37,130
sarkában CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> És hogy valóban volt mindez
időzíteni a címet, amelyen csak tudsz

331
00:15:41,050 --> 00:15:43,574
látogasson el az összes fájl az interneten keresztül.

332
00:15:43,574 --> 00:15:45,990
Eddig még nem számított,
mert C-ben, általában

333
00:15:45,990 --> 00:15:48,073
szeretné a dolgokat futó
terminál, nem az interneten.

334
00:15:48,073 --> 00:15:50,800
De ma, kezdjük
írásban webes alapú kód

335
00:15:50,800 --> 00:15:53,350
hogy mi szeretnénk
hozzáférhető nyilvános URL-eket.

336
00:15:53,350 --> 00:15:56,100
Szóval mit fogok
tennie, hogy kattintson erre URL.

337
00:15:56,100 --> 00:16:00,880
>> És észre, hogy látok egy meglehetősen
csúnya index, a könyvtár lista,

338
00:16:00,880 --> 00:16:04,090
de mi fájl ugrik ki, akkor valószínűleg?

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

340
00:16:05,210 --> 00:16:07,870
Ennek oka, hogy én mentettem
A fájl az én munkaterületet.

341
00:16:07,870 --> 00:16:12,310
És amit eddig mondtam Apache web szerver
van nézd Dávid munkaterület könyvtárba.

342
00:16:12,310 --> 00:16:15,300
És hagyd, hogy bárki a
világot látni ezeket a fájlokat.

343
00:16:15,300 --> 00:16:19,050
>> És valóban, ha most
kattintson hello.html,

344
00:16:19,050 --> 00:16:22,180
Látom belül ezen a lapon pontosan, hogy a fájl.

345
00:16:22,180 --> 00:16:26,430
Most észre, felhő 9 műve
egy kicsit hasznos a számunkra.

346
00:16:26,430 --> 00:16:29,480
Belül CS50 IDE, észre van
Hirtelen címsorába.

347
00:16:29,480 --> 00:16:33,690
Ennek oka, hogy bár mi vagyunk
Chrome használatával, hogy látogassa CS50IDE,

348
00:16:33,690 --> 00:16:37,940
belsejében CS50IDE van saját
változata a böngésző most.

349
00:16:37,940 --> 00:16:40,820
És így ahelyett,
bonyolítaná a dolgokat, mint például,

350
00:16:40,820 --> 00:16:42,955
Megyek, hogy menjen előre
és csak másolja ezt az URL.

351
00:16:42,955 --> 00:16:45,330
Megyek előre, és csak megy
megnyitni a saját Chrome ablakot.

352
00:16:45,330 --> 00:16:47,800
Tehát nincs varázslat itt, nem CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Csak megyek, hogy szó illessze
én J Harvard URL-t és nyomja meg az Entert.

354
00:16:51,800 --> 00:16:54,750
És íme, most én, és
elméletileg mindenkinek

355
00:16:54,750 --> 00:16:57,700
az interneten, ha már konfigurálva
engedélyeket megfelelően,

356
00:16:57,700 --> 00:16:58,720
Látogasson el a fájlt.

357
00:16:58,720 --> 00:17:03,230
És így most, ha azt mondanám,
hello.html, íme, ott

358
00:17:03,230 --> 00:17:06,366
az én hihetetlenül underwhelming weboldalt.

359
00:17:06,366 --> 00:17:07,740
Tehát lássuk gyors józanság csekket.

360
00:17:07,740 --> 00:17:09,710
Mivel minden, hogy
fogalmi létre.

361
00:17:09,710 --> 00:17:13,180
És mi már nem igazán
megtanította, hogyan kell írni HTML önmagában.

362
00:17:13,180 --> 00:17:16,084
Bármilyen kérdése eddig
hogy mi is történt?

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

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

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

366
00:17:24,290 --> 00:17:25,800
Vajon CS50 saját ezeket a weboldalakat?

367
00:17:25,800 --> 00:17:26,460
Milyen értelemben?

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

369
00:17:28,947 --> 00:17:29,530
Jó kérdés.

370
00:17:29,530 --> 00:17:32,429
Tehát CS50 a tulajdonában CS50.io.

371
00:17:32,429 --> 00:17:33,970
Már valóban vásárolt, hogy a domain nevet.

372
00:17:33,970 --> 00:17:37,240
És a természet srácok
belép CS50IDE,

373
00:17:37,240 --> 00:17:39,270
akkor az összes kap egy úgynevezett aldomain.

374
00:17:39,270 --> 00:17:46,840
>> Tehát IDE50-Malan, vagy IDE50-Rob.CS50.io,
ez az egyedi címet belül

375
00:17:46,840 --> 00:17:47,730
a domain nevet.

376
00:17:47,730 --> 00:17:50,850
Így arra a célra a tanfolyam,
van saját egyedi címet.

377
00:17:50,850 --> 00:17:55,150
De már egyszerűsített dolgokat
vásárol a felső szintű domain, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O és akkor mindenki mást is
aztán az, hogy úgy mondjam.

379
00:17:58,050 --> 00:17:59,890
És akkor jöjjön vissza, hogy
egy pár hétig valószínűleg,

380
00:17:59,890 --> 00:18:01,930
különösen a projekt végső
alkalommal, amikor néhányan közületek

381
00:18:01,930 --> 00:18:03,596
Érdemes egy saját domain neveket.

382
00:18:03,596 --> 00:18:06,270
Ez valójában viszonylag
egyszerű.

383
00:18:06,270 --> 00:18:06,770
Minden rendben.

384
00:18:06,770 --> 00:18:07,880
Úgyhogy most erre.

385
00:18:07,880 --> 00:18:11,910
Én megyek vissza
CS50IDE, ahol a fájlt most,

386
00:18:11,910 --> 00:18:14,710
hello.html, egyáltalán nem olyan érdekes.

387
00:18:14,710 --> 00:18:17,130
Szeretnék tenni valamit
egy kicsit szebb, mint ezt.

388
00:18:17,130 --> 00:18:19,440
Így fogok tenni valamit, mint ez.

389
00:18:19,440 --> 00:18:21,510
Hadd nyílt paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Tehát ez egy fájlt írtam korábban.

391
00:18:23,560 --> 00:18:26,480
A tetején úgy, mint
Mindig, mi megjegyzéseket.

392
00:18:26,480 --> 00:18:28,730
De HTML, észrevételek
Egy kicsit más.

393
00:18:28,730 --> 00:18:33,270
Hármason és 14. sor, akkor
lásd a szintaxis megjegyzés kezdetét

394
00:18:33,270 --> 00:18:34,020
és a végén egy megjegyzést.

395
00:18:34,020 --> 00:18:36,820
>> De sem a cucc
közötti ügyekben funkcionálisan.

396
00:18:36,820 --> 00:18:40,250
Ez csak egy megjegyzés, hogy a
emberi, mi folyik itt.

397
00:18:40,250 --> 00:18:43,040
És ahogy egy gyors józanság
ellenőrizze, ha lépjünk le,

398
00:18:43,040 --> 00:18:46,820
mi a kézenfekvő új
tag, hogy már be?

399
00:18:46,820 --> 00:18:52,130
A címkék eddig láttunk nyitottak
konzol HTML, head, title, és a test.

400
00:18:52,130 --> 00:18:54,400
De mi nyilvánvalóan új most?

401
00:18:54,400 --> 00:18:55,200
>> Igen, így p.

402
00:18:55,200 --> 00:18:57,320
A p tag vagy paragrafus.

403
00:18:57,320 --> 00:19:01,182
És akkor én csak kölcsön néhány alapértelmezett
Latin szöveget képez én bekezdések.

404
00:19:01,182 --> 00:19:03,390
Mert amit akartam
érzékeltetni, hogy hogyan lehet

405
00:19:03,390 --> 00:19:05,859
képviseli bekezdései szöveget HTML.

406
00:19:05,859 --> 00:19:08,400
És akkor mi kezd történni
itt az, hogy van-e már

407
00:19:08,400 --> 00:19:09,657
a minta fejlődik.

408
00:19:09,657 --> 00:19:10,990
És hadd menjen előre, és nem ez.

409
00:19:10,990 --> 00:19:12,760
Hadd először kapcsolja ki az Apache.

410
00:19:12,760 --> 00:19:17,340
És azt fogom mondani, hogy elindítsa magát
ismét benn a mai forrása hét

411
00:19:17,340 --> 00:19:18,420
m könyvtárban.

412
00:19:18,420 --> 00:19:20,100
Szóval, hogy van hozzáférése mindent.

413
00:19:20,100 --> 00:19:22,230
>> És most, ha megyek vissza
ez a könyvtár lista,

414
00:19:22,230 --> 00:19:24,846
észre látom minden fájlt a mai.

415
00:19:24,846 --> 00:19:26,720
És látni fogod a
következő probléma set, akkor

416
00:19:26,720 --> 00:19:28,594
útmutatást ad
csinál pontosan ezt.

417
00:19:28,594 --> 00:19:35,210
Ha kinyitom paragraphs.html, ez lehet
valamint néz ki, mint egy programozási nyelv

418
00:19:35,210 --> 00:19:36,970
Önnek, ha nem beszél, vagy latinul.

419
00:19:36,970 --> 00:19:40,525
De ez még csak három bekezdés
A szövegeket jelölt HTML-ben.

420
00:19:40,525 --> 00:19:43,100
>> És észre a bekezdés
szünetekkel egymás között.

421
00:19:43,100 --> 00:19:46,400
Mert kiderül,
És bár

422
00:19:46,400 --> 00:19:49,210
talán hajlandó erre,
mivel a való világban,

423
00:19:49,210 --> 00:19:51,370
Ha azt szeretnénk, hogy sorban
szünetek között a dolgokat,

424
00:19:51,370 --> 00:19:55,680
lehet, hogy egészen egyszerűen
Ehhez és a hit mentése.

425
00:19:55,680 --> 00:19:59,460
És most, ha én reload itt, értesítés
hogy minden csak elmossa össze

426
00:19:59,460 --> 00:20:01,100
csak egy folt a szöveget.

427
00:20:01,100 --> 00:20:03,570
Mivel a HTML egyfajta néma nyelven.

428
00:20:03,570 --> 00:20:07,230
>> Ez azt jelentette, hogy kell használni,
oly módon, hogy a böngésző csak

429
00:20:07,230 --> 00:20:09,920
nem kifejezetten amit mondani, hogy igen.

430
00:20:09,920 --> 00:20:12,890
Tehát, ha nem mondod meg
adj egy új bekezdés,

431
00:20:12,890 --> 00:20:14,569
nem fogod látni egy új bekezdés.

432
00:20:14,569 --> 00:20:16,360
És valóban, amit a
böngésző fogja csinálni

433
00:20:16,360 --> 00:20:20,020
Még ha bejön az Enter,
mondjuk újra és újra

434
00:20:20,020 --> 00:20:23,190
és újra, mozgó ezt a szöveget módon
lefelé a képernyőn, majd mentse

435
00:20:23,190 --> 00:20:26,610
majd töltse be újra a böngészőt megy
széthullóban, hogy a fehér tér

436
00:20:26,610 --> 00:20:29,021
a csak egyetlen, jól látható szóköz.

437
00:20:29,021 --> 00:20:29,520
Minden rendben.

438
00:20:29,520 --> 00:20:30,869
Szóval ez a paragrafus.

439
00:20:30,869 --> 00:20:32,910
És akkor mi a minta
ami a fejlődő itt?

440
00:20:32,910 --> 00:20:37,450
Nos, úgy tűnik, hogy a helyzet, hogy
HTML szól kezdő tag

441
00:20:37,450 --> 00:20:38,460
és befejezve egy címke.

442
00:20:38,460 --> 00:20:39,300
És mi az a tag?

443
00:20:39,300 --> 00:20:41,160
Nos, ez csak egy darab szintaxis.

444
00:20:41,160 --> 00:20:44,400
Nyílt konzol, egy kulcsszó,
Zárt konzol, egy tag.

445
00:20:44,400 --> 00:20:45,510
Vagy kezdeni tag.

446
00:20:45,510 --> 00:20:48,590
És akkor, ha éppen
tette ki magad,

447
00:20:48,590 --> 00:20:52,300
mint végeztél a bekezdés,
te úgy mondjam ellenkezője.

448
00:20:52,300 --> 00:20:55,480
De az ellenkezője nem egészen hátra.

449
00:20:55,480 --> 00:21:00,630
>> Egyszerűen előtag azonos címke
Íme egy perjel, mint ez.

450
00:21:00,630 --> 00:21:01,130
Minden rendben.

451
00:21:01,130 --> 00:21:02,570
Szóval nem olyan izgalmas.

452
00:21:02,570 --> 00:21:05,270
És valóban, nem vagyunk téve a
web minden sokkal érdekesebb.

453
00:21:05,270 --> 00:21:07,630
Mi van, ha azt akarom, hogy
dolgokat nagyobb és merész?

454
00:21:07,630 --> 00:21:11,780
Így kiderül, hogy itt egy példa
A headings.html, ahol a testem,

455
00:21:11,780 --> 00:21:17,280
Van egy H1 tag, H2, H3,
négy, öt, vagy hat, amelyek mindegyike

456
00:21:17,280 --> 00:21:18,310
úgy tűnik, elég bonyolult.

457
00:21:18,310 --> 00:21:21,010
De ha elmegyek megnyitni ezt
Például, vessünk egy pillantást.

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

459
00:21:22,490 --> 00:21:27,030
>> Tehát böngészők alapesetben adhat szöveges
ez nagy és merész az eltérő méretű.

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

461
00:21:28,070 --> 00:21:31,240
H6 kisebb, majd
minden más között.

462
00:21:31,240 --> 00:21:34,170
Szóval ez érdekes, de még mindig
Nem igazán a weben Tudom.

463
00:21:34,170 --> 00:21:36,870
Mi van, ha azt akarjuk, hogy van
olyasmi, mint egy listája. .

464
00:21:36,870 --> 00:21:40,190
Tehát itt egy felsorolás a
Három a Harvard házak.

465
00:21:40,190 --> 00:21:41,600
>> Hogyan megy körülbelül ezt?

466
00:21:41,600 --> 00:21:45,410
Nos, vessünk egy pillantást list.html.

467
00:21:45,410 --> 00:21:47,870
És itt látjuk a
kis funkiness

468
00:21:47,870 --> 00:21:49,630
de nézzük meg, mi történik.

469
00:21:49,630 --> 00:21:56,182
Tehát az alapján, amit most láttam,
UL áll a rendezetlen listát.

470
00:21:56,182 --> 00:21:57,640
Rendezetlen lista csak azt jelenti, pontokba szedett.

471
00:21:57,640 --> 00:21:58,431
Nincs számokat.

472
00:21:58,431 --> 00:22:01,850
Van még egy úgynevezett
rendezett lista, amely OL a címkét.

473
00:22:01,850 --> 00:22:05,350
Aztán LI, lista elem mind az azt jelenti.

474
00:22:05,350 --> 00:22:07,790
>> És ez így automatikusan
szám mindent neked.

475
00:22:07,790 --> 00:22:11,270
De ismétlem, minden az én behúzás
fehér térben csak az én kedvemért.

476
00:22:11,270 --> 00:22:13,050
A böngésző nem
ténylegesen fog érdekelni.

477
00:22:13,050 --> 00:22:16,670
Így, bár nem tudtad
Ehhez, csak hogy tisztázzuk,

478
00:22:16,670 --> 00:22:19,880
ne annak ellenére,
A böngésző még

479
00:22:19,880 --> 00:22:22,130
képes megérteni, hogy csak finom.

480
00:22:22,130 --> 00:22:24,590
Én üti reload én
böngésző, én kattintva reload

481
00:22:24,590 --> 00:22:26,760
és nincs változás történik
mert a böngésző még

482
00:22:26,760 --> 00:22:29,550
csinál pontosan azt, amit mondok, hogy igen.

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

484
00:22:30,050 --> 00:22:31,340
Szóval ez az egész csak szöveget.

485
00:22:31,340 --> 00:22:33,730
Most nem valami érdekes.

486
00:22:33,730 --> 00:22:36,660
Megyek megy előre, és
kölcsönkérni néhány ilyen HTML.

487
00:22:36,660 --> 00:22:40,910
Megyek megy előre, és
hozzon létre egy új fájlt itt.

488
00:22:40,910 --> 00:22:43,370
És hívjuk ezt rick.html.

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

490
00:22:46,190 --> 00:22:48,916
Van aránytalanul
Használt valami

491
00:22:48,916 --> 00:22:51,290
úgynevezett Rick Roll e
osztály ebben az évben, nem tudom,

492
00:22:51,290 --> 00:22:53,880
ez csak úgy megtörtént szervesen.

493
00:22:53,880 --> 00:22:55,397
>> És most ez van az irányítást.

494
00:22:55,397 --> 00:22:56,730
Szóval én csak fog menni vele.

495
00:22:56,730 --> 00:22:59,700
És ha elmegyek Google
Kép és Rick Astley.

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

497
00:23:02,450 --> 00:23:06,170
Ha nem tudod, hogy miért csináljuk
ez, csak olvassa fel a Wikipedia.

498
00:23:06,170 --> 00:23:11,520
Minden alkalommal rákattintott a linkre,
Valaki nevetett valahol.

499
00:23:11,520 --> 00:23:14,860
És hadd menjen ahead-- van
megyünk, menjünk tekintse ezt.

500
00:23:14,860 --> 00:23:16,750
>> Tehát itt van egy
A kép a Google Images.

501
00:23:16,750 --> 00:23:19,390
És tegyük fel, hogy ez
ésszerűen mindenhol az interneten.

502
00:23:19,390 --> 00:23:22,570
Így fogok vállalni, hogy rendben velem
hogy ténylegesen ez az én weboldalt.

503
00:23:22,570 --> 00:23:24,820
Megyek, hogy menjen előre
és másolja a kép URL-jét.

504
00:23:24,820 --> 00:23:28,600
És most, ha megyek vissza a Cloud
9, lássuk, mit tehetek itt.

505
00:23:28,600 --> 00:23:30,630
Tehát itt csak egy weboldalt.

506
00:23:30,630 --> 00:23:39,020
Ez Rick Astley, haha,
Megyek most menj vissza

507
00:23:39,020 --> 00:23:43,510
hogy a böngészőm, reload, és érdekes.

508
00:23:43,510 --> 00:23:44,530
>> Hol van Rick?

509
00:23:44,530 --> 00:23:46,050
Szóval hadd lássam, mi történt.

510
00:23:46,050 --> 00:23:49,114
Igazából fogok
úgy tenni, mintha én nem tehetem.

511
00:23:49,114 --> 00:23:50,280
[Hallhatatlan] betette ide.

512
00:23:50,280 --> 00:23:52,520
Majd gyere vissza, hogy egy pillanat alatt.

513
00:23:52,520 --> 00:23:54,200
Tehát itt rick.html.

514
00:23:54,200 --> 00:23:56,070
Szóval ez nem Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Így kiderül, mi is
valóban hozzá, hogy itt legyen.

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

517
00:24:00,830 --> 00:24:06,680
Azt fogom mondani, hogy nekem egy képet, amelynek
forrás URL Én csak másolt, amely

518
00:24:06,680 --> 00:24:09,110
látszólag boldog
születésnapi vagy valami más.

519
00:24:09,110 --> 00:24:13,280
>> És most megyek
csukja be a kulcsszó, mint ez.

520
00:24:13,280 --> 00:24:15,170
Szóval ez csomagolópapír nagyon hosszú.

521
00:24:15,170 --> 00:24:17,740
De észre, hogy minden, amit
végzett nyitva tartó kép,

522
00:24:17,740 --> 00:24:20,270
forrás attribútumot e.

523
00:24:20,270 --> 00:24:21,530
És ez egy nagyon hosszú URL-t.

524
00:24:21,530 --> 00:24:23,720
És a legvégén, ezt észre.

525
00:24:23,720 --> 00:24:29,530
Miért tettem perjel szögletes zárójel
ahelyett, mint minden más tag,

526
00:24:29,530 --> 00:24:33,590
amelynek nyitó zárójel,
IMG, zárt konzol?

527
00:24:33,590 --> 00:24:37,040
Csak akkor gondolom akkor is, ha
nincs ismerete egyáltalán

528
00:24:37,040 --> 00:24:40,410
HTML előtt.

529
00:24:40,410 --> 00:24:42,710
>> Tehát hogyan záródik
A parancs, de miért

530
00:24:42,710 --> 00:24:45,850
nem is igazán intuitív
értelme csinálni valamit, egy kicsit

531
00:24:45,850 --> 00:24:48,820
bőbeszédű mint a közeli kép?

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

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

534
00:24:52,000 --> 00:24:55,620
Csak szemantikailag, nincs értelme a
kezdve egy képet, és szüntesse meg a kép,

535
00:24:55,620 --> 00:24:56,870
ez vagy van, vagy nem.

536
00:24:56,870 --> 00:25:00,960
Tehát nincs értelme, hogy hagyjon
másra belsejében egy képet.

537
00:25:00,960 --> 00:25:02,010
Csak azt nem tudja, hogy.

538
00:25:02,010 --> 00:25:03,720
És így a szintaxis
általában azt is csak

539
00:25:03,720 --> 00:25:07,910
hogy nem a perjel belül
A nyílt tag vagy a kezdő tag

540
00:25:07,910 --> 00:25:09,020
majd nyomja meg a Mentés gombot.

541
00:25:09,020 --> 00:25:13,350
>> Tehát ha én most újratöltődik ezt a fájlt, most
Van egy jó weblaphoz főzési itt.

542
00:25:13,350 --> 00:25:15,100
És akkor egyszerûen
Tényleg bosszantani az embereket

543
00:25:15,100 --> 00:25:17,010
ágyazzák helyett
mint egy YouTube linket.

544
00:25:17,010 --> 00:25:19,350
És valóban, bármikor
amit valaha ment a YouTube-ra,

545
00:25:19,350 --> 00:25:22,190
és hadd valójában véletlenül
Rick dobni magam itt.

546
00:25:22,190 --> 00:25:25,770
Tehát Rick roll.

547
00:25:25,770 --> 00:25:29,592
Szóval Rick roll-- fogok menni innen.

548
00:25:29,592 --> 00:25:31,900
>> [Zenelejátszási]

549
00:25:31,900 --> 00:25:33,730
>> OK, egy személy tetszett.

550
00:25:33,730 --> 00:25:37,270
Tehát észre ennyi idő, ha
kattintson a Megosztás linkre, természetesen

551
00:25:37,270 --> 00:25:41,390
az URL, hogy ténylegesen
beágyazni egy e-mailt, vagy egy törvényszéki kép

552
00:25:41,390 --> 00:25:43,730
vagy egy probléma beállítani, vagy egy dián.

553
00:25:43,730 --> 00:25:49,055
És most, ha én inkább kattints embed,
észre, hogy ebben az időben, ez a cucc

554
00:25:49,055 --> 00:25:49,680
ott volt.

555
00:25:49,680 --> 00:25:50,910
Megyek megy előre, és másolja ezt.

556
00:25:50,910 --> 00:25:54,000
>> És csak így láthatjuk, hogy jobb vagyok
fog illessze be az én szövegszerkesztő.

557
00:25:54,000 --> 00:25:55,860
Figyeljük meg, hogy ez az, amit
A YouTube már mondom.

558
00:25:55,860 --> 00:25:57,693
Minden alkalommal, amikor meglátogat egy
YouTube video, ha

559
00:25:57,693 --> 00:26:00,410
szeretné beágyazni a videót
weboldalt, egyszerűen fogd ezt.

560
00:26:00,410 --> 00:26:03,350
Tehát ez egy újabb
HTML tag úgynevezett iframe.

561
00:26:03,350 --> 00:26:04,590
Vagy egy sorban keretben.

562
00:26:04,590 --> 00:26:08,680
Szóval ez is úgy néz ki, egy kicsit
összetettebb, mint az összes többi.

563
00:26:08,680 --> 00:26:11,950
Így kiderül, hogy a kép
címkét, és úgy tűnik, az iframe címkét

564
00:26:11,950 --> 00:26:13,370
hogy az úgynevezett attribútumok.

565
00:26:13,370 --> 00:26:15,710
>> És ez a másik
darab szintaxis HTML-ben.

566
00:26:15,710 --> 00:26:19,240
Amellett, hogy a címke
nevet, nyitó zárójel tag nevét,

567
00:26:19,240 --> 00:26:23,780
akkor az ellenőrzés a viselkedését a kulcsszó
azáltal, hogy egy csomó tulajdonság

568
00:26:23,780 --> 00:26:24,860
egyenlő értéket.

569
00:26:24,860 --> 00:26:26,290
Képesség egyenlő értéket.

570
00:26:26,290 --> 00:26:28,100
És így például
YouTube mondja nekünk

571
00:26:28,100 --> 00:26:31,990
ha azt szeretnénk, a szélessége ezt a videót
hogy 420 képpont, és a magasság

572
00:26:31,990 --> 00:26:35,470
hogy 315 pixel, ez
hogyan kifejezni, hogy a HTML-ben.

573
00:26:35,470 --> 00:26:38,480
>> A forrás a videó megy
hogy lehet, hogy a hosszú YouTube URL

574
00:26:38,480 --> 00:26:40,830
majd néhány más dolgot
mint a kocka határától nulla,

575
00:26:40,830 --> 00:26:43,500
így valószínűleg azt jelenti, van
Nincs határ körül a dolog.

576
00:26:43,500 --> 00:26:45,450
Hagyja teljes képernyős valószínűleg
azt jelenti, hogy a felhasználó

577
00:26:45,450 --> 00:26:47,840
kattintson a gombra, és
valóban teljes képernyős videó.

578
00:26:47,840 --> 00:26:52,870
Tehát, ha azt szeretné, hogy legyen
lenyűgöző itt Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
helyett használja a kép címkét, hadd
én törölni, hogy ahelyett, hogy be ezt.

580
00:26:58,490 --> 00:27:00,810
És most újratöltődik.

581
00:27:00,810 --> 00:27:02,500
És most megint itt vagyunk.

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

583
00:27:04,979 --> 00:27:06,020
Rendben, ennyi elég.

584
00:27:06,020 --> 00:27:08,970
Rendben így megpróbálom
Nehéz nem ezt megismételni.

585
00:27:08,970 --> 00:27:11,400
Tehát melyek az elvitelre itt?

586
00:27:11,400 --> 00:27:15,130
Tehát HTML, olyan csúnya, mint Oldalainkon
vannak, valójában nagyon egyszerű.

587
00:27:15,130 --> 00:27:16,467
Ez nem egy programozási nyelv.

588
00:27:16,467 --> 00:27:17,550
Nem kell funkciókat.

589
00:27:17,550 --> 00:27:18,410
Nem kell hurkok.

590
00:27:18,410 --> 00:27:19,535
Nem rendelkezik feltételeket.

591
00:27:19,535 --> 00:27:22,900
Minden azt is tucatnyi
különböző címkék, amelyek mindegyike

592
00:27:22,900 --> 00:27:24,620
nulla vagy több attribútum.

593
00:27:24,620 --> 00:27:27,320
És valóban, mi a szórakoztató mintegy
HTML elkezd merülni

594
00:27:27,320 --> 00:27:29,560
az, hogy ez nagyon egyéni tanítható.

595
00:27:29,560 --> 00:27:32,880
>> Minden úgy megértése
Az általános keret HTML.

596
00:27:32,880 --> 00:27:36,510
Mi az a tag, mi az a tulajdonság,
hogyan konfigurálni egy weboldal

597
00:27:36,510 --> 00:27:37,250
alábbiak szerint.

598
00:27:37,250 --> 00:27:40,720
És minden mást valóban az eredmény
felnézni egy online referencia

599
00:27:40,720 --> 00:27:43,080
vagy googling hogyan kell csinálni néhány
technika vagy mint láttuk,

600
00:27:43,080 --> 00:27:45,371
nézi Facebook forrás
kódot, néztem a honlapon

601
00:27:45,371 --> 00:27:48,710
hogy tetszik a forráskódja és
hogy miként az a fejlesztők ott

602
00:27:48,710 --> 00:27:50,550
ténylegesen megállapított dolgokat.

603
00:27:50,550 --> 00:27:52,180
>> Így nem tehetünk képeket is.

604
00:27:52,180 --> 00:27:53,994
És valóban, megcsináltuk egy perccel ezelőtt.

605
00:27:53,994 --> 00:27:55,410
Hadd menjen előre, és csak megmutatom.

606
00:27:55,410 --> 00:27:56,770
Íme néhány példa kódot.

607
00:27:56,770 --> 00:27:58,380
Ha valaha szeretné látni morcos macska.

608
00:27:58,380 --> 00:28:00,620
Szóval észre, hogy én is
Van egy kép kulcsszó itt.

609
00:28:00,620 --> 00:28:02,090
És van egy megjegyzést fölötte.

610
00:28:02,090 --> 00:28:04,490
Van egy alternatív
szöveget az akadálymentesítés.

611
00:28:04,490 --> 00:28:07,250
Szóval valaki, aki egy képernyő
olvasó okokból látvány

612
00:28:07,250 --> 00:28:10,172
ténylegesen majd a
képernyőolvasó mondani morcos macska.

613
00:28:10,172 --> 00:28:11,880
Mert ha nem tudnak
lásd a képen,

614
00:28:11,880 --> 00:28:14,504
legalább van számítógépük
mondd meg nekik szóban mi az.

615
00:28:14,504 --> 00:28:18,020
És a forrása, hogy a fájl cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Tehát valójában, ha igazán akartam
hogy okos, mit tudtam volna done--

617
00:28:22,472 --> 00:28:25,680
Megígérem, hogy nem megy a Rick Astley, így
Megyek google egy macska helyett.

618
00:28:25,680 --> 00:28:28,290
És ha elmegyek Google Images
itt, és azt feltételezzük,

619
00:28:28,290 --> 00:28:30,040
hogy ez egy kép a macska.

620
00:28:30,040 --> 00:28:35,070
>> Tegyük fel, hogy van-szabályozás kattintott
vagy a jobb kattintás ezt, véletlenül

621
00:28:35,070 --> 00:28:35,630
hátborzongató.

622
00:28:35,630 --> 00:28:40,320
És cat.jpeg megyek
menteni az asztalon.

623
00:28:40,320 --> 00:28:44,700
Hadd menjek vissza a Cloud 9.

624
00:28:44,700 --> 00:28:48,150
Figyeljük meg, hogy itt, tudom
megy feltölteni a helyi fájlokat.

625
00:28:48,150 --> 00:28:51,530
És ha én fogd ezt
fájlt, cat.jpeg, felmondási

626
00:28:51,530 --> 00:28:54,674
hogy tudok húzza, és
vidd be Cloud 9

627
00:28:54,674 --> 00:28:56,090
és ez meg fog kiabálni velem van.

628
00:28:56,090 --> 00:28:59,000
>> Hiszen már
adott neked cat.jpeg fájlt,

629
00:28:59,000 --> 00:29:01,430
de ez szuper könnyű
megragad egy fotót, hogy már

630
00:29:01,430 --> 00:29:03,220
kivett Facebook
vagy a Flickr vagy hasonló

631
00:29:03,220 --> 00:29:05,678
és valóban fogd és vidd azt
a felhő 9 majd tenni

632
00:29:05,678 --> 00:29:07,970
része a saját személyes
honlap vagy probléma

633
00:29:07,970 --> 00:29:10,442
állítsa hét vagy nyolc ahogy hamarosan látni.

634
00:29:10,442 --> 00:29:12,150
És akkor, amikor
Végül látogasson el a macskát,

635
00:29:12,150 --> 00:29:16,610
feltételezve Letöltöttem, hogy ugyanaz a macska,
értesítést hogy-- hogy imádnivaló volt.

636
00:29:16,610 --> 00:29:19,160
>> Mit szeretnél látni az
valami ilyesmi arca van.

637
00:29:19,160 --> 00:29:21,810
Tehát a fájlokat
hivatkozás egy weboldalon

638
00:29:21,810 --> 00:29:26,050
lehet akár a helyi saját
számlára vagy távoli, de más szerveren

639
00:29:26,050 --> 00:29:29,670
mint abban az esetben, a Rick
Astley fotó egy kicsit ezelőtt.

640
00:29:29,670 --> 00:29:32,990
Szóval, ha else-- mi
mást tehetnénk itt?

641
00:29:32,990 --> 00:29:34,890
Szóval vessünk egy pillantást a következő.

642
00:29:34,890 --> 00:29:36,160
Tudod, mi a fajta jó?

643
00:29:36,160 --> 00:29:39,330
>> Mi mindeddig így
nagyon statikus weboldalakat.

644
00:29:39,330 --> 00:29:41,830
Azt akarom, hogy vértezze fel a dolgokat az alábbiak szerint.

645
00:29:41,830 --> 00:29:44,344
Azt akarom, hogy az én saját keresője.

646
00:29:44,344 --> 00:29:47,010
Tehát, hogy egy kereső, hadd
megy előre, és kezdjük ezt el.

647
00:29:47,010 --> 00:29:52,570
Megyek előre, és hozzon létre menni
egy új fájlt nevű search.html.

648
00:29:52,570 --> 00:29:54,890
És mi prefabed verzió online.

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

650
00:29:56,027 --> 00:29:57,610
Ne illessze be a terminál ablakot.

651
00:29:57,610 --> 00:29:58,744
Előregyártott verzió online.

652
00:29:58,744 --> 00:30:00,160
És fogok kezdeni az alábbiak szerint.

653
00:30:00,160 --> 00:30:04,490
Tehát itt az elején
nevű fájlt search.html.

654
00:30:04,490 --> 00:30:07,510
Megyek mentse el
mai forrás könyvtár.

655
00:30:07,510 --> 00:30:09,079
Én fogom hívni erre a keresésre.

656
00:30:09,079 --> 00:30:10,370
Tulajdonképpen mi legyen jobb.

657
00:30:10,370 --> 00:30:13,600
CS50 Keresés és ténylegesen márka is.

658
00:30:13,600 --> 00:30:17,500
És most, fogok mondani
olyasmi, mint a H1 CS50 Keresés.

659
00:30:17,500 --> 00:30:20,930
És akkor itt lent, H2 hamarosan.

660
00:30:20,930 --> 00:30:23,230
És csak azért, hogy újra bedugni, H1 és
H2 jelenti, amit rendre?

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

662
00:30:26,750 --> 00:30:30,320
>> Igen, nagy és merész, és
nem olyan nagy, de még mindig merész.

663
00:30:30,320 --> 00:30:37,375
Tehát ha menteni ezt, és menj ide,
lássuk a fájl search.html.

664
00:30:37,375 --> 00:30:42,560
Rendben, és ez az egyik
az right-- [hallható].

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

666
00:30:46,980 --> 00:30:49,110
Készenlét.

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

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

669
00:30:52,610 --> 00:30:54,080
Ó, ez ott.

670
00:30:54,080 --> 00:30:54,860
David egy idióta.

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

672
00:30:55,420 --> 00:30:56,660
Szóval ez van.

673
00:30:56,660 --> 00:30:58,350
Tehát CS50 keresési hamarosan.

674
00:30:58,350 --> 00:31:00,370
Tehát most, nézzük szintetizálni
mit csináltunk a múlt héten.

675
00:31:00,370 --> 00:31:03,400
>> Hol beszélgettünk a
alacsonyabb szintű mechanika HTTP.

676
00:31:03,400 --> 00:31:05,780
És ezek az új gondolatok
HTML, ami csak

677
00:31:05,780 --> 00:31:08,890
ez a jelölőnyelv, ahol
mondani egy böngésző pontosan mit kell csinálni

678
00:31:08,890 --> 00:31:10,740
és végre a saját keresőmotort.

679
00:31:10,740 --> 00:31:12,520
Tehát ahelyett, hogy csak
mondván hamarosan, én vagyok

680
00:31:12,520 --> 00:31:14,810
fogja bemutatni
egy úgynevezett form tag.

681
00:31:14,810 --> 00:31:19,610
És ebben a formában, megyek
Van valami, mint egy beviteli mező.

682
00:31:19,610 --> 00:31:22,450
>> És a neve ennek a bemeneti
mező, fogom nevezni Q.

683
00:31:22,450 --> 00:31:26,240
És milyen típusú ez a beviteli mező
Azt fogom mondani csak "text".

684
00:31:26,240 --> 00:31:29,130
És a szövegmezőbe, mivel mi
lásd, csak egy szövegmezőbe.

685
00:31:29,130 --> 00:31:32,830
És ez így nem érzékeli ide, hogy
bármi belsejében is ezen a ponton.

686
00:31:32,830 --> 00:31:35,320
És így én egyszerűen megy
hogy lezárja a címkét, hogy

687
00:31:35,320 --> 00:31:38,099
perjel közvetlenül a tag maga.

688
00:31:38,099 --> 00:31:39,890
És akkor fogok
Van egy másik bemenet.

689
00:31:39,890 --> 00:31:43,480
Input type egyenlő benyújtania.

690
00:31:43,480 --> 00:31:45,320
És akkor fogok
zárja ezt is.

691
00:31:45,320 --> 00:31:46,840
>> És most megyek vissza ide.

692
00:31:46,840 --> 00:31:49,520
És már látjuk,
bár elég csúnya, én már

693
00:31:49,520 --> 00:31:52,460
Megvan a kezdetei
saját kereső oldal itt.

694
00:31:52,460 --> 00:31:55,150
Sőt, hadd próbálja
tiszta ez egy kicsit.

695
00:31:55,150 --> 00:31:57,330
Kiderül, hogy a
Az itt felvitt, tudok

696
00:31:57,330 --> 00:31:59,910
Egy másik tulajdonsága az úgynevezett helyfoglaló.

697
00:31:59,910 --> 00:32:05,165
És talán valami ilyesmit kulcsszavak,
vagy pontosabban, lekérdezni q.

698
00:32:05,165 --> 00:32:07,820
>> És észre, most, azt kell
ez a fajta szürke szöveg

699
00:32:07,820 --> 00:32:10,440
hogy eltűnik,
amint elkezdek gépelni,

700
00:32:10,440 --> 00:32:12,930
de ez talán valami
láttad más weboldalak.

701
00:32:12,930 --> 00:32:14,650
Én nem nagyon szeretem a Küldés gombra.

702
00:32:14,650 --> 00:32:18,320
Úgyhogy tényleg fog adni a
Küldés gombra a keresés értéke.

703
00:32:18,320 --> 00:32:21,680
És most, ha én újratölteni, észre, hogy
én gombra válik elemzi keresést.

704
00:32:21,680 --> 00:32:24,140
Tudod, én nem igazán
mint a logót.

705
00:32:24,140 --> 00:32:27,140
Tehát a Google betűtípus generátor.

706
00:32:27,140 --> 00:32:28,820
>> Azt akarom, hogy vértezze ezt fel tovább.

707
00:32:28,820 --> 00:32:30,660
Tehát CS50 keresést.

708
00:32:30,660 --> 00:32:31,870
Hadd létre a saját logóját.

709
00:32:31,870 --> 00:32:33,080
Hogy néz ki.

710
00:32:33,080 --> 00:32:36,945
Tehát most hadd menteni ezt as-- gyerünk.

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

712
00:32:40,710 --> 00:32:43,120
Hol fog ez?

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

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

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

716
00:32:44,980 --> 00:32:47,740
Mentés másként.

717
00:32:47,740 --> 00:32:49,470
Hülye böngészők.

718
00:32:49,470 --> 00:32:51,700
Állj meg, megyünk
erősít ez egyszer és mindenkorra.

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

720
00:32:57,650 --> 00:32:58,590
Ott vagyunk.

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

722
00:32:59,090 --> 00:32:59,600
Bocsánat.

723
00:32:59,600 --> 00:33:00,750
Ki napon.

724
00:33:00,750 --> 00:33:02,310
Most ez a funky.

725
00:33:02,310 --> 00:33:03,160
Kilépés a teljes képernyős.

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

727
00:33:04,150 --> 00:33:06,870
>> Most, mint egy normál
személy, Kép mentése más néven.

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

729
00:33:08,810 --> 00:33:13,194
Most fogok menni CS50IDE és
Megyek egyszerűen megragad a logó,

730
00:33:13,194 --> 00:33:15,360
Megyek húzza be
A forrásom hét könyvtár,

731
00:33:15,360 --> 00:33:17,002
fájl már létezik, jól vagyok ezzel.

732
00:33:17,002 --> 00:33:19,210
Így fogok, hogy felülírja azt
mert már megvolt.

733
00:33:19,210 --> 00:33:20,630
És most hogyan megszabadulni ez?

734
00:33:20,630 --> 00:33:24,670
>> Menjünk előre és tedd
kép forrása megegyezik logo.gif.

735
00:33:24,670 --> 00:33:25,490
Zárja be ezt.

736
00:33:25,490 --> 00:33:26,050
Mentés.

737
00:33:26,050 --> 00:33:30,560
És most, ha megyek vissza a keresési
oldal, most már keres nagyon jó.

738
00:33:30,560 --> 00:33:33,610
Rendben, tehát nem ma
elég történik semmi hasznosat.

739
00:33:33,610 --> 00:33:37,000
Sőt, hadd próbálja megkeresni
egy macska, és meglátjuk, mi történik.

740
00:33:37,000 --> 00:33:38,890
Macskák.

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

742
00:33:39,420 --> 00:33:41,400
Ez nem csak a munka, úgy tűnik.

743
00:33:41,400 --> 00:33:43,760
Szóval mi a legfontosabb darabja
ami hiányzik itt?

744
00:33:43,760 --> 00:33:49,100
>> Jobb, ha nem tudod, HTML,
Elkezdtem jelölés fel a telefont formában

745
00:33:49,100 --> 00:33:54,130
és én már mondtam, hogy hogyan juthatunk bemenet,
adj egy szövegmezőbe, és egy küldés gombot,

746
00:33:54,130 --> 00:33:55,730
milyen darabot láthatóan hiányzik?

747
00:33:55,730 --> 00:33:58,975
Tegyük fel, hogy szeretnénk, hogy valóban kap
ez a dolog működik.

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

749
00:34:02,420 --> 00:34:05,360
Mit kell tennünk?

750
00:34:05,360 --> 00:34:08,860
Szükségünk van arra, hogy hajtsák végre a háttérben
adatbázis vagy a kereső magát,

751
00:34:08,860 --> 00:34:11,210
és hogy fog tartani egy
csomó időt, őszintén szólva.

752
00:34:11,210 --> 00:34:13,380
>> Úgy emlékszem, mit csináltunk utoljára.

753
00:34:13,380 --> 00:34:18,230
Tehát, ha keres valamit a Google
és már előre ki van kapcsolva,

754
00:34:18,230 --> 00:34:20,355
Emlékezzünk, azonnali keresés.

755
00:34:20,355 --> 00:34:22,230
Szóval hadd viszont, hogy ki
így ez a ténylegesen

756
00:34:22,230 --> 00:34:26,650
úgy viselkedik, mint egy idősebb iskola böngésző,
Ha most keresni valamit, mint a macskák,

757
00:34:26,650 --> 00:34:28,190
felidézni, amit az URL így néz ki.

758
00:34:28,190 --> 00:34:29,449
Ez elég rejtélyes.

759
00:34:29,449 --> 00:34:33,000
De ágyazva ott,
Emlékezzünk, a perjel keresést.

760
00:34:33,000 --> 00:34:35,100
Kérdőjel q egyenlő macskák.

761
00:34:35,100 --> 00:34:37,760
>> És ez úgy tűnik, hogy adjon nekem
egy csomó keresési eredményeket.

762
00:34:37,760 --> 00:34:39,134
Szóval tudja, mit fogok csinálni?

763
00:34:39,134 --> 00:34:41,650
Megyek kölcsön
A Google csak egy percre.

764
00:34:41,650 --> 00:34:43,670
Én megyek át
Itt és fogok mondani

765
00:34:43,670 --> 00:34:47,850
hogy ez képezi intézkedés vagy
hely, hogy úgy mondjam,

766
00:34:47,850 --> 00:34:49,330
kell szó szerint a Google.

767
00:34:49,330 --> 00:34:52,590
És a módszer akartam
használat után lesz kap.

768
00:34:52,590 --> 00:34:53,560
>> Tehát mi fellépés?

769
00:34:53,560 --> 00:34:55,760
Cselekvésre van furcsa nevű,
de ez csak azt jelenti,

770
00:34:55,760 --> 00:34:58,120
ki fogja kezelni
Az akció ebben a formában?

771
00:34:58,120 --> 00:35:00,820
Ha rákattintok Keresés, ahol
Abban az esetben, menni?

772
00:35:00,820 --> 00:35:05,300
És ha most visszatérek a formában
Itt és újratölti a weboldalamon

773
00:35:05,300 --> 00:35:09,000
és most keres valami
mint a kutya, észre most

774
00:35:09,000 --> 00:35:10,850
Én újra végrehajtani a Google.

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

776
00:35:11,350 --> 00:35:14,141
>> Ha azt szeretnénk, hogy keressen valamit
mást, működik, mert nem csak a kutyák,

777
00:35:14,141 --> 00:35:16,400
ez is működik, a macskák.

778
00:35:16,400 --> 00:35:21,930
Úgy is működik a CS50.

779
00:35:21,930 --> 00:35:24,310
És OK, ez csak
alatt whelming, nem?

780
00:35:24,310 --> 00:35:25,920
Rendben, de ez tényleg működik.

781
00:35:25,920 --> 00:35:27,360
Szóval mi ténylegesen folyik itt?

782
00:35:27,360 --> 00:35:31,340
Szóval már tanítottam a böngésző segítségével
HTML, hogy felhasználói bevitelt

783
00:35:31,340 --> 00:35:35,810
és valóban elküldi a bemenet
egy távoli szerverre HTTP-n.

784
00:35:35,810 --> 00:35:39,120
>> És mivel a böngészőm
megérti HTTP, hogy valójában

785
00:35:39,120 --> 00:35:43,500
megépíteni a URL-t, hogy amit
Én a végén több mint a böngészőm,

786
00:35:43,500 --> 00:35:45,660
észre, mi történik
amikor kerestem kutya.

787
00:35:45,660 --> 00:35:49,270
Ha rákattintok Keresés észre, hogy
Az URL változik akartam

788
00:35:49,270 --> 00:35:52,770
hogy google.com/search~~V lekérdezés megegyezik kutya.

789
00:35:52,770 --> 00:35:56,020
És ez azért van, mert a formája
tudja, mert a módszer kap,

790
00:35:56,020 --> 00:35:59,560
egyszerűen hozzáfűzi, hogy az URL-ott.

791
00:35:59,560 --> 00:36:01,730
>> Nos, ezek a weboldalak még mindig csúnya.

792
00:36:01,730 --> 00:36:04,890
Úgyhogy bevezetni egy másik
darab szintaxis ha tudjuk ma.

793
00:36:04,890 --> 00:36:07,640
És ez az, amit az ismert
a Cascading Style Sheets.

794
00:36:07,640 --> 00:36:10,720
Szóval hadd vessen egy pillantást
Ebben a példában itt megtekinthet

795
00:36:10,720 --> 00:36:12,380
ha meg tudjuk következtetni, hogy mi folyik.

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

797
00:36:14,520 --> 00:36:16,532
És ez az, ahol a dolgok
egy kicsit csúnya.

798
00:36:16,532 --> 00:36:18,490
Mert sajnos,
A világ a web,

799
00:36:18,490 --> 00:36:20,920
HTML önmagában nem képes mindent megtenni.

800
00:36:20,920 --> 00:36:22,920
És ezért ha azt szeretnénk, hogy
stilizálhatja a weboldal,

801
00:36:22,920 --> 00:36:28,370
ha valóban szükség van, hogy összpontosítson a
esztétika másképp.

802
00:36:28,370 --> 00:36:33,090
Tehát itt, van a test az én web
oldal, amelynek belsejében egy nagy div.

803
00:36:33,090 --> 00:36:34,700
És egy div csak azt jelenti részlege.

804
00:36:34,700 --> 00:36:38,060
Tehát ez olyan, mint egy bekezdés, de
nem rendelkezik az azonos szemantikája

805
00:36:38,060 --> 00:36:39,180
A szövegbekezdést.

806
00:36:39,180 --> 00:36:40,940
>> Ez csak azt jelenti, hogy a
böngésző, itt jön

807
00:36:40,940 --> 00:36:45,210
egy nagy téglalap alakú területet az én web
oldal, szeretnék kezelni speciálisan.

808
00:36:45,210 --> 00:36:47,420
Most, 21-es vonal van, ahol ez div kezdődik.

809
00:36:47,420 --> 00:36:48,770
És csak akkor gondolom.

810
00:36:48,770 --> 00:36:53,080
Milyen hatással van a 21-es vonal a
többi a tartalmát az oldal?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Középre.

813
00:36:56,311 --> 00:36:56,810
Ez minden.

814
00:36:56,810 --> 00:36:58,830
Tehát nem láttunk egy módja
valójában központosító a szöveget.

815
00:36:58,830 --> 00:37:00,996
>> Sőt, az én kereső,
ellentétben a tényleges Google,

816
00:37:00,996 --> 00:37:03,040
volt minden indokolt a bal oldalra.

817
00:37:03,040 --> 00:37:07,430
És így most a 21. sort, azt mondom, hé
böngésző, hozzon létre egy részlege az oldalon.

818
00:37:07,430 --> 00:37:09,450
Csak adj egy nagy, láthatatlan téglalap.

819
00:37:09,450 --> 00:37:11,490
Így szeretnék
gondoljon a weboldalt.

820
00:37:11,490 --> 00:37:13,870
És akkor stilizálhatja az alábbiak szerint.

821
00:37:13,870 --> 00:37:16,900
Belül e idézetek,
Most, a második nyelv

822
00:37:16,900 --> 00:37:19,969
hogy mi vezetett a mai
nevű Cascading Style Sheets.

823
00:37:19,969 --> 00:37:22,010
Szerencsére, ez is nem
egy programozási nyelv,

824
00:37:22,010 --> 00:37:26,470
így nagyon korlátozott a szintaxist, de
is nagyon korlátozott funkcionalitás

825
00:37:26,470 --> 00:37:30,670
mivel HTML szól
jelölést, hogy az adatokat egy weboldal

826
00:37:30,670 --> 00:37:32,130
és a szerkezet egy internetes oldalon.

827
00:37:32,130 --> 00:37:35,320
CSS általában a
utolsó mérföld, az esztétika,

828
00:37:35,320 --> 00:37:40,160
szerzés a méret és a szín és a
elhelyezését pontosan így van egy internetes oldalon.

829
00:37:40,160 --> 00:37:43,000
És valóban, ez képződik
a legfontosabb érték párokat.

830
00:37:43,000 --> 00:37:46,290
>> Egy tulajdonság, mint ez, szöveges
összehangolása, kettőspont követi,

831
00:37:46,290 --> 00:37:49,720
majd az értéke, hogy a
tulajdonság, amely ebben az esetben az, központ.

832
00:37:49,720 --> 00:37:51,910
És most észrevenni,
ágyazhatók ezeket a dolgokat.

833
00:37:51,910 --> 00:37:56,780
Ha akartam mindent, hogy
Amit kiemelt, hogy középre,

834
00:37:56,780 --> 00:38:00,270
ezért is van vonal 21 és
A megfelelő sor 31.

835
00:38:00,270 --> 00:38:04,820
De tegyük fel, most azt akarom mondani, John
Harvard, üdvözlöm a saját honlapomat.

836
00:38:04,820 --> 00:38:06,530
>> Copyright jelet John Harvard.

837
00:38:06,530 --> 00:38:09,180
És tegyük fel akarok az első
Ezen a vonalon, hogy elég nagy.

838
00:38:09,180 --> 00:38:10,450
36 pixel.

839
00:38:10,450 --> 00:38:11,530
Szóval ez egy tisztességes méretű.

840
00:38:11,530 --> 00:38:13,240
És szerettem volna a súlya, hogy merész.

841
00:38:13,240 --> 00:38:15,450
De aztán alatta,
Azt akarom, kisebb szöveget.

842
00:38:15,450 --> 00:38:19,980
És alatta, azt akarom,
még kisebb szöveget.

843
00:38:19,980 --> 00:38:20,480
Bocsánat.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Ma úgy érzi, mintha az egész nap szabad.

846
00:38:26,940 --> 00:38:29,840
>> Tehát most, mit csinálok, hogy ezt?

847
00:38:29,840 --> 00:38:34,580
Itt a 22. sorban egy beágyazott
div vagy egymásba ágyazott div, ha úgy tetszik.

848
00:38:34,580 --> 00:38:36,190
Ez is megvan a saját stílusa tag.

849
00:38:36,190 --> 00:38:38,160
Azt adja betűmérettel 36.

850
00:38:38,160 --> 00:38:40,460
Én meg egy font súlyú merész.

851
00:38:40,460 --> 00:38:43,360
Itt lent, én csak adja meg 24 pixel.

852
00:38:43,360 --> 00:38:45,960
És végül, a 28. sor, általam megadott 12.

853
00:38:45,960 --> 00:38:49,070
Ahogyan tehát egy gyors józanság ellenőrzés
és mint ember ezt olvasod,

854
00:38:49,070 --> 00:38:52,545
amely szó a képernyőn
valóban lesz merész?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Mely vonalak valóban merész?

857
00:38:58,760 --> 00:38:59,570
>> Csak John Harvard.

858
00:38:59,570 --> 00:39:00,070
Jobb?

859
00:39:00,070 --> 00:39:05,940
Mert ahogy a 22. sorban mondja hé
böngésző, itt egy részlege az oldalon.

860
00:39:05,940 --> 00:39:07,920
Legyen ez a betűméret 36 pont.

861
00:39:07,920 --> 00:39:09,460
Hogy a font súlyú merész.

862
00:39:09,460 --> 00:39:11,920
Amint eléred a
megfelelő zárócímkét

863
00:39:11,920 --> 00:39:15,340
vagy zárt címke 24. sor,
Ez azt jelenti, hé böngésző,

864
00:39:15,340 --> 00:39:17,640
abbahagyni bármit is csinálsz.

865
00:39:17,640 --> 00:39:21,020
És észre, hogy világos legyen, annak ellenére,
22. sor mindezekkel a tulajdonságokkal

866
00:39:21,020 --> 00:39:24,430
mint a stílus, ha
lezárja a címkét a 24. sor,

867
00:39:24,430 --> 00:39:25,940
csak megemlíteni a tag nevét.

868
00:39:25,940 --> 00:39:29,990
>> Nem ismétlem a szót stílus vagy
minden, ami van benne ilyen idézetek.

869
00:39:29,990 --> 00:39:32,860
És így ha nézem ezt most
a böngészőm, vessünk

870
00:39:32,860 --> 00:39:38,060
Egy pillantás a végeredmény. Engedj el
előre, hogy ez a fájl, ami CSS 0.

871
00:39:38,060 --> 00:39:41,814
És ez még mindig elég sima,
de kezd nagyon érdekes.

872
00:39:41,814 --> 00:39:43,980
De kiderül, van
Más dolog, amit tehetünk itt,

873
00:39:43,980 --> 00:39:46,490
és azzal a veszéllyel jár, hogy
ez teljesen undorító,

874
00:39:46,490 --> 00:39:48,630
megemlítem, hogy az én
testülete a weboldalamon,

875
00:39:48,630 --> 00:39:53,930
Meg tudom csinálni valami vicceset
mint bg vagy háttér színe.

876
00:39:53,930 --> 00:39:56,670
>> És gyorsan, mi a kedvenc színe?

877
00:39:56,670 --> 00:39:57,720
Zöld hallottam.

878
00:39:57,720 --> 00:39:58,750
Minden rendben.

879
00:39:58,750 --> 00:40:02,920
Tehát most, ha elütöttem reload most,
van egy zöld weboldal.

880
00:40:02,920 --> 00:40:04,710
Rendben, ez nem is rossz.

881
00:40:04,710 --> 00:40:08,350
És most, ha azt akarom, hogy ez valóban
Hűvös, tudom, hogy milyen színű legyen a szöveg

882
00:40:08,350 --> 00:40:09,360
akár piros.

883
00:40:09,360 --> 00:40:10,870
Szóval lássuk, mi ez úgy néz ki, mint.

884
00:40:10,870 --> 00:40:12,230
Most már keres nagyon jó.

885
00:40:12,230 --> 00:40:15,460
És itt lent, ha igazán
akar bajlódni valaki

886
00:40:15,460 --> 00:40:17,487
vagy ha azt szeretné, hogy
Egyike azoknak az embereknek, akik

887
00:40:17,487 --> 00:40:20,570
megpróbálja trükk, amit a látogató egy web
Oldal mert már becsapott Google

888
00:40:20,570 --> 00:40:27,610
a gondolkodás van egy csomó
kulcsszavak általam elvártnál lássuk, reload.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Hol ment?

891
00:40:30,680 --> 00:40:31,530
És ott minket.

892
00:40:31,530 --> 00:40:32,030
Minden rendben.

893
00:40:32,030 --> 00:40:34,905
Tehát azt mondom, hogy ez egy félre, akkor
beszélni ezt a dolgot néhány hét alatt

894
00:40:34,905 --> 00:40:36,740
amikor arról beszélünk,
biztonság, ha valóban

895
00:40:36,740 --> 00:40:38,852
beágyazni egész csokor
kulcsszavak weblapon

896
00:40:38,852 --> 00:40:41,810
még ha ők nem látható a
emberi, valaki, mint a Google, persze,

897
00:40:41,810 --> 00:40:43,250
még valóban megtalálja ezt.

898
00:40:43,250 --> 00:40:45,820
Rendben, szóval ez elég
förtelmes elég gyorsan.

899
00:40:45,820 --> 00:40:48,420
>> És valóban, ez még nem minden
hogy sokkal ellentétben a saját web

900
00:40:48,420 --> 00:40:51,480
oldal, mint az alapképzésben, amely
Elkezdtem googling körül, hogy megtalálják

901
00:40:51,480 --> 00:40:53,690
korábbi változatait régi honlapok.

902
00:40:53,690 --> 00:40:54,500
Ez elég rossz volt.

903
00:40:54,500 --> 00:40:56,650
Ami azt illeti, úgy találta,
Egy mindössze osztály előtt.

904
00:40:56,650 --> 00:40:58,620
De van rosszabb odakint.

905
00:40:58,620 --> 00:41:01,534
Ez nyilván az én
nyitólap vissza 1996-ban.

906
00:41:01,534 --> 00:41:04,200
Úgy látszik, azt hittem,
megfelelő kérni az embereket a nevüket

907
00:41:04,200 --> 00:41:05,991
mielőtt tudtak
valóban látom a weboldalon.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> Aztán megmutattam nekik
valami hülyeséget, valószínűleg.

910
00:41:11,920 --> 00:41:13,450
Én ásni többet legközelebb.

911
00:41:13,450 --> 00:41:16,220
De most nézzük
fontolja meg egy kicsit a design.

912
00:41:16,220 --> 00:41:17,444
Beszéltünk stílusban.

913
00:41:17,444 --> 00:41:19,735
És ezt az oldalt eddig és
a legtöbb mindent írtam

914
00:41:19,735 --> 00:41:21,890
elég tiszta stilisztikailag.

915
00:41:21,890 --> 00:41:23,320
De mi a helyzet a design?

916
00:41:23,320 --> 00:41:25,990
Nos, van egy csomó redundancia
amit én csináltam itt.

917
00:41:25,990 --> 00:41:28,156
>> Már említettem a szót
szín egy-két helyen.

918
00:41:28,156 --> 00:41:31,630
Már említettem betűméret pár
helyek és merész, egy-két helyen.

919
00:41:31,630 --> 00:41:34,870
És alapvetően, én vagyok együttműködés
keveredés a két nyelvet.

920
00:41:34,870 --> 00:41:38,100
Megvan HTML én címkék és én
tulajdonítja, majd hirtelen,

921
00:41:38,100 --> 00:41:40,100
idézőjelek között, azt kell
A második nyelv ma

922
00:41:40,100 --> 00:41:43,830
nevű CSS, amely megint csak ezek a
kulcs érték párok vagy ezeket a tulajdonságokat

923
00:41:43,830 --> 00:41:45,280
választja el.

924
00:41:45,280 --> 00:41:47,700
>> Kiderül, hogy mennyi
mint C-ben, ahol

925
00:41:47,700 --> 00:41:50,550
lehet kezdeni faktort ki
Néhány kódot header fájlok,

926
00:41:50,550 --> 00:41:53,520
így tehetünk ugyanazt a HTML-ben.

927
00:41:53,520 --> 00:41:56,030
És egy lépés, hogy a következő.

928
00:41:56,030 --> 00:42:02,230
Figyeljük meg, hogy ez a verzió, CSS1.html van
Szerkezetileg pontosan ugyanazt a weboldalt.

929
00:42:02,230 --> 00:42:05,250
Így kaptam egy csomó
A divs, de ez alkalommal, én már

930
00:42:05,250 --> 00:42:07,220
megszabadult a borítás
div mint látni fogod.

931
00:42:07,220 --> 00:42:12,390
>> És adtam a három divs
felső, középső és alsó, egyedi azonosítók.

932
00:42:12,390 --> 00:42:14,760
Ez szép és jó, mert a
hogy az olyan részlegek

933
00:42:14,760 --> 00:42:18,715
Az oldal egyedi azonosítók,
Azt lehet hivatkozni rájuk máshol.

934
00:42:18,715 --> 00:42:19,215
Ahol?

935
00:42:19,215 --> 00:42:21,070
Nos, hadd lépjünk fel.

936
00:42:21,070 --> 00:42:24,070
És eddig bármikor átnéztük
élén egy weboldalt, mi

937
00:42:24,070 --> 00:42:28,560
az egyetlen tag is megvolt a
a feje egy weboldal?

938
00:42:28,560 --> 00:42:29,740
Egy kicsit hangosabban.

939
00:42:29,740 --> 00:42:30,799
Csak a címet eddig.

940
00:42:30,799 --> 00:42:32,590
De kiderül, van
néhány más dolog

941
00:42:32,590 --> 00:42:35,840
akkor tedd oda, egyik
amely úgy hívják stílusban tag.

942
00:42:35,840 --> 00:42:37,850
Tehát egy perce néztünk
A stílus attribútum.

943
00:42:37,850 --> 00:42:39,150
Kiderült, hogy van egy stílusa tag.

944
00:42:39,150 --> 00:42:41,200
Tartozik belsejét
a feje egy internetes oldalon.

945
00:42:41,200 --> 00:42:42,840
És most észre, hogy mit csinálok.

946
00:42:42,840 --> 00:42:46,540
Van benne e
stílust tag a következő.

947
00:42:46,540 --> 00:42:51,190
Én szó szerint idéző ​​on line 20 A
Nevét egy címkét, hogy szeretnék stilizálhatja.

948
00:42:51,190 --> 00:42:53,489
>> Aztán van nyitva kapcsos zárójel
és zárt kapcsos zárójel.

949
00:42:53,489 --> 00:42:56,030
Tehát hasonló szellemiségben C, de
ismét, ez nem egy függvény,

950
00:42:56,030 --> 00:42:57,796
ez csak egy szintaktikai részletek itt.

951
00:42:57,796 --> 00:43:00,170
És akkor persze, én mondom
A böngésző, hé böngésző,

952
00:43:00,170 --> 00:43:05,210
hogy az egész test az oldal
Van egy szöveg igazítását a központtól.

953
00:43:05,210 --> 00:43:06,930
És akkor ez azt mondja, a következő.

954
00:43:06,930 --> 00:43:12,600
Hé böngésző, ha megjelenik egy HTML
eleme vagy tag az oldalon, amely

955
00:43:12,600 --> 00:43:17,040
van egy egyedi azonosítója top,
így a hash szimbólum itt csak azt jelenti,

956
00:43:17,040 --> 00:43:21,010
egyedi ötlet kiváló, megy előre,
és hogy a betűméret 36

957
00:43:21,010 --> 00:43:22,490
és font súlyú merész.

958
00:43:22,490 --> 00:43:26,840
>> Hé böngésző, egy elem, amelynek
Azonosító közepén, hogy 24 pixel.

959
00:43:26,840 --> 00:43:31,070
És hé böngésző, ha megjelenik egy
ötlete alján, hogy 12 pixel.

960
00:43:31,070 --> 00:43:33,540
A hatás a végén
pontosan sam.

961
00:43:33,540 --> 00:43:36,500
Ha bemegyek a CSS 1, a
oldal ugyanúgy néz ki.

962
00:43:36,500 --> 00:43:39,810
De mi egy lépéssel közelebb
Egy kicsit jobb design.

963
00:43:39,810 --> 00:43:44,850
Hadd menjek vissza ide CSS2
és mi mást csináltam.

964
00:43:44,850 --> 00:43:48,030
>> Most a lap nagyon, nagyon tiszta.

965
00:43:48,030 --> 00:43:50,730
Sőt, azt is illik az összes
tartalmát egy oldalon van.

966
00:43:50,730 --> 00:43:54,270
De milyen új tag tettem
bevezetett, nyilván?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
És ez nem a legjobb név egy tag,
mert ez nem egy link abban az értelemben,

969
00:43:57,853 --> 00:44:00,780
hogy tudjuk, de ez azt jelenti,
egy link egy másik fájl.

970
00:44:00,780 --> 00:44:02,890
Ez olyan, mint az éles tartalmazza a C.

971
00:44:02,890 --> 00:44:06,280
>> Ez az út a HTML
mondani hé böngésző,

972
00:44:06,280 --> 00:44:10,240
menj a tartalmát
a fájl neve css2.css.

973
00:44:10,240 --> 00:44:12,880
A kapcsolat, nekem,
az, hogy ez egy stíluslapot.

974
00:44:12,880 --> 00:44:17,980
És valóban, ez az, amit az egyik
S a Cascading Style Sheets segítségével.

975
00:44:17,980 --> 00:44:20,350
Ez egy stíluslapot.

976
00:44:20,350 --> 00:44:23,120
Ez csak a szöveget tartalmazó fájl
egy csomó ingatlan.

977
00:44:23,120 --> 00:44:25,940
Ez egy csomó stílusok
hogy az alkalmazni kívánt az oldalra.

978
00:44:25,940 --> 00:44:28,860
>> És így ez látszólag
hivatkozva egy második fájlban.

979
00:44:28,860 --> 00:44:32,970
És ha kinyitom, hogy CSS2.css,
észre, hogy amit tettem

980
00:44:32,970 --> 00:44:35,900
van másolja a
E át ezt a fájlt.

981
00:44:35,900 --> 00:44:38,220
És most, akkor is, ha soha nem
kódolt ezt a dolgot, mielőtt,

982
00:44:38,220 --> 00:44:40,700
csak úgy a
közmondásos mérnöki kalap

983
00:44:40,700 --> 00:44:44,220
A, miért van ez a
jobb tervezés Valószínűleg?

984
00:44:44,220 --> 00:44:48,910
Faktoring ki azokat a CSS tulajdonságokat,
helyezzük el őket a saját fájl.

985
00:44:48,910 --> 00:44:51,330
Annak ellenére, hogy megoldotta ezt
probléma, mint öt perccel ezelőtt

986
00:44:51,330 --> 00:44:52,600
a legelső verzió.

987
00:44:52,600 --> 00:44:55,730
>> Már nem javult a
Oldal stilisztikailag,

988
00:44:55,730 --> 00:44:57,520
ez csak jobb
tervezés bizonyos értelemben.

989
00:44:57,520 --> 00:44:58,990
Miért gondolod?

990
00:44:58,990 --> 00:45:01,510
Igen.

991
00:45:01,510 --> 00:45:02,260
Rugalmasabb, hogyan?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Igen.

994
00:45:05,540 --> 00:45:07,373
Tehát ha azt szeretnénk, hogy menjen
vissza, és változtatni a dolgokat,

995
00:45:07,373 --> 00:45:09,540
Most, hogy van egy helyen
ahol módosíthatja a dolgokat.

996
00:45:09,540 --> 00:45:11,622
És valóban, valami
mint a probléma állítva hét,

997
00:45:11,622 --> 00:45:13,690
ahol mi végre egy
kereskedelmi készletek honlapján,

998
00:45:13,690 --> 00:45:15,523
hogy megy, hogy egy
csomó oldalt.

999
00:45:15,523 --> 00:45:17,620
És akkor lenne igazán
bosszantó, ha úgy dönt, hm,

1000
00:45:17,620 --> 00:45:21,630
Én nem nagyon szeretem 24 pixel, azt akarom,
hogy legyen 28 pixel vagy kicsit nagyobb.

1001
00:45:21,630 --> 00:45:23,550
És akkor meg kell csinálni egy
a globális keresés és csere

1002
00:45:23,550 --> 00:45:27,560
vagy nyissa ki az összes webhelye fájlok
egyszerűen, hogy valóban változtatni egy értéket.

1003
00:45:27,560 --> 00:45:31,290
Faktoringcégek ki ezeket a stílusokat
egy központi helyen,

1004
00:45:31,290 --> 00:45:34,720
akkor most nyit egy szöveges fájlt
A CS50IDE bármelyik programba,

1005
00:45:34,720 --> 00:45:36,479
megváltoztatni, mentse el, és kész.

1006
00:45:36,479 --> 00:45:38,270
Már szaporított azoknak
változásokat mindenütt.

1007
00:45:38,270 --> 00:45:42,450
És, hogy ugyanez lenne
Egy pont h fájl is.

1008
00:45:42,450 --> 00:45:46,697
Tehát bármilyen kérdése így
amennyiben ezen szintaxis?

1009
00:45:46,697 --> 00:45:48,530
Rendben, így már
megtettem mindent úgy tűnik,

1010
00:45:48,530 --> 00:45:51,170
kivéve ténylegesen végrehajtja hivatkozásokat.

1011
00:45:51,170 --> 00:45:52,740
És akkor menjünk előre, és erre.

1012
00:45:52,740 --> 00:45:54,830
Hadd menjen előre, és
hozzon létre egy új fájlt itt.

1013
00:45:54,830 --> 00:45:59,970
Megyek hívom
link.html, tedd a mai kódot.

1014
00:45:59,970 --> 00:46:03,000
>> És fogok csinálni nyitott
konzol doc típusú html.

1015
00:46:03,000 --> 00:46:05,970
Mellesleg, ez a dolog a
top, ez a doki típusú nyilatkozatot,

1016
00:46:05,970 --> 00:46:08,420
ez az egyetlen, ami fura
A felkiáltójel.

1017
00:46:08,420 --> 00:46:12,100
Csak meg kell csinálni ott, és ez
azt jelenti, hogy a használt HTML 5-ös verzióját.

1018
00:46:12,100 --> 00:46:14,460
Régebbi verziói
nyelven kellett sokáig

1019
00:46:14,460 --> 00:46:16,400
húrok, hogy szükség helyezték.

1020
00:46:16,400 --> 00:46:18,620
Tehát itt van egy példa az úgynevezett link.

1021
00:46:18,620 --> 00:46:20,950
>> Szükségem van egy test látok a weboldal itt.

1022
00:46:20,950 --> 00:46:29,770
És itt, a href egyenlők
mondjuk HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
és a kedvenc honlapján, azt fogjuk mondani.

1024
00:46:35,420 --> 00:46:38,550
Rendben, tehát egy nagyon
ártalmatlan, felhasználóbarát oldal.

1025
00:46:38,550 --> 00:46:42,950
Ha én most menj be az én könyvtár
felsorolja itt, és megnyitja link.html,

1026
00:46:42,950 --> 00:46:44,780
van hiper szöveget.

1027
00:46:44,780 --> 00:46:47,410
>> És valóban, ez az, ahol
A H HTTP származik.

1028
00:46:47,410 --> 00:46:51,580
Hypertext Transfer Protocol
körülbelül át a szöveget

1029
00:46:51,580 --> 00:46:53,840
amely hivatkozásokat az egyéb források.

1030
00:46:53,840 --> 00:46:58,210
És valóban, itt van az ismerős,
ha retro, linket, hogy ha rákattint,

1031
00:46:58,210 --> 00:47:02,607
valóban elvezet Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Most, Ó, ez csak később várható.

1033
00:47:03,940 --> 00:47:08,970
Rendben, így most, mik
Az mit jelent ez a?

1034
00:47:08,970 --> 00:47:11,610
>> És őszintén szólva, a világ kezd
hogy egy kicsit jobban ismeri

1035
00:47:11,610 --> 00:47:15,090
és még egy kicsit rémisztőbb
hanem egy kicsit több,

1036
00:47:15,090 --> 00:47:17,840
önálló védhető, ha elkezdi
megérteni ezeket a dolgokat.

1037
00:47:17,840 --> 00:47:21,610
Mivel esély, néhányan közületek, ha megy
révén a Gmail spam mappába vagy akár

1038
00:47:21,610 --> 00:47:23,990
Ön postaládájába, akkor már valószínűleg
ütött valamilyen e-mail

1039
00:47:23,990 --> 00:47:26,980
hogy kérdezi, hogy változtassa meg
jelszó talán, vagy talán ellenőrzik

1040
00:47:26,980 --> 00:47:28,910
a PayPal hitelesítő vagy miegymás.

1041
00:47:28,910 --> 00:47:34,510
>> És valóban, kaphatta
valamit, hogy azt mondja, mint kattintson ide

1042
00:47:34,510 --> 00:47:42,260
visszaállítani a PayPal jelszavát.

1043
00:47:42,260 --> 00:47:44,130
És most, észre, ha
ez nem Disney.com

1044
00:47:44,130 --> 00:47:51,600
de mint badplace.com és
reload, vegye figyelembe, hogy a szöveg itt

1045
00:47:51,600 --> 00:47:53,710
Mondhatnánk semmit egyáltalán.

1046
00:47:53,710 --> 00:47:55,260
És valóban, ez csak szavak.

1047
00:47:55,260 --> 00:48:04,610
Miért nem én tényleg szuper rosszindulatú
és azt mondják http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Kattintson ide vissza a PayPal
jelszót és most újratöltődik.

1049
00:48:14,090 --> 00:48:16,220
Ez úgy néz ki elég legitim, nem igaz?

1050
00:48:16,220 --> 00:48:20,470
Úgy értem, én nem kattint
egy e-mail, hogy csak azt mondja, ez az.

1051
00:48:20,470 --> 00:48:22,450
De észre a kettősséget itt.

1052
00:48:22,450 --> 00:48:26,880
Azt mondja www.paypal.com,
és valóban, várj egy percet,

1053
00:48:26,880 --> 00:48:29,210
tudjuk, hogy azt szeretné,
Az ok a biztonság.

1054
00:48:29,210 --> 00:48:35,450
Szóval, menjen a www.paypal.com HTTPS,
de ha még soha nem csináltam ilyet,

1055
00:48:35,450 --> 00:48:38,182
ne kerüljön a szokása,
lebeg kis hivatkozik erre.

1056
00:48:38,182 --> 00:48:39,890
És nehéz látni
a képernyőn ott,

1057
00:48:39,890 --> 00:48:41,340
és ez még nem minden, hogy könnyebb itt.

1058
00:48:41,340 --> 00:48:43,615
De ahogy itt le
Az apró kis sarok

1059
00:48:43,615 --> 00:48:45,740
nem a böngésző ténylegesen
mondani, hogy megyünk

1060
00:48:45,740 --> 00:48:48,850
hogy badplace.com helyett Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Most, hová megyünk ezzel?

1062
00:48:51,620 --> 00:48:54,859
A példák mindegyike tettünk ma,
amit nehéz kódolni, és gépelt kézzel.

1063
00:48:54,859 --> 00:48:56,900
A web hihetetlenül
érdektelen, ha kemény

1064
00:48:56,900 --> 00:48:59,844
kódot a weboldalakat úgy, hogy tartalmat
statikus, és soha nem változnak.

1065
00:48:59,844 --> 00:49:01,760
Természetesen, minden kedves
kedvenc weboldalak ma,

1066
00:49:01,760 --> 00:49:04,470
függetlenül attól, hogy a Gmail vagy a Twitter, vagy
Facebook vagy tetszőleges számú mások

1067
00:49:04,470 --> 00:49:05,290
dinamikusak.

1068
00:49:05,290 --> 00:49:07,340
Ők változik
válaszul felhasználói beviteli

1069
00:49:07,340 --> 00:49:08,840
csakúgy, mint a Google keresési eredményei között.

1070
00:49:08,840 --> 00:49:12,415
>> És így szerdán, amit csinálunk, az
hagyjuk HTML és CSS bevezetése

1071
00:49:12,415 --> 00:49:14,290
mögöttünk és mi
értetődőnek, hogy most

1072
00:49:14,290 --> 00:49:16,640
tudod, és bemutatjuk
egy új programozási nyelv

1073
00:49:16,640 --> 00:49:19,050
nevű PHP, ami tetszik
C, fog adni nekünk

1074
00:49:19,050 --> 00:49:22,450
a hatalom, hogy valóban olyan programokat,
hogy maguk a kimenetet.

1075
00:49:22,450 --> 00:49:25,900
Ebben az esetben fogjuk használni
PHP-vel dinamikusan web

1076
00:49:25,900 --> 00:49:27,340
oldalak ezzel az új nyelvet.

1077
00:49:27,340 --> 00:49:28,989
Így még az, hogy szerdán.

1078
00:49:28,989 --> 00:49:29,530
Majd találkozunk.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [Zenelejátszási]

1081
00:49:37,380 --> 00:52:38,864