1
00:00:00,000 --> 00:00:01,390

2
00:00:01,390 --> 00:00:04,890
>> [За възпроизвеждане на музика]

3
00:00:04,890 --> 00:00:10,955

4
00:00:10,955 --> 00:00:12,580
DAVID J Malan: Добре, добре дошъл отново.

5
00:00:12,580 --> 00:00:13,600
Това е CS50.

6
00:00:13,600 --> 00:00:15,540
Това е краят на седмицата седем.

7
00:00:15,540 --> 00:00:18,180
И това е края на този чистач
лов от проблем определя четири

8
00:00:18,180 --> 00:00:19,220
че може да се припомни.

9
00:00:19,220 --> 00:00:21,650
След като се възстановява всички
тези JPEG снимки на персонала,

10
00:00:21,650 --> 00:00:24,820
сте се оспорва, ако искате,
да се снимам с най-много

11
00:00:24,820 --> 00:00:25,981
на тези хора, колкото можете.

12
00:00:25,981 --> 00:00:28,480
Имаме цял куп изявления
през последните няколко седмици,

13
00:00:28,480 --> 00:00:32,980
Наистина, доста точно преди обяд
днес, някои от които са тези тук,

14
00:00:32,980 --> 00:00:37,670
уловени тук in-- изглежда like-- Annenberg
Hall в работно време, един тук

15
00:00:37,670 --> 00:00:39,530
в Lowell House с Ник.

16
00:00:39,530 --> 00:00:41,750
Тук е Ramon се хванал на телефона.

17
00:00:41,750 --> 00:00:43,870
Това беше по-CS50 обяд.

18
00:00:43,870 --> 00:00:46,840
Това беше Джейсън Skyping с
по-творчески съученик,

19
00:00:46,840 --> 00:00:48,280
който му се обади по този начин.

20
00:00:48,280 --> 00:00:49,690
Ние не знаем какво е това.

21
00:00:49,690 --> 00:00:51,940
>> [Смях]

22
00:00:51,940 --> 00:00:54,570
>> DAVID J Malan: Но
че си струва да гигабайт.

23
00:00:54,570 --> 00:00:56,960
Ето Чанг, който
буквално избяга от сцената

24
00:00:56,960 --> 00:01:00,480
за да не бъде снимана една
ден, но в крайна сметка беше заловен.

25
00:01:00,480 --> 00:01:02,050
Тук е Ник.

26
00:01:02,050 --> 00:01:03,480
Тук е Ник.

27
00:01:03,480 --> 00:01:04,080
Тук е Ник.

28
00:01:04,080 --> 00:01:05,090

29
00:01:05,090 --> 00:01:07,670
И тук е Алисън по полетата.

30
00:01:07,670 --> 00:01:11,840
И Zamyla дори е намерен
на конкуренцията бални.

31
00:01:11,840 --> 00:01:14,100
Така че ние ще мине през
тези снимки, да разбера

32
00:01:14,100 --> 00:01:16,690
който е представил най-
най-ранната и награда

33
00:01:16,690 --> 00:01:20,662
една страхотна награда, тъй като
обеща в спец.

34
00:01:20,662 --> 00:01:23,120
И ние също ще следи за
пространството, което е участвал.

35
00:01:23,120 --> 00:01:26,860
>> Няколко announcements-- така обяд
е, отново, този петък в 13:15.

36
00:01:26,860 --> 00:01:30,420
Ако искате да се присъедините към нас,
RSVP в този URL тук.

37
00:01:30,420 --> 00:01:33,730
Джейсън се появи отново тук от един
от разделите на няколко години

38
00:01:33,730 --> 00:01:35,510
обратно, което се е случило
да падне на Хелоуин.

39
00:01:35,510 --> 00:01:38,950
И наистина, той облечен като
тиква съответната година.

40
00:01:38,950 --> 00:01:42,700
Ако гледате този раздел
си от 2011 г., раздел

41
00:01:42,700 --> 00:01:46,480
осем, ако сте любопитни,
в CS50.tv, мисля,

42
00:01:46,480 --> 00:01:49,730
това е годината, в която
въздух му помпа работи.

43
00:01:49,730 --> 00:01:52,490
>> Ако вие гледате
подобен раздел през 2012 г.,

44
00:01:52,490 --> 00:01:55,620
вие ще видите това Джейсън много изпразнен
тъй като костюмът вече не функционира,

45
00:01:55,620 --> 00:01:58,060
който е само да се каже
този петък, ако искате

46
00:01:58,060 --> 00:02:02,720
искал да извая тиква с Daven
и Гейб и други, RSVP на главите

47
00:02:02,720 --> 00:02:04,480
в cs50.harvard.edu адрес.

48
00:02:04,480 --> 00:02:06,200
Тя обещава да бъде много забавно.

49
00:02:06,200 --> 00:02:08,660
Daven, ни се казва, има издълбани
тикви през целия си живот.

50
00:02:08,660 --> 00:02:11,930
Gabriel от Бразилия никога не е
издълбана тиква за Хелоуин.

51
00:02:11,930 --> 00:02:14,700
Така че да има с тях, тъй като той се учи.

52
00:02:14,700 --> 00:02:16,830
>> Семинари, meanwhile--
така че вие ​​ще научите скоро

53
00:02:16,830 --> 00:02:20,650
за това, нашите очаквания са за
окончателния проект, който по същество

54
00:02:20,650 --> 00:02:23,150
ще се свеждат до
проектиране и изпълнение

55
00:02:23,150 --> 00:02:26,440
Най-всеки проект от интерес за
вас, макар и подлежи на одобрение

56
00:02:26,440 --> 00:02:28,490
и насоки от учението си колега.

57
00:02:28,490 --> 00:02:32,110
Към края на
семестър, ще се въведе редица

58
00:02:32,110 --> 00:02:35,610
на семинари, които не са задължителни класове
водена от учебни сътрудници и Харвард на

59
00:02:35,610 --> 00:02:38,570
служители, приятели на курса в цяла
колежа, на различни теми, които

60
00:02:38,570 --> 00:02:41,470
са допирателна към
основната учебна програма, разбира се

61
00:02:41,470 --> 00:02:45,590
но въпреки това е приложимо, забавно и
различно за потенциални крайни проекти.

62
00:02:45,590 --> 00:02:49,530
>> Така например, на първо място, ако искате
да се регистрирате, главата на този URL там.

63
00:02:49,530 --> 00:02:53,010
И това е състав за
Само през тази година в семинари.

64
00:02:53,010 --> 00:02:56,060
Но осъзнавам имаме десетки
семинари от минали години, всички от които

65
00:02:56,060 --> 00:02:59,774
са свързани в менюто Семинари
вариант на сайта на курса.

66
00:02:59,774 --> 00:03:02,190
Така че, ако си мислиш за
излиза извън зоната си на комфорт

67
00:03:02,190 --> 00:03:05,060
или бране на някои нови умения,
например, програмиране iPhone

68
00:03:05,060 --> 00:03:08,100
приложения с Swift, нов език
от Apple или Objective-C

69
00:03:08,100 --> 00:03:11,230
или Android приложения или програмиране [? реплика?]
крушки, или към някоя от темите

70
00:03:11,230 --> 00:03:15,490
тук и повече, поради проверка
на страницата за регистрация.

71
00:03:15,490 --> 00:03:19,730
>> Така че ние започнахме и сключено на
Понеделник търсите в HTTP.

72
00:03:19,730 --> 00:03:22,675
Така бързо refresher-- HTTP,
HyperText Transfer Protocol.

73
00:03:22,675 --> 00:03:24,045
Но какво значи това наистина означава?

74
00:03:24,045 --> 00:03:26,805

75
00:03:26,805 --> 00:03:27,930
Какво означава, че наистина означава?

76
00:03:27,930 --> 00:03:30,665

77
00:03:30,665 --> 00:03:31,290
Е, че на ръка?

78
00:03:31,290 --> 00:03:33,074

79
00:03:33,074 --> 00:03:34,740
Знам, че сте просто чесане главата си.

80
00:03:34,740 --> 00:03:36,400
Но вие искате да предложи какво HTTP е?

81
00:03:36,400 --> 00:03:37,792

82
00:03:37,792 --> 00:03:40,576
>> АУДИТОРИЯ: Как компютри
общуват с [недоловим].

83
00:03:40,576 --> 00:03:41,517

84
00:03:41,517 --> 00:03:43,100
DAVID J Malan: Изпуснах последната част.

85
00:03:43,100 --> 00:03:45,774
Как компютрите да комуникират with--

86
00:03:45,774 --> 00:03:47,325
>> АУДИТОРИЯ: интернет сървъри.

87
00:03:47,325 --> 00:03:50,450
DAVID J Malan: Good-- с интернет
сървъри, и по-специално, уеб сървъри.

88
00:03:50,450 --> 00:03:53,533
Тъй като отзоваване, има един куп
услуги в интернет, някои от които

89
00:03:53,533 --> 00:03:57,349
използвате вероятно ежедневно между чат
и съобщение, чат и уеб и имейл,

90
00:03:57,349 --> 00:03:57,890
и други подобни.

91
00:03:57,890 --> 00:04:00,900
И HTTP е само
протокол, уеб браузъри

92
00:04:00,900 --> 00:04:03,750
говори, когато общуват с
уеб сървъри, както и обратното.

93
00:04:03,750 --> 00:04:05,580
И аналог в
човешки свят може да бъде,

94
00:04:05,580 --> 00:04:08,730
Отправям ръката ми, за да се разклаща някои
друг човек и той или тя

95
00:04:08,730 --> 00:04:11,970
признава чрез разширяване
си или ръката си, както добре.

96
00:04:11,970 --> 00:04:13,970
Така че това е просто един протокол,
набор от конвенции.

97
00:04:13,970 --> 00:04:15,630
>> И това, което наистина са тези конвенции?

98
00:04:15,630 --> 00:04:18,640
Е, това просто се свежда до
изпращане на съобщения назад и напред,

99
00:04:18,640 --> 00:04:19,770
както е показано тук.

100
00:04:19,770 --> 00:04:22,520
И има няколко начина, по
които можете да изпращате тези съобщения.

101
00:04:22,520 --> 00:04:24,360
И може би най-
Обща е известен като получите.

102
00:04:24,360 --> 00:04:26,510
И ние ще видим контраст
за това, преди дълго време.

103
00:04:26,510 --> 00:04:30,010
>> Но заявка получите от браузъра
със сървъра просто изглежда по този начин.

104
00:04:30,010 --> 00:04:32,960
Това е един куп текст, който го поставя
вътре на виртуален пакет.

105
00:04:32,960 --> 00:04:35,854
От външната страна на този пакет
отида няколко парчета на информация.

106
00:04:35,854 --> 00:04:37,770
Какво трябва да отиде на
плик, така да се каже,

107
00:04:37,770 --> 00:04:41,820
за да получите искане като
това от мен за уеб сървър?

108
00:04:41,820 --> 00:04:42,320
Да.

109
00:04:42,320 --> 00:04:43,270
>> АУДИТОРИЯ: Вашият IP адрес.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J Malan: My IP адрес
в полето От, така да се каже,

111
00:04:45,890 --> 00:04:49,490
и разбира се,
IP адрес на получателя.

112
00:04:49,490 --> 00:04:52,710
Но в случай на уеб пакет,
ние се нуждаем от малко по-подробно

113
00:04:52,710 --> 00:04:55,254
Това не е достатъчно просто да се
изпрати плик към сървър,

114
00:04:55,254 --> 00:04:57,670
защото този сървър може да бъде
слушане на различни видове

115
00:04:57,670 --> 00:04:59,180
на интернет трафик.

116
00:04:59,180 --> 00:05:01,370
Така че какво друго имаме нужда
освен IP на получателя?

117
00:05:01,370 --> 00:05:02,723

118
00:05:02,723 --> 00:05:03,222
Така ли?

119
00:05:03,222 --> 00:05:04,241
>> АУДИТОРИЯ: Е то TCP?

120
00:05:04,241 --> 00:05:05,074
DAVID J Malan: Добре.

121
00:05:05,074 --> 00:05:06,470
TCP--

122
00:05:06,470 --> 00:05:07,340
>> АУДИТОРИЯ: Адрес.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J Malan: Адрес,
или пристанище, както се нарича.

124
00:05:09,340 --> 00:05:11,010
Близо, но номерът на TCP порт.

125
00:05:11,010 --> 00:05:12,220
И има един куп от тях.

126
00:05:12,220 --> 00:05:14,310
Но със сигурност най-
запознат трябва в крайна сметка

127
00:05:14,310 --> 00:05:17,590
е 80, което е по подразбиране
което се използва за уеб трафик.

128
00:05:17,590 --> 00:05:20,040
И още един познат
един скоро ще бъде 443,

129
00:05:20,040 --> 00:05:24,280
който се използва за сигурен интернет
трафик, URL адреси, които започват с HTTPS.

130
00:05:24,280 --> 00:05:26,650
>> Така че това е, което се случва
вътре в този пакет.

131
00:05:26,650 --> 00:05:29,780
И се получи / просто означава, даде
ми уеб страница по подразбиране.

132
00:05:29,780 --> 00:05:32,700
Дай ми корена на твърдия
шофиране на този уеб сървър.

133
00:05:32,700 --> 00:05:36,050
И се надяваме, че в интернет
сървъра ще отговори с ОК

134
00:05:36,050 --> 00:05:39,630
и броя 200, което е просто
конвенция казва, да, всички

135
00:05:39,630 --> 00:05:40,470
наистина е OK.

136
00:05:40,470 --> 00:05:41,680
Ето страницата.

137
00:05:41,680 --> 00:05:45,510
Видът на уеб страницата ще се
се текст, но по-специално, HTML,

138
00:05:45,510 --> 00:05:47,010
които ние сме на път да се потопите обратно в.

139
00:05:47,010 --> 00:05:49,877
И точка точка точка, просто
средства, тук е HTML.

140
00:05:49,877 --> 00:05:51,710
И това е мястото, където ние
вземете историята днес

141
00:05:51,710 --> 00:05:55,740
всъщност писмено HTML,
HyperText Markup Language, което

142
00:05:55,740 --> 00:05:57,727
е езикът, на който
уеб страници са написани.

143
00:05:57,727 --> 00:05:59,060
Това не е език за програмиране.

144
00:05:59,060 --> 00:06:01,270
Няма по функции
или примки или условия.

145
00:06:01,270 --> 00:06:03,800
Това е език за маркиране,
както и отново виждаме днес,

146
00:06:03,800 --> 00:06:07,240
който ви позволява да определите
как да се структурира и стилизирам

147
00:06:07,240 --> 00:06:09,300
естетически уеб страница.

148
00:06:09,300 --> 00:06:11,470
>> Така че това е един
и само на страницата, което наистина

149
00:06:11,470 --> 00:06:13,930
погледна, ако за кратко в понеделник.

150
00:06:13,930 --> 00:06:16,250
И забележите няколко
характерните особености.

151
00:06:16,250 --> 00:06:20,170
Има много отворен ъгъл
скоба и близо ъглова скоба.

152
00:06:20,170 --> 00:06:23,160
Между тези, ъглова
скоби са думи.

153
00:06:23,160 --> 00:06:25,660
И ние отиваме, за да започнете
призовава тези думи тагове.

154
00:06:25,660 --> 00:06:28,800
Така отворена скоба главата
и затворена скоба главата

155
00:06:28,800 --> 00:06:33,620
са отворени и затворени тагове,
или начални и крайни тагове

156
00:06:33,620 --> 00:06:37,660
съответно, на HTML елемент,
както ще го наричаме, наречена глава.

157
00:06:37,660 --> 00:06:41,760
И прилага същото жаргон
към тялото на HTML и така нататък.

158
00:06:41,760 --> 00:06:43,970
>> И това, което е хубаво е
HTML-- и наистина, ние ще

159
00:06:43,970 --> 00:06:47,187
прекарват ужасно малко време върху него,
защото вие ще най-вече просто разбера

160
00:06:47,187 --> 00:06:49,770
това, което той предлага е, когато
всъщност има конкретен проблем

161
00:06:49,770 --> 00:06:52,820
да solve-- ще откриете, че
браузър е доста тъпо.

162
00:06:52,820 --> 00:06:56,450
Това е просто ще do-- не за разлика от
на computer-- каквото му казвате да прави.

163
00:06:56,450 --> 00:06:59,279
И така, когато имате отворен
скоба HTML най-отгоре

164
00:06:59,279 --> 00:07:01,320
там, че по същество
просто означава, хей, браузър,

165
00:07:01,320 --> 00:07:04,090
тук идва една уеб страница, написани на HTML.

166
00:07:04,090 --> 00:07:06,130
>> Когато го вижда отворена скоба
главата, че просто означава,

167
00:07:06,130 --> 00:07:10,350
хей, браузър, тук идва на главата, или
най-горната част на моята уеб страница.

168
00:07:10,350 --> 00:07:14,192
Когато го вижда затворена скоба
главата, че просто означава, хей,

169
00:07:14,192 --> 00:07:15,150
че става дума за главата.

170
00:07:15,150 --> 00:07:16,420
Готовност за нещо друго.

171
00:07:16,420 --> 00:07:18,878
И това нещо е
очевидно ще бъде на тялото.

172
00:07:18,878 --> 00:07:22,630
И когато не разполагате с маркер, като
имате само здравей, запетая, свят,

173
00:07:22,630 --> 00:07:26,610
това е просто щеше да бъде сурова текст
в крайна сметка се появява на екрана.

174
00:07:26,610 --> 00:07:29,220
>> Сега, вие ще забележите, твърде
вдлъбнатината тук.

175
00:07:29,220 --> 00:07:32,160
Вероятно можете да заключим,
как ние сме го stylizing.

176
00:07:32,160 --> 00:07:34,850
Всеки път, когато отворите маркер,
така да се каже, аз отстъп.

177
00:07:34,850 --> 00:07:38,540
И всеки път, когато затворите
етикет, аз не-тире,

178
00:07:38,540 --> 00:07:40,690
подобни по дух на фигурни скоби.

179
00:07:40,690 --> 00:07:43,470
И след това, аз съм един вид
за използване на моята преценка.

180
00:07:43,470 --> 00:07:48,380
Забележете, че аз не си направих труда да удря
Въведете вътре на това заглавие маркер.

181
00:07:48,380 --> 00:07:48,990
Защо?

182
00:07:48,990 --> 00:07:51,920
Ами, аз просто реших, че изглеждаше
малко по-чисти ми, човекът,

183
00:07:51,920 --> 00:07:53,181
просто не се притеснява да направим това.

184
00:07:53,181 --> 00:07:54,930
Така че, отново, има някои
решение изисква само

185
00:07:54,930 --> 00:07:57,670
като има в C или всеки език.

186
00:07:57,670 --> 00:08:04,110
>> Но забележете също, че ако тази вдлъбнатина
се поддава на мисловен модел,

187
00:08:04,110 --> 00:08:05,670
да не прекалите го усложняват.

188
00:08:05,670 --> 00:08:07,020
Но едно дърво, нали?

189
00:08:07,020 --> 00:08:09,290
Ако мислите, че на уеб
страница, очевидно написана

190
00:08:09,290 --> 00:08:12,050
по този начин, като
добре разчленена по този начин,

191
00:08:12,050 --> 00:08:17,390
Почти можеш да се сетиш на отворения скоба
HTML затворена скоба таг разграничаване

192
00:08:17,390 --> 00:08:21,380
основата на една възлова точка, родословно дърво
стил възел в стила на дърветата

193
00:08:21,380 --> 00:08:22,900
разгледахме миналия петък.

194
00:08:22,900 --> 00:08:27,630
>> И наистина, ние имаме на правото тук
това, което ние ще наричаме DOM, D-O-M, документ

195
00:08:27,630 --> 00:08:31,680
обектен модел, един луксозен начин на казвайки:
едно дърво, което представлява, че HTML.

196
00:08:31,680 --> 00:08:36,140
И забележете, че HTML е, ние ще кажем,
като родословно дърво, с две деца.

197
00:08:36,140 --> 00:08:37,659
В ляво е на главата.

198
00:08:37,659 --> 00:08:39,179
От дясно е тяло.

199
00:08:39,179 --> 00:08:44,220
>> И точно като безсмислено упражнение мисъл,
главата, разбира се, има, колко деца

200
00:08:44,220 --> 00:08:46,070
съгласно тази структура?

201
00:08:46,070 --> 00:08:48,200
Така че, само един, title--
и това е защо ние имаме

202
00:08:48,200 --> 00:08:50,580
стрелката става от главата до титлата.

203
00:08:50,580 --> 00:08:55,110
Така че това е все едно, че човек в
родословно дърво имаше само едно поколение.

204
00:08:55,110 --> 00:08:58,230
И тогава самата титла може
се казва, че имат дете също.

205
00:08:58,230 --> 00:09:01,780
>> Спомнете си, че HTML е имал
Здравейте, запетая, свят под него.

206
00:09:01,780 --> 00:09:06,090
И аз просто го изготвя в рамките на
овална вместо правоъгълник просто

207
00:09:06,090 --> 00:09:10,559
да предадат семантично, че въпреки че
това е един възел в дървото, така да се каже,

208
00:09:10,559 --> 00:09:12,100
Това е нещо коренно различно.

209
00:09:12,100 --> 00:09:12,800
Това не е етикет.

210
00:09:12,800 --> 00:09:14,780
Или по-точно, не е елемент.

211
00:09:14,780 --> 00:09:16,590
Това е просто един текстов възел, ако щете.

212
00:09:16,590 --> 00:09:18,990
Но те са напълно
произволни човешки конвенции.

213
00:09:18,990 --> 00:09:23,180
Това е само сега моят начин на
представляващ какво ще като съвкупност

214
00:09:23,180 --> 00:09:24,340
обадете се на документ.

215
00:09:24,340 --> 00:09:27,750
>> И като настрана, нещо, което най-
супер горния ъгъл лява ръка,

216
00:09:27,750 --> 00:09:32,080
отворена скоба удивителен знак док
тип HTML, това изглежда като маркер,

217
00:09:32,080 --> 00:09:35,560
но това е глупаво случай ъгъл, където
това е само там, копирани и поставили

218
00:09:35,560 --> 00:09:38,460
да се посочат браузъри
това е HTML версия 5.

219
00:09:38,460 --> 00:09:41,540
Светът продължава да се променя това, което на
първа линия на код в страницата трябва да бъде.

220
00:09:41,540 --> 00:09:43,820
Това просто означава, версия 5.

221
00:09:43,820 --> 00:09:45,950
Така че това не съвсем
прилича на останалите.

222
00:09:45,950 --> 00:09:48,120
>> Добре, така че с това
каза, сега ще оцените

223
00:09:48,120 --> 00:09:50,767
това сравнително тази глупава
татуировка някой е получил.

224
00:09:50,767 --> 00:09:51,990
>> [Смях]

225
00:09:51,990 --> 00:09:54,210
>> DAVID J Malan: Добре,
а сега нека действително гмуркане

226
00:09:54,210 --> 00:09:55,710
в това нещо с това.

227
00:09:55,710 --> 00:09:58,610
Ще припомним, че за последен път
Отворих на CS50 Appliance

228
00:09:58,610 --> 00:10:01,650
и аз направих нещо като
просто отваряне на текстовия редактор.

229
00:10:01,650 --> 00:10:05,190
И аз спасих файла дори
ми desktop-- никъде special--

230
00:10:05,190 --> 00:10:05,870
като hello.html.

231
00:10:05,870 --> 00:10:07,100

232
00:10:07,100 --> 00:10:10,984
>> Така че позволете ми да направя това
again-- hello.html Enter.

233
00:10:10,984 --> 00:10:13,900
И сега, в този файл, аз ще
давай напред и да се възпроизведе това, което току-що

234
00:10:13,900 --> 00:10:18,850
saw-- док тип HTML Тогава аз отивам да
направя отворена скоба HTML затворена скоба.

235
00:10:18,850 --> 00:10:21,890
И тогава аз ще изпреварващо
отваряне и затваряне на тага.

236
00:10:21,890 --> 00:10:22,390
Защо?

237
00:10:22,390 --> 00:10:23,598
Точно затова не забравяйте по-късно.

238
00:10:23,598 --> 00:10:26,850
Това е просто добра практика, както и отваряне
и затваряне на фигурни скоби всички наведнъж.

239
00:10:26,850 --> 00:10:28,900
>> И тогава какво ще последва?

240
00:10:28,900 --> 00:10:30,582
Можете да мислите за татуировката.

241
00:10:30,582 --> 00:10:31,450
>> АУДИТОРИЯ: Главата.

242
00:10:31,450 --> 00:10:32,500
>> DAVID J Malan: Главата.

243
00:10:32,500 --> 00:10:36,020
И след това тук, I
имал титлата, мисля.

244
00:10:36,020 --> 00:10:39,886
И заглавието е произволно,
Здравей, свят близо заглавие.

245
00:10:39,886 --> 00:10:42,760
И след това тук, на тялото, на
course-- тогава ние затваряме тялото маркер.

246
00:10:42,760 --> 00:10:45,660
И след това просто малко досадно,
Имах същото нещо тук.

247
00:10:45,660 --> 00:10:47,150
>> Така че аз твърдя, че това е уеб страница.

248
00:10:47,150 --> 00:10:49,050
Това е нещо, което
сега може да живее в интернет,

249
00:10:49,050 --> 00:10:51,925
въпреки че, разбира се, това е буквално
живеещи на компютъра си точно сега.

250
00:10:51,925 --> 00:10:55,837
Но наистина, ако минимизирам Gedit,
Ще видя на моя десктоп неговата икона.

251
00:10:55,837 --> 00:10:58,420
Въпреки че това е уреда
можете да направите това на Mac OS

252
00:10:58,420 --> 00:11:01,580
без TextEdit или
Windows с Notepad дори.

253
00:11:01,580 --> 00:11:06,115
>> И ако отида напред и да кликнете два пъти
че дори и изберете-- добре, нека

254
00:11:06,115 --> 00:11:07,990
Не избирайте това, защото
Chrome не се отваря.

255
00:11:07,990 --> 00:11:09,281
Да вървим напред и да отворите Chrome.

256
00:11:09,281 --> 00:11:10,160

257
00:11:10,160 --> 00:11:14,040
И след това направи Command-O за отворен
И отидете на компютъра си

258
00:11:14,040 --> 00:11:15,320
и да отвори този файл.

259
00:11:15,320 --> 00:11:20,120
Ето как браузър интерпретира
HTML, отгоре до долу, от ляво на дясно.

260
00:11:20,120 --> 00:11:21,314
Хей, тук е браузър HTML.

261
00:11:21,314 --> 00:11:21,980
Ето главата.

262
00:11:21,980 --> 00:11:23,250
Ето титлата.

263
00:11:23,250 --> 00:11:24,090
Ето тялото.

264
00:11:24,090 --> 00:11:26,620
И наистина, това е как
това прави тази уеб страница.

265
00:11:26,620 --> 00:11:27,800
>> Но забележете адреса.

266
00:11:27,800 --> 00:11:32,430
Никой от вас не може да тегли до този специфичен
страница за вашите лаптопи точно сега,

267
00:11:32,430 --> 00:11:34,910
дори вътре си
уред, чрез който URL,

268
00:11:34,910 --> 00:11:40,130
защото файл: // показва, че тя е всъщност
на моя файлова система, моя твърд диск,

269
00:11:40,130 --> 00:11:40,990
не е твоя.

270
00:11:40,990 --> 00:11:42,440
Така че това не е всичко, което полезно.

271
00:11:42,440 --> 00:11:44,940
>> Нека сега се движи към
използване на действителната уеб сървър.

272
00:11:44,940 --> 00:11:48,309
И се оказва, че на CS50 Appliance
е повече от просто една среда, в която

273
00:11:48,309 --> 00:11:51,100
можете да напишете C код и съставяне
и да го ползвате като сте били прави.

274
00:11:51,100 --> 00:11:55,500
Тя също е била конфигурирана от
персонал, който да представлява типичен уеб

275
00:11:55,500 --> 00:11:58,290
сървър, който е на интернет,
един, който може да плати за

276
00:11:58,290 --> 00:12:00,210
или този, който е в така наречената облака.

277
00:12:00,210 --> 00:12:02,600
>> И той се движи
стандарт безплатен отворен код

278
00:12:02,600 --> 00:12:06,160
софтуер, например, нещо
наречена Apache, който е може би

279
00:12:06,160 --> 00:12:08,700
все още е най-популярната интернет
сървърен софтуер в света

280
00:12:08,700 --> 00:12:11,030
че хиляди уеб сайтове използват днес.

281
00:12:11,030 --> 00:12:13,420
И тя също има дори
софтуер като MySQL,

282
00:12:13,420 --> 00:12:16,240
който е на сървъра на базата данни
че ние в крайна сметка ще стигнем до,

283
00:12:16,240 --> 00:12:18,330
който е само да се каже
Мога да започна лечение

284
00:12:18,330 --> 00:12:22,040
ми уред като пълноправен сървър
че аз не плащам за другаде.

285
00:12:22,040 --> 00:12:25,980
Той просто живее на моя собствен лаптоп за
развитие и удобство цели.

286
00:12:25,980 --> 00:12:27,870
>> Така че нека да вървим напред и да
да се възползва от това.

287
00:12:27,870 --> 00:12:30,120
Аз ще отида напред и да
отваряне на прозорец на терминала.

288
00:12:30,120 --> 00:12:33,030
И аз ще отида напред и да
move-- всъщност, първо аз съм

289
00:12:33,030 --> 00:12:34,860
Ще отидете на компютъра си.

290
00:12:34,860 --> 00:12:36,400
Ако го направя ли, има hello.html.

291
00:12:36,400 --> 00:12:37,022

292
00:12:37,022 --> 00:12:38,730
И аз ще отида
напред и да започнете да използвате

293
00:12:38,730 --> 00:12:40,800
нова директория ние сме
не е използван преди днес.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- Отивам да се движат
да ../vhosts за виртуална hosts--

295
00:12:46,840 --> 00:12:50,940
повече за това в future-- и след това
в директория, наречена Localhost,

296
00:12:50,940 --> 00:12:54,420
което е псевдоним дава почти
всеки компютър, независимо дали е Mac, PC,

297
00:12:54,420 --> 00:12:57,560
или Linux компютър, а след това
специално в директория, че ние,

298
00:12:57,560 --> 00:13:01,260
персонала вече е създадена за вас, когато
сте изтеглили уреда, наречен

299
00:13:01,260 --> 00:13:01,760
публично.

300
00:13:01,760 --> 00:13:04,551
И тъй като името му подсказва, нищо
Сложих в тази папка, на теория,

301
00:13:04,551 --> 00:13:07,790
ще бъде сега
публично, поне на хората

302
00:13:07,790 --> 00:13:10,030
които имат пряко
свързване към компютъра ми.

303
00:13:10,030 --> 00:13:13,160
>> Така че сега ме пусна напред и
направя CD към същата директория

304
00:13:13,160 --> 00:13:15,490
за да мога да видя какво е
става и тип LS.

305
00:13:15,490 --> 00:13:17,630
И наистина, това е
Единственото нещо там.

306
00:13:17,630 --> 00:13:23,250
Аз твърдя, че сега, защото сложих този
подаде hello.html вътре в директорията

307
00:13:23,250 --> 00:13:26,940
нарича обществен вътре в директорията
наречен Localhost вътре директория

308
00:13:26,940 --> 00:13:29,810
наречени vhosts, които
благодарение на персонал CS50

309
00:13:29,810 --> 00:13:34,390
е предварително конфигуриран да бъде
корена на вашия уеб сървър,

310
00:13:34,390 --> 00:13:36,900
Сега може да се надяваме да направите това.

311
00:13:36,900 --> 00:13:38,390
>> Отивам да се отвори нов раздел.

312
00:13:38,390 --> 00:13:40,090
И аз ще отида да не се подаде: //.

313
00:13:40,090 --> 00:13:44,520
Отивам да се използва действителната
HTTP / Localhost, което

314
00:13:44,520 --> 00:13:47,470
отново, е псевдоним
за моя собствен сървър.

315
00:13:47,470 --> 00:13:51,085
И тогава аз ще отида с това, което
името на файла, само за да бъде ясно?

316
00:13:51,085 --> 00:13:52,680

317
00:13:52,680 --> 00:13:54,320
Къде е тази история вероятно отиваш?

318
00:13:54,320 --> 00:13:56,066

319
00:13:56,066 --> 00:13:56,565
hello.html.

320
00:13:56,565 --> 00:13:58,350

321
00:13:58,350 --> 00:14:04,270
>> Така че с други думи, искам да сега това
е моя компютър, моя собствен уред,

322
00:14:04,270 --> 00:14:05,660
като че ли е действително сървър.

323
00:14:05,660 --> 00:14:07,490
Неговият псевдоним е Localhost.

324
00:14:07,490 --> 00:14:10,210
Но мисля, че на Localhost както като
Facebook.com google.com, независимо.

325
00:14:10,210 --> 00:14:11,600
Това е просто моята местна име.

326
00:14:11,600 --> 00:14:14,810
И след това на финала, което искам е в
корен на твърдия диск, така да се каже,

327
00:14:14,810 --> 00:14:17,729
или на основата на уеб сървъра,
Ergo наклонената черта и след това

328
00:14:17,729 --> 00:14:18,770
на hello.html името на файла.

329
00:14:18,770 --> 00:14:19,880

330
00:14:19,880 --> 00:14:21,930
>> Позволете ми да намалите и натиснете Enter.

331
00:14:21,930 --> 00:14:24,266
И наистина, сега е моята уеб страница.

332
00:14:24,266 --> 00:14:25,390
Така че това е малко по-различна.

333
00:14:25,390 --> 00:14:26,880
И това е точно както underwhelming.

334
00:14:26,880 --> 00:14:27,904
Това е старата версия.

335
00:14:27,904 --> 00:14:29,070
Позволете ми да се свие на шрифта назад.

336
00:14:29,070 --> 00:14:29,745
Това е най-старата.

337
00:14:29,745 --> 00:14:30,890
Това е новото.

338
00:14:30,890 --> 00:14:35,430
Но това, което е фундаментално случва
сега е, че HTTP се използва.

339
00:14:35,430 --> 00:14:39,344
>> Нека да направим това малко по-ясно или,
ако щете, малко по-сложно.

340
00:14:39,344 --> 00:14:41,760
Позволете ми да отида до долния десен ъгъл
ъгъл на моя уред.

341
00:14:41,760 --> 00:14:44,000
И забележете, че всичко това
време, е имало редица.

342
00:14:44,000 --> 00:14:47,330
Това е уникален адрес
на вашия CS50 техника.

343
00:14:47,330 --> 00:14:50,800
Това е частен адрес,
като подразбиращи се от 172,16,

344
00:14:50,800 --> 00:14:53,860
което просто означава само да ви физически
да получите достъп до този уеб сървър.

345
00:14:53,860 --> 00:14:56,340
Всичко е защитна стена и
добре защитен от останалите

346
00:14:56,340 --> 00:14:58,130
на света поради това адресиране.

347
00:14:58,130 --> 00:15:01,920
>> И сега забележи, макар че ако отида в
този адрес, а не в моя уред,

348
00:15:01,920 --> 00:15:04,340
но в Mac OS-- Отивам
да се върна тук.

349
00:15:04,340 --> 00:15:05,930
Това е моят Mac сега.

350
00:15:05,930 --> 00:15:08,460
И сега аз отивам да се отворят
тази версия на Chrome тук.

351
00:15:08,460 --> 00:15:17,370
И аз ще отида да HTTP: //172.16.25
/ И аз да забравя rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Така че аз отивам да посетите от моя Mac
че IP адрес /hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
И сега виждам от моя Mac
че моята CS50 техника, който е

354
00:15:29,850 --> 00:15:32,600
IP адрес е, че
номер, е наистина държи

355
00:15:32,600 --> 00:15:34,320
като уеб сървър в интернет.

356
00:15:34,320 --> 00:15:36,944
Тя не разполага с хубав лесен за
помня име като Facebook.com,

357
00:15:36,944 --> 00:15:40,370
но това е с помощта на HTTP
Очевидно, въпреки че Chrome

358
00:15:40,370 --> 00:15:43,560
е вид опростяване на света
за нас, но не ни показва HTTP.

359
00:15:43,560 --> 00:15:46,210
Но това наистина е точно това.

360
00:15:46,210 --> 00:15:48,470
Chrome е просто пестене
клавиши тези дни.

361
00:15:48,470 --> 00:15:50,530
И това е, което виждаме сега.

362
00:15:50,530 --> 00:15:51,890
>> Така че всичко е наред и добра.

363
00:15:51,890 --> 00:15:53,740
Но това е доста underwhelming страница.

364
00:15:53,740 --> 00:15:56,230
Позволете ми да отида и да направя нещо
малко по-различно сега.

365
00:15:56,230 --> 00:15:57,910
Така че нека да се върнем към текстовия редактор.

366
00:15:57,910 --> 00:16:00,580
И вместо здравей,
свят, нека да поставим изображение.

367
00:16:00,580 --> 00:16:05,880
И твърди, от before-- ме пусна
в Localhost директорията ми публично.

368
00:16:05,880 --> 00:16:10,580
И нека да вървим напред и да копирате
цял куп файлове от днес

369
00:16:10,580 --> 00:16:15,633
от моя Dropbox папка в тук.

370
00:16:15,633 --> 00:16:19,470

371
00:16:19,470 --> 00:16:21,680
>> Сега, ако ми напишете ли, погледни
на всички тези файлове

372
00:16:21,680 --> 00:16:24,940
че съм разпределен от
уебсайт курс в аванс от днес

373
00:16:24,940 --> 00:16:26,830
една от които е все още hello.html.

374
00:16:26,830 --> 00:16:27,830
Така че там е, че един.

375
00:16:27,830 --> 00:16:30,730
И припомни тази глупава един
от миналата time-- cat.jpg.

376
00:16:30,730 --> 00:16:34,550
Така че нека да се опитаме да вградите
cat.jpg вътре в моята уеб страница.

377
00:16:34,550 --> 00:16:37,690
>> Отивам да вървим напред
и да направим cat.jpg, спаси.

378
00:16:37,690 --> 00:16:38,950
Нека се върнем към Chrome.

379
00:16:38,950 --> 00:16:41,140
И нека да увеличите
шрифта и сега се презареди.

380
00:16:41,140 --> 00:16:43,090

381
00:16:43,090 --> 00:16:45,030
Ами сега, когато го сложа?

382
00:16:45,030 --> 00:16:48,210

383
00:16:48,210 --> 00:16:51,520
Standby-- аз все още имам старите
версия от компютъра си отворен.

384
00:16:51,520 --> 00:16:56,020
Така че позволете ми да отида в моя vhost ми
Localhost, обществения ми и hello.html.

385
00:16:56,020 --> 00:16:57,320

386
00:16:57,320 --> 00:17:00,670
Така че сега ме пусна напред и
казват cat.jpg вътрешността на тялото

387
00:17:00,670 --> 00:17:02,830
мястото, където искам да бъде
Показва и презареди.

388
00:17:02,830 --> 00:17:04,560
Разбира се, това не е вярно.

389
00:17:04,560 --> 00:17:08,050
>> Така че аз трябва да се каже на браузъра малко
по-съзнателно това, което искам да направя.

390
00:17:08,050 --> 00:17:10,210
Просто напишете името е
очевидно не е достатъчно.

391
00:17:10,210 --> 00:17:15,134
Така се припомни, че е имало и друг
етикет, изображение, IMG за кратко.

392
00:17:15,134 --> 00:17:17,550
Това е просто, защото хората
не харесвам тип пълни думи.

393
00:17:17,550 --> 00:17:19,050
И тогава можем да направим източник = "cat.jpg".

394
00:17:19,050 --> 00:17:21,470

395
00:17:21,470 --> 00:17:23,550
>> И сега аз отивам да правя
едно нещо различно тук.

396
00:17:23,550 --> 00:17:25,390
Въпреки че всички
нашите етикети до този момент имат

397
00:17:25,390 --> 00:17:28,086
имал тази идея на
с начален маркер и краен маркер,

398
00:17:28,086 --> 00:17:30,210
че всъщност не правят
чувство за изображение, нали?

399
00:17:30,210 --> 00:17:32,430
Изображението е или има или няма.

400
00:17:32,430 --> 00:17:36,650
И така, хората са дошли
с по-проста конвенция.

401
00:17:36,650 --> 00:17:40,310
Когато имате маркер, който може едновременно
започне и да завърши в една и съща time--

402
00:17:40,310 --> 00:17:43,790
тя може да бъде празен, така че да speak-- просто
постави наклонената черта вътре на маркера

403
00:17:43,790 --> 00:17:44,710
в самия край.

404
00:17:44,710 --> 00:17:45,776

405
00:17:45,776 --> 00:17:47,150
Сега нека се върнем към моя браузър.

406
00:17:47,150 --> 00:17:50,377
Хит Reload дяволите, нещо не е наред.

407
00:17:50,377 --> 00:17:52,460
Вие вероятно сте виждали
от време на време в интернет,

408
00:17:52,460 --> 00:17:53,600
дори ако не е било по твоя вина.

409
00:17:53,600 --> 00:17:54,766
Вината на уеб сървъра.

410
00:17:54,766 --> 00:17:56,240
Какво оди това изглежда да се посочи?

411
00:17:56,240 --> 00:17:57,450

412
00:17:57,450 --> 00:17:58,009
Това е счупен.

413
00:17:58,009 --> 00:17:59,300
Това е мястото, където изображението принадлежи.

414
00:17:59,300 --> 00:17:59,700
Така ли?

415
00:17:59,700 --> 00:18:01,560
>> АУДИТОРИЯ: Но това не е така
имат достъп до изображението.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J Malan: Това не прави
имат достъп до изображението.

417
00:18:03,070 --> 00:18:05,230
Това, или още по-лошо, може би
той дори не съществува.

418
00:18:05,230 --> 00:18:06,729
Да видим дали не можем да диагностицират това.

419
00:18:06,729 --> 00:18:09,390
Спомнете си от миналия път, че ако
в Chrome, в уреда,

420
00:18:09,390 --> 00:18:11,870
или дори на вашия Mac или PC,
отидете в менюто за разработчици

421
00:18:11,870 --> 00:18:14,650
и отидете на Инструменти за разработчици
вариант, който най-вероятно вие сте

422
00:18:14,650 --> 00:18:16,850
не се използва много или някога.

423
00:18:16,850 --> 00:18:20,780
И ако отида в мрежа
и се презарежда страницата,

424
00:18:20,780 --> 00:18:24,110
нека действително изглежда по HTTP
искания, които са били направени.

425
00:18:24,110 --> 00:18:28,400
>> Прилича hello.html е
Наистина OK, следователно 200.

426
00:18:28,400 --> 00:18:30,630
Но cat.jpg е 403.

427
00:18:30,630 --> 00:18:31,650
Така че това не е 404.

428
00:18:31,650 --> 00:18:33,490
Файла вероятно съществува.

429
00:18:33,490 --> 00:18:35,250
403 означава забранено.

430
00:18:35,250 --> 00:18:37,790
Така че това е малко объркващо.

431
00:18:37,790 --> 00:18:42,340
Отивам да се върне
да ми терминален прозорец.

432
00:18:42,340 --> 00:18:43,700
Позволете ми да увеличите до тук.

433
00:18:43,700 --> 00:18:44,750
И позволете ми да направя един LS.

434
00:18:44,750 --> 00:18:46,430
Има същите тези файлове.

435
00:18:46,430 --> 00:18:49,410
>> Сега нека направим LS-л,
които вероятно сте

436
00:18:49,410 --> 00:18:53,350
използва преди да погледнете файла
размери може би или времеви отпечатъци.

437
00:18:53,350 --> 00:18:55,590
И ние виждаме цял куп
преобладаващото информация.

438
00:18:55,590 --> 00:18:57,040
Но забележете няколко подробности.

439
00:18:57,040 --> 00:19:01,660
Ето hello.html в тази
ред тук и тук е cat.jpg.

440
00:19:01,660 --> 00:19:02,934

441
00:19:02,934 --> 00:19:05,850
И това е само на уреда е
удобен за потребителя чрез подчертаване на JPEG

442
00:19:05,850 --> 00:19:07,380
в лилаво по този начин.

443
00:19:07,380 --> 00:19:11,470
Но какво друго се различава до
размера на файла и името на файла?

444
00:19:11,470 --> 00:19:13,438

445
00:19:13,438 --> 00:19:14,754
>> АУДИТОРИЯ: [недоловим].

446
00:19:14,754 --> 00:19:16,920
DAVID J Malan: Да, има
още два R е тук.

447
00:19:16,920 --> 00:19:20,170
Забележете какво hello.html е става.

448
00:19:20,170 --> 00:19:24,050
Така се оказва, че името на
тази директория публично е важно.

449
00:19:24,050 --> 00:19:26,400
Всичко в тази директория
е трябвало да бъде публично.

450
00:19:26,400 --> 00:19:28,790
Но това не е достатъчно
само за да пускате файлове там.

451
00:19:28,790 --> 00:19:31,480
Вие също трябва да се промени
начина на файловете,

452
00:19:31,480 --> 00:19:35,180
промените разрешенията на
файла активно не

453
00:19:35,180 --> 00:19:37,650
е настройката по подразбиране,
което е, че само мога да чета

454
00:19:37,650 --> 00:19:39,220
и да го пиша, аз като собственик.

455
00:19:39,220 --> 00:19:43,540
Искам целия свят, всеки да
да бъде в състояние да прочете досието ми, така да се каже.

456
00:19:43,540 --> 00:19:44,950
Прочетете просто означава да го видите.

457
00:19:44,950 --> 00:19:49,780
>> И наистина, както ще видите в проблем
определя седем, това е какво означават тези R е.

458
00:19:49,780 --> 00:19:53,160
Означават тези две R нека всеки
другаде по света да го прочете,

459
00:19:53,160 --> 00:19:55,300
особено сега,
тя е в тази директория.

460
00:19:55,300 --> 00:19:59,620
Така че най-простият начин да се определи това е да
отидете на моя бързо и направи коригират за промяна

461
00:19:59,620 --> 00:20:05,580
режим и след това направете едно + R, напълно,
всички, всички, както и R за четене,

462
00:20:05,580 --> 00:20:07,944
и след това cat.jpg Enter.

463
00:20:07,944 --> 00:20:10,360
Сякаш нищо не може да се случи, което
обикновено означава нещо добро.

464
00:20:10,360 --> 00:20:13,850
Така че LS-л again-- сега
нека погледнем cat.jpg.

465
00:20:13,850 --> 00:20:15,750
И това разрешение
изглежда да са се променили.

466
00:20:15,750 --> 00:20:18,670
Като настрана, ако направите
грешка и вие, например,

467
00:20:18,670 --> 00:20:23,210
що направи your-- Не know-- есе
публично достъпен от злополука,

468
00:20:23,210 --> 00:20:25,480
можете да направите обратното, CHMOD а-R.

469
00:20:25,480 --> 00:20:25,909

470
00:20:25,909 --> 00:20:28,200
Макар че, честно казано, не би трябвало
да бъде в публичен указател

471
00:20:28,200 --> 00:20:29,760
така или иначе, ако това е грижа.

472
00:20:29,760 --> 00:20:32,475
>> Така че, сега нека се върнем към
браузъра си и презареждане.

473
00:20:32,475 --> 00:20:32,904

474
00:20:32,904 --> 00:20:34,820
И аз отивам да кликнете
малко ловците на духове

475
00:20:34,820 --> 00:20:38,030
символ, за да изчистите тази част от
екран, така можем да видим нови искания.

476
00:20:38,030 --> 00:20:40,630
И наистина, тук е
Сърдитко Cat от преди.

477
00:20:40,630 --> 00:20:43,010
Но по-важното е,
технически, има

478
00:20:43,010 --> 00:20:45,565
броя 200, което
означава, че имам това OK.

479
00:20:45,565 --> 00:20:47,190
Добре, така че всичко е наред и добра.

480
00:20:47,190 --> 00:20:48,940
Но ние не правим
най-доброто от интернет страници,

481
00:20:48,940 --> 00:20:51,967
нито ние ще се опитаме твърде трудно да се
направи луксозните сайтове днес.

482
00:20:51,967 --> 00:20:54,550
Но нека поне да направим нещо
супер запознати преди тракащ

483
00:20:54,550 --> 00:20:56,030
разстояние на няколко други маркери.

484
00:20:56,030 --> 00:20:58,470
Така че предполагам, аз не просто искам котка тук.

485
00:20:58,470 --> 00:21:02,530
Да предположим, че аз всъщност искам това
котка да се свърже с нещо.

486
00:21:02,530 --> 00:21:07,210
>> Бих могъл, например
направи нещо подобно.

487
00:21:07,210 --> 00:21:08,580

488
00:21:08,580 --> 00:21:12,890
а за котва HREF за
хипер препратка equals--

489
00:21:12,890 --> 00:21:17,440
и нека да направим нещо
като www.google.com близо

490
00:21:17,440 --> 00:21:19,540
цитирам близо скоба.

491
00:21:19,540 --> 00:21:22,000
И сега търси за котки.

492
00:21:22,000 --> 00:21:23,520
Close котва маркер.

493
00:21:23,520 --> 00:21:26,760
Така че това е само един вид
на принципно нова подробност.

494
00:21:26,760 --> 00:21:28,190
Маркерът разбира се, е различен.

495
00:21:28,190 --> 00:21:31,770
Това е име на котва
HREF или хипер справка.

496
00:21:31,770 --> 00:21:35,269
>> Но по-важното е, че
този синтактичен елемент тук.

497
00:21:35,269 --> 00:21:37,810
Това е, което ние ще започнем да се обадите
не етикет, но атрибут.

498
00:21:37,810 --> 00:21:40,830
И атрибут е нещо, което
променя поведението на маркер.

499
00:21:40,830 --> 00:21:45,400
И този атрибут, HREF, средства
промяна на поведението на тази котва

500
00:21:45,400 --> 00:21:48,430
така че, когато е кликнал,
той отива при този URL тук.

501
00:21:48,430 --> 00:21:50,330
И разбира се, че URL е Google.

502
00:21:50,330 --> 00:21:53,951
>> В същото време, какво е това
текст Тук щеше да бъде?

503
00:21:53,951 --> 00:21:55,950
Е, това ще бъде
това, което човек всъщност

504
00:21:55,950 --> 00:21:58,470
вижда като подчертаните
връзка, толкова просто като това.

505
00:21:58,470 --> 00:21:59,220
Така че нека се опитаме това.

506
00:21:59,220 --> 00:21:59,980
Нека да го спаси.

507
00:21:59,980 --> 00:22:01,650
Аз съм все още в hello.html.

508
00:22:01,650 --> 00:22:05,360
Но във версиите онлайн, ще видите
действителните имена на файлове ние предварително подготвени.

509
00:22:05,360 --> 00:22:06,805
Нека да вървим напред и да се презареди.

510
00:22:06,805 --> 00:22:08,680
И сега това е много
underwhelming страница все още.

511
00:22:08,680 --> 00:22:10,910
Но ако мишката върху there--
и това е малко по-малък,

512
00:22:10,910 --> 00:22:13,576
but-- можете да видите в дъното
ляв ъгъл на екрана,

513
00:22:13,576 --> 00:22:15,242
това е наистина ще google.com.

514
00:22:15,242 --> 00:22:19,280
И ако щракнете, че тя ще
размахване ми начин на действителното Google.

515
00:22:19,280 --> 00:22:22,610
>> Но забележете тук възможност за
експлоатация, както и настрана.

516
00:22:22,610 --> 00:22:25,150
И ние ще се върнем към други
въпросите на сигурността преди дълго.

517
00:22:25,150 --> 00:22:29,290
Защото там е тази дихотомия
между това къде да отидете и какво да кажа,

518
00:22:29,290 --> 00:22:34,722
бихте могли да направите нещо подобно
this-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, и сега, ако аз се презареди
след като запазите тази страница,

520
00:22:37,134 --> 00:22:38,800
тя изглежда като аз отивам да отиде в Google.

521
00:22:38,800 --> 00:22:40,966
Но няма причина
трябва да отидете на Google, нали?

522
00:22:40,966 --> 00:22:47,460
Всъщност аз да отида в нещо като
badguy.com, презаредите страницата тук.

523
00:22:47,460 --> 00:22:49,750
И известие, тя все още изглежда като Google.

524
00:22:49,750 --> 00:22:52,020
И само ако съм рязък
достатъчно, за да мишката върху тук

525
00:22:52,020 --> 00:22:54,770
виждам, че е дори ще
отида на друго място.

526
00:22:54,770 --> 00:22:57,400
>> Така че, ако някога сте придобили
имейл, особено

527
00:22:57,400 --> 00:22:59,610
един от Paypal, или
Изглежда от Paypal

528
00:22:59,610 --> 00:23:01,830
ви питам, за да влезете в
в профила си, този

529
00:23:01,830 --> 00:23:06,380
Ето защо никога не трябва да
някога кликнете връзки в имейли,

530
00:23:06,380 --> 00:23:07,930
честно казано, всички връзки в имейли.

531
00:23:07,930 --> 00:23:10,380
Ако знаете, че имате действителната
парите в Paypal или банка

532
00:23:10,380 --> 00:23:14,250
на Америка или Fidelity или всеки
уебсайт, ръчно да го въведете вътре.

533
00:23:14,250 --> 00:23:17,530
Тъй като гледам колко лесно е да се
подвежда някого в представянето какво

534
00:23:17,530 --> 00:23:18,526
прилича на връзка.

535
00:23:18,526 --> 00:23:20,400
Но всъщност може
отида абсолютно навсякъде.

536
00:23:20,400 --> 00:23:23,301
>> И там е много по-голяма
заплахи от това.

537
00:23:23,301 --> 00:23:25,300
В действителност, това е малко по-
на допирателната сега, но един

538
00:23:25,300 --> 00:23:28,430
от най-добрите, които съм виждал
който оттогава е затворен,

539
00:23:28,430 --> 00:23:34,060
е някой доведе хора
to-- така че това може да се каже,

540
00:23:34,060 --> 00:23:37,660
кликнете тук, за да влезете в
сметка, банкова сметка.

541
00:23:37,660 --> 00:23:40,985
И това е банка на Запада.

542
00:23:40,985 --> 00:23:43,030

543
00:23:43,030 --> 00:23:44,250
>> Така че някой е купил това.

544
00:23:44,250 --> 00:23:47,090
И това е малко по-лесно да се види
то с шрифт моно разположени увеличени

545
00:23:47,090 --> 00:23:49,190
при един 30-метров проектор.

546
00:23:49,190 --> 00:23:51,720
Но когато става дума за малки шрифта в
имейл, че сте получаване,

547
00:23:51,720 --> 00:23:54,690
това прилича bankofthewest.com,
не bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
които някой е платил $ 10 купи.

549
00:23:58,230 --> 00:24:00,840
И след това да ги доведе до
еквивалент на някои лоши уебсайт.

550
00:24:00,840 --> 00:24:05,540
>> И вие ще видите too-- всъщност можем да направим
this-- ако отида до истинския сайт,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, отново,
изземване от последния път

552
00:24:10,335 --> 00:24:13,210
че ако това е тяхната уеб страница и
сте любопитни за това как тя работи,

553
00:24:13,210 --> 00:24:15,610
вие със сигурност може да отидете
Инструменти за разработчици на Chrome.

554
00:24:15,610 --> 00:24:18,890
И вие можете да видите всички
HTML добре форматиран там.

555
00:24:18,890 --> 00:24:20,890
>> Но по-важно,
можете cam-- нека затворите

556
00:24:20,890 --> 00:24:24,760
this-- можете да отидете в екрана
Developer View Source.

557
00:24:24,760 --> 00:24:25,770

558
00:24:25,770 --> 00:24:28,350
Защо не мога просто да копирате
всичко това И тогава аз

559
00:24:28,350 --> 00:24:31,630
може да отиде в моя малък прозорец Gedit
тук и да направя моя собствена интернет страница.

560
00:24:31,630 --> 00:24:33,210
Запази това в hello.html.

561
00:24:33,210 --> 00:24:36,770
И най-вероятно това ще се счупи,
защото това не е толкова лесно обикновено.

562
00:24:36,770 --> 00:24:41,590
Но сега, ако аз презареди моя собствена страница в
моята собствена CS50 техника и удари презареждане,

563
00:24:41,590 --> 00:24:42,990
ОК, някои неща се счупи.

564
00:24:42,990 --> 00:24:45,750
Но аз съм доста близо до с
моята собствена банкова сайт, нали?

565
00:24:45,750 --> 00:24:46,570
Всичко това HTML--

566
00:24:46,570 --> 00:24:47,370
>> [Смях]

567
00:24:47,370 --> 00:24:49,210
>> DAVID J Malan: --I
не actually-- и

568
00:24:49,210 --> 00:24:52,210
знаят, че има някой там, който
всъщност ще кликнете на тези връзки също.

569
00:24:52,210 --> 00:24:54,864
Затова е ясно, някои неща се счупи.

570
00:24:54,864 --> 00:24:56,780
Но това ще доведе
ни в дискусия,

571
00:24:56,780 --> 00:25:00,810
ненужно точно сега, тъй като това, което
CSS, Cascading Style Sheets, са,

572
00:25:00,810 --> 00:25:03,410
и как в действителност
изтеглите останалите HTML файлове

573
00:25:03,410 --> 00:25:06,140
и JPEG файлове GIF файлове, които
уебсайта може да използвате.

574
00:25:06,140 --> 00:25:07,960
Но всичко това е постижим.

575
00:25:07,960 --> 00:25:11,110
Но тя наистина се свежда до
тези много прости евристики.

576
00:25:11,110 --> 00:25:14,450
>> Така че сега нека просто обезмаслено чрез
няколко други примери на HTML

577
00:25:14,450 --> 00:25:16,680
само за да ви даде усещане
на какво друго можеш да направиш.

578
00:25:16,680 --> 00:25:18,670
Например, това е list.html.

579
00:25:18,670 --> 00:25:23,240
Да предположим, че аз исках да направите уеб страница
със списък на къщи в каре.

580
00:25:23,240 --> 00:25:28,960
I може да се използва тага ул за неподреден
списък и след това детето елемент от списъка

581
00:25:28,960 --> 00:25:33,760
и след това обхождане over-- или списък,
rather-- къщите под въпрос.

582
00:25:33,760 --> 00:25:36,080
>> И ако мога да отворя тази на, нека да направим това.

583
00:25:36,080 --> 00:25:40,670
Да вървим да не hello.html,
но да list.html.

584
00:25:40,670 --> 00:25:42,160
Дявол да го вземе.

585
00:25:42,160 --> 00:25:43,000
Как мога да поправя това?

586
00:25:43,000 --> 00:25:45,679

587
00:25:45,679 --> 00:25:47,220
Това е един и същ въпрос, както и преди, нали?

588
00:25:47,220 --> 00:25:52,510
Така че позволете ми да направя chmod-- oops--
коригират с + R на list.html.

589
00:25:52,510 --> 00:25:54,610

590
00:25:54,610 --> 00:25:59,610
И сега, ако се върна в моя браузър
и кликнете Reload, то е там.

591
00:25:59,610 --> 00:26:02,360
Така че, ако някога сте искали да направите
списък с водещи символи, можете да направите това.

592
00:26:02,360 --> 00:26:06,210
Ако искате да сте в супер луксозен и направи
подреден списък, не неподреден списък,

593
00:26:06,210 --> 00:26:10,170
променят тези за ол, презаредете страницата и
Сега браузърът ще го номер за вас.

594
00:26:10,170 --> 00:26:11,241
>> Какво друго можем да направим?

595
00:26:11,241 --> 00:26:13,990
Е, няколко others-- ако
имаш дълги точки на text--

596
00:26:13,990 --> 00:26:15,698
Например, някои
Латинска текст като this--

597
00:26:15,698 --> 00:26:20,730
и вие го искате в отделни параграфи,
отворен р, в близост р за таг параграф.

598
00:26:20,730 --> 00:26:22,010
И да го направи отново и отново.

599
00:26:22,010 --> 00:26:26,600
И ако сега се отвори този файл,
paragraphs.html, добре, това

600
00:26:26,600 --> 00:26:27,570
става досадно.

601
00:26:27,570 --> 00:26:34,320
Така че сега, нека просто да се върна в моята
бързи, CHMOD на + R R звезда .html--

602
00:26:34,320 --> 00:26:36,099
един хубав малък жокер, така да се каже.

603
00:26:36,099 --> 00:26:37,890
Тя трябва да определи всички
тези проблеми за мен.

604
00:26:37,890 --> 00:26:38,990
Нека да се презареди.

605
00:26:38,990 --> 00:26:40,500
Има три параграфа.

606
00:26:40,500 --> 00:26:42,930
>> А сега да вървим напред
и да се отворят един към друг.

607
00:26:42,930 --> 00:26:44,310
Какво ще кажете за маса?

608
00:26:44,310 --> 00:26:46,440
Ще забележите, трапезни вид
малко по-сложна.

609
00:26:46,440 --> 00:26:49,110
Но това е една и съща idea--
отворен таг, отворен край,

610
00:26:49,110 --> 00:26:51,360
отворена, открита, отворена, в близост маркер, отворете маркер.

611
00:26:51,360 --> 00:26:54,410
И това се случи да престои
маса, чиято граница е очевидно

612
00:26:54,410 --> 00:26:58,500
ще бъде с дебелина 1-- каквото
че means-- табличен ред, маса

613
00:26:58,500 --> 00:27:00,320
данни, което означава клетка.

614
00:27:00,320 --> 00:27:03,840
И ако се върнем към браузъра си
тук и отидете на table.html,

615
00:27:03,840 --> 00:27:05,840
можете да видите нещо
като това отвратително.

616
00:27:05,840 --> 00:27:07,840
Но ние ще стигнем до точката
където можем действително

617
00:27:07,840 --> 00:27:09,260
да направим нещата по-хубава от тази.

618
00:27:09,260 --> 00:27:10,530
>> Така че нека да предвидят за сега.

619
00:27:10,530 --> 00:27:11,870
Има гроздовете на още маркери.

620
00:27:11,870 --> 00:27:15,225
И HTML Чудесно е да вдигнеш
защото, честно казано, всичко, което трябва да направите,

621
00:27:15,225 --> 00:27:17,600
се разгледа съществуващите уеб страници
с които сте запознати.

622
00:27:17,600 --> 00:27:20,340
И вие сте като, о, това е начина,
те направиха това естетически.

623
00:27:20,340 --> 00:27:23,159
>> Или можете да търсите всички онлайн
ресурс за това как работи HTML,

624
00:27:23,159 --> 00:27:25,700
и ще видите, че има
целия речник на други етикети.

625
00:27:25,700 --> 00:27:30,110
Но с прост мисловен модел
не говорим, че почти всеки таг отворите

626
00:27:30,110 --> 00:27:33,620
трябва да бъде затворен, той наистина
е достатъчен, за да научи себе си

627
00:27:33,620 --> 00:27:36,950
HTML след разбере
тези основни идеи на тагове

628
00:27:36,950 --> 00:27:40,520
и атрибути и добре formedness
че сме говорили за,

629
00:27:40,520 --> 00:27:44,697
затваряне на всичко, което бихме могли да отворите
така че да не се обърка браузър.

630
00:27:44,697 --> 00:27:46,780
Затова нека сега да вземе това, за да
по-интересно ниво

631
00:27:46,780 --> 00:27:48,100
като отидете на действителното.

632
00:27:48,100 --> 00:27:51,095
И нека да отидем да ми Mac
тук, за да google.com.

633
00:27:51,095 --> 00:27:52,280

634
00:27:52,280 --> 00:27:54,020
И сега notice-- нека да направим това.

635
00:27:54,020 --> 00:27:57,280
Аз съм Гонг да отидете
Настройки, Настройки за търсене.

636
00:27:57,280 --> 00:28:01,070
Искам да изключите този досаден миг
Резултати от нещо, където той веднага

637
00:28:01,070 --> 00:28:02,450
започва да реагира, за да си пишете.

638
00:28:02,450 --> 00:28:05,300
Нека да направим това по-стари училище, така
ние действително да видим какво се случва.

639
00:28:05,300 --> 00:28:08,260
>> Така че аз отивам да спася
Настройки на Google тук.

640
00:28:08,260 --> 00:28:11,160
И сега notice-- Отивам да
търси за нещо като котки.

641
00:28:11,160 --> 00:28:14,500
И тя все още прави автоматично
пълно тук, но въз основа на нещата

642
00:28:14,500 --> 00:28:15,970
хората са написали в миналото.

643
00:28:15,970 --> 00:28:17,490
Но забележете какво ще се случи.

644
00:28:17,490 --> 00:28:20,272
>> В URL в момента
е това, просто google.com.

645
00:28:20,272 --> 00:28:22,650
И технически, това е черта.

646
00:28:22,650 --> 00:28:25,910
Google е просто пестене характер
и не ни се, че се показват.

647
00:28:25,910 --> 00:28:30,400
Те са ни показва HTTPS, само
да бъде супер успокояващо, че ние сме

648
00:28:30,400 --> 00:28:32,850
по-сигурно или криптирана страница.

649
00:28:32,850 --> 00:28:35,690
>> Така че нека да вървим напред и да търсите за котки.

650
00:28:35,690 --> 00:28:37,670
Сега това стана много
преобладаващото бързо.

651
00:28:37,670 --> 00:28:39,470
Вижте дължината на този URL.

652
00:28:39,470 --> 00:28:43,070
Но се оказва, че повечето от тези неща
в URL адреса всъщност е доста безполезно.

653
00:28:43,070 --> 00:28:45,320
Отивам да започне изтриването
неща, които не разбирам.

654
00:28:45,320 --> 00:28:46,560

655
00:28:46,560 --> 00:28:47,360
Виждам котки.

656
00:28:47,360 --> 00:28:48,470
Разбирам котки.

657
00:28:48,470 --> 00:28:50,380
Аз не знам защо котките са там отново.

658
00:28:50,380 --> 00:28:52,620
Аз наистина не знам
какво тази глупост е.

659
00:28:52,620 --> 00:28:56,030
Така че аз съм просто ще се запази
подчертаване и изтриване неща

660
00:28:56,030 --> 00:28:59,905
че аз не разбирам,
дестилиране на адреса и в точно това.

661
00:28:59,905 --> 00:29:00,920

662
00:29:00,920 --> 00:29:02,270
>> Сега нека да въведете отново.

663
00:29:02,270 --> 00:29:03,814
Тя изглежда като Google продължава да работи.

664
00:29:03,814 --> 00:29:06,980
Така че по някаква причина, те са добавяне на
много неща, които да по подразбиране си URL е.

665
00:29:06,980 --> 00:29:09,000
Но това не е строго необходимо.

666
00:29:09,000 --> 00:29:10,340
Така че това, което е хубаво за това?

667
00:29:10,340 --> 00:29:13,630
Е, нека да вървим напред и да
отвори инспектор на Chrome.

668
00:29:13,630 --> 00:29:15,960
Там е малко по-бърз достъп на мишката за него.

669
00:29:15,960 --> 00:29:17,360
>> Отидете в раздела Network.

670
00:29:17,360 --> 00:29:19,340
А сега нека да се презареди
тази страница още веднъж.

671
00:29:19,340 --> 00:29:20,280
И аз държа Shift.

672
00:29:20,280 --> 00:29:22,520
Като настрана, браузъри
са склонни да кешира или да запишете

673
00:29:22,520 --> 00:29:24,697
информация само заради ефективността си.

674
00:29:24,697 --> 00:29:27,280
Но обикновено, държейки Shift и
презареждане ще накара всичко

675
00:29:27,280 --> 00:29:28,994
да започнем отначало от самото начало.

676
00:29:28,994 --> 00:29:30,410
И това е, което искам да направя тук.

677
00:29:30,410 --> 00:29:33,550
>> И забележи всички тези
редове, които просто се появяват.

678
00:29:33,550 --> 00:29:37,920
Оказва се, че в дадена уеб
страница, може да има само един файл

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- или има
може да е 52, като в този случай.

680
00:29:43,500 --> 00:29:45,820
Когато посетите google.com,
очевидно, моя браузър

681
00:29:45,820 --> 00:29:49,650
започва 52 отделни искания HTTP.

682
00:29:49,650 --> 00:29:50,520
Защо е това?

683
00:29:50,520 --> 00:29:53,380
>> Е, да видим какво има вътре
на тази уеб страница на върха.

684
00:29:53,380 --> 00:29:55,620
Там не е само текст,
но има реални снимки

685
00:29:55,620 --> 00:29:57,130
на котки над надясно.

686
00:29:57,130 --> 00:29:59,110
Има цветен лого тук в ляво.

687
00:29:59,110 --> 00:30:01,750
Има всички тези икони
за микрофон и така нататък.

688
00:30:01,750 --> 00:30:05,130
Има много парчета, изграждане
блокове, скреч парчета, ако щете,

689
00:30:05,130 --> 00:30:06,250
тази уеб страница.

690
00:30:06,250 --> 00:30:10,310
И какво браузъра прави при
получаване на първия файл, който

691
00:30:10,310 --> 00:30:16,180
е този ред тук, тя е по същество
итерации над HTML върха

692
00:30:16,180 --> 00:30:19,880
надолу, отляво надясно, търсейки
неща като графични тагове или други тагове

693
00:30:19,880 --> 00:30:23,160
които се споменават други файлове и
когато той ги вижда, отива и ги извлича

694
00:30:23,160 --> 00:30:26,050
чрез HTTP, жизнеспособна цяло
плик метафора,

695
00:30:26,050 --> 00:30:29,670
и след това ги показва в
подходящо място в уеб страницата.

696
00:30:29,670 --> 00:30:33,370
>> Но забележете тук, ако аз се съсредоточи върху
първите котки хвърлят, търсене,

697
00:30:33,370 --> 00:30:37,090
забележите, че наистина това е с помощта на HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
И за съжаление, Google
Chrome точно сега във версия 39

699
00:30:41,690 --> 00:30:45,110
е вид профанизация нещата и
не ни показва действителните заглавията.

700
00:30:45,110 --> 00:30:49,680
Но това, което наистина е пратил, е искане
не наклонена черта, но / търсене? Q = котки.

701
00:30:49,680 --> 00:30:52,830

702
00:30:52,830 --> 00:30:54,340
>> Сега, защо е важно?

703
00:30:54,340 --> 00:30:57,110
Е, аз отивам да се направи извод,
от това, че ако Google

704
00:30:57,110 --> 00:31:01,520
поддържа запитвания на тази форма, защо
не мога да внедря моя собствен търсене

705
00:31:01,520 --> 00:31:06,420
двигател за CS50, но само отпред
край, просто графичен потребителски интерфейс.

706
00:31:06,420 --> 00:31:09,610
И ние ще изнесат задния край,
реалното търсене води до Google.

707
00:31:09,610 --> 00:31:10,510
>> И така, как мога да направя това?

708
00:31:10,510 --> 00:31:13,820
Е, нека да отидат в Gedit тук.

709
00:31:13,820 --> 00:31:19,180
И нека да вървим напред и да се отвори
до, да речем, на нов файл.

710
00:31:19,180 --> 00:31:22,280
И аз отивам да запазите този
временно като търсене-0.html.

711
00:31:22,280 --> 00:31:25,111

712
00:31:25,111 --> 00:31:27,860
И след това в крайна сметка, ние ще бързо
напред на онова, което предварително подготвени.

713
00:31:27,860 --> 00:31:30,190
>> И аз отивам да
бързо привличам вид док

714
00:31:30,190 --> 00:31:33,840
HTML отворена скоба HTML
близо скоба HTML.

715
00:31:33,840 --> 00:31:38,390
Тогава аз ще направя главата
близо главата отворена заглавие CS50

716
00:31:38,390 --> 00:31:40,150
Търсене вместо търсене Google.

717
00:31:40,150 --> 00:31:43,480
Първа тук Отивам да има
тялото, тук близо тялото.

718
00:31:43,480 --> 00:31:45,835
И сега имам нужда CS50 Search.

719
00:31:45,835 --> 00:31:47,710
И всъщност, нека
изграждане на тази постепенно.

720
00:31:47,710 --> 00:31:51,043
Аз ще отида напред и да затвори тази и
всъщност го сложи в моята публична директория.

721
00:31:51,043 --> 00:31:52,730
Така че, дайте ми само един момент.

722
00:31:52,730 --> 00:31:55,390
търсене-0.html-- Отивам да
временно го наричат ​​search.html.

723
00:31:55,390 --> 00:31:56,600

724
00:31:56,600 --> 00:31:59,750
Отивам да го коригирате с + R search.html.

725
00:31:59,750 --> 00:32:01,072

726
00:32:01,072 --> 00:32:02,280
И сега аз отивам да го отворите.

727
00:32:02,280 --> 00:32:03,224

728
00:32:03,224 --> 00:32:04,390
Добре, така че това беше бързо.

729
00:32:04,390 --> 00:32:06,800
Но целта просто е
за нас да стигнем до точката

730
00:32:06,800 --> 00:32:09,630
да има този текст
файл, наречен search.html.

731
00:32:09,630 --> 00:32:10,940

732
00:32:10,940 --> 00:32:12,790
Така че не е много да погледнете още.

733
00:32:12,790 --> 00:32:16,970
Всъщност, ако отида да ми браузър и
отидете search.html, че е всичко.

734
00:32:16,970 --> 00:32:17,720
Но знаете ли какво?

735
00:32:17,720 --> 00:32:19,000
Аз мога да бъда малко по-сложен.

736
00:32:19,000 --> 00:32:22,710
Четох в една книга, че има
маркер заглавие нарича h1.

737
00:32:22,710 --> 00:32:26,100
И аз ще отида напред и да
използвате, които се отварят и затварят h1 h1.

738
00:32:26,100 --> 00:32:27,220
Презареждане на страницата.

739
00:32:27,220 --> 00:32:29,600
И сега тя е по-голям и по-смели,
не всички, че интересно,

740
00:32:29,600 --> 00:32:32,399
но поне структурно
по-интересно.

741
00:32:32,399 --> 00:32:33,940
Но сега нека представим друг маркер.

742
00:32:33,940 --> 00:32:36,500
Оказва се, че има форма маркер.

743
00:32:36,500 --> 00:32:38,400
И нека да затворите този етикет.

744
00:32:38,400 --> 00:32:40,830
И се оказва, че има
вход маркер, който

745
00:32:40,830 --> 00:32:44,600
има атрибут наречен тип, което
е типа данни на областта,

746
00:32:44,600 --> 00:32:45,200
ако щете.

747
00:32:45,200 --> 00:32:47,050
И ще бъде от тип текст.

748
00:32:47,050 --> 00:32:52,200
И нейната стойност ще
да CS50 Search.

749
00:32:52,200 --> 00:32:53,850
Close маркер.

750
00:32:53,850 --> 00:32:57,100
И там ще бъде не по идея на
отваряне и затваряне с отделни етикети.

751
00:32:57,100 --> 00:33:00,300
>> Позволете ми да се върна тук и
да видим какво се случва, се презареди.

752
00:33:00,300 --> 00:33:01,380
Първи интересно.

753
00:33:01,380 --> 00:33:02,950
Тя изглежда като че ли е текстово поле.

754
00:33:02,950 --> 00:33:04,080

755
00:33:04,080 --> 00:33:06,999
И всъщност, аз не исках
да сложите стойност все още.

756
00:33:06,999 --> 00:33:10,040
Позволете ми да се върна тук и да се получи в действителност
отърви от тази стойност да го прости.

757
00:33:10,040 --> 00:33:12,939
Вместо на стойност, това, което исках
за да се получи това нещо беше едно име.

758
00:33:12,939 --> 00:33:15,230
И аз не знам какво е,
така че аз ще се върна към това.

759
00:33:15,230 --> 00:33:18,270
>> Но под това, което искам
да се направи тип вход = представи.

760
00:33:18,270 --> 00:33:19,840

761
00:33:19,840 --> 00:33:22,120
И тази стойност ще бъде CS50 Search.

762
00:33:22,120 --> 00:33:24,850
И ние ще видим защо
премества стойността на това.

763
00:33:24,850 --> 00:33:28,900
Когато се презареди, аз като че ли сега имаме
началото на моето собствено търсене

764
00:33:28,900 --> 00:33:30,820
двигател, супер отвратителен,
въпреки че, честно казано, това е

765
00:33:30,820 --> 00:33:34,260
не е далеч от това, което хвърляне
Страница по подразбиране Google прилича.

766
00:33:34,260 --> 00:33:37,950
>> Ако отида тук, сега, аз мога да напишете
котки и се надяваме, щракнете върху Търсене.

767
00:33:37,950 --> 00:33:40,380
Но аз не съм съвсем направено още,
защото не са изпълнени,

768
00:33:40,380 --> 00:33:41,045
Очевидно е, че базата данни.

769
00:33:41,045 --> 00:33:42,940
Не съм изпълзял на
Мрежата за резултати от търсене.

770
00:33:42,940 --> 00:33:44,840
Така че аз трябва да се изнесат, че за Google.

771
00:33:44,840 --> 00:33:46,290
И така, как мога да направя това?

772
00:33:46,290 --> 00:33:49,170
>> Ами, на първо място съм
трябва да се добави и действие

773
00:33:49,170 --> 00:33:58,460
приписват на моята форма маркер, който
е http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
И аз знам, че само от това да имат
заключи, като погледнете отблизо

775
00:34:01,180 --> 00:34:02,505
по тяхно URL на.

776
00:34:02,505 --> 00:34:03,380
И сега да предполагам.

777
00:34:03,380 --> 00:34:09,090
Какво трябва този текст поле вероятно
да се нарече, според това, къде стигнахме

778
00:34:09,090 --> 00:34:09,754
от преди?

779
00:34:09,754 --> 00:34:11,896

780
00:34:11,896 --> 00:34:13,290
>> АУДИТОРИЯ: р.

781
00:34:13,290 --> 00:34:14,370
>> DAVID J Malan: р.

782
00:34:14,370 --> 00:34:17,800
И ние всъщност не се нуждаете въпрос
марка се оказва, но Q е наистина,

783
00:34:17,800 --> 00:34:20,489
Q за заявка вероятно от
подразбиране, просто защото това е

784
00:34:20,489 --> 00:34:23,060
какво Лари и Сергей
дойде с преди години.

785
00:34:23,060 --> 00:34:24,739
Така че сега нека презаредите тази страница.

786
00:34:24,739 --> 00:34:26,409
Той не изглежда по-различно.

787
00:34:26,409 --> 00:34:28,120
Но сега гледай какво ще стане.

788
00:34:28,120 --> 00:34:32,360
>> Ако напишете в котки и кликване
CS50 Търсене и да отида,

789
00:34:32,360 --> 00:34:35,770
забележите, че се набързо
разстояние до действителното Google.

790
00:34:35,770 --> 00:34:38,150
Сега, Google е, че е малко
досадно това, че те са

791
00:34:38,150 --> 00:34:41,877
добавяне на допълнителен параметър,
ако щете, на URL.

792
00:34:41,877 --> 00:34:43,960
Това е всичко, което се случва
автоматично на Google страна.

793
00:34:43,960 --> 00:34:48,730
>> Най-важното е, че аз като че ли
да се генерира тази заявка тук.

794
00:34:48,730 --> 00:34:50,179
И наистина, това е, което се случва.

795
00:34:50,179 --> 00:34:53,040
Когато имате HTML че
изглежда така, това

796
00:34:53,040 --> 00:34:57,620
е нещо като уеб разработчици нотация
да се казва, давай напред и да се създаде форма

797
00:34:57,620 --> 00:34:59,990
че когато тя е представена,
това ще отидете на този URL.

798
00:34:59,990 --> 00:35:03,430
И когато на адреса е предоставила
стойности за неща като Q,

799
00:35:03,430 --> 00:35:05,440
не отиват само за този URL.

800
00:35:05,440 --> 00:35:08,210
Всъщност, преминете към въпрос
марка и след това р = котки.

801
00:35:08,210 --> 00:35:09,590

802
00:35:09,590 --> 00:35:13,060
Добавяне на параметър,
HTTP параметър подобно.

803
00:35:13,060 --> 00:35:15,590
>> И само за да бъде супер точни,
какво се заключи here--

804
00:35:15,590 --> 00:35:18,130
но аз ще бъда по-explicit-- е
че методът Искам да използвам

805
00:35:18,130 --> 00:35:22,270
е получи, вместо нещо подобно
пост, който в крайна сметка ще видим.

806
00:35:22,270 --> 00:35:27,710
Така че по-кратко, просто от разбиране
HTML и използване на някои доста прости тагове

807
00:35:27,710 --> 00:35:30,610
Сега можем да започнем да се създаде
нашата собствена пред крайния потребител

808
00:35:30,610 --> 00:35:32,850
интерфейс с търсене
двигател зад него.

809
00:35:32,850 --> 00:35:34,800
>> Но това, разбира се, е доста отвратителен.

810
00:35:34,800 --> 00:35:37,259
Така че нека всъщност отвори
малко по-добър вариант.

811
00:35:37,259 --> 00:35:39,800
Това е тази, която получава в
предварително, че има някои забележки.

812
00:35:39,800 --> 00:35:41,900
Но вие ще видите, че аз
почти я пресъздава.

813
00:35:41,900 --> 00:35:44,150
Така че това вече е достъпен онлайн.

814
00:35:44,150 --> 00:35:48,050
И аз се случи да изпреварващо
отидете на HTTPS само за да го прости.

815
00:35:48,050 --> 00:35:50,610
>> А сега нека да отворим
следващата итерация на това.

816
00:35:50,610 --> 00:35:52,510
Е версия 1 вместо 0.

817
00:35:52,510 --> 00:35:55,315
Какво скача при вас като малко
различен в този пример?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> АУДИТОРИЯ: [недоловим].

820
00:36:00,440 --> 00:36:03,020
>> Да, там е този текст подравняване център.

821
00:36:03,020 --> 00:36:04,590
Това е малко странно тук.

822
00:36:04,590 --> 00:36:06,150
Но това е наистина ново.

823
00:36:06,150 --> 00:36:07,800
И може би предполагам какво ще се случи.

824
00:36:07,800 --> 00:36:11,730
Ако отида с моя браузър сега
и посещение на търсене-1.html,

825
00:36:11,730 --> 00:36:13,090
то е почти едно и също нещо.

826
00:36:13,090 --> 00:36:15,705
Но това е една стъпка по-близо до
е малко по-красива.

827
00:36:15,705 --> 00:36:19,150
Тя все още е грозна, но по-хубава с това, че
поне сега всичко е центрирано.

828
00:36:19,150 --> 00:36:23,470
>> Така се оказва, че това, което аз съм с помощта
е друг език съвсем нарича

829
00:36:23,470 --> 00:36:25,680
CSS, Cascading Style Sheets.

830
00:36:25,680 --> 00:36:28,310
И CSS, честно казано, е един вид
на, по мое лично мнение,

831
00:36:28,310 --> 00:36:29,775
един отвратително проектиран език.

832
00:36:29,775 --> 00:36:33,110
Това е много досадно да се помни,
всички различни подробности.

833
00:36:33,110 --> 00:36:38,479
Но това е, което stylizes на
цялата световна мрежа днес.

834
00:36:38,479 --> 00:36:39,270
Аз обидил някого.

835
00:36:39,270 --> 00:36:39,769
Добре.

836
00:36:39,769 --> 00:36:43,180
Така че нека да се върнем тук и да видим
как ние всъщност използването на този.

837
00:36:43,180 --> 00:36:45,940
И се оказва, че най-малко е
всъщност е доста прост език.

838
00:36:45,940 --> 00:36:49,470
Тя е само на двойки ключови стойности, свойства
и ценности, качества и ценности.

839
00:36:49,470 --> 00:36:52,080
Всъщност, тук е един
такова имущество и стойност.

840
00:36:52,080 --> 00:36:55,890
>> Просто с помощта на стила
атрибут на моя маркер тяло

841
00:36:55,890 --> 00:37:00,360
и придават стойност на
Думата на дебелото черво и друга дума,

842
00:37:00,360 --> 00:37:03,730
или имущество на стойност,
I може да повлияе на естетиката

843
00:37:03,730 --> 00:37:06,210
на уеб страницата, не
непременно още структурата,

844
00:37:06,210 --> 00:37:07,550
но естетиката на него.

845
00:37:07,550 --> 00:37:10,960
И само чрез Googling наоколо, аз осъзнавам,
че CSS, Cascading Style Sheets,

846
00:37:10,960 --> 00:37:14,170
поддържа свойство
текст подравняване, чиято стойност може да

847
00:37:14,170 --> 00:37:16,980
се наляво, надясно, или център, например.

848
00:37:16,980 --> 00:37:19,990
>> Така че сега, когато се презарежда
тази страница, това, което се получи

849
00:37:19,990 --> 00:37:22,730
е центриран страница
но все още е доста грозна.

850
00:37:22,730 --> 00:37:25,770
Да вървим напред и да се отвори
до версия 2 на Search.

851
00:37:25,770 --> 00:37:28,570
И сега забележи съм направил малко повече.

852
00:37:28,570 --> 00:37:33,760
Забележете, че тук вътре в главата
маркер, не може да има повече от заглавието.

853
00:37:33,760 --> 00:37:35,400
В действителност, има етикет стил.

854
00:37:35,400 --> 00:37:38,630
И това е мястото, където тя ще става все по-
малко разхвърлян виждане CSS понякога.

855
00:37:38,630 --> 00:37:41,971
>> Забележете, че аз като че ли да има нещо
че структурно изглежда много по-различно.

856
00:37:41,971 --> 00:37:44,095
Но тук е името на
тага Искам да стилизира.

857
00:37:44,095 --> 00:37:47,570
Тук са нашите стари приятели къдрава
скоби и затворена фигурна скоба.

858
00:37:47,570 --> 00:37:50,290
И след това тук е, че
собственост и нейната стойност.

859
00:37:50,290 --> 00:37:56,300
>> Ако заредите този файл, search2.html,
Крайният резултат е идентичен.

860
00:37:56,300 --> 00:37:59,300
Но това е стъпка към по-добър дизайн.

861
00:37:59,300 --> 00:38:04,560
Чрез факторинг този CSS, аз съм
Не го смесват с моя HTML.

862
00:38:04,560 --> 00:38:07,560
И наистина, както ще видим, можех
повторно използване на тези имоти и ценности.

863
00:38:07,560 --> 00:38:10,420
Ако исках да направя букети
части на моята уеб страница, центрирано,

864
00:38:10,420 --> 00:38:13,630
Не е нужно да въведете стил = текст-приравни
център по цялото място.

865
00:38:13,630 --> 00:38:16,580
Мога да сложа на едно място
Може би искал нагоре към върха.

866
00:38:16,580 --> 00:38:18,210
>> Но дори и това не е най-добрия дизайн.

867
00:38:18,210 --> 00:38:21,720
В действителност, едно от нещата, които ще научите
като прекарвате повече време с

868
00:38:21,720 --> 00:38:25,730
уеб програмиране е, че колкото повече можете
modularize неща и фактор нещата

869
00:38:25,730 --> 00:38:30,610
като .h файлове нека фактор неща навън,
Харесва helpers.c Нека фактор нещата

870
00:38:30,610 --> 00:38:31,880
Преди няколко psets.

871
00:38:31,880 --> 00:38:34,200
Също така, бихме могли да
искаме да постигнем това.

872
00:38:34,200 --> 00:38:37,920
>> Така че забележите версия
три от search.html съм

873
00:38:37,920 --> 00:38:40,610
Пречистихме главата на
страницата и просто сложи

874
00:38:40,610 --> 00:38:43,320
в това, маркер връзка, която
противно на името,

875
00:38:43,320 --> 00:38:44,700
не ви дава хипервръзка.

876
00:38:44,700 --> 00:38:49,150
Тя свързва към друг файл чрез
един HREF чиято стойност в този случай,

877
00:38:49,150 --> 00:38:51,586
е търсачка-3.css

878
00:38:51,586 --> 00:38:52,960
Така че аз осъзнавам, отиваме бързо.

879
00:38:52,960 --> 00:38:54,600
Но всичко, което правя е вид
на движещи се неща наоколо.

880
00:38:54,600 --> 00:38:55,760
Позволете ми да отворя-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Ето го, нищо наистина за него.

883
00:38:58,530 --> 00:39:02,270
Аз просто копират и го поставили в нова
подаде, който много прилича ние фактор неща от

884
00:39:02,270 --> 00:39:03,509
в други файлове преди.

885
00:39:03,509 --> 00:39:05,300
И result--
напълно underwhelming--

886
00:39:05,300 --> 00:39:06,730
ще бъде точно същото.

887
00:39:06,730 --> 00:39:10,490
Но ние се движим toward-- не, това не е така.

888
00:39:10,490 --> 00:39:11,930
О, аз знам защо.

889
00:39:11,930 --> 00:39:13,790
>> Така че тя изглежда да е бъг.

890
00:39:13,790 --> 00:39:15,010
И това е в някакъв смисъл.

891
00:39:15,010 --> 00:39:17,730
Но нека да се отвори ми раздела Network.

892
00:39:17,730 --> 00:39:19,660
Позволете ми да се презарежда страницата.

893
00:39:19,660 --> 00:39:23,315
Ах, защо е СГО не се прилага?

894
00:39:23,315 --> 00:39:26,920
Е, файлът CSS, подобно, има
да бъде свят за четене, така да се каже.

895
00:39:26,920 --> 00:39:28,440
И това също е в момента забранено.

896
00:39:28,440 --> 00:39:33,760
Така че позволете ми да направя CHMOD на + R
на звезда точка, CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
ние сме точка CSS е просто
файлови разширения за CSS файлове.

898
00:39:37,067 --> 00:39:38,900
Сега нека се върнем към
браузъра си и презареждане.

899
00:39:38,900 --> 00:39:40,910
ОК, малко по-добре.

900
00:39:40,910 --> 00:39:42,282
>> Сега нека направим едно последно нещо.

901
00:39:42,282 --> 00:39:42,990
В търсене-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Имам версия, че аз просто си помислих,
е начин охладител, макар и много по-

904
00:39:48,220 --> 00:39:48,980
сложно.

905
00:39:48,980 --> 00:39:50,690
Нека да погледнем в резултат на първо място.

906
00:39:50,690 --> 00:39:52,290
Затворете това да ни даде по-голяма свобода.

907
00:39:52,290 --> 00:39:54,275
Променете това да търсите-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> И сега един куп неща са счупени.

910
00:39:57,200 --> 00:39:59,910
Отивам да се върне
в моята директория тук.

911
00:39:59,910 --> 00:40:04,190
И сега аз съм просто ще направя
а коригират на + R на file--

912
00:40:04,190 --> 00:40:07,450
защото знам, че exists-- нарича
logo.gif, който е образ.

913
00:40:07,450 --> 00:40:08,590
И сега се презареди.

914
00:40:08,590 --> 00:40:11,040
И wow-- така че сега съм
доста близо, честно казано,

915
00:40:11,040 --> 00:40:15,860
харесва версията на Google 1999 г. и
честно казано, на 2014 версия на Google,

916
00:40:15,860 --> 00:40:16,360
нали?

917
00:40:16,360 --> 00:40:21,920
>> Така че това е сега ще си уебсайт,
в крайна сметка, ако търсите за котки.

918
00:40:21,920 --> 00:40:23,900
И наистина е така.

919
00:40:23,900 --> 00:40:26,410
Но това, което съм направил по различен начин
в тази версия 4?

920
00:40:26,410 --> 00:40:28,020
Така че ние няма да се спирам твърде много върху него тук.

921
00:40:28,020 --> 00:40:30,100
Ще видите това в проблем
определя седем в крайна сметка.

922
00:40:30,100 --> 00:40:31,350
Но забележете аз направих няколко неща.

923
00:40:31,350 --> 00:40:33,690
>> I въведе Разделения
маркер, който е подразделение,

924
00:40:33,690 --> 00:40:35,450
подобни по дух към таг параграф.

925
00:40:35,450 --> 00:40:38,220
Но разделението е точно като, ето
правоъгълна невидим регион

926
00:40:38,220 --> 00:40:39,150
на екрана.

927
00:40:39,150 --> 00:40:41,680
Нека да му се даде уникален
идентификатор на долния, просто

928
00:40:41,680 --> 00:40:44,700
така че можем да говорим за
то в нашата HTML другаде.

929
00:40:44,700 --> 00:40:47,952
Тук е още една Разделение на страницата
чиято ID ще бъде съдържание.

930
00:40:47,952 --> 00:40:49,160
Това е съдържанието на страницата.

931
00:40:49,160 --> 00:40:51,090
И тук е заглавната част на страницата.

932
00:40:51,090 --> 00:40:54,960
>> С други думи, аз съм
по същество в HTML съм психически

933
00:40:54,960 --> 00:40:57,700
гледане на тази уеб страница като
три компонента, глава

934
00:40:57,700 --> 00:41:01,200
до тук с тази невидима правоъгълник,
съдържанието в средата, а след това

935
00:41:01,200 --> 00:41:04,800
футъра долу, дори
въпреки че ние не виждаме тези неща.

936
00:41:04,800 --> 00:41:09,940
Защото искам в главата ми на
страница тук, или във файл .css,

937
00:41:09,940 --> 00:41:11,460
Мога да използвам този синтаксис.

938
00:41:11,460 --> 00:41:13,070
>> Header не е маркер.

939
00:41:13,070 --> 00:41:17,060
Това е ID, така се оказва
, че по този #header,

940
00:41:17,060 --> 00:41:20,840
Сега мога да прилага една или повече
свойства на заглавието.

941
00:41:20,840 --> 00:41:24,130
Мога да направя едно и също съдържание,
същото за съдържание тук.

942
00:41:24,130 --> 00:41:27,230
>> Така например, в долния им край, известие
всички тези качества съм добавяне.

943
00:41:27,230 --> 00:41:30,660
И аз знам, че те съществуват само чрез четене
нагоре на документацията за CSS.

944
00:41:30,660 --> 00:41:33,450
Размер на шрифта ще бъде smaller--
така че някои относителен размер на шрифта.

945
00:41:33,450 --> 00:41:34,741
Теглото ще бъде смел.

946
00:41:34,741 --> 00:41:37,340
Margin-- колко пиксела
около it-- е 20 пиксела.

947
00:41:37,340 --> 00:41:38,590
И това ще бъде центриран.

948
00:41:38,590 --> 00:41:40,256
>> Но точно сега, страницата изглежда по този начин.

949
00:41:40,256 --> 00:41:42,840
Ако аз не съм доволен
моето копие точно там,

950
00:41:42,840 --> 00:41:46,560
Бих могъл да направя нещо като цвят червен.

951
00:41:46,560 --> 00:41:50,570
И тогава може да спаси този, презаредите
и сега съм стилизиран футъра.

952
00:41:50,570 --> 00:41:54,130
Така че това е просто намекваше за силата
от това, което можете да направите в страницата

953
00:41:54,130 --> 00:41:55,510
да обърне развоя на мача.

954
00:41:55,510 --> 00:41:59,080
>> И дори по-хладна от това, ако искате
да мушкам наоколо с действителните сайтове,

955
00:41:59,080 --> 00:42:00,810
не можете да постоянно да ги промените.

956
00:42:00,810 --> 00:42:03,640
Но ако се отвори
Отново инспектор на Chrome

957
00:42:03,640 --> 00:42:07,610
и аз не отида на лявата страна
тук, което показва HTML на Facebook,

958
00:42:07,610 --> 00:42:11,380
но показва отдясно
дясната страна на всички свои CSS,

959
00:42:11,380 --> 00:42:13,789
можете или и
промени нещата в движение.

960
00:42:13,789 --> 00:42:15,080
Така че нека да вървим напред и да направи това.

961
00:42:15,080 --> 00:42:18,670
>> Позволете ми да отида напред и контрол
кликнете върху тази случайна дума тук,

962
00:42:18,670 --> 00:42:21,230
подпишат, и щракнете върху Проверка Element.

963
00:42:21,230 --> 00:42:25,130
Chrome много удобно скача
на h1 таг, че Facebook използва.

964
00:42:25,130 --> 00:42:27,290
И забележи тук Facebook
има вид на мързеливо

965
00:42:27,290 --> 00:42:29,960
трудно кодирани размер на шрифта като имот тук.

966
00:42:29,960 --> 00:42:33,530
>> Така готино нещо, обаче, е
че ако наистина отидете тук

967
00:42:33,530 --> 00:42:39,560
и да кажа, о, Facebook, не ми харесва, че
64 пиксела, сега могат да променят Facebook.

968
00:42:39,560 --> 00:42:42,590
Разбира се, ние само го променя
лично за мен в момента.

969
00:42:42,590 --> 00:42:45,150
Но това е просто още един
инструмент в нашия комплект инструменти

970
00:42:45,150 --> 00:42:48,360
това ще ни позволи да се ощипвам
и да разбера, а също и диагностика

971
00:42:48,360 --> 00:42:49,729
проблеми в нашите собствени уеб страници.

972
00:42:49,729 --> 00:42:52,270
И ние, биха могли да отидем
тук, което е едно и също нещо.

973
00:42:52,270 --> 00:42:55,830
Ако наистина искате да получите фантазия, аз
означава, сега наистина може да мутира страницата

974
00:42:55,830 --> 00:42:57,380
и правя луди неща.

975
00:42:57,380 --> 00:42:59,870
>> Така че, защо всичко това е полезно?

976
00:42:59,870 --> 00:43:02,330
Е, в крайна сметка, ние сме
ще искам да бъда

977
00:43:02,330 --> 00:43:07,110
можете да създавате уеб страници, които
са водени от собствените ни задни краища,

978
00:43:07,110 --> 00:43:10,520
не само от Google и
аутсорсинг на задния край има.

979
00:43:10,520 --> 00:43:13,510
Ние всъщност искаме
стойност, например,

980
00:43:13,510 --> 00:43:18,830
на действие нашата търсачката
атрибут да отида не на някой друг,

981
00:43:18,830 --> 00:43:24,270
но до нещо като search.php,
където search.php е на нашия собствен сървър,

982
00:43:24,270 --> 00:43:25,670
не на някой друг.

983
00:43:25,670 --> 00:43:30,316
>> И така, за да стигнете до там, ние всъщност
Трябва да се въведе нов език.

984
00:43:30,316 --> 00:43:33,190
Така че ние вече сме разглеждали един нов
език тук, или две наистина, HTML

985
00:43:33,190 --> 00:43:33,700
и CSS.

986
00:43:33,700 --> 00:43:36,330
Но те наистина са само
структурни и естетически езици.

987
00:43:36,330 --> 00:43:38,360
Те не сте програмиране
езици по себе си.

988
00:43:38,360 --> 00:43:41,160
И това е точно толкова формално
време, тъй като ние ще се харчат за тях.

989
00:43:41,160 --> 00:43:44,910
Защото ние ще започнем сега
да преминете към PHP.

990
00:43:44,910 --> 00:43:48,160
>> Така че PHP е действително
език за програмиране.

991
00:43:48,160 --> 00:43:50,750
Това е скриптов език
в смисъл, че тя е

992
00:43:50,750 --> 00:43:52,855
трябвало да бъде по-малко тегло
от нещо като C.

993
00:43:52,855 --> 00:43:56,082
И това е интерпретиран език,
което означава, че не е съставен.

994
00:43:56,082 --> 00:43:58,790
Така че по-накратко, това, което исках да кажа
когато се използва език, като в

995
00:43:58,790 --> 00:44:00,290
и ние трябваше да го компилирам?

996
00:44:00,290 --> 00:44:02,120
Какво означава да
компилирате C изходния код?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
АУДИТОРИЯ: [недоловим].

999
00:44:04,780 --> 00:44:06,184
DAVID J Malan: Кажи го отново?

1000
00:44:06,184 --> 00:44:07,100
АУДИТОРИЯ: [недоловим].

1001
00:44:07,100 --> 00:44:07,962

1002
00:44:07,962 --> 00:44:08,920
DAVID J Malan: Perfect.

1003
00:44:08,920 --> 00:44:10,180
Това го превръща в двоичен.

1004
00:44:10,180 --> 00:44:14,200
Това го превръща в нули и единици
от действителната английски като изходен код.

1005
00:44:14,200 --> 00:44:16,424
И тогава можем действително
тичам тези нули и единици

1006
00:44:16,424 --> 00:44:18,840
от тях, преминаващи през
CPU чрез двукратно щракване на икона

1007
00:44:18,840 --> 00:44:19,980
или изпълняване на командата.

1008
00:44:19,980 --> 00:44:23,770
>> PHP и Python и Ruby
и Perl и JavaScript

1009
00:44:23,770 --> 00:44:26,250
и букети от друга
се тълкуват езици

1010
00:44:26,250 --> 00:44:29,290
езици, което е да се каже,
не ги компилирате.

1011
00:44:29,290 --> 00:44:34,220
Вместо това, можете да ги хранят като вход за
програма, наречена интерпретатор.

1012
00:44:34,220 --> 00:44:36,640
И това преводач,
които някой друг е написал,

1013
00:44:36,640 --> 00:44:40,930
чете изходния си код горе до долу,
от ляво на дясно и само интерпретира

1014
00:44:40,930 --> 00:44:43,000
тези линии и прави това, което казвате.

1015
00:44:43,000 --> 00:44:45,360
>> Така че, ако се натъкнете на
линия, която казва, печат,

1016
00:44:45,360 --> 00:44:48,660
то не е задължително да конвертирате печат
към съответните нули и единици.

1017
00:44:48,660 --> 00:44:51,910
Тя просто има тази преводач като
голям, ако условие, че се казва,

1018
00:44:51,910 --> 00:44:56,110
ако инструкция програмист е
печат, а след това направете следното.

1019
00:44:56,110 --> 00:44:58,170
Така че го интерпретира само
по вид на разсъждение

1020
00:44:58,170 --> 00:44:59,800
чрез това, което той казва да правя.

1021
00:44:59,800 --> 00:45:01,320
>> И PHP е един от тези езици.

1022
00:45:01,320 --> 00:45:05,310
И преди PHP години е проектиран
Именно за уеб програмиране.

1023
00:45:05,310 --> 00:45:08,160
И това беше първоначално
много помия разхвърлян език.

1024
00:45:08,160 --> 00:45:10,940
И наистина, има огромен
сумата на лошите PHP код там.

1025
00:45:10,940 --> 00:45:13,520
Но самият език
е зряло в течение на годините,

1026
00:45:13,520 --> 00:45:16,200
толкова много, така, че сега това е
всъщност е прекрасен следващата стъпка

1027
00:45:16,200 --> 00:45:19,970
педагогически от C, защото това е
толкова мелодийките познато всичко

1028
00:45:19,970 --> 00:45:22,380
току-що сте виждали през последните няколко седмици.

1029
00:45:22,380 --> 00:45:25,724
>> В един първоначален разликата ще видим
е там не е основна функция вече.

1030
00:45:25,724 --> 00:45:28,890
Когато започнете да пишете код, това е просто
няма да се изпълнява, без значение какво,

1031
00:45:28,890 --> 00:45:30,220
както ще видим след малко.

1032
00:45:30,220 --> 00:45:33,320
Междувременно, ето какво
променлива изглежда в PHP.

1033
00:45:33,320 --> 00:45:35,840
Това е малко по-различна,
но само почти.

1034
00:45:35,840 --> 00:45:39,380
>> В PHP, там не е силна да пишете.

1035
00:45:39,380 --> 00:45:41,430
Има седмица писане,
които просто означава, че има

1036
00:45:41,430 --> 00:45:44,030
са типове данни като струни
и номера и други неща.

1037
00:45:44,030 --> 00:45:47,030
Но вие не се притеснява уточнява
това, което те са повече.

1038
00:45:47,030 --> 00:45:48,980
PHP го разбере, за вас.

1039
00:45:48,980 --> 00:45:52,030
Знака на долара е просто решение
че хората на PHP направени години

1040
00:45:52,030 --> 00:45:54,890
преди, така че всяка променлива в PHP
просто започва с знака за долар.

1041
00:45:54,890 --> 00:45:58,130
Това всъщност е вид полезна с това, че
тя скача от вас малко повече.

1042
00:45:58,130 --> 00:46:01,315
>> Но след това, този
е състояние, при PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Какво е различното в сравнение с C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Трик question-- нищо,
което всъщност е много хубаво.

1047
00:46:09,600 --> 00:46:12,140
Булеви изрази в PHP-- същото.

1048
00:46:12,140 --> 00:46:19,354
Булеви изрази със и срещу
или, ключове, примки, примки, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
това е по-различно.

1050
00:46:20,270 --> 00:46:22,660
>> Така се оказва, че има
Няколко други функции в PHP.

1051
00:46:22,660 --> 00:46:25,243
Един от тях е всъщност това,
което е чудесно удобно.

1052
00:46:25,243 --> 00:46:29,250
Ако $ номера е масив, че сте
обявен предварително в програмата,

1053
00:46:29,250 --> 00:46:33,350
имате тази фантазия за всеки конструкт
че вместо да се прави всичко това

1054
00:46:33,350 --> 00:46:37,020
досадно ми е равна на 0, I е
по-малко от това, [? I ++?]

1055
00:46:37,020 --> 00:46:40,320
за всеки числа, като брой, където всеки
на тези ценности знака за долар е просто

1056
00:46:40,320 --> 00:46:42,790
променлива, а вторият
можеш да се сетиш като I.

1057
00:46:42,790 --> 00:46:44,290
Можете да го наречете всичко, което искате.

1058
00:46:44,290 --> 00:46:45,770
Аз го нарича номер.

1059
00:46:45,770 --> 00:46:48,825
Това се случва за обхождане
масива наречен номера.

1060
00:46:48,825 --> 00:46:51,200
И на всяка итерация, това е
ще се актуализира автоматично

1061
00:46:51,200 --> 00:46:54,340
за вас номера на знака за долар
променлива, така че можете постоянно

1062
00:46:54,340 --> 00:46:58,210
имат достъп до променливата искате
без да се налага да се направи всеки квадратен скоба

1063
00:46:58,210 --> 00:47:00,980
нотация или индексиране на масив.

1064
00:47:00,980 --> 00:47:04,950
>> Освен това, дори да има такива неща
масиви, които изглеждат почти еднакви,

1065
00:47:04,950 --> 00:47:08,210
освен това е много често, тъй като ние ще
виж, както в PHP и JavaScript

1066
00:47:08,210 --> 00:47:10,750
предварително да се инициализира масив
използване на квадратни скоби.

1067
00:47:10,750 --> 00:47:12,040
C използва фигурни скоби.

1068
00:47:12,040 --> 00:47:15,330
Така че това е малко по-различно, въпреки че
ние всъщност не използват този трик много.

1069
00:47:15,330 --> 00:47:20,090
>> Но още по-силно,
PHP има асоциативни масиви,

1070
00:47:20,090 --> 00:47:23,100
който е един луксозен начин
каже хеш таблици.

1071
00:47:23,100 --> 00:47:31,610
Всъщност, ако искате да обяви хашиш
маса в PHP, за разлика от C-- колко

1072
00:47:31,610 --> 00:47:34,775
реда код го вземат, за да
реалното изпълнение на хеш таблица в C?

1073
00:47:34,775 --> 00:47:38,310
Или колко реда код е
като за изпълнение на хеш таблица в C?

1074
00:47:38,310 --> 00:47:39,820
Така че това е може би много, нали?

1075
00:47:39,820 --> 00:47:41,680
Това е няколко десетки, може би 100 или 200.

1076
00:47:41,680 --> 00:47:42,980
Това е nontrivial.

1077
00:47:42,980 --> 00:47:45,420
Или тя е на път да бъде, тъй като
вие скоро ще видите, nontrivial

1078
00:47:45,420 --> 00:47:48,080
за прилагане на хеш таблица
[Недоловим], а също и да опитате.

1079
00:47:48,080 --> 00:47:50,580
Но в PHP-- и честно казано,
вероятно не трябва да ви кажа това

1080
00:47:50,580 --> 00:47:53,630
докато Monday-- в PHP, ако
искаш маса, направено.

1081
00:47:53,630 --> 00:47:56,431
Това е хеш table-- така
с един ред код.

1082
00:47:56,431 --> 00:47:56,930
И

1083
00:47:56,930 --> 00:47:58,810
>> A много езици го направя.

1084
00:47:58,810 --> 00:48:00,190
Забавлявайте се с pset пет.

1085
00:48:00,190 --> 00:48:01,980
Така че много езици направите това.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Те ще ви дадат тези абстракции
че и други хора, други програмисти,

1088
00:48:06,140 --> 00:48:09,870
са създадени за вас, така че
можете да стои на раменете си

1089
00:48:09,870 --> 00:48:13,290
и започнете да използвате идеи, които са супер
убедителни, като хеш таблици и дървета

1090
00:48:13,290 --> 00:48:14,140
и се опитва.

1091
00:48:14,140 --> 00:48:17,790
Но не е задължително да
изпълнява сам тези неща.

1092
00:48:17,790 --> 00:48:20,850
>> И така, в крайна сметка, това, което
ние ще използваме PHP за

1093
00:48:20,850 --> 00:48:23,580
е потенциално писмено програми
на т.нар командния ред.

1094
00:48:23,580 --> 00:48:26,600
Бихме могли да пресъздаде всяка програма
сме написали този семестър до този момент,

1095
00:48:26,600 --> 00:48:30,410
освен може би Breakout, който използва SPL,
който е специфичен за C в момента.

1096
00:48:30,410 --> 00:48:33,100
Но всеки друг проблем настроен,
Със сигурност Марио и Цезар

1097
00:48:33,100 --> 00:48:35,300
и Vigenere и
[? Пляскане?] И по-нататък, ние

1098
00:48:35,300 --> 00:48:39,520
може да приведе отново в действие в PHP, и
вероятно малко по-лесно.

1099
00:48:39,520 --> 00:48:43,050
>> Но това, което в крайна сметка ще
да използва PHP е уеб програмиране.

1100
00:48:43,050 --> 00:48:46,420
И ние ще представим следващата
седмица мисловен модел, парадигма, наречена

1101
00:48:46,420 --> 00:48:49,610
MVC модел оглед контролер,
които, ако сте направили програмиране

1102
00:48:49,610 --> 00:48:51,610
преди в Python или
Ruby или на друго място,

1103
00:48:51,610 --> 00:48:54,112
може да знае на този отбор с
Rails и Django и други подобни.

1104
00:48:54,112 --> 00:48:55,820
Но ако сте нов в
това също, ще видите

1105
00:48:55,820 --> 00:48:59,652
че това е действително много естествен
удължаване на факторизирането

1106
00:48:59,652 --> 00:49:01,360
и вида на дизайна
код, който ние сме

1107
00:49:01,360 --> 00:49:04,670
били прави в C. Отиваме сега
прилага някои от тези уроци на PHP

1108
00:49:04,670 --> 00:49:07,190
така че в крайна сметка, ние сме
прилагане на нашите собствени уебсайтове.

1109
00:49:07,190 --> 00:49:09,080
И ако вие сте нещо като
хипнотизиран или изумен

1110
00:49:09,080 --> 00:49:10,954
че ние ще направим
Всички така бързо,

1111
00:49:10,954 --> 00:49:13,410
осъзнават, че почти всеки
семестър, почти 90%

1112
00:49:13,410 --> 00:49:16,560
на студенти CS50, включително тези,
които никога не са програмирани преди,

1113
00:49:16,560 --> 00:49:20,329
в крайна сметка направи окончателните проекти, които
се основават на уеб програмиране.

1114
00:49:20,329 --> 00:49:23,120
И така, вие ще видите, че се връща
са високи в идните седмици.

1115
00:49:23,120 --> 00:49:24,965
Така че ние ще се видим след това в понеделник.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> SPEAKER 1: И сега, Deep
Мисли от Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Хеш таблици.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [Смях]

1122
00:49:38,402 --> 00:49:38,902