1
00:00:00,000 --> 00:00:03,486
>> [MUSIK SPELA]

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

3
00:00:10,460 --> 00:00:14,250
>> DAVID J MALAN: Detta är CS50 och
Detta är början på veckan 7.

4
00:00:14,250 --> 00:00:15,060
Så välkommen tillbaka.

5
00:00:15,060 --> 00:00:17,540
Och ni kanske minns att
i problembild fyra,

6
00:00:17,540 --> 00:00:21,510
Det var lite av en skattjakt
för några fantastiska priser vari

7
00:00:21,510 --> 00:00:24,219
när du återställa foton från
personal både här och i New Haven,

8
00:00:24,219 --> 00:00:27,468
du utmanas att hitta så många av
dessa datavetare som du kan.

9
00:00:27,468 --> 00:00:29,550
Och vi har fått en hel
gäng inlagor.

10
00:00:29,550 --> 00:00:31,930
Trodde jag skulle dela några
med er här i dag.

11
00:00:31,930 --> 00:00:35,100
>> Och vi kommer att lägga alla dessa online.

12
00:00:35,100 --> 00:00:39,310
Men framför allt, jag ville
uppmärksamma er att-- väl man,

13
00:00:39,310 --> 00:00:42,670
Sam var en hel del av dem
i allmänhet posera så här.

14
00:00:42,670 --> 00:00:45,750
Men det verkar det som om
i morse, vinnaren

15
00:00:45,750 --> 00:00:51,170
var en viss person som heter Ken med
24 av de anställda som fångades på kamera

16
00:00:51,170 --> 00:00:54,600
eller några fler när du tar in
konto flera anställda på bilderna.

17
00:00:54,600 --> 00:00:58,300
På bilden här är Ken nästa
Maria i New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Nu, Ken, fast, vänder
ut är lite av ett hörn fall

19
00:01:01,300 --> 00:01:02,880
som har ännu inte hänt förut.

20
00:01:02,880 --> 00:01:05,713
Det visar sig att det inte förekommer
till mig att sätta finstilta i problem

21
00:01:05,713 --> 00:01:09,710
ange fyra som säger att personalen är
berättigade till de fantastiska priser

22
00:01:09,710 --> 00:01:13,130
eftersom Ken är, naturligtvis, en av
fotograferna med vår personal.

23
00:01:13,130 --> 00:01:16,820
Nu, med det sagt, han
ursprungligen skrev till mig att säga

24
00:01:16,820 --> 00:01:19,180
Skicka inte dessa bilder på nätet.

25
00:01:19,180 --> 00:01:21,630
Jag tror till stor del
eftersom de flesta av bilderna

26
00:01:21,630 --> 00:01:24,499
att bilden tog ut
lite ungefär så här.

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

28
00:01:25,040 --> 00:01:28,990
>> Men Ken vill att jag ska lugna dig
att han är en mycket bra fotograf,

29
00:01:28,990 --> 00:01:33,190
Han är en professionell, tar han
bilder som inte är suddiga,

30
00:01:33,190 --> 00:01:37,270
som är bättre i fokus, och han
tog en hel del av vår egen personal.

31
00:01:37,270 --> 00:01:40,370
Men snarare än bara erkänna
Ken, vad vi trodde vi skulle göra

32
00:01:40,370 --> 00:01:43,390
är att gå igenom listan över
faktiska studenter som inkommit.

33
00:01:43,390 --> 00:01:48,640
Och det visar sig att Lance med
15 bilder per morse

34
00:01:48,640 --> 00:01:50,030
var vår vinnare.

35
00:01:50,030 --> 00:01:55,730
>> Och bilden här är Lance med Colton,
med Skaz, med mig själv och med Sam.

36
00:01:55,730 --> 00:02:00,230
Men sedan visar det sig att i
11:46, så bara lite sedan,

37
00:02:00,230 --> 00:02:04,380
Jag gick tillbaka till min e-post och hittade
att vi hade ännu en inlämning

38
00:02:04,380 --> 00:02:08,300
av en student vid namn Bonnie
vars e sa bara detta.

39
00:02:08,300 --> 00:02:10,800
Kommer inte ljuga, jag
göra detta under lektionstid.

40
00:02:10,800 --> 00:02:17,620
Och sedan fortsatte att fästa bara
14 bilder, en blyg av Lance s 15.

41
00:02:17,620 --> 00:02:22,690
>> Men i Bonnie foton, visar det
ut fanns flera anställda, Sam

42
00:02:22,690 --> 00:02:25,960
bland dem, så vad vi trodde vi
skulle göra är erkänner båda dessa.

43
00:02:25,960 --> 00:02:29,240
Så förutom att få Dropbox
utrymme att alla som deltog

44
00:02:29,240 --> 00:02:33,900
får dessa två avsnitt kommer också
få en trevlig tillgodoses lunch för dem

45
00:02:33,900 --> 00:02:36,100
och deras avsnitt
parar den kommande veckan.

46
00:02:36,100 --> 00:02:38,970
Och så du kommer att höra från oss,
Lance och Bonnie, om det.

47
00:02:38,970 --> 00:02:40,002
Så stort grattis till dem.

48
00:02:40,002 --> 00:02:42,210
Nu, de av er som skulle
som lunch mer allmänt

49
00:02:42,210 --> 00:02:45,320
vet att CS50 lunch i Cambridge
och New Haven är på fredag.

50
00:02:45,320 --> 00:02:48,510
Gå till CS50 hemsida snedstreck OSA.

51
00:02:48,510 --> 00:02:49,800
Och nu ett ord på seminarier.

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

53
00:02:50,730 --> 00:02:52,490
Så vi närmar
punkt av terminen

54
00:02:52,490 --> 00:02:55,200
där du ska börja
tänka på examensarbeten.

55
00:02:55,200 --> 00:02:59,309
Och faktiskt, på bara en bit, kommer
så kallade pre förslag bero.

56
00:02:59,309 --> 00:03:01,850
Så pre förslag är tänkta att
vara ganska låg påverkan och verkligen

57
00:03:01,850 --> 00:03:04,109
bara en möjlighet för
du att komponera ett kort meddelande

58
00:03:04,109 --> 00:03:06,900
din undervisning karl att underrätta
honom eller henne vad du tänker dig

59
00:03:06,900 --> 00:03:09,140
kanske vill göra för din slutprojekt.

60
00:03:09,140 --> 00:03:11,730
>> Nu, många studenter hamnar
gör webbaserade examensarbeten.

61
00:03:11,730 --> 00:03:13,800
Och naturligtvis, vi är bara
Nu förra veckan i detta

62
00:03:13,800 --> 00:03:15,890
och därefter dyka i webbprogrammering.

63
00:03:15,890 --> 00:03:18,200
Så inte oroa dig om du
har absolut ingen aning om hur

64
00:03:18,200 --> 00:03:21,594
du skulle bygga de idéer som
du kan ha i ditt sinne.

65
00:03:21,594 --> 00:03:24,510
Detta är egentligen bara en drivande funktionen
att få dig att tänka och tala

66
00:03:24,510 --> 00:03:25,650
med TF om det.

67
00:03:25,650 --> 00:03:28,810
Men för att hjälpa dig med det, och
med examensarbeten i slutändan,

68
00:03:28,810 --> 00:03:31,750
vet att CS50 har en tradition
att erbjuda seminarier.

69
00:03:31,750 --> 00:03:36,084
>> Och dessa är valfria, händer på,
eller föreläsning baserad på möjligheterna

70
00:03:36,084 --> 00:03:39,000
att lära sig mer om ämnen som är
en liten underordnade kursens

71
00:03:39,000 --> 00:03:43,310
Planen, men icke desto mindre underbart
material för att driva slutprojekt.

72
00:03:43,310 --> 00:03:46,840
Och så detta är den lista som är
CS50 personal här i New Haven

73
00:03:46,840 --> 00:03:48,600
har kommit med för
i år om iOS

74
00:03:48,600 --> 00:03:50,730
programmering, Android
programmering, spelutveckling,

75
00:03:50,730 --> 00:03:54,480
och klasar av fler verktyg
och språk och tekniker.

76
00:03:54,480 --> 00:03:56,780
>> Så håll ett öga på CS50: s webbplats.

77
00:03:56,780 --> 00:04:00,110
Och under tiden, om du vill
registrera ditt intresse för någon av dessa,

78
00:04:00,110 --> 00:04:02,510
gå till CS50: s snedstreck register.

79
00:04:02,510 --> 00:04:05,770
Och vi kommer sedan att följa upp att den
dagar och flygtider och platser

80
00:04:05,770 --> 00:04:09,090
och everything-- de flesta allt kommer
vara strömmas och även tillgängliga på begäran

81
00:04:09,090 --> 00:04:11,750
efter om du faktiskt inte kan göra det.

82
00:04:11,750 --> 00:04:15,800
Så utan vidare, vi
slutade förra gången med GET.

83
00:04:15,800 --> 00:04:19,610
>> Och det var som det budskap som var
insidan av den virtuella kuvert, minns,

84
00:04:19,610 --> 00:04:23,960
att vi gått från router till router till
router mellan en webbläsare och en webb

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

86
00:04:24,487 --> 00:04:26,695
Och det budskapet såg
lite ungefär så här.

87
00:04:26,695 --> 00:04:29,700
Detta var mer svårbegripliga budskap som
var faktiskt inuti ett kuvert

88
00:04:29,700 --> 00:04:34,440
skrivet på ett papper vars
första raden säger bokstavligen, få snedstreck.

89
00:04:34,440 --> 00:04:37,830
>> Och precis som en sanity check,
vad gjorde snedstreck betecknar?

90
00:04:37,830 --> 00:04:40,455
Vad betyder slash menar när
begär en hemsida?

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

92
00:04:43,070 --> 00:04:44,250
Du begär det hela tiden.

93
00:04:44,250 --> 00:04:47,333
De flesta någon gång du besöker en webbplats, du
faktiskt inte skriva in ett filnamn.

94
00:04:47,333 --> 00:04:50,960
Du har förmodligen bara gå till Facebook.com,
ange, gmail.com, eller liknande.

95
00:04:50,960 --> 00:04:52,260
Och vad snedstreck representerar?

96
00:04:52,260 --> 00:04:53,506
Vilken fil?

97
00:04:53,506 --> 00:04:54,630
Eller vilken sida, speciellt?

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

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

100
00:05:00,720 --> 00:05:01,810
Så standardsidan.

101
00:05:01,810 --> 00:05:04,810
Så om du inte anger en fil
namn som vi kommer att börja se,

102
00:05:04,810 --> 00:05:07,750
du faktiskt bara begär
ge mig standardsida för Facebook

103
00:05:07,750 --> 00:05:10,800
eller ge mig min inkorg eller ge
mig standardsidan av nyheter

104
00:05:10,800 --> 00:05:12,510
på CNN: s hemsida eller liknande.

105
00:05:12,510 --> 00:05:15,220
Och en server svarar sedan på
meddelandet med något

106
00:05:15,220 --> 00:05:18,420
så här, att säga ja, jag
tala HTTP version 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, vilket är en status
kod som vi människor sällan

108
00:05:21,130 --> 00:05:22,790
någonsin se att det är bra.

109
00:05:22,790 --> 00:05:26,640
Eftersom det innebär OK, begäran
mottogs och hanteras på rätt sätt.

110
00:05:26,640 --> 00:05:28,960
Och typ innehållet
uppenbarligen i svaret

111
00:05:28,960 --> 00:05:31,170
är ganska ofta, men inte alltid, text.

112
00:05:31,170 --> 00:05:32,580
Och specifikt HTML.

113
00:05:32,580 --> 00:05:34,760
Och det är faktiskt
där vi tittar på i dag.

114
00:05:34,760 --> 00:05:37,140
>> Så i själva verket kommer jag att gå
framåt och öppna upp en webbläsare.

115
00:05:37,140 --> 00:05:40,410
Jag kommer att använda Chrome, kan du använda
de flesta någon webbläsaren i de kommande veckorna.

116
00:05:40,410 --> 00:05:42,410
Vi rekommenderar generellt Chrome
eftersom det är särskilt

117
00:05:42,410 --> 00:05:43,750
bra för programutvecklare.

118
00:05:43,750 --> 00:05:46,070
Det har fått en hel del inbyggd
verktyg som gör det lättare

119
00:05:46,070 --> 00:05:49,800
att utveckla inte bara HTML och CSS,
saker som vi kommer att börja tala om i dag,

120
00:05:49,800 --> 00:05:51,530
men även andra språk.

121
00:05:51,530 --> 00:05:55,530
>> Och jag kommer att gå vidare och gå att--
Jag kommer att kontrollera Klicka eller höger

122
00:05:55,530 --> 00:05:57,210
klicka var som helst på en webbsida.

123
00:05:57,210 --> 00:05:59,070
Och jag kommer att gå till Inspektera Element.

124
00:05:59,070 --> 00:06:03,850
Och jag kommer att justera min
skärm bara lite här.

125
00:06:03,850 --> 00:06:05,790
Låt mig att flytta detta till botten.

126
00:06:05,790 --> 00:06:08,140
Så det här är vad som kallas
Chrome Inspector.

127
00:06:08,140 --> 00:06:11,010
Så det här är som en felsökning
verktyg inbyggt i Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Alla ni redan har här
Om du har använt Chrome.

129
00:06:13,520 --> 00:06:17,169
Och det gör att du kan se vad som händer
på under huven på en viss webbsida.

130
00:06:17,169 --> 00:06:19,210
Så låt oss faktiskt ta en
titta på detta på följande sätt.

131
00:06:19,210 --> 00:06:21,251
Den har långt fler funktioner
och vi bryr oss om i dag.

132
00:06:21,251 --> 00:06:22,760
Men det finns dessa flikar hit.

133
00:06:22,760 --> 00:06:25,890
Elements, nätverk, källor,
tidslinje, och några andra saker.

134
00:06:25,890 --> 00:06:27,800
Jag kommer att titta på
Nätverk för ett ögonblick.

135
00:06:27,800 --> 00:06:30,500
>> Och det är lite överväldigande
vid första anblicken här.

136
00:06:30,500 --> 00:06:34,190
Men vad jag ska göra är att låta
mig förenkla det lite.

137
00:06:34,190 --> 00:06:37,560
Jag kommer att slå på
inspelning ljus så att det är rött.

138
00:06:37,560 --> 00:06:39,140
Och jag kommer att säga bevara log.

139
00:06:39,140 --> 00:06:41,015
Och detta är bara en liten
jag räknat ut

140
00:06:41,015 --> 00:06:44,120
över tid som kommer att spara
allt som händer i webbläsaren.

141
00:06:44,120 --> 00:06:50,030
Och nu ska jag gå
till http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Faktiskt, låt oss göra www
för bra åtgärd, snedstreck.

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

144
00:06:53,643 --> 00:06:56,180
Så en webbadress som många av
du kanske har besökt.

145
00:06:56,180 --> 00:06:58,830
Och nu Facebooks web
sida kommer upp på toppen.

146
00:06:58,830 --> 00:07:02,350
Och sedan en massa
grejer flög förbi längst ned.

147
00:07:02,350 --> 00:07:04,830
Och i själva verket visar det sig att
när du besöker Facebook.com,

148
00:07:04,830 --> 00:07:09,320
du är inte bara att göra en HTTP-begäran,
det visar sig att gå till Facebook.com

149
00:07:09,320 --> 00:07:14,320
sänder 41 av dessa höljen,
alla med sin egen get begäran

150
00:07:14,320 --> 00:07:18,360
såsom indikeras, om än bakom skärmen
här, vid den nedre delen av skärmen,

151
00:07:18,360 --> 00:07:24,040
Det tyder på att, ja, min
webbläsare gjorde 41 ansökningarna.

152
00:07:24,040 --> 00:07:29,689
>> Och totalt överlät 861
kilobyte och det tog någon anledning

153
00:07:29,689 --> 00:07:31,730
så många som åtta sekunder
för att ladda ner allt detta.

154
00:07:31,730 --> 00:07:33,790
Så det är faktiskt lite konstigt
att Facebooks webbplats skulle ta det

155
00:07:33,790 --> 00:07:35,600
lång, men så var det i det här fallet.

156
00:07:35,600 --> 00:07:39,520
Nu, allt detta jag bryr mig egentligen inte
om undantag för den översta begäran.

157
00:07:39,520 --> 00:07:46,440
Så låt oss gå till denna en rätt här
och låt mig zooma ut för bara ett ögonblick.

158
00:07:46,440 --> 00:07:47,754
>> Och låt mig in på den här.

159
00:07:47,754 --> 00:07:50,670
Så vad jag har gjort till vänster trots
det finns en hel del som pågår hit

160
00:07:50,670 --> 00:07:53,360
är jag har markerat
Facebook.com och sedan

161
00:07:53,360 --> 00:07:56,540
märker att jag rulla ner,
rulla ner, rulla ner,

162
00:07:56,540 --> 00:07:58,330
att begära rubriker.

163
00:07:58,330 --> 00:08:01,720
Och ser du att Chrome visar
mig huvudsak inre innehåll

164
00:08:01,720 --> 00:08:02,810
av begäran jag gjorde.

165
00:08:02,810 --> 00:08:06,130
Det är inte formatering i riktigt samma
sätt, men märker att det finns omnämnande av få,

166
00:08:06,130 --> 00:08:09,481
märka det finns omnämnande av värden,
Facebook.com, banan, eller snedstreck,

167
00:08:09,481 --> 00:08:10,730
vilket är den fil jag begärde.

168
00:08:10,730 --> 00:08:12,930
>> Och sedan om jag rulla
säkerhetskopiera, vi ska faktiskt

169
00:08:12,930 --> 00:08:17,270
se att det Facebook tillbaka
för mig är alla dessa rubriker.

170
00:08:17,270 --> 00:08:21,040
Så inne i den virtuella kuvert
faktiskt finns en hel del nyckelpar värde.

171
00:08:21,040 --> 00:08:23,130
Ett ord, ett kolon, och sedan ett värde.

172
00:08:23,130 --> 00:08:25,050
Ett ord, ett kolon och ett värde.

173
00:08:25,050 --> 00:08:26,160
Dessa är så kallade rubriker.

174
00:08:26,160 --> 00:08:31,860
Och det finns mycket mer i detalj här än
vi faktiskt bryr sig om just nu.

175
00:08:31,860 --> 00:08:33,750
>> Men det är näst
sista där nere,

176
00:08:33,750 --> 00:08:38,809
märker, att Facebook.com server,
sannerligen sagt här kommer lite text HTML.

177
00:08:38,809 --> 00:08:41,409
Så allt detta är att säga
att när du begär en webbsida

178
00:08:41,409 --> 00:08:44,300
sida från en webbläsare till en
server, svarar servern

179
00:08:44,300 --> 00:08:47,630
med ett hölje av sin egen
inuti vilket är text.

180
00:08:47,630 --> 00:08:49,020
Med andra ord, HTML.

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

182
00:08:50,590 --> 00:08:53,200
Vilket är ett annat språk
att vi inför i dag

183
00:08:53,200 --> 00:08:57,740
att människor eller datorer genererar
för att genomföra webbsidor.

184
00:08:57,740 --> 00:08:59,580
>> Specifikt, låt oss titta på det här.

185
00:08:59,580 --> 00:09:03,277
Jag ska nu gå tillbaka
Facebooks webbplats.

186
00:09:03,277 --> 00:09:05,360
Och jag ska bara
kontroll klicka eller högerklicka

187
00:09:05,360 --> 00:09:07,634
och klicka på Visa Sidkälla.

188
00:09:07,634 --> 00:09:10,550
Och även om du inte använder Chrome,
IE kan göra detta, Firefox kan göra detta,

189
00:09:10,550 --> 00:09:14,060
Safari kan göra detta, även om menyn
alternativ kan se lite annorlunda ut.

190
00:09:14,060 --> 00:09:18,990
Och detta är HTML som Mark och
företag på Facebook har skrivit.

191
00:09:18,990 --> 00:09:24,640
>> Och kollektivt, detta språk här
implementerar den blå och vita sidan

192
00:09:24,640 --> 00:09:26,370
att vi såg för en stund sedan.

193
00:09:26,370 --> 00:09:28,030
Nu är detta lite överväldigande.

194
00:09:28,030 --> 00:09:31,400
Men om vi tittar upp på övre vänstra, vi är
kommer att börja se vissa mönster.

195
00:09:31,400 --> 00:09:34,140
Det ser ut som det finns en hel del
av dessa öppenvinkelfäste

196
00:09:34,140 --> 00:09:35,970
och sedan finns det här nyckelordet HTML.

197
00:09:35,970 --> 00:09:38,330
Här är en annan öppen
vinkelfäste och huvud.

198
00:09:38,330 --> 00:09:41,560
>> Här är, om vi rulla ner
och ner och ner, jag är

199
00:09:41,560 --> 00:09:43,820
kommer att gå vidare och prova
att söka efter något.

200
00:09:43,820 --> 00:09:48,510
Det sätt över på höger
här är öppen fästesstommen.

201
00:09:48,510 --> 00:09:50,800
Och minns från förra
tid som vi föreslog

202
00:09:50,800 --> 00:09:53,364
att den enklaste webbsidan
att en människa kan skriva

203
00:09:53,364 --> 00:09:55,030
kan se lite ungefär så här.

204
00:09:55,030 --> 00:09:58,430
Öppna HTML-tagg, öppna huvud
tagg, öppna rubriktaggen,

205
00:09:58,430 --> 00:10:03,230
stänges sedan titel, sluten huvud, öppen
body-taggen, lite text, sluten kropp,

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

207
00:10:04,720 --> 00:10:06,290
>> Men en paus här bara ett ögonblick.

208
00:10:06,290 --> 00:10:09,030
Denna kod, även om du har
aldrig skrivit det förut

209
00:10:09,030 --> 00:10:11,864
men fortfarande inte riktigt förstår
vad som händer, ser ganska bra ut.

210
00:10:11,864 --> 00:10:12,821
Höger, det är mycket ren.

211
00:10:12,821 --> 00:10:14,120
Det är väldigt stilist trevligt.

212
00:10:14,120 --> 00:10:16,190
En hel del av indrag och vitt utrymme.

213
00:10:16,190 --> 00:10:18,020
Facebooks är det inte.

214
00:10:18,020 --> 00:10:23,190
Så varför är Facebook så mycket
värre än jag på att skriva HTML?

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

216
00:10:24,310 --> 00:10:26,899
>> Höger, är detta som en
av fem för stil.

217
00:10:26,899 --> 00:10:29,315
Det finns en övertygande skäl
för dem att skära dessa hörn.

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

219
00:10:31,069 --> 00:10:33,860
Okej, så att de inte vill
göra det lättare för dig att läsa den.

220
00:10:33,860 --> 00:10:36,940
Så i någon mening, de är
fördunklar det slags förvränga det

221
00:10:36,940 --> 00:10:40,260
åtminstone estetiskt så
att det är svårare för Myspace

222
00:10:40,260 --> 00:10:42,705
att gå och rip off sina
hemsida och HTML för det.

223
00:10:42,705 --> 00:10:45,080
Det visar sig att med program
men inklusive Chrome,

224
00:10:45,080 --> 00:10:47,020
vi kan städa upp det super lätt.

225
00:10:47,020 --> 00:10:49,420
Så det är inte riktigt så som orsak.

226
00:10:49,420 --> 00:10:51,290
Vad kan vara orsaken.

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

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

229
00:10:54,680 --> 00:10:55,890
Ja, vita kostnader rymddata.

230
00:10:55,890 --> 00:10:56,598
Vad menar du?

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

232
00:11:02,250 --> 00:11:02,979
Ja, exakt.

233
00:11:02,979 --> 00:11:06,020
Om du trycker på tabbtangenten mycket eller
mellanslagstangenten, överväga konsekvenserna.

234
00:11:06,020 --> 00:11:10,060
Så varje tangent på tangentbordet är ett
[OHÖRBAR] representerade som ett byte.

235
00:11:10,060 --> 00:11:14,560
>> Så antar att Mark eller någon av de devs
dessa dagar träffar mellanslagstangenten bara en gång

236
00:11:14,560 --> 00:11:17,899
i denna HTML-sida som
representerar Facebooks hemsida.

237
00:11:17,899 --> 00:11:19,690
Och Facebook har en hel del
av användare i dessa dagar.

238
00:11:19,690 --> 00:11:24,030
Så antar att Facebooks hemsida
besöks av en miljard människor idag.

239
00:11:24,030 --> 00:11:27,020
Och någon på Facebook har
tryck på mellanslagstangenten bara en gång.

240
00:11:27,020 --> 00:11:29,890
>> Så ett ytterligare byte,
en miljard förfrågningar,

241
00:11:29,890 --> 00:11:32,790
hur mycket mer data Facebook
överföring via Internet

242
00:11:32,790 --> 00:11:37,160
eftersom någon drabbade
mellanslagstangenten på hans eller hennes tangentbord?

243
00:11:37,160 --> 00:11:41,660
En miljard byte, eller en gigabyte
data skickas från Facebook-servrar

244
00:11:41,660 --> 00:11:43,626
till människor runt om i
värld utan goda skäl.

245
00:11:43,626 --> 00:11:44,750
Nu är det bara en plats.

246
00:11:44,750 --> 00:11:48,866
>> Tänk om vi faktiskt rengöra
grejen upp och indrag det och lagt

247
00:11:48,866 --> 00:11:50,990
en hel del tomt utrymme och
tabbtecken och utrymmen,

248
00:11:50,990 --> 00:11:53,656
du hamna utgifterna gigabyte,
om inte terra bytes mer utrymme.

249
00:11:53,656 --> 00:11:56,640
Och så super vanligt i
faktiska värld av webbutveckling

250
00:11:56,640 --> 00:11:58,950
är att minify din kod.

251
00:11:58,950 --> 00:12:01,280
Och vi kommer så småningom se
hur du kan göra detta.

252
00:12:01,280 --> 00:12:04,630
>> Men i dag, kommer vi att börja skriva kod
det är faktiskt läsas av oss människor.

253
00:12:04,630 --> 00:12:10,120
Det visar sig, men om du går tillbaka
till detta verktyg i Chrome Inspektera Element,

254
00:12:10,120 --> 00:12:12,030
tidigare var vi på fliken Network.

255
00:12:12,030 --> 00:12:15,430
Det visar sig att om du går till
element fliken vad du faktiskt se

256
00:12:15,430 --> 00:12:19,230
är Chromes ganska tryckt
version av samma HTML.

257
00:12:19,230 --> 00:12:20,640
Så vi har deobfuscated det.

258
00:12:20,640 --> 00:12:22,472
Så det är ingen match för en dator.

259
00:12:22,472 --> 00:12:24,430
Och nu kan du faktiskt
klicka runt och börja

260
00:12:24,430 --> 00:12:27,630
att se hierarki som är en webbsida.

261
00:12:27,630 --> 00:12:28,780
Så låt oss faktiskt göra detta.

262
00:12:28,780 --> 00:12:32,120
Jag kommer att gå vidare och öppna upp
min Mac ett program som heter textredigering.

263
00:12:32,120 --> 00:12:35,490
Och minns att detta är bara
en super enkel textprogram.

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

265
00:12:37,490 --> 00:12:39,820
Och jag kommer att ordagrant
Skriv följande.

266
00:12:39,820 --> 00:12:44,650
Doc typ HTML, öppna fäste
HTML, stängd fäste HTML,

267
00:12:44,650 --> 00:12:49,000
vi har huvudet på sidan här,
I slutet av huvudet på sidan här,

268
00:12:49,000 --> 00:12:52,310
en titel kommer att se ut, hallå världen.

269
00:12:52,310 --> 00:12:56,660
>> Och sedan ner här, vi behöver
kroppen av webbsidan.

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

271
00:12:58,050 --> 00:13:00,700
Och sedan i här, hallå världen.

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

273
00:13:01,270 --> 00:13:03,350
Så vi har skrivit en supersnabb webbsida.

274
00:13:03,350 --> 00:13:06,675
Jag ska spara den som
hello.html på mitt skrivbord.

275
00:13:06,675 --> 00:13:09,050
Min Mac kommer att klaga,
tänker att, vänta en minut,

276
00:13:09,050 --> 00:13:11,091
Detta är en textfil, gör
du vill kalla det .txt?

277
00:13:11,091 --> 00:13:13,300
Men nej, jag vill använda punkt HTML.

278
00:13:13,300 --> 00:13:16,140
>> Och vad är trevligt om jag
bara dubbelklicka filen,

279
00:13:16,140 --> 00:13:18,600
hello.html, här är min webbsida.

280
00:13:18,600 --> 00:13:22,564
Tyvärr, jag är
enda personen i världen

281
00:13:22,564 --> 00:13:23,980
vem som kan se den här sidan just nu.

282
00:13:23,980 --> 00:13:26,734
Eftersom vart tar det bor tydligen?

283
00:13:26,734 --> 00:13:27,650
Det är på min Mac, eller hur?

284
00:13:27,650 --> 00:13:28,470
Vilket är meningslöst.

285
00:13:28,470 --> 00:13:30,390
Som ingen i det här rummet
låt ensam på internet

286
00:13:30,390 --> 00:13:31,598
kan faktiskt besöka den sidan.

287
00:13:31,598 --> 00:13:33,820
Så idag, måste vi
införa ett annat element.

288
00:13:33,820 --> 00:13:36,720
>> Och för att göra detta, kommer jag att
gå vidare och öppna upp moln 9.

289
00:13:36,720 --> 00:13:40,090
Så moln 9 är naturligtvis en
moln baserat service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- Det har alla våra arbetsytor
körs någonstans på internet.

291
00:13:44,890 --> 00:13:48,330
Och det betyder att alla våra filer
är redan tillgängliga för allmänheten.

292
00:13:48,330 --> 00:13:49,830
Så låt oss gå vidare och göra det.

293
00:13:49,830 --> 00:13:53,670
Jag kommer att gå vidare och
skapa en ny fil NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Jag kommer att spara det som förut
som hello.html och klicka på Spara.

295
00:13:58,819 --> 00:14:01,860
Och nu bara för att spara tid, jag kommer
att gå vidare och kopiera koden klistra

296
00:14:01,860 --> 00:14:03,470
snarare än skriva om det.

297
00:14:03,470 --> 00:14:04,550
Och spara den.

298
00:14:04,550 --> 00:14:07,550
Och så nu har jag en
fil som heter hello.html.

299
00:14:07,550 --> 00:14:09,710
Men hur gör jag faktiskt
öppna den som en webbsida?

300
00:14:09,710 --> 00:14:14,120
Tja, visar det sig den inbyggd i CS50
IDE är inte bara en kompilator som clang

301
00:14:14,120 --> 00:14:16,670
och en debugger som GDB och
knippen av andra program,

302
00:14:16,670 --> 00:14:21,140
det finns faktiskt ett fullfjädrat
webbserver som kör inom CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Alla ni, det vill säga,
ha en egen webbserver.

304
00:14:23,900 --> 00:14:26,850
Och en webbserver är bara en bit
programvara vars syfte i livet

305
00:14:26,850 --> 00:14:28,220
är att tjäna upp webbsidor.

306
00:14:28,220 --> 00:14:32,490
Att lyssna efter förfrågningar från webbläsare och
svara med små virtuella kuvert

307
00:14:32,490 --> 00:14:35,290
insida som är den
innehåll som jag har skrivit.

308
00:14:35,290 --> 00:14:38,372
Så här webbserver är
faktiskt gratis och öppen källkod.

309
00:14:38,372 --> 00:14:40,830
Om öppen källkod betyder bara
mjukvara som någon annan har

310
00:14:40,830 --> 00:14:43,480
skrivit att vi alla kan
faktiskt se och ladda ner och även

311
00:14:43,480 --> 00:14:44,780
ändra källkoden.

312
00:14:44,780 --> 00:14:46,150
Och det kallas Apache.

313
00:14:46,150 --> 00:14:51,450
>> Och vi har gjort det lite lättare att
användning i CS50IDE genom att kalla den Apache 50.

314
00:14:51,450 --> 00:14:53,780
Så att det kan faktiskt
förstå följande.

315
00:14:53,780 --> 00:14:56,560
Jag kommer att säga Apache 50 start.

316
00:14:56,560 --> 00:14:58,910
Och då jag ska bara säga prick.

317
00:14:58,910 --> 00:15:01,080
Och vi ser några något
hemligt meddelande som säger

318
00:15:01,080 --> 00:15:04,640
inställning Apaches dokument [? grupp?]
hem, ubuntu, vad det nu är,

319
00:15:04,640 --> 00:15:05,770
slash arbetsyta.

320
00:15:05,770 --> 00:15:08,280
Start webbserver
Apache 2 framgångsrikt.

321
00:15:08,280 --> 00:15:11,330
>> Så lång historia kort, jag
har bara drivit en knapp

322
00:15:11,330 --> 00:15:18,000
och vände på en webbserver som är nu
lyssna på internet på TCP-port

323
00:15:18,000 --> 00:15:20,587
80 vid en specifik adress.

324
00:15:20,587 --> 00:15:22,420
Och det står här, och
detta kommer att ändras baserat

325
00:15:22,420 --> 00:15:26,550
på ditt användarnamn och andra faktorer,
men märker nu om jag klickar på denna,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard och så och
så märker att hela tiden

327
00:15:30,211 --> 00:15:31,960
Under de senaste
veckor, kanske du har

328
00:15:31,960 --> 00:15:35,200
märkt att ditt eget användarnamn
är inbäddad i det övre högra

329
00:15:35,200 --> 00:15:37,130
hörn av CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> Och som faktiskt har varit allt detta
tajma den adress där du kan

331
00:15:41,050 --> 00:15:43,574
besöka alla dina filer via webben.

332
00:15:43,574 --> 00:15:45,990
Hittills finns det ingen framhävde,
eftersom det i C, du vanligtvis

333
00:15:45,990 --> 00:15:48,073
vill att saker som körs i en
terminal, inte på nätet.

334
00:15:48,073 --> 00:15:50,800
Men i dag, vi börjar
skriver webbaserad kod

335
00:15:50,800 --> 00:15:53,350
att vi vill ha
tillgängliga på offentliga webbadresser.

336
00:15:53,350 --> 00:15:56,100
Så vad jag ska
göra är att klicka här webbadressen.

337
00:15:56,100 --> 00:16:00,880
>> Och märker att jag ser en ganska
ful index, en katalog notering,

338
00:16:00,880 --> 00:16:04,090
men vilken fil hoppar ut på dig förmodligen?

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

340
00:16:05,210 --> 00:16:07,870
Det beror på att jag sparade
filen i min arbetsyta.

341
00:16:07,870 --> 00:16:12,310
Och vad jag har sagt Apache webbservern
är att titta i Davids arbetsyta katalog.

342
00:16:12,310 --> 00:16:15,300
Och låt någon i
världen se dessa filer.

343
00:16:15,300 --> 00:16:19,050
>> Och faktiskt, om jag nu
klicka på hello.html,

344
00:16:19,050 --> 00:16:22,180
Jag ser i den här fliken just den filen.

345
00:16:22,180 --> 00:16:26,430
Nu märker, moln 9 har den blivit detta
något lite hjälp för oss.

346
00:16:26,430 --> 00:16:29,480
Inom CS50 IDE, märker att det finns
plötsligt en adressfält.

347
00:16:29,480 --> 00:16:33,690
Det beror på att även om vi är
Chrome att besöka CS50IDE,

348
00:16:33,690 --> 00:16:37,940
insidan av CS50IDE är sin egen
version av en webbläsare just nu.

349
00:16:37,940 --> 00:16:40,820
Och så i stället
komplicera saker som sådan,

350
00:16:40,820 --> 00:16:42,955
Jag kommer att gå vidare
och bara kopiera den här webbadressen.

351
00:16:42,955 --> 00:16:45,330
Jag kommer att gå vidare och bara
öppna min egen Chrome-fönster.

352
00:16:45,330 --> 00:16:47,800
Så det finns ingen magi här, ingen CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Jag kommer bara att bokstavligen klistra
min J Harvard URL och tryck på Retur.

354
00:16:51,800 --> 00:16:54,750
Och voila, nu har jag, och
i teorin, alla

355
00:16:54,750 --> 00:16:57,700
på internet, om jag har konfigurerat
behörigheter på lämpligt sätt,

356
00:16:57,700 --> 00:16:58,720
kan besöka den här filen.

357
00:16:58,720 --> 00:17:03,230
Och så nu, om jag sa
hello.html, voila, det

358
00:17:03,230 --> 00:17:06,366
är min otroligt underwhelming webbsida.

359
00:17:06,366 --> 00:17:07,740
Så låt oss göra en snabb kontroll förstånd.

360
00:17:07,740 --> 00:17:09,710
Eftersom allt detta
är konceptuell inrättas.

361
00:17:09,710 --> 00:17:13,180
Och vi har faktiskt inte riktigt
lärt dig hur man skriver HTML i sig.

362
00:17:13,180 --> 00:17:16,084
Några frågor hittills
på vad som just hände?

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

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

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

366
00:17:24,290 --> 00:17:25,800
Har CS50 äger dessa webbsidor?

367
00:17:25,800 --> 00:17:26,460
På vilket sätt?

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

369
00:17:28,947 --> 00:17:29,530
Bra fråga.

370
00:17:29,530 --> 00:17:32,429
Så CS50: s äger CS50.io.

371
00:17:32,429 --> 00:17:33,970
Vi har faktiskt köpt domännamnet.

372
00:17:33,970 --> 00:17:37,240
Och som på grund av er
logga in CS50IDE,

373
00:17:37,240 --> 00:17:39,270
ni alla får vad som kallas en underdomän.

374
00:17:39,270 --> 00:17:46,840
>> Så IDE50-Malan eller IDE50-Rob.CS50.io,
det är din unika adress inom

375
00:17:46,840 --> 00:17:47,730
vårt domännamn.

376
00:17:47,730 --> 00:17:50,850
Så när det gäller kursen
du har en egen unik adress.

377
00:17:50,850 --> 00:17:55,150
Men vi har förenklat saker genom
köpa toppdomänen, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O och sedan alla andra är
insidan av det, så att säga.

379
00:17:58,050 --> 00:17:59,890
Och vi ska återkomma till det
i ett par veckor förmodligen

380
00:17:59,890 --> 00:18:01,930
särskilt vid slutprojekt
tid, då en del av er

381
00:18:01,930 --> 00:18:03,596
kanske vill få din egen domännamn.

382
00:18:03,596 --> 00:18:06,270
Det är faktiskt relativt
okomplicerad.

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

384
00:18:06,770 --> 00:18:07,880
Så låt oss nu göra detta.

385
00:18:07,880 --> 00:18:11,910
Jag kommer att gå tillbaka till
CS50IDE, där min fil just nu,

386
00:18:11,910 --> 00:18:14,710
hello.html, är inte så intressant.

387
00:18:14,710 --> 00:18:17,130
Jag skulle vilja göra något
lite trevligare än så.

388
00:18:17,130 --> 00:18:19,440
Så jag kommer att göra något sånt här.

389
00:18:19,440 --> 00:18:21,510
Låt mig öppna paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Så det här är en fil som jag skrev i förväg.

391
00:18:23,560 --> 00:18:26,480
På toppen av det, som
alltid, har vi synpunkter.

392
00:18:26,480 --> 00:18:28,730
Men i HTML, kommentarer
ser lite annorlunda ut.

393
00:18:28,730 --> 00:18:33,270
På rad tre och linje 14, du
se syntaxen för starta en kommentar

394
00:18:33,270 --> 00:18:34,020
och avsluta en kommentar.

395
00:18:34,020 --> 00:18:36,820
>> Men ingen av de saker i
mellan frågor som funktionellt.

396
00:18:36,820 --> 00:18:40,250
Det är bara en anteckning till en
människa vad som händer här.

397
00:18:40,250 --> 00:18:43,040
Och precis som en snabb sanity
kontrollera, om jag bläddra ner,

398
00:18:43,040 --> 00:18:46,820
Vad är det uppenbara nya
tagg som vi har infört?

399
00:18:46,820 --> 00:18:52,130
Taggarna hittills har vi sett är öppna
fäste HTML, huvud, titel och kropp.

400
00:18:52,130 --> 00:18:54,400
Men vad är uppenbarligen nya nu?

401
00:18:54,400 --> 00:18:55,200
>> Ja, så p.

402
00:18:55,200 --> 00:18:57,320
P-taggen eller punkt tag.

403
00:18:57,320 --> 00:19:01,182
Och då jag lånade bara några standard
Latinska texten att utgöra mina punkter.

404
00:19:01,182 --> 00:19:03,390
För vad jag ville
visa är hur du kan

405
00:19:03,390 --> 00:19:05,859
representera textstycken i HTML.

406
00:19:05,859 --> 00:19:08,400
Och så vad börjar hända
här är att det finns redan

407
00:19:08,400 --> 00:19:09,657
ett mönster utvecklas.

408
00:19:09,657 --> 00:19:10,990
Och låt mig gå vidare och göra det.

409
00:19:10,990 --> 00:19:12,760
Låt mig först stänga av Apache.

410
00:19:12,760 --> 00:19:17,340
Och jag kommer att tala om det för att starta själv
igen inne i dagens källa sju

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

412
00:19:18,420 --> 00:19:20,100
Så att jag har tillgång till allt.

413
00:19:20,100 --> 00:19:22,230
>> Och nu, om jag går tillbaka till
den här katalogen notering,

414
00:19:22,230 --> 00:19:24,846
märker jag ser varje fil från idag.

415
00:19:24,846 --> 00:19:26,720
Och du kommer att se i
nästa problem set, vi ska

416
00:19:26,720 --> 00:19:28,594
ge dig instruktioner
för att göra just detta.

417
00:19:28,594 --> 00:19:35,210
Om jag öppnar paragraphs.html, kanske detta
samt ser ut som ett programmeringsspråk

418
00:19:35,210 --> 00:19:36,970
till dig om du inte talar eller läser latin.

419
00:19:36,970 --> 00:19:40,525
Men detta är bara tre stycken
text som är kodad i HTML.

420
00:19:40,525 --> 00:19:43,100
>> Och lägg märke till stycket
pauser mellan dem.

421
00:19:43,100 --> 00:19:46,400
Eftersom det visar sig,
och även om du

422
00:19:46,400 --> 00:19:49,210
kan vara benägna att göra detta,
medan det i den verkliga världen,

423
00:19:49,210 --> 00:19:51,370
Om du vill lägga linje
pauser mellan saker,

424
00:19:51,370 --> 00:19:55,680
du kanske helt enkelt
göra detta och tryck på Spara.

425
00:19:55,680 --> 00:19:59,460
Och nu, om jag ladda här, meddelande
att allt bara suddar ihop

426
00:19:59,460 --> 00:20:01,100
på bara en klump text.

427
00:20:01,100 --> 00:20:03,570
Eftersom HTML är typ av en dum språk.

428
00:20:03,570 --> 00:20:07,230
>> Det är tänkt att användas i en sådan
ett sätt att webbläsaren kommer endast

429
00:20:07,230 --> 00:20:09,920
gör uttryckligen vad du säger den att göra.

430
00:20:09,920 --> 00:20:12,890
Så om du inte berättar det
ge mig ett nytt stycke,

431
00:20:12,890 --> 00:20:14,569
du kommer inte att se ett nytt stycke.

432
00:20:14,569 --> 00:20:16,360
Och faktiskt, vad
webbläsare kommer att göra

433
00:20:16,360 --> 00:20:20,020
är även om du trycker på Retur,
låt oss säga om och om igen

434
00:20:20,020 --> 00:20:23,190
och igen, flyttar denna text sätt
ner på skärmen och sedan spara

435
00:20:23,190 --> 00:20:26,610
och sedan ladda om, webbläsaren går
att kollapsa allt detta vita rymden

436
00:20:26,610 --> 00:20:29,021
i bara en enda synlig blanksteg.

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

438
00:20:29,520 --> 00:20:30,869
Så det är punkt tag.

439
00:20:30,869 --> 00:20:32,910
Och så vad är mönstret
som är att utveckla här?

440
00:20:32,910 --> 00:20:37,450
Tja, det verkar vara så att
HTML handlar om att starta en tagg

441
00:20:37,450 --> 00:20:38,460
och slutar en tagg.

442
00:20:38,460 --> 00:20:39,300
Och vad är en tagg?

443
00:20:39,300 --> 00:20:41,160
Tja, det är bara en del av syntax.

444
00:20:41,160 --> 00:20:44,400
Öppna konsol, ett nyckelord,
sluten fäste, är en tagg.

445
00:20:44,400 --> 00:20:45,510
Eller börja tag.

446
00:20:45,510 --> 00:20:48,590
Och sedan när du är
gjort uttrycka dig,

447
00:20:48,590 --> 00:20:52,300
som i du är klar med stycket,
du gör så att säga motsatsen.

448
00:20:52,300 --> 00:20:55,480
Men motsatsen är inte helt bakåt.

449
00:20:55,480 --> 00:21:00,630
>> Du prefix helt enkelt samma taggens
namn med ett snedstreck som denna.

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

451
00:21:01,130 --> 00:21:02,570
Så inte så spännande.

452
00:21:02,570 --> 00:21:05,270
Och i själva verket är vi inte göra
webb allt mer intressant.

453
00:21:05,270 --> 00:21:07,630
Vad händer om jag vill göra
saker större och djärva?

454
00:21:07,630 --> 00:21:11,780
Så visar det sig att här är ett exempel
i headings.html, var i min kropp,

455
00:21:11,780 --> 00:21:17,280
Jag har en H1-tagg, H2, H3,
fyra, fem, eller sex, vilka alla

456
00:21:17,280 --> 00:21:18,310
verkar ganska svårbegripliga.

457
00:21:18,310 --> 00:21:21,010
Men om jag går öppna
exempel, låt oss ta en titt.

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

459
00:21:22,490 --> 00:21:27,030
>> Så webbläsare som standard kan ge dig text
som är stora och djärva av disparata storlekar.

460
00:21:27,030 --> 00:21:28,070
H1 är stor.

461
00:21:28,070 --> 00:21:31,240
H6 är mindre och sedan
allt annat däremellan.

462
00:21:31,240 --> 00:21:34,170
Så det är intressant men ändå
inte riktigt på webben jag vet.

463
00:21:34,170 --> 00:21:36,870
Vad händer om vi vill jag ha
något som en lista. .

464
00:21:36,870 --> 00:21:40,190
Så här är en punktlista över
tre av Harvards hus.

465
00:21:40,190 --> 00:21:41,600
>> Hur gick ni om det här?

466
00:21:41,600 --> 00:21:45,410
Tja, ta en titt på list.html.

467
00:21:45,410 --> 00:21:47,870
Och här ser vi en
lite funkiness

468
00:21:47,870 --> 00:21:49,630
men låt oss fundera på vad som händer.

469
00:21:49,630 --> 00:21:56,182
Så bygger på vad du just har sett,
UL står för oordnad lista.

470
00:21:56,182 --> 00:21:57,640
Oordnad lista betyder bara punkt.

471
00:21:57,640 --> 00:21:58,431
Det finns inga siffror.

472
00:21:58,431 --> 00:22:01,850
Det finns också något som kallas en
ordnad lista, vilket är en OL på taggen.

473
00:22:01,850 --> 00:22:05,350
Då LI, är listobjekt allt det innebär.

474
00:22:05,350 --> 00:22:07,790
>> Och så det automatiskt
nummer allt för dig.

475
00:22:07,790 --> 00:22:11,270
Men återigen, alla mina indrag
och vitt utrymme är bara för min skull.

476
00:22:11,270 --> 00:22:13,050
Webbläsaren är inte
faktiskt går till vård.

477
00:22:13,050 --> 00:22:16,670
Så även om du inte kunde
gör det, bara för att vara tydlig,

478
00:22:16,670 --> 00:22:19,880
Du bör inte trots
webbläsaren kommer fortfarande

479
00:22:19,880 --> 00:22:22,130
kunna förstå det bara bra.

480
00:22:22,130 --> 00:22:24,590
Jag slår reload i mitt
webbläsare, jag klickar reload

481
00:22:24,590 --> 00:22:26,760
och ingen förändring sker
eftersom webbläsaren fortfarande

482
00:22:26,760 --> 00:22:29,550
gör exakt som jag säger det att göra.

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

484
00:22:30,050 --> 00:22:31,340
Så det här är allt bara text.

485
00:22:31,340 --> 00:22:33,730
Nu göra något mer intressant.

486
00:22:33,730 --> 00:22:36,660
Jag kommer att gå vidare och
låna en del av denna HTML.

487
00:22:36,660 --> 00:22:40,910
Jag kommer att gå vidare och
skapa en ny fil här.

488
00:22:40,910 --> 00:22:43,370
Och vi kommer att kalla detta rick.html.

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

490
00:22:46,190 --> 00:22:48,916
Vi har oproportionerligt
begagnade något

491
00:22:48,916 --> 00:22:51,290
kallas en rick rulla i detta
klass i år, vet jag inte,

492
00:22:51,290 --> 00:22:53,880
Det bara hände organiskt.

493
00:22:53,880 --> 00:22:55,397
>> Och nu har fått utom kontroll.

494
00:22:55,397 --> 00:22:56,730
Så jag ska bara gå med det.

495
00:22:56,730 --> 00:22:59,700
Och om jag går till Google
Bilder och Rick Astley.

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

497
00:23:02,450 --> 00:23:06,170
Om du inte vet varför vi gör
detta, bara läsa på Wikipedia.

498
00:23:06,170 --> 00:23:11,520
Varje gång du har klickat på länken,
någon har skrattat någonstans.

499
00:23:11,520 --> 00:23:14,860
Och låt mig gå ahead-- dit
vi går, låt oss se den här bilden.

500
00:23:14,860 --> 00:23:16,750
>> Så här har vi en
bild i Google Bilder.

501
00:23:16,750 --> 00:23:19,390
Och låt oss anta att det är
rimligen överallt på internet.

502
00:23:19,390 --> 00:23:22,570
Så jag kommer att anta att det är OK för mig
att faktiskt sätta detta i min webbsida.

503
00:23:22,570 --> 00:23:24,820
Jag kommer att gå vidare
och kopian URL.

504
00:23:24,820 --> 00:23:28,600
Och nu om jag går tillbaka till Cloud
9, låt oss se vad jag kan göra här.

505
00:23:28,600 --> 00:23:30,630
Så här är bara en webbsida.

506
00:23:30,630 --> 00:23:39,020
Detta är Rick Astley, haha,
Jag ska nu gå tillbaka

507
00:23:39,020 --> 00:23:43,510
min webbläsare, ladda, och intressant.

508
00:23:43,510 --> 00:23:44,530
>> Var är Rick?

509
00:23:44,530 --> 00:23:46,050
Så låt mig se vad som har hänt.

510
00:23:46,050 --> 00:23:49,114
Faktiskt, jag ska
låtsas som om jag inte gjorde det.

511
00:23:49,114 --> 00:23:50,280
[OHÖRBAR] satte honom i här.

512
00:23:50,280 --> 00:23:52,520
Vi ska återkomma till det om en stund.

513
00:23:52,520 --> 00:23:54,200
Så här är rick.html.

514
00:23:54,200 --> 00:23:56,070
Så det är inte Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Så visar det sig att vi kan
faktiskt lägga honom här.

516
00:23:59,680 --> 00:24:00,830
Detta är Rick Astley.

517
00:24:00,830 --> 00:24:06,680
Jag kommer att säga ge mig en bild vars
källan är webbadressen jag bara kopierat, som

518
00:24:06,680 --> 00:24:09,110
tydligen är en glad
födelsedag något eller andra.

519
00:24:09,110 --> 00:24:13,280
>> Och nu ska jag till
Stäng taggen så här.

520
00:24:13,280 --> 00:24:15,170
Så det här är linda superlång.

521
00:24:15,170 --> 00:24:17,740
Men märker att allt jag har
gjort är öppen fäste bild,

522
00:24:17,740 --> 00:24:20,270
källa med ett attribut av detta.

523
00:24:20,270 --> 00:24:21,530
Och det är en riktigt lång webbadress.

524
00:24:21,530 --> 00:24:23,720
Och i slutet, märka detta.

525
00:24:23,720 --> 00:24:29,530
Varför har jag gjort snedstreck vinklad konsol
i stället för, liksom varje annan tagg,

526
00:24:29,530 --> 00:24:33,590
som har en öppen hållare,
IMG, stängd fäste?

527
00:24:33,590 --> 00:24:37,040
Ta bara en gissning, även om du
har ingen kännedom helst

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

529
00:24:40,410 --> 00:24:42,710
>> Så det är hur det stängs
kommandot, men varför

530
00:24:42,710 --> 00:24:45,850
det inte verkligen göra intuitivt
meningsfullt att göra något lite mer

531
00:24:45,850 --> 00:24:48,820
Verbose som nära bilden!

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

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

534
00:24:52,000 --> 00:24:55,620
Bara semantiskt, det finns ingen känsla av
starta en bild och slutar en bild,

535
00:24:55,620 --> 00:24:56,870
det är antingen det eller är det inte.

536
00:24:56,870 --> 00:25:00,960
Så det inte meningsfullt att lämna ett gap
för något annat av bilden.

537
00:25:00,960 --> 00:25:02,010
Du kan bara inte kan göra det.

538
00:25:02,010 --> 00:25:03,720
Och så syntaxen
skulle generellt vara precis

539
00:25:03,720 --> 00:25:07,910
att göra snedstreck inne
av den öppna etiketten eller starttaggen

540
00:25:07,910 --> 00:25:09,020
och då slå Spara.

541
00:25:09,020 --> 00:25:13,350
>> Så om jag nu ladda den här filen, nu
Jag har en bra webbsida matlagning här.

542
00:25:13,350 --> 00:25:15,100
Och vi kunde säkert
verkligen irritera folk

543
00:25:15,100 --> 00:25:17,010
genom inbäddning i stället
som en YouTube-länk.

544
00:25:17,010 --> 00:25:19,350
Och faktiskt, helst
du någonsin gått till YouTube,

545
00:25:19,350 --> 00:25:22,190
och låt mig faktiskt av misstag
rick rulla mig här.

546
00:25:22,190 --> 00:25:25,770
Så Rick rulle.

547
00:25:25,770 --> 00:25:29,592
Så rick Roll-- jag ska gå hit.

548
00:25:29,592 --> 00:25:31,900
>> [MUSIK SPELA]

549
00:25:31,900 --> 00:25:33,730
>> OK, en person gillade att.

550
00:25:33,730 --> 00:25:37,270
Så märker hela tiden, om du
Klicka på Dela länk, du naturligtvis

551
00:25:37,270 --> 00:25:41,390
få adressen som du faktiskt kan
bädda in i ett e-postmeddelande eller en rättsmedicinsk bild

552
00:25:41,390 --> 00:25:43,730
eller i en problembild eller en bild.

553
00:25:43,730 --> 00:25:49,055
Och nu, om jag klickar istället på bädda,
märker att hela tiden, det här

554
00:25:49,055 --> 00:25:49,680
har varit där.

555
00:25:49,680 --> 00:25:50,910
Jag kommer att gå vidare och kopiera denna.

556
00:25:50,910 --> 00:25:54,000
>> Och bara så att vi kan se det bättre, jag är
kommer att klistra in den på min textredigerare.

557
00:25:54,000 --> 00:25:55,860
Lägg märke till att detta vad
YouTube har att berätta.

558
00:25:55,860 --> 00:25:57,693
Varje gång du besöker en
YouTube-video, om du

559
00:25:57,693 --> 00:26:00,410
vill bädda in video på din
webbsida, helt enkelt ta den här.

560
00:26:00,410 --> 00:26:03,350
Så det här är ännu en
HTML-taggen som kallas en iframe.

561
00:26:03,350 --> 00:26:04,590
Eller en i linje ram.

562
00:26:04,590 --> 00:26:08,680
Så det också ser lite mer
komplexa än alla de andra.

563
00:26:08,680 --> 00:26:11,950
Så visar det sig att bilden
tagg och tydligen iframe-taggen

564
00:26:11,950 --> 00:26:13,370
ta vad är kallade attribut.

565
00:26:13,370 --> 00:26:15,710
>> Och detta är en annan
bit syntax i HTML.

566
00:26:15,710 --> 00:26:19,240
Förutom den taggens
namn, öppna fäste kodnamn,

567
00:26:19,240 --> 00:26:23,780
Du kan styra beteendet hos taggen
genom att ha en hel del attribut

568
00:26:23,780 --> 00:26:24,860
lika värde.

569
00:26:24,860 --> 00:26:26,290
Attribut lika värde.

570
00:26:26,290 --> 00:26:28,100
Och så exempelvis
YouTube talar om för oss

571
00:26:28,100 --> 00:26:31,990
om du vill att bredden på den här videon
att vara 420 pixlar och höjden

572
00:26:31,990 --> 00:26:35,470
att vara 315 pixlar, det är
hur du uttrycker det i HTML.

573
00:26:35,470 --> 00:26:38,480
>> Källan till videon går
vara att långa YouTube URL

574
00:26:38,480 --> 00:26:40,830
och sedan några andra saker
liknande ram gränsen är noll,

575
00:26:40,830 --> 00:26:43,500
så som förmodligen innebär att det finns
ingen kantlinje runt saken.

576
00:26:43,500 --> 00:26:45,450
Tillåt helskärm förmodligen
innebär att användaren

577
00:26:45,450 --> 00:26:47,840
kan klicka på en knapp och
faktiskt helskärm videon.

578
00:26:47,840 --> 00:26:52,870
Så om jag verkligen vill vara
imponerande här i Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
snarare än att använda bildtaggen, låt
mig ta bort det, istället klistra in den här.

580
00:26:58,490 --> 00:27:00,810
Och nu ladda om.

581
00:27:00,810 --> 00:27:02,500
Och nu här går vi igen.

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

583
00:27:04,979 --> 00:27:06,020
Okej, det räcker.

584
00:27:06,020 --> 00:27:08,970
Okej, så jag ska försöka
svårt att inte göra det igen.

585
00:27:08,970 --> 00:27:11,400
Så vad är några av de hämtställen här?

586
00:27:11,400 --> 00:27:15,130
Så HTML, så ful som dessa webbsidor
är är faktiskt ganska enkelt.

587
00:27:15,130 --> 00:27:16,467
Det är inte ett programmeringsspråk.

588
00:27:16,467 --> 00:27:17,550
Det har inte funktioner.

589
00:27:17,550 --> 00:27:18,410
Det har inte slingor.

590
00:27:18,410 --> 00:27:19,535
Det har inte förutsättningar.

591
00:27:19,535 --> 00:27:22,900
Allt har är dussintals
olika taggar, som var och en

592
00:27:22,900 --> 00:27:24,620
har noll eller flera attribut.

593
00:27:24,620 --> 00:27:27,320
Och i själva verket, vad är roligt om
HTML när du börjar att dyka in

594
00:27:27,320 --> 00:27:29,560
är att det är väldigt själv läraktiga.

595
00:27:29,560 --> 00:27:32,880
>> Allt som krävs är en förståelse
av den allmänna ramen för HTML.

596
00:27:32,880 --> 00:27:36,510
Vad är en tagg, vad är ett attribut,
hur gör du faktiskt konfigurera en webbsida

597
00:27:36,510 --> 00:27:37,250
som följer.

598
00:27:37,250 --> 00:27:40,720
Och allt annat är verkligen resultatet
se upp i en online-referens

599
00:27:40,720 --> 00:27:43,080
eller googla hur man gör något
teknik eller som vi har sett,

600
00:27:43,080 --> 00:27:45,371
tittar på Facebook källa
kod, tittar på en webbplats

601
00:27:45,371 --> 00:27:48,710
som du gillar när det är källkod och
förstå hur utvecklarna där

602
00:27:48,710 --> 00:27:50,550
faktiskt anges saker.

603
00:27:50,550 --> 00:27:52,180
>> Så vi kan göra bilder.

604
00:27:52,180 --> 00:27:53,994
Och faktiskt, vi gjorde det för en stund sedan.

605
00:27:53,994 --> 00:27:55,410
Låt mig gå vidare och bara visa dig.

606
00:27:55,410 --> 00:27:56,770
Här är några exempel kod.

607
00:27:56,770 --> 00:27:58,380
Om du någonsin vill se grumpy katt.

608
00:27:58,380 --> 00:28:00,620
Så märker att jag kan
har en bild-tagg här.

609
00:28:00,620 --> 00:28:02,090
Och jag har fått en kommentar ovanför.

610
00:28:02,090 --> 00:28:04,490
Jag har ett alternativ
text för tillgänglighet.

611
00:28:04,490 --> 00:28:07,250
Så någon som är med hjälp av en skärm
läsaren på grund av synen

612
00:28:07,250 --> 00:28:10,172
kan faktiskt sedan har deras
skärmläsare säger grumpy katt.

613
00:28:10,172 --> 00:28:11,880
För om de inte kan
se bilden, de

614
00:28:11,880 --> 00:28:14,504
kan åtminstone ha sin dator
berätta för dem verbalt vad det är.

615
00:28:14,504 --> 00:28:18,020
Och källan till den filen är cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Så i själva verket, om jag verkligen ville
få smart, vad jag kunde ha done--

617
00:28:22,472 --> 00:28:25,680
Jag lovar att inte gå till Rick Astley, så
Jag kommer att google för en katt i stället.

618
00:28:25,680 --> 00:28:28,290
Och om jag går till Google Images
här, och vi kommer att anta

619
00:28:28,290 --> 00:28:30,040
att detta är en bild av min katt.

620
00:28:30,040 --> 00:28:35,070
>> Antag att jag har kontroll klickade
eller höger klickat på detta, av misstag

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

622
00:28:35,630 --> 00:28:40,320
Och cat.jpeg jag tänker
att spara på mitt skrivbord.

623
00:28:40,320 --> 00:28:44,700
Låt mig nu gå tillbaka till moln nio.

624
00:28:44,700 --> 00:28:48,150
Lägg märke till att här, jag kan
gå att ladda upp lokala filer.

625
00:28:48,150 --> 00:28:51,530
Och om jag ta tag i detta
fil, cat.jpeg, märka

626
00:28:51,530 --> 00:28:54,674
att jag kan dra den och
släppa den i moln 9

627
00:28:54,674 --> 00:28:56,090
och det kommer att skrika på mig här.

628
00:28:56,090 --> 00:28:59,000
>> Eftersom vi har redan
gett dig en cat.jpeg fil,

629
00:28:59,000 --> 00:29:01,430
men det är super lätt att
ta ett foto som du har

630
00:29:01,430 --> 00:29:03,220
tagen från Facebook
eller Flickr eller liknande

631
00:29:03,220 --> 00:29:05,678
och faktiskt dra och släpp den
i moln 9 och sedan göra det

632
00:29:05,678 --> 00:29:07,970
del av din egen personliga
webbplats eller problem

633
00:29:07,970 --> 00:29:10,442
set sju eller åtta som vi snart får se.

634
00:29:10,442 --> 00:29:12,150
Och sedan när du
äntligen besöka den katt,

635
00:29:12,150 --> 00:29:16,610
förutsatt att jag hämtat samma katt,
meddelande that-- det var bedårande.

636
00:29:16,610 --> 00:29:19,160
>> Vad du kan se är
något liknande detta ansikte här.

637
00:29:19,160 --> 00:29:21,810
Så de filer som du
referens på en webbsida

638
00:29:21,810 --> 00:29:26,050
kan antingen vara lokal i ditt eget
konto eller fjärrkontrollen på någon annan server

639
00:29:26,050 --> 00:29:29,670
såsom i fallet med Rick
Astley foto lite sedan.

640
00:29:29,670 --> 00:29:32,990
Så var else-- vad
annars kan vi göra här?

641
00:29:32,990 --> 00:29:34,890
Så låt oss ta en titt på följande.

642
00:29:34,890 --> 00:29:36,160
Du vet vad typ av kyla?

643
00:29:36,160 --> 00:29:39,330
>> Hittills har vi gjort
mycket statiska webbsidor.

644
00:29:39,330 --> 00:29:41,830
Jag vill krydda upp saker och ting på följande sätt.

645
00:29:41,830 --> 00:29:44,344
Jag vill göra min egen sökmotor.

646
00:29:44,344 --> 00:29:47,010
Så för att göra en sökmotor, låt oss
gå vidare och börja göra detta.

647
00:29:47,010 --> 00:29:52,570
Jag kommer att gå vidare och skapa
en ny fil som heter search.html.

648
00:29:52,570 --> 00:29:54,890
Och vi har prefabed versioner på nätet.

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

650
00:29:56,027 --> 00:29:57,610
Inte klistra in i din terminalfönster.

651
00:29:57,610 --> 00:29:58,744
Prefab versioner på nätet.

652
00:29:58,744 --> 00:30:00,160
Och jag kommer att starta på följande sätt.

653
00:30:00,160 --> 00:30:04,490
Så här är början på
en fil som heter search.html.

654
00:30:04,490 --> 00:30:07,510
Jag kommer att spara det i
dagens källkatalog.

655
00:30:07,510 --> 00:30:09,079
Jag kommer att kalla denna sökning.

656
00:30:09,079 --> 00:30:10,370
Egentligen ska vi göra det bättre.

657
00:30:10,370 --> 00:30:13,600
CS50 Sök och faktiskt helt det.

658
00:30:13,600 --> 00:30:17,500
Och nu, jag kommer att säga
något som H1 CS50 Search.

659
00:30:17,500 --> 00:30:20,930
Och sedan ner här, H2 kommer snart.

660
00:30:20,930 --> 00:30:23,230
Och bara för att sammanfatta, H1 och
H2 menar vad respektive?

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

662
00:30:26,750 --> 00:30:30,320
>> Ja, så stor och fet, och
inte så stor, men ändå djärvt.

663
00:30:30,320 --> 00:30:37,375
Så om jag spara och gå hit,
låt oss se filen search.html.

664
00:30:37,375 --> 00:30:42,560
Okej, och detta
är right-- [OHÖRBAR].

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

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

667
00:30:49,110 --> 00:30:49,945
David är förvirrad.

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

669
00:30:52,610 --> 00:30:54,080
Åh, det är rätt där.

670
00:30:54,080 --> 00:30:54,860
David är en idiot.

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

672
00:30:55,420 --> 00:30:56,660
Så det är.

673
00:30:56,660 --> 00:30:58,350
Så CS50 sökning kommer snart.

674
00:30:58,350 --> 00:31:00,370
Så nu, låt oss syntetisera
vad vi gjorde förra veckan.

675
00:31:00,370 --> 00:31:03,400
>> Där vi pratade om
lägre nivå mekanik HTTP.

676
00:31:03,400 --> 00:31:05,780
Och dessa nya idéer
HTML, som är bara

677
00:31:05,780 --> 00:31:08,890
denna märkspråk där du
berättar en webbläsare exakt vad de ska göra

678
00:31:08,890 --> 00:31:10,740
och implementera vår egen sökmotor.

679
00:31:10,740 --> 00:31:12,520
Så istället för att bara
säger kommer snart, jag är

680
00:31:12,520 --> 00:31:14,810
kommer att presentera
något som kallas en form tagg.

681
00:31:14,810 --> 00:31:19,610
Och i denna form, kommer jag att
har något som liknar en inmatningsfält.

682
00:31:19,610 --> 00:31:22,450
>> Och namnet på denna ingång
fält, jag ska kalla det Q.

683
00:31:22,450 --> 00:31:26,240
Och vilken typ av denna inmatningsfältet
Jag kommer att säga är bara "text".

684
00:31:26,240 --> 00:31:29,130
Och ett textfält, som vi ska
se, är bara en textruta.

685
00:31:29,130 --> 00:31:32,830
Och så det inte känner för att ha
något inuti det på denna punkt.

686
00:31:32,830 --> 00:31:35,320
Och så jag bara gå
att stänga taggen med det

687
00:31:35,320 --> 00:31:38,099
snedstreck rätt i taggen själv.

688
00:31:38,099 --> 00:31:39,890
Och sedan kommer jag att
har en andra ingång.

689
00:31:39,890 --> 00:31:43,480
Input type lika skicka.

690
00:31:43,480 --> 00:31:45,320
Och sedan kommer jag att
stäng här också.

691
00:31:45,320 --> 00:31:46,840
>> Och nu ska jag gå tillbaka hit.

692
00:31:46,840 --> 00:31:49,520
Och redan ser vi,
om än ganska ful, jag har

693
00:31:49,520 --> 00:31:52,460
fick början av
min egen söksidan här.

694
00:31:52,460 --> 00:31:55,150
I själva verket, låt mig försöka
städa upp detta lite.

695
00:31:55,150 --> 00:31:57,330
Det visar sig att det på
ingång här, kan jag ha

696
00:31:57,330 --> 00:31:59,910
ett annat attribut som kallas platshållare.

697
00:31:59,910 --> 00:32:05,165
Och jag kan se något liknas vid nyckelord,
eller mer specifikt fråga efter q.

698
00:32:05,165 --> 00:32:07,820
>> Och lägg märke till, nu har jag
denna typ av grå text

699
00:32:07,820 --> 00:32:10,440
som försvinner som
fort jag börjar skriva,

700
00:32:10,440 --> 00:32:12,930
men det är förmodligen något
du har sett i andra webbsidor.

701
00:32:12,930 --> 00:32:14,650
Jag vet inte riktigt gillar knappen Skicka.

702
00:32:14,650 --> 00:32:18,320
Så jag faktiskt kommer att ge
Skicka-knappen ett värde av sökning.

703
00:32:18,320 --> 00:32:21,680
Och nu, om jag ladda om, märker att
min knapp blir uppkallad sökning.

704
00:32:21,680 --> 00:32:24,140
Du vet, jag vet inte riktigt
som logotypen här.

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

706
00:32:27,140 --> 00:32:28,820
>> Jag vill krydda upp detta ytterligare.

707
00:32:28,820 --> 00:32:30,660
Så CS50 sökning.

708
00:32:30,660 --> 00:32:31,870
Låt mig att skapa min egen logotyp.

709
00:32:31,870 --> 00:32:33,080
Det ser trevligt.

710
00:32:33,080 --> 00:32:36,945
Så nu vill jag spara as-- kom igen.

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

712
00:32:40,710 --> 00:32:43,120
Var är det?

713
00:32:43,120 --> 00:32:43,620
Där.

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

715
00:32:44,160 --> 00:32:44,980
Missade det.

716
00:32:44,980 --> 00:32:47,740
Spara som.

717
00:32:47,740 --> 00:32:49,470
Dumma webbläsare.

718
00:32:49,470 --> 00:32:51,700
Stand by, ska vi
fixa detta en gång för alla.

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

720
00:32:57,650 --> 00:32:58,590
Det går vi.

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

722
00:32:59,090 --> 00:32:59,600
Förlåt.

723
00:32:59,600 --> 00:33:00,750
Ledig dag.

724
00:33:00,750 --> 00:33:02,310
Nu är funky.

725
00:33:02,310 --> 00:33:03,160
Avsluta helskärmsläge.

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

727
00:33:04,150 --> 00:33:06,870
>> Nu, som en normal
person, spara bild som.

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

729
00:33:08,810 --> 00:33:13,194
Nu ska jag gå in CS50IDE och
Jag ska bara ta logotypen,

730
00:33:13,194 --> 00:33:15,360
Jag kommer att dra den till
min källa sju katalog,

731
00:33:15,360 --> 00:33:17,002
Filen finns redan, jag är OK med det.

732
00:33:17,002 --> 00:33:19,210
Så jag kommer att åsidosätta det
eftersom jag redan hade det.

733
00:33:19,210 --> 00:33:20,630
Och nu hur får jag bli av med detta?

734
00:33:20,630 --> 00:33:24,670
>> Låt oss gå vidare här och göra
bildkälla lika logo.gif.

735
00:33:24,670 --> 00:33:25,490
Stäng detta.

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

737
00:33:26,050 --> 00:33:30,560
Och nu om jag går tillbaka till min sökning
sida, nu är det ser ganska bra.

738
00:33:30,560 --> 00:33:33,610
Okej, så det har inte
ganska gjort något användbart.

739
00:33:33,610 --> 00:33:37,000
I själva verket, låt mig försöka att söka
för en katt och se vad som händer.

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

741
00:33:38,890 --> 00:33:39,420
Jäklar.

742
00:33:39,420 --> 00:33:41,400
Det är inte bara fungerar, tydligen.

743
00:33:41,400 --> 00:33:43,760
Så vad är nyckeln stycket
som saknas här?

744
00:33:43,760 --> 00:33:49,100
>> Rätt, även om du inte vet någon HTML,
Jag har börjat märka upp telefonen formuläret

745
00:33:49,100 --> 00:33:54,130
och jag har sagt det hur man får ingångar,
ge mig en textruta och en Skicka-knappen,

746
00:33:54,130 --> 00:33:55,730
vilken pjäs är uppenbarligen saknas?

747
00:33:55,730 --> 00:33:58,975
Antag att vi vill faktiskt få
denna sak fungerar.

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

749
00:34:02,420 --> 00:34:05,360
Vad behöver vi göra?

750
00:34:05,360 --> 00:34:08,860
Vi har ett behov av att genomföra den bakre änden
databas eller sökmotorn själv,

751
00:34:08,860 --> 00:34:11,210
och det kommer att ta en
hel del tid, ärligt talat.

752
00:34:11,210 --> 00:34:13,380
>> Så kom ihåg vad vi gjorde förra gången.

753
00:34:13,380 --> 00:34:18,230
Så om du söker efter något på Google
och du har i förväg avstängd

754
00:34:18,230 --> 00:34:20,355
återkallande, snabbsökning.

755
00:34:20,355 --> 00:34:22,230
Så låt mig inaktivera som
så att detta faktiskt

756
00:34:22,230 --> 00:34:26,650
beter sig som en äldre skola webbläsare,
Om jag söker nu efter något som katter,

757
00:34:26,650 --> 00:34:28,190
ihåg vad URL ser ut.

758
00:34:28,190 --> 00:34:29,449
Det är ganska kryptisk.

759
00:34:29,449 --> 00:34:33,000
Men inbäddade i det,
minns, är slash sökning.

760
00:34:33,000 --> 00:34:35,100
Frågetecken q lika katter.

761
00:34:35,100 --> 00:34:37,760
>> Och det verkar ge mig
en hel massa sökresultat.

762
00:34:37,760 --> 00:34:39,134
Så du vet vad jag ska göra?

763
00:34:39,134 --> 00:34:41,650
Jag kommer att låna
Google för bara en minut.

764
00:34:41,650 --> 00:34:43,670
Jag kommer att gå över
här och jag kommer att säga

765
00:34:43,670 --> 00:34:47,850
att detta utgör åtgärder eller
destination, så att säga,

766
00:34:47,850 --> 00:34:49,330
bör bokstavligen vara Google.

767
00:34:49,330 --> 00:34:52,590
Och metoden jag ville
till användning kommer att bli få.

768
00:34:52,590 --> 00:34:53,560
>> Så vad är handling?

769
00:34:53,560 --> 00:34:55,760
Åtgärder weirdly namnges,
men det betyder bara

770
00:34:55,760 --> 00:34:58,120
som kommer att hantera
verkan av denna form?

771
00:34:58,120 --> 00:35:00,820
När jag klickar på Sök, där
bör resultatet gå?

772
00:35:00,820 --> 00:35:05,300
Och om jag nu går tillbaka till min formuläret
här och ladda min webbsida

773
00:35:05,300 --> 00:35:09,000
och nu söka efter något
som hund, märker nu

774
00:35:09,000 --> 00:35:10,850
Jag har åter genomfört Google.

775
00:35:10,850 --> 00:35:11,350
Höger?

776
00:35:11,350 --> 00:35:14,141
>> Om jag vill söka efter något
annars fungerar det för inte bara hundar,

777
00:35:14,141 --> 00:35:16,400
det fungerar även för katter.

778
00:35:16,400 --> 00:35:21,930
Det fungerar även för CS50.

779
00:35:21,930 --> 00:35:24,310
Och OK, detta är bara
enligt whelming, är inte det?

780
00:35:24,310 --> 00:35:25,920
Okej, men det faktiskt fungerar.

781
00:35:25,920 --> 00:35:27,360
Så vad är egentligen pågått?

782
00:35:27,360 --> 00:35:31,340
Så jag har lärt min webbläsare, genom att använda
HTML, för att ta inmatning från användaren

783
00:35:31,340 --> 00:35:35,810
och faktiskt skicka den ingång
till en fjärrserver via HTTP.

784
00:35:35,810 --> 00:35:39,120
>> Och eftersom min webbläsare
förstår HTTP, det faktiskt

785
00:35:39,120 --> 00:35:43,500
konstruera webbadressen så att det
Jag hamnar över i min webbläsare,

786
00:35:43,500 --> 00:35:45,660
märke till vad som händer
när jag sökte efter hund.

787
00:35:45,660 --> 00:35:49,270
Om jag klickar på Sök, märker att
URL förändras som jag tänkt

788
00:35:49,270 --> 00:35:52,770
att google.com/search~~V frågan lika hund.

789
00:35:52,770 --> 00:35:56,020
Och det beror på att formen
vet, eftersom metoden är att få,

790
00:35:56,020 --> 00:35:59,560
att helt enkelt lägga till den adressen där.

791
00:35:59,560 --> 00:36:01,730
>> Nu, dessa webbsidor är fortfarande ful.

792
00:36:01,730 --> 00:36:04,890
Så låt oss presentera en annan
bit syntax om vi kan i dag.

793
00:36:04,890 --> 00:36:07,640
Och detta är något som kallas
som Cascading Style Sheets.

794
00:36:07,640 --> 00:36:10,720
Så låt mig ta en titt på
detta exempel här och se

795
00:36:10,720 --> 00:36:12,380
om vi kan sluta vad som händer.

796
00:36:12,380 --> 00:36:14,520
Detta är CSS0.html.

797
00:36:14,520 --> 00:36:16,532
Och det är där saker
få lite ful.

798
00:36:16,532 --> 00:36:18,490
För tyvärr,
i världen av webben,

799
00:36:18,490 --> 00:36:20,920
HTML ensam inte kan göra allt.

800
00:36:20,920 --> 00:36:22,920
Och så om du vill
stilisera din webbsida,

801
00:36:22,920 --> 00:36:28,370
du faktiskt behöver för att fokusera på
estetik på ett annorlunda sätt.

802
00:36:28,370 --> 00:36:33,090
Så här, jag har kroppen av min web
sida inuti vilket är en stor div.

803
00:36:33,090 --> 00:36:34,700
Och en div betyder bara division.

804
00:36:34,700 --> 00:36:38,060
Så det är som ett stycke, men det
inte har samma semantik

805
00:36:38,060 --> 00:36:39,180
av ett stycke text.

806
00:36:39,180 --> 00:36:40,940
>> Det betyder bara att
webbläsare, här kommer

807
00:36:40,940 --> 00:36:45,210
en stor rektangulärt område av min web
sida, jag vill hantera det speciellt.

808
00:36:45,210 --> 00:36:47,420
Nu är linje 21 när denna div startar.

809
00:36:47,420 --> 00:36:48,770
Och bara ta en gissning.

810
00:36:48,770 --> 00:36:53,080
Vad är effekten av linjen 21 på
resten av innehållet på sidan?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Centre det.

813
00:36:56,311 --> 00:36:56,810
Det var allt.

814
00:36:56,810 --> 00:36:58,830
Så vi har inte sett ett sätt
faktiskt centrering av texten.

815
00:36:58,830 --> 00:37:00,996
>> I själva verket, min sökmotor,
till skillnad från den faktiska Google,

816
00:37:00,996 --> 00:37:03,040
var alla motiverat över till vänster.

817
00:37:03,040 --> 00:37:07,430
Och så nu i linje 21, säger jag, hey
webbläsare, skapa en uppdelning på sidan.

818
00:37:07,430 --> 00:37:09,450
Ge mig en stor, osynlig rektangel.

819
00:37:09,450 --> 00:37:11,490
Det är så jag vill
tänka på webbsidan.

820
00:37:11,490 --> 00:37:13,870
Och sedan stilisera den på följande sätt.

821
00:37:13,870 --> 00:37:16,900
Inuti dessa citat,
nu, är ett andra språk

822
00:37:16,900 --> 00:37:19,969
att vi lanserar idag
kallas CSS.

823
00:37:19,969 --> 00:37:22,010
Tack och lov, också är det inte
ett programmeringsspråk,

824
00:37:22,010 --> 00:37:26,470
så det är mycket begränsad i sin syntax men
också mycket begränsad i sin funktionalitet

825
00:37:26,470 --> 00:37:30,670
medan HTML handlar om
märka upp data från en webbsida

826
00:37:30,670 --> 00:37:32,130
och strukturen på en webbsida.

827
00:37:32,130 --> 00:37:35,320
CSS är allmänt om
sista kilometern, estetik,

828
00:37:35,320 --> 00:37:40,160
få storlek och färg och
placering exakt rätt på en webbsida.

829
00:37:40,160 --> 00:37:43,000
Och faktiskt, det bildas
med nyckelpar värde.

830
00:37:43,000 --> 00:37:46,290
>> En fastighet som denna, text
justera, följt av ett kolon,

831
00:37:46,290 --> 00:37:49,720
följt av värdet på denna
egenskap, som i detta fall är centrum.

832
00:37:49,720 --> 00:37:51,910
Och nu märker du
kan kapsla dessa saker.

833
00:37:51,910 --> 00:37:56,780
Om jag ville ha allt att
Jag har markerat att vara centrerad,

834
00:37:56,780 --> 00:38:00,270
det är därför jag har ledningen 21 och
motsvarande rad 31.

835
00:38:00,270 --> 00:38:04,820
Men anta nu vill säga John
Harvard, välkommen till min hemsida.

836
00:38:04,820 --> 00:38:06,530
>> Copyright symbol John Harvard.

837
00:38:06,530 --> 00:38:09,180
Och antar att jag vill den första av
dessa linjer för att vara ganska stor.

838
00:38:09,180 --> 00:38:10,450
36 pixlar.

839
00:38:10,450 --> 00:38:11,530
Så det är en anständig storlek.

840
00:38:11,530 --> 00:38:13,240
Och jag ville dess vikt att vara djärv.

841
00:38:13,240 --> 00:38:15,450
Men sedan under den,
Jag vill ha mindre text.

842
00:38:15,450 --> 00:38:19,980
Och under det, jag vill ha
ännu mindre text.

843
00:38:19,980 --> 00:38:20,480
Förlåt.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Idag känns som en off dag.

846
00:38:26,940 --> 00:38:29,840
>> Så nu, vad gör jag för att uttrycka det?

847
00:38:29,840 --> 00:38:34,580
Här på linje 22 är en inbäddad
div eller kapslade div, om ni så vill.

848
00:38:34,580 --> 00:38:36,190
Det har också sin egen stil tag.

849
00:38:36,190 --> 00:38:38,160
Jag anger en teckenstorlek på 36.

850
00:38:38,160 --> 00:38:40,460
Jag anger ett teckensnitt vikt fetstil.

851
00:38:40,460 --> 00:38:43,360
Här nere, jag bara ange 24 pixlar.

852
00:38:43,360 --> 00:38:45,960
Och slutligen, i linje 28, jag anger 12.

853
00:38:45,960 --> 00:38:49,070
Så precis som en snabb kontroll sanity
och som en mänsklig läser detta,

854
00:38:49,070 --> 00:38:52,545
vilka ord på skärmen är
faktiskt kommer att vara djärv?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Vilka linjer är faktiskt fet?

857
00:38:58,760 --> 00:38:59,570
>> Bara John Harvard.

858
00:38:59,570 --> 00:39:00,070
Höger?

859
00:39:00,070 --> 00:39:05,940
Eftersom precis som linje 22 säger hej
webbläsare, här är en uppdelning av sidan.

860
00:39:05,940 --> 00:39:07,920
Gör det teckenstorlek 36 poäng.

861
00:39:07,920 --> 00:39:09,460
Gör tecken vikt fetstil.

862
00:39:09,460 --> 00:39:11,920
Så fort du når
motsvarande sluttagg

863
00:39:11,920 --> 00:39:15,340
eller sluten tagg på ledningen 24,
det betyder, hej webbläsare,

864
00:39:15,340 --> 00:39:17,640
sluta göra vad det är du gör.

865
00:39:17,640 --> 00:39:21,020
Och meddelande att vara tydlig, även om
linje 22 har alla dessa attribut

866
00:39:21,020 --> 00:39:24,430
liknande stil, när du
stänga taggen i linje 24,

867
00:39:24,430 --> 00:39:25,940
du bara nämna taggens namn.

868
00:39:25,940 --> 00:39:29,990
>> Du behöver inte upprepa ordet stil eller
något som är inne i dessa citat.

869
00:39:29,990 --> 00:39:32,860
Och så om jag ser på detta nu
i min webbläsare, låt oss ta

870
00:39:32,860 --> 00:39:38,060
En titt på slutresultatet. Låt mig gå
Inför den här filen, som är CSS 0.

871
00:39:38,060 --> 00:39:41,814
Och det är fortfarande ganska vanligt,
men få ganska intressant.

872
00:39:41,814 --> 00:39:43,980
Men det visar sig att det finns
andra saker som jag kan göra här,

873
00:39:43,980 --> 00:39:46,490
och med risk för att
detta helt avskyvärda,

874
00:39:46,490 --> 00:39:48,630
märker här att i mitt
huvudtexten på min webbsida,

875
00:39:48,630 --> 00:39:53,930
Jag kan göra något roligt
som bg eller bakgrundsfärg.

876
00:39:53,930 --> 00:39:56,670
>> Och snabb, vad är din favoritfärg?

877
00:39:56,670 --> 00:39:57,720
Grön Jag hörde.

878
00:39:57,720 --> 00:39:58,750
Okej.

879
00:39:58,750 --> 00:40:02,920
Så nu, om jag slog reload nu,
Vi har en grön webbsida.

880
00:40:02,920 --> 00:40:04,710
Okej, så det är inte dåligt.

881
00:40:04,710 --> 00:40:08,350
Och nu, om jag vill göra detta riktigt
cool, jag kan göra färgen på min text

882
00:40:08,350 --> 00:40:09,360
även rött.

883
00:40:09,360 --> 00:40:10,870
Så låt oss se vad det ser ut.

884
00:40:10,870 --> 00:40:12,230
Nu är det ser ganska bra.

885
00:40:12,230 --> 00:40:15,460
Och här nere, om du verkligen
vill bråka med någon

886
00:40:15,460 --> 00:40:17,487
eller om du vill vara
en av dem som

887
00:40:17,487 --> 00:40:20,570
försöker lura dig att besöka en webbsida
sida eftersom de har lurat Google

888
00:40:20,570 --> 00:40:27,610
att tro att det finns en hel drös
av nyckelord like-- låt oss se, ladda om.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Vart tog den vägen?

891
00:40:30,680 --> 00:40:31,530
Och där oss.

892
00:40:31,530 --> 00:40:32,030
Okej.

893
00:40:32,030 --> 00:40:34,905
Så jag säger detta som en sidoreplik, vi ska
prata om det här i ett par veckor

894
00:40:34,905 --> 00:40:36,740
när vi talar om
säkerhet, om du verkligen

895
00:40:36,740 --> 00:40:38,852
bädda hela klasar av
sökord i en webbsida,

896
00:40:38,852 --> 00:40:41,810
även om de inte är synliga för en
mänsklig, någon som Google, naturligtvis,

897
00:40:41,810 --> 00:40:43,250
kan fortfarande faktiskt hitta detta.

898
00:40:43,250 --> 00:40:45,820
Okej, så det är ganska
ohyggliga ganska snabbt.

899
00:40:45,820 --> 00:40:48,420
>> Och i själva verket är det inte alla
så mycket till skillnad från min egen webb

900
00:40:48,420 --> 00:40:51,480
sida som ett grundutbildningsprogram, som
Jag började googla runt för att hitta

901
00:40:51,480 --> 00:40:53,690
tidigare versioner av mina gamla webbplatser.

902
00:40:53,690 --> 00:40:54,500
Det var ganska dåligt.

903
00:40:54,500 --> 00:40:56,650
Faktum är att jag tycker
en precis innan klassen.

904
00:40:56,650 --> 00:40:58,620
Men det är värre därute.

905
00:40:58,620 --> 00:41:01,534
Detta var tydligen min
hemsidan redan 1996.

906
00:41:01,534 --> 00:41:04,200
Tydligen jag trodde det var
lämpligt att fråga folk deras namn

907
00:41:04,200 --> 00:41:05,991
innan de kunde
faktiskt se min webbsida.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> Och sedan jag visade dem
något dumt, förmodligen.

910
00:41:11,920 --> 00:41:13,450
Jag ska gräva upp mer för nästa gång.

911
00:41:13,450 --> 00:41:16,220
Men nu, låt oss
överväga lite av design.

912
00:41:16,220 --> 00:41:17,444
Vi har pratat om stil.

913
00:41:17,444 --> 00:41:19,735
Och den här sidan hittills och
det mesta jag har skrivit

914
00:41:19,735 --> 00:41:21,890
är ganska ren stilistiskt.

915
00:41:21,890 --> 00:41:23,320
Men hur är det design?

916
00:41:23,320 --> 00:41:25,990
Tja, det finns en hel del redundans
i vad jag har gjort här.

917
00:41:25,990 --> 00:41:28,156
>> Jag har nämnt ordet
färg i ett par ställen.

918
00:41:28,156 --> 00:41:31,630
Jag har nämnt teckenstorleken i ett par
platser och djärv i ett par ställen.

919
00:41:31,630 --> 00:41:34,870
Och i grunden är jag co
mingel två språk.

920
00:41:34,870 --> 00:41:38,100
Jag har HTML med mina taggar och min
attribut och sedan helt plötsligt,

921
00:41:38,100 --> 00:41:40,100
mellan offerter, har jag
andraspråks idag

922
00:41:40,100 --> 00:41:43,830
kallas CSS, som återigen är bara dessa
nyckelpar värde eller dessa egenskaper

923
00:41:43,830 --> 00:41:45,280
åtskilda med kolon.

924
00:41:45,280 --> 00:41:47,700
>> Det visar sig att mycket
som i C, där vi

925
00:41:47,700 --> 00:41:50,550
kan börja faktor ut
någon kod i header-filer,

926
00:41:50,550 --> 00:41:53,520
så att vi kan göra samma sak i HTML.

927
00:41:53,520 --> 00:41:56,030
Och ett steg i riktning mot detta är följande.

928
00:41:56,030 --> 00:42:02,230
Lägg märke till att denna version, är CSS1.html
Strukturellt exakt samma webbsida.

929
00:42:02,230 --> 00:42:05,250
Så jag har en massa
av Divar, men den här gången, jag har

930
00:42:05,250 --> 00:42:07,220
blivit av omslaget
div som du ser.

931
00:42:07,220 --> 00:42:12,390
>> Och jag har gett dessa tre divs
top, mitten och botten, unika ID.

932
00:42:12,390 --> 00:42:14,760
Detta är trevligt, eftersom de genom
ger dessa divisioner

933
00:42:14,760 --> 00:42:18,715
av sidan unika identifierare,
Jag kan referera dem någon annanstans.

934
00:42:18,715 --> 00:42:19,215
Var?

935
00:42:19,215 --> 00:42:21,070
Nåväl, låt mig rulla upp.

936
00:42:21,070 --> 00:42:24,070
Och så långt, när vi har tittat
i spetsen för en webbsida, vad är

937
00:42:24,070 --> 00:42:28,560
det enda tagg som vi har haft i
huvudet på en webbsida?

938
00:42:28,560 --> 00:42:29,740
Lite högre.

939
00:42:29,740 --> 00:42:30,799
Bara titeln hittills.

940
00:42:30,799 --> 00:42:32,590
Men det visar sig att det finns
några andra saker

941
00:42:32,590 --> 00:42:35,840
Du kan sätta in där, en av
som det kallas en stil tagg.

942
00:42:35,840 --> 00:42:37,850
Så för en stund sedan, vi såg
vid en stilattribut.

943
00:42:37,850 --> 00:42:39,150
Det visade sig att det finns en stil tagg.

944
00:42:39,150 --> 00:42:41,200
Den tillhör insidan av
huvudet på en webbsida.

945
00:42:41,200 --> 00:42:42,840
Och nu märke till vad jag gör.

946
00:42:42,840 --> 00:42:46,540
Jag har insidan av denna
stil tag följande.

947
00:42:46,540 --> 00:42:51,190
Jag bokstavligen nämner på rad 20 i
namnet på en tagg som jag vill stilisera.

948
00:42:51,190 --> 00:42:53,489
>> Sen har jag öppna klammerparentes
och stängt klammerparentes.

949
00:42:53,489 --> 00:42:56,030
Så i samma anda som C, men
igen, detta är inte en funktion,

950
00:42:56,030 --> 00:42:57,796
detta är bara en syntaktisk detalj här.

951
00:42:57,796 --> 00:43:00,170
Och sedan naturligtvis, säger jag
webbläsaren, hej webbläsare,

952
00:43:00,170 --> 00:43:05,210
göra hela kroppen på sidan
har en textjustering centrum.

953
00:43:05,210 --> 00:43:06,930
Och då detta säger följande.

954
00:43:06,930 --> 00:43:12,600
Hej webbläsare, om du ser en HTML
element eller tagg i sidan som

955
00:43:12,600 --> 00:43:17,040
har en unik identifierare för toppen,
så hash symbolen här betyder bara

956
00:43:17,040 --> 00:43:21,010
unik idé av toppen, gå vidare
och göra sin teckenstorlek 36

957
00:43:21,010 --> 00:43:22,490
och dess textvikt fetstil.

958
00:43:22,490 --> 00:43:26,840
>> Hej webbläsare, ett element vars
ID är mitt, gör det 24 pixlar.

959
00:43:26,840 --> 00:43:31,070
Och hey webbläsare, om du ser en
tanken på botten, gör det 12 pixlar.

960
00:43:31,070 --> 00:43:33,540
Effekten i slutet
är exakt sam.

961
00:43:33,540 --> 00:43:36,500
Om jag går in CSS 1, den
sidan ser likadan ut.

962
00:43:36,500 --> 00:43:39,810
Men vi är ett steg mot
en något bättre design.

963
00:43:39,810 --> 00:43:44,850
Låt mig nu gå tillbaka hit till CSS2
och se vad jag har gjort.

964
00:43:44,850 --> 00:43:48,030
>> Nu sidan är verkligen, verkligen rena.

965
00:43:48,030 --> 00:43:50,730
I själva verket kan jag passar alla
innehållet på en sida här.

966
00:43:50,730 --> 00:43:54,270
Men vad nya tag har jag
introduceras, uppenbarligen?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
Och det är inte det bästa namnet för en tagg,
eftersom det inte är en länk i den mening

969
00:43:57,853 --> 00:44:00,780
att vi vet det, men det innebär
en länk i någon annan fil.

970
00:44:00,780 --> 00:44:02,890
Detta är ungefär som kraftiga ingå i C.

971
00:44:02,890 --> 00:44:06,280
>> Detta är det sätt på HTML
säga hej webbläsare,

972
00:44:06,280 --> 00:44:10,240
gå och hämta innehållet i
filen heter css2.css.

973
00:44:10,240 --> 00:44:12,880
Förhållandet till mig,
är att det är en formatmall.

974
00:44:12,880 --> 00:44:17,980
Och faktiskt, det är vad en av de
S i Cascading Style Sheets medel.

975
00:44:17,980 --> 00:44:20,350
Detta är en formatmall.

976
00:44:20,350 --> 00:44:23,120
Det är bara textfil som innehåller
en hel del egendom.

977
00:44:23,120 --> 00:44:25,940
Det är en massa stilar
som du vill ansöka till en sida.

978
00:44:25,940 --> 00:44:28,860
>> Och så detta tydligen är
med hänvisning till en andra fil.

979
00:44:28,860 --> 00:44:32,970
Och om jag öppnar det, CSS2.css,
märker att allt jag har gjort

980
00:44:32,970 --> 00:44:35,900
är att kopiera och klistra in alla
av detta i den här filen.

981
00:44:35,900 --> 00:44:38,220
Och nu, även om du har aldrig
kodad det här förut,

982
00:44:38,220 --> 00:44:40,700
bara betrakta med
ökända ingenjörs hatt

983
00:44:40,700 --> 00:44:44,220
på, varför är detta en
bättre utformning förmodligen?

984
00:44:44,220 --> 00:44:48,910
Factoring ut de CSS-egenskaper,
sätta dem i sin egen fil.

985
00:44:48,910 --> 00:44:51,330
Även om vi löst detta
problem som fem minuter sedan

986
00:44:51,330 --> 00:44:52,600
i den allra första versionen.

987
00:44:52,600 --> 00:44:55,730
>> Vi har inte förbättrat
sida stilist,

988
00:44:55,730 --> 00:44:57,520
detta är bara bättre
design i någon mening.

989
00:44:57,520 --> 00:44:58,990
Varför tror du?

990
00:44:58,990 --> 00:45:01,510
Yeah.

991
00:45:01,510 --> 00:45:02,260
Mer flexibel hur?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Yeah.

994
00:45:05,540 --> 00:45:07,373
Så om du vill gå
tillbaka och ändra saker,

995
00:45:07,373 --> 00:45:09,540
nu har du en plats
där du kan ändra saker.

996
00:45:09,540 --> 00:45:11,622
Och faktiskt, för något
liknande problem set sju,

997
00:45:11,622 --> 00:45:13,690
där vi ska genomföra ett
aktiehandel webbplats,

998
00:45:13,690 --> 00:45:15,523
som kommer att ha en
massa sidor.

999
00:45:15,523 --> 00:45:17,620
Och det skulle vara riktigt
irriterande om du bestämmer dig, hm,

1000
00:45:17,620 --> 00:45:21,630
Jag vet inte riktigt gillar 24 pixlar, jag vill
att det ska vara 28 pixlar eller något större.

1001
00:45:21,630 --> 00:45:23,550
Och sedan måste göra en
globala söka och ersätta

1002
00:45:23,550 --> 00:45:27,560
eller öppna alla webbplatsens filer
bara för att faktiskt ändra ett värde.

1003
00:45:27,560 --> 00:45:31,290
Genom facto ut dessa stilar
till en central plats,

1004
00:45:31,290 --> 00:45:34,720
Du kan nu öppna en textfil
i CS50IDE i något program,

1005
00:45:34,720 --> 00:45:36,479
ändra den, spara den, och gjort.

1006
00:45:36,479 --> 00:45:38,270
Du har förökats de
förändringar överallt.

1007
00:45:38,270 --> 00:45:42,450
Och det skulle vara densamma
i en punkt h filen.

1008
00:45:42,450 --> 00:45:46,697
Så några frågor därmed
långt på denna syntax?

1009
00:45:46,697 --> 00:45:48,530
Okej, så vi har
gjort allt det verkar

1010
00:45:48,530 --> 00:45:51,170
utom faktiskt genomföra hyperlänkar.

1011
00:45:51,170 --> 00:45:52,740
Och så låt oss gå vidare och göra det.

1012
00:45:52,740 --> 00:45:54,830
Låt mig gå vidare och
skapa en ny fil här.

1013
00:45:54,830 --> 00:45:59,970
Jag kommer att kalla det
link.html, lägg i dagens kod.

1014
00:45:59,970 --> 00:46:03,000
>> Och jag kommer att göra öppna
fäste doc typ html.

1015
00:46:03,000 --> 00:46:05,970
Som en sidoreplik, denna sak på
topp, denna doc typ deklaration,

1016
00:46:05,970 --> 00:46:08,420
det är det enda som är konstigt
med utropstecken.

1017
00:46:08,420 --> 00:46:12,100
Du behöver bara göra det där och det
innebär att vi använder HTML version 5.

1018
00:46:12,100 --> 00:46:14,460
Äldre versioner av
språk hade mycket längre

1019
00:46:14,460 --> 00:46:16,400
strängar som du behövs för att sätta dit.

1020
00:46:16,400 --> 00:46:18,620
Så här är ett exempel som kallas länk.

1021
00:46:18,620 --> 00:46:20,950
>> Jag behöver en kropp av min webbsida här.

1022
00:46:20,950 --> 00:46:29,770
Och här inne, en href jämlikar
låt oss säga HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
och min favorit webbplats, kommer vi att säga.

1024
00:46:35,420 --> 00:46:38,550
Okej, så en mycket
ofarlig, användarvänliga sida.

1025
00:46:38,550 --> 00:46:42,950
Om jag nu går in i min katalog
notering här och öppna upp link.html,

1026
00:46:42,950 --> 00:46:44,780
Vi har hyper text.

1027
00:46:44,780 --> 00:46:47,410
>> Och faktiskt, det är här
H HTTP kommer ifrån.

1028
00:46:47,410 --> 00:46:51,580
Hypertext transfer protocol
handlar om att överföra text

1029
00:46:51,580 --> 00:46:53,840
som har hyperlänkar till andra källor.

1030
00:46:53,840 --> 00:46:58,210
Och faktiskt, här är det välbekanta,
om retro, blå länken att om du klickar

1031
00:46:58,210 --> 00:47:02,607
faktiskt kommer att leda mig till Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Nu, åh, som kommer ut snart.

1033
00:47:03,940 --> 00:47:08,970
Okej, så nu, vad är några
om konsekvenserna av detta?

1034
00:47:08,970 --> 00:47:11,610
>> Och ärligt talat, börjar världen
att få lite mer bekant

1035
00:47:11,610 --> 00:47:15,090
och även lite skrämmande
men också lite mer

1036
00:47:15,090 --> 00:47:17,840
självförsvarbart när du börjar
att förstå dessa saker.

1037
00:47:17,840 --> 00:47:21,610
Eftersom oddsen är, några av er, om du går
genom din skräppostmapp Gmail eller ens

1038
00:47:21,610 --> 00:47:23,990
inkorgen, har du förmodligen
fått någon form av e-post

1039
00:47:23,990 --> 00:47:26,980
som frågar dig att ändra ditt
lösenord kanske eller kanske kontrollera

1040
00:47:26,980 --> 00:47:28,910
ditt PayPal referenser eller whatnot.

1041
00:47:28,910 --> 00:47:34,510
>> Och i själva verket kan du ha fått
något som säger som klicka här

1042
00:47:34,510 --> 00:47:42,260
att återställa ditt PayPal-lösenord.

1043
00:47:42,260 --> 00:47:44,130
Och nu märker, om
detta är inte Disney.com

1044
00:47:44,130 --> 00:47:51,600
men som badplace.com och
ladda, observera att text här

1045
00:47:51,600 --> 00:47:53,710
kunde säga något alls.

1046
00:47:53,710 --> 00:47:55,260
Och i själva verket är detta bara ord.

1047
00:47:55,260 --> 00:48:04,610
Varför inte jag faktiskt vara super skadlig
och säga http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Klicka här återställa ditt PayPal
lösenord och nu ladda om.

1049
00:48:14,090 --> 00:48:16,220
Detta ser ganska legitimt, eller hur?

1050
00:48:16,220 --> 00:48:20,470
Jag menar, jag skulle inte titta på
ett e-postmeddelande som bara säger det.

1051
00:48:20,470 --> 00:48:22,450
Men märker dikotomin här.

1052
00:48:22,450 --> 00:48:26,880
Det säger www.paypal.com,
och i själva verket, vänta en minut,

1053
00:48:26,880 --> 00:48:29,210
Vi vet att du vill
s för säkerheten.

1054
00:48:29,210 --> 00:48:35,450
Så nu går till www.paypal.com HTTPS,
men om du aldrig har gjort det förut,

1055
00:48:35,450 --> 00:48:38,182
får in i vanan att
svävar över små länkar hit.

1056
00:48:38,182 --> 00:48:39,890
Och det är svårt att se
på skärmen där,

1057
00:48:39,890 --> 00:48:41,340
och det är inte så lätt här.

1058
00:48:41,340 --> 00:48:43,615
Men här vägen ner i
den lilla lilla hörn

1059
00:48:43,615 --> 00:48:45,740
gör webbläsaren faktiskt
berätta att vi tänker

1060
00:48:45,740 --> 00:48:48,850
att badplace.com stället för Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Nu, vart är vi på väg med detta?

1062
00:48:51,620 --> 00:48:54,859
Alla exempel som vi har gjort i dag,
Vi har hårdkodade och skrev ut manuellt.

1063
00:48:54,859 --> 00:48:56,900
Webben är otroligt
ointressant när du hårt

1064
00:48:56,900 --> 00:48:59,844
koda dina webbsidor så att innehållet
är statisk och aldrig förändras.

1065
00:48:59,844 --> 00:49:01,760
Naturligtvis, alla våra
favoritwebbplatser i dag,

1066
00:49:01,760 --> 00:49:04,470
oavsett om det är Gmail eller Twitter eller
Facebook eller valfritt antal andra

1067
00:49:04,470 --> 00:49:05,290
är dynamiska.

1068
00:49:05,290 --> 00:49:07,340
De förändras
svar på användarinmatning

1069
00:49:07,340 --> 00:49:08,840
precis som Googles sökresultat.

1070
00:49:08,840 --> 00:49:12,415
>> Och så på onsdag, vad vi gör är
Vi lämnar HTML och CSS introduktion

1071
00:49:12,415 --> 00:49:14,290
bakom oss och vi tar
för givet att vi nu

1072
00:49:14,290 --> 00:49:16,640
vet det och vi introducerar
ett nytt programmeringsspråk

1073
00:49:16,640 --> 00:49:19,050
kallas PHP, som gillar
C, kommer att ge oss

1074
00:49:19,050 --> 00:49:22,450
befogenhet att faktiskt skapa program
att själva generera utdata.

1075
00:49:22,450 --> 00:49:25,900
I det här fallet, kommer vi att använda
PHP för att generera dynamiskt web

1076
00:49:25,900 --> 00:49:27,340
sidor med denna nya språk.

1077
00:49:27,340 --> 00:49:28,989
Så mer om det på onsdag.

1078
00:49:28,989 --> 00:49:29,530
Ser du sedan.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [MUSIK SPELA]

1081
00:49:37,380 --> 00:52:38,864