1
00:00:00,000 --> 00:00:03,486
>> [Musiikkia]

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

3
00:00:10,460 --> 00:00:14,250
>> DAVID J MALAN: Tämä on CS50 ja
tämä on alku viikolla 7.

4
00:00:14,250 --> 00:00:15,060
Joten tervetuloa takaisin.

5
00:00:15,060 --> 00:00:17,540
Ja ehkä muistatte, että
ongelmatilanteissa asettanut neljä,

6
00:00:17,540 --> 00:00:21,510
oli hieman raadonsyöjä metsästää
joidenkin mahtavia palkintoja jolloin

7
00:00:21,510 --> 00:00:24,219
jälkeen voit palauttaa kuvia
henkilökunta sekä täällä että New Haven,

8
00:00:24,219 --> 00:00:27,468
olit haastoi löytää niin monta
ne tietotekniikan tutkijoita kuin voit.

9
00:00:27,468 --> 00:00:29,550
Ja meillä koko
nippu huomautuksia.

10
00:00:29,550 --> 00:00:31,930
Ajattelin jakaa muutaman
kanssanne täällä tänään.

11
00:00:31,930 --> 00:00:35,100
>> Ja me post kaikki näistä online.

12
00:00:35,100 --> 00:00:39,310
Mutta erityisesti, halusin
kiinnittää huomiota to-- hyvin yksi,

13
00:00:39,310 --> 00:00:42,670
Sam oli melkoisesti niistä
yleensä poseeraa kuin tämä.

14
00:00:42,670 --> 00:00:45,750
Mutta näyttää siltä, ​​että vuodesta
tänä aamuna, voittaja

15
00:00:45,750 --> 00:00:51,170
oli tietty joku nimeltä Ken kanssa
24 henkilöstön kaapattu kamera

16
00:00:51,170 --> 00:00:54,600
tai muutama enemmän, kun otetaan
tilin useita henkilöstön kuvia.

17
00:00:54,600 --> 00:00:58,300
Kuvassa Ken seuraava
Mary New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Nyt, Ken, vaikka, muuttuu
out on hieman kulma tapaus

19
00:01:01,300 --> 00:01:02,880
että ei ole vielä tapahtunut ennen.

20
00:01:02,880 --> 00:01:05,713
On käynyt ilmi, että se ei tapahtunut
minulle laittaa pikkupräntin ongelmatilanteissa

21
00:01:05,713 --> 00:01:09,710
asettanut neljä joka sanoo, että henkilöstö ovat
voida myöntää mahtavia palkintoja

22
00:01:09,710 --> 00:01:13,130
koska Ken on tietenkin yksi
valokuvaajat meidän henkilökunta.

23
00:01:13,130 --> 00:01:16,820
Nyt, että sanoi, hän
alunperin kirjoitti minulle sanoa

24
00:01:16,820 --> 00:01:19,180
älä lähetä näitä kuvia verkossa.

25
00:01:19,180 --> 00:01:21,630
Mielestäni suuri osa
koska useimmat kuvat

26
00:01:21,630 --> 00:01:24,499
että Valokuvaajan otti näyttää
vähän jotain tällaista.

27
00:01:24,499 --> 00:01:25,040
Ja vastaavat.

28
00:01:25,040 --> 00:01:28,990
>> Mutta Ken haluaisi minun vakuuttaa sinulle
että hän on erittäin hyvä valokuvaaja,

29
00:01:28,990 --> 00:01:33,190
hän on ammattilainen, hän ottaa
kuvia, jotka eivät ole epäselvä,

30
00:01:33,190 --> 00:01:37,270
jotka ovat paremmin keskittyä, ja hän
otti melkoisesti oman henkilökunnan.

31
00:01:37,270 --> 00:01:40,370
Mutta sen sijaan vain tunnustaa
Ken, mitä ajattelimme tehdä

32
00:01:40,370 --> 00:01:43,390
on käydä läpi luettelon
todellinen opiskelijat, jotka ovat jättäneet.

33
00:01:43,390 --> 00:01:48,640
Ja käy ilmi, että Lance kanssa
15 kuvia tästä aamusta

34
00:01:48,640 --> 00:01:50,030
oli meidän voittaja.

35
00:01:50,030 --> 00:01:55,730
>> Ja Kuvassa on Lance kanssa Colton,
kanssa Skaz, itseni kanssa, ja Samin kanssa.

36
00:01:55,730 --> 00:02:00,230
Mutta sitten käy ilmi, että vuodesta
11:46, joten vain vähän sitten,

37
00:02:00,230 --> 00:02:04,380
Menin takaisin minun email ja löytyi
että meillä oli vielä yksi jättämisestä

38
00:02:04,380 --> 00:02:08,300
jonka opiskelija nimeltä Bonnie
jonka sähköpostien sanoi vain tämä.

39
00:02:08,300 --> 00:02:10,800
Aio valehdella, olen
Näin tunnilla.

40
00:02:10,800 --> 00:02:17,620
Ja sitten vielä liittää vain
14 kuvaa, yksi ujo Lance n 15.

41
00:02:17,620 --> 00:02:22,690
>> Mutta Bonnie n valokuvia, se kääntyy
out oli useita henkilökunnan jäseniä, Sam

42
00:02:22,690 --> 00:02:25,960
heidän joukossaan, joten mitä luulimme
tekisi on tunnustaa molemmat.

43
00:02:25,960 --> 00:02:29,240
Joten lisäksi saada Dropbox
tilaa, että jokainen, joka osallistui

44
00:02:29,240 --> 00:02:33,900
vastaanottaa, nämä kaksi osaa tulee myös
saada mukava katettu lounas heille

45
00:02:33,900 --> 00:02:36,100
ja niiden jakso
Mates tulevalla viikolla.

46
00:02:36,100 --> 00:02:38,970
Ja niin kuulet meiltä,
Lance ja Bonnie, siitä.

47
00:02:38,970 --> 00:02:40,002
Niin iso onnittelut heille.

48
00:02:40,002 --> 00:02:42,210
Nyt ne teistä, jotka olisi
kuten lounas yleisemmin

49
00:02:42,210 --> 00:02:45,320
tietää, että CS50 lounas Cambridge
ja New Haven on perjantaina.

50
00:02:45,320 --> 00:02:48,510
Siirry CS50 verkkosivuilla slash RSVP.

51
00:02:48,510 --> 00:02:49,800
Ja nyt sana seminaareista.

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

53
00:02:50,730 --> 00:02:52,490
Joten olemme lähestymässä
kohta lukukauden

54
00:02:52,490 --> 00:02:55,200
jos sinun pitäisi aloittaa
ajatellut lopullinen hankkeita.

55
00:02:55,200 --> 00:02:59,309
Ja itse asiassa vain vähän, tulee
niin kutsuttua pre ehdotuksia johtua.

56
00:02:59,309 --> 00:03:01,850
Joten ennen ehdotusten tarkoitus
olla melko vähäinen vaikutus ja todella

57
00:03:01,850 --> 00:03:04,109
vain mahdollisuus
voit kirjoittaa lyhyen viestin

58
00:03:04,109 --> 00:03:06,900
opetukseesi mies voi tuntea
hänelle mitä olet ajatellut sinua

59
00:03:06,900 --> 00:03:09,140
kannattaa tehdä oman opinnäytetyön.

60
00:03:09,140 --> 00:03:11,730
>> Nyt monet opiskelijat päätyvät
tekee web-pohjainen opinnäytetöiden.

61
00:03:11,730 --> 00:03:13,800
Ja tietysti olemme vain
nyt viime viikolla tässä

62
00:03:13,800 --> 00:03:15,890
ja sen jälkeen sukeltamalla web ohjelmointi.

63
00:03:15,890 --> 00:03:18,200
Joten ei hätää, jos
ei ole aavistustakaan siitä, miten

64
00:03:18,200 --> 00:03:21,594
voisitte rakentaa ajatuksia
saatat olla mielessäsi.

65
00:03:21,594 --> 00:03:24,510
Tämä on oikeastaan ​​vain pakottaa toiminto
saada sinut ajattelua ja puhuminen

66
00:03:24,510 --> 00:03:25,650
kanssa TF siitä.

67
00:03:25,650 --> 00:03:28,810
Mutta auttaa sinua siinä, ja
lopullinen hankkeiden lopulta,

68
00:03:28,810 --> 00:03:31,750
tietävät, että CS50 on perinne
tarjota seminaareja.

69
00:03:31,750 --> 00:03:36,084
>> Ja nämä ovat valinnaisia, kädet,
tai luento perustuu mahdollisuuksiin

70
00:03:36,084 --> 00:03:39,000
oppia lisää aiheita, jotka ovat
vähän liitännäinen kurssin

71
00:03:39,000 --> 00:03:43,310
oppimäärän, mutta silti ihana
materiaali ajaa opinnäytetöiden.

72
00:03:43,310 --> 00:03:46,840
Ja niin tämä on luettelo, joka on
CS50 henkilökunta täällä New Haven

73
00:03:46,840 --> 00:03:48,600
ovat keksiä varten
tänä vuonna noin iOS

74
00:03:48,600 --> 00:03:50,730
ohjelmointi, Android
ohjelmointi, pelin kehitys,

75
00:03:50,730 --> 00:03:54,480
ja rypäleterttuja enemmän työkaluja
ja kieliä ja tekniikoita.

76
00:03:54,480 --> 00:03:56,780
>> Joten pitää silmällä CS50 verkkosivuilla.

77
00:03:56,780 --> 00:04:00,110
Ja sillä välin, jos haluat
rekisteröi kiinnostuksesi missä tahansa näistä,

78
00:04:00,110 --> 00:04:02,510
Siirry CS50 n slash rekisteriin.

79
00:04:02,510 --> 00:04:05,770
Ja me sitten seurata siitä,
päivää ja lentoajat ja paikat

80
00:04:05,770 --> 00:04:09,090
ja everything-- useimmat kaikki on
siirtää ja myös saatavilla pyynnöstä

81
00:04:09,090 --> 00:04:11,750
jälkeen, jos et voi todella tehdä sitä.

82
00:04:11,750 --> 00:04:15,800
Joten pitemmittä puheitta, me
jäi viime kerralla kanssa GET.

83
00:04:15,800 --> 00:04:19,610
>> Ja tämä oli kuin viesti, jonka oli
sisällä virtuaalisen kirjekuoren, muistaa,

84
00:04:19,610 --> 00:04:23,960
että teimme reitittimeltä reitittimen
reitittimen välillä selain ja Web-

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

86
00:04:24,487 --> 00:04:26,695
Ja että viesti katsoin
vähän jotain tällaista.

87
00:04:26,695 --> 00:04:29,700
Tämä oli enemmän mystistä viestin, että
oli itse sisällä kirjekuoren

88
00:04:29,700 --> 00:04:34,440
kirjoitettu paperille, jonka
ensimmäinen rivi sanoo kirjaimellisesti, saada slash.

89
00:04:34,440 --> 00:04:37,830
>> Ja aivan kuten järki tarkistaa,
mitä slash tarkoittavat?

90
00:04:37,830 --> 00:04:40,455
Mitä slash tarkoittaa, kun
pyytämällä sivuston?

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

92
00:04:43,070 --> 00:04:44,250
Voit pyytää sitä koko ajan.

93
00:04:44,250 --> 00:04:47,333
Useimmat tahansa käyt sivustossa, sinua
eivät itse kirjoita tiedoston nimi.

94
00:04:47,333 --> 00:04:50,960
Luultavasti vain mennä Facebook.com,
syöttää, gmail.com, tai vastaavat.

95
00:04:50,960 --> 00:04:52,260
Ja mitä slash edustaa?

96
00:04:52,260 --> 00:04:53,506
Mitä tiedosto?

97
00:04:53,506 --> 00:04:54,630
Tai mitä sivu, erityisesti?

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

99
00:04:59,642 --> 00:05:00,720
>> Indeksi, joo.

100
00:05:00,720 --> 00:05:01,810
Joten oletus sivu.

101
00:05:01,810 --> 00:05:04,810
Joten jos et määritä tiedosto
nimi alamme nähdä,

102
00:05:04,810 --> 00:05:07,750
olet todella vain pyynnön
anna minulle oletussivu Facebook

103
00:05:07,750 --> 00:05:10,800
tai antaa minulle minun postilaatikkoon tai antaa
minulle oletussivu uutiset

104
00:05:10,800 --> 00:05:12,510
CNN: n verkkosivuilla tai vastaavaa.

105
00:05:12,510 --> 00:05:15,220
Ja palvelin vastaa
että viesti jotain

106
00:05:15,220 --> 00:05:18,420
näin, sanoa kyllä, minä
puhua HTTP-versiota 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, joka on tila
koodi että me ihmiset harvoin

108
00:05:21,130 --> 00:05:22,790
koskaan nähdä, koska se on hyvä.

109
00:05:22,790 --> 00:05:26,640
Koska se tarkoittaa OK, pyyntö
vastaanotettiin ja käsiteltävä asianmukaisesti.

110
00:05:26,640 --> 00:05:28,960
Ja sisältötyyppi
ilmeisesti vastaus

111
00:05:28,960 --> 00:05:31,170
on usein, mutta ei aina, tekstiä.

112
00:05:31,170 --> 00:05:32,580
Ja erityisesti, HTML.

113
00:05:32,580 --> 00:05:34,760
Ja se on todella
jossa katsomme tänään.

114
00:05:34,760 --> 00:05:37,140
>> Joten itse asiassa, aion mennä
eteenpäin ja avata selaimen.

115
00:05:37,140 --> 00:05:40,410
Aion käyttää Chrome, voit käyttää
eniten tahansa selain tulevina viikkoina.

116
00:05:40,410 --> 00:05:42,410
Suosittelemme tavallisesti Chrome
koska se on erityisen

117
00:05:42,410 --> 00:05:43,750
hyvä ohjelmistokehittäjille.

118
00:05:43,750 --> 00:05:46,070
Se sai paljon rakennettu
työkaluja, jotka helpottavat

119
00:05:46,070 --> 00:05:49,800
kehittää paitsi HTML ja CSS,
asiat me alkaa puhua tänään,

120
00:05:49,800 --> 00:05:51,530
mutta myös muilla kielillä.

121
00:05:51,530 --> 00:05:55,530
>> Ja aion mennä eteenpäin ja mennä to--
Aion valvoa napsautuksella tai oikealle

122
00:05:55,530 --> 00:05:57,210
osoittamalla mitä tahansa web-sivulla.

123
00:05:57,210 --> 00:05:59,070
Ja aion mennä Tarkasta Element.

124
00:05:59,070 --> 00:06:03,850
Ja aion nipistää minun
näyttö vain vähän täällä.

125
00:06:03,850 --> 00:06:05,790
Siirryn tämä pohjaan.

126
00:06:05,790 --> 00:06:08,140
Joten tämä on mitä kutsutaan
Chromen tarkastaja.

127
00:06:08,140 --> 00:06:11,010
Joten tämä on kuin virheenkorjaus
työkalu rakennettu Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Kaikki sinulla on jo tämän
jos olet käyttänyt Chrome.

129
00:06:13,520 --> 00:06:17,169
Ja sen avulla voit nähdä, mitä tapahtuu
on alla huppu joidenkin web-sivun.

130
00:06:17,169 --> 00:06:19,210
Joten todella ottaa
katso tätä seuraavasti.

131
00:06:19,210 --> 00:06:21,251
Se on paljon enemmän ominaisuuksia
ja välitämme tänään.

132
00:06:21,251 --> 00:06:22,760
Mutta on näitä välilehdet täällä.

133
00:06:22,760 --> 00:06:25,890
Elementtejä, verkko, lähteet,
aikajana, ja joitakin muita juttuja.

134
00:06:25,890 --> 00:06:27,800
Aion klikkaa
Verkko hetkeksi.

135
00:06:27,800 --> 00:06:30,500
>> Ja se on vähän ylivoimainen
ensi silmäyksellä täällä.

136
00:06:30,500 --> 00:06:34,190
Mutta mitä aion tehdä, on antaa
minulle yksinkertaistaa sitä vähän.

137
00:06:34,190 --> 00:06:37,560
Aion päälle
tallennus valoa niin että se on punainen.

138
00:06:37,560 --> 00:06:39,140
Ja aion sanoa säilyttää loki.

139
00:06:39,140 --> 00:06:41,015
Ja tämä on vain hieman
mitä olen tajunnut

140
00:06:41,015 --> 00:06:44,120
ajan mittaan tulee säästää
kaikki mikä tapahtuu selaimessa.

141
00:06:44,120 --> 00:06:50,030
Ja nyt aion mennä
on http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Oikeastaan, tehdään www
hyvä toimenpide, kauttaviiva.

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

144
00:06:53,643 --> 00:06:56,180
Niin URL että monet
saatat käynyt.

145
00:06:56,180 --> 00:06:58,830
Ja nyt Facebookin web
sivu nousee yläreunassa.

146
00:06:58,830 --> 00:07:02,350
Ja sitten koko joukko
tavaraa lensi alareunassa.

147
00:07:02,350 --> 00:07:04,830
Ja itse asiassa, se kääntyy pois, että
kun käyt Facebook.com,

148
00:07:04,830 --> 00:07:09,320
et ole vain tehdä yksi HTTP-pyyntö,
käy ilmi, että menossa Facebook.com

149
00:07:09,320 --> 00:07:14,320
lähettää 41 näistä kirjekuoria,
jokaisella on oma GET-pyynnön,

150
00:07:14,320 --> 00:07:18,360
kuten, vaikka takana näytön
täällä, alareunassa näytön

151
00:07:18,360 --> 00:07:24,040
se osoittaa, että todellakin, minun
selain teki 41. pyyntöjä.

152
00:07:24,040 --> 00:07:29,689
>> Ja yhteensä, se siirretään 861
kilotavua ja kesti jostain syystä

153
00:07:29,689 --> 00:07:31,730
peräti kahdeksan sekuntia
ladata kaikki tämä.

154
00:07:31,730 --> 00:07:33,790
Niin, että on itse asiassa hieman outo
että Facebookin sivusto veisi että

155
00:07:33,790 --> 00:07:35,600
pitkä, mutta olkoon se tässä tapauksessa.

156
00:07:35,600 --> 00:07:39,520
Nyt kaikki tämä en todellakaan välitä
noin lukuun ottamatta ylimmän pyynnöstä.

157
00:07:39,520 --> 00:07:46,440
Joten mennään tämä täällä
ja haluan loitontaa vain hetken.

158
00:07:46,440 --> 00:07:47,754
>> Ja haluan lähentää tässä.

159
00:07:47,754 --> 00:07:50,670
Joten mitä olen tehnyt vasemmalla vaikka
siellä on paljon meneillään täällä

160
00:07:50,670 --> 00:07:53,360
on olen korostanut
Facebook.com ja sitten

161
00:07:53,360 --> 00:07:56,540
Huomaan, että olen vierittämällä,
vierittämällä, vierittämällä,

162
00:07:56,540 --> 00:07:58,330
pyytää otsikot.

163
00:07:58,330 --> 00:08:01,720
Ja huomaat, että Chrome näyttää
minulle olennaisesti sisemmän sisältö

164
00:08:01,720 --> 00:08:02,810
pyynnön tein.

165
00:08:02,810 --> 00:08:06,130
Se ei muoto aivan samalla
tavalla, mutta huomaa siellä mainintaa saada,

166
00:08:06,130 --> 00:08:09,481
huomaa siellä mainintaa isäntä,
Facebook.com, polku, tai slash,

167
00:08:09,481 --> 00:08:10,730
joka on tiedosto pyysin.

168
00:08:10,730 --> 00:08:12,930
>> Ja sitten jos selaa
varmuuskopioida, käymme oikeastaan

169
00:08:12,930 --> 00:08:17,270
nähdä, että mitä Facebook palasi
minulle on kaikki nämä otsikot.

170
00:08:17,270 --> 00:08:21,040
Niin sisällä että virtuaalinen kirjekuori
todellakin olemassa paljon keskeinen arvo-pareja.

171
00:08:21,040 --> 00:08:23,130
Sana, paksusuoli, ja sitten arvo.

172
00:08:23,130 --> 00:08:25,050
Sana, paksusuoli, ja arvo.

173
00:08:25,050 --> 00:08:26,160
Näitä kutsutaan otsikot.

174
00:08:26,160 --> 00:08:31,860
Ja siellä on paljon enemmän yksityiskohtia täällä kuin
me todella kiinnostaa juuri nyt.

175
00:08:31,860 --> 00:08:33,750
>> Mutta tämä on toinen
viimeisin siellä,

176
00:08:33,750 --> 00:08:38,809
huomata, että Facebook.com palvelin,
todellakin sanoi tässä tulee tekstiä HTML.

177
00:08:38,809 --> 00:08:41,409
Joten kaikki tämä on sanoa
että kun pyydät Web

178
00:08:41,409 --> 00:08:44,300
sivun selaimen
palvelin, että palvelin vastaa

179
00:08:44,300 --> 00:08:47,630
kirjekuori omien
jonka sisällä on tekstiä.

180
00:08:47,630 --> 00:08:49,020
Toisin sanoen, HTML-.

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

182
00:08:50,590 --> 00:08:53,200
Joka on toinen kieli
että esittelemme tänään

183
00:08:53,200 --> 00:08:57,740
että ihmiset tai tietokoneet tuottavat
täytäntöönpanemiseksi verkkosivuja.

184
00:08:57,740 --> 00:08:59,580
>> Erityisesti katsokaamme tähän.

185
00:08:59,580 --> 00:09:03,277
Aion nyt mennä takaisin
Facebookin verkkosivuilla.

186
00:09:03,277 --> 00:09:05,360
Ja aion vain
ohjaus napsautuksella tai oikealla painikkeella

187
00:09:05,360 --> 00:09:07,634
ja klikkaa Näytä sivun lähdekoodi.

188
00:09:07,634 --> 00:09:10,550
Ja vaikka et käytä Chrome,
IE voi tehdä tätä, Firefox voi tehdä tämän,

189
00:09:10,550 --> 00:09:14,060
Safari voi tehdä tämän, vaikka valikosta
vaihtoehdoista voisi näyttää hieman erilaiselta.

190
00:09:14,060 --> 00:09:18,990
Ja tämä on HTML että Mark ja
Yhtiö Facebookissa kirjoittanut.

191
00:09:18,990 --> 00:09:24,640
>> Ja kollektiivisesti, tällä kielellä täällä
toteuttaa sininen ja valkoinen sivu

192
00:09:24,640 --> 00:09:26,370
että näimme hetki sitten.

193
00:09:26,370 --> 00:09:28,030
Nyt, tämä on vähän ylivoimainen.

194
00:09:28,030 --> 00:09:31,400
Mutta jos katsomme ylös vasemmassa yläkulmassa, olemme
menossa alkaa nähdä joitakin malleja.

195
00:09:31,400 --> 00:09:34,140
Näyttää siltä, ​​että on paljon
Näiden avoin kulmasulje

196
00:09:34,140 --> 00:09:35,970
ja sitten on tämä avainsanan HTML.

197
00:09:35,970 --> 00:09:38,330
Tässä toinen avoin
kulmasulkeen ja pää.

198
00:09:38,330 --> 00:09:41,560
>> Tässä on, jos me selaa
ja alas ja alas, olen

199
00:09:41,560 --> 00:09:43,820
menossa mennä eteenpäin ja yrittää
etsiä jotain.

200
00:09:43,820 --> 00:09:48,510
Siellä tiensä yli oikealla
tässä alkusulkumerkki elin.

201
00:09:48,510 --> 00:09:50,800
Ja muistaa viime
aika ehdotimme

202
00:09:50,800 --> 00:09:53,364
että yksinkertaisin sivun
että ihmisen voi kirjoittaa

203
00:09:53,364 --> 00:09:55,030
saattaa näyttää hieman jotain tällaista.

204
00:09:55,030 --> 00:09:58,430
Avaavat HTML tag, avoin pää
tag, avoin otsikkokoodi,

205
00:09:58,430 --> 00:10:03,230
suljettiin sitten otsikko, suljettu pää, avoin
body, tekstiä, suljettu runko,

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

207
00:10:04,720 --> 00:10:06,290
>> Mutta tauko täällä vain hetken.

208
00:10:06,290 --> 00:10:09,030
Tämä koodi, vaikka olet
koskaan kirjoittanut ennen

209
00:10:09,030 --> 00:10:11,864
mutta silti eivät oikein ymmärrä
mitä tapahtuu, näyttää aika hyvältä.

210
00:10:11,864 --> 00:10:12,821
Oikea, se on erittäin puhdasta.

211
00:10:12,821 --> 00:10:14,120
Se on erittäin tyylillisesti mukava.

212
00:10:14,120 --> 00:10:16,190
Paljon sisennys ja valkoinen tila.

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

214
00:10:18,020 --> 00:10:23,190
Joten miksi on Facebook niin paljon
pahempi kuin minä kirjoittamaan HTML?

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

216
00:10:24,310 --> 00:10:26,899
>> Oikea, tämä on kuin yksi
viidestä tyyli.

217
00:10:26,899 --> 00:10:29,315
On pakottavaa syytä
ne leikata nämä kulmat.

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

219
00:10:31,069 --> 00:10:33,860
Selvä, joten he eivät halua
helpottaa voit lukea sen.

220
00:10:33,860 --> 00:10:36,940
Joten jossain mielessä, he
hämärtävät se, tavallaan muokkaamisella se

221
00:10:36,940 --> 00:10:40,260
ainakin esteettisesti niin
että se on vaikeampi Myspace

222
00:10:40,260 --> 00:10:42,705
mennä ja repiä pois niiden
kotisivu ja HTML se.

223
00:10:42,705 --> 00:10:45,080
On käynyt ilmi, että ohjelmia
kuitenkin, kuten Chrome,

224
00:10:45,080 --> 00:10:47,020
voimme puhdistaa tämän ylös Super helposti.

225
00:10:47,020 --> 00:10:49,420
Joten se ei ole aivan että syyksi.

226
00:10:49,420 --> 00:10:51,290
Mitä muuta voisi olla syy.

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

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

229
00:10:54,680 --> 00:10:55,890
Joo, valkoinen tila kustannukset tietoja.

230
00:10:55,890 --> 00:10:56,598
Mitä sinä tarkoitat?

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

232
00:11:02,250 --> 00:11:02,979
Joo, täsmälleen.

233
00:11:02,979 --> 00:11:06,020
Jos osut sarkainnäppäintä paljon tai
välilyöntiä, harkitse seurauksia.

234
00:11:06,020 --> 00:11:10,060
Joten jokainen näppäimistön on
[Kuulumaton] vastaa yksi tavu.

235
00:11:10,060 --> 00:11:14,560
>> Niin oletetaan, että Merkitse tai jollekin devs
näinä päivinä osuu välilyöntiä vain kerran

236
00:11:14,560 --> 00:11:17,899
Tässä HTML-sivu,
edustaa Facebookin kotisivu.

237
00:11:17,899 --> 00:11:19,690
Ja Facebook on paljon
käyttäjistä näinä päivinä.

238
00:11:19,690 --> 00:11:24,030
Niin oletetaan, että Facebookin kotisivu
on käynyt miljardia ihmistä tänään.

239
00:11:24,030 --> 00:11:27,020
Ja joku Facebook on
välilyöntiä vain kerran.

240
00:11:27,020 --> 00:11:29,890
>> Joten yksi ylimääräinen tavu,
miljardia pyyntöjä,

241
00:11:29,890 --> 00:11:32,790
kuinka paljon enemmän tietoa on Facebook
siirtämällä Internetissä

242
00:11:32,790 --> 00:11:37,160
koska joku osuma
välinäppäintä hänen näppäimistö?

243
00:11:37,160 --> 00:11:41,660
Miljardi tavua, tai yksi gigatavu
dataa lähetetään Facebook palvelimet

244
00:11:41,660 --> 00:11:43,626
ihmisille ympäri
maailma ilman hyvää syytä.

245
00:11:43,626 --> 00:11:44,750
Nyt, se on vain yksi tila.

246
00:11:44,750 --> 00:11:48,866
>> Kuvitelkaa, jos me todella puhdista
jutun ja sisennetty sitä ja lisätään

247
00:11:48,866 --> 00:11:50,990
paljon valkoista tilaa ja
sarkainmerkeillä ja tilat,

248
00:11:50,990 --> 00:11:53,656
voit päätyä menoja gigatavua,
jos ei Terra tavua enemmän tilaa.

249
00:11:53,656 --> 00:11:56,640
Ja niin Super yleisiä
todellisia web-kehitystä

250
00:11:56,640 --> 00:11:58,950
on minify koodi.

251
00:11:58,950 --> 00:12:01,280
Ja me lopulta nähdä
miten voit tehdä tämän.

252
00:12:01,280 --> 00:12:04,630
>> Mutta tänään aloitamme kirjoittaa koodia
se on todella luettavissa meille ihmisille.

253
00:12:04,630 --> 00:12:10,120
On käynyt ilmi, mutta jos menet takaisin
Tämän työkalun Chrome Tarkista Element,

254
00:12:10,120 --> 00:12:12,030
Aiemmin olimme Verkko-välilehteä.

255
00:12:12,030 --> 00:12:15,430
Osoittautuu, että jos menet
elementtejä välilehti, mitä itse nähdä

256
00:12:15,430 --> 00:12:19,230
on Chromen melko painettu
versio saman HTML.

257
00:12:19,230 --> 00:12:20,640
Joten olemme deobfuscated sen.

258
00:12:20,640 --> 00:12:22,472
Joten se ei ottelu tietokone.

259
00:12:22,472 --> 00:12:24,430
Ja nyt voit itse
klikkaa ympäri ja aloita

260
00:12:24,430 --> 00:12:27,630
nähdä hierarkia joka on web-sivu.

261
00:12:27,630 --> 00:12:28,780
Joten itse tehdä tämän.

262
00:12:28,780 --> 00:12:32,120
Aion mennä eteenpäin ja avata edelleen
Mac ohjelma nimeltä tekstin muokkauksen.

263
00:12:32,120 --> 00:12:35,490
Ja muistuttaa, että tämä on vain
Super yksinkertainen teksti-ohjelman.

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

265
00:12:37,490 --> 00:12:39,820
Ja aion Verbatim
kirjoittamalla seuraavan.

266
00:12:39,820 --> 00:12:44,650
Doc tyyppi HTML, alkusulkumerkki
HTML, suljettu kiinnike HTML,

267
00:12:44,650 --> 00:12:49,000
meillä on pää sivu täällä,
loppuun pään sivu täällä,

268
00:12:49,000 --> 00:12:52,310
otsikko on kuin, Hello World.

269
00:12:52,310 --> 00:12:56,660
>> Ja sitten täällä, me tarvitsemme
ruumiin sivun.

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

271
00:12:58,050 --> 00:13:00,700
Ja sitten täällä, Hei maailma.

272
00:13:00,700 --> 00:13:01,270
Selvä.

273
00:13:01,270 --> 00:13:03,350
Joten olemme kirjoittanut huippunopea sivun.

274
00:13:03,350 --> 00:13:06,675
Aion tallentaa sen
hello.html työpöydälle.

275
00:13:06,675 --> 00:13:09,050
Maciin on menossa valittaa,
ajattelu, että hetkinen,

276
00:13:09,050 --> 00:13:11,091
tämä on tekstitiedosto, do
haluat soittaa sitä .txt?

277
00:13:11,091 --> 00:13:13,300
Mutta ei, haluan käyttää piste HTML.

278
00:13:13,300 --> 00:13:16,140
>> Ja sitten mitä mukavaa, jos en
tupla klikkaa tätä tiedostoa,

279
00:13:16,140 --> 00:13:18,600
hello.html, tässä on minun verkkosivu.

280
00:13:18,600 --> 00:13:22,564
Valitettavasti olen
vain ihminen maailmassa

281
00:13:22,564 --> 00:13:23,980
jotka voivat vierailla tämän sivun juuri nyt.

282
00:13:23,980 --> 00:13:26,734
Koska jos se elää ilmeisesti?

283
00:13:26,734 --> 00:13:27,650
Se on minun Mac, eikö?

284
00:13:27,650 --> 00:13:28,470
Joka on hyödytön.

285
00:13:28,470 --> 00:13:30,390
Kuin kukaan tässä huoneessa
puhumattakaan Internetissä

286
00:13:30,390 --> 00:13:31,598
voi itse käydä sivulla.

287
00:13:31,598 --> 00:13:33,820
Joten tänään, meidän on
käyttöön toinen elementti.

288
00:13:33,820 --> 00:13:36,720
>> Ja tehdä tämän, aion
mennä eteenpäin ja avata pilvi 9.

289
00:13:36,720 --> 00:13:40,090
Joten pilvi 9 on tietenkin
pilvi pohjainen service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- Tämä on meidän kaikkien työtilojen
käynnissä jossain internetissä.

291
00:13:44,890 --> 00:13:48,330
Ja se tarkoittaa, että kaikki meidän tiedostot
ovat julkisesti saatavilla jo.

292
00:13:48,330 --> 00:13:49,830
Joten mene eteenpäin ja tehdä tämän.

293
00:13:49,830 --> 00:13:53,670
Aion mennä eteenpäin ja
Luo uusi tiedosto NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Aion tallentaa sen ennen
kuten hello.html ja valitse tallenna.

295
00:13:58,819 --> 00:14:01,860
Ja nyt vain säästää aikaa, aion
mennä eteenpäin ja kopioi liitä tämä koodi

296
00:14:01,860 --> 00:14:03,470
sijaan kirjoita se.

297
00:14:03,470 --> 00:14:04,550
Ja tallenna se.

298
00:14:04,550 --> 00:14:07,550
Ja nyt minulla on
tiedosto nimeltä hello.html.

299
00:14:07,550 --> 00:14:09,710
Mutta miten voin itse
avaa se Web-sivu?

300
00:14:09,710 --> 00:14:14,120
No, se osoittautuu rakennettu sisään CS50
IDE ei ole vain kääntäjä kuten kalahtaa

301
00:14:14,120 --> 00:14:16,670
ja debuggeri kuten GDB ja
rypäleterttuja muita ohjelmia,

302
00:14:16,670 --> 00:14:21,140
siellä oikeastaan ​​täysivaltaiseksi
web-palvelin käynnissä sisällä CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Kaikki te, toisin sanoen,
on oma web-palvelin.

304
00:14:23,900 --> 00:14:26,850
Ja web-palvelin on vain pala
ohjelmistojen joiden tarkoitus elämässä

305
00:14:26,850 --> 00:14:28,220
on palvella jopa web-sivuja.

306
00:14:28,220 --> 00:14:32,490
Kuuntelemaan pyyntöjä selaimet ja
vastata vähän virtuaalisen kirjekuoret

307
00:14:32,490 --> 00:14:35,290
jonka sisällä on
sisältöä että olen kirjoittanut.

308
00:14:35,290 --> 00:14:38,372
Joten tämä web-palvelin on
todella vapaa ja avoimen lähdekoodin.

309
00:14:38,372 --> 00:14:40,830
Jos avoimen lähdekoodin vain tarkoittaa
ohjelmisto, että joku muu on

310
00:14:40,830 --> 00:14:43,480
kirjoittanut, että kaikki voimme
itse nähdä ja ladata ja jopa

311
00:14:43,480 --> 00:14:44,780
muutoksia lähdekoodiin.

312
00:14:44,780 --> 00:14:46,150
Ja sitä kutsutaan Apache.

313
00:14:46,150 --> 00:14:51,450
>> Ja teimme sen hieman helpompi
käyttää CS50IDE kutsumalla sitä Apache 50.

314
00:14:51,450 --> 00:14:53,780
Niin että se voi todella
ymmärtämään seuraavat.

315
00:14:53,780 --> 00:14:56,560
Aion sanoa Apache 50 alusta.

316
00:14:56,560 --> 00:14:58,910
Ja sitten olen juuri menossa sanoa piste.

317
00:14:58,910 --> 00:15:01,080
Ja näemme hieman
mystistä sanomalla

318
00:15:01,080 --> 00:15:04,640
asettamalla Apachen asiakirja [? ryhmä?]
kotia, ubuntu, mitä se on,

319
00:15:04,640 --> 00:15:05,770
slash työtila.

320
00:15:05,770 --> 00:15:08,280
Alkaen web-palvelin
Apache 2 onnistuneesti.

321
00:15:08,280 --> 00:15:11,330
>> Niin pitkän tarinan lyhyesti, olen
juuri työnsi painiketta

322
00:15:11,330 --> 00:15:18,000
ja päällä web-palvelin, joka on nyt
kuuntelee Internetissä TCP-portti

323
00:15:18,000 --> 00:15:20,587
80 tiettyyn osoitteeseen.

324
00:15:20,587 --> 00:15:22,420
Ja tässä sanotaan, ja
tämä muuttuu Based

325
00:15:22,420 --> 00:15:26,550
on käyttäjätunnuksesi ja muut tekijät,
mutta huomaa nyt jos napsautan tämä,

326
00:15:26,550 --> 00:15:30,211
IDE50 piste jharvard ja niin ja
niin, huomaa että koko tämän ajan

327
00:15:30,211 --> 00:15:31,960
jo usean
viikkoa, saatat olla

328
00:15:31,960 --> 00:15:35,200
huomannut, että oma käyttäjätunnus
on upotettu sivun oikeassa

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

330
00:15:37,130 --> 00:15:41,050
>> Ja tosiasiallisesti on ollut koko tämän
ajoittaa osoite, johon voit

331
00:15:41,050 --> 00:15:43,574
käydä kaikki tiedostot verkon kautta.

332
00:15:43,574 --> 00:15:45,990
Tähän asti se ei ole väliä,
koska C, te yleensä

333
00:15:45,990 --> 00:15:48,073
haluavat asiat käynnissä
terminaali, ei verkossa.

334
00:15:48,073 --> 00:15:50,800
Mutta tänään, alamme
kirjallisesti web-pohjainen koodi

335
00:15:50,800 --> 00:15:53,350
että haluamme
esteetön pääsy julkinen URL.

336
00:15:53,350 --> 00:15:56,100
Joten mitä aion
vain klikata URL-osoitteen.

337
00:15:56,100 --> 00:16:00,880
>> Ja huomaa, että näen melko
ruma indeksi, luokkahakemisto,

338
00:16:00,880 --> 00:16:04,090
mutta mitä tiedosto hyppää ulos sinua luultavasti?

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

340
00:16:05,210 --> 00:16:07,870
Että koska olen tallentanut
tiedosto minun työtilaan.

341
00:16:07,870 --> 00:16:12,310
Ja mitä olen kertonut Apache www-palvelin
on katsoa Daavidin työtilassa hakemistoon.

342
00:16:12,310 --> 00:16:15,300
Ja anna kenenkään
maailman nähdä kyseiset tiedostot.

343
00:16:15,300 --> 00:16:19,050
>> Ja todellakin, jos minä nyt
klikkaa hello.html,

344
00:16:19,050 --> 00:16:22,180
Näen tässä välilehdessä juuri tiedoston.

345
00:16:22,180 --> 00:16:26,430
Nyt huomaa, pilvi 9 tekee
jotain vähän hyötyä meille.

346
00:16:26,430 --> 00:16:29,480
Sisällä CS50 IDE, huomaa siellä
yhtäkkiä osoiteriville.

347
00:16:29,480 --> 00:16:33,690
Tämä johtuu siitä, vaikka olemme
Chromen vierailla CS50IDE,

348
00:16:33,690 --> 00:16:37,940
sisällä CS50IDE on oma
versio web-selaimen juuri nyt.

349
00:16:37,940 --> 00:16:40,820
Ja niin sen sijaan
mutkistaa asioita sinänsä,

350
00:16:40,820 --> 00:16:42,955
Aion mennä eteenpäin
ja vain kopioida URL-osoitteen.

351
00:16:42,955 --> 00:16:45,330
Aion mennä eteenpäin ja vain
avata oman Chrome-ikkuna.

352
00:16:45,330 --> 00:16:47,800
Joten ei ole taikuutta täällä, ei CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Olen juuri menossa kirjaimellisesti liittää
minun J Harvardin URL ja paina Enter.

354
00:16:51,800 --> 00:16:54,750
Ja voila, nyt minä, ja
teoriassa, jokainen

355
00:16:54,750 --> 00:16:57,700
Internetissä, jos olen määrittänyt
käyttöoikeudet asianmukaisesti,

356
00:16:57,700 --> 00:16:58,720
voi käydä tätä tiedostoa.

357
00:16:58,720 --> 00:17:03,230
Ja nyt, jos sanoin
hello.html, voila, siellä

358
00:17:03,230 --> 00:17:06,366
on minun uskomattoman underwhelming sivun.

359
00:17:06,366 --> 00:17:07,740
Joten tehdä nopeasti järki tarkistaa.

360
00:17:07,740 --> 00:17:09,710
Koska kaikki, että
on käsitteellinen perustaa.

361
00:17:09,710 --> 00:17:13,180
Ja olemme oikeastaan ​​ole oikeastaan
opetti, miten kirjoittaa HTML sinänsä.

362
00:17:13,180 --> 00:17:16,084
Kysyttävää tähän mennessä
siitä, mitä juuri tapahtui?

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

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

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

366
00:17:24,290 --> 00:17:25,800
Onko CS50 omistamaan nämä verkkosivut?

367
00:17:25,800 --> 00:17:26,460
Missä mielessä?

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

369
00:17:28,947 --> 00:17:29,530
Hyvä kysymys.

370
00:17:29,530 --> 00:17:32,429
Joten CS50: n omistaa CS50.io.

371
00:17:32,429 --> 00:17:33,970
Olemme todellakin osti että verkkotunnus.

372
00:17:33,970 --> 00:17:37,240
Ja luonteen mukaan te
kirjautumalla CS50IDE,

373
00:17:37,240 --> 00:17:39,270
te kaikki saavat mitä kutsutaan aliverkkotunnus.

374
00:17:39,270 --> 00:17:46,840
>> Niin IDE50-Malan, tai IDE50-Rob.CS50.io,
se on teidän yksilöllinen osoite sisällä

375
00:17:46,840 --> 00:17:47,730
meidän verkkotunnus.

376
00:17:47,730 --> 00:17:50,850
Joten varten tietenkin
sinulla on oma ainutlaatuinen osoite.

377
00:17:50,850 --> 00:17:55,150
Mutta olemme yksinkertaistettu asioita
ostaa aluetunnus, CS50 piste

378
00:17:55,150 --> 00:17:58,050
I / O ja sitten kaikki muu on
sisällä että, niin sanoakseni.

379
00:17:58,050 --> 00:17:59,890
Ja me palaamme että
pari viikkoa luultavasti,

380
00:17:59,890 --> 00:18:01,930
erityisesti opinnäytetyön
aika, kun jotkut teistä

381
00:18:01,930 --> 00:18:03,596
ehkä saada oman verkkotunnuksia.

382
00:18:03,596 --> 00:18:06,270
Se on itse asiassa suhteellisen
suoraviivainen.

383
00:18:06,270 --> 00:18:06,770
Selvä.

384
00:18:06,770 --> 00:18:07,880
Joten nyt tehdä tätä.

385
00:18:07,880 --> 00:18:11,910
Aion mennä takaisin
CS50IDE, jossa minun tiedosto juuri nyt,

386
00:18:11,910 --> 00:18:14,710
hello.html, ei ole kovin kiinnostava.

387
00:18:14,710 --> 00:18:17,130
Haluaisin tehdä jotain
hieman mukavampaa kuin että.

388
00:18:17,130 --> 00:18:19,440
Joten aion tehdä jotain tällaista.

389
00:18:19,440 --> 00:18:21,510
Minäpä auki paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Joten tämä on tiedosto kirjoitin etukäteen.

391
00:18:23,560 --> 00:18:26,480
Ylimpänä se, kuten
aina, meillä on kommentteja.

392
00:18:26,480 --> 00:18:28,730
Mutta HTML, kommentteja
näyttää hieman erilaiselta.

393
00:18:28,730 --> 00:18:33,270
On line kolme ja linja 14, sinua
katso syntaksi alkavat kommentti

394
00:18:33,270 --> 00:18:34,020
ja päättyy kommenttia.

395
00:18:34,020 --> 00:18:36,820
>> Mutta mikään tavaraa
välillä asioissa toiminnallisesti.

396
00:18:36,820 --> 00:18:40,250
Se on vain merkinnän
ihmisen mitä täällä tapahtuu.

397
00:18:40,250 --> 00:18:43,040
Ja aivan kuten nopea järki
tarkista, jos minä selaa,

398
00:18:43,040 --> 00:18:46,820
mitä ilmeinen uusi
tag että olemme ottaneet käyttöön?

399
00:18:46,820 --> 00:18:52,130
Tunnisteet tähän mennessä olemme nähneet avoinna
kiinnike HTML, pää, otsikko, ja runko.

400
00:18:52,130 --> 00:18:54,400
Mutta mitä on tietysti uutta nyt?

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

402
00:18:55,200 --> 00:18:57,320
P tag tai kohta tag.

403
00:18:57,320 --> 00:19:01,182
Ja sitten minä vain lainannut oletus
Latinankielinen teksti muodostaa minun kappaleita.

404
00:19:01,182 --> 00:19:03,390
Koska mitä halusin
osoittavat, miten saatat

405
00:19:03,390 --> 00:19:05,859
edustavat tekstikappaletta HTML.

406
00:19:05,859 --> 00:19:08,400
Ja niin mitä alkaa tapahtua
tässä on se, että siellä on jo

407
00:19:08,400 --> 00:19:09,657
kuvio kehittää.

408
00:19:09,657 --> 00:19:10,990
Ja anna minun mennä eteenpäin ja tehdä tämän.

409
00:19:10,990 --> 00:19:12,760
Haluaisin ensin sammuttaa Apache.

410
00:19:12,760 --> 00:19:17,340
Ja aion kertoa sen käynnistää itsensä
jälleen sisällä nykypäivän lähde seitsemän

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

412
00:19:18,420 --> 00:19:20,100
Niin että minulla on pääsy kaikkeen.

413
00:19:20,100 --> 00:19:22,230
>> Ja nyt, jos menen takaisin
Tämän luokkahakemisto,

414
00:19:22,230 --> 00:19:24,846
huomaa näen joka tiedosto tänään.

415
00:19:24,846 --> 00:19:26,720
Ja näet vuonna
seuraava ongelma asettaa käymme

416
00:19:26,720 --> 00:19:28,594
antaa sinulle ohjeita
tekemiseen juuri tämän.

417
00:19:28,594 --> 00:19:35,210
Jos avaan paragraphs.html, tämä saattaa
samoin näyttää ohjelmointikieli

418
00:19:35,210 --> 00:19:36,970
sinulle, jos et puhu tai lukea latina.

419
00:19:36,970 --> 00:19:40,525
Mutta tämä on vain kolme kohtaa
tekstiä, joka on merkitty ylös HTML.

420
00:19:40,525 --> 00:19:43,100
>> Ja huomaa kohta
tauot niiden välillä.

421
00:19:43,100 --> 00:19:46,400
Koska se kääntyy pois,
ja vaikka

422
00:19:46,400 --> 00:19:49,210
ehkä taipuvaisia ​​tehdä tämän,
kun taas todellisessa maailmassa,

423
00:19:49,210 --> 00:19:51,370
jos haluat laittaa linja
taukoja asioiden välillä,

424
00:19:51,370 --> 00:19:55,680
saatat yksinkertaisesti
tehdä tämän ja lyödä Tallenna.

425
00:19:55,680 --> 00:19:59,460
Ja nyt, jos olen ladata täällä, ilmoitus
että kaikki vain sumentaa yhdessä

426
00:19:59,460 --> 00:20:01,100
vain yksi möykky tekstiä.

427
00:20:01,100 --> 00:20:03,570
Koska HTML on sellainen tyhmä kielen.

428
00:20:03,570 --> 00:20:07,230
>> Se on tarkoitettu käytettäväksi tällaisissa
siten, että selain vain

429
00:20:07,230 --> 00:20:09,920
do selkeästi mitä kerrot sen tehdä.

430
00:20:09,920 --> 00:20:12,890
Joten jos et kerro sitä
anna minulle uusi kohta,

431
00:20:12,890 --> 00:20:14,569
et tule näkemään uusi kohta.

432
00:20:14,569 --> 00:20:16,360
Ja itse asiassa, mitä
selain aikoo tehdä

433
00:20:16,360 --> 00:20:20,020
on vaikka enteriä,
sanokaamme uudelleen ja uudelleen

434
00:20:20,020 --> 00:20:23,190
ja uudelleen, siirtämällä tämä teksti tavoin
alas ruudulla ja tallentaa

435
00:20:23,190 --> 00:20:26,610
ja sitten uudelleen, selain on menossa
romahtaa kaikki tämä valkoinen tila

436
00:20:26,610 --> 00:20:29,021
osaksi vain yksi, näkyvä välilyönnillä.

437
00:20:29,021 --> 00:20:29,520
Selvä.

438
00:20:29,520 --> 00:20:30,869
Niin, että kohta tag.

439
00:20:30,869 --> 00:20:32,910
Ja niin mitä kuvio
joka on kehitysmaiden täällä?

440
00:20:32,910 --> 00:20:37,450
No, se näyttää olevan niin, että
HTML on kyse alkavat tag

441
00:20:37,450 --> 00:20:38,460
ja päättyy tag.

442
00:20:38,460 --> 00:20:39,300
Ja mikä on tagi?

443
00:20:39,300 --> 00:20:41,160
No, se on vain murikka syntaksin.

444
00:20:41,160 --> 00:20:44,400
Alkusulkumerkki, avainsana,
suljettu kiinnike, on tunniste.

445
00:20:44,400 --> 00:20:45,510
Tai aloita tag.

446
00:20:45,510 --> 00:20:48,590
Ja sitten kun olet
tehty ilmaista itseäsi,

447
00:20:48,590 --> 00:20:52,300
kuten olet tehnyt kohdan,
teet niin sanotusti vastakohta.

448
00:20:52,300 --> 00:20:55,480
Mutta päinvastainen ei ole aivan taaksepäin.

449
00:20:55,480 --> 00:21:00,630
>> Sinun tarvitsee vain etuliite sama tagin
nimi ja kauttaviivaa näin.

450
00:21:00,630 --> 00:21:01,130
Selvä.

451
00:21:01,130 --> 00:21:02,570
Joten kaikki niin jännittävää.

452
00:21:02,570 --> 00:21:05,270
Ja itse asiassa, emme tehdä
Web kaikki että mielenkiintoisempia.

453
00:21:05,270 --> 00:21:07,630
Mitä jos haluan tehdä
asiat isompi ja rohkea?

454
00:21:07,630 --> 00:21:11,780
Joten käy ilmi, että tässä on esimerkki
vuonna headings.html, missä ruumiini,

455
00:21:11,780 --> 00:21:17,280
Minulla H1 tag, H2, H3,
neljä, viisi tai kuusi, jotka kaikki

456
00:21:17,280 --> 00:21:18,310
näyttävät melko vaikeaselkoisia.

457
00:21:18,310 --> 00:21:21,010
Mutta jos menen avaa tämä
Oletetaan esimerkiksi, katsomaan.

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

459
00:21:22,490 --> 00:21:27,030
>> Joten selaimet oletuksena voi antaa sinulle tekstiä
se on iso ja rohkea erilaisia ​​kokoja.

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

461
00:21:28,070 --> 00:21:31,240
H6 on pienempi ja sitten
kaikki muu siltä väliltä.

462
00:21:31,240 --> 00:21:34,170
Niin, että on mielenkiintoista, mutta silti
ei oikeastaan ​​web tiedän.

463
00:21:34,170 --> 00:21:36,870
Mitä jos haluamme minulla on
jotain lista. .

464
00:21:36,870 --> 00:21:40,190
Joten tässä luettelomerkeillä
kolme Harvardin taloja.

465
00:21:40,190 --> 00:21:41,600
>> Miten te sitten teet tämän?

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

467
00:21:45,410 --> 00:21:47,870
Ja tässä näemme
hieman funkiness

468
00:21:47,870 --> 00:21:49,630
mutta Tarkastellaan mitä tapahtuu.

469
00:21:49,630 --> 00:21:56,182
Joten sen perusteella, mitä olet juuri nähnyt,
UL tarkoittaa Järjestämätön lista.

470
00:21:56,182 --> 00:21:57,640
Järjestämätön lista tarkoittaa vain luettelomerkeillä.

471
00:21:57,640 --> 00:21:58,431
Ei ole numeroita.

472
00:21:58,431 --> 00:22:01,850
Mukana on myös jotain kutsutaan
järjestetty lista, joka on OL klo tunniste.

473
00:22:01,850 --> 00:22:05,350
Sitten LI, luettelokohteen on kaikki se tarkoittaa.

474
00:22:05,350 --> 00:22:07,790
>> Ja niin se automaattisesti
numerot kaiken puolestasi.

475
00:22:07,790 --> 00:22:11,270
Mutta jälleen kerran, kaikki minun sisennys
ja valkoinen tila on vain minun tähteni.

476
00:22:11,270 --> 00:22:13,050
Selain ei ole
todella tulee hoitaa.

477
00:22:13,050 --> 00:22:16,670
Joten vaikka et voisi
tehdä tämän vain olla selkeä,

478
00:22:16,670 --> 00:22:19,880
sinun ei pitäisi vaikka
selain vielä

479
00:22:19,880 --> 00:22:22,130
voi ymmärtää sitä hienosti.

480
00:22:22,130 --> 00:22:24,590
Olen lyömällä reload minun
selain, olen napsauttamalla reload

481
00:22:24,590 --> 00:22:26,760
ja mitään muutosta tapahtuu
sillä selain vielä

482
00:22:26,760 --> 00:22:29,550
tekee mitä sanon sitä tekemään.

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

484
00:22:30,050 --> 00:22:31,340
Joten tämä kaikki on vain tekstiä.

485
00:22:31,340 --> 00:22:33,730
Nyt tehdään jotain mielenkiintoisempaa.

486
00:22:33,730 --> 00:22:36,660
Aion mennä eteenpäin ja
lainata tämän HTML.

487
00:22:36,660 --> 00:22:40,910
Aion mennä eteenpäin ja
Luo uusi tiedosto tästä.

488
00:22:40,910 --> 00:22:43,370
Ja me kutsumme tätä rick.html.

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

490
00:22:46,190 --> 00:22:48,916
Meillä on suhteettoman
käytetty jotain

491
00:22:48,916 --> 00:22:51,290
kutsutaan rick tela tässä
luokan tänä vuonna, en tiedä,

492
00:22:51,290 --> 00:22:53,880
se vain tapahtui orgaanisesti.

493
00:22:53,880 --> 00:22:55,397
>> Ja nyt se sai käsistä.

494
00:22:55,397 --> 00:22:56,730
Joten olen juuri menossa mennä sen kanssa.

495
00:22:56,730 --> 00:22:59,700
Ja jos menen Google
Kuvat ja Rick Astley.

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

497
00:23:02,450 --> 00:23:06,170
Jos et tiedä miksi me teemme
tämä, vain lukea siitä Wikipediasta.

498
00:23:06,170 --> 00:23:11,520
Joka kerta olet klikannut linkkiä,
Joku on nauraa jonnekin.

499
00:23:11,520 --> 00:23:14,860
Ja anna minun mennä ahead-- sinne
menemme, katsotaanpa nähdäksesi kuva.

500
00:23:14,860 --> 00:23:16,750
>> Joten tässä meillä
kuvan Google Images.

501
00:23:16,750 --> 00:23:19,390
Ja Oletetaan, että tämä on
kohtuudella kaikkialla Internetissä.

502
00:23:19,390 --> 00:23:22,570
Joten aion olettaa se on OK minulle
todella toteuttaa tämä minun verkkosivu.

503
00:23:22,570 --> 00:23:24,820
Aion mennä eteenpäin
ja kopioi kuvan URL-osoite.

504
00:23:24,820 --> 00:23:28,600
Ja nyt jos menen takaisin Cloud
9, katsotaanpa mitä voin tehdä täällä.

505
00:23:28,600 --> 00:23:30,630
Joten tässä on vain web-sivun.

506
00:23:30,630 --> 00:23:39,020
Tämä on Rick Astley, haha,
Aion nyt mennä takaisin

507
00:23:39,020 --> 00:23:43,510
minun selain, lataa, ja mielenkiintoinen.

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

509
00:23:44,530 --> 00:23:46,050
Joten haluan nähdä mitä on tapahtunut.

510
00:23:46,050 --> 00:23:49,114
Oikeastaan, aion
teeskennellä kuten en tee sitä.

511
00:23:49,114 --> 00:23:50,280
[Äänetön] pani hänet tänne.

512
00:23:50,280 --> 00:23:52,520
Palaamme tähän hetken kuluttua.

513
00:23:52,520 --> 00:23:54,200
Joten tässä rick.html.

514
00:23:54,200 --> 00:23:56,070
Joten se ei ole Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Joten se kääntyy pois voimme
itse lisätä hänet täällä.

516
00:23:59,680 --> 00:24:00,830
Tämä on Rick Astley.

517
00:24:00,830 --> 00:24:06,680
Aion sanoa antaa minulle kuvan, jonka
lähde on URL minä vain kopioida, joka

518
00:24:06,680 --> 00:24:09,110
ilmeisesti on onnellinen
syntymäpäivä jotain tai muuta.

519
00:24:09,110 --> 00:24:13,280
>> Ja nyt aion
Sulje tag näin.

520
00:24:13,280 --> 00:24:15,170
Joten tämä on kääre erittäin pitkä.

521
00:24:15,170 --> 00:24:17,740
Mutta huomaan, että kaikki olen
tehty on alkusulkumerkki kuva,

522
00:24:17,740 --> 00:24:20,270
lähde ominaisuus tämän.

523
00:24:20,270 --> 00:24:21,530
Ja se on todella pitkä URL.

524
00:24:21,530 --> 00:24:23,720
Ja aivan lopussa, huomaa.

525
00:24:23,720 --> 00:24:29,530
Miksi olen tehnyt slash kulma kiinnike
sijasta, kuten kaikki muutkin tag,

526
00:24:29,530 --> 00:24:33,590
ottaa alkusulkumerkki,
IMG, suljettu kiinnike?

527
00:24:33,590 --> 00:24:37,040
Vain yrittää arvata, vaikka
ei ole perehtyneisyys lainkaan

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

529
00:24:40,410 --> 00:24:42,710
>> Joten se on, miten se sulkeutuu
komento, mutta miksi

530
00:24:42,710 --> 00:24:45,850
se ei oikeastaan ​​tee intuitiivinen
järkeä tehdä jotain hieman

531
00:24:45,850 --> 00:24:48,820
teonsana kuin lähellä kuva?

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

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

534
00:24:52,000 --> 00:24:55,620
Vain semanttisesti, ei ole mitään tunnetta
alkaen kuvan ja päättyy kuva,

535
00:24:55,620 --> 00:24:56,870
se on joko siellä tai se ei ole.

536
00:24:56,870 --> 00:25:00,960
Joten se ei ole järkevää jättää aukon
mitään muuta sisällä kuvan.

537
00:25:00,960 --> 00:25:02,010
Et vain voi tehdä sitä.

538
00:25:02,010 --> 00:25:03,720
Ja niin syntaksin
olisi yleensä vain

539
00:25:03,720 --> 00:25:07,910
tehdä vinoviiva sisällä
avoimen tunnisteen tai alkutunniste

540
00:25:07,910 --> 00:25:09,020
ja sitten lyödä Tallenna.

541
00:25:09,020 --> 00:25:13,350
>> Jos siis nyt ladata tämä tiedosto, nyt
Minulla on hyvä web-sivun ruoanlaitto täällä.

542
00:25:13,350 --> 00:25:15,100
Ja voisimme varmasti
todella ärsyttää ihmisiä

543
00:25:15,100 --> 00:25:17,010
upottamalla sijaan
kuten YouTube linkki.

544
00:25:17,010 --> 00:25:19,350
Ja itse asiassa, tahansa
olet koskaan mennyt YouTubeen,

545
00:25:19,350 --> 00:25:22,190
ja haluan todella vahingossa
Rick Roll itseäni täällä.

546
00:25:22,190 --> 00:25:25,770
Joten Rick Roll.

547
00:25:25,770 --> 00:25:29,592
Joten Rick roll-- aion mennä täällä.

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

549
00:25:31,900 --> 00:25:33,730
>> OK, yksi henkilö pitänyt siitä.

550
00:25:33,730 --> 00:25:37,270
Joten huomaat koko tämän ajan, jos
Napsauta Jaa linkki, voit tietysti

551
00:25:37,270 --> 00:25:41,390
saada URL että voit itse
upottaa sähköpostia tai oikeuslääketieteen kuva

552
00:25:41,390 --> 00:25:43,730
tai ongelma asetettu tai dia.

553
00:25:43,730 --> 00:25:49,055
Ja nyt, jos olen sen sijaan klikkaa upottaa,
huomaa, että koko tämän ajan, tätä tavaraa

554
00:25:49,055 --> 00:25:49,680
on ollut siellä.

555
00:25:49,680 --> 00:25:50,910
Aion mennä eteenpäin ja kopioi tämä.

556
00:25:50,910 --> 00:25:54,000
>> Ja vain niin voimme nähdä sen paremmin, olen
menossa liitä se minun tekstieditori.

557
00:25:54,000 --> 00:25:55,860
Huomaa, että tämä mitä
YouTube on kertonut sinulle.

558
00:25:55,860 --> 00:25:57,693
Joka kerta kun vierailet
YouTube-video, jos

559
00:25:57,693 --> 00:26:00,410
haluat upottaa videon
web-sivun, yksinkertaisesti tarttua tähän.

560
00:26:00,410 --> 00:26:03,350
Joten tämä on vielä toinen
HTML-koodi kutsutaan iframe.

561
00:26:03,350 --> 00:26:04,590
Tai linjassa runko.

562
00:26:04,590 --> 00:26:08,680
Joten se liian näyttää hieman enemmän
monimutkainen kuin kaikki muut.

563
00:26:08,680 --> 00:26:11,950
Joten käy ilmi, että kuva
tag ja ilmeisesti IFRAME

564
00:26:11,950 --> 00:26:13,370
ottaa mitä kutsutaan määritteitä.

565
00:26:13,370 --> 00:26:15,710
>> Ja tämä on toinen
pala syntaksin HTML.

566
00:26:15,710 --> 00:26:19,240
Lisäksi tagin
nimi, alkusulkumerkki tunnisteen nimi,

567
00:26:19,240 --> 00:26:23,780
voit ohjata käyttäytymistä tunnisteen
ottaa koko joukko ominaisuus

568
00:26:23,780 --> 00:26:24,860
vastaa arvo.

569
00:26:24,860 --> 00:26:26,290
Taito vastaa arvo.

570
00:26:26,290 --> 00:26:28,100
Ja niin esimerkiksi,
YouTube sanoo meille

571
00:26:28,100 --> 00:26:31,990
jos haluat leveys tämän videon
olla 420 pikseliä ja korkeus

572
00:26:31,990 --> 00:26:35,470
olla 315 pikseliä, joka on
miten ilmaista se HTML.

573
00:26:35,470 --> 00:26:38,480
>> Lähde videon on menossa
olla, että pitkä YouTuben URL-osoite

574
00:26:38,480 --> 00:26:40,830
ja sitten joitakin muita juttuja
kuten runko raja on nolla,

575
00:26:40,830 --> 00:26:43,500
joten luultavasti tarkoittaa, että on
ei reunus asia.

576
00:26:43,500 --> 00:26:45,450
Salli koko näytön luultavasti
tarkoittaa, että käyttäjä

577
00:26:45,450 --> 00:26:47,840
voi napsauttaa painiketta ja
todella koko näytön videon.

578
00:26:47,840 --> 00:26:52,870
Joten jos en todellakaan halua olla
vaikuttava täällä Rick piste HTML,

579
00:26:52,870 --> 00:26:58,490
sijaan käyttää kuvaa tunnistetta, anna
minulle poistaa että sen sijaan, liitä tämä.

580
00:26:58,490 --> 00:27:00,810
Ja nyt uudelleen.

581
00:27:00,810 --> 00:27:02,500
Ja nyt taas mennään.

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

583
00:27:04,979 --> 00:27:06,020
Okei, se riittää.

584
00:27:06,020 --> 00:27:08,970
Hyvä niin yritän
vaikea ei tehdä sitä uudelleen.

585
00:27:08,970 --> 00:27:11,400
Mitkä ovat joitakin noutoruokapaikkoja täällä?

586
00:27:11,400 --> 00:27:15,130
Niin HTML, niin ruma kuin näiltä sivuilta
ovat, on oikeastaan ​​aika yksinkertainen.

587
00:27:15,130 --> 00:27:16,467
Se ei ole ohjelmointikieli.

588
00:27:16,467 --> 00:27:17,550
Se ei ole toimintoja.

589
00:27:17,550 --> 00:27:18,410
Se ei ole silmukoita.

590
00:27:18,410 --> 00:27:19,535
Se ei ole edellytyksiä.

591
00:27:19,535 --> 00:27:22,900
Kaikki se on on kymmeniä
tunnisteita, joista jokainen

592
00:27:22,900 --> 00:27:24,620
on nolla tai useampia ominaisuuksia.

593
00:27:24,620 --> 00:27:27,320
Ja itse asiassa, mitä hauskaa siitä
HTML kun alkaa sukeltaa

594
00:27:27,320 --> 00:27:29,560
on, että se on hyvin itsensä oppivainen.

595
00:27:29,560 --> 00:27:32,880
>> Kaikki se kestää on käsitys
yleisen kehyksen HTML.

596
00:27:32,880 --> 00:27:36,510
Mikä on tunniste, mikä on ominaisuus,
miten voit itse määrittää sivun

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

598
00:27:37,250 --> 00:27:40,720
Ja kaikki muu on todella tulos
etsimisessä online viittaus

599
00:27:40,720 --> 00:27:43,080
tai googling miten tehdä joitakin
tekniikkaa tai kuten olemme nähneet,

600
00:27:43,080 --> 00:27:45,371
katsomalla Facebookin lähde
koodi, katsot verkkosivuilla

601
00:27:45,371 --> 00:27:48,710
että pidät sitä lähdekoodista ja
ymmärtää, miten kehittäjät siellä

602
00:27:48,710 --> 00:27:50,550
todella säädetyn asioita.

603
00:27:50,550 --> 00:27:52,180
>> Joten voimme tehdä kuvia samoin.

604
00:27:52,180 --> 00:27:53,994
Ja itse asiassa me teimme sen hetki sitten.

605
00:27:53,994 --> 00:27:55,410
Anna minun mennä eteenpäin ja vain näyttää.

606
00:27:55,410 --> 00:27:56,770
Seuraavassa joitakin mallikoodia.

607
00:27:56,770 --> 00:27:58,380
Jos joskus haluat nähdä jörö kissa.

608
00:27:58,380 --> 00:28:00,620
Niin huomaa, että voin
on kuva tag täällä.

609
00:28:00,620 --> 00:28:02,090
Ja minulla kommentin yläpuolella.

610
00:28:02,090 --> 00:28:04,490
Minulla vaihtoehto
teksti esteettömyyden.

611
00:28:04,490 --> 00:28:07,250
Joten joku on käyttäen näytön
lukija syistä näön

612
00:28:07,250 --> 00:28:10,172
voi itse sitten heidän
näytönlukijaohjelma sanoa jörö kissa.

613
00:28:10,172 --> 00:28:11,880
Koska jos he eivät voi
katso kuva, ne

614
00:28:11,880 --> 00:28:14,504
voi ainakin olla heidän tietokone
kertoa heille suullisesti, mikä on.

615
00:28:14,504 --> 00:28:18,020
Ja lähde että tiedosto on cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Niin itse asiassa, jos halusin
saada fiksu, mitä voisin olla done--

617
00:28:22,472 --> 00:28:25,680
Lupaan ei mennä Rick Astley, joten
Aion google kissa sijaan.

618
00:28:25,680 --> 00:28:28,290
Ja jos menen Google Images
täällä, ja oletamme

619
00:28:28,290 --> 00:28:30,040
että tämä on kuva minun kissa.

620
00:28:30,040 --> 00:28:35,070
>> Oletetaan, että minulla on ohjaus napsautetaan
tai oikealle napsautti tämän, vahingossa

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

622
00:28:35,630 --> 00:28:40,320
Ja cat.jpeg aion
säästää työpöydälle.

623
00:28:40,320 --> 00:28:44,700
Haluaisin nyt palata pilvi 9.

624
00:28:44,700 --> 00:28:48,150
Huomaa, että täällä, voin
Siirry ladata paikallisia tiedostoja.

625
00:28:48,150 --> 00:28:51,530
Ja jos nappaan tämän
tiedosto, cat.jpeg, ilmoitus

626
00:28:51,530 --> 00:28:54,674
että voin vetää sen ja
pudota Cloud 9

627
00:28:54,674 --> 00:28:56,090
ja se tulee huutaa minua täällä.

628
00:28:56,090 --> 00:28:59,000
>> Koska olemme jo
antanut sinulle cat.jpeg tiedoston,

629
00:28:59,000 --> 00:29:01,430
mutta se on erittäin helppo
napata kuva että olet

630
00:29:01,430 --> 00:29:03,220
otettu Facebook
tai Flickr tms

631
00:29:03,220 --> 00:29:05,678
ja todella vetää ja pudottaa sen
osaksi pilvi 9 ja sitten tehdä se

632
00:29:05,678 --> 00:29:07,970
osa oman henkilökohtaisen
verkkosivuilla tai ongelma

633
00:29:07,970 --> 00:29:10,442
asettaa seitsemän tai kahdeksan kuten tulemme pian nähdä.

634
00:29:10,442 --> 00:29:12,150
Ja sitten kun
vihdoin käydä että kissa,

635
00:29:12,150 --> 00:29:16,610
olettaen olen ladannut että sama kissa,
ilmoitusta that-- että oli ihana.

636
00:29:16,610 --> 00:29:19,160
>> Mitä näkisitte on
jotain tällaista kasvot täällä.

637
00:29:19,160 --> 00:29:21,810
Joten tiedostot
viittaus web-sivulla

638
00:29:21,810 --> 00:29:26,050
voi olla joko paikallinen omassa
tili tai kauko muulla palvelimella

639
00:29:26,050 --> 00:29:29,670
kuten tapauksessa Rick
Astley kuva hieman sitten.

640
00:29:29,670 --> 00:29:32,990
Joten jos else-- mitä
muuta voimme tehdä täällä?

641
00:29:32,990 --> 00:29:34,890
Joten katsomaan seuraavaa.

642
00:29:34,890 --> 00:29:36,160
Tiedätkö mikä on eräänlainen jäähtyä?

643
00:29:36,160 --> 00:29:39,330
>> Olemme tähän mennessä tehneet
hyvin staattisia verkkosivuja.

644
00:29:39,330 --> 00:29:41,830
Haluan mausteeksi asioita seuraavasti.

645
00:29:41,830 --> 00:29:44,344
Haluan tehdä oman hakukoneen.

646
00:29:44,344 --> 00:29:47,010
Joten tehdä hakukoneen, katsotaanpa
mennä eteenpäin ja alkaa tehdä tätä.

647
00:29:47,010 --> 00:29:52,570
Aion mennä eteenpäin ja luoda
uusi tiedosto nimeltä search.html.

648
00:29:52,570 --> 00:29:54,890
Ja olemme prefabed versioita verkossa.

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

650
00:29:56,027 --> 00:29:57,610
Älä liitä pääteikkuna.

651
00:29:57,610 --> 00:29:58,744
Valmistalo versiot verkossa.

652
00:29:58,744 --> 00:30:00,160
Ja aion aloittaa seuraavasti.

653
00:30:00,160 --> 00:30:04,490
Joten tässä on alku
tiedosto nimeltä search.html.

654
00:30:04,490 --> 00:30:07,510
Aion tallentaa sen
päivän lähde hakemistoon.

655
00:30:07,510 --> 00:30:09,079
Aion kutsua tätä haku.

656
00:30:09,079 --> 00:30:10,370
Oikeastaan ​​me tehdä se paremmin.

657
00:30:10,370 --> 00:30:13,600
CS50 Etsi ja todella tuotemerkin sitä.

658
00:30:13,600 --> 00:30:17,500
Ja nyt, aion sanoa
jotain H1 CS50 Etsi.

659
00:30:17,500 --> 00:30:20,930
Ja sitten täällä, H2 tulossa pian.

660
00:30:20,930 --> 00:30:23,230
Ja vain kertaus, H1 ja
H2 tarkoittaa mitä vastaavasti?

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

662
00:30:26,750 --> 00:30:30,320
>> Joo, niin iso ja rohkea, ja
ole niin suuri, mutta silti rohkea.

663
00:30:30,320 --> 00:30:37,375
Jos siis tallentaa tämän ja mennä tänne,
katsotaanpa tiedosto search.html.

664
00:30:37,375 --> 00:30:42,560
Selvä, ja tämä
on right-- [äänetön].

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

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

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

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

669
00:30:52,610 --> 00:30:54,080
Voi, se on tuolla.

670
00:30:54,080 --> 00:30:54,860
Daavidin idiootti.

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

672
00:30:55,420 --> 00:30:56,660
Joten siellä se on.

673
00:30:56,660 --> 00:30:58,350
Joten CS50 haku tulossa pian.

674
00:30:58,350 --> 00:31:00,370
Joten nyt, nyt koota
mitä teimme viime viikolla.

675
00:31:00,370 --> 00:31:03,400
>> Jossa puhuimme
alemman tason mekaniikka HTTP.

676
00:31:03,400 --> 00:31:05,780
Ja nämä uudet ideat
HTML, joka on vain

677
00:31:05,780 --> 00:31:08,890
tämä markup language missä
kertoa selaimen tarkalleen, mitä tehdä

678
00:31:08,890 --> 00:31:10,740
ja toteuttaa oman hakukoneen.

679
00:31:10,740 --> 00:31:12,520
Joten sen sijaan vain
sanomalla tulossa, olen

680
00:31:12,520 --> 00:31:14,810
menossa esitellä
jotain kutsutaan muodossa tag.

681
00:31:14,810 --> 00:31:19,610
Ja tässä muodossa, aion
on jotain syöttökentässä.

682
00:31:19,610 --> 00:31:22,450
>> Ja nimi tämän tulon
kenttä, aion kutsua sitä Q.

683
00:31:22,450 --> 00:31:26,240
Ja tyyppi tämän syöttökentän
Aion sanoa vain "teksti".

684
00:31:26,240 --> 00:31:29,130
Ja tekstikenttään, kuten tulemme
katso, on vain tekstikenttään.

685
00:31:29,130 --> 00:31:32,830
Ja niin se ei tunnista täällä on
mitään sen sisällä tässä vaiheessa.

686
00:31:32,830 --> 00:31:35,320
Ja niin olen yksinkertaisesti menossa
Sulje tag, että

687
00:31:35,320 --> 00:31:38,099
kauttaviiva aivan tag itse.

688
00:31:38,099 --> 00:31:39,890
Ja sitten aion
on yksi muu tulo.

689
00:31:39,890 --> 00:31:43,480
Tulotyypin vastaa esittää.

690
00:31:43,480 --> 00:31:45,320
Ja sitten aion
Sulje tämäkin.

691
00:31:45,320 --> 00:31:46,840
>> Ja nyt aion mennä takaisin tänne.

692
00:31:46,840 --> 00:31:49,520
Ja jo näemme,
vaikkakin melko ruma, olen

693
00:31:49,520 --> 00:31:52,460
sai alkaa
oma haku sivu täällä.

694
00:31:52,460 --> 00:31:55,150
Itse asiassa, haluaisin yrittää
puhdista ylös hieman.

695
00:31:55,150 --> 00:31:57,330
On käynyt ilmi, että
tulo täällä, voin olla

696
00:31:57,330 --> 00:31:59,910
toinen ominaisuus nimeltään paikkamerkki.

697
00:31:59,910 --> 00:32:05,165
Ja voisin nähdä jotain avainsanoja,
tai tarkemmin, kyselyn q.

698
00:32:05,165 --> 00:32:07,820
>> Ja huomaa, nyt minulla on
tällainen harmaa teksti

699
00:32:07,820 --> 00:32:10,440
että katoaa
heti kun alat kirjoittaa,

700
00:32:10,440 --> 00:32:12,930
mutta se on luultavasti jotain
olet nähnyt muissa web-sivuja.

701
00:32:12,930 --> 00:32:14,650
En todellakaan pidä Lähetä-painiketta.

702
00:32:14,650 --> 00:32:18,320
Joten olen todella aio antaa
Lähetä-painiketta arvon haku.

703
00:32:18,320 --> 00:32:21,680
Ja nyt, jos olen ladata, huomaan, että
minun painike muuttuu nimeltään haku.

704
00:32:21,680 --> 00:32:24,140
Tiedätkö, en oikein
kuten logo täällä.

705
00:32:24,140 --> 00:32:27,140
Joten Google Font generaattori.

706
00:32:27,140 --> 00:32:28,820
>> Haluan piristää tätä entisestään.

707
00:32:28,820 --> 00:32:30,660
Niin CS50 haku.

708
00:32:30,660 --> 00:32:31,870
Saanen luoda oma logo.

709
00:32:31,870 --> 00:32:33,080
Se näyttää hienolta.

710
00:32:33,080 --> 00:32:36,945
Joten nyt haluan tallentaa tämän as-- tulla.

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

712
00:32:40,710 --> 00:32:43,120
Jos menee?

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

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

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

716
00:32:44,980 --> 00:32:47,740
Tallenna nimellä.

717
00:32:47,740 --> 00:32:49,470
Tyhmä selaimissa.

718
00:32:49,470 --> 00:32:51,700
Valmiustila, aiomme
korjata lopullisesti.

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

720
00:32:57,650 --> 00:32:58,590
Siellä mennään.

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

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

723
00:32:59,600 --> 00:33:00,750
Vapaapäivä.

724
00:33:00,750 --> 00:33:02,310
Nyt tämä on funky.

725
00:33:02,310 --> 00:33:03,160
Poistu koko näytön.

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

727
00:33:04,150 --> 00:33:06,870
>> Nyt, kuten normaali
henkilö, tallentaa kuvan.

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

729
00:33:08,810 --> 00:33:13,194
Nyt aion mennä CS50IDE ja
Aion yksinkertaisesti napata logo,

730
00:33:13,194 --> 00:33:15,360
Aion vedä se
minun lähde seitsemän hakemistoon,

731
00:33:15,360 --> 00:33:17,002
tiedosto on jo olemassa, olen OK kanssa.

732
00:33:17,002 --> 00:33:19,210
Joten aion ohittaa sen
koska olen jo ollut se.

733
00:33:19,210 --> 00:33:20,630
Ja nyt miten voin päästä eroon tästä?

734
00:33:20,630 --> 00:33:24,670
>> Mennään eteenpäin täällä ja tehdä
kuvalähde vastaa logo.gif.

735
00:33:24,670 --> 00:33:25,490
Sulje tämä.

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

737
00:33:26,050 --> 00:33:30,560
Ja nyt jos menen takaisin minun haku
sivu, nyt se näyttänyt aika hyvältä.

738
00:33:30,560 --> 00:33:33,610
Selvä, joten se ei ole
varsin tehnyt mitään hyödyllistä.

739
00:33:33,610 --> 00:33:37,000
Itse asiassa, haluaisin kokeile hakua
kissa ja katso mitä tapahtuu.

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

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

742
00:33:39,420 --> 00:33:41,400
Se ei vain toimi, ilmeisesti.

743
00:33:41,400 --> 00:33:43,760
Niin mitä avain pala
että puuttuu täällä?

744
00:33:43,760 --> 00:33:49,100
>> Oikea, vaikka et tiedä mitään HTML,
Olen alkanut merkintä ylös puhelin lomake

745
00:33:49,100 --> 00:33:54,130
ja olen kertonut sen, miten saada tuloa,
anna minulle tekstikenttään ja Lähetä-painiketta,

746
00:33:54,130 --> 00:33:55,730
mitä pala on ilmeisesti puuttuu?

747
00:33:55,730 --> 00:33:58,975
Oletetaan haluamme todella saada
tämä asia toimii oikein.

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

749
00:34:02,420 --> 00:34:05,360
Mitä meidän pitää tehdä?

750
00:34:05,360 --> 00:34:08,860
Meillä on tarve toteuttaa loppupäätä
tietokanta tai hakukoneen itse,

751
00:34:08,860 --> 00:34:11,210
ja että tulee viemään
paljon aikaa, rehellisesti.

752
00:34:11,210 --> 00:34:13,380
>> Joten muistaa, mitä teimme viime kerralla.

753
00:34:13,380 --> 00:34:18,230
Joten jos etsit jotain Googlessa
ja olet etukäteen estetty,

754
00:34:18,230 --> 00:34:20,355
Recall, instant haku.

755
00:34:20,355 --> 00:34:22,230
Haluan siis puolestaan, että pois
niin, että tämä todella

756
00:34:22,230 --> 00:34:26,650
käyttäytyy kuin vanhempi koulu selain,
jos en nyt etsiä jotain kissat,

757
00:34:26,650 --> 00:34:28,190
muistaa, mitä URL näyttää.

758
00:34:28,190 --> 00:34:29,449
Se on aika arvoituksellinen.

759
00:34:29,449 --> 00:34:33,000
Mutta upotettu siellä,
Recall, on kauttaviiva haku.

760
00:34:33,000 --> 00:34:35,100
Kysymysmerkki Q on yhtä kissaa.

761
00:34:35,100 --> 00:34:37,760
>> Ja että näyttäisi antaa minulle
koko joukko hakutuloksissa.

762
00:34:37,760 --> 00:34:39,134
Niin tiedät mitä aion tehdä?

763
00:34:39,134 --> 00:34:41,650
Aion lainata
Google vain minuutin.

764
00:34:41,650 --> 00:34:43,670
Aion mennä yli
täällä ja aion sanoa

765
00:34:43,670 --> 00:34:47,850
että tämä muodostaa toiminta tai
kohde, niin sanoakseni,

766
00:34:47,850 --> 00:34:49,330
olisi kirjaimellisesti olla Google.

767
00:34:49,330 --> 00:34:52,590
Ja menetelmä halusin
käyttötarkoituksen tulee olemaan saada.

768
00:34:52,590 --> 00:34:53,560
>> Joten mikä on toimia?

769
00:34:53,560 --> 00:34:55,760
Toiminta on outo nimi,
mutta se tarkoittaa vain

770
00:34:55,760 --> 00:34:58,120
kuka käsittelemään
toimia tämän lomakkeen?

771
00:34:58,120 --> 00:35:00,820
Kun klikkaa haku, jossa
olisi tulos mennä?

772
00:35:00,820 --> 00:35:05,300
Ja jos minä nyt mennä takaisin minun muodossa
täällä ja lataa Web-sivu

773
00:35:05,300 --> 00:35:09,000
ja nyt etsiä jotain
kuten koira, huomaa nyt

774
00:35:09,000 --> 00:35:10,850
Olen uudelleen toteutettu Google.

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

776
00:35:11,350 --> 00:35:14,141
>> Jos haluan etsiä jotain
muuten, se toimii ei vain koiria,

777
00:35:14,141 --> 00:35:16,400
se toimii myös kissoille.

778
00:35:16,400 --> 00:35:21,930
Se toimii myös CS50.

779
00:35:21,930 --> 00:35:24,310
Ja OK, tämä on vain
alle whelming, eikö olekin?

780
00:35:24,310 --> 00:35:25,920
Hyvä on, mutta se todella toimii.

781
00:35:25,920 --> 00:35:27,360
Joten mitä todella tapahtuu?

782
00:35:27,360 --> 00:35:31,340
Joten olen opettanut selaimen avulla
HTML, ottaa panosta käyttäjä

783
00:35:31,340 --> 00:35:35,810
ja itse lähettää että panos
etäpalvelimeen HTTP.

784
00:35:35,810 --> 00:35:39,120
>> Ja koska minun selain
ymmärtää HTTP, se todella

785
00:35:39,120 --> 00:35:43,500
rakentaa URL niin, että mitä
Päädyn yli minun selaimessa,

786
00:35:43,500 --> 00:35:45,660
huomaa, mitä tapahtuu
kun olen etsinyt koira.

787
00:35:45,660 --> 00:35:49,270
Jos minä klikkaa haku, huomaat että
URL muuttuu aioin

788
00:35:49,270 --> 00:35:52,770
että google.com/search kysely vastaa koira.

789
00:35:52,770 --> 00:35:56,020
Ja se johtuu muodossa
tietää, koska menetelmä on saada,

790
00:35:56,020 --> 00:35:59,560
yksinkertaisesti liittää sen, että URL siellä.

791
00:35:59,560 --> 00:36:01,730
>> Nyt nämä sivut ovat vielä ruma.

792
00:36:01,730 --> 00:36:04,890
Joten käyttöön yksi muu
pala syntaksin jos voimme tänään.

793
00:36:04,890 --> 00:36:07,640
Ja tämä on jotain tunnettu
kuten CSS-tyylisivuja.

794
00:36:07,640 --> 00:36:10,720
Saanen siis katsomaan
Tässä esimerkissä täällä ja nähdä

795
00:36:10,720 --> 00:36:12,380
jos voimme päätellä, mitä on tekeillä.

796
00:36:12,380 --> 00:36:14,520
Tämä on CSS0.html.

797
00:36:14,520 --> 00:36:16,532
Ja tämä on silloin, kun asiat
saada vähän ruma.

798
00:36:16,532 --> 00:36:18,490
Koska valitettavasti,
maailmassa rainan,

799
00:36:18,490 --> 00:36:20,920
HTML ei voi yksin tehdä kaikkea.

800
00:36:20,920 --> 00:36:22,920
Joten jos haluat
tyylitellä web-sivun,

801
00:36:22,920 --> 00:36:28,370
todella tarvitset keskittyä
estetiikka eri tavalla.

802
00:36:28,370 --> 00:36:33,090
Joten tässä, minulla on ruumiin minun web
sivu jonka sisällä on suuri div.

803
00:36:33,090 --> 00:36:34,700
Ja div vain tarkoittaa jako.

804
00:36:34,700 --> 00:36:38,060
Joten se on kuin kohta, mutta se
ei ole sama semantiikkaa

805
00:36:38,060 --> 00:36:39,180
of tekstikappale.

806
00:36:39,180 --> 00:36:40,940
>> Tämä vain tarkoittaa
selain, tässä tulee

807
00:36:40,940 --> 00:36:45,210
iso suorakulmainen alue minun web
sivu, haluan käsitellä sitä erityisesti.

808
00:36:45,210 --> 00:36:47,420
Nyt, linja 21 on silloin, että div alkaa.

809
00:36:47,420 --> 00:36:48,770
Ja ota arvaus.

810
00:36:48,770 --> 00:36:53,080
Mikä vaikutus linjan 21
Loput sivun sisältöä?

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

812
00:36:55,640 --> 00:36:56,311
Keskitys se.

813
00:36:56,311 --> 00:36:56,810
Siinä kaikki.

814
00:36:56,810 --> 00:36:58,830
Joten emme ole nähneet tapa
todella keskitys tekstiä.

815
00:36:58,830 --> 00:37:00,996
>> Itse asiassa, minun hakukone,
toisin kuin todellinen Google,

816
00:37:00,996 --> 00:37:03,040
kaikki oli perusteltua yli vasemmalle.

817
00:37:03,040 --> 00:37:07,430
Ja niin nyt linjassa 21, sanon, hei
selain, luoda jako sivun.

818
00:37:07,430 --> 00:37:09,450
Anna minulle iso, näkymätön suorakulmio.

819
00:37:09,450 --> 00:37:11,490
Niin haluan
ajatella sivun.

820
00:37:11,490 --> 00:37:13,870
Ja sitten tyylitellä sen seuraavasti.

821
00:37:13,870 --> 00:37:16,900
Sisältä lainausmerkit,
nyt on toinen kieli

822
00:37:16,900 --> 00:37:19,969
että otimme käyttöön tänään
nimeltään CSS.

823
00:37:19,969 --> 00:37:22,010
Onneksi, se myös ei ole
ohjelmointikieli,

824
00:37:22,010 --> 00:37:26,470
joten se on hyvin rajallinen sen syntaksi mutta
myös hyvin rajoitettu sen toimivuus

825
00:37:26,470 --> 00:37:30,670
katsoo HTML on kyse
merkintä ylös tiedot web-sivun

826
00:37:30,670 --> 00:37:32,130
ja rakenne Web-sivun.

827
00:37:32,130 --> 00:37:35,320
CSS on yleensä noin
viimeisen mailin, estetiikka,

828
00:37:35,320 --> 00:37:40,160
saada koko ja väri ja
sijoitus juuri oikea web-sivulle.

829
00:37:40,160 --> 00:37:43,000
Ja todellakin, se muodostuu
keskeisten arvoparit.

830
00:37:43,000 --> 00:37:46,290
>> Omaisuus näin, teksti
kohdista, seuraa kaksoispiste,

831
00:37:46,290 --> 00:37:49,720
jota seuraa arvo, joka
omaisuus, joka tässä tapauksessa on keskus.

832
00:37:49,720 --> 00:37:51,910
Ja nyt huomaa
voi pesä nämä asiat.

833
00:37:51,910 --> 00:37:56,780
Jos halusin kaiken että
Olen korostanut olla keskitetty,

834
00:37:56,780 --> 00:38:00,270
siksi minulla on linja 21 ja
vastaava rivi 31.

835
00:38:00,270 --> 00:38:04,820
Mutta oletetaan nyt halua sanoa John
Harvardin, tervetuloa kotisivuilleni.

836
00:38:04,820 --> 00:38:06,530
>> Copyright-merkin John Harvard.

837
00:38:06,530 --> 00:38:09,180
Ja kai haluan ensin
nämä linjat olla aika iso.

838
00:38:09,180 --> 00:38:10,450
36 pikseliä.

839
00:38:10,450 --> 00:38:11,530
Niin, että kunnon kokoinen.

840
00:38:11,530 --> 00:38:13,240
Ja halusin sen paino olla rohkea.

841
00:38:13,240 --> 00:38:15,450
Mutta sitten alle,
Haluan pienempi teksti.

842
00:38:15,450 --> 00:38:19,980
Ja sen alapuolella, haluan
jopa pienempi teksti.

843
00:38:19,980 --> 00:38:20,480
Anteeksi.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Tänään tuntuu pois päivä.

846
00:38:26,940 --> 00:38:29,840
>> Joten nyt, mitä teen ilmaista tämän?

847
00:38:29,840 --> 00:38:34,580
Täällä linjalla 22 on upotettu
div tai sisäkkäisiä div, jos haluatte.

848
00:38:34,580 --> 00:38:36,190
Sekin on oma tyyli tag.

849
00:38:36,190 --> 00:38:38,160
Voin määritellä fontin kokoa 36.

850
00:38:38,160 --> 00:38:40,460
Voin määritellä fontin paino rohkeita.

851
00:38:40,460 --> 00:38:43,360
Alas täällä, vain määrittää 24 pikseliä.

852
00:38:43,360 --> 00:38:45,960
Ja lopuksi, linjassa 28, voin määritellä 12.

853
00:38:45,960 --> 00:38:49,070
Aivan kuten nopeasti järki tarkistaa
ja ihmisenä luet tätä,

854
00:38:49,070 --> 00:38:52,545
mitä sanoja ruudulla ovat
todella tulee olla rohkea?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Jotka linjat ovat todella rohkeita?

857
00:38:58,760 --> 00:38:59,570
>> Vain John Harvard.

858
00:38:59,570 --> 00:39:00,070
Oikea?

859
00:39:00,070 --> 00:39:05,940
Koska aivan kuten linja 22 sanoo hei
selain, tässä jako sivun.

860
00:39:05,940 --> 00:39:07,920
Tee se fontin koko 36 kohta.

861
00:39:07,920 --> 00:39:09,460
Tee fontin paino rohkea.

862
00:39:09,460 --> 00:39:11,920
Heti kun saavutat
vastaava lopputunniste

863
00:39:11,920 --> 00:39:15,340
tai suljettu tag linja 24,
että välineet, hei selain,

864
00:39:15,340 --> 00:39:17,640
lakata tekemästä mitä se on olet tekemässä.

865
00:39:17,640 --> 00:39:21,020
Ja ilmoitus on selkeä, vaikka
linja 22 on kaikki nämä ominaisuudet

866
00:39:21,020 --> 00:39:24,430
tyyliin, kun
Sulje tag linjassa 24,

867
00:39:24,430 --> 00:39:25,940
vain mainita tunnisteen nimi.

868
00:39:25,940 --> 00:39:29,990
>> Et toista sanaa tyyliä tai
jotain, joka on sisällä näitä lainauksia.

869
00:39:29,990 --> 00:39:32,860
Joten jos katson tätä nyt
minun selaimessa, sallikaa

870
00:39:32,860 --> 00:39:38,060
katso lopputulos. Anna minun mennä
eteenpäin tähän tiedostoon, joka on CSS 0.

871
00:39:38,060 --> 00:39:41,814
Ja se on edelleen melko tavallinen,
mutta tulossa melko mielenkiintoinen.

872
00:39:41,814 --> 00:39:43,980
Mutta se osoittautuu siellä
muita asioita voin tehdä täällä,

873
00:39:43,980 --> 00:39:46,490
ja riski tehdä
tämä täysin vastenmielinen,

874
00:39:46,490 --> 00:39:48,630
huomata tässä, että minun
elin minun web-sivun,

875
00:39:48,630 --> 00:39:53,930
Voin tehdä jotain hauskaa
kuten BG tai taustaväri.

876
00:39:53,930 --> 00:39:56,670
>> Ja nopea, mikä on lempivärisi?

877
00:39:56,670 --> 00:39:57,720
Green Kuulin.

878
00:39:57,720 --> 00:39:58,750
Selvä.

879
00:39:58,750 --> 00:40:02,920
Joten nyt, jos osuin reload nyt,
meillä on vihreä web-sivun.

880
00:40:02,920 --> 00:40:04,710
Selvä, joten se ei ole huono.

881
00:40:04,710 --> 00:40:08,350
Ja nyt, jos haluan tehdä tämä todella
viileä, voin tehdä väri minun tekstiä

882
00:40:08,350 --> 00:40:09,360
jopa punainen.

883
00:40:09,360 --> 00:40:10,870
Joten mitä tämä näyttää.

884
00:40:10,870 --> 00:40:12,230
Nyt se on näyttänyt aika hyvältä.

885
00:40:12,230 --> 00:40:15,460
Ja tänne, jos todella
halua sotkea jonkun

886
00:40:15,460 --> 00:40:17,487
tai jos haluat olla
yksi niistä ihmisistä, jotka

887
00:40:17,487 --> 00:40:20,570
yrittää huijata sinua vierailevat web
sivu koska he ovat huijasi Google

888
00:40:20,570 --> 00:40:27,610
luulemaan siellä koko joukko
avainsanoista like-- Katsotaanpa, lataa.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Mihin se meni?

891
00:40:30,680 --> 00:40:31,530
Ja siellä se meille.

892
00:40:31,530 --> 00:40:32,030
Selvä.

893
00:40:32,030 --> 00:40:34,905
Joten sanon tämän syrjään, käymme
puhua tästä tavaraa muutaman viikon

894
00:40:34,905 --> 00:40:36,740
kun puhumme
turvallisuus, jos todella

895
00:40:36,740 --> 00:40:38,852
upottaa koko rypäleterttuja
avainsanoja Web-sivun,

896
00:40:38,852 --> 00:40:41,810
vaikka ne eivät näy
ihmisen, joku kuten Google, tietenkin,

897
00:40:41,810 --> 00:40:43,250
voi vielä itse löytää tämä.

898
00:40:43,250 --> 00:40:45,820
Selvä, niin se on aika
hirveä melko nopeasti.

899
00:40:45,820 --> 00:40:48,420
>> Ja itse asiassa, se ei ole kaikki
että paljon toisin kuin oma web

900
00:40:48,420 --> 00:40:51,480
sivun perustutkintoa, joka
Aloin googling noin löytää

901
00:40:51,480 --> 00:40:53,690
menneisyyden versioita vanhoista verkkosivuilla.

902
00:40:53,690 --> 00:40:54,500
Se oli melko huono.

903
00:40:54,500 --> 00:40:56,650
Itse en löytänyt
yksi juuri ennen luokan.

904
00:40:56,650 --> 00:40:58,620
Mutta on pahempi siellä.

905
00:40:58,620 --> 00:41:01,534
Tämä ilmeisesti oli minun
etusivu takaisin vuonna 1996.

906
00:41:01,534 --> 00:41:04,200
Ilmeisesti ajattelin, että se oli
aiheellista pyytää ihmisiä heidän nimensä

907
00:41:04,200 --> 00:41:05,991
ennen tilaisuuden tullen
itse nähdä minun verkkosivu.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> Ja sitten näytin heille
jotain tyhmää, todennäköisesti.

910
00:41:11,920 --> 00:41:13,450
Minä kaivaa enemmän ensi kerralla.

911
00:41:13,450 --> 00:41:16,220
Mutta nyt, nyt
harkita hieman suunnittelu.

912
00:41:16,220 --> 00:41:17,444
Olemme puhuneet tyyliin.

913
00:41:17,444 --> 00:41:19,735
Ja tämä sivu toistaiseksi ja
lähes kaiken olen kirjoittanut

914
00:41:19,735 --> 00:41:21,890
on melko puhdas tyylillisesti.

915
00:41:21,890 --> 00:41:23,320
Mutta entä suunnittelu?

916
00:41:23,320 --> 00:41:25,990
No, siellä on paljon irtisanomisten
mitä olen tehnyt täällä.

917
00:41:25,990 --> 00:41:28,156
>> Olen maininnut sanaa
väri pari paikkaa.

918
00:41:28,156 --> 00:41:31,630
Olen maininnut kirjasinkokoa pari
paikkoja ja rohkea pari paikkaa.

919
00:41:31,630 --> 00:41:34,870
Ja pohjimmiltaan, olen co
sekoittuminen kahdella kielellä.

920
00:41:34,870 --> 00:41:38,100
Minulla HTML minun tageja ja minun
ominaisuudet ja sitten yhtäkkiä,

921
00:41:38,100 --> 00:41:40,100
välillä lainausmerkit, minulla on
toinen kieli tänään

922
00:41:40,100 --> 00:41:43,830
nimeltään CSS, joka taas on vain nämä
keskeinen arvo pareittain tai näitä ominaisuuksia

923
00:41:43,830 --> 00:41:45,280
kaksoispisteellä erotettuja.

924
00:41:45,280 --> 00:41:47,700
>> On käynyt ilmi, että paljon
kuten C jossa

925
00:41:47,700 --> 00:41:50,550
voi alkaa tekijä ulos
jotkut koodi header-tiedostot,

926
00:41:50,550 --> 00:41:53,520
joten voimme tehdä saman HTML.

927
00:41:53,520 --> 00:41:56,030
Ja askel kohti, joka on seuraava.

928
00:41:56,030 --> 00:42:02,230
Huomaa, että tämä versio, CSS1.html on
Rakenteellisesti täsmälleen sama sivun.

929
00:42:02,230 --> 00:42:05,250
Joten minulla koko joukko
on divs, mutta tällä kertaa, olen

930
00:42:05,250 --> 00:42:07,220
päässyt eroon kääreen
div kuten näet.

931
00:42:07,220 --> 00:42:12,390
>> Ja olen antanut nämä kolme divs
ylä-, keski- ja pohja, ainutlaatuinen tunnukset.

932
00:42:12,390 --> 00:42:14,760
Tämä on mukavaa, koska mukaan
antaa näiden toimialojen

933
00:42:14,760 --> 00:42:18,715
Sivun yksilölliset tunnisteet,
Voin viitata niitä muualta.

934
00:42:18,715 --> 00:42:19,215
Missä?

935
00:42:19,215 --> 00:42:21,070
No, minäpä selaamalla ylöspäin.

936
00:42:21,070 --> 00:42:24,070
Ja tähän mennessä, milloin teimme
kärjessä web-sivun, mitä

937
00:42:24,070 --> 00:42:28,560
ainoa tag meillä on ollut
pään sivun?

938
00:42:28,560 --> 00:42:29,740
Vähän kovempaa.

939
00:42:29,740 --> 00:42:30,799
Vain otsikko toistaiseksi.

940
00:42:30,799 --> 00:42:32,590
Mutta se osoittautuu siellä
muutamia muita asioita

941
00:42:32,590 --> 00:42:35,840
voit laittaa sinne, yksi
joka sitä kutsutaan tyyliin tag.

942
00:42:35,840 --> 00:42:37,850
Niin hetki sitten, me katsoimme
klo tyyliattribuutti.

943
00:42:37,850 --> 00:42:39,150
Osoittautuu siellä tyyliin tag.

944
00:42:39,150 --> 00:42:41,200
Se kuuluu sisällä
pään sivun.

945
00:42:41,200 --> 00:42:42,840
Ja nyt huomaa, mitä olen tekemässä.

946
00:42:42,840 --> 00:42:46,540
Minulla on sisällä tämän
tyyli tag seuraavat.

947
00:42:46,540 --> 00:42:51,190
Olen kirjaimellisesti viittaavat linjalla 20
nimeksi tag mikä haluan tyylitellä.

948
00:42:51,190 --> 00:42:53,489
>> Sitten minulla on auki kihara ahdin
ja suljettu kihara ahdin.

949
00:42:53,489 --> 00:42:56,030
Niin samanlaisia ​​hengeltään C, mutta
jälleen, tämä ei ole funktio,

950
00:42:56,030 --> 00:42:57,796
tämä on vain syntaktinen tässä yksityiskohtaisesti.

951
00:42:57,796 --> 00:43:00,170
Ja sitten tietysti, minä kerron
selain, hei selain,

952
00:43:00,170 --> 00:43:05,210
tehdä koko kehon sivun
on teksti yhdenmukaistaminen keskustasta.

953
00:43:05,210 --> 00:43:06,930
Ja sitten tämä sanoo seuraavaa.

954
00:43:06,930 --> 00:43:12,600
Hei selain, jos näet HTML
elementti tai tag tulevalla sivulla

955
00:43:12,600 --> 00:43:17,040
on yksilöllinen tunniste alkuun,
joten hash symboli täällä vain sitä,

956
00:43:17,040 --> 00:43:21,010
ainutlaatuinen idea alkuun, mennä eteenpäin
ja tehdä sen fontin kokoa 36

957
00:43:21,010 --> 00:43:22,490
ja sen fontti paino rohkea.

958
00:43:22,490 --> 00:43:26,840
>> Hei selain, elementti jonka
ID on keskellä, jotta se 24 pikseliä.

959
00:43:26,840 --> 00:43:31,070
Ja hei selain, jos näet
Ajatus pohja, jotta se 12 pikseliä.

960
00:43:31,070 --> 00:43:33,540
Vaikutus lopulta
on täsmälleen sam.

961
00:43:33,540 --> 00:43:36,500
Jos menen CSS 1,
sivu näyttää samalta.

962
00:43:36,500 --> 00:43:39,810
Mutta olemme askeleen kohti
hieman parempi suunnittelu.

963
00:43:39,810 --> 00:43:44,850
Haluaisin nyt palata tänne CSS2
ja katso, mitä muuta olen tehnyt.

964
00:43:44,850 --> 00:43:48,030
>> Nyt sivu on todella, todella puhdas.

965
00:43:48,030 --> 00:43:50,730
Itse en mahtuu kaikki
sisällön sivu täällä.

966
00:43:50,730 --> 00:43:54,270
Mutta mitä uusi tunniste on I
käyttöön, ilmeisesti?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
Ja se ei ole paras nimeä tag,
koska se ei ole linkkiä mielessä

969
00:43:57,853 --> 00:44:00,780
että me tiedämme sen, mutta tämä tarkoittaa,
linkki jonkin muun tiedoston.

970
00:44:00,780 --> 00:44:02,890
Tämä on ikään kuin terävä sisältävät C.

971
00:44:02,890 --> 00:44:06,280
>> Tämä on tapa HTML
sanoa hei selain,

972
00:44:06,280 --> 00:44:10,240
hae sisältöä
tiedosto nimeltä css2.css.

973
00:44:10,240 --> 00:44:12,880
Suhde, minulle,
on, että se on tyylisivu.

974
00:44:12,880 --> 00:44:17,980
Ja todellakin, sitähän yksi
S: n CSS keinoin.

975
00:44:17,980 --> 00:44:20,350
Tämä on tyylisivu.

976
00:44:20,350 --> 00:44:23,120
Se on vain tekstitiedosto, joka sisältää
koko joukko omaisuutta.

977
00:44:23,120 --> 00:44:25,940
Se on koko joukko tyylejä
että haluat hakea sivulle.

978
00:44:25,940 --> 00:44:28,860
>> Ja niin tämä ilmeisesti on
viittaa toiseen tiedostoon.

979
00:44:28,860 --> 00:44:32,970
Ja jos avaan, että CSS2.css,
huomaa että kaikki olen tehnyt

980
00:44:32,970 --> 00:44:35,900
on kopioida ja liittää kaikki
Tämän tähän tiedostoon.

981
00:44:35,900 --> 00:44:38,220
Ja nyt, vaikka et ole koskaan
koodattu tätä kamaa ennen,

982
00:44:38,220 --> 00:44:40,700
vain pohtimaan
sananlaskun konetekniikka hattu

983
00:44:40,700 --> 00:44:44,220
on, miksi tämä
parempi suunnittelu luultavasti?

984
00:44:44,220 --> 00:44:48,910
Factoring pois ne CSS-ominaisuuksia,
laittamalla heidät omaan tiedostoon.

985
00:44:48,910 --> 00:44:51,330
Vaikka me ratkaisseet tämän
ongelma kuin viisi minuuttia sitten

986
00:44:51,330 --> 00:44:52,600
aivan ensimmäinen versio.

987
00:44:52,600 --> 00:44:55,730
>> Olemme ei parantunut
sivu tyylillisesti,

988
00:44:55,730 --> 00:44:57,520
tämä on vain parempi
suunnittelu jossain mielessä.

989
00:44:57,520 --> 00:44:58,990
Miksi luulet?

990
00:44:58,990 --> 00:45:01,510
Joo.

991
00:45:01,510 --> 00:45:02,260
Joustavampi miten?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Joo.

994
00:45:05,540 --> 00:45:07,373
Joten jos haluat mennä
takaisin ja muuttaa asioita,

995
00:45:07,373 --> 00:45:09,540
nyt, sinulla on yksi paikka
jossa voit muuttaa asioita.

996
00:45:09,540 --> 00:45:11,622
Ja itse asiassa jotain
kuten ongelma asettaa seitsemän,

997
00:45:11,622 --> 00:45:13,690
jossa me toteuttaa
varastossa kaupankäynnin verkkosivuilla,

998
00:45:13,690 --> 00:45:15,523
joka on menossa on
koko joukko sivuja.

999
00:45:15,523 --> 00:45:17,620
Ja se olisi todella
harmittaa jos päätät, hm,

1000
00:45:17,620 --> 00:45:21,630
En todellakaan pidä 24 pikseliä, haluan
sen olevan 28 pikseliä tai hieman suurempi.

1001
00:45:21,630 --> 00:45:23,550
Ja sitten täytyy tehdä
maailmanlaajuinen etsiä ja korvata

1002
00:45:23,550 --> 00:45:27,560
tai avaa kaikki sivuston tiedostot
yksinkertaisesti todella muuttaa yksi arvo.

1003
00:45:27,560 --> 00:45:31,290
Factoring nämä tyylit
yhdeksi keskeinen paikka,

1004
00:45:31,290 --> 00:45:34,720
voit nyt avata yhden tekstitiedosto
vuonna CS50IDE mihin tahansa ohjelmaan,

1005
00:45:34,720 --> 00:45:36,479
muuttaa sitä, tallentaa sen, ja tehty.

1006
00:45:36,479 --> 00:45:38,270
Olet levittävät ne
muutoksia kaikkialla.

1007
00:45:38,270 --> 00:45:42,450
Ja että olisi sama
dot h tiedosto samoin.

1008
00:45:42,450 --> 00:45:46,697
Joten kysyttävää näin
mennessä tätä syntaksia?

1009
00:45:46,697 --> 00:45:48,530
Hyvä on, joten olemme
tehnyt kaiken näyttää

1010
00:45:48,530 --> 00:45:51,170
paitsi todella toteuttaa hyperlinkkejä.

1011
00:45:51,170 --> 00:45:52,740
Ja niin mennään eteenpäin ja tehdä tämän.

1012
00:45:52,740 --> 00:45:54,830
Anna minun mennä eteenpäin ja
Luo uusi tiedosto tästä.

1013
00:45:54,830 --> 00:45:59,970
Aion kutsua sitä
link.html, laita nykypäivän koodi.

1014
00:45:59,970 --> 00:46:03,000
>> Ja aion tehdä avoin
kiinnike asiak tyyppi html.

1015
00:46:03,000 --> 00:46:05,970
Sivuhuomautuksena, tämä asia on
top, tämä doc tyyppi julistuksen,

1016
00:46:05,970 --> 00:46:08,420
se on ainoa, joka on outoa
kanssa huutomerkki.

1017
00:46:08,420 --> 00:46:12,100
Sinun täytyy vain tehdä se siellä ja se
tarkoittaa käytämme HTML-versio 5.

1018
00:46:12,100 --> 00:46:14,460
Vanhemmat versiot
kieli oli paljon kauemmin

1019
00:46:14,460 --> 00:46:16,400
jouset että sinun piti laittaa sinne.

1020
00:46:16,400 --> 00:46:18,620
Joten tässä on esimerkki nimeltään linkin.

1021
00:46:18,620 --> 00:46:20,950
>> Tarvitsen elin minun web sivu täällä.

1022
00:46:20,950 --> 00:46:29,770
Ja täällä, href tasavertaiseen
sanokaamme HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
ja suosikkini verkkosivuilla, me sanomme.

1024
00:46:35,420 --> 00:46:38,550
Selvä, niin hyvin
harmittomia, käyttäjäystävällinen sivu.

1025
00:46:38,550 --> 00:46:42,950
Jos minä nyt mennä minun hakemistoon
listalle täällä ja avata link.html,

1026
00:46:42,950 --> 00:46:44,780
meillä on hyper teksti.

1027
00:46:44,780 --> 00:46:47,410
>> Ja todellakin, tämä on silloin,
H HTTP tulee.

1028
00:46:47,410 --> 00:46:51,580
Hypertext Transfer Protocol
on noin siirtämällä teksti

1029
00:46:51,580 --> 00:46:53,840
että on linkkejä muihin resursseihin.

1030
00:46:53,840 --> 00:46:58,210
Ja todellakin, tässä on tuttu,
jos retro, sininen linkki, jos napsautetaan,

1031
00:46:58,210 --> 00:47:02,607
todella saavat minut Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Nyt, oi, että on tulossa pian.

1033
00:47:03,940 --> 00:47:08,970
Selvä, joten nyt, mitkä ovat
seurauksista tämän?

1034
00:47:08,970 --> 00:47:11,610
>> Ja rehellisesti, maailma alkaa
saada hieman tutumpi

1035
00:47:11,610 --> 00:47:15,090
ja myös hieman scarier
mutta myös hieman

1036
00:47:15,090 --> 00:47:17,840
itse puolustettavissa kun aloitat
ymmärtää näitä asioita.

1037
00:47:17,840 --> 00:47:21,610
Koska kertoimet ovat, jotkut teistä, jos menet
kautta Gmail roskapostikansioon tai jopa

1038
00:47:21,610 --> 00:47:23,990
postilaatikkoon, olet luultavasti
saanut jonkinlaisen sähköpostin

1039
00:47:23,990 --> 00:47:26,980
että kysyy voit muuttaa
salasana ehkä tai ehkä tarkistaa

1040
00:47:26,980 --> 00:47:28,910
PayPal tunnistetiedot tai vaikka mitä.

1041
00:47:28,910 --> 00:47:34,510
>> Ja itse asiassa, olet ehkä saanut
jotain, joka sanoo esimerkiksi täältä

1042
00:47:34,510 --> 00:47:42,260
nollata PayPal salasana.

1043
00:47:42,260 --> 00:47:44,130
Ja nyt, huomaa, jos
Tämä ei ole Disney.com

1044
00:47:44,130 --> 00:47:51,600
mutta kuten badplace.com ja
reload, huomaa, että teksti tähän

1045
00:47:51,600 --> 00:47:53,710
voisi sanoa mitään lainkaan.

1046
00:47:53,710 --> 00:47:55,260
Ja itse asiassa tämä on vain sanoja.

1047
00:47:55,260 --> 00:48:04,610
Miksi en oikeastaan ​​super ilkeä
ja sanoa http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Klikkaa tästä palauttaa PayPal
salasana ja nyt uudelleen.

1049
00:48:14,090 --> 00:48:16,220
Tämä näyttää melko laillista, eikö?

1050
00:48:16,220 --> 00:48:20,470
Tarkoitan, en klikkaa
sähköpostia että vain sanoo.

1051
00:48:20,470 --> 00:48:22,450
Mutta huomaa kahtiajako täällä.

1052
00:48:22,450 --> 00:48:26,880
Siinä sanotaan www.paypal.com,
ja itse asiassa, odota minuutti,

1053
00:48:26,880 --> 00:48:29,210
me tiedämme, että haluat
n turvallisuutta.

1054
00:48:29,210 --> 00:48:35,450
Joten nyt, mene www.paypal.com HTTPS,
mutta jos et ole koskaan tehnyt tätä ennen,

1055
00:48:35,450 --> 00:48:38,182
älä päästä tapana
leijuu vähän linkkejä täällä.

1056
00:48:38,182 --> 00:48:39,890
Ja on vaikea nähdä
ruudulla siellä,

1057
00:48:39,890 --> 00:48:41,340
ja se ei ole kaikki, että helpompaa täällä.

1058
00:48:41,340 --> 00:48:43,615
Mutta alas täällä
pikku nurkassa

1059
00:48:43,615 --> 00:48:45,740
ei selaimen todella
kertoa teille, että olemme menossa

1060
00:48:45,740 --> 00:48:48,850
ja badplace.com sijasta Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Nyt, minne olemme menossa tähän?

1062
00:48:51,620 --> 00:48:54,859
Kaikki esimerkit olemme tehneet tänään,
olemme kova koodattu ja kirjoitetaan käsin.

1063
00:48:54,859 --> 00:48:56,900
Internet on uskomattoman
mielenkiinnoton kun kova

1064
00:48:56,900 --> 00:48:59,844
koodia Web-sivuja niin, että sisältö
on staattinen ja koskaan muuttuvat.

1065
00:48:59,844 --> 00:49:01,760
Tietenkin, kaikki meidän
lempisivustot tänään,

1066
00:49:01,760 --> 00:49:04,470
onko se Gmailin tai Twitter tai
Facebook tai jokin monet muut

1067
00:49:04,470 --> 00:49:05,290
ovat dynaamisia.

1068
00:49:05,290 --> 00:49:07,340
He muuttumassa
vasteena käyttäjän syöttää

1069
00:49:07,340 --> 00:49:08,840
aivan kuten Googlen hakutuloksissa.

1070
00:49:08,840 --> 00:49:12,415
>> Ja niin keskiviikkona, mitä teemme, on
jätämme HTML ja CSS käyttöönotto

1071
00:49:12,415 --> 00:49:14,290
takanamme ja otamme
selvänä, että me nyt

1072
00:49:14,290 --> 00:49:16,640
tietävät sen ja esittelemme
uusi ohjelmointikieli

1073
00:49:16,640 --> 00:49:19,050
nimeltään PHP, joka kuten
C, aikoo antaa meille

1074
00:49:19,050 --> 00:49:22,450
valta itse luoda ohjelmia
että itse tuottaa tuotos.

1075
00:49:22,450 --> 00:49:25,900
Tässä tapauksessa Käytämme
PHP tuottaa dynaamisesti web

1076
00:49:25,900 --> 00:49:27,340
sivuja käyttämällä tätä uutta kieltä.

1077
00:49:27,340 --> 00:49:28,989
Niin siitä lisää keskiviikkona.

1078
00:49:28,989 --> 00:49:29,530
Nähdään silloin.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [Musiikkia]

1081
00:49:37,380 --> 00:52:38,864