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

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

3
00:00:10,460 --> 00:00:14,250
>> DAVID J MALAN: To CS50 i
to jest początek tygodnia 7.

4
00:00:14,250 --> 00:00:15,060
Więc witamy z powrotem.

5
00:00:15,060 --> 00:00:17,540
A może pamiętacie, że
w problemu ustawić cztery,

6
00:00:17,540 --> 00:00:21,510
było trochę zamiatacz ulic polować
dla niektórych wspaniałych nagród, zgodnie z którymi

7
00:00:21,510 --> 00:00:24,219
po odzyskać zdjęcia
Pracownicy zarówno tutaj, jak w New Haven,

8
00:00:24,219 --> 00:00:27,468
ty zostały zakwestionowane, aby znaleźć jak najwięcej
te informatycy jak można.

9
00:00:27,468 --> 00:00:29,550
I mamy cały
kilka zgłoszeń.

10
00:00:29,550 --> 00:00:31,930
Myślałem, że podzielić się kilkoma
z wami dzisiaj tutaj.

11
00:00:31,930 --> 00:00:35,100
>> I będziemy zamieszczać wszystkie z nich w Internecie.

12
00:00:35,100 --> 00:00:39,310
Ale przede wszystkim, chciałem
zwrócić uwagę to-- studni jednego,

13
00:00:39,310 --> 00:00:42,670
Sam był w bardzo niewielu z nich
ogólnie stwarzające tak.

14
00:00:42,670 --> 00:00:45,750
Ale wydaje się, że od
rano, zwycięzca

15
00:00:45,750 --> 00:00:51,170
była pewna niejaki Ken z
24 pracowników złapany na kamery

16
00:00:51,170 --> 00:00:54,600
lub trochę więcej, jeśli wziąć pod
stanowią wielu pracowników w zdjęciach.

17
00:00:54,600 --> 00:00:58,300
Na zdjęciu jest Ken następna
Maryi w New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Teraz, Ken, choć okazuje
obecnie jest trochę przypadku rogu

19
00:01:01,300 --> 00:01:02,880
to nie zdarzyło się jeszcze wcześniej.

20
00:01:02,880 --> 00:01:05,713
Okazuje się, że nie występują
mi się umieścić drobnym drukiem w problemu

21
00:01:05,713 --> 00:01:09,710
zestaw czterech, które mówi, że pracownicy są
kwalifikuje się do wspaniałych nagród

22
00:01:09,710 --> 00:01:13,130
ponieważ Ken jest oczywiście jednym z
fotografowie na naszych pracowników.

23
00:01:13,130 --> 00:01:16,820
Teraz, z tym powiedział, że
pierwotnie napisał mi powiedzieć

24
00:01:16,820 --> 00:01:19,180
proszę nie pisać te zdjęcia w Internecie.

25
00:01:19,180 --> 00:01:21,630
Myślę, że w dużej części
ponieważ większość zdjęć

26
00:01:21,630 --> 00:01:24,499
że fotograf zrobił wyglądać
trochę coś takiego.

27
00:01:24,499 --> 00:01:25,040
I tym podobne.

28
00:01:25,040 --> 00:01:28,990
>> Ale Ken chce mi zapewnić,
że jest to bardzo dobry fotograf,

29
00:01:28,990 --> 00:01:33,190
On jest profesjonalistą, bierze
zdjęcia, które nie są rozmyte,

30
00:01:33,190 --> 00:01:37,270
że są lepsze w centrum uwagi, a on
wziął sporo z naszych pracowników.

31
00:01:37,270 --> 00:01:40,370
Ale zamiast tylko potwierdzić
Ken, co myśleliśmy, że będziemy robić

32
00:01:40,370 --> 00:01:43,390
jest przejść się po liście
Rzeczywiste studenci, którzy złożyli.

33
00:01:43,390 --> 00:01:48,640
I okazuje się, że Lance z
15 zdjęcia jak z rana

34
00:01:48,640 --> 00:01:50,030
był nasz zwycięzca.

35
00:01:50,030 --> 00:01:55,730
>> A na zdjęciu jest Lance z Colton,
z Skaz, z samym sobą, oraz z Samem.

36
00:01:55,730 --> 00:02:00,230
Ale potem okazuje się, że od
11:46, więc tylko trochę temu,

37
00:02:00,230 --> 00:02:04,380
Wróciłem do mojego e-mail i znaleźć
że mieliśmy jeszcze jeden złożenie

38
00:02:04,380 --> 00:02:08,300
przez studenta o imieniu Bonnie
których e-mail powiedział tylko to.

39
00:02:08,300 --> 00:02:10,800
Nie zamierzam kłamać, jestem
robi to podczas lekcji.

40
00:02:10,800 --> 00:02:17,620
A następnie udał się dołączyć tylko
14 zdjęcia, jeden nieśmiały Lance'a 15.

41
00:02:17,620 --> 00:02:22,690
>> Ale na zdjęciach Bonnie, okazuje
się było wielu pracowników, Sam

42
00:02:22,690 --> 00:02:25,960
wśród nich, więc to, co myśleliśmy,
zrobi to potwierdzić zarówno tych.

43
00:02:25,960 --> 00:02:29,240
Więc oprócz coraz Dropbox
Przestrzeń, że wszyscy, którzy uczestniczyli

44
00:02:29,240 --> 00:02:33,900
otrzymuje te dwie sekcje będzie również
otrzymują piękny pokrywane obiad dla nich

45
00:02:33,900 --> 00:02:36,100
i ich rozdział
Mates ten nadchodzący tydzień.

46
00:02:36,100 --> 00:02:38,970
I tak można usłyszeć od nas,
Lance i Bonnie, o tym.

47
00:02:38,970 --> 00:02:40,002
Więc wielkie gratulacje dla nich.

48
00:02:40,002 --> 00:02:42,210
Teraz, ci z was, kto by
jak obiad, bardziej ogólnie,

49
00:02:42,210 --> 00:02:45,320
wiedzieć, że CS50 obiad w Cambridge
i New Haven jest w ten piątek.

50
00:02:45,320 --> 00:02:48,510
Idź do CS50 stronę slash RSVP.

51
00:02:48,510 --> 00:02:49,800
A teraz słowo na seminariach.

52
00:02:49,800 --> 00:02:50,730
Więcej curricularly.

53
00:02:50,730 --> 00:02:52,490
Więc my zbliżamy się do
punkt semestrze

54
00:02:52,490 --> 00:02:55,200
gdzie należy zacząć
myśląc o projektach gotowych.

55
00:02:55,200 --> 00:02:59,309
A w rzeczywistości, tylko trochę, będzie
tak zwany pre propozycje być spowodowane.

56
00:02:59,309 --> 00:03:01,850
Tak więc pre propozycje mają
być bardzo mały wpływ i naprawdę

57
00:03:01,850 --> 00:03:04,109
tylko okazją do
komponować krótką notatkę

58
00:03:04,109 --> 00:03:06,900
Twój kolega nauczania, aby informować
mu, co myślisz ciebie

59
00:03:06,900 --> 00:03:09,140
może chcą zrobić dla ostatecznego projektu.

60
00:03:09,140 --> 00:03:11,730
>> Teraz, wielu studentów skończyć
robi internetowych projektów końcowych.

61
00:03:11,730 --> 00:03:13,800
I oczywiście, że jesteśmy po prostu
Teraz w zeszłym tygodniu w tym

62
00:03:13,800 --> 00:03:15,890
i poza nurkowanie w programowaniu stron internetowych.

63
00:03:15,890 --> 00:03:18,200
Więc nie martw się, jeśli
nie mają żadnego pojęcia, jak

64
00:03:18,200 --> 00:03:21,594
by budować pomysły, które
Może masz w głowie.

65
00:03:21,594 --> 00:03:24,510
To jest naprawdę tylko funkcja zmuszając
skłaniające do myślenia i rozmawiając

66
00:03:24,510 --> 00:03:25,650
z TF o tym.

67
00:03:25,650 --> 00:03:28,810
Ale ci w tym pomóc, a
z ostatnich projektów, ostatecznie,

68
00:03:28,810 --> 00:03:31,750
wiem, że CS50 ma tradycję
oferowania seminaria.

69
00:03:31,750 --> 00:03:36,084
>> A te są opcjonalne, ręce na,
lub wykład oparty na możliwościach

70
00:03:36,084 --> 00:03:39,000
aby dowiedzieć się więcej na tematy, które są
trochę pomocnicze w stosunku do kursu na

71
00:03:39,000 --> 00:03:43,310
program nauczania, niemniej jednak wspaniały
materiały do ​​prowadzenia projektów końcowych.

72
00:03:43,310 --> 00:03:46,840
A więc ta lista to
Pracownicy CS50 tutaj w New Haven

73
00:03:46,840 --> 00:03:48,600
wymyślić dla
w tym roku o iOS

74
00:03:48,600 --> 00:03:50,730
Programowanie Android
programowania, rozwoju gry,

75
00:03:50,730 --> 00:03:54,480
i kiście więcej narzędzi
i języków i technik.

76
00:03:54,480 --> 00:03:56,780
>> Więc miej oko na stronie internetowej CS50 jest.

77
00:03:56,780 --> 00:04:00,110
A w międzyczasie, jeśli chcieliby
swoje zainteresowanie w każdym z nich,

78
00:04:00,110 --> 00:04:02,510
przejść do slash rejestru CS50 jest.

79
00:04:02,510 --> 00:04:05,770
I będziemy to kontynuować, jak do
dni i godziny lotu i lokalizacje

80
00:04:05,770 --> 00:04:09,090
i everything-- prawie wszystko będzie
być transmitowane, a także dostępne na żądanie

81
00:04:09,090 --> 00:04:11,750
po, jeśli nie można właściwie zrobić.

82
00:04:11,750 --> 00:04:15,800
Tak więc bez dalszej zwłoki,
skończyliśmy ostatnim razem z GET.

83
00:04:15,800 --> 00:04:19,610
>> I to było jak wiadomości, które było
wewnątrz wirtualnego kopercie, przypominam,

84
00:04:19,610 --> 00:04:23,960
że minęło od routera do
Router między przeglądarki internetowej i sieci

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

86
00:04:24,487 --> 00:04:26,695
I że wiadomość wyglądała
Trochę coś takiego.

87
00:04:26,695 --> 00:04:29,700
Było to tym bardziej tajemniczych wiadomości, że
faktycznie wewnątrz koperty

88
00:04:29,700 --> 00:04:34,440
napisane na kartce papieru, którego
Pierwsza linia mówi dosłownie, dostać slash.

89
00:04:34,440 --> 00:04:37,830
>> I tak, jak przeprowadzić test dla pewności
cóż ukośnik oznacza?

90
00:04:37,830 --> 00:04:40,455
Co ukośnik na myśli, kiedy
żądania strony internetowej?

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

92
00:04:43,070 --> 00:04:44,250
Poprosić go cały czas.

93
00:04:44,250 --> 00:04:47,333
Większość dowolnym czasie odwiedzania strony internetowej,
w rzeczywistości nie wpisać nazwę pliku.

94
00:04:47,333 --> 00:04:50,960
Prawdopodobnie po prostu pójść do Facebook.com,
wejść, gmail.com, lub tym podobne.

95
00:04:50,960 --> 00:04:52,260
A co ukośnik reprezentują?

96
00:04:52,260 --> 00:04:53,506
Jakie pliki?

97
00:04:53,506 --> 00:04:54,630
Albo to, co strona, specjalnie?

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

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

100
00:05:00,720 --> 00:05:01,810
Więc domyślnej strony.

101
00:05:01,810 --> 00:05:04,810
Więc jeśli nie podasz pliku
wymienić jak zaczniemy widzieć,

102
00:05:04,810 --> 00:05:07,750
jesteś rzeczywiście tylko żądanie
daj mi domyslne Facebook

103
00:05:07,750 --> 00:05:10,800
lub dać mi skrzynki odbiorczej lub dać
mi się domyślna strona z aktualnościami

104
00:05:10,800 --> 00:05:12,510
na stronie internetowej CNN lub tym podobne.

105
00:05:12,510 --> 00:05:15,220
Oraz serwer odpowiada potem
że wiadomość z czymś

106
00:05:15,220 --> 00:05:18,420
w ten sposób, mówiąc: tak,
mówić wersji HTTP 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, który jest w stanie
Kod, że ludzie rzadko

108
00:05:21,130 --> 00:05:22,790
nigdy nie zobaczy, bo to jest dobre.

109
00:05:22,790 --> 00:05:26,640
Bo to oznacza, OK, wniosek
został przyjęty i prawidłowo obsługiwane.

110
00:05:26,640 --> 00:05:28,960
I typ zawartości
Najwyraźniej w odpowiedzi

111
00:05:28,960 --> 00:05:31,170
jest często, lecz nie zawsze, tekstu.

112
00:05:31,170 --> 00:05:32,580
A konkretnie, HTML.

113
00:05:32,580 --> 00:05:34,760
I to jest w rzeczywistości
gdzie przyjrzymy się dzisiaj.

114
00:05:34,760 --> 00:05:37,140
>> Faktycznie więc, mam zamiar iść
do przodu i otworzyć przeglądarkę.

115
00:05:37,140 --> 00:05:40,410
Mam zamiar używać Chrome, można użyć
Najbardziej dowolnej przeglądarki w nadchodzących tygodniach.

116
00:05:40,410 --> 00:05:42,410
Generalnie zalecamy Chrome
ponieważ jest to szczególnie

117
00:05:42,410 --> 00:05:43,750
dobre dla programistów.

118
00:05:43,750 --> 00:05:46,070
Jest tam dużo zbudowany w
narzędzia, które ułatwiają

119
00:05:46,070 --> 00:05:49,800
rozwijać nie tylko HTML i CSS,
rzeczy zaczniemy mówić o dniu dzisiejszym,

120
00:05:49,800 --> 00:05:51,530
ale także inne języki, jak również.

121
00:05:51,530 --> 00:05:55,530
>> I mam zamiar iść do przodu i przejść to--
Idę do sterowania lub kliknij prawym

122
00:05:55,530 --> 00:05:57,210
kliknij w dowolnym miejscu na stronie internetowej.

123
00:05:57,210 --> 00:05:59,070
I mam zamiar iść do kontroli elementu.

124
00:05:59,070 --> 00:06:03,850
I mam zamiar podkręcić mój
Ekran tylko trochę tutaj.

125
00:06:03,850 --> 00:06:05,790
Pozwól mi przejść to do dna.

126
00:06:05,790 --> 00:06:08,140
Więc to jest to, co się nazywa
Inspektor Chrome.

127
00:06:08,140 --> 00:06:11,010
Tak to jest jak debugowania
narzędzie wbudowane w Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Wszyscy z was już to
jeśli już przy użyciu Chrome.

129
00:06:13,520 --> 00:06:17,169
I to pozwala zobaczyć, co się dzieje
na pod maską jakiejś stronie internetowej.

130
00:06:17,169 --> 00:06:19,210
Więc właściwie zająć
spójrz na to w następujący sposób.

131
00:06:19,210 --> 00:06:21,251
Ma sposób więcej funkcji
i zależy nam dzisiaj.

132
00:06:21,251 --> 00:06:22,760
Ale jest tych kart tutaj.

133
00:06:22,760 --> 00:06:25,890
Elementy sieci, źródła,
Oś czasu i kilka innych rzeczy.

134
00:06:25,890 --> 00:06:27,800
Zamierzam kliknij
Sieci na chwilę.

135
00:06:27,800 --> 00:06:30,500
>> I to jest trochę przytłaczające
na pierwszy rzut oka tutaj.

136
00:06:30,500 --> 00:06:34,190
Ale to, co mam zamiar zrobić, to pozwolić
mnie uprościć go trochę.

137
00:06:34,190 --> 00:06:37,560
Mam zamiar skręcić w
nagrywanie światło tak, że jest czerwony.

138
00:06:37,560 --> 00:06:39,140
A ja powiem zachować dziennik.

139
00:06:39,140 --> 00:06:41,015
I to jest tylko trochę
rzecz, zorientowali się,

140
00:06:41,015 --> 00:06:44,120
w czasie, że będzie oszczędzać
wszystko, co się dzieje w przeglądarce.

141
00:06:44,120 --> 00:06:50,030
I teraz mam zamiar iść
do http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Właściwie, zróbmy www
na dokładkę, slash.

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

144
00:06:53,643 --> 00:06:56,180
Więc URL, że wiele
może odwiedzonych.

145
00:06:56,180 --> 00:06:58,830
A teraz Facebooka internetowej
strona znajdzie się na szczycie.

146
00:06:58,830 --> 00:07:02,350
A potem cała masa
rzeczy przeleciał na dole.

147
00:07:02,350 --> 00:07:04,830
W rzeczywistości, okazuje się, że
podczas odwiedzania facebook.com,

148
00:07:04,830 --> 00:07:09,320
jesteś nie tylko co jedno żądanie HTTP,
okazuje się, że będzie Facebook.com

149
00:07:09,320 --> 00:07:14,320
wysyła 41 tych kopertach,
każdy z własnym żądanie GET,

150
00:07:14,320 --> 00:07:18,360
jak pokazano, chociaż za ekranem
Tutaj, w dolnej części ekranu

151
00:07:18,360 --> 00:07:24,040
oznacza to, że rzeczywiście, mój
Przeglądarka wykonane 41 wniosków.

152
00:07:24,040 --> 00:07:29,689
>> A w sumie, to przeniesione 861
kilobajtów i zajęło z jakiegoś powodu

153
00:07:29,689 --> 00:07:31,730
aż osiem sekund
ściągnąć wszystko.

154
00:07:31,730 --> 00:07:33,790
Więc to jest rzeczywiście trochę dziwne
że strona Facebooka weźmie, że

155
00:07:33,790 --> 00:07:35,600
długo, ale tak będzie w tym przypadku.

156
00:07:35,600 --> 00:07:39,520
Teraz, wszystko to naprawdę nie obchodzi
o wyjątkiem najwyższego życzenie.

157
00:07:39,520 --> 00:07:46,440
Więc chodźmy do tego tutaj
i pozwól mi oddalić się na chwilę.

158
00:07:46,440 --> 00:07:47,754
>> I pozwól mi przybliżyć ten.

159
00:07:47,754 --> 00:07:50,670
Więc to, co zrobiłem w lewo, chociaż
jest wiele dzieje się tutaj

160
00:07:50,670 --> 00:07:53,360
I już jest podświetlony
Facebook.com, a następnie

161
00:07:53,360 --> 00:07:56,540
zauważysz, że jestem przewijanie w dół,
przewijanie w dół, przewijanie w dół,

162
00:07:56,540 --> 00:07:58,330
do żądania nagłówków.

163
00:07:58,330 --> 00:08:01,720
I zobaczysz, że Chrome jest wyświetlana
mnie zasadniczo wewnętrzne treści

164
00:08:01,720 --> 00:08:02,810
wniosku zrobiłem.

165
00:08:02,810 --> 00:08:06,130
To nie jest formatowanie w to samo
sposób nie zauważyć, nie ma wzmianki o się,

166
00:08:06,130 --> 00:08:09,481
zauważysz tam wzmianka o gospodarzu,
Facebook.com, ścieżka lub ukośnik,

167
00:08:09,481 --> 00:08:10,730
które jest plik prosiłem.

168
00:08:10,730 --> 00:08:12,930
>> A potem, jeśli przewijać
kopii zapasowych, będziemy rzeczywiście

169
00:08:12,930 --> 00:08:17,270
zobaczyć, że to, co wrócił Facebook
dla mnie to wszystko z tych nagłówków.

170
00:08:17,270 --> 00:08:21,040
Tak więc w środku tego wirtualnego kopercie
w rzeczywistości są dużo par wartości kluczowych.

171
00:08:21,040 --> 00:08:23,130
Słowo, dwukropek, a następnie wartość.

172
00:08:23,130 --> 00:08:25,050
Słowo, dwukropek, a wartość.

173
00:08:25,050 --> 00:08:26,160
Są to tak zwane nagłówki.

174
00:08:26,160 --> 00:08:31,860
I jest o wiele bardziej szczegółowo niż tutaj
tak naprawdę obchodzi teraz.

175
00:08:31,860 --> 00:08:33,750
>> Ale to jest drugim
ostatnia tam,

176
00:08:33,750 --> 00:08:38,809
zauważyć, że serwer facebook.com, w
powiedział, rzeczywiście tutaj jest trochę Tekst HTML.

177
00:08:38,809 --> 00:08:41,409
Więc to wszystko jest do powiedzenia
że gdy wniosek internetowy

178
00:08:41,409 --> 00:08:44,300
Strona z przeglądarki do
Serwer, że serwer odpowiada

179
00:08:44,300 --> 00:08:47,630
z kopertą własnych
wewnątrz którego jest tekstem.

180
00:08:47,630 --> 00:08:49,020
Innymi słowy, HTML.

181
00:08:49,020 --> 00:08:50,590
Hipertekstowy język znaczników.

182
00:08:50,590 --> 00:08:53,200
Który jest inny język
że wprowadzamy dziś

183
00:08:53,200 --> 00:08:57,740
że ludzie i komputery generują
w celu realizacji stron internetowych.

184
00:08:57,740 --> 00:08:59,580
>> Konkretnie, spójrzmy na to.

185
00:08:59,580 --> 00:09:03,277
Mam zamiar teraz wrócić
na stronie Facebooka.

186
00:09:03,277 --> 00:09:05,360
I mam zamiar po prostu
kliknij prawym przyciskiem myszy kontroli lub

187
00:09:05,360 --> 00:09:07,634
i kliknij Pokaż źródło strony.

188
00:09:07,634 --> 00:09:10,550
I nawet jeśli nie używasz Chrome,
IE może to zrobić, Firefox może to zrobić,

189
00:09:10,550 --> 00:09:14,060
Safari może to zrobić, nawet jeśli w menu
Opcje mogą wyglądać nieco inaczej.

190
00:09:14,060 --> 00:09:18,990
I to jest HTML, które Mark i
Firma na Facebooku napisał.

191
00:09:18,990 --> 00:09:24,640
>> I zbiorowo, język ten tutaj
implementuje niebieskie i białe strony

192
00:09:24,640 --> 00:09:26,370
które widzieliśmy przed chwilą.

193
00:09:26,370 --> 00:09:28,030
Obecnie, to bit przytłaczająca.

194
00:09:28,030 --> 00:09:31,400
Ale jeśli przyjrzymy się na górze po lewej stronie, jesteśmy
zacznie widzieć pewne wzorce.

195
00:09:31,400 --> 00:09:34,140
Wygląda na to jest wiele
z tych nawias ostry

196
00:09:34,140 --> 00:09:35,970
i wtedy to jest HTML kluczowe.

197
00:09:35,970 --> 00:09:38,330
Oto kolejny otwarty
kątownik i głowy.

198
00:09:38,330 --> 00:09:41,560
>> Oto, jeśli przewinąć w dół
iw dół iw dół, jestem

199
00:09:41,560 --> 00:09:43,820
zamiar iść dalej i spróbować
czegoś szukać.

200
00:09:43,820 --> 00:09:48,510
Nie sposób się po prawej stronie
tutaj jest otwarty korpus zamka.

201
00:09:48,510 --> 00:09:50,800
I pamiętam z ostatniej
Czas, który zaproponowaliśmy

202
00:09:50,800 --> 00:09:53,364
że najprostszym strony
że człowiek może napisać

203
00:09:53,364 --> 00:09:55,030
może wyglądać trochę coś takiego.

204
00:09:55,030 --> 00:09:58,430
Otwórz tag HTML, otwarta głowa
tag, otwarte tag tytuł,

205
00:09:58,430 --> 00:10:03,230
następnie zamknięty tytuł, zamknięte głowy, otwarte
tag ciała, jakiś tekst, Furgon,

206
00:10:03,230 --> 00:10:04,720
zamknięty HTML.

207
00:10:04,720 --> 00:10:06,290
>> Ale cisza tu tylko na chwilę.

208
00:10:06,290 --> 00:10:09,030
Kod ten, nawet jeśli masz
nigdy nie napisał go przed

209
00:10:09,030 --> 00:10:11,864
ale nadal nie bardzo rozumiem
co się dzieje, wygląda całkiem nieźle.

210
00:10:11,864 --> 00:10:12,821
Prawda, że ​​to bardzo czyste.

211
00:10:12,821 --> 00:10:14,120
To bardzo stylistycznie ładne.

212
00:10:14,120 --> 00:10:16,190
Wiele wcięcia i białej przestrzeni.

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

214
00:10:18,020 --> 00:10:23,190
Więc dlaczego jest tak dużo na Facebooku
gorzej niż na pisanie kodu HTML?

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

216
00:10:24,310 --> 00:10:26,899
>> Racja, to jest jak jeden
z pięciu do stylu.

217
00:10:26,899 --> 00:10:29,315
Istnieje ważny powód
dla nich wyciąć te rogi.

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

219
00:10:31,069 --> 00:10:33,860
W porządku, więc nie chcą
sprawiają, że łatwiej jest ją przeczytać.

220
00:10:33,860 --> 00:10:36,940
Więc w pewnym sensie, są one
kasował go, rodzaj kodowania go

221
00:10:36,940 --> 00:10:40,260
przynajmniej estetycznie tak
że to jest trudniejsze dla MySpace

222
00:10:40,260 --> 00:10:42,705
iść i zdzierać ich
strona główna i HTML do niego.

223
00:10:42,705 --> 00:10:45,080
Okazuje się, że z programów
choć w tym Chrome

224
00:10:45,080 --> 00:10:47,020
możemy to posprzątać bardzo łatwo.

225
00:10:47,020 --> 00:10:49,420
Tak więc nie dość, że jest tak dlatego,.

226
00:10:49,420 --> 00:10:51,290
Co jeszcze może być przyczyną.

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

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

229
00:10:54,680 --> 00:10:55,890
Tak, dane białe koszty kosmiczne.

230
00:10:55,890 --> 00:10:56,598
Co masz na myśli?

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

232
00:11:02,250 --> 00:11:02,979
Tak, dokładnie.

233
00:11:02,979 --> 00:11:06,020
Jeśli naciśnij klawisz Tab dużo lub
spacji, rozważyć konsekwencje.

234
00:11:06,020 --> 00:11:10,060
Więc każdy klawisz na klawiaturze jest
[Niesłyszalne] reprezentowane jako jeden bajt.

235
00:11:10,060 --> 00:11:14,560
>> Więc przypuszczam, że Mark lub którykolwiek z deweloperów
te dni uderza spacji tylko raz

236
00:11:14,560 --> 00:11:17,899
w stronie HTML
reprezentuje stronę Facebooka.

237
00:11:17,899 --> 00:11:19,690
A Facebook ma wiele
użytkowników tych dni.

238
00:11:19,690 --> 00:11:24,030
Więc przypuszczam, że strona Facebooka
odwiedza miliarda ludzi dzisiaj.

239
00:11:24,030 --> 00:11:27,020
I ktoś na Facebooku ma
nacisnąć spację tylko raz.

240
00:11:27,020 --> 00:11:29,890
>> Więc jeden dodatkowy bajt,
miliard wnioski,

241
00:11:29,890 --> 00:11:32,790
o ile więcej danych jest Facebook
przesyłania przez Internet

242
00:11:32,790 --> 00:11:37,160
dlatego, że ktoś uderzył w
klawisz spacji na klawiaturze swojego?

243
00:11:37,160 --> 00:11:41,660
A miliard bajtów, lub jeden gigabajt
Dane są wysyłane z serwerów Facebooka

244
00:11:41,660 --> 00:11:43,626
do ludzi na całym
Świat bez powodu.

245
00:11:43,626 --> 00:11:44,750
Teraz, to tylko jedno miejsce.

246
00:11:44,750 --> 00:11:48,866
>> Wyobraź sobie, że właściwie wyczyścić ten
rzecz się i wcięte go i dodał

247
00:11:48,866 --> 00:11:50,990
dużo białej przestrzeni i
znaki tabulacji i spacji,

248
00:11:50,990 --> 00:11:53,656
skończyć się gigabajtów wydatków,
jeśli nie terra bajtów więcej przestrzeni.

249
00:11:53,656 --> 00:11:56,640
I tak bardzo powszechne w
Rzeczywisty świat tworzenia stron WWW

250
00:11:56,640 --> 00:11:58,950
jest minify kodu.

251
00:11:58,950 --> 00:12:01,280
A my w końcu zobaczyć
jak można to zrobić.

252
00:12:01,280 --> 00:12:04,630
>> Ale dziś, zaczniemy pisać kod
to faktycznie odczytywany przez nas ludzi.

253
00:12:04,630 --> 00:12:10,120
Okazuje się jednak, jeśli wrócę
do tego narzędzia w Chrome Sprawdź, Element,

254
00:12:10,120 --> 00:12:12,030
wcześniej, byliśmy na karcie sieciowej.

255
00:12:12,030 --> 00:12:15,430
Okazuje się, że jeśli się do
Zakładka elementy, co faktycznie zobaczyć

256
00:12:15,430 --> 00:12:19,230
jest Chrome dość drukowane
wersja tego samego HTML.

257
00:12:19,230 --> 00:12:20,640
Więc my deobfuscated go.

258
00:12:20,640 --> 00:12:22,472
Więc to nie pasuje do komputera.

259
00:12:22,472 --> 00:12:24,430
I teraz można rzeczywiście
kliknij wokół i zacząć

260
00:12:24,430 --> 00:12:27,630
zobaczyć hierarchię, która jest strona internetowa.

261
00:12:27,630 --> 00:12:28,780
Więc rzeczywiście to zrobić.

262
00:12:28,780 --> 00:12:32,120
Mam zamiar iść do przodu i otworzyć się na
mój Mac program o nazwie edytować tekst.

263
00:12:32,120 --> 00:12:35,490
I przypominam, że jest to po prostu
super prosty program tekstu.

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

265
00:12:37,490 --> 00:12:39,820
I mam zamiar Verbatim
wpisz następujące polecenie.

266
00:12:39,820 --> 00:12:44,650
Typ doc HTML, otwarty nawias
HTML, zamknięty wspornik HTML,

267
00:12:44,650 --> 00:12:49,000
mamy głowę stronie tutaj
Koniec głowicy stronie,

268
00:12:49,000 --> 00:12:52,310
tytuł będzie jak, Hello World.

269
00:12:52,310 --> 00:12:56,660
>> A potem na dół, musimy
ciało stronie internetowej.

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

271
00:12:58,050 --> 00:13:00,700
A potem tutaj, hello world.

272
00:13:00,700 --> 00:13:01,270
W porządku.

273
00:13:01,270 --> 00:13:03,350
Więc napisałem super szybki stronę internetową.

274
00:13:03,350 --> 00:13:06,675
Mam zamiar zapisać jako
hello.html na pulpicie.

275
00:13:06,675 --> 00:13:09,050
Mój Mac będzie narzekać,
myśląc, że zaraz,

276
00:13:09,050 --> 00:13:11,091
jest to plik tekstowy, zrobić
chcesz to nazwać .txt?

277
00:13:11,091 --> 00:13:13,300
Ale nie chcę używać kropki HTML.

278
00:13:13,300 --> 00:13:16,140
>> A potem, co jest miłe, jeśli
po prostu kliknij dwukrotnie ten plik,

279
00:13:16,140 --> 00:13:18,600
hello.html, oto moja strona internetowa.

280
00:13:18,600 --> 00:13:22,564
Niestety, jestem
jedyną osobą na świecie

281
00:13:22,564 --> 00:13:23,980
którzy mogą odwiedzić tę stronę już teraz.

282
00:13:23,980 --> 00:13:26,734
Bo gdzie to żyją podobno?

283
00:13:26,734 --> 00:13:27,650
To na moim Mac, prawda?

284
00:13:27,650 --> 00:13:28,470
Co jest bezużyteczne.

285
00:13:28,470 --> 00:13:30,390
Jak nikt w tym pokoju
nie mówiąc już o internecie

286
00:13:30,390 --> 00:13:31,598
może faktycznie odwiedzić tę stronę.

287
00:13:31,598 --> 00:13:33,820
Więc dzisiaj, musimy
wprowadzić kolejny element.

288
00:13:33,820 --> 00:13:36,720
>> I to zrobić, będę
śmiało i otwarcie Cloud 9.

289
00:13:36,720 --> 00:13:40,090
Więc cloud 9 jest oczywiście
Chmura serwis-- oparty CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- To ma wszystkich naszych obszarów roboczych
pracuje gdzieś w internecie.

291
00:13:44,890 --> 00:13:48,330
A to oznacza, że ​​wszystkie nasze pliki
są publicznie dostępne już.

292
00:13:48,330 --> 00:13:49,830
Więc idź naprzód i to zrobić.

293
00:13:49,830 --> 00:13:53,670
Mam zamiar iść do przodu i
utworzyć nowy plik NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Mam zamiar zapisać go jako przed
jak hello.html i kliknij Zapisz.

295
00:13:58,819 --> 00:14:01,860
A teraz po prostu zaoszczędzić czas, idę
iść do przodu i skopiuj wklej ten kod

296
00:14:01,860 --> 00:14:03,470
zamiast wpisywać go.

297
00:14:03,470 --> 00:14:04,550
I zapisz go.

298
00:14:04,550 --> 00:14:07,550
A więc teraz mam
plik o nazwie hello.html.

299
00:14:07,550 --> 00:14:09,710
Ale w jaki sposób właściwie
otwórz go jako stronę internetową?

300
00:14:09,710 --> 00:14:14,120
Cóż, okazuje się, zbudowany w celu CS50
IDE nie jest tylko kompilator jak brzękiem

301
00:14:14,120 --> 00:14:16,670
i debugger jak GDB i
kiście innych programów,

302
00:14:16,670 --> 00:14:21,140
Jest rzeczywiście pełnoprawnym
serwer WWW działa w ramach CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Wszyscy z was, to znaczy,
mieć swój własny serwer WWW.

304
00:14:23,900 --> 00:14:26,850
I serwer WWW jest tylko kawałek
oprogramowania, którego celem w życiu

305
00:14:26,850 --> 00:14:28,220
ma służyć do stron internetowych.

306
00:14:28,220 --> 00:14:32,490
Aby usłyszeć prośby przeglądarek i
odpowiedzieć małych wirtualnych kopertach

307
00:14:32,490 --> 00:14:35,290
wewnątrz którego jest
treści, które pisałem.

308
00:14:35,290 --> 00:14:38,372
Więc to serwer WWW jest
rzeczywiście wolne i otwarte.

309
00:14:38,372 --> 00:14:40,830
Gdzie open source oznacza po prostu,
Oprogramowanie, że ktoś inny ma

310
00:14:40,830 --> 00:14:43,480
napisane, że każdy z nas może
rzeczywiście zobaczyć i pobrać, a nawet

311
00:14:43,480 --> 00:14:44,780
zmienić kod źródłowy.

312
00:14:44,780 --> 00:14:46,150
I to się nazywa Apache.

313
00:14:46,150 --> 00:14:51,450
>> I zrobiliśmy to trochę łatwiej
używać w CS50IDE nazywając go Apache 50.

314
00:14:51,450 --> 00:14:53,780
Tak, że może faktycznie
zrozumieć, co następuje.

315
00:14:53,780 --> 00:14:56,560
Mam zamiar powiedzieć Apache 50 start.

316
00:14:56,560 --> 00:14:58,910
I wtedy ja po prostu powiedzieć kropkę.

317
00:14:58,910 --> 00:15:01,080
I widzimy, niektóre nieco
Arcane komunikat,

318
00:15:01,080 --> 00:15:04,640
Ustawienie Apache dokumentu [? grupa?]
do domu, ubuntu, cokolwiek to jest,

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

320
00:15:05,770 --> 00:15:08,280
Uruchamianie serwera WWW
Apache 2 powodzeniem.

321
00:15:08,280 --> 00:15:11,330
>> Więc krótko mówiąc, ja
właśnie nacisnął guzik

322
00:15:11,330 --> 00:15:18,000
i odwrócił się na serwerze WWW, kto jest teraz
słuchania w internecie na porcie TCP

323
00:15:18,000 --> 00:15:20,587
80 pod określonym adresem.

324
00:15:20,587 --> 00:15:22,420
I tu jest napisane, a
to się zmieni Based

325
00:15:22,420 --> 00:15:26,550
o Twoją nazwę użytkownika i innych czynników,
ale zauważ, gdybym kliknij ten,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard i tak i
tak, to zauważysz, że cały ten czas

327
00:15:30,211 --> 00:15:31,960
W ciągu ostatnich kilku
tygodni, możesz mieć

328
00:15:31,960 --> 00:15:35,200
Zauważyłem, że własną nazwę użytkownika
jest osadzony w górnej prawej

329
00:15:35,200 --> 00:15:37,130
Narożnik CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> I to właściwie było wszystko
czasie adres, pod którym można

331
00:15:41,050 --> 00:15:43,574
odwiedzić wszystkie pliki za pośrednictwem Internetu.

332
00:15:43,574 --> 00:15:45,990
Do tej pory nie miało znaczenia,
ponieważ w C, zazwyczaj

333
00:15:45,990 --> 00:15:48,073
chcą rzeczy działa w
terminalu, a nie w internecie.

334
00:15:48,073 --> 00:15:50,800
Ale dziś, zaczynamy
pisanie internetowy oparty kod

335
00:15:50,800 --> 00:15:53,350
że nie chcą
dostępne w adresów publicznych.

336
00:15:53,350 --> 00:15:56,100
Więc co mam zamiar
zrobić, to kliknąć ten adres.

337
00:15:56,100 --> 00:16:00,880
>> I zauważ, że widzę dość
Strona brzydkie, wpis katalogu,

338
00:16:00,880 --> 00:16:04,090
ale co plik wyskakuje na ciebie pewnie?

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

340
00:16:05,210 --> 00:16:07,870
To dlatego, że uratował
plik w mojej pracy.

341
00:16:07,870 --> 00:16:12,310
A co mówiłem Apache serwer WWW
jest spojrzeć w katalogu obszaru roboczego Dawida.

342
00:16:12,310 --> 00:16:15,300
I niech ktoś z
Świat zobaczyć te pliki.

343
00:16:15,300 --> 00:16:19,050
>> I rzeczywiście, gdybym teraz
kliknij hello.html,

344
00:16:19,050 --> 00:16:22,180
Widzę w tej karcie dokładnie tego pliku.

345
00:16:22,180 --> 00:16:26,430
Teraz zauważyć, Cloud 9 robi
coś trochę pomocne dla nas.

346
00:16:26,430 --> 00:16:29,480
W ramach CS50 IDE, zauważysz tam
nagle pasek adresu.

347
00:16:29,480 --> 00:16:33,690
To dlatego, że nawet jeśli jesteśmy
za pomocą Chrome odwiedzić CS50IDE,

348
00:16:33,690 --> 00:16:37,940
wewnątrz CS50IDE jego własny
wersja przeglądarki internetowej już teraz.

349
00:16:37,940 --> 00:16:40,820
I tak, zamiast
komplikować jako takie,

350
00:16:40,820 --> 00:16:42,955
Mam zamiar iść do przodu
i po prostu skopiować ten adres.

351
00:16:42,955 --> 00:16:45,330
Mam zamiar iść do przodu i wystarczy
otworzyć własną okno Chrome.

352
00:16:45,330 --> 00:16:47,800
Więc nie ma magii tu nie CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Jestem po prostu będzie dosłownie wklej
mój J Harvard URL i naciśnij klawisz Enter.

354
00:16:51,800 --> 00:16:54,750
I voila, teraz i
Teoretycznie, każdy

355
00:16:54,750 --> 00:16:57,700
w internecie, jeśli mam skonfigurowane
uprawnienia odpowiednio,

356
00:16:57,700 --> 00:16:58,720
może odwiedzić ten plik.

357
00:16:58,720 --> 00:17:03,230
A więc teraz, gdybym powiedział,
hello.html, voila, nie

358
00:17:03,230 --> 00:17:06,366
bardzo rozczarowująca jest moja strona.

359
00:17:06,366 --> 00:17:07,740
Warto więc zrobić szybki test dla pewności.

360
00:17:07,740 --> 00:17:09,710
Ponieważ wszystkie że
jest koncepcyjne zestaw w górę.

361
00:17:09,710 --> 00:17:13,180
I naprawdę nie mam naprawdę
uczy, jak pisać HTML per se.

362
00:17:13,180 --> 00:17:16,084
Wszelkie pytania w ten sposób znacznie
na to, co się stało?

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

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

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

366
00:17:24,290 --> 00:17:25,800
Czy CS50 właścicielem tych stron?

367
00:17:25,800 --> 00:17:26,460
W jakim sensie?

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

369
00:17:28,947 --> 00:17:29,530
Dobre pytanie.

370
00:17:29,530 --> 00:17:32,429
Więc CS50 jest właścicielem CS50.io.

371
00:17:32,429 --> 00:17:33,970
Mamy rzeczywiście kupił tę nazwę domeny.

372
00:17:33,970 --> 00:17:37,240
I charakter was
logując się do CS50IDE,

373
00:17:37,240 --> 00:17:39,270
wszyscy się czegoś, co nazywa subdomeny.

374
00:17:39,270 --> 00:17:46,840
>> Więc IDE50-Malan lub IDE50-Rob.CS50.io,
to Twój unikalny adres w terminie

375
00:17:46,840 --> 00:17:47,730
nasza domena.

376
00:17:47,730 --> 00:17:50,850
Tak więc dla celów Oczywiście
masz swój własny unikalny adres.

377
00:17:50,850 --> 00:17:55,150
Ale mamy uproszczone rzeczy przez
Kupując domeną najwyższego poziomu, CS50 kropka

378
00:17:55,150 --> 00:17:58,050
I / O, a następnie wszyscy inni
Wnętrze, które, że tak powiem.

379
00:17:58,050 --> 00:17:59,890
I wrócimy do tego
w ciągu kilku tygodni, prawdopodobnie,

380
00:17:59,890 --> 00:18:01,930
szczególnie w końcowym projekcie
czas, kiedy niektórzy z was

381
00:18:01,930 --> 00:18:03,596
może chcesz uzyskać własne nazwy domen.

382
00:18:03,596 --> 00:18:06,270
To rzeczywiście dość
prosto przed siebie.

383
00:18:06,270 --> 00:18:06,770
W porządku.

384
00:18:06,770 --> 00:18:07,880
Więc teraz to zrobić.

385
00:18:07,880 --> 00:18:11,910
Mam zamiar wrócić do
CS50IDE, gdzie mój plik teraz,

386
00:18:11,910 --> 00:18:14,710
hello.html, nie jest tak interesujące.

387
00:18:14,710 --> 00:18:17,130
Chciałbym zrobić coś
trochę ładniejszy niż to.

388
00:18:17,130 --> 00:18:19,440
Więc mam zamiar zrobić coś takiego.

389
00:18:19,440 --> 00:18:21,510
Niech mnie otwarte paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Więc jest to plik pisałem wcześniej.

391
00:18:23,560 --> 00:18:26,480
Na wierzchu, jak
Zawsze mamy uwag.

392
00:18:26,480 --> 00:18:28,730
Ale w HTML, komentarze
wygląda trochę inaczej.

393
00:18:28,730 --> 00:18:33,270
W linii trzy i linii 14, to
zobacz składnię rozpocząć komentarz

394
00:18:33,270 --> 00:18:34,020
i zakończyć komentarz.

395
00:18:34,020 --> 00:18:36,820
>> Ale żadna z tych rzeczy, w
między sprawami funkcjonalnie.

396
00:18:36,820 --> 00:18:40,250
To jest po prostu notatkę do
ludzkie, co się tutaj dzieje.

397
00:18:40,250 --> 00:18:43,040
I tak jak szybki rozsądku
sprawdzić, jeśli przewinąć w dół,

398
00:18:43,040 --> 00:18:46,820
co jest oczywiste, nowa
tag, który wprowadziliśmy?

399
00:18:46,820 --> 00:18:52,130
Tagi do tej pory widzieliśmy są otwarte
Uchwyt HTML, głowa, tytuł i ciała.

400
00:18:52,130 --> 00:18:54,400
Ale to, co teraz jest oczywiście nowa?

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

402
00:18:55,200 --> 00:18:57,320
Znacznik p lub pkt znacznik.

403
00:18:57,320 --> 00:19:01,182
A potem po prostu pożyczył trochę domyślne
Tekst łaciński stanowić moich ust.

404
00:19:01,182 --> 00:19:03,390
Bo to, co chciałem
wykazać to w jaki sposób może

405
00:19:03,390 --> 00:19:05,859
stanowią akapity tekstu w HTML.

406
00:19:05,859 --> 00:19:08,400
A więc to, co zaczyna się dziać
tutaj jest to, że nie ma już

407
00:19:08,400 --> 00:19:09,657
wzór rozwoju.

408
00:19:09,657 --> 00:19:10,990
I pozwól mi iść naprzód i to zrobić.

409
00:19:10,990 --> 00:19:12,760
Pozwól mi najpierw wyłączyć Apache.

410
00:19:12,760 --> 00:19:17,340
A ja powiem to, aby rozpocząć się
znowu wewnątrz dzisiejszym źródła siedmiu

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

412
00:19:18,420 --> 00:19:20,100
Tak, że mam dostęp do wszystkiego.

413
00:19:20,100 --> 00:19:22,230
>> A teraz, jeśli wrócę do
ten katalog aukcji,

414
00:19:22,230 --> 00:19:24,846
zauważyć, widzę każdy plik z dzisiaj.

415
00:19:24,846 --> 00:19:26,720
A zobaczysz w
Kolejny zestaw problemów, będziemy

416
00:19:26,720 --> 00:19:28,594
daje instrukcje
za robienie dokładnie tego.

417
00:19:28,594 --> 00:19:35,210
Jeśli otworzyć paragraphs.html, to może
jak dobrze wyglądać język programowania

418
00:19:35,210 --> 00:19:36,970
do ciebie, jeśli nie mówić i czytać po łacinie.

419
00:19:36,970 --> 00:19:40,525
Ale to jest tylko trzy akapity
tekstu, które są zaznaczone w HTML.

420
00:19:40,525 --> 00:19:43,100
>> I zwróć uwagę na paragraf
przerwy między nimi.

421
00:19:43,100 --> 00:19:46,400
Bo okazuje się,
i choć Ciebie

422
00:19:46,400 --> 00:19:49,210
może być skłonny to zrobić,
podczas gdy w prawdziwym świecie,

423
00:19:49,210 --> 00:19:51,370
jeśli chcesz umieścić linię
przerwy między rzeczami,

424
00:19:51,370 --> 00:19:55,680
może po prostu
to zrobić i naciśnij Zapisz.

425
00:19:55,680 --> 00:19:59,460
A teraz, jeśli przeładowanie tutaj, zawiadomienie
że wszystko się rozmywa razem

426
00:19:59,460 --> 00:20:01,100
w jednym blob tekstu.

427
00:20:01,100 --> 00:20:03,570
Ponieważ HTML jest rodzajem języka niemego.

428
00:20:03,570 --> 00:20:07,230
>> Jest ona przeznaczona do stosowania w takich
sposób, że przeglądarka będzie tylko

429
00:20:07,230 --> 00:20:09,920
to wyraźnie, co możesz powiedzieć to zrobić.

430
00:20:09,920 --> 00:20:12,890
Więc jeśli nie powiedzieć to
daj mi nowy akapit,

431
00:20:12,890 --> 00:20:14,569
nie będziesz widzieć nowy akapit.

432
00:20:14,569 --> 00:20:16,360
I rzeczywiście, co
Przeglądarka zrobi

433
00:20:16,360 --> 00:20:20,020
nawet jeśli trafisz Enter,
powiedzmy, że znowu i znowu

434
00:20:20,020 --> 00:20:23,190
i znowu, przesuwając w ten sposób tekst
w dół ekranu, a następnie zapisać

435
00:20:23,190 --> 00:20:26,610
a następnie załaduj, przeglądarka będzie
aby zwinąć wszystkie z tej białej przestrzeni

436
00:20:26,610 --> 00:20:29,021
do tylko jednego, widocznego spacji.

437
00:20:29,021 --> 00:20:29,520
W porządku.

438
00:20:29,520 --> 00:20:30,869
Więc to jest znacznik akapitu.

439
00:20:30,869 --> 00:20:32,910
A więc co to za wzór
który jest rozwijanie tutaj?

440
00:20:32,910 --> 00:20:37,450
Cóż, wydaje się być tak, że
HTML jest o począwszy tag

441
00:20:37,450 --> 00:20:38,460
i kończący się znacznik.

442
00:20:38,460 --> 00:20:39,300
A co to jest tag?

443
00:20:39,300 --> 00:20:41,160
Cóż, to tylko fragment składni.

444
00:20:41,160 --> 00:20:44,400
Otwórz uchwyt, słowo kluczowe,
zamknięty nawias, to znacznik.

445
00:20:44,400 --> 00:20:45,510
Albo zacząć znacznik.

446
00:20:45,510 --> 00:20:48,590
I wtedy, gdy jesteś
zrobić wyrażania siebie,

447
00:20:48,590 --> 00:20:52,300
jak w skończysz z ust,
robisz tak powiem odwrotnie.

448
00:20:52,300 --> 00:20:55,480
Ale przeciwnie, nie jest całkiem odwrotnie.

449
00:20:55,480 --> 00:21:00,630
>> Po prostu ten sam prefiks znacznika
wymienić ukośnika tak.

450
00:21:00,630 --> 00:21:01,130
W porządku.

451
00:21:01,130 --> 00:21:02,570
Więc nie tak ekscytujące.

452
00:21:02,570 --> 00:21:05,270
A w rzeczywistości, nie jesteśmy czyniąc
internetowej wszystko, bardziej interesujące.

453
00:21:05,270 --> 00:21:07,630
Co zrobić, jeśli chcę zrobić
rzeczy większe i pogrubione?

454
00:21:07,630 --> 00:21:11,780
Tak więc okazuje się, że oto przykład
w headings.html, gdzie w moim ciele,

455
00:21:11,780 --> 00:21:17,280
Mam tag H1, H2, H3,
cztery, pięć lub sześć, z których każda

456
00:21:17,280 --> 00:21:18,310
wydaje się dość zaawansowanych.

457
00:21:18,310 --> 00:21:21,010
Ale jeśli pójdę otworzyć tę
Przykładem, rzućmy okiem.

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

459
00:21:22,490 --> 00:21:27,030
>> Więc przeglądarek domyślnie może dać możesz tekstu
to i śmiały się różnorodnych rozmiarach.

460
00:21:27,030 --> 00:21:28,070
H1 jest duży.

461
00:21:28,070 --> 00:21:31,240
H6 jest mniejsza, a następnie
wszystko pomiędzy.

462
00:21:31,240 --> 00:21:34,170
Więc to jest interesujące, ale nadal
naprawdę nie wiem internetowej.

463
00:21:34,170 --> 00:21:36,870
Co zrobić, jeśli chcemy mam
coś w rodzaju listy. ,

464
00:21:36,870 --> 00:21:40,190
Więc tu jest punktowane lista
trzech domów Harvardu.

465
00:21:40,190 --> 00:21:41,600
>> Jak się za to zabrać?

466
00:21:41,600 --> 00:21:45,410
Cóż, spójrz na list.html.

467
00:21:45,410 --> 00:21:47,870
A tutaj widzimy
Trochę funkiness

468
00:21:47,870 --> 00:21:49,630
ale zastanówmy się, co się dzieje.

469
00:21:49,630 --> 00:21:56,182
Tak więc w oparciu o to, co właśnie widzieliśmy,
UL oznacza nieuporządkowanej listy.

470
00:21:56,182 --> 00:21:57,640
Nieuporządkowana lista jest jednoznaczne punktowane.

471
00:21:57,640 --> 00:21:58,431
Nie ma żadnych numerów.

472
00:21:58,431 --> 00:22:01,850
Jest też coś, co nazywa się
nakazał listy, która jest OL w tagu.

473
00:22:01,850 --> 00:22:05,350
Następnie LI, element listy jest wszystko znaczy.

474
00:22:05,350 --> 00:22:07,790
>> I automatycznie tak, to
numery wszystko dla Ciebie.

475
00:22:07,790 --> 00:22:11,270
Ale znowu, wszystkie moje wcięcia
i białe miejsca jest tylko dla mnie.

476
00:22:11,270 --> 00:22:13,050
Przeglądarka nie
rzeczywiście będzie obchodziło.

477
00:22:13,050 --> 00:22:16,670
Więc nawet jeśli nie mógł
to zrobić, żeby była jasność,

478
00:22:16,670 --> 00:22:19,880
nie należy, nawet jeśli
przeglądarka będzie nadal

479
00:22:19,880 --> 00:22:22,130
być w stanie zrozumieć go dobrze.

480
00:22:22,130 --> 00:22:24,590
Jestem uderzając reload w moim
Przeglądarka, jestem kliknięciu reload

481
00:22:24,590 --> 00:22:26,760
i żadna zmiana się dzieje
ponieważ przeglądarka wciąż

482
00:22:26,760 --> 00:22:29,550
robi dokładnie to, co mogę powiedzieć to zrobić.

483
00:22:29,550 --> 00:22:30,050
>> W porządku.

484
00:22:30,050 --> 00:22:31,340
Więc to wszystko jest tylko tekst.

485
00:22:31,340 --> 00:22:33,730
Teraz zróbmy coś bardziej interesującego.

486
00:22:33,730 --> 00:22:36,660
Mam zamiar iść do przodu i
pożyczyć tej HTML.

487
00:22:36,660 --> 00:22:40,910
Mam zamiar iść do przodu i
utworzyć nowy plik tutaj.

488
00:22:40,910 --> 00:22:43,370
A my nazywamy to rick.html.

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

490
00:22:46,190 --> 00:22:48,916
Mamy nieproporcjonalnie
coś używane

491
00:22:48,916 --> 00:22:51,290
rick roll nazywany w tym
klasy w tym roku, nie wiem,

492
00:22:51,290 --> 00:22:53,880
to po prostu się stało organicznie.

493
00:22:53,880 --> 00:22:55,397
>> A teraz to ma się spod kontroli.

494
00:22:55,397 --> 00:22:56,730
Więc jestem po prostu iść z nim.

495
00:22:56,730 --> 00:22:59,700
A jeśli pójdę do Google
Zdjęcia i Rick Astley.

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

497
00:23:02,450 --> 00:23:06,170
Jeśli nie wiesz, dlaczego to robimy
to po prostu przeczytać na Wikipedii.

498
00:23:06,170 --> 00:23:11,520
Za każdym razem masz kliknięciu na link,
Ktoś był śmiech gdzieś.

499
00:23:11,520 --> 00:23:14,860
I pozwól mi odejść ahead-- istnieje
idziemy, niech zobaczyć to zdjęcie.

500
00:23:14,860 --> 00:23:16,750
>> Więc tutaj mamy
Obraz w Google Images.

501
00:23:16,750 --> 00:23:19,390
I załóżmy, że jest to
racjonalnie wszędzie w internecie.

502
00:23:19,390 --> 00:23:22,570
Więc mam zamiar założyć, że to dla mnie OK
faktycznie umieścić to na mojej stronie internetowej.

503
00:23:22,570 --> 00:23:24,820
Mam zamiar iść do przodu
i skopiuj URL obrazu.

504
00:23:24,820 --> 00:23:28,600
A teraz, jeśli wrócę do Cloud
9, zobaczymy co da się zrobić tutaj.

505
00:23:28,600 --> 00:23:30,630
Więc tutaj jest po prostu strona internetowa.

506
00:23:30,630 --> 00:23:39,020
To jest Rick Astley, haha,
Mam zamiar teraz wrócić

507
00:23:39,020 --> 00:23:43,510
do mojej przeglądarce, przeładuj i interesujące.

508
00:23:43,510 --> 00:23:44,530
>> Gdzie jest Rick?

509
00:23:44,530 --> 00:23:46,050
Więc pozwól mi zobaczyć, co się stało.

510
00:23:46,050 --> 00:23:49,114
Faktycznie, mam zamiar
udawać, że nie zrobiłem tego.

511
00:23:49,114 --> 00:23:50,280
[Niesłyszalne] umieścić go tutaj.

512
00:23:50,280 --> 00:23:52,520
Wrócimy do tego za chwilę.

513
00:23:52,520 --> 00:23:54,200
Więc oto rick.html.

514
00:23:54,200 --> 00:23:56,070
Więc to nie jest Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Tak więc okazuje się, że można
faktycznie dodać go tutaj.

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

517
00:24:00,830 --> 00:24:06,680
Mam zamiar powiedzieć mi dać obraz, którego
źródłem jest adres URL po prostu kopiowane, które

518
00:24:06,680 --> 00:24:09,110
podobno jest szczęśliwy
coś, urodziny lub inne.

519
00:24:09,110 --> 00:24:13,280
>> A teraz mam zamiar
zamknąć znacznik takiego.

520
00:24:13,280 --> 00:24:15,170
Więc to jest owijanie bardzo długo.

521
00:24:15,170 --> 00:24:17,740
Ale zauważ, że wszystko mam
wykonane jest otwarty uchwyt obrazu,

522
00:24:17,740 --> 00:24:20,270
źródło z atrybutem tego.

523
00:24:20,270 --> 00:24:21,530
I to jest naprawdę długi adres URL.

524
00:24:21,530 --> 00:24:23,720
A na samym końcu, to zauważyć.

525
00:24:23,720 --> 00:24:29,530
Dlaczego ja zrobiłem ukośnik kątowy Wspornik
a nie, jak w każdym innym znacznikiem,

526
00:24:29,530 --> 00:24:33,590
ma otwarty uchwyt,
IMG, zamknięty uchwyt?

527
00:24:33,590 --> 00:24:37,040
Wystarczy odgadnąć, nawet jeśli
nie mam znajomości w ogóle

528
00:24:37,040 --> 00:24:40,410
z HTML wcześniej.

529
00:24:40,410 --> 00:24:42,710
>> Tak to jest, jak to zamyka
polecenie, ale dlaczego

530
00:24:42,710 --> 00:24:45,850
to nie naprawdę intuicyjna
Poczucie zrobić coś trochę bardziej

531
00:24:45,850 --> 00:24:48,820
verbose jak blisko obrazu?

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

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

534
00:24:52,000 --> 00:24:55,620
Wystarczy semantycznie, nie ma poczucia
począwszy od obrazu, a kończąc obraz,

535
00:24:55,620 --> 00:24:56,870
to albo jest, albo nie jest.

536
00:24:56,870 --> 00:25:00,960
Więc to nie ma sensu, aby pozostawić szczelinę
na nic innego w środku obrazu.

537
00:25:00,960 --> 00:25:02,010
Po prostu nie mogę tego zrobić.

538
00:25:02,010 --> 00:25:03,720
I tak składnia
będzie na ogół po prostu

539
00:25:03,720 --> 00:25:07,910
zrobić ukośnik wewnątrz
otwartej znacznika lub znacznika początkowego

540
00:25:07,910 --> 00:25:09,020
a następnie naciśnij Zapisz.

541
00:25:09,020 --> 00:25:13,350
>> Więc jeśli teraz odświeżyć ten plik teraz
Mam dobrą kuchnię strony internetowej tutaj.

542
00:25:13,350 --> 00:25:15,100
I mogliśmy pewnością
naprawdę drażnić ludzi

543
00:25:15,100 --> 00:25:17,010
osadzając zamiast
jak łącze YouTube.

544
00:25:17,010 --> 00:25:19,350
W rzeczywistości, za każdym razem
kiedykolwiek poszedł do YouTube,

545
00:25:19,350 --> 00:25:22,190
i niech mi właściwie przypadkowo
Rick toczyć się tutaj.

546
00:25:22,190 --> 00:25:25,770
Więc Rick rolki.

547
00:25:25,770 --> 00:25:29,592
Więc Rick roll-- mam zamiar udać się tutaj.

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

549
00:25:31,900 --> 00:25:33,730
>> OK, jedna osoba lubiłem to.

550
00:25:33,730 --> 00:25:37,270
Tak więc zauważyć, przez cały ten czas, gdy Ciebie
kliknij link Share, ty oczywiście

551
00:25:37,270 --> 00:25:41,390
uzyskać adres URL, który można właściwie
osadzić w wiadomości e-mail lub sądowej obrazu

552
00:25:41,390 --> 00:25:43,730
lub problemów ustawić lub suwaka.

553
00:25:43,730 --> 00:25:49,055
A teraz, jeśli zamiast kliknąć na ankiety,
zauważyć, że przez cały ten czas, ten materiał

554
00:25:49,055 --> 00:25:49,680
został tam.

555
00:25:49,680 --> 00:25:50,910
Mam zamiar iść do przodu i skopiować to.

556
00:25:50,910 --> 00:25:54,000
>> I tak możemy go widzieć lepiej, jestem
zamiar wkleić go w moim edytorze tekstu.

557
00:25:54,000 --> 00:25:55,860
Zauważ, że to, co
YouTube został informacją.

558
00:25:55,860 --> 00:25:57,693
Za każdym razem odwiedzisz
Wideo YouTube, jeśli Ciebie

559
00:25:57,693 --> 00:26:00,410
chcesz umieścić film na swojej
strona internetowa, po prostu weź to.

560
00:26:00,410 --> 00:26:03,350
Tak więc jest to kolejny
Tag HTML o nazwie iframe.

561
00:26:03,350 --> 00:26:04,590
Lub w ramie linii.

562
00:26:04,590 --> 00:26:08,680
Więc to też wygląda trochę więcej
skomplikowane niż wszystkie inne.

563
00:26:08,680 --> 00:26:11,950
Tak więc okazuje się, że obraz
tag i najwidoczniej tag iframe

564
00:26:11,950 --> 00:26:13,370
wziąć to, co jest zwane atrybuty.

565
00:26:13,370 --> 00:26:15,710
>> I jest inna
kawałek składni HTML.

566
00:26:15,710 --> 00:26:19,240
Oprócz znacznika
imię i nazwisko, nazwę znacznika otwarty nawias,

567
00:26:19,240 --> 00:26:23,780
można kontrolować zachowanie tagu
poprzez całą masę atrybutu

568
00:26:23,780 --> 00:26:24,860
równe wartości.

569
00:26:24,860 --> 00:26:26,290
Atrybut równa wartości.

570
00:26:26,290 --> 00:26:28,100
I tak, na przykład,
YouTube mówi nam

571
00:26:28,100 --> 00:26:31,990
jeśli chcesz szerokość tego filmu wideo
za 420 pikseli i wysokość

572
00:26:31,990 --> 00:26:35,470
za 315 pikseli, to
jak wyrazić to w HTML.

573
00:26:35,470 --> 00:26:38,480
>> Źródłem filmu będzie
się, że długo URL YouTube

574
00:26:38,480 --> 00:26:40,830
i kilka innych rzeczy
jak ramki granicy wynosi zero,

575
00:26:40,830 --> 00:26:43,500
Oznacza to, że prawdopodobnie nie ma
brak obramowania wokół rzeczy.

576
00:26:43,500 --> 00:26:45,450
Prawdopodobnie pozwalają na pełnym ekranie
Oznacza to, że użytkownik

577
00:26:45,450 --> 00:26:47,840
można kliknąć przycisk i
właściwie pełny ekran wideo.

578
00:26:47,840 --> 00:26:52,870
Więc jeśli naprawdę chcesz być
Imponujący tu Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
zamiast używać znacznika obrazu, niech
mnie skasować, że zamiast wkleić.

580
00:26:58,490 --> 00:27:00,810
A teraz przeładować.

581
00:27:00,810 --> 00:27:02,500
A teraz znowu to samo.

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

583
00:27:04,979 --> 00:27:06,020
Dobrze, że to wystarczy.

584
00:27:06,020 --> 00:27:08,970
Dobrze więc postaram
trudno nie zrobić ponownie.

585
00:27:08,970 --> 00:27:11,400
Więc co to tylko niektóre z tutejszych dań na wynos?

586
00:27:11,400 --> 00:27:15,130
Więc HTML, brzydka jak tych stron
są, w rzeczywistości jest dość prosta.

587
00:27:15,130 --> 00:27:16,467
To nie jest język programowania.

588
00:27:16,467 --> 00:27:17,550
Nie ma funkcji.

589
00:27:17,550 --> 00:27:18,410
To nie ma pętli.

590
00:27:18,410 --> 00:27:19,535
To nie ma warunków.

591
00:27:19,535 --> 00:27:22,900
Wszystko to ma się dziesiątki
różne znaczniki, z których każda

592
00:27:22,900 --> 00:27:24,620
ma zero lub więcej atrybutów.

593
00:27:24,620 --> 00:27:27,320
A w rzeczywistości, co jest zabawne o
HTML jak zaczniesz nurkować w

594
00:27:27,320 --> 00:27:29,560
jest to, że jest to bardzo własny pojętny.

595
00:27:29,560 --> 00:27:32,880
>> Wszystko co potrzebne jest zrozumienie
ogólnej ramach HTML.

596
00:27:32,880 --> 00:27:36,510
Co to jest tag, co jest atrybutem,
jak można właściwie skonfigurować stronę internetową

597
00:27:36,510 --> 00:27:37,250
w następujący sposób.

598
00:27:37,250 --> 00:27:40,720
I wszystko inne jest naprawdę wynikiem
patrzenia się w odniesieniu internetowych

599
00:27:40,720 --> 00:27:43,080
lub guglanie jak zrobić niektóre
techniki lub jak widzieliśmy,

600
00:27:43,080 --> 00:27:45,371
patrząc na źródło Facebooka
Kod, patrząc na stronie internetowej

601
00:27:45,371 --> 00:27:48,710
że chcesz na to jest kod źródłowy i
zrozumienia, jak tamtejsi deweloperzy

602
00:27:48,710 --> 00:27:50,550
właściwie określone rzeczy.

603
00:27:50,550 --> 00:27:52,180
>> Tak więc możemy zrobić zdjęcia, jak również.

604
00:27:52,180 --> 00:27:53,994
A w rzeczywistości, zrobiliśmy to przed chwilą.

605
00:27:53,994 --> 00:27:55,410
Pozwólcie mi iść do przodu i po prostu pokazać.

606
00:27:55,410 --> 00:27:56,770
Oto niektóre przykładowy kod.

607
00:27:56,770 --> 00:27:58,380
Jeśli kiedykolwiek chcesz zobaczyć Grumpy Cat.

608
00:27:58,380 --> 00:28:00,620
Tak więc zauważyć, że mogę
mają tutaj znacznika obrazu.

609
00:28:00,620 --> 00:28:02,090
A ja mam nad nim komentarza.

610
00:28:02,090 --> 00:28:04,490
Mam alternatywę
tekst dostępności.

611
00:28:04,490 --> 00:28:07,250
Tak więc ktoś, kto jest za pomocą ekranu
Czytelnik z powodu wzroku

612
00:28:07,250 --> 00:28:10,172
rzeczywiście może to mieć swoje
Czytnik ekranu powiedzieć, Grumpy Cat.

613
00:28:10,172 --> 00:28:11,880
Bo jeśli nie mogą
zobaczyć obraz, to

614
00:28:11,880 --> 00:28:14,504
może przynajmniej mają swój komputer
powiedz im ustnie, co to jest.

615
00:28:14,504 --> 00:28:18,020
A źródłem tego pliku jest cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Faktycznie więc, gdybym naprawdę chciał
uzyskać mądry, co mógłbym done--

617
00:28:22,472 --> 00:28:25,680
Nie obiecuję, aby przejść do Rick Astley, więc
Idę do google dla kota zamiast.

618
00:28:25,680 --> 00:28:28,290
A jeśli pójdę do Google Images
tutaj, a my zakładamy,

619
00:28:28,290 --> 00:28:30,040
że jest to obraz mojego kota.

620
00:28:30,040 --> 00:28:35,070
>> Załóżmy, że mam kontrolę kliknął
lub kliknięciu prawym przyciskiem myszy na ten temat, przypadkowo

621
00:28:35,070 --> 00:28:35,630
przerażający.

622
00:28:35,630 --> 00:28:40,320
I cat.jpeg idę
zapisać na pulpicie.

623
00:28:40,320 --> 00:28:44,700
Chciałbym teraz wrócić do Cloud 9.

624
00:28:44,700 --> 00:28:48,150
Zauważ, że tutaj, mogę
przejść do przesyłania plików lokalnych.

625
00:28:48,150 --> 00:28:51,530
A jeśli łapię tego
Plik, cat.jpeg, zawiadomienie

626
00:28:51,530 --> 00:28:54,674
że mogę go przeciągnąć i
upuść go w chmurze 9

627
00:28:54,674 --> 00:28:56,090
i to będzie na mnie krzyczeć tutaj.

628
00:28:56,090 --> 00:28:59,000
>> Bo już mam
wam plik cat.jpeg,

629
00:28:59,000 --> 00:29:01,430
ale to jest bardzo łatwe do
chwycić zdjęcie, które już

630
00:29:01,430 --> 00:29:03,220
zaczerpnięte z Facebook
lub Flickr lub podobne

631
00:29:03,220 --> 00:29:05,678
i faktycznie przeciągnij go i upuść
w chmurze 9, a następnie zrobić to

632
00:29:05,678 --> 00:29:07,970
część osobistego
strona internetowa lub problemem

633
00:29:07,970 --> 00:29:10,442
ustawić siedem lub osiem, jak to już wkrótce.

634
00:29:10,442 --> 00:29:12,150
A potem, kiedy
wreszcie odwiedzić tego kota,

635
00:29:12,150 --> 00:29:16,610
zakładając, ściągnąłem tego samego kota,
Ogłoszenie that-- to było urocze.

636
00:29:16,610 --> 00:29:19,160
>> Co można zobaczyć jest
coś w tym twarzy tutaj.

637
00:29:19,160 --> 00:29:21,810
Więc plików, które
odniesienia w ramach strony internetowej

638
00:29:21,810 --> 00:29:26,050
mogą być lokalne w swoim własnym
konto lub zdalnie na innym serwerze

639
00:29:26,050 --> 00:29:29,670
jak w przypadku Rick
Photo Astley trochę temu.

640
00:29:29,670 --> 00:29:32,990
Więc gdzie else-- co
jeszcze możemy zrobić tutaj?

641
00:29:32,990 --> 00:29:34,890
Warto więc przyjrzeć się poniżej.

642
00:29:34,890 --> 00:29:36,160
Wiesz, co jest swego rodzaju cool?

643
00:29:36,160 --> 00:29:39,330
>> Mamy do tej pory było co
bardzo statyczne strony internetowe.

644
00:29:39,330 --> 00:29:41,830
Chcę urozmaicić rzeczy się w następujący sposób.

645
00:29:41,830 --> 00:29:44,344
Chcę, aby moje własne wyszukiwarki.

646
00:29:44,344 --> 00:29:47,010
Tak aby wyszukiwarki, niech
iść dalej i zacząć robić to.

647
00:29:47,010 --> 00:29:52,570
Mam zamiar iść do przodu i stworzyć
nowy plik o nazwie search.html.

648
00:29:52,570 --> 00:29:54,890
I mamy prefabed wersji on-line.

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

650
00:29:56,027 --> 00:29:57,610
Nie należy wkleić do okna terminala.

651
00:29:57,610 --> 00:29:58,744
Gotowe wersje online.

652
00:29:58,744 --> 00:30:00,160
I mam zamiar rozpocząć w następujący sposób.

653
00:30:00,160 --> 00:30:04,490
Więc oto początek
plik o nazwie search.html.

654
00:30:04,490 --> 00:30:07,510
Mam zamiar zapisać w
dzisiejsza katalog źródłowy.

655
00:30:07,510 --> 00:30:09,079
Mam zamiar zadzwonić w tej kategorii.

656
00:30:09,079 --> 00:30:10,370
Faktycznie, my zrobimy to lepiej.

657
00:30:10,370 --> 00:30:13,600
CS50 Wyszukiwanie i faktycznie zupełnie nie.

658
00:30:13,600 --> 00:30:17,500
A teraz, mam zamiar powiedzieć,
coś H1 CS50 Search.

659
00:30:17,500 --> 00:30:20,930
A potem tu, H2 wkrótce.

660
00:30:20,930 --> 00:30:23,230
I tak zakręcić, H1 i
H2 na myśli to, co odpowiednio?

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

662
00:30:26,750 --> 00:30:30,320
>> Tak, tak, i śmiały, a
nie za duży, ale wciąż śmiały.

663
00:30:30,320 --> 00:30:37,375
Więc jeśli mogę zapisać to i idź tu,
Zobaczmy search.html pliku.

664
00:30:37,375 --> 00:30:42,560
Wszystko w porządku, a ten
jest prawy-- [niesłyszalne].

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

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

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

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

669
00:30:52,610 --> 00:30:54,080
Och, to właśnie tam.

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

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

672
00:30:55,420 --> 00:30:56,660
Więc nie jest to.

673
00:30:56,660 --> 00:30:58,350
Więc wyszukiwarka CS50 wkrótce.

674
00:30:58,350 --> 00:31:00,370
Więc teraz, niech syntezy
co zrobiliśmy w zeszłym tygodniu.

675
00:31:00,370 --> 00:31:03,400
>> W przypadku, gdy rozmawialiśmy o
Mechanika poziomie niższym od HTTP.

676
00:31:03,400 --> 00:31:05,780
I te nowe pomysły
HTML, który jest po prostu

677
00:31:05,780 --> 00:31:08,890
to język znaczników, w którym
powiedzieć przeglądarki dokładnie, co robić

678
00:31:08,890 --> 00:31:10,740
i wdrożyć własną wyszukiwarkę.

679
00:31:10,740 --> 00:31:12,520
Tak więc, zamiast po prostu
mówiąc już wkrótce, jestem

680
00:31:12,520 --> 00:31:14,810
zamierza wprowadzić
coś, co nazywa tag formularz.

681
00:31:14,810 --> 00:31:19,610
I w tej formie, będę
mają coś w polu wprowadzania.

682
00:31:19,610 --> 00:31:22,450
>> A imię tego wejścia
pole, będę go nazywać P.

683
00:31:22,450 --> 00:31:26,240
Oraz rodzaj tym polu
Mam zamiar powiedzieć to po prostu "tekst".

684
00:31:26,240 --> 00:31:29,130
I pole tekstowe, jak będziesz
zobaczyć, to po prostu pole tekstowe.

685
00:31:29,130 --> 00:31:32,830
A więc nie wyczuwam tu mieć
coś wewnątrz niego w tym momencie.

686
00:31:32,830 --> 00:31:35,320
A więc jestem po prostu dzieje
zamknąć tag że

687
00:31:35,320 --> 00:31:38,099
ukośnik w prawo w samym znacznikiem.

688
00:31:38,099 --> 00:31:39,890
A potem mam zamiar
mają jedną inne wejście.

689
00:31:39,890 --> 00:31:43,480
Rodzaj wejścia równa złożyć.

690
00:31:43,480 --> 00:31:45,320
A potem mam zamiar
zamknąć ten też.

691
00:31:45,320 --> 00:31:46,840
>> A teraz mam zamiar wrócić tutaj.

692
00:31:46,840 --> 00:31:49,520
I już widzimy,
choć dość brzydki, mam

693
00:31:49,520 --> 00:31:52,460
ale początki
moja strona tutaj wyszukiwania.

694
00:31:52,460 --> 00:31:55,150
W rzeczywistości, pozwól mi spróbować
to posprzątać trochę.

695
00:31:55,150 --> 00:31:57,330
Okazuje się, że na
Wejście tutaj, mogę mieć

696
00:31:57,330 --> 00:31:59,910
kolejny atrybut zwany zastępczy.

697
00:31:59,910 --> 00:32:05,165
A może coś takiego widzę, słów kluczowych,
a bardziej konkretnie, zapytania o q.

698
00:32:05,165 --> 00:32:07,820
>> I zauważyć, teraz mam
tego rodzaju tekst szary

699
00:32:07,820 --> 00:32:10,440
że znika
szybko, jak rozpocząć pisanie,

700
00:32:10,440 --> 00:32:12,930
ale to chyba coś
widziałem na innych stronach internetowych.

701
00:32:12,930 --> 00:32:14,650
Naprawdę nie lubię przycisk Wyślij.

702
00:32:14,650 --> 00:32:18,320
Więc jestem naprawdę dzieje się dać
Przycisk Prześlij wartość wyszukiwania.

703
00:32:18,320 --> 00:32:21,680
A teraz, jeśli przeładować, zauważysz, że
mój przycisk zostaje nazwany wyszukiwania.

704
00:32:21,680 --> 00:32:24,140
Wiesz, ja naprawdę nie
jak logo here.

705
00:32:24,140 --> 00:32:27,140
Więc Generator Google Font.

706
00:32:27,140 --> 00:32:28,820
>> Chcę, aby urozmaicić ten się dalej.

707
00:32:28,820 --> 00:32:30,660
Więc CS50 wyszukiwania.

708
00:32:30,660 --> 00:32:31,870
Pozwólcie mi tworzyć swoje własne logo.

709
00:32:31,870 --> 00:32:33,080
To ładnie wygląda.

710
00:32:33,080 --> 00:32:36,945
Więc teraz pozwól mi zapisać tego as-- chodź.

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

712
00:32:40,710 --> 00:32:43,120
Gdzie to będzie?

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

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

715
00:32:44,160 --> 00:32:44,980
Przegapić.

716
00:32:44,980 --> 00:32:47,740
Zapisz jako.

717
00:32:47,740 --> 00:32:49,470
Głupi przeglądarki.

718
00:32:49,470 --> 00:32:51,700
Stand by, będziemy
rozwiązać ten problem raz na zawsze.

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

720
00:32:57,650 --> 00:32:58,590
No to jedziemy.

721
00:32:58,590 --> 00:32:59,090
W porządku.

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

723
00:32:59,600 --> 00:33:00,750
Dzień wolny.

724
00:33:00,750 --> 00:33:02,310
Teraz to jest odjazdowe.

725
00:33:02,310 --> 00:33:03,160
Wyjście w trybie pełnoekranowym.

726
00:33:03,160 --> 00:33:04,150
W porządku.

727
00:33:04,150 --> 00:33:06,870
>> Teraz, jak normalna
Osoba, zapisz obraz jako.

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

729
00:33:08,810 --> 00:33:13,194
Teraz mam zamiar iść do CS50IDE i
Mam zamiar po prostu chwycić logo,

730
00:33:13,194 --> 00:33:15,360
Mam zamiar przeciągnąć go do
moje źródło siedem katalog,

731
00:33:15,360 --> 00:33:17,002
plik już istnieje, jestem OK z tym.

732
00:33:17,002 --> 00:33:19,210
Więc mam zamiar go zastąpić
bo ja już go.

733
00:33:19,210 --> 00:33:20,630
A teraz, w jaki sposób pozbyć się tego?

734
00:33:20,630 --> 00:33:24,670
>> Jedźmy przed siebie tu i zrobić
źródło obrazu wynosi logo.gif.

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

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

737
00:33:26,050 --> 00:33:30,560
A teraz, jeśli wrócę do mojego wyszukiwania
Strona, teraz wygląda to całkiem nieźle.

738
00:33:30,560 --> 00:33:33,610
W porządku, więc nie ma
dość zrobić coś pożytecznego.

739
00:33:33,610 --> 00:33:37,000
W rzeczywistości, pozwól mi spróbować wyszukiwania
dla kota i zobaczyć co się dzieje.

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

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

742
00:33:39,420 --> 00:33:41,400
To nie tylko praca, najwyraźniej.

743
00:33:41,400 --> 00:33:43,760
Więc co jest kluczowym elementem
że brakuje tutaj?

744
00:33:43,760 --> 00:33:49,100
>> Racja, nawet jeśli nie wiesz, kodu HTML,
Zacząłem się formę oznakowania telefon

745
00:33:49,100 --> 00:33:54,130
i mówiłem to jak się wejść,
daj mi pole tekstowe i przycisk Prześlij,

746
00:33:54,130 --> 00:33:55,730
co kawałek jest najwyraźniej brakuje?

747
00:33:55,730 --> 00:33:58,975
Załóżmy, że chcemy rzeczywiście dostać
to coś działa poprawnie.

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

749
00:34:02,420 --> 00:34:05,360
Co trzeba zrobić?

750
00:34:05,360 --> 00:34:08,860
Mamy potrzebę realizacji tylny koniec
bazy danych lub sama wyszukiwarka,

751
00:34:08,860 --> 00:34:11,210
i że będzie trwać
dużo czasu, szczerze mówiąc.

752
00:34:11,210 --> 00:34:13,380
>> Więc pamiętaj, co zrobiliśmy ostatni.

753
00:34:13,380 --> 00:34:18,230
Więc jeśli szukasz czegoś w Google
a ty z góry wyłączona,

754
00:34:18,230 --> 00:34:20,355
Przypomnijmy, błyskawiczne wyszukiwanie.

755
00:34:20,355 --> 00:34:22,230
Więc pozwól mi to wyłączyć
tak, że faktycznie

756
00:34:22,230 --> 00:34:26,650
zachowuje się jak starszy przeglądarce szkolnego,
gdybym teraz szukać coś jak koty,

757
00:34:26,650 --> 00:34:28,190
przypomnieć, co URL wygląda.

758
00:34:28,190 --> 00:34:29,449
Jest to dość tajemnicze.

759
00:34:29,449 --> 00:34:33,000
Ale osadzone w nie,
Przypomnijmy, jest wyszukiwarka ukośnik.

760
00:34:33,000 --> 00:34:35,100
Znak zapytania q równa koty.

761
00:34:35,100 --> 00:34:37,760
>> I to wydaje mi dać
cała masa wyników wyszukiwania.

762
00:34:37,760 --> 00:34:39,134
Więc wiesz, co mam zamiar zrobić?

763
00:34:39,134 --> 00:34:41,650
Mam zamiar pożyczyć
Google tylko na minutę.

764
00:34:41,650 --> 00:34:43,670
Mam zamiar iść na
tu i mam zamiar powiedzieć,

765
00:34:43,670 --> 00:34:47,850
że tworzy działań lub
cel, by tak rzec,

766
00:34:47,850 --> 00:34:49,330
powinny być dosłownie Google.

767
00:34:49,330 --> 00:34:52,590
I sposób chciałem
do użytku będzie uzyskać.

768
00:34:52,590 --> 00:34:53,560
>> Więc co jest akcja?

769
00:34:53,560 --> 00:34:55,760
Akcja jest dziwnie nazwany,
ale to tylko oznacza,

770
00:34:55,760 --> 00:34:58,120
kto będzie obsługiwać
działanie tej postaci?

771
00:34:58,120 --> 00:35:00,820
Po kliknięciu Search, gdzie
powinny wynikiem przejść?

772
00:35:00,820 --> 00:35:05,300
I jeśli teraz wrócić do formy
tu i odświeżyć moją stronę internetową

773
00:35:05,300 --> 00:35:09,000
a teraz szukać czegoś
jak pies, zauważysz teraz

774
00:35:09,000 --> 00:35:10,850
Mam ponownie realizowane Google.

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

776
00:35:11,350 --> 00:35:14,141
>> Jeśli chcę, aby szukać czegoś
jeszcze, że działa nie tylko dla psów,

777
00:35:14,141 --> 00:35:16,400
działa również dla kotów.

778
00:35:16,400 --> 00:35:21,930
Działa również na CS50.

779
00:35:21,930 --> 00:35:24,310
I OK, to jest po prostu
pod whelming, prawda?

780
00:35:24,310 --> 00:35:25,920
Wszystko w porządku, ale to naprawdę działa.

781
00:35:25,920 --> 00:35:27,360
Więc co się rzeczywiście dzieje?

782
00:35:27,360 --> 00:35:31,340
Tak Uczyłem przeglądarkę, za pomocą
HTML wziąć dane od użytkownika

783
00:35:31,340 --> 00:35:35,810
i rzeczywiście wysłać to wejście
do zdalnego serwera za pomocą protokołu HTTP.

784
00:35:35,810 --> 00:35:39,120
>> A ponieważ przeglądarce
rozumie, HTTP, to faktycznie

785
00:35:39,120 --> 00:35:43,500
skonstruować URL tak, że co
I w końcu się w przeglądarce,

786
00:35:43,500 --> 00:35:45,660
zauważyć, co się dzieje,
kiedy szukał psa.

787
00:35:45,660 --> 00:35:49,270
Gdybym kliknij przycisk Wyszukaj, zauważysz, że
URL zmienia się, jak zamierzałem

788
00:35:49,270 --> 00:35:52,770
do google.com/search~~V zapytania równa psa.

789
00:35:52,770 --> 00:35:56,020
A to dlatego, że postaci
wie, ponieważ metoda jest uzyskać,

790
00:35:56,020 --> 00:35:59,560
po prostu dołączyć go, że adres URL.

791
00:35:59,560 --> 00:36:01,730
>> Teraz, te strony internetowe są nadal brzydkie.

792
00:36:01,730 --> 00:36:04,890
Warto więc wprowadzić jedna
element składni, jeśli możemy dziś.

793
00:36:04,890 --> 00:36:07,640
I to jest coś, co znane
jak kaskadowych arkuszy stylów.

794
00:36:07,640 --> 00:36:10,720
Więc pozwól mi spojrzeć na
ten przykład tutaj i zobaczyć

795
00:36:10,720 --> 00:36:12,380
czy możemy wywnioskować, co się dzieje.

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

797
00:36:14,520 --> 00:36:16,532
I to jest, gdzie rzeczy
trochę brzydka.

798
00:36:16,532 --> 00:36:18,490
Bo niestety,
w świecie internetu,

799
00:36:18,490 --> 00:36:20,920
HTML nie jest w stanie zrobić wszystko.

800
00:36:20,920 --> 00:36:22,920
I tak, jeśli chcesz
stylizować swoją stronę,

801
00:36:22,920 --> 00:36:28,370
rzeczywiście trzeba skupić się na
estetyka w inny sposób.

802
00:36:28,370 --> 00:36:33,090
Więc, mam ciało mojej sieci
Strona wewnątrz której jest duży div.

803
00:36:33,090 --> 00:36:34,700
A div tylko oznacza podział.

804
00:36:34,700 --> 00:36:38,060
Tak to jest jak ust, ale to
nie mają te same semantykę

805
00:36:38,060 --> 00:36:39,180
akapitu tekstu.

806
00:36:39,180 --> 00:36:40,940
>> Oznacza to tylko do
Przeglądarka, tu

807
00:36:40,940 --> 00:36:45,210
duży prostokątny obszar mojej sieci
Strona, chcę się nią specjalnie.

808
00:36:45,210 --> 00:36:47,420
Teraz, linia 21, gdzie rozpoczyna się, że div.

809
00:36:47,420 --> 00:36:48,770
I tylko zgadywać.

810
00:36:48,770 --> 00:36:53,080
Co to jest efekt linii 21 na
Reszta zawartości strony?

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

812
00:36:55,640 --> 00:36:56,311
Skupiając ją.

813
00:36:56,311 --> 00:36:56,810
To wszystko.

814
00:36:56,810 --> 00:36:58,830
Więc nie widzieliśmy sposób
faktycznie centrowania tekstu.

815
00:36:58,830 --> 00:37:00,996
>> W rzeczywistości, moja wyszukiwarka,
w przeciwieństwie do rzeczywistego Google,

816
00:37:00,996 --> 00:37:03,040
wszystko było uzasadnione na lewo.

817
00:37:03,040 --> 00:37:07,430
A więc teraz w linii 21, mówię, hej
Przeglądarka, stworzyć podział strony.

818
00:37:07,430 --> 00:37:09,450
Po prostu daj mi duży, niewidoczny prostokąt.

819
00:37:09,450 --> 00:37:11,490
To jak chcę
myśleć o stronie internetowej.

820
00:37:11,490 --> 00:37:13,870
A następnie stylizować je w następujący sposób.

821
00:37:13,870 --> 00:37:16,900
Wewnątrz tych cytatów,
teraz, to drugi język

822
00:37:16,900 --> 00:37:19,969
że wprowadzone dziś
Kaskadowe arkusze stylów tzw.

823
00:37:19,969 --> 00:37:22,010
Na szczęście, to też nie jest
język programowania,

824
00:37:22,010 --> 00:37:26,470
więc jest to bardzo ograniczone w swojej składni, ale
bardzo ograniczone w swojej funkcjonalności

825
00:37:26,470 --> 00:37:30,670
podczas gdy HTML jest o
Oznakowanie się dane o stronie internetowej

826
00:37:30,670 --> 00:37:32,130
i struktura strony internetowej.

827
00:37:32,130 --> 00:37:35,320
CSS jest na ogół o
ostatniej mili, estetyka,

828
00:37:35,320 --> 00:37:40,160
coraz rozmiar i kolor i
Umieszczenie dokładnie prawo na stronie internetowej.

829
00:37:40,160 --> 00:37:43,000
I rzeczywiście, to jest tworzony
z par wartości kluczowych.

830
00:37:43,000 --> 00:37:46,290
>> Właściwość jak ten, tekst
wyrównać, dwukropek,

831
00:37:46,290 --> 00:37:49,720
następnie wartości, które
Obiekt, który w tym przypadku jest centrum.

832
00:37:49,720 --> 00:37:51,910
A teraz zauważam
zagnieździć te rzeczy.

833
00:37:51,910 --> 00:37:56,780
Gdybym chciał wszystko, że
Mam podkreślił być skupione,

834
00:37:56,780 --> 00:38:00,270
dlatego mam linię 21 i
odpowiedni wiersz 31.

835
00:38:00,270 --> 00:38:04,820
Ale załóżmy, że teraz chcę powiedzieć Jana
Harvard, zapraszamy na mojej stronie internetowej.

836
00:38:04,820 --> 00:38:06,530
>> Symbolu praw autorskich John Harvard.

837
00:38:06,530 --> 00:38:09,180
I załóżmy, chcę pierwszy
te linie się być dość duży.

838
00:38:09,180 --> 00:38:10,450
36 pikseli.

839
00:38:10,450 --> 00:38:11,530
Więc to jest przyzwoity rozmiar.

840
00:38:11,530 --> 00:38:13,240
A ja chciałem jej ciężar być śmiały.

841
00:38:13,240 --> 00:38:15,450
Ale poniżej,
Chcę mniejszy tekst.

842
00:38:15,450 --> 00:38:19,980
A poniżej, chcę
jeszcze mniejszy tekst.

843
00:38:19,980 --> 00:38:20,480
Przepraszam.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Dziś czuje się jak dzień wolny.

846
00:38:26,940 --> 00:38:29,840
>> Więc teraz, co ja robię to wyrazić?

847
00:38:29,840 --> 00:38:34,580
Tutaj, na linii 22 jest wbudowany
div lub zagnieżdżone div, jeśli będzie.

848
00:38:34,580 --> 00:38:36,190
To też ma swój własny znacznik stylu.

849
00:38:36,190 --> 00:38:38,160
Określić rozmiar czcionki 36.

850
00:38:38,160 --> 00:38:40,460
Określić wagę czcionki pogrubione.

851
00:38:40,460 --> 00:38:43,360
Tu, tylko podać 24 pikseli.

852
00:38:43,360 --> 00:38:45,960
I w końcu, w linii 28, określić 12.

853
00:38:45,960 --> 00:38:49,070
Więc po prostu jako szybki test dla pewności
a jako ludzki odczytu tego

854
00:38:49,070 --> 00:38:52,545
słowa, które na ekranie są
faktycznie będzie pogrubiony?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Które linie są naprawdę śmiały?

857
00:38:58,760 --> 00:38:59,570
>> Tylko John Harvard.

858
00:38:59,570 --> 00:39:00,070
Dobrze?

859
00:39:00,070 --> 00:39:05,940
Bo tak jak linia 22 mówi, hej
Przeglądarka, tu jest podział strony.

860
00:39:05,940 --> 00:39:07,920
Upewnij się, że rozmiar czcionki 36 pkt.

861
00:39:07,920 --> 00:39:09,460
Sprawdź, waga czcionki pogrubione.

862
00:39:09,460 --> 00:39:11,920
Jak najszybciej dotrzeć do
odpowiedni znacznik końcowy

863
00:39:11,920 --> 00:39:15,340
lub zamknięty znacznik na linii 24,
to znaczy, hej przeglądarka,

864
00:39:15,340 --> 00:39:17,640
przestać robić cokolwiek to robisz.

865
00:39:17,640 --> 00:39:21,020
I nota być jasne, choć
Linia 22 ma wszystkie te cechy

866
00:39:21,020 --> 00:39:24,430
jak styl, kiedy
zamknąć znacznik w linii 24,

867
00:39:24,430 --> 00:39:25,940
tylko wspomnieć nazwę znacznika.

868
00:39:25,940 --> 00:39:29,990
>> Nie powtarzać styl słowo lub
wszystko, co jest w środku tych cytatów.

869
00:39:29,990 --> 00:39:32,860
I tak, gdy patrzę na to teraz,
w mojej przeglądarce, rzućmy

870
00:39:32,860 --> 00:39:38,060
Spojrzenie na wynik końcowy. Pozwól mi odejść
naprzód do tego pliku, który jest CSS 0.

871
00:39:38,060 --> 00:39:41,814
I to jeszcze całkiem zwykły,
ale coraz całkiem interesujące.

872
00:39:41,814 --> 00:39:43,980
Ale okazuje się, istnieje
inne rzeczy mogę zrobić tutaj,

873
00:39:43,980 --> 00:39:46,490
a na ryzyko tworzenia
ten całkowicie ohydne,

874
00:39:46,490 --> 00:39:48,630
tutaj odnotować, że w moim
ciało mojej stronie internetowej,

875
00:39:48,630 --> 00:39:53,930
Mogę zrobić coś śmiesznego
jak bg lub koloru tła.

876
00:39:53,930 --> 00:39:56,670
>> I szybkie, jaki jest twój ulubiony kolor?

877
00:39:56,670 --> 00:39:57,720
Zielona słyszałem.

878
00:39:57,720 --> 00:39:58,750
W porządku.

879
00:39:58,750 --> 00:40:02,920
Więc teraz, jeśli przeładować teraz
mamy zieloną stronę.

880
00:40:02,920 --> 00:40:04,710
W porządku, więc nie jest źle.

881
00:40:04,710 --> 00:40:08,350
A teraz, jeśli chcę, aby to naprawdę
super, może sprawić, że kolor mojego tekstu

882
00:40:08,350 --> 00:40:09,360
nawet czerwone.

883
00:40:09,360 --> 00:40:10,870
Zobaczmy więc, jak to wygląda.

884
00:40:10,870 --> 00:40:12,230
Teraz wygląda to całkiem nieźle.

885
00:40:12,230 --> 00:40:15,460
I tutaj, jeśli naprawdę
chcą zadzierać z kimś

886
00:40:15,460 --> 00:40:17,487
lub jeśli chcesz być
jednym z tych ludzi, którzy

887
00:40:17,487 --> 00:40:20,570
próbuje nakłonić użytkownika do odwiedzania stron internetowych
Strona bo już oszukać Google

888
00:40:20,570 --> 00:40:27,610
do myślenia, jest cała masa
od słowa kluczowe like-- zobaczmy, przeładować.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Gdzie poszło?

891
00:40:30,680 --> 00:40:31,530
I tam nas.

892
00:40:31,530 --> 00:40:32,030
W porządku.

893
00:40:32,030 --> 00:40:34,905
Więc mówię to na marginesie, będziemy
mówić o tych rzeczach w ciągu kilku tygodni

894
00:40:34,905 --> 00:40:36,740
kiedy mówimy o
bezpieczeństwa, jeśli rzeczywiście

895
00:40:36,740 --> 00:40:38,852
umieszczać całe pęki
słowa kluczowe na stronie internetowej,

896
00:40:38,852 --> 00:40:41,810
nawet jeśli nie są one widoczne dla
ludzkie, ktoś taki jak Google, oczywiście,

897
00:40:41,810 --> 00:40:43,250
Nadal można rzeczywiście znaleźć tego.

898
00:40:43,250 --> 00:40:45,820
W porządku, więc to dość
ohydne dość szybko.

899
00:40:45,820 --> 00:40:48,420
>> A w rzeczywistości, to nie wszystko
że dużo w przeciwieństwie do mojej własnej sieci

900
00:40:48,420 --> 00:40:51,480
Strona jako student, który
Zacząłem guglanie około znaleźć

901
00:40:51,480 --> 00:40:53,690
poprzednie wersje moich starych stron internetowych.

902
00:40:53,690 --> 00:40:54,500
To było bardzo złe.

903
00:40:54,500 --> 00:40:56,650
W rzeczywistości, ja znaleźć
jeden tuż przed klasą.

904
00:40:56,650 --> 00:40:58,620
Ale jest jeszcze gorzej tam.

905
00:40:58,620 --> 00:41:01,534
To najwyraźniej był mój
strona główna w 1996 roku.

906
00:41:01,534 --> 00:41:04,200
Najwyraźniej myślałem, że to
należy zwrócić ludziom ich nazwy

907
00:41:04,200 --> 00:41:05,991
zanim mogli
rzeczywiście zobaczyć moją stronę internetową.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> A potem pokazał im
coś głupiego, pewnie.

910
00:41:11,920 --> 00:41:13,450
Będę kopać się więcej na następny raz.

911
00:41:13,450 --> 00:41:16,220
Ale teraz, niech
rozważyć trochę projektowania.

912
00:41:16,220 --> 00:41:17,444
Mówiliśmy o stylu.

913
00:41:17,444 --> 00:41:19,735
I ta strona do tej pory i
Najbardziej wszystko pisałem

914
00:41:19,735 --> 00:41:21,890
jest dość czyste stylistycznie.

915
00:41:21,890 --> 00:41:23,320
Ale co z projektu?

916
00:41:23,320 --> 00:41:25,990
Cóż, jest wiele redundancji
w co ja tu robię.

917
00:41:25,990 --> 00:41:28,156
>> Pisałem słowa
Kolor w kilku miejscach.

918
00:41:28,156 --> 00:41:31,630
Pisałem w kilka rozmiar czcionki
miejsca i śmiałe w kilku miejscach.

919
00:41:31,630 --> 00:41:34,870
I zasadniczo, jestem współpracy
mieszając się dwóch języków.

920
00:41:34,870 --> 00:41:38,100
Mam znaczników HTML z moimi i moich
atrybuty, a potem nagle,

921
00:41:38,100 --> 00:41:40,100
cudzysłowie, mam
drugi język dziś

922
00:41:40,100 --> 00:41:43,830
zwany CSS, które znowu, to tylko te
pary wartości kluczowe lub te właściwości

923
00:41:43,830 --> 00:41:45,280
rozdzielone dwukropkiem.

924
00:41:45,280 --> 00:41:47,700
>> Okazuje się, że wiele
podobnie jak w C, gdzie

925
00:41:47,700 --> 00:41:50,550
może rozpocząć czynnik poza
jakiś kod w plikach nagłówkowych,

926
00:41:50,550 --> 00:41:53,520
więc możemy zrobić to samo w HTML.

927
00:41:53,520 --> 00:41:56,030
Oraz krok w kierunku, który jest w sposób następujący.

928
00:41:56,030 --> 00:42:02,230
Zauważ, że ta wersja, CSS1.html jest
Strukturalnie dokładnie tę samą stronę.

929
00:42:02,230 --> 00:42:05,250
Więc ja mam całą masę
z div, ale tym razem, mam

930
00:42:05,250 --> 00:42:07,220
pozbyć opakowaniu
div jak zobaczysz.

931
00:42:07,220 --> 00:42:12,390
>> I dałem te trzy div
górny, środkowy i dolny, unikalne identyfikatory.

932
00:42:12,390 --> 00:42:14,760
To jest miłe, bo przez
dając te podziały

933
00:42:14,760 --> 00:42:18,715
o stronie unikalnych identyfikatorów,
Mogę odwołać je gdzie indziej.

934
00:42:18,715 --> 00:42:19,215
Gdzie?

935
00:42:19,215 --> 00:42:21,070
Cóż, pozwól mi przewijania w górę.

936
00:42:21,070 --> 00:42:24,070
I do tej pory, w każdej chwili możemy Sprawdziliśmy
na czele strony WWW, co jest

937
00:42:24,070 --> 00:42:28,560
tylko tag jakie mieliśmy w
szef strony internetowej?

938
00:42:28,560 --> 00:42:29,740
Trochę głośniej.

939
00:42:29,740 --> 00:42:30,799
Tylko tytuł tej pory.

940
00:42:30,799 --> 00:42:32,590
Ale okazuje się, istnieje
kilka innych rzeczy

941
00:42:32,590 --> 00:42:35,840
można umieścić tam, jeden z
która się nazywa tag styl.

942
00:42:35,840 --> 00:42:37,850
Więc przed chwilą, przyjrzeliśmy
w atrybutu stylu.

943
00:42:37,850 --> 00:42:39,150
Okazuje się, że istnieje tag styl.

944
00:42:39,150 --> 00:42:41,200
Należy wewnątrz
szef strony internetowej.

945
00:42:41,200 --> 00:42:42,840
A teraz zauważyć to, co robię.

946
00:42:42,840 --> 00:42:46,540
Mam wewnątrz tego
tag styl następujące.

947
00:42:46,540 --> 00:42:51,190
Ja dosłownie wspomnieć na linii 20,
nazwa znacznika, że ​​chcę do stylizacji.

948
00:42:51,190 --> 00:42:53,489
>> Potem mam otwarty nawias klamrowy
i zamknięty nawias klamrowy.

949
00:42:53,489 --> 00:42:56,030
Tak więc w duchu podobnym do C, ale
Ponownie, nie jest funkcja

950
00:42:56,030 --> 00:42:57,796
to jest po prostu syntaktyczne szczegółów tutaj.

951
00:42:57,796 --> 00:43:00,170
I wtedy oczywiście, mówię
przeglądarka, hej przeglądarka,

952
00:43:00,170 --> 00:43:05,210
aby całe ciało strony
mają wyrównanie tekstu w centrum.

953
00:43:05,210 --> 00:43:06,930
A potem to mówi, co następuje.

954
00:43:06,930 --> 00:43:12,600
Hej przeglądarka, jeśli widzisz HTML
Element lub tag na stronie, która

955
00:43:12,600 --> 00:43:17,040
ma unikatowy identyfikator góry,
więc symbol krzyżyka tutaj po prostu oznacza,

956
00:43:17,040 --> 00:43:21,010
Unikalny pomysł góry, śmiało
i dokonać jego rozmiar czcionki 36

957
00:43:21,010 --> 00:43:22,490
a jego waga czcionki pogrubione.

958
00:43:22,490 --> 00:43:26,840
>> Hej przeglądarka, element, którego
ID jest w środku, sprawiają, że 24 pikseli.

959
00:43:26,840 --> 00:43:31,070
I hej przeglądarka, jeśli widzisz
Pomysł dole, sprawiają, że 12 pikseli.

960
00:43:31,070 --> 00:43:33,540
Wpływ na koniec
jest dokładnie taki sam.

961
00:43:33,540 --> 00:43:36,500
Jeśli pójdę do CSS 1,
Strona wygląda tak samo.

962
00:43:36,500 --> 00:43:39,810
Ale jesteśmy krok w kierunku
nieco lepsza konstrukcja.

963
00:43:39,810 --> 00:43:44,850
Chciałbym teraz wrócić tutaj, aby CSS2
i zobaczyć, co jeszcze zrobiłem.

964
00:43:44,850 --> 00:43:48,030
>> Teraz strona jest bardzo, bardzo czyste.

965
00:43:48,030 --> 00:43:50,730
W rzeczywistości, mogę zmieścić wszystkie
zawartość na stronie tutaj.

966
00:43:50,730 --> 00:43:54,270
Ale to, co nowy tag ja
wprowadzone, oczywiście?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
I to nie jest najlepsza nazwa dla tagu
bo to nie jest związek, w tym sensie,

969
00:43:57,853 --> 00:44:00,780
że go znamy, ale oznacza to,
link w innym pliku.

970
00:44:00,780 --> 00:44:02,890
To jest trochę jak ostre to w C.

971
00:44:02,890 --> 00:44:06,280
>> To jest sposób, w formacie HTML
powiedzieć hej przeglądarkę,

972
00:44:06,280 --> 00:44:10,240
przejdź się zawartość
plik o nazwie css2.css.

973
00:44:10,240 --> 00:44:12,880
Związek, do mnie,
jest to, że jest to arkusz stylów.

974
00:44:12,880 --> 00:44:17,980
I rzeczywiście, to właśnie jeden z
S w stylów kaskadowych arkuszy pomocą.

975
00:44:17,980 --> 00:44:20,350
Jest to arkusz stylów.

976
00:44:20,350 --> 00:44:23,120
To jest po prostu plikiem tekstowym zawierającym
cała masa nieruchomości.

977
00:44:23,120 --> 00:44:25,940
Jest cała masa stylów
które chcesz zastosować do strony.

978
00:44:25,940 --> 00:44:28,860
>> A więc to najwyraźniej jest
odnosi się do drugiego pliku.

979
00:44:28,860 --> 00:44:32,970
I jeśli mogę otworzyć tego, CSS2.css,
zauważysz, że wszystko zrobiłem

980
00:44:32,970 --> 00:44:35,900
jest skopiować i wkleić wszystkie
to w tym pliku.

981
00:44:35,900 --> 00:44:38,220
A teraz, nawet jeśli nigdy wcześniej nie
przed zakodowane te rzeczy,

982
00:44:38,220 --> 00:44:40,700
po prostu uważają z
Technika przysłowiowy kapelusz

983
00:44:40,700 --> 00:44:44,220
na, Dlaczego jest to
lepsze projektowanie pewnie?

984
00:44:44,220 --> 00:44:48,910
Faktoring się na te właściwości CSS,
wprowadzenie ich do własnego pliku.

985
00:44:48,910 --> 00:44:51,330
Mimo, że rozwiązaliśmy ten
Problem jak pięć minut temu

986
00:44:51,330 --> 00:44:52,600
w pierwszej wersji.

987
00:44:52,600 --> 00:44:55,730
>> Nie Ulepszyliśmy
Strona stylistycznie,

988
00:44:55,730 --> 00:44:57,520
to jest po prostu lepszy
projekt w pewnym sensie.

989
00:44:57,520 --> 00:44:58,990
Czemu myślisz?

990
00:44:58,990 --> 00:45:01,510
Tak.

991
00:45:01,510 --> 00:45:02,260
Bardziej elastyczne, jak?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Tak.

994
00:45:05,540 --> 00:45:07,373
Więc jeśli chcesz iść
do tyłu i zmienić ten stan rzeczy,

995
00:45:07,373 --> 00:45:09,540
Teraz masz jedno miejsce
gdzie można coś zmienić.

996
00:45:09,540 --> 00:45:11,622
I faktycznie, coś
jak problemem ustawić siedem,

997
00:45:11,622 --> 00:45:13,690
gdzie będziemy zaimplementować
Zdjęcie strona handlowym,

998
00:45:13,690 --> 00:45:15,523
że będzie mieć
cała masa stron.

999
00:45:15,523 --> 00:45:17,620
I byłoby naprawdę
irytujące, jeśli zdecydujesz, hm,

1000
00:45:17,620 --> 00:45:21,630
Naprawdę nie lubię 24 pikseli, chcę
że jest 28 pikseli lub nieco większy.

1001
00:45:21,630 --> 00:45:23,550
I wtedy trzeba zrobić
globalnego wyszukiwania i zamiany

1002
00:45:23,550 --> 00:45:27,560
lub otworzyć wszystkie pliki swojej witryny
wystarczy, aby rzeczywiście zmienić jedną wartość.

1003
00:45:27,560 --> 00:45:31,290
Poprzez faktoring z tych stylów
w jednym centralnym miejscu,

1004
00:45:31,290 --> 00:45:34,720
można teraz otworzyć jeden plik tekstowy
w CS50IDE do dowolnego programu,

1005
00:45:34,720 --> 00:45:36,479
zmienić, zapisać je i gotowe.

1006
00:45:36,479 --> 00:45:38,270
Masz propagowane tych
Zmiany wszędzie.

1007
00:45:38,270 --> 00:45:42,450
I że takie same
w pliku dot h, jak również.

1008
00:45:42,450 --> 00:45:46,697
Więc wszelkie pytania w ten sposób
pory na tej składni?

1009
00:45:46,697 --> 00:45:48,530
W porządku, więc mamy
zrobić wszystko, co wydaje się

1010
00:45:48,530 --> 00:45:51,170
z wyjątkiem właściwie wdrożyć hiperłączy.

1011
00:45:51,170 --> 00:45:52,740
I tak idziemy do przodu i to zrobić.

1012
00:45:52,740 --> 00:45:54,830
Pozwólcie mi iść do przodu i
utworzyć nowy plik tutaj.

1013
00:45:54,830 --> 00:45:59,970
Mam zamiar to nazwać
link.html, umieścić w dzisiejszym kodu.

1014
00:45:59,970 --> 00:46:03,000
>> A ja zamierzam zrobić otwarta
Uchwyt typu doc ​​html.

1015
00:46:03,000 --> 00:46:05,970
Tak na marginesie, to rzeczy w
góry, deklaracja typu doc,

1016
00:46:05,970 --> 00:46:08,420
to jest tylko jedno, że to dziwne,
z wykrzyknikiem.

1017
00:46:08,420 --> 00:46:12,100
Po prostu trzeba to zrobić tam i to
Oznacza używamy HTML w wersji 5.

1018
00:46:12,100 --> 00:46:14,460
Starsze wersje
Język miał znacznie dłużej

1019
00:46:14,460 --> 00:46:16,400
struny, które wymagają, aby tam umieścić.

1020
00:46:16,400 --> 00:46:18,620
Więc tutaj jest przykład o nazwie Link.

1021
00:46:18,620 --> 00:46:20,950
>> Potrzebuję ciało mojej stronie tutaj.

1022
00:46:20,950 --> 00:46:29,770
I tutaj, a href równi
powiedzmy HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
i moja ulubiona strona, powiemy.

1024
00:46:35,420 --> 00:46:38,550
W porządku, więc bardzo
nieszkodliwe, Strona przyjazna dla użytkownika.

1025
00:46:38,550 --> 00:46:42,950
Jeśli teraz przejść do mojego katalogu
wymieniając tu i otworzyć link.html,

1026
00:46:42,950 --> 00:46:44,780
mamy tekst hiper.

1027
00:46:44,780 --> 00:46:47,410
>> I rzeczywiście, to jest, gdy
H w HTTP pochodzi.

1028
00:46:47,410 --> 00:46:51,580
Hypertext Transfer Protocol
to jest o przeniesienie tekstu

1029
00:46:51,580 --> 00:46:53,840
że ma hiperłącza do innych zasobów.

1030
00:46:53,840 --> 00:46:58,210
I rzeczywiście, tutaj jest znane,
jeśli retro, niebieski link, który, jeśli kliknięciu,

1031
00:46:58,210 --> 00:47:02,607
rzeczywiście doprowadzić mnie do Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Teraz, Och, to niebawem.

1033
00:47:03,940 --> 00:47:08,970
Dobrze, więc teraz, jakie są
z tego konsekwencji?

1034
00:47:08,970 --> 00:47:11,610
>> I szczerze mówiąc, świat zaczyna
się trochę bardziej zaznajomieni

1035
00:47:11,610 --> 00:47:15,090
a także trochę przerażające
ale także trochę bardziej

1036
00:47:15,090 --> 00:47:17,840
samo się obronić po uruchomieniu
zrozumieć te rzeczy.

1037
00:47:17,840 --> 00:47:21,610
Ponieważ kursy są, niektórzy z was, jeśli go
za pośrednictwem folderu spam Gmail lub nawet

1038
00:47:21,610 --> 00:47:23,990
skrzynka odbiorcza, to prawdopodobnie
zdobyć jakieś wiadomości e-mail

1039
00:47:23,990 --> 00:47:26,980
który jest prośbą, aby zmienić
Hasło może, a może sprawdzić

1040
00:47:26,980 --> 00:47:28,910
poświadczenia PayPal lub cokolwiek.

1041
00:47:28,910 --> 00:47:34,510
>> A w rzeczywistości, to mogło zostać odebrane
coś, co mówi się jak kliknij tutaj

1042
00:47:34,510 --> 00:47:42,260
zresetować hasło PayPal.

1043
00:47:42,260 --> 00:47:44,130
A teraz, zauważy, jeśli
Nie jest to Disney.com

1044
00:47:44,130 --> 00:47:51,600
ale jak badplace.com i
reload, pamiętać, że tekst tutaj

1045
00:47:51,600 --> 00:47:53,710
można powiedzieć czegokolwiek.

1046
00:47:53,710 --> 00:47:55,260
A w rzeczywistości jest to tylko słowa.

1047
00:47:55,260 --> 00:48:04,610
Dlaczego nie mogę być w rzeczywistości bardzo szkodliwy
i powiedzieć http://www.PayPal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Kliknij tutaj zresetować PayPal
hasło i teraz przeładować.

1049
00:48:14,090 --> 00:48:16,220
To wygląda całkiem legalne, prawda?

1050
00:48:16,220 --> 00:48:20,470
To znaczy, ja nie kliknąć
e-mail, który po prostu mówi to.

1051
00:48:20,470 --> 00:48:22,450
Ale zwróć uwagę na dychotomię tutaj.

1052
00:48:22,450 --> 00:48:26,880
Mówi www.paypal.com,
i faktycznie, zaraz,

1053
00:48:26,880 --> 00:48:29,210
Wiemy, że chcesz
S dla bezpieczeństwa.

1054
00:48:29,210 --> 00:48:35,450
Więc teraz, przejdź do www.paypal.com HTTPS,
ale jeśli nie zrobiłeś tego wcześniej,

1055
00:48:35,450 --> 00:48:38,182
rozumiem w zwyczaju
unoszące się nad tutaj niewiele łączy.

1056
00:48:38,182 --> 00:48:39,890
I trudno, aby zobaczyć
tam na ekranie,

1057
00:48:39,890 --> 00:48:41,340
i to nie wszystko, że łatwiej tutaj.

1058
00:48:41,340 --> 00:48:43,615
Ale tu, w dół
malutki mały rogu

1059
00:48:43,615 --> 00:48:45,740
czy przeglądarka rzeczywiście
powiedzieć, że jedziemy

1060
00:48:45,740 --> 00:48:48,850
do badplace.com zamiast Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Teraz, gdy mamy zamiar z tym?

1062
00:48:51,620 --> 00:48:54,859
Wszystkie przykłady zrobiliśmy dzisiaj,
mamy zapisane na stałe i wpisane ręcznie.

1063
00:48:54,859 --> 00:48:56,900
W internecie jest bardzo
nieciekawe, kiedy trudno

1064
00:48:56,900 --> 00:48:59,844
kodowanie stron internetowych, tak aby treści
jest statyczna i nigdy nie zmienia.

1065
00:48:59,844 --> 00:49:01,760
Oczywiście, wszystkie nasze
ulubione strony internetowe, dzisiaj,

1066
00:49:01,760 --> 00:49:04,470
czy to Gmail lub Twitter lub
Facebook lub dowolną liczbę innych

1067
00:49:04,470 --> 00:49:05,290
są dynamiczne.

1068
00:49:05,290 --> 00:49:07,340
Są zmiany w
reakcji na działania użytkownika

1069
00:49:07,340 --> 00:49:08,840
tak jak w wynikach wyszukiwania Google.

1070
00:49:08,840 --> 00:49:12,415
>> I tak w środę, co możemy zrobić, to
zostawiamy HTML i wprowadzenie CSS

1071
00:49:12,415 --> 00:49:14,290
za nami, a my się
za pewnik, że my teraz

1072
00:49:14,290 --> 00:49:16,640
wiedzą i wprowadzamy
nowy język programowania

1073
00:49:16,640 --> 00:49:19,050
nazywa PHP, które lubię
C, ma dać nam

1074
00:49:19,050 --> 00:49:22,450
moc, by tworzyć programy
że sami generować.

1075
00:49:22,450 --> 00:49:25,900
W tym przypadku będziemy używać
PHP do generowania dynamicznie internecie

1076
00:49:25,900 --> 00:49:27,340
stron za pomocą tego nowego języka.

1077
00:49:27,340 --> 00:49:28,989
Więc więcej o tym w środę.

1078
00:49:28,989 --> 00:49:29,530
Do zobaczenia.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [MUZYKI]

1081
00:49:37,380 --> 00:52:38,864