1
00:00:00,000 --> 00:00:03,486
>> [MUSIC SPILLE]

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

3
00:00:10,460 --> 00:00:14,250
>> DAVID J MALAN: Dette er CS50 og
Dette er starten på uken 7.

4
00:00:14,250 --> 00:00:15,060
Så velkommen tilbake.

5
00:00:15,060 --> 00:00:17,540
Og du husker kanskje at
i oppgavesettet fire,

6
00:00:17,540 --> 00:00:21,510
Det var litt av en gatefeier jakten
for noen flotte premier hvorved

7
00:00:21,510 --> 00:00:24,219
etter at du gjenopprette bilder av
ansatte både her og i New Haven,

8
00:00:24,219 --> 00:00:27,468
du ble utfordret til å finne så mange av
disse dataforskere som du kunne.

9
00:00:27,468 --> 00:00:29,550
Og vi har fått en hel
haug med innleveringer.

10
00:00:29,550 --> 00:00:31,930
Tenkte jeg skulle dele noen
med deg her i dag.

11
00:00:31,930 --> 00:00:35,100
>> Og vi vil legge ut alle disse online.

12
00:00:35,100 --> 00:00:39,310
Men spesielt, jeg ønsket å
trekke oppmerksomheten to-- vel en,

13
00:00:39,310 --> 00:00:42,670
Sam var i ganske mange av dem
generelt poserer som dette.

14
00:00:42,670 --> 00:00:45,750
Men det viser seg at som av
morges, vinneren

15
00:00:45,750 --> 00:00:51,170
ble et visst noen som heter Ken med
24 av de ansatte fanget på kamera

16
00:00:51,170 --> 00:00:54,600
eller noen flere når du tar i
kontoen flere ansatte i bildene.

17
00:00:54,600 --> 00:00:58,300
Avbildet her er Ken neste
til Mary i New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Nå, Ken, skjønt, snur
ut er litt av et hjørne saken

19
00:01:01,300 --> 00:01:02,880
det er ennå ikke skjedd før.

20
00:01:02,880 --> 00:01:05,713
Det viser seg at det ikke forekomme
til meg å sette fine print i problem

21
00:01:05,713 --> 00:01:09,710
satt fire som sier at personalet er
ikke kvalifisert for flotte premier

22
00:01:09,710 --> 00:01:13,130
fordi Ken er, selvfølgelig, en av
fotografene på våre ansatte.

23
00:01:13,130 --> 00:01:16,820
Nå, med det sagt, han
opprinnelig skrev meg å si

24
00:01:16,820 --> 00:01:19,180
vennligst ikke legge disse bildene på nettet.

25
00:01:19,180 --> 00:01:21,630
Jeg tror i stor grad
fordi de fleste av bildene

26
00:01:21,630 --> 00:01:24,499
at denne fotografen tok ser
litt noe sånt som dette.

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

28
00:01:25,040 --> 00:01:28,990
>> Men Ken ønsker meg å berolige deg
at han er en veldig god fotograf,

29
00:01:28,990 --> 00:01:33,190
Han er en profesjonell, tar han
Bilder som ikke er uklare,

30
00:01:33,190 --> 00:01:37,270
som er bedre i fokus, og han
tok ganske mange av våre egne ansatte.

31
00:01:37,270 --> 00:01:40,370
Men heller enn å bare erkjenne
Ken, hva vi trodde vi skulle gjøre

32
00:01:40,370 --> 00:01:43,390
er å gå gjennom listen over
faktiske studenter som sendes inn.

33
00:01:43,390 --> 00:01:48,640
Og det viser seg at Lance med
15 bilder per i morges

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

35
00:01:50,030 --> 00:01:55,730
>> Og avbildet her er Lance med Colton,
med Skaz, med meg selv, og med Sam.

36
00:01:55,730 --> 00:02:00,230
Men så viser det seg at fra og med
11:46, så bare litt siden,

37
00:02:00,230 --> 00:02:04,380
Jeg gikk tilbake til min e-post og funnet
at vi hadde enda en innlevering

38
00:02:04,380 --> 00:02:08,300
av en student som heter Bonnie
hvis e sa bare dette.

39
00:02:08,300 --> 00:02:10,800
Ikke kommer til å lyve, jeg er
gjøre dette i klassen.

40
00:02:10,800 --> 00:02:17,620
Og deretter fortsatte å feste bare
14 bilder, en sjenert av Lance 15.

41
00:02:17,620 --> 00:02:22,690
>> Men i Bonnies bilder, viser det
ut var flere medarbeidere, Sam

42
00:02:22,690 --> 00:02:25,960
blant dem, så hva vi trodde vi
ville gjøre er erkjenner begge disse.

43
00:02:25,960 --> 00:02:29,240
Så i tillegg til å få Dropbox
plass at alle som deltok

44
00:02:29,240 --> 00:02:33,900
mottar disse to avsnittene vil også
motta en hyggelig se lunsj for dem

45
00:02:33,900 --> 00:02:36,100
og deres seksjon
parrer denne kommende uken.

46
00:02:36,100 --> 00:02:38,970
Og så vil du høre fra oss,
Lance og Bonnie, om det.

47
00:02:38,970 --> 00:02:40,002
Så store congrats til dem.

48
00:02:40,002 --> 00:02:42,210
Nå, de av dere som ville
som lunsj mer generelt

49
00:02:42,210 --> 00:02:45,320
vet at CS50 lunsj i Cambridge
og New Haven er denne fredagen.

50
00:02:45,320 --> 00:02:48,510
Gå til CS50 hjemmeside slash RSVP.

51
00:02:48,510 --> 00:02:49,800
Og nå et ord på seminarer.

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

53
00:02:50,730 --> 00:02:52,490
Så vi nærmer seg
punkt av semesteret

54
00:02:52,490 --> 00:02:55,200
hvor du skal begynne
tenker endelige prosjekter.

55
00:02:55,200 --> 00:02:59,309
Og faktisk, på bare litt, vil
såkalte pre forslag påløpe.

56
00:02:59,309 --> 00:03:01,850
Så pre forslag er ment å
være ganske lav innflytelse og virkelig

57
00:03:01,850 --> 00:03:04,109
bare en mulighet for
du vil skrive en liten notis

58
00:03:04,109 --> 00:03:06,900
undervisningen stipendiat apprise
ham eller henne hva du tenker deg

59
00:03:06,900 --> 00:03:09,140
kanskje ønsker å gjøre for det endelige prosjektet.

60
00:03:09,140 --> 00:03:11,730
>> Nå, mange studenter ender opp
gjør webbasert endelige prosjekter.

61
00:03:11,730 --> 00:03:13,800
Og selvfølgelig, vi er bare
nå sist uke i dette

62
00:03:13,800 --> 00:03:15,890
og utover dykke inn i web-programmering.

63
00:03:15,890 --> 00:03:18,200
Så ikke bekymre deg hvis du
har absolutt ingen anelse om hvordan

64
00:03:18,200 --> 00:03:21,594
du vil bygge ideene som
du kan ha i tankene dine.

65
00:03:21,594 --> 00:03:24,510
Dette er egentlig bare en tvinge funksjon
å få deg å tenke og snakke

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

67
00:03:25,650 --> 00:03:28,810
Men for å hjelpe deg med det, og
med endelige prosjekter slutt,

68
00:03:28,810 --> 00:03:31,750
vet at CS50 har tradisjon
tilby seminarer.

69
00:03:31,750 --> 00:03:36,084
>> Og disse er valgfrie, hender på,
eller foredrag basert på muligheter

70
00:03:36,084 --> 00:03:39,000
for å lære mer om temaer som er
litt ordnet i forhold til kursets

71
00:03:39,000 --> 00:03:43,310
pensum, men likevel fantastisk
materiale til å kjøre finale prosjekter.

72
00:03:43,310 --> 00:03:46,840
Og så dette er en liste som er
CS50 ansatte her i New Haven

73
00:03:46,840 --> 00:03:48,600
har kommet opp med for
dette året om iOS

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

75
00:03:50,730 --> 00:03:54,480
og bunter av flere verktøy
og språk og teknikker.

76
00:03:54,480 --> 00:03:56,780
>> Så hold et øye på CS50 hjemmeside.

77
00:03:56,780 --> 00:04:00,110
Og i mellomtiden, hvis du ønsker å
melde din interesse i noen av disse,

78
00:04:00,110 --> 00:04:02,510
gå til CS50 er slash register.

79
00:04:02,510 --> 00:04:05,770
Og vi vil deretter følge opp med hensyn til
dager og flytider og steder

80
00:04:05,770 --> 00:04:09,090
og everything-- mest alt vil
streames og også tilgjengelig på forespørsel

81
00:04:09,090 --> 00:04:11,750
etter hvis du ikke kan faktisk gjøre det.

82
00:04:11,750 --> 00:04:15,800
Så uten videre, vi
slapp sist gang med GET.

83
00:04:15,800 --> 00:04:19,610
>> Og dette var som den meldingen som var
innsiden av den virtuelle konvolutt, husker,

84
00:04:19,610 --> 00:04:23,960
at vi gått fra ruter til ruter til
ruter mellom en nettleser og en web

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

86
00:04:24,487 --> 00:04:26,695
Og den meldingen så en
litt noe sånt som dette.

87
00:04:26,695 --> 00:04:29,700
Dette var mer uforståelige meldingen som
var faktisk inne i en konvolutt

88
00:04:29,700 --> 00:04:34,440
skrevet på et stykke papir som
første linje sier bokstavelig, får strek.

89
00:04:34,440 --> 00:04:37,830
>> Og akkurat som en mental helse sjekk,
hva gjorde slash betegne?

90
00:04:37,830 --> 00:04:40,455
Hva betyr strek når
ber om en nettside?

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

92
00:04:43,070 --> 00:04:44,250
Du ber om det hele tiden.

93
00:04:44,250 --> 00:04:47,333
De fleste noen gang du besøker et nettsted, du
ikke skriv inn et filnavn.

94
00:04:47,333 --> 00:04:50,960
Du har sannsynligvis bare gå til Facebook.com,
enter, gmail.com, eller lignende.

95
00:04:50,960 --> 00:04:52,260
Og hva betyr strek representerer?

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

97
00:04:53,506 --> 00:04:54,630
Eller hva side, spesielt?

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

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

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

101
00:05:01,810 --> 00:05:04,810
Så hvis du ikke angir en fil
navn som vi vil begynne å se,

102
00:05:04,810 --> 00:05:07,750
du faktisk bare ber om
gi meg standard siden av Facebook

103
00:05:07,750 --> 00:05:10,800
eller gi meg min innboks eller gi
meg standard siden av nyheter

104
00:05:10,800 --> 00:05:12,510
på CNNs nettside eller lignende.

105
00:05:12,510 --> 00:05:15,220
Og en server reagerer deretter
at meldingen med noe

106
00:05:15,220 --> 00:05:18,420
som dette, sier ja, jeg
snakke HTTP versjon 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, som er en status
kode som vi mennesker sjelden

108
00:05:21,130 --> 00:05:22,790
gang se fordi det er bra.

109
00:05:22,790 --> 00:05:26,640
Fordi det betyr OK, forespørselen
ble mottatt og behandlet riktig.

110
00:05:26,640 --> 00:05:28,960
Og innholdstype
tilsynelatende i respons

111
00:05:28,960 --> 00:05:31,170
er ganske ofte, men ikke alltid, tekst.

112
00:05:31,170 --> 00:05:32,580
Og spesielt, HTML.

113
00:05:32,580 --> 00:05:34,760
Og det er faktisk
der vi ser på i dag.

114
00:05:34,760 --> 00:05:37,140
>> Så faktisk, jeg kommer til å gå
videre og åpne opp en nettleser.

115
00:05:37,140 --> 00:05:40,410
Jeg kommer til å bruke Chrome, kan du bruke
mest alle nettlesere i ukene som kommer.

116
00:05:40,410 --> 00:05:42,410
Vi anbefaler generelt Chrome
fordi det er spesielt

117
00:05:42,410 --> 00:05:43,750
bra for programvareutviklere.

118
00:05:43,750 --> 00:05:46,070
Det fikk en rekke innebygde
verktøy som gjør det enklere

119
00:05:46,070 --> 00:05:49,800
å utvikle ikke bare HTML og CSS,
ting vi skal begynne å snakke om i dag,

120
00:05:49,800 --> 00:05:51,530
men også andre språk også.

121
00:05:51,530 --> 00:05:55,530
>> Og jeg kommer til å gå videre og gå to--
Jeg kommer til å kontrollere klikk eller høyre

122
00:05:55,530 --> 00:05:57,210
klikk hvor som helst på en nettside.

123
00:05:57,210 --> 00:05:59,070
Og jeg kommer til å gå til Inspiser Element.

124
00:05:59,070 --> 00:06:03,850
Og jeg kommer til å finpusse min
skjermen bare litt her.

125
00:06:03,850 --> 00:06:05,790
La meg flytte denne til bunnen.

126
00:06:05,790 --> 00:06:08,140
Så dette er det som kalles
Chrome Inspector.

127
00:06:08,140 --> 00:06:11,010
Så dette er som en debugging
verktøy innebygd i Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Alle dere allerede har dette
hvis du har vært bruker Chrome.

129
00:06:13,520 --> 00:06:17,169
Og det tillater deg å se hva som skjer
på under panseret på noen web-side.

130
00:06:17,169 --> 00:06:19,210
Så la oss faktisk ta en
se på dette som følger.

131
00:06:19,210 --> 00:06:21,251
Den har veien flere funksjoner
og vi bryr oss om i dag.

132
00:06:21,251 --> 00:06:22,760
Men det er disse kategoriene over her.

133
00:06:22,760 --> 00:06:25,890
Elements, nettverk, kilder,
tidslinje, og noen andre ting.

134
00:06:25,890 --> 00:06:27,800
Jeg kommer til å klikke på
Nettverk for et øyeblikk.

135
00:06:27,800 --> 00:06:30,500
>> Og det er litt overveldende
ved første øyekast her.

136
00:06:30,500 --> 00:06:34,190
Men hva jeg skal gjøre er å la
meg forenkle det litt.

137
00:06:34,190 --> 00:06:37,560
Jeg kommer til å slå på
innspilling lys slik at det er rødt.

138
00:06:37,560 --> 00:06:39,140
Og jeg kommer til å si bevare logg.

139
00:06:39,140 --> 00:06:41,015
Og dette er bare en liten
ting jeg funnet ut

140
00:06:41,015 --> 00:06:44,120
over tid som kommer til å redde
alt som skjer i nettleseren.

141
00:06:44,120 --> 00:06:50,030
Og nå kommer jeg til å gå
til http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Egentlig, la oss gjøre www
for godt mål, skråstrek.

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

144
00:06:53,643 --> 00:06:56,180
Så en URL som mange av
du kanskje har besøkt.

145
00:06:56,180 --> 00:06:58,830
Og nå Facebooks nettside
siden kommer opp på toppen.

146
00:06:58,830 --> 00:07:02,350
Og så en hel haug med
ting fløy av nederst.

147
00:07:02,350 --> 00:07:04,830
Og i virkeligheten viser det seg at
når du besøker Facebook.com,

148
00:07:04,830 --> 00:07:09,320
du er ikke bare å lage en HTTP-forespørsel,
det viser seg at å gå til Facebook.com

149
00:07:09,320 --> 00:07:14,320
sender 41 av disse konvoluttene,
hver med sin egen komme forespørsel,

150
00:07:14,320 --> 00:07:18,360
som angitt, om enn bak skjermen
her, i bunnen av skjermen,

151
00:07:18,360 --> 00:07:24,040
det indikerer at, ja, min
Nettleseren gjort 41 forespørsler.

152
00:07:24,040 --> 00:07:29,689
>> Og totalt, det overført 861
kilobyte, og det tok en eller annen grunn

153
00:07:29,689 --> 00:07:31,730
så mange som åtte sekunder
å laste ned alt dette.

154
00:07:31,730 --> 00:07:33,790
Så det er faktisk litt rart
at Facebooks side ville ta den

155
00:07:33,790 --> 00:07:35,600
lang, men så bli det i dette tilfellet.

156
00:07:35,600 --> 00:07:39,520
Nå, alt dette jeg egentlig ikke bryr seg
om bortsett fra den øverste forespørsel.

157
00:07:39,520 --> 00:07:46,440
Så la oss gå til denne retten her
og la meg zoome ut for bare et øyeblikk.

158
00:07:46,440 --> 00:07:47,754
>> Og la meg zoome inn på dette.

159
00:07:47,754 --> 00:07:50,670
Så det jeg har gjort på igjen selv om
det er mye som skjer her borte

160
00:07:50,670 --> 00:07:53,360
er jeg har uthevet
Facebook.com og deretter

161
00:07:53,360 --> 00:07:56,540
merker at jeg rulle ned,
rulle ned, rulle ned,

162
00:07:56,540 --> 00:07:58,330
å be om overskrifter.

163
00:07:58,330 --> 00:08:01,720
Og du vil se at Chrome viser
me hovedsak de indre innholdet

164
00:08:01,720 --> 00:08:02,810
av anmodningen jeg gjorde.

165
00:08:02,810 --> 00:08:06,130
Det er ikke formatering i helt samme
måte, men legger merke til det er omtale av få,

166
00:08:06,130 --> 00:08:09,481
merker det er omtale av verten,
Facebook.com, banen, eller skråstrek,

167
00:08:09,481 --> 00:08:10,730
som er den filen jeg ba om.

168
00:08:10,730 --> 00:08:12,930
>> Og så hvis jeg blar
sikkerhetskopi, vil vi faktisk

169
00:08:12,930 --> 00:08:17,270
se at hva Facebook returnert
for meg er alle disse overskriftene.

170
00:08:17,270 --> 00:08:21,040
Så innsiden av det virtuelle konvolutt
faktisk er mange viktige verdi-par.

171
00:08:21,040 --> 00:08:23,130
Et ord, et kolon, og deretter en verdi.

172
00:08:23,130 --> 00:08:25,050
Et ord, et kolon, og en verdi.

173
00:08:25,050 --> 00:08:26,160
Disse kalles overskrifter.

174
00:08:26,160 --> 00:08:31,860
Og det er måten mer detalj her enn
vi faktisk bryr seg om akkurat nå.

175
00:08:31,860 --> 00:08:33,750
>> Men dette er uten
siste der nede,

176
00:08:33,750 --> 00:08:38,809
legge merke til, at Facebook.com server,
faktisk sagt her kommer litt tekst HTML.

177
00:08:38,809 --> 00:08:41,409
Så alt dette er å si
at når du ber om en web

178
00:08:41,409 --> 00:08:44,300
side fra en nettleser til en
server, svarer den serveren

179
00:08:44,300 --> 00:08:47,630
med en omhylling av sin egen
innsiden av som er tekst.

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

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

182
00:08:50,590 --> 00:08:53,200
Som er et annet språk
at vi introduserer i dag

183
00:08:53,200 --> 00:08:57,740
at mennesker eller datamaskiner generere
for å iverksette nettsider.

184
00:08:57,740 --> 00:08:59,580
>> Spesifikt, la oss se på dette.

185
00:08:59,580 --> 00:09:03,277
Jeg skal nå gå tilbake
til Facebook hjemmeside.

186
00:09:03,277 --> 00:09:05,360
Og jeg kommer til å like
kontroll klikk eller høyreklikk

187
00:09:05,360 --> 00:09:07,634
og klikk på Vis sidekilde.

188
00:09:07,634 --> 00:09:10,550
Og selv om du ikke bruker Chrome,
IE kan gjøre dette, kan Firefox gjøre dette,

189
00:09:10,550 --> 00:09:14,060
Safari kan gjøre dette, selv om menyen
alternativene kan se litt annerledes.

190
00:09:14,060 --> 00:09:18,990
Og dette er HTML som Mark og
Selskapet på Facebook har skrevet.

191
00:09:18,990 --> 00:09:24,640
>> Og kollektivt, dette språket her
implementerer den blå og den hvite siden

192
00:09:24,640 --> 00:09:26,370
at vi så et øyeblikk siden.

193
00:09:26,370 --> 00:09:28,030
Nå, dette er litt overveldende.

194
00:09:28,030 --> 00:09:31,400
Men hvis vi ser opp øverst til venstre, er vi
kommer til å begynne å se noen mønstre.

195
00:09:31,400 --> 00:09:34,140
Det ser ut som det er mye
av disse åpen vinkelbrakett

196
00:09:34,140 --> 00:09:35,970
og så er det dette søkeordet HTML.

197
00:09:35,970 --> 00:09:38,330
Her er en annen åpen
vinkeljern og hode.

198
00:09:38,330 --> 00:09:41,560
>> Her er, hvis vi bla nedover
og ned og ned, jeg er

199
00:09:41,560 --> 00:09:43,820
kommer til å gå videre og prøve
å søke etter noe.

200
00:09:43,820 --> 00:09:48,510
Det helt over på høyre
her er åpen brakett kroppen.

201
00:09:48,510 --> 00:09:50,800
Og husker fra sist
tide at vi foreslo

202
00:09:50,800 --> 00:09:53,364
at den enkleste nettside
at et menneske kan skrive

203
00:09:53,364 --> 00:09:55,030
kan se litt noe sånt som dette.

204
00:09:55,030 --> 00:09:58,430
Åpne HTML-kode, åpen hodet
tag, åpne tittelen tag,

205
00:09:58,430 --> 00:10:03,230
så lukket tittel, lukket hode, åpen
body tag, tekst, lukket kropp,

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

207
00:10:04,720 --> 00:10:06,290
>> Men en pause her for bare et øyeblikk.

208
00:10:06,290 --> 00:10:09,030
Denne koden, selv om du har
aldri skrevet det før

209
00:10:09,030 --> 00:10:11,864
men fortsatt ikke helt forstår
hva som skjer, ser ganske bra.

210
00:10:11,864 --> 00:10:12,821
Rett, det er veldig rent.

211
00:10:12,821 --> 00:10:14,120
Det er veldig stilistisk hyggelig.

212
00:10:14,120 --> 00:10:16,190
Mange innrykk og tomrom.

213
00:10:16,190 --> 00:10:18,020
Facebooks er det ikke.

214
00:10:18,020 --> 00:10:23,190
Så hvorfor er Facebook så mye
verre enn jeg på å skrive HTML?

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

216
00:10:24,310 --> 00:10:26,899
>> Høyre, er dette som en
av fem for stil.

217
00:10:26,899 --> 00:10:29,315
Det er en overbevisende grunn
for dem å kutte disse hjørnene.

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

219
00:10:31,069 --> 00:10:33,860
All right, slik at de ikke ønsker å
gjøre det lettere for deg å lese den.

220
00:10:33,860 --> 00:10:36,940
Så i en viss forstand, er de
obfuscating det, liksom scrambling det

221
00:10:36,940 --> 00:10:40,260
minst estetisk så
at det er vanskeligere for Myspace

222
00:10:40,260 --> 00:10:42,705
å gå og rive av deres
hjemmesiden og HTML for det.

223
00:10:42,705 --> 00:10:45,080
Det viser seg at med programmer
skjønt, inkludert Chrome,

224
00:10:45,080 --> 00:10:47,020
vi kan rydde opp dette super enkelt.

225
00:10:47,020 --> 00:10:49,420
Så det er ikke helt det som årsak.

226
00:10:49,420 --> 00:10:51,290
Hva annet kan være årsaken.

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, tomrom kostnader data.

230
00:10:55,890 --> 00:10:56,598
Hva mener du?

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

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

233
00:11:02,979 --> 00:11:06,020
Hvis du treffer på Tab-tasten mye eller
space bar, vurdere virkningene.

234
00:11:06,020 --> 00:11:10,060
Så hver tast på tastaturet er en
[Uhørbart] representert som en byte.

235
00:11:10,060 --> 00:11:14,560
>> Så antar at Mark eller noen av de devs
disse dager treffer mellomromstasten bare en gang

236
00:11:14,560 --> 00:11:17,899
i denne HTML-side som
representerer Facebook hjemmeside.

237
00:11:17,899 --> 00:11:19,690
Og Facebook har mye
av brukerne i disse dager.

238
00:11:19,690 --> 00:11:24,030
Så antar at Facebook sin hjemmeside
får besøk av en milliard mennesker i dag.

239
00:11:24,030 --> 00:11:27,020
Og noen på Facebook har
traff mellomromstasten bare én gang.

240
00:11:27,020 --> 00:11:29,890
>> Så en ekstra byte,
en milliard forespørsler,

241
00:11:29,890 --> 00:11:32,790
hvor mye mer data er Facebook
overføring over Internett

242
00:11:32,790 --> 00:11:37,160
fordi noen treffer
mellomromstasten på hans eller hennes tastatur?

243
00:11:37,160 --> 00:11:41,660
En milliard byte, eller én gigabyte
data sendes fra Facebook-servere

244
00:11:41,660 --> 00:11:43,626
til folk rundt
verden for ingen god grunn.

245
00:11:43,626 --> 00:11:44,750
Nå, det er bare én plass.

246
00:11:44,750 --> 00:11:48,866
>> Tenk om vi faktisk rent dette
ting opp og rykket det og lagt

247
00:11:48,866 --> 00:11:50,990
mye hvitt plass og
tabulatortegn og mellomrom,

248
00:11:50,990 --> 00:11:53,656
du ende opp med å tilbringe gigabyte,
hvis ikke terra byte mer plass.

249
00:11:53,656 --> 00:11:56,640
Og så super vanlig i
faktiske verden av webutvikling

250
00:11:56,640 --> 00:11:58,950
er å minify koden din.

251
00:11:58,950 --> 00:12:01,280
Og vi vil til slutt se
hvordan du kan gjøre dette.

252
00:12:01,280 --> 00:12:04,630
>> Men i dag, vil vi begynne å skrive kode
det er faktisk leses av oss mennesker.

253
00:12:04,630 --> 00:12:10,120
Det viser seg, men hvis du går tilbake
dette verktøyet i Chrome Inspiser Element,

254
00:12:10,120 --> 00:12:12,030
tidligere, var vi på kategorien Nettverk.

255
00:12:12,030 --> 00:12:15,430
Det viser seg at hvis du går til
elementer kategorien, hva du faktisk se

256
00:12:15,430 --> 00:12:19,230
er Chrome ganske trykt
versjon av det samme 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 er ingen match for en datamaskin.

259
00:12:22,472 --> 00:12:24,430
Og nå kan du faktisk
klikke seg rundt og begynne

260
00:12:24,430 --> 00:12:27,630
å se hierarkiet som er en nettside.

261
00:12:27,630 --> 00:12:28,780
Så la oss faktisk gjør dette.

262
00:12:28,780 --> 00:12:32,120
Jeg kommer til å gå videre og åpne opp på
min Mac et program som heter tekstredigering.

263
00:12:32,120 --> 00:12:35,490
Og minner om at dette er bare
en super enkel tekstprogram.

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

265
00:12:37,490 --> 00:12:39,820
Og jeg kommer til å Verbatim
skriver følgende.

266
00:12:39,820 --> 00:12:44,650
Doc typen HTML, åpen brakett
HTML, lukket brakett HTML,

267
00:12:44,650 --> 00:12:49,000
vi har hodet på siden her,
enden av hodet på siden her,

268
00:12:49,000 --> 00:12:52,310
en tittel vil være som, hallo verden.

269
00:12:52,310 --> 00:12:56,660
>> Og deretter ned her, vi trenger
kroppen av websiden.

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

271
00:12:58,050 --> 00:13:00,700
Og så i her, hallo verden.

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

273
00:13:01,270 --> 00:13:03,350
Så vi har skrevet en super rask nettside.

274
00:13:03,350 --> 00:13:06,675
Jeg kommer til å lagre det som
hello.html på skrivebordet mitt.

275
00:13:06,675 --> 00:13:09,050
My Mac kommer til å klage,
tenker at, vent litt,

276
00:13:09,050 --> 00:13:11,091
dette er en tekstfil, gjøre
du vil kalle det .txt?

277
00:13:11,091 --> 00:13:13,300
Men nei, jeg vil bruke dot HTML.

278
00:13:13,300 --> 00:13:16,140
>> Og hva er fint hvis jeg
bare dobbeltklikker denne filen,

279
00:13:16,140 --> 00:13:18,600
hello.html, her er min nettside.

280
00:13:18,600 --> 00:13:22,564
Dessverre er jeg den
eneste personen i verden

281
00:13:22,564 --> 00:13:23,980
som kan gå til denne siden akkurat nå.

282
00:13:23,980 --> 00:13:26,734
Fordi der lever det tilsynelatende?

283
00:13:26,734 --> 00:13:27,650
Det er på min Mac, ikke sant?

284
00:13:27,650 --> 00:13:28,470
Som er ubrukelig.

285
00:13:28,470 --> 00:13:30,390
Som ingen i dette rommet
la alene på internett

286
00:13:30,390 --> 00:13:31,598
faktisk kan besøke denne siden.

287
00:13:31,598 --> 00:13:33,820
Så i dag, må vi
innføre et annet element.

288
00:13:33,820 --> 00:13:36,720
>> Og for å gjøre dette, kommer jeg til å
gå videre og åpne opp cloud ni.

289
00:13:36,720 --> 00:13:40,090
Så cloud 9 er selvfølgelig en
cloud basert service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- Det har alle våre arbeidsområder
kjører et sted på internett.

291
00:13:44,890 --> 00:13:48,330
Og det betyr at alle våre filer
er offentlig tilgjengelig allerede.

292
00:13:48,330 --> 00:13:49,830
Så la oss gå videre og gjøre dette.

293
00:13:49,830 --> 00:13:53,670
Jeg kommer til å gå videre og
opprette en ny fil NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Jeg kommer til å lagre det som før
som hello.html og klikk lagre.

295
00:13:58,819 --> 00:14:01,860
Og nå bare for å spare tid, jeg kommer
å gå videre og kopier lim inn denne koden

296
00:14:01,860 --> 00:14:03,470
snarere enn gjentar det.

297
00:14:03,470 --> 00:14:04,550
Og lagre det.

298
00:14:04,550 --> 00:14:07,550
Og så nå har jeg en
fil som heter hello.html.

299
00:14:07,550 --> 00:14:09,710
Men hvordan gjør jeg faktisk
åpne den som en web-side?

300
00:14:09,710 --> 00:14:14,120
Vel, det viser seg at bygget inn i CS50
IDE er ikke bare en kompilator som klang

301
00:14:14,120 --> 00:14:16,670
og en debugger som GDB og
bunter av andre programmer,

302
00:14:16,670 --> 00:14:21,140
det er faktisk en fullverdig
webserveren kjører innenfor CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Alle dere, det vil si,
har din egen web server.

304
00:14:23,900 --> 00:14:26,850
Og en web server er bare et stykke
av programvare som har som formål i livet

305
00:14:26,850 --> 00:14:28,220
er å tjene opp nettsider.

306
00:14:28,220 --> 00:14:32,490
Å lytte etter forespørsler fra nettlesere og
svare med små virtuelle konvolutter

307
00:14:32,490 --> 00:14:35,290
på innsiden av disse er
innhold som jeg har skrevet.

308
00:14:35,290 --> 00:14:38,372
Så denne web server er
faktisk gratis og åpen kildekode.

309
00:14:38,372 --> 00:14:40,830
Hvor åpen kildekode betyr bare
programvare som noen andre har

310
00:14:40,830 --> 00:14:43,480
skrevet at alle av oss kan
faktisk se og laste ned og selv

311
00:14:43,480 --> 00:14:44,780
endre kildekoden.

312
00:14:44,780 --> 00:14:46,150
Og det heter Apache.

313
00:14:46,150 --> 00:14:51,450
>> Og vi har gjort det litt lettere å
bruker i CS50IDE ved å kalle det Apache 50.

314
00:14:51,450 --> 00:14:53,780
Slik at det faktisk kan
forstå følgende.

315
00:14:53,780 --> 00:14:56,560
Jeg kommer til å si Apache 50 start.

316
00:14:56,560 --> 00:14:58,910
Og da er jeg bare kommer til å si prikk.

317
00:14:58,910 --> 00:15:01,080
Og vi ser noen noe
uforståelige melding som sier

318
00:15:01,080 --> 00:15:04,640
sette Apache dokument [? gruppe?]
hjemmet, ubuntu, uansett hva det er,

319
00:15:04,640 --> 00:15:05,770
slash arbeidsområde.

320
00:15:05,770 --> 00:15:08,280
Starter web server
Apache to hell.

321
00:15:08,280 --> 00:15:11,330
>> Så lang historie kort, jeg
har nettopp trykket på en knapp

322
00:15:11,330 --> 00:15:18,000
og slått på en webserver som er nå
lytte på internett på TCP port

323
00:15:18,000 --> 00:15:20,587
80 ved en bestemt adresse.

324
00:15:20,587 --> 00:15:22,420
Og det står her, og
dette vil endre baserte

325
00:15:22,420 --> 00:15:26,550
på brukernavnet ditt og andre faktorer,
men merker nå hvis jeg klikker på denne,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard og så og
I så fall merke til at hele denne tiden

327
00:15:30,211 --> 00:15:31,960
For de siste
uker, kan du ha

328
00:15:31,960 --> 00:15:35,200
lagt merke til at ditt eget brukernavn
er innebygd i høyre hånd

329
00:15:35,200 --> 00:15:37,130
hjørne av CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> Og som faktisk har vært alt dette
tids hvilken adresse du kan

331
00:15:41,050 --> 00:15:43,574
besøke alle dine filer via web.

332
00:15:43,574 --> 00:15:45,990
Til nå har det ikke betydde noe,
fordi i C, du vanligvis

333
00:15:45,990 --> 00:15:48,073
vil ha ting som kjører i en
terminal, ikke på nettet.

334
00:15:48,073 --> 00:15:50,800
Men i dag, starter vi
skriver web-basert kode

335
00:15:50,800 --> 00:15:53,350
at vi ønsker
tilgjengelig på offentlige URLer.

336
00:15:53,350 --> 00:15:56,100
Så hva jeg kommer til å
gjøre er å klikke på denne nettadressen.

337
00:15:56,100 --> 00:16:00,880
>> Og legg merke til at jeg ser en ganske
stygg indeksen, en katalogoppføring,

338
00:16:00,880 --> 00:16:04,090
men hva filen hopper ut av deg sannsynligvis?

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

340
00:16:05,210 --> 00:16:07,870
Det er fordi jeg lagret
filen i mitt arbeidsområde.

341
00:16:07,870 --> 00:16:12,310
Og hva jeg har fortalt Apache web server
er å se i Davids arbeidsområde katalogen.

342
00:16:12,310 --> 00:16:15,300
Og la noen i
verden se disse filene.

343
00:16:15,300 --> 00:16:19,050
>> Og faktisk, hvis jeg nå
klikk på hello.html,

344
00:16:19,050 --> 00:16:22,180
Jeg ser i denne kategorien akkurat den filen.

345
00:16:22,180 --> 00:16:26,430
Legg merke til nå, cloud 9 er dette gjort
noe litt nyttig for oss.

346
00:16:26,430 --> 00:16:29,480
Innenfor CS50 IDE, merke det
plutselig en adresse bar.

347
00:16:29,480 --> 00:16:33,690
Det er fordi selv om vi er
bruker Chrome for å besøke CS50IDE,

348
00:16:33,690 --> 00:16:37,940
innsiden av CS50IDE er sin egen
versjon av en nettleser akkurat nå.

349
00:16:37,940 --> 00:16:40,820
Og så heller enn
komplisere ting som sådan,

350
00:16:40,820 --> 00:16:42,955
Jeg kommer til å gå videre
og bare kopiere denne nettadressen.

351
00:16:42,955 --> 00:16:45,330
Jeg kommer til å gå videre og bare
åpne min egen Chrome-vinduet.

352
00:16:45,330 --> 00:16:47,800
Så det er ingen magi her, ingen CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Jeg skal bare bokstavelig talt lime
min J Harvard URL og trykk Enter.

354
00:16:51,800 --> 00:16:54,750
Og voila, nå jeg, og
i teorien, alle

355
00:16:54,750 --> 00:16:57,700
på internett, hvis jeg har konfigurert
rettighetene på den,

356
00:16:57,700 --> 00:16:58,720
kan besøke denne filen.

357
00:16:58,720 --> 00:17:03,230
Og så nå, hvis jeg sa
hello.html, voila, der

358
00:17:03,230 --> 00:17:06,366
er min utrolig uimponerende nettside.

359
00:17:06,366 --> 00:17:07,740
Så la oss gjøre en rask tilregnelighet sjekk.

360
00:17:07,740 --> 00:17:09,710
På grunn av at alle
er konseptuelt sett opp.

361
00:17:09,710 --> 00:17:13,180
Og vi har faktisk ikke egentlig
lært deg hvordan du skal skrive HTML per se.

362
00:17:13,180 --> 00:17:16,084
Eventuelle spørsmål så langt
om hva som skjedde?

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
Betyr CS50 eier disse websidene?

367
00:17:25,800 --> 00:17:26,460
I hvilken forstand?

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

369
00:17:28,947 --> 00:17:29,530
Godt spørsmål.

370
00:17:29,530 --> 00:17:32,429
Så CS50 sin eier CS50.io.

371
00:17:32,429 --> 00:17:33,970
Vi har faktisk kjøpt dette domenenavnet.

372
00:17:33,970 --> 00:17:37,240
Og av naturen av dere
logge inn CS50IDE,

373
00:17:37,240 --> 00:17:39,270
dere alle får det som kalles et underdomene.

374
00:17:39,270 --> 00:17:46,840
>> Så IDE50-Malan, eller IDE50-Rob.CS50.io,
det er din unike adresse innen

375
00:17:46,840 --> 00:17:47,730
vår domenenavn.

376
00:17:47,730 --> 00:17:50,850
Så i forbindelse med kurset,
du har din egen unike adresse.

377
00:17:50,850 --> 00:17:55,150
Men vi har forenklet ting ved
kjøpe toppnivådomenet, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O og deretter alle andre er
på innsiden av det, så å si.

379
00:17:58,050 --> 00:17:59,890
Og vi vil komme tilbake til dette
i et par uker sannsynligvis,

380
00:17:59,890 --> 00:18:01,930
spesielt på siste prosjektet
tid, da noen av dere

381
00:18:01,930 --> 00:18:03,596
kanskje få ditt eget domenenavn.

382
00:18:03,596 --> 00:18:06,270
Det er faktisk relativt
grei.

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

384
00:18:06,770 --> 00:18:07,880
Så la oss nå gjøre dette.

385
00:18:07,880 --> 00:18:11,910
Jeg kommer til å gå tilbake til
CS50IDE, hvor filen min akkurat nå,

386
00:18:11,910 --> 00:18:14,710
hello.html, er ikke alle som interessant.

387
00:18:14,710 --> 00:18:17,130
Jeg vil gjerne gjøre noe
litt hyggeligere enn det.

388
00:18:17,130 --> 00:18:19,440
Så jeg kommer til å gjøre noe som dette.

389
00:18:19,440 --> 00:18:21,510
La meg åpne paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Så dette er en fil jeg skrev på forhånd.

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

392
00:18:26,480 --> 00:18:28,730
Men i HTML, kommentarer
ser litt annerledes.

393
00:18:28,730 --> 00:18:33,270
På linje tre og linje 14, du
se syntaksen for å starte en kommentar

394
00:18:33,270 --> 00:18:34,020
og avslutte en kommentar.

395
00:18:34,020 --> 00:18:36,820
>> Men ingen av sakene i
mellom saker funksjonelt.

396
00:18:36,820 --> 00:18:40,250
Det er bare et notat til en
menneskelige hva som skjer her.

397
00:18:40,250 --> 00:18:43,040
Og akkurat som en rask sunn fornuft
sjekk, hvis jeg ruller nedover,

398
00:18:43,040 --> 00:18:46,820
hva som er den åpenbare nye
tag som vi har innført?

399
00:18:46,820 --> 00:18:52,130
Kodene så langt vi har sett er åpen
brakett HTML, hode, tittel og kropp.

400
00:18:52,130 --> 00:18:54,400
Men hva er tydeligvis nytt nå?

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

402
00:18:55,200 --> 00:18:57,320
Den p tag eller avsnitt tag.

403
00:18:57,320 --> 00:19:01,182
Og da jeg bare lånt noen standard
Latinske teksten å utgjøre mine avsnitt.

404
00:19:01,182 --> 00:19:03,390
Fordi det jeg ønsket å
demonstrere er hvordan du kan

405
00:19:03,390 --> 00:19:05,859
representere tekstavsnitt i HTML.

406
00:19:05,859 --> 00:19:08,400
Og så hva som begynner å skje
her er at det allerede

407
00:19:08,400 --> 00:19:09,657
et mønster utvikling.

408
00:19:09,657 --> 00:19:10,990
Og la meg gå videre og gjøre dette.

409
00:19:10,990 --> 00:19:12,760
La meg først slå av Apache.

410
00:19:12,760 --> 00:19:17,340
Og jeg kommer til å fortelle det til å starte seg selv
igjen inne dagens kilde sju

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

412
00:19:18,420 --> 00:19:20,100
Slik at jeg har tilgang til alt.

413
00:19:20,100 --> 00:19:22,230
>> Og nå, hvis jeg går tilbake til
denne katalogoppføring,

414
00:19:22,230 --> 00:19:24,846
merker jeg ser hver fil fra i dag.

415
00:19:24,846 --> 00:19:26,720
Og du vil se i
neste problem sett, vil vi

416
00:19:26,720 --> 00:19:28,594
gi deg instruksjoner
for å gjøre akkurat dette.

417
00:19:28,594 --> 00:19:35,210
Hvis jeg åpner paragraphs.html, kan dette
også se ut som et programmeringsspråk

418
00:19:35,210 --> 00:19:36,970
til deg hvis du ikke snakke eller lese latin.

419
00:19:36,970 --> 00:19:40,525
Men dette er bare tre avsnitt
av teksten som er merket opp i HTML.

420
00:19:40,525 --> 00:19:43,100
>> Og legg merke til avsnittet
pauser mellom dem.

421
00:19:43,100 --> 00:19:46,400
Fordi det viser seg,
og selv om du

422
00:19:46,400 --> 00:19:49,210
kan være tilbøyelig til å gjøre dette,
mens det i den virkelige verden,

423
00:19:49,210 --> 00:19:51,370
Hvis du ønsker å sette linjen
pauser mellom ting,

424
00:19:51,370 --> 00:19:55,680
du kanskje rett og slett
gjøre dette og traff Lagre.

425
00:19:55,680 --> 00:19:59,460
Og nå, hvis jeg laster her, varsel
at alt tåkelegger bare sammen

426
00:19:59,460 --> 00:20:01,100
i bare ett blob av tekst.

427
00:20:01,100 --> 00:20:03,570
Fordi HTML er en slags stum språk.

428
00:20:03,570 --> 00:20:07,230
>> Den er ment å bli brukt i slike
måte at leseren vil bare

429
00:20:07,230 --> 00:20:09,920
gjøre eksplisitt hva du ber den om.

430
00:20:09,920 --> 00:20:12,890
Så hvis du ikke forteller det
gi meg et nytt avsnitt,

431
00:20:12,890 --> 00:20:14,569
du kommer ikke til å se et nytt avsnitt.

432
00:20:14,569 --> 00:20:16,360
Og faktisk, hva
Nettleseren kommer til å gjøre

433
00:20:16,360 --> 00:20:20,020
er selv om du trykker på Enter,
la oss si igjen og igjen

434
00:20:20,020 --> 00:20:23,190
og igjen, flytter denne teksten måte
ned på skjermen og deretter lagre

435
00:20:23,190 --> 00:20:26,610
og legg, nettleseren kommer
å kollapse alle som white space

436
00:20:26,610 --> 00:20:29,021
til bare et enkelt, synlig mellomrom.

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

438
00:20:29,520 --> 00:20:30,869
Så det er avsnittet tag.

439
00:20:30,869 --> 00:20:32,910
Og så hva er mønsteret
som er utviklet her?

440
00:20:32,910 --> 00:20:37,450
Vel, synes det å være slik at
HTML handler om å starte en tag

441
00:20:37,450 --> 00:20:38,460
og avslutte en tag.

442
00:20:38,460 --> 00:20:39,300
Og hva er et merke?

443
00:20:39,300 --> 00:20:41,160
Vel, det er bare en del av syntaksen.

444
00:20:41,160 --> 00:20:44,400
Åpne brakett, et nøkkelord,
lukket braketten, er en tag.

445
00:20:44,400 --> 00:20:45,510
Eller start tag.

446
00:20:45,510 --> 00:20:48,590
Og så når du er
gjort uttrykke deg selv,

447
00:20:48,590 --> 00:20:52,300
som i du er ferdig med ledd
du gjør så å si motsatt.

448
00:20:52,300 --> 00:20:55,480
Men det motsatte er ikke helt bakover.

449
00:20:55,480 --> 00:21:00,630
>> Du bare prefiks samme tag
nevne med en skråstrek som dette.

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

451
00:21:01,130 --> 00:21:02,570
Så det er ikke alt som er spennende.

452
00:21:02,570 --> 00:21:05,270
Og faktisk, vi er ikke noe som gjør det
web alt som mer interessant.

453
00:21:05,270 --> 00:21:07,630
Hva om jeg ønsker å gjøre
ting større og fet?

454
00:21:07,630 --> 00:21:11,780
Så det viser seg at her er et eksempel
i headings.html, hvor i kroppen min,

455
00:21:11,780 --> 00:21:17,280
Jeg har en H1 tag, H2, H3,
fire, fem eller seks, som alle

456
00:21:17,280 --> 00:21:18,310
synes ganske uforståelige.

457
00:21:18,310 --> 00:21:21,010
Men hvis jeg går åpne denne
eksempel, la 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å nettlesere som standard kan gi deg tekst
det er stor og fet av ulike størrelser.

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

461
00:21:28,070 --> 00:21:31,240
H6 er mindre og deretter
alt i mellom.

462
00:21:31,240 --> 00:21:34,170
Så det er interessant, men fortsatt
egentlig nettet jeg vet.

463
00:21:34,170 --> 00:21:36,870
Hva hvis vi ønsker å jeg har
noe som en liste. .

464
00:21:36,870 --> 00:21:40,190
Så her er en punktliste over
tre av Harvards hus.

465
00:21:40,190 --> 00:21:41,600
>> Hvordan fikk du gå om du gjør dette?

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

467
00:21:45,410 --> 00:21:47,870
Og her ser vi en
Litt funkiness

468
00:21:47,870 --> 00:21:49,630
men la oss vurdere hva som skjer.

469
00:21:49,630 --> 00:21:56,182
Så basert på det du nettopp har sett,
UL står for sorterte liste.

470
00:21:56,182 --> 00:21:57,640
Sorterte liste bare betyr punkt.

471
00:21:57,640 --> 00:21:58,431
Det finnes ingen tall.

472
00:21:58,431 --> 00:22:01,850
Det er også noe som kalles en
sortert liste, som er et OL på tag.

473
00:22:01,850 --> 00:22:05,350
Deretter LI, er listeelement alt det innebærer.

474
00:22:05,350 --> 00:22:07,790
>> Og så den automatisk
tallene alt for deg.

475
00:22:07,790 --> 00:22:11,270
Men igjen, alle mine innrykk
og tomrom er bare for min skyld.

476
00:22:11,270 --> 00:22:13,050
Nettleseren er ikke
faktisk kommer til å vare.

477
00:22:13,050 --> 00:22:16,670
Så selv om du ikke kunne
gjøre dette, bare for å være klar,

478
00:22:16,670 --> 00:22:19,880
du bør ikke selv om
leseren vil fortsatt

479
00:22:19,880 --> 00:22:22,130
være i stand til å forstå det helt fint.

480
00:22:22,130 --> 00:22:24,590
Jeg trykket reload i min
leseren, jeg klikke reload

481
00:22:24,590 --> 00:22:26,760
og ingen endring skjer
fordi nettleseren fortsatt

482
00:22:26,760 --> 00:22:29,550
gjør akkurat det jeg ber den om.

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

484
00:22:30,050 --> 00:22:31,340
Så dette er alt bare tekst.

485
00:22:31,340 --> 00:22:33,730
Nå la oss gjøre noe mer interessant.

486
00:22:33,730 --> 00:22:36,660
Jeg kommer til å gå videre og
låne noen av HTML.

487
00:22:36,660 --> 00:22:40,910
Jeg kommer til å gå videre og
opprette en ny fil her.

488
00:22:40,910 --> 00:22:43,370
Og vi vil kalle dette rick.html.

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

490
00:22:46,190 --> 00:22:48,916
Vi har uforholdsmessig
brukte noe

491
00:22:48,916 --> 00:22:51,290
kalles en rick roll i denne
klasse i år, vet jeg ikke,

492
00:22:51,290 --> 00:22:53,880
det bare skjedde organisk.

493
00:22:53,880 --> 00:22:55,397
>> Og nå er det kommet ut av kontroll.

494
00:22:55,397 --> 00:22:56,730
Så jeg skal bare gå med det.

495
00:22:56,730 --> 00:22:59,700
Og hvis jeg går til Google
Bilder og Rick Astley.

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

497
00:23:02,450 --> 00:23:06,170
Hvis du ikke vet hvorfor vi gjør
dette, bare lese på Wikipedia.

498
00:23:06,170 --> 00:23:11,520
Hver gang du har klikket på linken,
noen har vært ler et sted.

499
00:23:11,520 --> 00:23:14,860
Og la meg gå ahead-- det
vi går, la oss se dette bildet.

500
00:23:14,860 --> 00:23:16,750
>> Så her har vi en
bilde i Google Images.

501
00:23:16,750 --> 00:23:19,390
Og la oss anta at dette er
rimelig overalt på internett.

502
00:23:19,390 --> 00:23:22,570
Så jeg kommer til å anta at det er OK for meg
å faktisk sette dette i min nettside.

503
00:23:22,570 --> 00:23:24,820
Jeg kommer til å gå videre
og kopiere bildenettadressen.

504
00:23:24,820 --> 00:23:28,600
Og nå hvis jeg går tilbake til Cloud
9, la oss se hva jeg kan gjøre her.

505
00:23:28,600 --> 00:23:30,630
Så her er bare en nettside.

506
00:23:30,630 --> 00:23:39,020
Dette er Rick Astley, haha,
Jeg skal nå gå tilbake

507
00:23:39,020 --> 00:23:43,510
til nettleseren min, laste, og interessant.

508
00:23:43,510 --> 00:23:44,530
>> Hvor er Rick?

509
00:23:44,530 --> 00:23:46,050
Så la meg se hva som har skjedd.

510
00:23:46,050 --> 00:23:49,114
Egentlig kommer jeg til å
late som om jeg ikke gjorde det.

511
00:23:49,114 --> 00:23:50,280
[Uhørbart] satte ham inn her.

512
00:23:50,280 --> 00:23:52,520
Vi vil komme tilbake til det i et øyeblikk.

513
00:23:52,520 --> 00:23:54,200
Så her er rick.html.

514
00:23:54,200 --> 00:23:56,070
Så det er ikke Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Så det viser seg at vi kan
faktisk legge ham inn her.

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

517
00:24:00,830 --> 00:24:06,680
Jeg kommer til å si gi meg et bilde som
kilden er webadressen jeg bare kopiert, som

518
00:24:06,680 --> 00:24:09,110
tilsynelatende er en glad
bursdag eller annet.

519
00:24:09,110 --> 00:24:13,280
>> Og nå kommer jeg til å
lukke tag som dette.

520
00:24:13,280 --> 00:24:15,170
Så dette er å pakke super lang.

521
00:24:15,170 --> 00:24:17,740
Men legg merke til at alt jeg har
gjort er åpen brakett image,

522
00:24:17,740 --> 00:24:20,270
kilde med en egenskap av dette.

523
00:24:20,270 --> 00:24:21,530
Og det er en veldig lang URL.

524
00:24:21,530 --> 00:24:23,720
Og helt på slutten, merke dette.

525
00:24:23,720 --> 00:24:29,530
Hvorfor har jeg gjort slash vinklet brakett
i stedet for, som alle andre tag,

526
00:24:29,530 --> 00:24:33,590
som har en åpen hylle,
IMG, lukket brakett?

527
00:24:33,590 --> 00:24:37,040
Bare ta en gjetning selv om du
har ingen kjennskap overhodet

528
00:24:37,040 --> 00:24:40,410
med HTML før.

529
00:24:40,410 --> 00:24:42,710
>> Så det er slik det stenger
kommandoen, men hvorfor

530
00:24:42,710 --> 00:24:45,850
det gjør egentlig ikke gjøre intuitive
fornuftig å gjøre noe litt mer

531
00:24:45,850 --> 00:24:48,820
ordrik som nært bilde?

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
Bare semantisk, er det ingen følelse av
starter et bilde og slutter et bilde,

535
00:24:55,620 --> 00:24:56,870
det er enten det eller er det ikke.

536
00:24:56,870 --> 00:25:00,960
Så det ikke fornuftig å forlate et gap
for noe annet inne i et bilde.

537
00:25:00,960 --> 00:25:02,010
Du kan bare ikke gjøre det.

538
00:25:02,010 --> 00:25:03,720
Og så syntaksen
generelt vil være like

539
00:25:03,720 --> 00:25:07,910
å gjøre skråstreken inne
av den åpne tag eller start tag

540
00:25:07,910 --> 00:25:09,020
og deretter traff Lagre.

541
00:25:09,020 --> 00:25:13,350
>> Så hvis jeg nå laste denne filen, nå
Jeg har en god nettside matlaging her.

542
00:25:13,350 --> 00:25:15,100
Og vi kunne sikkert
virkelig irritere folk

543
00:25:15,100 --> 00:25:17,010
ved å bygge i stedet
som en YouTube link.

544
00:25:17,010 --> 00:25:19,350
Og faktisk, helst
du noen gang gått til YouTube,

545
00:25:19,350 --> 00:25:22,190
og la meg faktisk et uhell
rick rulle meg selv her.

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

547
00:25:25,770 --> 00:25:29,592
Så rick roll-- jeg kommer til å gå her.

548
00:25:29,592 --> 00:25:31,900
>> [MUSIC SPILLE]

549
00:25:31,900 --> 00:25:33,730
>> OK, en person likte det.

550
00:25:33,730 --> 00:25:37,270
Så legger merke til all denne tiden, hvis du
klikk på koblingen Del, du selvfølgelig

551
00:25:37,270 --> 00:25:41,390
få nettadressen som du faktisk kan
bygge inn i en e-post eller et rettsmedisinsk bilde

552
00:25:41,390 --> 00:25:43,730
eller i en oppgavesettet eller i et lysbilde.

553
00:25:43,730 --> 00:25:49,055
Og nå, hvis jeg klikker i stedet på embed,
Legg merke til at all denne tiden, denne ting

554
00:25:49,055 --> 00:25:49,680
har vært der.

555
00:25:49,680 --> 00:25:50,910
Jeg kommer til å gå videre og kopiere dette.

556
00:25:50,910 --> 00:25:54,000
>> Og bare så vi kan se det bedre, jeg er
kommer til å lime det inn i min tekst editor.

557
00:25:54,000 --> 00:25:55,860
Legg merke til at dette er hva
YouTube har fortalt deg.

558
00:25:55,860 --> 00:25:57,693
Hver gang du besøker en
YouTube-video, hvis du

559
00:25:57,693 --> 00:26:00,410
ønsker å bygge inn videoen på din
web side, bare ta dette.

560
00:26:00,410 --> 00:26:03,350
Så dette er nok et
HTML kode kalles en iframe.

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

562
00:26:04,590 --> 00:26:08,680
Slik at det også ser litt mer
komplekst enn alle de andre.

563
00:26:08,680 --> 00:26:11,950
Slik at det viser seg at bildet
tag og tilsynelatende iframe tag

564
00:26:11,950 --> 00:26:13,370
ta det som kalles attributter.

565
00:26:13,370 --> 00:26:15,710
>> Og dette er en annen
stykke syntaks i HTML.

566
00:26:15,710 --> 00:26:19,240
I tillegg til merkets
navn, åpen brakett kodenavn,

567
00:26:19,240 --> 00:26:23,780
du kan kontrollere oppførselen til tag
ved å ha en hel haug med attributt

568
00:26:23,780 --> 00:26:24,860
lik verdi.

569
00:26:24,860 --> 00:26:26,290
Attributt er lik verdi.

570
00:26:26,290 --> 00:26:28,100
Og så for eksempel,
YouTube er å fortelle oss

571
00:26:28,100 --> 00:26:31,990
hvis du vil at bredden på denne videoen
å være 420 piksler og høyden

572
00:26:31,990 --> 00:26:35,470
å være 315 piksler, som er
hvordan du uttrykker det i HTML.

573
00:26:35,470 --> 00:26:38,480
>> Kilden av videoen går
å være så lang YouTube URL

574
00:26:38,480 --> 00:26:40,830
og litt andre ting
som rammekanten er null,

575
00:26:40,830 --> 00:26:43,500
slik som sannsynligvis betyr at det er
ingen ramme rundt ting.

576
00:26:43,500 --> 00:26:45,450
Tillate full skjerm sannsynligvis
betyr at brukeren

577
00:26:45,450 --> 00:26:47,840
kan klikke på en knapp og
faktisk fullskjerm videoen.

578
00:26:47,840 --> 00:26:52,870
Så hvis jeg virkelig ønsker å være
imponerende her i Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
heller enn å bruke bildekode, la
meg slette det, i stedet lime dette.

580
00:26:58,490 --> 00:27:00,810
Og nå lesse.

581
00:27:00,810 --> 00:27:02,500
Og nå er vi i gang igjen.

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

583
00:27:04,979 --> 00:27:06,020
Greit, det er nok.

584
00:27:06,020 --> 00:27:08,970
All right, så jeg vil prøve
vanskelig ikke å gjøre det igjen.

585
00:27:08,970 --> 00:27:11,400
Så hva er noen av gatekjøkken her?

586
00:27:11,400 --> 00:27:15,130
Så HTML, så stygg som disse websider
er, er faktisk ganske enkelt.

587
00:27:15,130 --> 00:27:16,467
Det er ikke et programmeringsspråk.

588
00:27:16,467 --> 00:27:17,550
Det har ikke funksjoner.

589
00:27:17,550 --> 00:27:18,410
Det har ikke sløyfer.

590
00:27:18,410 --> 00:27:19,535
Det har ikke forhold.

591
00:27:19,535 --> 00:27:22,900
Alt den har er dusinvis av
forskjellige koder, som hver

592
00:27:22,900 --> 00:27:24,620
har null eller flere attributter.

593
00:27:24,620 --> 00:27:27,320
Og faktisk, det er morsomt om
HTML når du begynner å dykke inn

594
00:27:27,320 --> 00:27:29,560
er at det er veldig selvlærevillig.

595
00:27:29,560 --> 00:27:32,880
>> Alt som trengs er en forståelse
av den generelle rammen av HTML.

596
00:27:32,880 --> 00:27:36,510
Hva er en tag, hva er et attributt,
hvordan du faktisk konfigurere en nettside

597
00:27:36,510 --> 00:27:37,250
som følger.

598
00:27:37,250 --> 00:27:40,720
Og alt annet er egentlig resultatet
av å se opp i et online henvisning

599
00:27:40,720 --> 00:27:43,080
eller googling hvordan å gjøre noen
teknikk eller som vi har sett,

600
00:27:43,080 --> 00:27:45,371
ser på Facebook kilde
kode, ser på en nettside

601
00:27:45,371 --> 00:27:48,710
som du liker ved det er kildekoden og
forstå hvordan utviklerne der

602
00:27:48,710 --> 00:27:50,550
faktisk lagt ut ting.

603
00:27:50,550 --> 00:27:52,180
>> Så vi kan gjøre bildene også.

604
00:27:52,180 --> 00:27:53,994
Og faktisk, vi gjorde det en stund siden.

605
00:27:53,994 --> 00:27:55,410
La meg gå videre og bare vise deg.

606
00:27:55,410 --> 00:27:56,770
Her er noen eksempelkode.

607
00:27:56,770 --> 00:27:58,380
Hvis du noensinne vil se gretten katt.

608
00:27:58,380 --> 00:28:00,620
Så merker at jeg kan
har et bilde tag her.

609
00:28:00,620 --> 00:28:02,090
Og jeg har fått en kommentar ovenfor det.

610
00:28:02,090 --> 00:28:04,490
Jeg har fått et alternativ
tekst for tilgjengelighet.

611
00:28:04,490 --> 00:28:07,250
Så noen som er ved hjelp av en skjerm
leseren på grunn av synet

612
00:28:07,250 --> 00:28:10,172
faktisk kan da ha sin
skjermleser sier gretten katt.

613
00:28:10,172 --> 00:28:11,880
Fordi hvis de ikke kan
se bildet, de

614
00:28:11,880 --> 00:28:14,504
kan i det minste ha sin datamaskin
fortelle dem verbalt hva det er.

615
00:28:14,504 --> 00:28:18,020
Og kilden til denne filen er cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Så faktisk, hvis jeg virkelig ønsket å
få flink, hva jeg kunne ha done--

617
00:28:22,472 --> 00:28:25,680
Jeg lover å ikke gå til Rick Astley, så
Jeg kommer til å google for en katt i stedet.

618
00:28:25,680 --> 00:28:28,290
Og hvis jeg går til Google Images
her, og vi vil anta

619
00:28:28,290 --> 00:28:30,040
at dette er et bilde av katten min.

620
00:28:30,040 --> 00:28:35,070
>> Anta at jeg har kontroll klikket
eller høyre klikket på dette, ved et uhell

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

622
00:28:35,630 --> 00:28:40,320
Og cat.jpeg jeg kommer
å spare på skrivebordet mitt.

623
00:28:40,320 --> 00:28:44,700
La meg nå gå tilbake til cloud 9.

624
00:28:44,700 --> 00:28:48,150
Legg merke til at her, jeg kan
går å laste opp lokale filer.

625
00:28:48,150 --> 00:28:51,530
Og hvis jeg gripe denne
fil, cat.jpeg, varsel

626
00:28:51,530 --> 00:28:54,674
at jeg kan dra den og
slippe den inn cloud 9

627
00:28:54,674 --> 00:28:56,090
og det kommer til å kjefte på meg her.

628
00:28:56,090 --> 00:28:59,000
>> Fordi vi allerede har
gitt deg en cat.jpeg fil,

629
00:28:59,000 --> 00:29:01,430
men det er super enkelt å
ta et bilde som du har

630
00:29:01,430 --> 00:29:03,220
tatt fra Facebook
eller Flickr eller lignende

631
00:29:03,220 --> 00:29:05,678
og faktisk dra og slippe det
inn cloud 9 og deretter gjøre det

632
00:29:05,678 --> 00:29:07,970
en del av din egen personlige
nettside eller problem

633
00:29:07,970 --> 00:29:10,442
satt syv eller åtte som vi vil snart se.

634
00:29:10,442 --> 00:29:12,150
Og så når du
endelig gå som katten,

635
00:29:12,150 --> 00:29:16,610
forutsatt at jeg lastet ned den samme katten,
varsel at-- som var søt.

636
00:29:16,610 --> 00:29:19,160
>> Hva du vil se er
noe sånt som dette ansiktet her.

637
00:29:19,160 --> 00:29:21,810
Så de filene du
referanse innen en nettside

638
00:29:21,810 --> 00:29:26,050
kan enten være lokale i din egen
konto eller fjern på en annen server

639
00:29:26,050 --> 00:29:29,670
som i tilfelle av Rick
Astley bildet litt siden.

640
00:29:29,670 --> 00:29:32,990
Så hvor else-- hva
annet kan vi gjøre her?

641
00:29:32,990 --> 00:29:34,890
Så la oss ta en titt på følgende.

642
00:29:34,890 --> 00:29:36,160
Du vet hva som er litt kult?

643
00:29:36,160 --> 00:29:39,330
>> Vi har så langt vært å gjøre
veldig statiske nettsider.

644
00:29:39,330 --> 00:29:41,830
Jeg ønsker å krydre ting opp som følger.

645
00:29:41,830 --> 00:29:44,344
Jeg ønsker å lage min egen søkemotor.

646
00:29:44,344 --> 00:29:47,010
Så for å gjøre en søkemotor, la oss
gå videre og begynne å gjøre dette.

647
00:29:47,010 --> 00:29:52,570
Jeg kommer til å gå videre og skape
en ny fil som heter search.html.

648
00:29:52,570 --> 00:29:54,890
Og vi har prefabed versjoner online.

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

650
00:29:56,027 --> 00:29:57,610
Ikke lim inn i terminalvinduet.

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

652
00:29:58,744 --> 00:30:00,160
Og jeg kommer til å starte som følger.

653
00:30:00,160 --> 00:30:04,490
Så her er begynnelsen på
en fil som heter search.html.

654
00:30:04,490 --> 00:30:07,510
Jeg kommer til å lagre den i
dagens kilde katalogen.

655
00:30:07,510 --> 00:30:09,079
Jeg kommer til å kalle dette Search.

656
00:30:09,079 --> 00:30:10,370
Egentlig vil vi gjøre det bedre.

657
00:30:10,370 --> 00:30:13,600
CS50 Søk og faktisk helt det.

658
00:30:13,600 --> 00:30:17,500
Og nå, jeg kommer til å si
noe som H1 CS50 Search.

659
00:30:17,500 --> 00:30:20,930
Og deretter ned her, H2 kommer snart.

660
00:30:20,930 --> 00:30:23,230
Og bare for å oppsummere, H1 og
H2 betyr henholdsvis hva?

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

662
00:30:26,750 --> 00:30:30,320
>> Ja, så stor og fet, og
ikke så stor, men fortsatt fet.

663
00:30:30,320 --> 00:30:37,375
Så hvis jeg lagrer dette og gå over her,
la oss se filen search.html.

664
00:30:37,375 --> 00:30:42,560
Greit, og dette
er right-- [uhørbart].

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

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

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

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

669
00:30:52,610 --> 00:30:54,080
Åh, det er akkurat der.

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

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

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

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

674
00:30:58,350 --> 00:31:00,370
Så nå, la oss syntetisere
hva vi gjorde i forrige uke.

675
00:31:00,370 --> 00:31:03,400
>> Hvor vi snakket om
lavere nivå mekanikerne av HTTP.

676
00:31:03,400 --> 00:31:05,780
Og disse nye ideer
av HTML, som er like

677
00:31:05,780 --> 00:31:08,890
Dette kodespråk der du
forteller en leser nøyaktig hva du skal gjøre

678
00:31:08,890 --> 00:31:10,740
og gjennomføre vår egen søkemotor.

679
00:31:10,740 --> 00:31:12,520
Så i stedet for bare
sier kommer snart, er jeg

680
00:31:12,520 --> 00:31:14,810
kommer til å introdusere
noe som kalles en form tag.

681
00:31:14,810 --> 00:31:19,610
Og i dette skjemaet, kommer jeg til å
har noe sånt som en inngang felt.

682
00:31:19,610 --> 00:31:22,450
>> Og navnet på denne inngangen
felt, kommer jeg til å kalle det Q.

683
00:31:22,450 --> 00:31:26,240
Og hvilken type dette inndatafeltet
Jeg kommer til å si er bare "tekst".

684
00:31:26,240 --> 00:31:29,130
Og et tekstfelt, som vi vil
se, er bare en tekstboks.

685
00:31:29,130 --> 00:31:32,830
Og slik er det ikke ane her for å ha
noe på innsiden av det på dette punktet.

686
00:31:32,830 --> 00:31:35,320
Og så jeg bare kommer
å lukke kode med den

687
00:31:35,320 --> 00:31:38,099
skråstrek midt i koden selv.

688
00:31:38,099 --> 00:31:39,890
Og så kommer jeg til å
har en annen inngang.

689
00:31:39,890 --> 00:31:43,480
Input type tilsvarer send.

690
00:31:43,480 --> 00:31:45,320
Og så kommer jeg til å
lukke dette også.

691
00:31:45,320 --> 00:31:46,840
>> Og nå kommer jeg til å dra tilbake hit.

692
00:31:46,840 --> 00:31:49,520
Og allerede ser vi,
riktignok ganske stygg, har jeg

693
00:31:49,520 --> 00:31:52,460
fikk begynnelsen av
min egen søkeside her.

694
00:31:52,460 --> 00:31:55,150
Faktisk, la meg prøve å
rydde opp litt.

695
00:31:55,150 --> 00:31:57,330
Det viser seg at på
innspill her, kan jeg ha

696
00:31:57,330 --> 00:31:59,910
en annen egenskap som kalles plassholder.

697
00:31:59,910 --> 00:32:05,165
Og jeg kan se noe som søkeord,
eller mer spesifikt, spørring for q.

698
00:32:05,165 --> 00:32:07,820
>> Og legg merke til, nå har jeg
denne typen grått tekst

699
00:32:07,820 --> 00:32:10,440
som forsvinner som
snart jeg begynner å skrive,

700
00:32:10,440 --> 00:32:12,930
men det er nok noe
du har sett i andre nettsider.

701
00:32:12,930 --> 00:32:14,650
Jeg vet egentlig ikke liker Send-knappen.

702
00:32:14,650 --> 00:32:18,320
Så jeg faktisk kommer til å gi
Send-knappen en verdi på søk.

703
00:32:18,320 --> 00:32:21,680
Og nå, hvis jeg laste, legge merke til at
min knapp blir oppkalt søk.

704
00:32:21,680 --> 00:32:24,140
Du vet, jeg gjør egentlig ikke
som logo her.

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

706
00:32:27,140 --> 00:32:28,820
>> Jeg ønsker å krydre dette opp videre.

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

708
00:32:30,660 --> 00:32:31,870
La meg lage min egen logo.

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

710
00:32:33,080 --> 00:32:36,945
Så nå la meg lagre denne as-- kommer på.

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

712
00:32:40,710 --> 00:32:43,120
Hvor er det hen?

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

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

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

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

717
00:32:47,740 --> 00:32:49,470
Dumme nettlesere.

718
00:32:49,470 --> 00:32:51,700
Stand by, skal vi
fikse dette en gang for alle.

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

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

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

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

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

724
00:33:00,750 --> 00:33:02,310
Nå er dette funky.

725
00:33:02,310 --> 00:33:03,160
Avslutt full skjerm.

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

727
00:33:04,150 --> 00:33:06,870
>> Nå, som en normal
person, lagre bildet som.

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

729
00:33:08,810 --> 00:33:13,194
Nå kommer jeg til å gå inn CS50IDE og
Jeg skal rett og slett ta tak i logoen,

730
00:33:13,194 --> 00:33:15,360
Jeg kommer til å dra den inn
min kilde sju katalog,

731
00:33:15,360 --> 00:33:17,002
filen allerede eksisterer, jeg er OK med det.

732
00:33:17,002 --> 00:33:19,210
Så jeg kommer til å overstyre det
fordi jeg allerede hadde det.

733
00:33:19,210 --> 00:33:20,630
Og nå hvordan får jeg kvitt dette?

734
00:33:20,630 --> 00:33:24,670
>> La oss gå videre her og gjøre
image kilde lik logo.gif.

735
00:33:24,670 --> 00:33:25,490
Lukk dette.

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

737
00:33:26,050 --> 00:33:30,560
Og nå hvis jeg går tilbake til mitt søk
side, nå det ser ganske bra.

738
00:33:30,560 --> 00:33:33,610
Greit, så det har ikke
ganske gjort noe nyttig.

739
00:33:33,610 --> 00:33:37,000
Faktisk, la meg prøve å søke
for en katt og se hva som skjer.

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

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

742
00:33:39,420 --> 00:33:41,400
Det betyr ikke bare fungerer, tilsynelatende.

743
00:33:41,400 --> 00:33:43,760
Så hva er nøkkelen brikke
som mangler her?

744
00:33:43,760 --> 00:33:49,100
>> Høyre, selv om du ikke kjenner noen HTML,
Jeg har begynt å merke opp telefonen skjema

745
00:33:49,100 --> 00:33:54,130
og jeg har fortalt det hvordan du får innganger,
gi meg en tekstboks og en send-knappen,

746
00:33:54,130 --> 00:33:55,730
hva stykket er tilsynelatende mangler?

747
00:33:55,730 --> 00:33:58,975
Anta at vi ønsker å faktisk få
denne tingen fungerer.

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

749
00:34:02,420 --> 00:34:05,360
Hva trenger vi å gjøre?

750
00:34:05,360 --> 00:34:08,860
Vi har et behov for å iverksette bakenden
database eller søkemotoren selv,

751
00:34:08,860 --> 00:34:11,210
og som kommer til å ta en
hel masse tid, ærlig.

752
00:34:11,210 --> 00:34:13,380
>> Så husk hva vi gjorde forrige gang.

753
00:34:13,380 --> 00:34:18,230
Så hvis du søker etter noe på Google
og du har på forhånd slått av,

754
00:34:18,230 --> 00:34:20,355
tilbakekalling, instant søk.

755
00:34:20,355 --> 00:34:22,230
Så la meg slå det av
slik at dette faktisk

756
00:34:22,230 --> 00:34:26,650
oppfører seg som en eldre skole nettleser,
hvis jeg nå søke etter noe som katter,

757
00:34:26,650 --> 00:34:28,190
huske hva nettadressen ser ut.

758
00:34:28,190 --> 00:34:29,449
Det er ganske kryptisk.

759
00:34:29,449 --> 00:34:33,000
Men innebygd i det,
husker, er skråstrek søk.

760
00:34:33,000 --> 00:34:35,100
Spørsmålstegn q lik katter.

761
00:34:35,100 --> 00:34:37,760
>> Og det synes å gi meg
en hel haug av søkeresultatene.

762
00:34:37,760 --> 00:34:39,134
Så du vet hva jeg skal gjøre?

763
00:34:39,134 --> 00:34:41,650
Jeg kommer til å låne
Google for bare et minutt.

764
00:34:41,650 --> 00:34:43,670
Jeg kommer til å gå over
her og jeg kommer til å si

765
00:34:43,670 --> 00:34:47,850
at dette danner handling eller
destinasjon, så å si,

766
00:34:47,850 --> 00:34:49,330
skal bokstavelig talt være Google.

767
00:34:49,330 --> 00:34:52,590
Og metoden jeg ønsket
til bruk kommer til å være få.

768
00:34:52,590 --> 00:34:53,560
>> Så hva er handling?

769
00:34:53,560 --> 00:34:55,760
Handling er nifs navngitt,
men det betyr bare

770
00:34:55,760 --> 00:34:58,120
som kommer til å håndtere
virkningen av dette skjemaet?

771
00:34:58,120 --> 00:35:00,820
Når jeg klikker Søk, der
bør resultatet reise?

772
00:35:00,820 --> 00:35:05,300
Og hvis jeg nå gå tilbake til formen min
her og oppdater min nettside

773
00:35:05,300 --> 00:35:09,000
og nå søker etter noe
som hund, merker nå

774
00:35:09,000 --> 00:35:10,850
Jeg har re implementert Google.

775
00:35:10,850 --> 00:35:11,350
Høyre?

776
00:35:11,350 --> 00:35:14,141
>> Hvis jeg ønsker å søke etter noe
annet, fungerer det for ikke bare hunder,

777
00:35:14,141 --> 00:35:16,400
det fungerer også for katter.

778
00:35:16,400 --> 00:35:21,930
Det fungerer også for CS50.

779
00:35:21,930 --> 00:35:24,310
Og OK, dette er bare
henhold overveldende, er det ikke?

780
00:35:24,310 --> 00:35:25,920
Greit, men det fungerer faktisk.

781
00:35:25,920 --> 00:35:27,360
Så hva er egentlig foregått?

782
00:35:27,360 --> 00:35:31,340
Så jeg har lært min nettleser, ved hjelp
HTML, for å ta input fra brukeren

783
00:35:31,340 --> 00:35:35,810
og faktisk sende den inngangen
til en ekstern server ved hjelp av HTTP.

784
00:35:35,810 --> 00:35:39,120
>> Og fordi nettleseren min
forstår HTTP, det faktisk

785
00:35:39,120 --> 00:35:43,500
konstruere URL, slik at det
Jeg ender opp med over i nettleseren min,

786
00:35:43,500 --> 00:35:45,660
Legg merke til hva som skjer
når jeg søkte på hunden.

787
00:35:45,660 --> 00:35:49,270
Hvis jeg klikker Søk, legge merke til at
URL endringer som jeg ment

788
00:35:49,270 --> 00:35:52,770
å google.com/search~~V spør lik hund.

789
00:35:52,770 --> 00:35:56,020
Og det er fordi formen
vet, fordi fremgangsmåten er å få,

790
00:35:56,020 --> 00:35:59,560
å bare legge det til at URL der.

791
00:35:59,560 --> 00:36:01,730
>> Nå, disse nettsidene er fortsatt stygg.

792
00:36:01,730 --> 00:36:04,890
Så la oss introdusere en annen
stykke syntaks hvis vi kan i dag.

793
00:36:04,890 --> 00:36:07,640
Og dette er noe kjent
så gjennomgripende stilark.

794
00:36:07,640 --> 00:36:10,720
Så la meg ta en titt på
dette eksempelet her og se

795
00:36:10,720 --> 00:36:12,380
hvis vi kan antyde hva som skjer.

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

797
00:36:14,520 --> 00:36:16,532
Og det er her ting
få litt stygge.

798
00:36:16,532 --> 00:36:18,490
Fordi dessverre,
i verden av Internett,

799
00:36:18,490 --> 00:36:20,920
HTML alene kan ikke gjøre alt.

800
00:36:20,920 --> 00:36:22,920
Og så hvis du ønsker å
stilisere din webside,

801
00:36:22,920 --> 00:36:28,370
du faktisk trenger å fokusere på
estetikk på en annen måte.

802
00:36:28,370 --> 00:36:33,090
Så her, jeg har kroppen til min web
side inne i som er en stor div.

803
00:36:33,090 --> 00:36:34,700
Og en div betyr bare divisjon.

804
00:36:34,700 --> 00:36:38,060
Så det er som et avsnitt, men det
har ikke de samme semantikk

805
00:36:38,060 --> 00:36:39,180
av et tekstavsnitt.

806
00:36:39,180 --> 00:36:40,940
>> Dette betyr like
nettleser, her kommer

807
00:36:40,940 --> 00:36:45,210
et stort rektangulært område av min web
side, jeg ønsker å håndtere det spesielt.

808
00:36:45,210 --> 00:36:47,420
Nå er linje 21 hvor det div starter.

809
00:36:47,420 --> 00:36:48,770
Og bare ta en gjetning.

810
00:36:48,770 --> 00:36:53,080
Hva er effekten av linjen 21 i
Resten av innholdet på siden?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Sentre det.

813
00:36:56,311 --> 00:36:56,810
Det er alt.

814
00:36:56,810 --> 00:36:58,830
Så vi har ikke sett en måte
faktisk sentre teksten.

815
00:36:58,830 --> 00:37:00,996
>> Faktisk min søkemotor,
i motsetning til selve Google,

816
00:37:00,996 --> 00:37:03,040
ble all rettferdiggjort over til venstre.

817
00:37:03,040 --> 00:37:07,430
Og så nå på linje 21, jeg sier hei
nettleser, opprette en avdeling av siden.

818
00:37:07,430 --> 00:37:09,450
Bare gi meg en stor, usynlig rektangel.

819
00:37:09,450 --> 00:37:11,490
Det er slik jeg ønsker å
tenke på websiden.

820
00:37:11,490 --> 00:37:13,870
Og så stilisere det som følger.

821
00:37:13,870 --> 00:37:16,900
Innsiden av disse sitater,
nå, er andrespråk

822
00:37:16,900 --> 00:37:19,969
som vi introduserte i dag
kalt Cascading Style Sheets.

823
00:37:19,969 --> 00:37:22,010
Heldigvis, for det er ikke
et programmeringsspråk,

824
00:37:22,010 --> 00:37:26,470
så det er veldig begrenset i sin syntaks, men
også svært begrenset i sin funksjonalitet

825
00:37:26,470 --> 00:37:30,670
mens HTML handler om
merking opp data fra en nettside

826
00:37:30,670 --> 00:37:32,130
og strukturen av en webside.

827
00:37:32,130 --> 00:37:35,320
CSS er generelt om
siste mil, estetikk,

828
00:37:35,320 --> 00:37:40,160
får den størrelse og farge, og den
plassering akkurat midt i en webside.

829
00:37:40,160 --> 00:37:43,000
Og ja, det er dannet
med sentrale verdiparene.

830
00:37:43,000 --> 00:37:46,290
>> En eiendom som dette, tekst
justere, etterfulgt av et kolon,

831
00:37:46,290 --> 00:37:49,720
etterfulgt av verdien av denne
egenskap, som i dette tilfellet er målet.

832
00:37:49,720 --> 00:37:51,910
Og nå legger merke til deg
kan neste disse tingene.

833
00:37:51,910 --> 00:37:56,780
Hvis jeg ønsket alt i at
Jeg har fremhevet å være sentrert,

834
00:37:56,780 --> 00:38:00,270
det er derfor jeg har linje 21 og
tilsvarende linje 31.

835
00:38:00,270 --> 00:38:04,820
Men sett nå ønsker å si John
Harvard, velkommen til hjemmesiden min.

836
00:38:04,820 --> 00:38:06,530
>> Copyright symbol John Harvard.

837
00:38:06,530 --> 00:38:09,180
Og da mener jeg ønsker den første av
disse linjene til å være ganske stor.

838
00:38:09,180 --> 00:38:10,450
36 piksler.

839
00:38:10,450 --> 00:38:11,530
Så det er en anstendig størrelse.

840
00:38:11,530 --> 00:38:13,240
Og jeg ønsket vekten å være dristig.

841
00:38:13,240 --> 00:38:15,450
Men så under det,
Jeg ønsker mindre tekst.

842
00:38:15,450 --> 00:38:19,980
Og under det, jeg vil ha
enda mindre tekst.

843
00:38:19,980 --> 00:38:20,480
Unnskyld.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
I dag føles som en av dag.

846
00:38:26,940 --> 00:38:29,840
>> Så nå, hva gjør jeg for å uttrykke dette?

847
00:38:29,840 --> 00:38:34,580
Her på linje 22 er en innebygd
div eller nestet div, hvis du vil.

848
00:38:34,580 --> 00:38:36,190
Det har også sin egen stil tag.

849
00:38:36,190 --> 00:38:38,160
Jeg spesifisere en skriftstørrelse på 36.

850
00:38:38,160 --> 00:38:40,460
Jeg angir en font vekten av fet.

851
00:38:40,460 --> 00:38:43,360
Her nede, jeg bare angi 24 piksler.

852
00:38:43,360 --> 00:38:45,960
Og til slutt, på linje 28, jeg spesifisere 12.

853
00:38:45,960 --> 00:38:49,070
Så akkurat som en rask tilregnelighet sjekk
og som en menneskelig leser dette,

854
00:38:49,070 --> 00:38:52,545
hvilke ord på skjermen er
faktisk kommer til å være fet?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Hvilke linjer er faktisk fet?

857
00:38:58,760 --> 00:38:59,570
>> Bare John Harvard.

858
00:38:59,570 --> 00:39:00,070
Høyre?

859
00:39:00,070 --> 00:39:05,940
Fordi like linje 22 sier hei
browser, her er en divisjon av siden.

860
00:39:05,940 --> 00:39:07,920
Gjør det skriftstørrelse 36 punkt.

861
00:39:07,920 --> 00:39:09,460
Gjøre skriften vekt fet.

862
00:39:09,460 --> 00:39:11,920
Så snart du kommer til
tilsvarende end tag

863
00:39:11,920 --> 00:39:15,340
eller lukket tag on line 24
det betyr, hei nettleser,

864
00:39:15,340 --> 00:39:17,640
slutte å gjøre hva det er du gjør.

865
00:39:17,640 --> 00:39:21,020
Og legg merke til å være klar, selv om
linje 22 har alle disse attributtene

866
00:39:21,020 --> 00:39:24,430
aktig stil, når du
lukke tag på linje 24,

867
00:39:24,430 --> 00:39:25,940
du bare nevner tag navn.

868
00:39:25,940 --> 00:39:29,990
>> Du trenger ikke gjenta ordet stil eller
alt som er inni disse sitatene.

869
00:39:29,990 --> 00:39:32,860
Og så hvis jeg ser på dette nå
i nettleseren min, la oss ta

870
00:39:32,860 --> 00:39:38,060
en ser på sluttresultatet. La meg gå
fremover til denne filen, som er CSS 0.

871
00:39:38,060 --> 00:39:41,814
Og det er fortsatt ganske vanlig,
men får ganske interessant.

872
00:39:41,814 --> 00:39:43,980
Men det viser seg at det er
andre ting jeg kan gjøre her,

873
00:39:43,980 --> 00:39:46,490
og at risikoen for å gjøre
dette helt skrekkelig,

874
00:39:46,490 --> 00:39:48,630
merke til her at i min
Kroppen min webside,

875
00:39:48,630 --> 00:39:53,930
Jeg kan gjøre noe morsomt
som bg eller bakgrunnsfarge.

876
00:39:53,930 --> 00:39:56,670
>> Og rask, hva er din favoritt farge?

877
00:39:56,670 --> 00:39:57,720
Grønn jeg hørt.

878
00:39:57,720 --> 00:39:58,750
Greit.

879
00:39:58,750 --> 00:40:02,920
Så nå, hvis jeg treffer reload nå,
vi har en grønn nettside.

880
00:40:02,920 --> 00:40:04,710
Greit, så det er ikke ille.

881
00:40:04,710 --> 00:40:08,350
Og nå, hvis jeg ønsker å gjøre dette virkelig
kult, jeg kan gjøre fargen på min tekst

882
00:40:08,350 --> 00:40:09,360
selv rødt.

883
00:40:09,360 --> 00:40:10,870
Så la oss se hva dette ser ut.

884
00:40:10,870 --> 00:40:12,230
Nå det ser ganske bra.

885
00:40:12,230 --> 00:40:15,460
Og her nede, hvis du virkelig
ønsker å rote med noen

886
00:40:15,460 --> 00:40:17,487
eller hvis du ønsker å være
en av dem som

887
00:40:17,487 --> 00:40:20,570
prøver å lure deg til å besøke en nettside
side fordi de har lurt Google

888
00:40:20,570 --> 00:40:27,610
til å tro at det er en hel haug
av stikkord like-- la oss se, lesse.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Hvor ble den av?

891
00:40:30,680 --> 00:40:31,530
Og der det oss.

892
00:40:31,530 --> 00:40:32,030
Greit.

893
00:40:32,030 --> 00:40:34,905
Så jeg sier dette som en side, vil vi
snakke om slike ting i et par uker

894
00:40:34,905 --> 00:40:36,740
når vi snakker om
sikkerhet, hvis du faktisk

895
00:40:36,740 --> 00:40:38,852
embed hele bunter av
søkeord i en webside,

896
00:40:38,852 --> 00:40:41,810
selv om de ikke er synlige for en
menneske, en som Google, selvfølgelig,

897
00:40:41,810 --> 00:40:43,250
kan fortsatt faktisk finne dette.

898
00:40:43,250 --> 00:40:45,820
Greit, så det er ganske
heslig ganske raskt.

899
00:40:45,820 --> 00:40:48,420
>> Og faktisk, det er ikke alt
at mye i motsetning til min egen web

900
00:40:48,420 --> 00:40:51,480
side som en undervisning som
Jeg begynte googling rundt for å finne

901
00:40:51,480 --> 00:40:53,690
tidligere versjoner av mine gamle nettsteder.

902
00:40:53,690 --> 00:40:54,500
Det var ganske ille.

903
00:40:54,500 --> 00:40:56,650
Faktisk fant jeg
en like før klassen.

904
00:40:56,650 --> 00:40:58,620
Men det er verre der ute.

905
00:40:58,620 --> 00:41:01,534
Dette var tydeligvis min
hjemmesiden tilbake i 1996.

906
00:41:01,534 --> 00:41:04,200
Angivelig jeg trodde det var
hensiktsmessig å spørre folk deres navn

907
00:41:04,200 --> 00:41:05,991
før de kunne
faktisk se min nettside.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> Og da jeg viste dem
noe dumt, sannsynligvis.

910
00:41:11,920 --> 00:41:13,450
Jeg skal grave opp mer til neste gang.

911
00:41:13,450 --> 00:41:16,220
Men for nå, la oss
vurdere en bit av design.

912
00:41:16,220 --> 00:41:17,444
Vi har snakket om stil.

913
00:41:17,444 --> 00:41:19,735
Og denne siden så langt, og
nesten alt jeg har skrevet

914
00:41:19,735 --> 00:41:21,890
er ganske rent stilistisk.

915
00:41:21,890 --> 00:41:23,320
Men hva med design?

916
00:41:23,320 --> 00:41:25,990
Vel, det er mye redundans
i det jeg har gjort her.

917
00:41:25,990 --> 00:41:28,156
>> Jeg har nevnt ordet
farge i et par steder.

918
00:41:28,156 --> 00:41:31,630
Jeg har nevnt skriftstørrelse i et par
steder og fet i et par steder.

919
00:41:31,630 --> 00:41:34,870
Og fundamentalt, jeg er co
mingling to språk.

920
00:41:34,870 --> 00:41:38,100
Jeg har HTML med mine koder og mitt
attributter og deretter plutselig,

921
00:41:38,100 --> 00:41:40,100
mellom sitater, har jeg
det andre språket i dag

922
00:41:40,100 --> 00:41:43,830
kalles CSS, som igjen er bare disse
sentrale verdi par eller disse egenskapene

923
00:41:43,830 --> 00:41:45,280
atskilt med kolon.

924
00:41:45,280 --> 00:41:47,700
>> Det viser seg at mye
som i C hvor vi

925
00:41:47,700 --> 00:41:50,550
kan begynne å faktor ut
noen kode i header-filer,

926
00:41:50,550 --> 00:41:53,520
så kan vi gjøre det samme i HTML.

927
00:41:53,520 --> 00:41:56,030
Og et skritt mot som er som følger.

928
00:41:56,030 --> 00:42:02,230
Legg merke til at denne versjonen, er CSS1.html
Strukturelt nøyaktig samme nettside.

929
00:42:02,230 --> 00:42:05,250
Så jeg har fått en hel haug
av divs, men denne gangen har jeg

930
00:42:05,250 --> 00:42:07,220
blitt kvitt den wrapper
div som du ser.

931
00:42:07,220 --> 00:42:12,390
>> Og jeg har gitt de tre divs
toppen, midten og bunnen, unike ID-er.

932
00:42:12,390 --> 00:42:14,760
Dette er fint, fordi ved
gi disse avdelingene

933
00:42:14,760 --> 00:42:18,715
av side unike identifikatorer,
Jeg kan referere til dem andre steder.

934
00:42:18,715 --> 00:42:19,215
Hvor?

935
00:42:19,215 --> 00:42:21,070
Vel, la meg bla opp.

936
00:42:21,070 --> 00:42:24,070
Og så langt, hver gang vi har sett
på hodet av en web-side, hva er

937
00:42:24,070 --> 00:42:28,560
den eneste tag vi har hatt i
hodet av en web-side?

938
00:42:28,560 --> 00:42:29,740
En litt høyere.

939
00:42:29,740 --> 00:42:30,799
Bare tittelen så langt.

940
00:42:30,799 --> 00:42:32,590
Men det viser seg at det er
et par andre ting

941
00:42:32,590 --> 00:42:35,840
du kan sette inn der, en av
som det kalles en stil tag.

942
00:42:35,840 --> 00:42:37,850
Så et øyeblikk siden, har vi sett
på en stil attributt.

943
00:42:37,850 --> 00:42:39,150
Det viser seg at det er en stil tag.

944
00:42:39,150 --> 00:42:41,200
Den tilhører innsiden av
hodet av en web-side.

945
00:42:41,200 --> 00:42:42,840
Og nå merke til hva jeg gjør.

946
00:42:42,840 --> 00:42:46,540
Jeg har innsiden av denne
stil tag følgende.

947
00:42:46,540 --> 00:42:51,190
Jeg bokstavelig talt å nevne på linje 20 i
navnet på et merke som jeg ønsker å stilisere.

948
00:42:51,190 --> 00:42:53,489
>> Da har jeg åpen klammeparentes
og lukket krøllete brace.

949
00:42:53,489 --> 00:42:56,030
Så like i ånden til C, men
Igjen, dette er ikke en funksjon

950
00:42:56,030 --> 00:42:57,796
dette er bare en syntaktisk detalj her.

951
00:42:57,796 --> 00:43:00,170
Og så selvfølgelig, jeg forteller
leseren, hei nettleser,

952
00:43:00,170 --> 00:43:05,210
gjøre hele kroppen på siden
har en tekstjustering av sentrum.

953
00:43:05,210 --> 00:43:06,930
Og så dette er å si følgende.

954
00:43:06,930 --> 00:43:12,600
Hei nettleser, hvis du ser en HTML
element eller tag på siden som

955
00:43:12,600 --> 00:43:17,040
har en unik identifikator for toppen,
så hash symbol her betyr bare

956
00:43:17,040 --> 00:43:21,010
unik idé av toppen, gå videre
og gjøre sin skriftstørrelse 36

957
00:43:21,010 --> 00:43:22,490
og dens font vekt fet.

958
00:43:22,490 --> 00:43:26,840
>> Hei nettleser, et element som
ID er sentralt, gjør det 24 piksler.

959
00:43:26,840 --> 00:43:31,070
Og hei nettleser, hvis du ser en
Ideen om bunnen, gjør det 12 piksler.

960
00:43:31,070 --> 00:43:33,540
Effekten i ende
er akkurat det sam.

961
00:43:33,540 --> 00:43:36,500
Hvis jeg går inn i CSS 1, den
siden ser det samme.

962
00:43:36,500 --> 00:43:39,810
Men vi er et skritt mot
en litt bedre design.

963
00:43:39,810 --> 00:43:44,850
La meg nå gå tilbake hit for å CSS2
og se hva annet jeg har gjort.

964
00:43:44,850 --> 00:43:48,030
>> Nå siden er virkelig, virkelig ren.

965
00:43:48,030 --> 00:43:50,730
Faktisk kan jeg passe alle
innholdet på en side her.

966
00:43:50,730 --> 00:43:54,270
Men hva nye tag har jeg
introdusert, selvsagt?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
Og det er ikke det beste navnet på en tag,
fordi det ikke er et ledd i den forstand

969
00:43:57,853 --> 00:44:00,780
at vi vet det, men dette betyr
en kobling i en annen fil.

970
00:44:00,780 --> 00:44:02,890
Dette er typen som skarp inkludere i C.

971
00:44:02,890 --> 00:44:06,280
>> Dette er måten i HTML
å si hei nettleser,

972
00:44:06,280 --> 00:44:10,240
hente innholdet i
filen som heter css2.css.

973
00:44:10,240 --> 00:44:12,880
Forholdet, for meg,
er at det er et stilark.

974
00:44:12,880 --> 00:44:17,980
Og ja, det er hva en av de
S 'i Cascading Style Sheets midler.

975
00:44:17,980 --> 00:44:20,350
Dette er et stilark.

976
00:44:20,350 --> 00:44:23,120
Det er bare tekstfilen inneholder
en hel haug av eiendom.

977
00:44:23,120 --> 00:44:25,940
Det er en hel haug med stiler
som du vil bruke på en side.

978
00:44:25,940 --> 00:44:28,860
>> Og så dette tilsynelatende er
refererer til en andre fil.

979
00:44:28,860 --> 00:44:32,970
Og hvis jeg åpner det, CSS2.css,
Legg merke til at alt jeg har gjort

980
00:44:32,970 --> 00:44:35,900
er å kopiere og lime inn alle
av dette i denne filen.

981
00:44:35,900 --> 00:44:38,220
Og nå, selv om du aldri har
kodet slike ting før,

982
00:44:38,220 --> 00:44:40,700
bare vurdere med
velkjente ingeniør hat

983
00:44:40,700 --> 00:44:44,220
på, hvorfor er dette en
bedre design sannsynligvis?

984
00:44:44,220 --> 00:44:48,910
Facto ut disse CSS egenskaper,
sette dem inn i sin egen fil.

985
00:44:48,910 --> 00:44:51,330
Selv om vi løst dette
problem som fem minutter siden

986
00:44:51,330 --> 00:44:52,600
i den aller første versjonen.

987
00:44:52,600 --> 00:44:55,730
>> Vi har ikke forbedret
side stilistisk,

988
00:44:55,730 --> 00:44:57,520
dette er bare bedre
utforming i en viss forstand.

989
00:44:57,520 --> 00:44:58,990
Hvorfor tror du?

990
00:44:58,990 --> 00:45:01,510
Yeah.

991
00:45:01,510 --> 00:45:02,260
Mer fleksibel hvordan?

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å hvis du ønsker å gå
tilbake og endre ting,

995
00:45:07,373 --> 00:45:09,540
nå, har du ett sted
hvor du kan endre ting.

996
00:45:09,540 --> 00:45:11,622
Og faktisk, for noe
som problem satt syv,

997
00:45:11,622 --> 00:45:13,690
hvor vi vil gjennomføre en
aksjehandel nettside,

998
00:45:13,690 --> 00:45:15,523
som kommer til å ha en
hel haug med sider.

999
00:45:15,523 --> 00:45:17,620
Og det ville være veldig
irriterende hvis du bestemmer deg, hm,

1000
00:45:17,620 --> 00:45:21,630
Jeg vet egentlig ikke liker 24 piksler, jeg vil ha
det å være 28 piksler eller litt større.

1001
00:45:21,630 --> 00:45:23,550
Og så må gjøre en
global finne og erstatte

1002
00:45:23,550 --> 00:45:27,560
eller åpne alle nettstedets filer
bare for å faktisk endre en verdi.

1003
00:45:27,560 --> 00:45:31,290
Ved facto ut disse stilene
til ett sentralt sted,

1004
00:45:31,290 --> 00:45:34,720
Du kan nå åpne en tekstfil
i CS50IDE inn noe program,

1005
00:45:34,720 --> 00:45:36,479
endre det, lagre det, og gjort.

1006
00:45:36,479 --> 00:45:38,270
Du har spredd dem
endringer overalt.

1007
00:45:38,270 --> 00:45:42,450
Og det ville være det samme
i en prikk h filen også.

1008
00:45:42,450 --> 00:45:46,697
Så noen spørsmål dermed
langt på denne syntaksen?

1009
00:45:46,697 --> 00:45:48,530
Greit, så vi har
gjort alt det virker

1010
00:45:48,530 --> 00:45:51,170
bortsett faktisk gjennomføre hyperkoblinger.

1011
00:45:51,170 --> 00:45:52,740
Og så la oss gå videre og gjøre dette.

1012
00:45:52,740 --> 00:45:54,830
La meg gå videre og
opprette en ny fil her.

1013
00:45:54,830 --> 00:45:59,970
Jeg kommer til å kalle det
link.html, satt i dagens kode.

1014
00:45:59,970 --> 00:46:03,000
>> Og jeg kommer til å gjøre åpen
brakett doc typen html.

1015
00:46:03,000 --> 00:46:05,970
Som en side, denne tingen på
topp, dette doc typen erklæringen,

1016
00:46:05,970 --> 00:46:08,420
det er den eneste som er rart
med utropstegn.

1017
00:46:08,420 --> 00:46:12,100
Du må bare gjøre det der og det
betyr at vi ved hjelp av HTML-versjon 5.

1018
00:46:12,100 --> 00:46:14,460
Eldre versjoner av
språk hatt mye lenger

1019
00:46:14,460 --> 00:46:16,400
strenger som du trenger for å sette det.

1020
00:46:16,400 --> 00:46:18,620
Så her er et eksempel kalt link.

1021
00:46:18,620 --> 00:46:20,950
>> Jeg trenger en kropp av min nettside her.

1022
00:46:20,950 --> 00:46:29,770
Og her inne, a href equals
la oss si HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
og min favoritt nettside, vil vi si.

1024
00:46:35,420 --> 00:46:38,550
Greit, så en veldig
ufarlige, brukervennlig side.

1025
00:46:38,550 --> 00:46:42,950
Hvis jeg nå går inn i min katalog
notering her og åpne opp link.html,

1026
00:46:42,950 --> 00:46:44,780
vi har hyper tekst.

1027
00:46:44,780 --> 00:46:47,410
>> Og ja, dette er hvor
H i HTTP kommer fra.

1028
00:46:47,410 --> 00:46:51,580
Hypertext Transfer Protocol
er i ferd med å overføre tekst

1029
00:46:51,580 --> 00:46:53,840
som har hyperkoblinger til andre ressurser.

1030
00:46:53,840 --> 00:46:58,210
Og ja, her er det kjente,
hvis retro, blå lenke at hvis klikket,

1031
00:46:58,210 --> 00:47:02,607
faktisk vil føre meg til Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Nå, oh, som kommer ut snart.

1033
00:47:03,940 --> 00:47:08,970
Ok, så nå, hva er noen
av konsekvensene av dette?

1034
00:47:08,970 --> 00:47:11,610
>> Og ærlig talt, begynner verden
å bli litt mer kjent

1035
00:47:11,610 --> 00:47:15,090
og også litt skumlere
men også litt mer

1036
00:47:15,090 --> 00:47:17,840
selv forsvarlig når du begynner
å forstå disse tingene.

1037
00:47:17,840 --> 00:47:21,610
Fordi oddsen er, noen av dere, hvis du går
gjennom Gmail spam-mappen eller

1038
00:47:21,610 --> 00:47:23,990
innboksen din, har du sannsynligvis
fått noen form for e-post

1039
00:47:23,990 --> 00:47:26,980
som ber deg om å endre
passord kanskje eller kanskje verifisere

1040
00:47:26,980 --> 00:47:28,910
PayPal legitimasjon eller whatnot.

1041
00:47:28,910 --> 00:47:34,510
>> Og faktisk, kanskje du har mottatt
noe som sier at klikk her

1042
00:47:34,510 --> 00:47:42,260
å tilbakestille din PayPal-passordet.

1043
00:47:42,260 --> 00:47:44,130
Og nå, merke, hvis
Dette er ikke Disney.com

1044
00:47:44,130 --> 00:47:51,600
men som badplace.com og
laste, merk at teksten her

1045
00:47:51,600 --> 00:47:53,710
kunne si noe som helst.

1046
00:47:53,710 --> 00:47:55,260
Og faktisk, dette er bare ord.

1047
00:47:55,260 --> 00:48:04,610
Hvorfor ikke jeg faktisk være super skadelig
og si http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Klikk her for å tilbakestille PayPal
passord og nå lesse.

1049
00:48:14,090 --> 00:48:16,220
Dette ser ganske legitimt, ikke sant?

1050
00:48:16,220 --> 00:48:20,470
Jeg mener, jeg ville ikke klikk på
en e-post som bare sier dette.

1051
00:48:20,470 --> 00:48:22,450
Men legg merke til dikotomien her.

1052
00:48:22,450 --> 00:48:26,880
Det sier www.paypal.com,
og faktisk, vent litt,

1053
00:48:26,880 --> 00:48:29,210
vi vet at du ønsker
s for sikkerheten.

1054
00:48:29,210 --> 00:48:35,450
Så nå, gå til www.paypal.com HTTPS,
men hvis du aldri har gjort dette før,

1055
00:48:35,450 --> 00:48:38,182
får det til en vane
svever over små lenker her.

1056
00:48:38,182 --> 00:48:39,890
Og det er vanskelig å se
på skjermen der

1057
00:48:39,890 --> 00:48:41,340
og det er ikke alle som enklere her.

1058
00:48:41,340 --> 00:48:43,615
Men veien ned her i
den lille lille hjørne

1059
00:48:43,615 --> 00:48:45,740
gjør leseren faktisk
fortelle deg at vi kommer

1060
00:48:45,740 --> 00:48:48,850
til badplace.com istedenfor Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Nå, hvor skal vi med dette?

1062
00:48:51,620 --> 00:48:54,859
Alle eksemplene vi har gjort i dag,
vi har hardkodet og skrevet ut manuelt.

1063
00:48:54,859 --> 00:48:56,900
Nettet er utrolig
uinteressant når du hardt

1064
00:48:56,900 --> 00:48:59,844
kode websidene dine slik at innhold
er statisk og aldri forandrer seg.

1065
00:48:59,844 --> 00:49:01,760
Selvfølgelig, alle våre
favoritt nettsteder i dag,

1066
00:49:01,760 --> 00:49:04,470
enten det er Gmail eller Twitter eller
Facebook eller en rekke andre

1067
00:49:04,470 --> 00:49:05,290
er dynamiske.

1068
00:49:05,290 --> 00:49:07,340
De er i endring i
respons på brukerundersøkelser

1069
00:49:07,340 --> 00:49:08,840
akkurat som Googles søkeresultater.

1070
00:49:08,840 --> 00:49:12,415
>> Og så på onsdag, det vi gjør er
vi forlater HTML og CSS innføring

1071
00:49:12,415 --> 00:49:14,290
bak oss, og vi tar
for gitt at vi nå

1072
00:49:14,290 --> 00:49:16,640
vet det, og vi introduserer
et nytt programmeringsspråk

1073
00:49:16,640 --> 00:49:19,050
heter PHP, som liker
C, kommer til å gi oss

1074
00:49:19,050 --> 00:49:22,450
makt til å faktisk lage programmer
som selv genererer utgang.

1075
00:49:22,450 --> 00:49:25,900
I dette tilfellet vil vi bruke
PHP å generere dynamisk web

1076
00:49:25,900 --> 00:49:27,340
sider ved hjelp av dette nye språket.

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 deg da.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [MUSIC SPILLE]

1081
00:49:37,380 --> 00:52:38,864