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 Маланом: Ладно, добро пожаловать обратно.

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-- Анненберг
Зал на рабочее время, один здесь

15
00:00:37,670 --> 00:00:39,530
в Лоуэлл Хаус с Ником.

16
00:00:39,530 --> 00:00:41,750
Вот Рамон быть пойманным на телефоне.

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 Маланом: Но
что стоит за гигабайт.

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-- так обед
это, опять же, в эту пятницу в 1: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
Габриэль из Бразилии ни разу
резные тыквы на Хэллоуин.

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
связаны в меню Seminars
вариант сайта Курса.

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
приложения с Свифт, новый язык
от Apple, или Objective-C

69
00:03:08,100 --> 00:03:11,230
или Программы или программирования [? кий?]
лампочки, или любую из тем

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,
Передачи гипертекста Протокол.

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 Маланом: я пропустил последнюю часть.

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 Маланом: 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 Маланом: Мой 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 Маланом: Хорошо.

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 Маланом: Адрес,
или порт, как это называется.

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
действительно в порядке.

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,
Язык разметки гипертекста, который

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
Вы, наверное, можно сделать вывод,
как мы стилизации его.

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
как есть на С или любой язык.

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-О-М, документ

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 Маланом: Ладно,
А теперь давайте на самом деле погружение

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
и я сделал что-то, как
просто, как открытие Gedit.

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 Маланом: Глава.

243
00:10:32,500 --> 00:10:36,020
А потом здесь, я
имел титул, я думаю.

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 или
Окна с 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
>> Но обратите внимание на URL.

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
Вы можете написать код на Си и компиляции
и запустить его, как вы делали.

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
Если я делаю Ls, есть 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-- а затем
в каталоге под названием локальный,

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
>> Так что теперь позвольте мне идти вперед и
сделать компакт-диск с той же директории

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
называемое общественное внутри директории
называется локальный внутри директории

308
00:13:26,940 --> 00:13:29,810
называемые виртуальных доменов, которые
Благодаря сотрудникам 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 / локальный, которые

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
Его прозвище локальный.

324
00:14:07,490 --> 00:14:10,210
Но думать о локальном хосте как как
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
>> Позвольте мне уменьшить масштаб и нажмите Ввод.

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
И это так же, как в восторг.

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 Appliance.

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 Appliance, кто

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
Но это довольно восторг страницы.

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

365
00:15:56,230 --> 00:15:57,910
Итак, позвольте мне вернуться к Gedit.

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

367
00:16:00,580 --> 00:16:05,880
И я утверждал с before-- отпустить меня
в моем каталоге локальный общественности.

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
>> Теперь, если я печатаю Ls, смотреть
на всех этих файлов

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
Итак, позвольте мне перейти в мою виртуальный хост, мой
локальный, моя общественная и 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
Хит Перезагрузить Блин, что-то не так.

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 Маланом: Это не
иметь доступ к изображению.

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,
Вы зайдите в меню Developer

421
00:18:11,870 --> 00:18:14,650
и перейти к Developer Tools
вариант, который, вероятно, у Вас есть

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 является
действительно ОК, значит 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 Маланом: Да, есть
более двух 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
Так, самый простой способ исправить это, чтобы
перейти к моей строке и сделать CHMOD для изменения

461
00:19:59,620 --> 00:20:05,580
Режим и затем сделать A + 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-- я не знаю-- эссе
общедоступным случайно,

468
00:20:23,210 --> 00:20:25,480
Вы можете сделать наоборот, CHMOD на-р.

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
И я собираюсь нажмите
немного Ghostbusters

475
00:20:34,820 --> 00:20:38,030
символ, чтобы очистить эту часть
Экран поэтому мы можем видеть новые запросы.

476
00:20:38,030 --> 00:20:40,630
И действительно, здесь есть
Grump Кэт раньше.

477
00:20:40,630 --> 00:20:43,010
Но что еще более важно,
Технически, существует

478
00:20:43,010 --> 00:20:45,565
число 200, которая
означает, что мы получили это ОК.

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
Закрыть якорь тег.

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
так что, когда он нажал,
он идет по следующему адресу здесь.

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
А теперь это очень
восторг страницы еще.

511
00:22:08,680 --> 00:22:10,910
Но если я наведите курсор мыши на there--
и это немного мала,

512
00:22:10,910 --> 00:22:13,576
но-- вы можете видеть в нижней
левый угол экрана,

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
Хорошо, а теперь, если я перезагрузить
После сохранения этой странице,

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-- вы можете пойти, чтобы посмотреть
Разработчик 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 Appliance,

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 Маланом: --Я
не 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, каскадные таблицы стилей, являются,

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
Я мог бы использовать ул тег для неупорядоченный
Список, а затем в списке пункт ребенок

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--
CHMOD + р от 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 A + 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-- все
что означает: строка таблицы, таблицы

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
и атрибуты и хорошо сформированности
что мы говорили о,

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
что я не понимаю,
перегонку URL в только в этом.

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
Но обычно держит Сдвиг и
перегрузка заставит все

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
Но то, что было на самом деле послал это запрос
для не слэш, но / поиск? д = кошки.

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
>> И я собираюсь
быстро на скорую руку типа DOC

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 Поиск.

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
Я собираюсь CHMOD ему + 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 Поиск.

749
00:32:52,200 --> 00:32:53,850
Закрыть тег.

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 Поиск.

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 Маланом: д.

782
00:34:14,370 --> 00:34:17,800
И мы на самом деле не нужно вопрос
пометить это получается, но д действительно это,

783
00:34:17,800 --> 00:34:20,489
д для запроса, вероятно, по
по умолчанию, просто потому что это

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
что, когда он представил,
он собирается по следующему адресу.

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

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, каскадные таблицы стилей.

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
Но это то, что стилизует
Вся всемирная паутина сегодня.

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
или свойство и значение,
Я могу повлиять на эстетику

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
И только по погуглить вокруг, я понимаю,
что листы CSS, каскадные таблицы,

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 Поиск.

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
веб-программирование является то, что чем больше вы можете
модуляризуете вещи и фактор вещи

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
Но позвольте мне открыть свою вкладку Сеть.

892
00:39:17,730 --> 00:39:19,660
Позвольте мне перезагрузите страницу.

893
00:39:19,660 --> 00:39:23,315
Ах, почему CSS не применяется?

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 A + R
звезды точка CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
мы точка 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
А теперь я просто хочу сделать
CHMOD из A + 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, и
честно говоря, версия Google 2014,

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
>> Я ввел DIV
тег, который является подразделением,

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
Вот еще один DIV страницы
чей 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
>> Заголовок не является тег.

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
подписать и нажмите Осмотрите элемент.

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 Маланом: Скажи это еще раз?

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 Маланом: Прекрасно.

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 и Руби
и 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
не Trick question-- ничего,
который на самом деле очень приятно.

1047
00:46:09,600 --> 00:46:12,140
Логические выражения в PHP-- же.

1048
00:46:12,140 --> 00:46:19,354
Логические выражения с и против
или, переключатели, петли, петли, loops-- ОК,

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, я это
меньше, чем это, [? Я ++?],

1055
00:46:37,020 --> 00:46:40,320
для каждого числа как числа, где каждый
этих ценностей знак доллара только

1056
00:46:40,320 --> 00:46:42,790
переменная, а второй
Вы можете думать, как И.

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
С использует фигурные скобки.

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
Это нетривиальная.

1077
00:47:42,980 --> 00:47:45,420
Или он собирается быть, как
Вы скоро увидите, нетривиально

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
>> Много языков сделать.

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 и
[? Crack?] И далее, мы

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 или
Руби или в другом месте, вы

1103
00:48:51,610 --> 00:48:54,112
может знаете этой команды с
Рельсы и 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
делал в С. Мы собираемся сейчас
применять некоторые из этих уроков в 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
>> СПИКЕР 1: А теперь, Deep
Мысли по Daven Фарнэме.

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