1
00:00:00,000 --> 00:00:03,486
>> [Играет музыка]

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

3
00:00:10,460 --> 00:00:14,250
>> Дэвид Дж Малан: Это CS50 и
это начало недели 7.

4
00:00:14,250 --> 00:00:15,060
Так что добро пожаловать обратно.

5
00:00:15,060 --> 00:00:17,540
И вы, наверное, помните, что
в задаче установить четыре,

6
00:00:17,540 --> 00:00:21,510
было немного охоты мусорщика
для некоторых сказочных призов при этих условиях

7
00:00:21,510 --> 00:00:24,219
после восстановления фотографий
Сотрудники и здесь, и в Нью-Хейвене,

8
00:00:24,219 --> 00:00:27,468
Вы были оспорены, чтобы найти, как многие из
эти ученые-компьютерщики, как вы могли.

9
00:00:27,468 --> 00:00:29,550
И у нас есть целый
куча предложений.

10
00:00:29,550 --> 00:00:31,930
Думал, что я поделиться некоторыми
с вами здесь сегодня.

11
00:00:31,930 --> 00:00:35,100
>> И мы разместим все эти онлайн.

12
00:00:35,100 --> 00:00:39,310
Но в частности, я хотел
Обращаем ваше внимание, целью которых скважины одном,

13
00:00:39,310 --> 00:00:42,670
Сэм был в довольно многие из них
как правило, создает, как это.

14
00:00:42,670 --> 00:00:45,750
Но, похоже, что по состоянию на
Сегодня утром, победитель

15
00:00:45,750 --> 00:00:51,170
был некий некто Кен с
24 сотрудников захватили на камеру

16
00:00:51,170 --> 00:00:54,600
или несколько больше, если принять во
счет многократного персонал в картинки.

17
00:00:54,600 --> 00:00:58,300
Изображенный здесь Кен рядом
Марии в Нью-Хейвене.

18
00:00:58,300 --> 00:01:01,300
>> Теперь, Кен, однако, оказывается
из вне немного углового случае

19
00:01:01,300 --> 00:01:02,880
который еще не случалось.

20
00:01:02,880 --> 00:01:05,713
Оказывается, что это не произойдет
мне поставить мелкий шрифт в задаче

21
00:01:05,713 --> 00:01:09,710
установить четыре, что говорит, что персонал
права на призы сказочные

22
00:01:09,710 --> 00:01:13,130
потому что Кен, конечно, один из
фотографы на наших сотрудников.

23
00:01:13,130 --> 00:01:16,820
Теперь, с учетом сказанного, он
первоначально написал мне, чтобы сказать

24
00:01:16,820 --> 00:01:19,180
Пожалуйста, не оставляйте эти фотографии в Интернете.

25
00:01:19,180 --> 00:01:21,630
Я думаю, что в значительной степени
потому что большинство из фотографий

26
00:01:21,630 --> 00:01:24,499
что это фотограф сделал выглядеть
кое-что как это.

27
00:01:24,499 --> 00:01:25,040
И тому подобное.

28
00:01:25,040 --> 00:01:28,990
>> Но Кен хотел, чтобы я вас успокоить
что он очень хороший фотограф,

29
00:01:28,990 --> 00:01:33,190
он профессионал, он принимает
Фотографии, которые не являются размытыми,

30
00:01:33,190 --> 00:01:37,270
что лучше в центре внимания, и он
взял совсем немногие из наших сотрудников.

31
00:01:37,270 --> 00:01:40,370
Но вместо того, только признать
Кен, то, что мы думали, что делать

32
00:01:40,370 --> 00:01:43,390
это пойти по списку
фактически студенты, представившие.

33
00:01:43,390 --> 00:01:48,640
И получается, что копье
15 фотографий в этой утром

34
00:01:48,640 --> 00:01:50,030
был наш победитель.

35
00:01:50,030 --> 00:01:55,730
>> И здесь на фото Лэнс с Колтон,
с Сказ, с самим собой, и с Сэмом.

36
00:01:55,730 --> 00:02:00,230
Но потом выясняется, что по состоянию на
11:46 утра, так что просто немного назад,

37
00:02:00,230 --> 00:02:04,380
Я вернулся в мой адрес электронной почты и нашли
что у нас еще одно представление

38
00:02:04,380 --> 00:02:08,300
студент по имени Бонни
только это чья электронная почта говорит.

39
00:02:08,300 --> 00:02:10,800
Не буду врать, я
делать это во время занятий.

40
00:02:10,800 --> 00:02:17,620
А потом приступил к приложите просто
14 фото, один застенчивый Ланса 15.

41
00:02:17,620 --> 00:02:22,690
>> Но на фотографиях Бонни, получается
из стали несколько сотрудников, Сэм

42
00:02:22,690 --> 00:02:25,960
среди них, так что мы думали, что мы
будет сделать, это признать, и из них.

43
00:02:25,960 --> 00:02:29,240
Таким образом, в дополнение к получению Dropbox
пространство, что каждый, кто принимал участие

44
00:02:29,240 --> 00:02:33,900
получает, эти две секции будет также
получить хороший обед обслуживали их

45
00:02:33,900 --> 00:02:36,100
и их раздел
спаривается на следующей неделе.

46
00:02:36,100 --> 00:02:38,970
И так вы услышите от нас,
Лэнс и Бонни, о том.

47
00:02:38,970 --> 00:02:40,002
Так большие поздравления к ним.

48
00:02:40,002 --> 00:02:42,210
Теперь, те из вас, кто бы
как правило, обед более

49
00:02:42,210 --> 00:02:45,320
знаю, что CS50 обед в Кембридже
и Нью-Хейвен это в пятницу.

50
00:02:45,320 --> 00:02:48,510
Перейти на сайт слэш RSVP CS50 в.

51
00:02:48,510 --> 00:02:49,800
А теперь несколько слов о семинарах.

52
00:02:49,800 --> 00:02:50,730
Более curricularly.

53
00:02:50,730 --> 00:02:52,490
Так Мы приближаемся к
точка семестра

54
00:02:52,490 --> 00:02:55,200
где вы должны начать
думать о конечных проектов.

55
00:02:55,200 --> 00:02:59,309
И в самом деле, немного позже, будет
так называемая предварительно предложения быть связано.

56
00:02:59,309 --> 00:03:01,850
Так предварительно предложения предназначены для
довольно низкое влияние и действительно

57
00:03:01,850 --> 00:03:04,109
просто возможность для
Вам составить короткую записку

58
00:03:04,109 --> 00:03:06,900
ваше учение сотрудник информировать
его или ее, что вы думаете вам

59
00:03:06,900 --> 00:03:09,140
можете сделать для вашего окончательного проекта.

60
00:03:09,140 --> 00:03:11,730
>> Сейчас многие студенты в конечном итоге
делает веб-основе окончательных проектов.

61
00:03:11,730 --> 00:03:13,800
И, конечно, мы просто
Теперь на прошлой неделе в этом

62
00:03:13,800 --> 00:03:15,890
и за погрузиться в веб-программировании.

63
00:03:15,890 --> 00:03:18,200
Так что не нужно беспокоиться, если вас
нет абсолютно никакой идеи, как

64
00:03:18,200 --> 00:03:21,594
Вы будет строить идеи, которые
Вы могли бы иметь в вашем уме.

65
00:03:21,594 --> 00:03:24,510
Это на самом деле просто заставляя функция
чтобы вы думать и говорить

66
00:03:24,510 --> 00:03:25,650
с TF об этом.

67
00:03:25,650 --> 00:03:28,810
Но, чтобы помочь вам с этим, и
с конечным проектов в конечном счете,

68
00:03:28,810 --> 00:03:31,750
знаю, что CS50 имеет традицию
предложить семинары.

69
00:03:31,750 --> 00:03:36,084
>> И это необязательно, руки,
или лекции на основе возможностей

70
00:03:36,084 --> 00:03:39,000
чтобы узнать больше о темах, которые
немного вспомогательные для Курса

71
00:03:39,000 --> 00:03:43,310
Учебный план, тем не менее, замечательно, но
Материал для привода окончательные проекты.

72
00:03:43,310 --> 00:03:46,840
И так это список, что это
Сотрудники CS50 здесь в Нью-Хейвене

73
00:03:46,840 --> 00:03:48,600
придумали для
в этом году около прошивкой

74
00:03:48,600 --> 00:03:50,730
программирование, Android-
программирование, разработка игры,

75
00:03:50,730 --> 00:03:54,480
и гроздья больше инструментов
и языков и методики.

76
00:03:54,480 --> 00:03:56,780
>> Так держать глаза на веб-сайте CS50 в.

77
00:03:56,780 --> 00:04:00,110
И в то же время, если вы хотите, чтобы
зарегистрировать свой интерес в любом из них,

78
00:04:00,110 --> 00:04:02,510
перейти к слэш реестра CS50 в.

79
00:04:02,510 --> 00:04:05,770
И мы будем следить за то, как к
дни и время полета и места

80
00:04:05,770 --> 00:04:09,090
и everything-- большинство все будет
будет транслироваться и также доступны по запросу

81
00:04:09,090 --> 00:04:11,750
после, если вы не можете сделать это на самом деле.

82
00:04:11,750 --> 00:04:15,800
Так что без дальнейших церемоний, мы
остановились в прошлый раз с GET.

83
00:04:15,800 --> 00:04:19,610
>> И это было, как сообщение, которое было
внутри виртуальной оболочки, напомним,

84
00:04:19,610 --> 00:04:23,960
что мы перешли от маршрутизатора к маршрутизатору
Маршрутизатор между веб-браузером и веб

85
00:04:23,960 --> 00:04:24,487
Сервер.

86
00:04:24,487 --> 00:04:26,695
И, что сообщение выглядел
кое-что как это.

87
00:04:26,695 --> 00:04:29,700
Это было тем более тайной, что сообщение
был на самом деле внутри конверта

88
00:04:29,700 --> 00:04:34,440
написано на листке бумаги которого
Первая строка говорит буквально, получить черту.

89
00:04:34,440 --> 00:04:37,830
>> И только в качестве проверки вменяемости,
Что же черта означают?

90
00:04:37,830 --> 00:04:40,455
Что значит, когда черта
с просьбой веб-сайт?

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

92
00:04:43,070 --> 00:04:44,250
Вы просите его все время.

93
00:04:44,250 --> 00:04:47,333
Большинство в любое время вы посещаете веб-сайт, вы
на самом деле не ввести имя файла.

94
00:04:47,333 --> 00:04:50,960
Вы, наверное, просто зайдите на Facebook.com,
ввести, gmail.com, или тому подобное.

95
00:04:50,960 --> 00:04:52,260
И что слэш представляют?

96
00:04:52,260 --> 00:04:53,506
Что файл?

97
00:04:53,506 --> 00:04:54,630
Или то, что страница, специально?

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

99
00:04:59,642 --> 00:05:00,720
>> Индекс, да.

100
00:05:00,720 --> 00:05:01,810
Так страницы по умолчанию.

101
00:05:01,810 --> 00:05:04,810
Так что, если вы не укажете файл
назвать, как мы начнем видеть,

102
00:05:04,810 --> 00:05:07,750
вы на самом деле просто с просьбой
дать мне страницу по умолчанию Facebook

103
00:05:07,750 --> 00:05:10,800
или дать мне мой почтовый ящик или дать
мне страница по умолчанию новостей

104
00:05:10,800 --> 00:05:12,510
на веб-сайте CNN или тому подобное.

105
00:05:12,510 --> 00:05:15,220
И сервер будет реагировать на
что сообщение с чем-то

106
00:05:15,220 --> 00:05:18,420
как это, говоря, да, я
говорить HTTP версии 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, который является статус
код, который мы, люди, редко

108
00:05:21,130 --> 00:05:22,790
когда-либо видеть, потому что это хорошо.

109
00:05:22,790 --> 00:05:26,640
Потому что это означает, OK запрос
было получено и обработано должным образом.

110
00:05:26,640 --> 00:05:28,960
И тип контента
по-видимому, в ответ

111
00:05:28,960 --> 00:05:31,170
Нередко, однако, не всегда, текст.

112
00:05:31,170 --> 00:05:32,580
И в частности, HTML.

113
00:05:32,580 --> 00:05:34,760
И это на самом деле
где мы смотрим на сегодняшний день.

114
00:05:34,760 --> 00:05:37,140
>> Таким образом, в самом деле, я собираюсь пойти
вперед и открыть браузер.

115
00:05:37,140 --> 00:05:40,410
Я собираюсь использовать Chrome, вы можете использовать
Наиболее любой браузер в ближайшие недели.

116
00:05:40,410 --> 00:05:42,410
Обычно мы рекомендуем Chrome
потому что это особенно

117
00:05:42,410 --> 00:05:43,750
хорошо для разработчиков программного обеспечения.

118
00:05:43,750 --> 00:05:46,070
Он получил много встроенных в
инструменты, которые облегчают

119
00:05:46,070 --> 00:05:49,800
развивать не только HTML и CSS,
вещи, которые мы начинаем говорить о сегодня,

120
00:05:49,800 --> 00:05:51,530
но и другие языки, а также.

121
00:05:51,530 --> 00:05:55,530
>> И я собираюсь идти вперед и идти, целью которых
Я собираюсь управления нажмите или вправо

122
00:05:55,530 --> 00:05:57,210
щелкните в любом месте на веб-странице.

123
00:05:57,210 --> 00:05:59,070
И я собираюсь идти на проверку элемента.

124
00:05:59,070 --> 00:06:03,850
И я собираюсь надрать
Экран просто немного здесь.

125
00:06:03,850 --> 00:06:05,790
Позвольте мне перейти это на дно.

126
00:06:05,790 --> 00:06:08,140
Так что это то, что называется
Инспектор Chrome.

127
00:06:08,140 --> 00:06:11,010
Так что это, как отладки
инструмент, встроенный в Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Все из вас уже есть это
если вы были с помощью Chrome.

129
00:06:13,520 --> 00:06:17,169
И это позволяет вам увидеть, что происходит
на под капотом какой-то веб-странице.

130
00:06:17,169 --> 00:06:19,210
Итак, давайте на самом деле взять
смотреть на это следующим образом.

131
00:06:19,210 --> 00:06:21,251
Он имеет больше возможностей способ
и мы заботимся о сегодня.

132
00:06:21,251 --> 00:06:22,760
Но есть эти вкладки здесь.

133
00:06:22,760 --> 00:06:25,890
Элементы, сети, источники,
график, и некоторые другие вещи.

134
00:06:25,890 --> 00:06:27,800
Я собираюсь нажать на
Сеть на мгновение.

135
00:06:27,800 --> 00:06:30,500
>> И это немного подавляющим
на первый взгляд здесь.

136
00:06:30,500 --> 00:06:34,190
Но то, что я собираюсь сделать, это позволить
мне упростить это немного.

137
00:06:34,190 --> 00:06:37,560
Я собираюсь превратить на
запись свет, так что он красный.

138
00:06:37,560 --> 00:06:39,140
И я хочу сказать, сохранить журнал.

139
00:06:39,140 --> 00:06:41,015
И это только немного
что я понял,

140
00:06:41,015 --> 00:06:44,120
в течение долгого времени, что происходит, чтобы сохранить
все, что происходит в браузере.

141
00:06:44,120 --> 00:06:50,030
А теперь я собираюсь пойти
чтобы http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> На самом деле, давайте делать WWW
для хорошей мерой, слэш.

143
00:06:52,690 --> 00:06:53,643
Войти.

144
00:06:53,643 --> 00:06:56,180
Таким образом, URL, что многие из
Вы, возможно, посетил.

145
00:06:56,180 --> 00:06:58,830
А теперь веб Facebook,
страницы появляется в верхней части.

146
00:06:58,830 --> 00:07:02,350
А потом целый букет
материал пролетели на дне.

147
00:07:02,350 --> 00:07:04,830
И в самом деле, оказывается, что
когда вы посещаете Facebook.com,

148
00:07:04,830 --> 00:07:09,320
Вы не просто сделать один запрос HTTP,
получается, что собирается Facebook.com

149
00:07:09,320 --> 00:07:14,320
посылает 41 из этих конвертов,
каждый со своей собственной просьбе получить,

150
00:07:14,320 --> 00:07:18,360
как показано, хотя за экраном
Здесь, в нижней части экрана,

151
00:07:18,360 --> 00:07:24,040
это означает, что, действительно, мой
браузеру сделал 41 запросов.

152
00:07:24,040 --> 00:07:29,689
>> А в общей сложности, она передала 861
килобайт и он взял почему-то

153
00:07:29,689 --> 00:07:31,730
целых восемь секунд
скачать все это.

154
00:07:31,730 --> 00:07:33,790
Так что на самом деле немного странно
что сайт Facebook, что бы

155
00:07:33,790 --> 00:07:35,600
долго, но так оно и будет в этом случае.

156
00:07:35,600 --> 00:07:39,520
Теперь, все это я действительно не волнует,
о для верхней запросу исключением.

157
00:07:39,520 --> 00:07:46,440
Итак, давайте к этому здесь
и позвольте мне уменьшить на мгновение.

158
00:07:46,440 --> 00:07:47,754
>> И позвольте мне увеличить на это.

159
00:07:47,754 --> 00:07:50,670
Так что я сделал в левой, хотя
есть много происходит здесь

160
00:07:50,670 --> 00:07:53,360
является Я выделил
Facebook.com, а затем

161
00:07:53,360 --> 00:07:56,540
заметить, что я прокрутки вниз,
прокрутки вниз, прокрутка вниз,

162
00:07:56,540 --> 00:07:58,330
просить заголовки.

163
00:07:58,330 --> 00:08:01,720
И вы увидите, что Chrome показывает
мне по существу внутренние содержание

164
00:08:01,720 --> 00:08:02,810
запроса я сделал.

165
00:08:02,810 --> 00:08:06,130
Это не форматирование совсем то же самое
способ, но обратите внимание, там упоминание о получить,

166
00:08:06,130 --> 00:08:09,481
заметить там упоминаний о хозяине,
Facebook.com, путь, или косая черта,

167
00:08:09,481 --> 00:08:10,730
что файл я просил.

168
00:08:10,730 --> 00:08:12,930
>> И потом, если я прокручиваю
резервное копирование, мы будем на самом деле

169
00:08:12,930 --> 00:08:17,270
видеть, что то, что возвращается Facebook
для меня это все из этих заголовков.

170
00:08:17,270 --> 00:08:21,040
Так внутри этого виртуального конверта
действительно много пар ключ-значение.

171
00:08:21,040 --> 00:08:23,130
Слово, толстой кишки, а затем значение.

172
00:08:23,130 --> 00:08:25,050
Слово, толстой кишки, а значение.

173
00:08:25,050 --> 00:08:26,160
Они называются заголовки.

174
00:08:26,160 --> 00:08:31,860
И есть намного больше, чем здесь подробно
мы на самом деле заботятся о прямо сейчас.

175
00:08:31,860 --> 00:08:33,750
>> Но это второй
последний там,

176
00:08:33,750 --> 00:08:38,809
Отметим, что сервер Facebook.com, в
здесь действительно сказал приходит какой-то текст HTML.

177
00:08:38,809 --> 00:08:41,409
Таким образом, все это есть
что, когда вы запрашиваете веб-

178
00:08:41,409 --> 00:08:44,300
страница из браузера на
Сервер, что сервер отвечает

179
00:08:44,300 --> 00:08:47,630
с конвертом собственной
внутри которого находится текст.

180
00:08:47,630 --> 00:08:49,020
Другими словами, HTML.

181
00:08:49,020 --> 00:08:50,590
Язык гипертекстовой разметки.

182
00:08:50,590 --> 00:08:53,200
Какой другой язык
что мы вводим сегодня

183
00:08:53,200 --> 00:08:57,740
что люди или компьютеры генерировать
для того, чтобы реализовать веб-страниц.

184
00:08:57,740 --> 00:08:59,580
>> В частности, давайте посмотрим на это.

185
00:08:59,580 --> 00:09:03,277
Я собираюсь вернуться в настоящее время
на сайт Facebook.

186
00:09:03,277 --> 00:09:05,360
И я собираюсь просто
Контроль мыши или щелкните правой кнопкой мыши

187
00:09:05,360 --> 00:09:07,634
и нажмите на просмотр страницы источника.

188
00:09:07,634 --> 00:09:10,550
И даже если вы не используете Chrome,
IE может сделать это, Firefox может сделать это,

189
00:09:10,550 --> 00:09:14,060
Сафари можете сделать это, хотя меню
варианты могут выглядеть немного иначе.

190
00:09:14,060 --> 00:09:18,990
И это HTML, что Марк и
Компания в Facebook написал.

191
00:09:18,990 --> 00:09:24,640
>> И вместе, этот язык здесь
реализует синий и белый страницу

192
00:09:24,640 --> 00:09:26,370
что мы видели минуту назад.

193
00:09:26,370 --> 00:09:28,030
Теперь, это немного подавляющим.

194
00:09:28,030 --> 00:09:31,400
Но если мы посмотрим на в левом верхнем углу, мы
собирается начать видеть некоторые модели.

195
00:09:31,400 --> 00:09:34,140
Похоже, есть много
из них открытой угловой скобки

196
00:09:34,140 --> 00:09:35,970
а там это ключевое слово HTML.

197
00:09:35,970 --> 00:09:38,330
Вот еще один открытый
угловой кронштейн и головы.

198
00:09:38,330 --> 00:09:41,560
>> Вот, если мы прокрутите вниз
и вниз, и вниз, я

199
00:09:41,560 --> 00:09:43,820
идти вперед и попробовать
искать что-то.

200
00:09:43,820 --> 00:09:48,510
Там путь на правый
здесь с открытым кузовом кронштейн.

201
00:09:48,510 --> 00:09:50,800
И помните из прошлого
Время, мы предложили

202
00:09:50,800 --> 00:09:53,364
что простейшем веб-страницы
которые могли бы написать человек

203
00:09:53,364 --> 00:09:55,030
может выглядеть немного что-то вроде этого.

204
00:09:55,030 --> 00:09:58,430
Открыть HTML-тег, открытая головка
тег, открытый тег заголовка,

205
00:09:58,430 --> 00:10:03,230
затем закрыл титул, закрытый голова, открытый
Тег тело, часть текста, закрытый корпус,

206
00:10:03,230 --> 00:10:04,720
закрытая HTML.

207
00:10:04,720 --> 00:10:06,290
>> Но пауза здесь на мгновение.

208
00:10:06,290 --> 00:10:09,030
Этот код, даже если вы
никогда не написал это раньше

209
00:10:09,030 --> 00:10:11,864
но до сих пор не совсем понимаю,
то, что происходит, выглядит довольно хорошо.

210
00:10:11,864 --> 00:10:12,821
Право, это очень чисто.

211
00:10:12,821 --> 00:10:14,120
Это очень стилистически приятно.

212
00:10:14,120 --> 00:10:16,190
Много отступа и пробелы.

213
00:10:16,190 --> 00:10:18,020
Facebook-х нет.

214
00:10:18,020 --> 00:10:23,190
Так почему же так много Facebook
хуже, чем я пишу в HTML?

215
00:10:23,190 --> 00:10:24,310
По всей видимости.

216
00:10:24,310 --> 00:10:26,899
>> Право, это как один
из пяти по стилю.

217
00:10:26,899 --> 00:10:29,315
Там это веская причина
для них, чтобы сократить эти углы.

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

219
00:10:31,069 --> 00:10:33,860
Ладно, так что они не хотят, чтобы
сделать его проще для вас, чтобы прочитать его.

220
00:10:33,860 --> 00:10:36,940
Таким образом, в некотором смысле, они
обфускации его, вроде взбираются его

221
00:10:36,940 --> 00:10:40,260
по крайней мере, эстетически так
что это тяжелее для Myspace

222
00:10:40,260 --> 00:10:42,705
чтобы пойти и сорвать их
Домашняя страница и HTML для него.

223
00:10:42,705 --> 00:10:45,080
Получается, что с программами
хотя, в том числе Chrome,

224
00:10:45,080 --> 00:10:47,020
мы можем очистить это супер легко.

225
00:10:47,020 --> 00:10:49,420
Так что это не совсем так, как причине.

226
00:10:49,420 --> 00:10:51,290
Что еще может быть причиной.

227
00:10:51,290 --> 00:10:51,790
Да.

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

229
00:10:54,680 --> 00:10:55,890
Да, данные пробела расходы.

230
00:10:55,890 --> 00:10:56,598
Что вы имеете в виду?

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

232
00:11:02,250 --> 00:11:02,979
Да, именно.

233
00:11:02,979 --> 00:11:06,020
Если вы нажмете клавишу Tab много или
пробел, рассмотрим последствия.

234
00:11:06,020 --> 00:11:10,060
Таким образом, каждый ключ на клавиатуре является
[Неразборчиво] представлен в виде одного байта.

235
00:11:10,060 --> 00:11:14,560
>> Итак, пусть Марк или любой из разработчиков
в эти дни парад пробел один раз

236
00:11:14,560 --> 00:11:17,899
в этом HTML-страницы,
представляет домашнюю Facebook.

237
00:11:17,899 --> 00:11:19,690
И Facebook есть много
пользователей в эти дни.

238
00:11:19,690 --> 00:11:24,030
Итак, пусть домашнюю Facebook,
посещают миллиарда людей сегодня.

239
00:11:24,030 --> 00:11:27,020
И кто-то на Facebook имеет
нажмите пробел один раз.

240
00:11:27,020 --> 00:11:29,890
>> Так, один дополнительный байт,
миллиарда запросов,

241
00:11:29,890 --> 00:11:32,790
сколько еще данные Facebook
передачи через Интернет

242
00:11:32,790 --> 00:11:37,160
потому что кто-хит
пробел на его или ее клавиатуре?

243
00:11:37,160 --> 00:11:41,660
Миллиард байтов, или один гигабайт оперативной
данные передаются с серверов Facebook

244
00:11:41,660 --> 00:11:43,626
для людей во всем
Мир без уважительной причины.

245
00:11:43,626 --> 00:11:44,750
Теперь, это только один пробел.

246
00:11:44,750 --> 00:11:48,866
>> Представьте себе, если мы на самом деле очистить это
что и с отступом его и добавил

247
00:11:48,866 --> 00:11:50,990
много белого пространства и
символы табуляции и пробелы,

248
00:11:50,990 --> 00:11:53,656
вы в конечном итоге расходы гигабайт,
если не терра байт пространства.

249
00:11:53,656 --> 00:11:56,640
И так супер распространены в
действительный мир веб-разработки

250
00:11:56,640 --> 00:11:58,950
это Минимизировать код.

251
00:11:58,950 --> 00:12:01,280
И мы будем в конечном счете видеть
как вы могли бы сделать это.

252
00:12:01,280 --> 00:12:04,630
>> Но сегодня, мы начнем писать код
что на самом деле читается нас, людей.

253
00:12:04,630 --> 00:12:10,120
Оказывается, однако, если вы идете назад
к этому инструменту в Chrome Осмотрите элемент,

254
00:12:10,120 --> 00:12:12,030
ранее, мы были на вкладке Network.

255
00:12:12,030 --> 00:12:15,430
Оказывается, что если вы идете к
Вкладка элементы, то, что вы на самом деле видите

256
00:12:15,430 --> 00:12:19,230
является хром в довольно печатается
версия этого же HTML.

257
00:12:19,230 --> 00:12:20,640
Таким образом, мы deobfuscated его.

258
00:12:20,640 --> 00:12:22,472
Так что это не подходит для компьютера.

259
00:12:22,472 --> 00:12:24,430
И теперь вы можете на самом деле
нажмите вокруг и начать

260
00:12:24,430 --> 00:12:27,630
чтобы увидеть иерархию, которая является веб-страница.

261
00:12:27,630 --> 00:12:28,780
Итак, давайте на самом деле это сделать.

262
00:12:28,780 --> 00:12:32,120
Я собираюсь идти вперед и открыть на
мой Mac программа под названием редактирования текста.

263
00:12:32,120 --> 00:12:35,490
И помните, что это всего лишь
супер простой текст программы.

264
00:12:35,490 --> 00:12:37,490
Окна есть notepad.exe.

265
00:12:37,490 --> 00:12:39,820
И я собираюсь для идентичных
введите следующее.

266
00:12:39,820 --> 00:12:44,650
Док тип HTML, открытый кронштейн
HTML, закрыл кронштейн HTML,

267
00:12:44,650 --> 00:12:49,000
у нас есть глава странице здесь,
конец головки на странице здесь,

268
00:12:49,000 --> 00:12:52,310
название будет как, привет мир.

269
00:12:52,310 --> 00:12:56,660
>> А потом сюда, мы должны
тело на веб-странице.

270
00:12:56,660 --> 00:12:58,050
С закрытым кузовом.

271
00:12:58,050 --> 00:13:00,700
А потом здесь, привет мир.

272
00:13:00,700 --> 00:13:01,270
Все в порядке.

273
00:13:01,270 --> 00:13:03,350
Таким образом, мы написали супер быстрый веб-страницы.

274
00:13:03,350 --> 00:13:06,675
Я собираюсь сохранить его как
hello.html на моем рабочем столе.

275
00:13:06,675 --> 00:13:09,050
Мои Mac собирается жаловаться,
думая, что, подожди минутку,

276
00:13:09,050 --> 00:13:11,091
это текстовый файл, делать
Вы хотите назвать это .txt?

277
00:13:11,091 --> 00:13:13,300
Но нет, я хочу, чтобы использовать точечную HTML.

278
00:13:13,300 --> 00:13:16,140
>> И тогда то, что хорошо, если я
просто дважды щелкните этот файл,

279
00:13:16,140 --> 00:13:18,600
hello.html, вот мой веб-страницы.

280
00:13:18,600 --> 00:13:22,564
К сожалению, я
единственный человек в мире

281
00:13:22,564 --> 00:13:23,980
кто может посетить эту страницу прямо сейчас.

282
00:13:23,980 --> 00:13:26,734
Потому что, когда она, по-видимому жить?

283
00:13:26,734 --> 00:13:27,650
Это на мой Mac, верно?

284
00:13:27,650 --> 00:13:28,470
Какие бесполезно.

285
00:13:28,470 --> 00:13:30,390
Как никто в этой комнате
не говоря уже о интернете

286
00:13:30,390 --> 00:13:31,598
может на самом деле посетить эту страницу.

287
00:13:31,598 --> 00:13:33,820
Таким образом, сегодня мы должны
ввести еще один элемент.

288
00:13:33,820 --> 00:13:36,720
>> А для этого, я собираюсь
идти вперед и открыть облако 9.

289
00:13:36,720 --> 00:13:40,090
Так облако 9, конечно,
на основе облачных вычислений service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- Это имеет все наши рабочие области
работает где-то в Интернете.

291
00:13:44,890 --> 00:13:48,330
А это значит, что все наши файлы
уже публично доступны.

292
00:13:48,330 --> 00:13:49,830
Так что давайте идти вперед и делать это.

293
00:13:49,830 --> 00:13:53,670
Я собираюсь идти вперед и
создать новый файл NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Я иду, чтобы спасти его, как и раньше
а Hello.html и нажмите сохранить.

295
00:13:58,819 --> 00:14:01,860
А теперь, чтобы сэкономить время, я иду
идти вперед и скопировать вставить этот код

296
00:14:01,860 --> 00:14:03,470
чем повторите его.

297
00:14:03,470 --> 00:14:04,550
И сохранить его.

298
00:14:04,550 --> 00:14:07,550
И вот теперь у меня есть
Файл называется Hello.html.

299
00:14:07,550 --> 00:14:09,710
Но как я на самом деле
открыть его как веб-страницу?

300
00:14:09,710 --> 00:14:14,120
Ну, оказывается, что встроенный в CS50
IDE не только компилятор, как лязг

301
00:14:14,120 --> 00:14:16,670
и отладчик GDB, как и
гроздья других программ,

302
00:14:16,670 --> 00:14:21,140
там на самом деле полноправным
веб-сервер работает в течение CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Все вы, что есть,
иметь свой собственный веб-сервер.

304
00:14:23,900 --> 00:14:26,850
И веб-сервер просто кусок
ПО цель которого в жизни

305
00:14:26,850 --> 00:14:28,220
чтобы служить до веб-страниц.

306
00:14:28,220 --> 00:14:32,490
Для прослушивания запросов от браузеров и
ответить маленьких виртуальных конвертов

307
00:14:32,490 --> 00:14:35,290
внутри которого является
Содержание, что я написал.

308
00:14:35,290 --> 00:14:38,372
Таким образом, это веб-сервер
на самом деле бесплатно и с открытым исходным кодом.

309
00:14:38,372 --> 00:14:40,830
Где открытым исходным кодом просто означает,
программное обеспечение, которое кто-то еще

310
00:14:40,830 --> 00:14:43,480
написано, что каждый из нас может
реально увидеть и скачать, и даже

311
00:14:43,480 --> 00:14:44,780
изменить исходный код.

312
00:14:44,780 --> 00:14:46,150
И это называется Apache.

313
00:14:46,150 --> 00:14:51,450
>> И мы сделали это немного легче
использовать в CS50IDE, называя его Apache 50.

314
00:14:51,450 --> 00:14:53,780
Так что он может реально
понять следующее.

315
00:14:53,780 --> 00:14:56,560
Я хочу сказать, Apache 50 старт.

316
00:14:56,560 --> 00:14:58,910
А потом я просто хочу сказать, точка.

317
00:14:58,910 --> 00:15:01,080
И мы видим, некоторые несколько
аркан сообщение о том,

318
00:15:01,080 --> 00:15:04,640
установка веб-сервера Apache документа [? Группа?]
к дому, Ubuntu, что бы это,

319
00:15:04,640 --> 00:15:05,770
сократить рабочее пространство.

320
00:15:05,770 --> 00:15:08,280
Начиная веб-сервер
Apache 2 успешно.

321
00:15:08,280 --> 00:15:11,330
>> Так Короче говоря, я
только нажал на кнопку

322
00:15:11,330 --> 00:15:18,000
и повернулся на веб-сервере, который в настоящее время
слушать в Интернете на порт TCP

323
00:15:18,000 --> 00:15:20,587
80 по определенному адресу.

324
00:15:20,587 --> 00:15:22,420
И это говорит здесь, и
это будет меняться в зависимости

325
00:15:22,420 --> 00:15:26,550
на имени пользователя и других факторов,
но обратите внимание, в настоящее время, если я нажму на это,

326
00:15:26,550 --> 00:15:30,211
IDE50 точка jharvard и так, и
так, обратите внимание, что все это время

327
00:15:30,211 --> 00:15:31,960
В течение последних нескольких
недели, вы, возможно,

328
00:15:31,960 --> 00:15:35,200
заметил, что ваше собственное имя пользователя
встроен в верхней правой руке

329
00:15:35,200 --> 00:15:37,130
угол CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> И что на самом деле был все это
тайм адрес, по которому вы можете

331
00:15:41,050 --> 00:15:43,574
посетить все ваши файлы через Интернет.

332
00:15:43,574 --> 00:15:45,990
До сих пор, это не имело значения не,
потому что в C, вы, как правило

333
00:15:45,990 --> 00:15:48,073
хотят, работающие в
Терминал, не в Интернете.

334
00:15:48,073 --> 00:15:50,800
Но сегодня, мы начинаем
писать веб-основе кода

335
00:15:50,800 --> 00:15:53,350
что мы хотим
доступны в публичных адресов.

336
00:15:53,350 --> 00:15:56,100
Так что я собираюсь
сделать, это нажать эту URL.

337
00:15:56,100 --> 00:16:00,880
>> И заметьте, что я вижу довольно
уродливые индекс, листинг каталога,

338
00:16:00,880 --> 00:16:04,090
но то, что файл выскакивает на вас наверное?

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

340
00:16:05,210 --> 00:16:07,870
Это потому, что я спас
файл в моем рабочем пространстве.

341
00:16:07,870 --> 00:16:12,310
И то, что я сказал Apache веб-сервер
это посмотреть в каталоге рабочего пространства Давида.

342
00:16:12,310 --> 00:16:15,300
И пусть кто-то в
Мир увидеть эти файлы.

343
00:16:15,300 --> 00:16:19,050
>> И в самом деле, если я в настоящее время
нажмите на Hello.html,

344
00:16:19,050 --> 00:16:22,180
Я вижу в этой вкладке точно этого файла.

345
00:16:22,180 --> 00:16:26,430
Теперь обратите внимание, Cloud 9 делает
что-то немного полезным для нас.

346
00:16:26,430 --> 00:16:29,480
В CS50 IDE, обратите внимание, есть
вдруг адресной строке.

347
00:16:29,480 --> 00:16:33,690
Это потому, что хотя мы
с помощью Chrome, чтобы посетить CS50IDE,

348
00:16:33,690 --> 00:16:37,940
внутри CS50IDE является его собственным
версия веб-браузера прямо сейчас.

349
00:16:37,940 --> 00:16:40,820
И поэтому вместо того,
усложнять как таковой,

350
00:16:40,820 --> 00:16:42,955
Я собираюсь идти вперед
и просто скопировать этот URL.

351
00:16:42,955 --> 00:16:45,330
Я собираюсь идти вперед и просто
открыть свой собственный окно Chrome.

352
00:16:45,330 --> 00:16:47,800
Таким образом, нет никакой магии здесь нет CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Я просто хочу, чтобы в буквальном смысле вставить
мой J Гарвардского URL и нажмите Enter.

354
00:16:51,800 --> 00:16:54,750
И вуаля, теперь я и
в теории, каждый

355
00:16:54,750 --> 00:16:57,700
в Интернете, если я настроил
Соответственно, разрешения

356
00:16:57,700 --> 00:16:58,720
можете посетить этот файл.

357
00:16:58,720 --> 00:17:03,230
И вот теперь, если бы я сказал
hello.html, вуаля, есть

358
00:17:03,230 --> 00:17:06,366
мой восторг невероятно веб-страницы.

359
00:17:06,366 --> 00:17:07,740
Так давайте сделаем быструю проверку вменяемости.

360
00:17:07,740 --> 00:17:09,710
Из всего этого
является концептуальным настройке.

361
00:17:09,710 --> 00:17:13,180
И мы на самом деле не очень
научил вас, как писать HTML-как таковой.

362
00:17:13,180 --> 00:17:16,084
Таким образом, Есть вопросы далеко
на то, что только что произошло?

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

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

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

366
00:17:24,290 --> 00:17:25,800
Любая CS50 владеть этими веб-страниц?

367
00:17:25,800 --> 00:17:26,460
В каком смысле?

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

369
00:17:28,947 --> 00:17:29,530
Хороший вопрос.

370
00:17:29,530 --> 00:17:32,429
Так CS50 владеет CS50.io.

371
00:17:32,429 --> 00:17:33,970
Мы действительно купили что доменное имя.

372
00:17:33,970 --> 00:17:37,240
И по характеру вы, ребята,
войдя в CS50IDE,

373
00:17:37,240 --> 00:17:39,270
Вы все получите то, что называется поддомен.

374
00:17:39,270 --> 00:17:46,840
>> Так IDE50-Малан, или IDE50-Rob.CS50.io,
это ваша уникальный адрес в пределах

375
00:17:46,840 --> 00:17:47,730
наш доменное имя.

376
00:17:47,730 --> 00:17:50,850
Таким образом, для целей курса,
у вас есть свой собственный уникальный адрес.

377
00:17:50,850 --> 00:17:55,150
Но мы упростили вещи
покупать домен верхнего уровня, CS50 точка

378
00:17:55,150 --> 00:17:58,050
I / O, а затем все остальные
внутри, что, так сказать.

379
00:17:58,050 --> 00:17:59,890
И мы вернемся к тому, что
через пару недель, вероятно,

380
00:17:59,890 --> 00:18:01,930
особенно в окончательный проект
Время, когда некоторые из вас

381
00:18:01,930 --> 00:18:03,596
может хотите, чтобы ваши собственные доменные имена.

382
00:18:03,596 --> 00:18:06,270
Это на самом деле довольно
просто.

383
00:18:06,270 --> 00:18:06,770
Все в порядке.

384
00:18:06,770 --> 00:18:07,880
Итак, давайте делать это.

385
00:18:07,880 --> 00:18:11,910
Я собираюсь вернуться в
CS50IDE, где мой файл прямо сейчас,

386
00:18:11,910 --> 00:18:14,710
hello.html, не все, что интересно.

387
00:18:14,710 --> 00:18:17,130
Я хотел бы сделать что-то
немного лучше, чем это.

388
00:18:17,130 --> 00:18:19,440
Так что я собираюсь сделать что-то вроде этого.

389
00:18:19,440 --> 00:18:21,510
Позвольте мне открытым paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Так что это я написал файл заранее.

391
00:18:23,560 --> 00:18:26,480
В верхней части этого, как
всегда, у нас есть замечания.

392
00:18:26,480 --> 00:18:28,730
Но в HTML, комментарии
немного отличаться.

393
00:18:28,730 --> 00:18:33,270
На третьей строке и строке 14, вы
посмотреть синтаксис начать комментарий

394
00:18:33,270 --> 00:18:34,020
и в конечном комментарий.

395
00:18:34,020 --> 00:18:36,820
>> Но ни один из материала в
между вопросами функционально.

396
00:18:36,820 --> 00:18:40,250
Это просто записка к
человек, что здесь происходит.

397
00:18:40,250 --> 00:18:43,040
И как быстро здравомыслия
проверить, если я прокрутите вниз,

398
00:18:43,040 --> 00:18:46,820
что очевидным новый
тег, который мы ввели?

399
00:18:46,820 --> 00:18:52,130
Теги сих пор мы видели открыты
Кронштейн HTML, голова, название, и тело.

400
00:18:52,130 --> 00:18:54,400
Но то, что, очевидно, новый сейчас?

401
00:18:54,400 --> 00:18:55,200
>> Да, так стр.

402
00:18:55,200 --> 00:18:57,320
Р тег или тег пункт.

403
00:18:57,320 --> 00:19:01,182
А потом я просто заимствовал некоторые умолчанию
Латинский текст, чтобы составить свои пункты.

404
00:19:01,182 --> 00:19:03,390
Потому что то, что я хотел, чтобы
продемонстрировать, как вы могли бы

405
00:19:03,390 --> 00:19:05,859
представляют абзацы текста в HTML.

406
00:19:05,859 --> 00:19:08,400
И так, что начинает происходить
здесь является то, что уже

407
00:19:08,400 --> 00:19:09,657
шаблон разработки.

408
00:19:09,657 --> 00:19:10,990
И позвольте мне идти вперед и делать это.

409
00:19:10,990 --> 00:19:12,760
Позвольте мне сначала выключите Apache.

410
00:19:12,760 --> 00:19:17,340
И я собираюсь сказать ему, чтобы начать себя
снова в сегодняшней источника семь

411
00:19:17,340 --> 00:19:18,420
м каталога.

412
00:19:18,420 --> 00:19:20,100
Так что у меня есть доступ ко всему.

413
00:19:20,100 --> 00:19:22,230
>> И теперь, если я вернусь в
это список каталогов,

414
00:19:22,230 --> 00:19:24,846
заметьте, я вижу каждый файл с сегодняшнего дня.

415
00:19:24,846 --> 00:19:26,720
И вы увидите, в
Следующий набор проблем, мы будем

416
00:19:26,720 --> 00:19:28,594
дать вам инструкции
для этого именно это.

417
00:19:28,594 --> 00:19:35,210
Если я открываю paragraphs.html, это может
а выглядеть на языке программирования

418
00:19:35,210 --> 00:19:36,970
для вас, если вы не говорите или читать по-латыни.

419
00:19:36,970 --> 00:19:40,525
Но это всего три абзаца
текста, которые отмечены в HTML.

420
00:19:40,525 --> 00:19:43,100
>> И обратите внимание на пункт
перерывы между ними.

421
00:19:43,100 --> 00:19:46,400
Потому что, оказывается,
И даже если вы

422
00:19:46,400 --> 00:19:49,210
может быть склонен сделать это,
в то время как в реальном мире,

423
00:19:49,210 --> 00:19:51,370
если вы хотите, чтобы положить линию
перерывы между вещами,

424
00:19:51,370 --> 00:19:55,680
Вы могли бы довольно просто
это сделать, и ударил Сохранить.

425
00:19:55,680 --> 00:19:59,460
И теперь, если я перезагрузить здесь, уведомление
что все просто стирает вместе

426
00:19:59,460 --> 00:20:01,100
только в одной каплей текста.

427
00:20:01,100 --> 00:20:03,570
Поскольку HTML является своего рода немой язык.

428
00:20:03,570 --> 00:20:07,230
>> Он предназначен для использования в таких
способ, что браузер будет только

429
00:20:07,230 --> 00:20:09,920
сделать явно, что вы говорите это сделать.

430
00:20:09,920 --> 00:20:12,890
Так что, если вы не говорите его
дать мне новый пункт,

431
00:20:12,890 --> 00:20:14,569
Вы не увидите новый пункт.

432
00:20:14,569 --> 00:20:16,360
И в самом деле, что
браузеру собирается сделать

433
00:20:16,360 --> 00:20:20,020
даже если вы попали Enter,
скажем снова и снова

434
00:20:20,020 --> 00:20:23,190
и снова, двигаясь этот текст путь
вниз по экрану, а затем сохранить

435
00:20:23,190 --> 00:20:26,610
а затем перезагрузить браузер будет
свернуть все это белое пространство

436
00:20:26,610 --> 00:20:29,021
И лишь в одном, видимый пробел.

437
00:20:29,021 --> 00:20:29,520
Все в порядке.

438
00:20:29,520 --> 00:20:30,869
Так вот этот тег.

439
00:20:30,869 --> 00:20:32,910
И так что картина
что здесь развивается?

440
00:20:32,910 --> 00:20:37,450
Ну, это, кажется, тот случай, когда
HTML все о запуске тег

441
00:20:37,450 --> 00:20:38,460
и заканчивая тег.

442
00:20:38,460 --> 00:20:39,300
И то, что это тег?

443
00:20:39,300 --> 00:20:41,160
Ну, это просто кусок синтаксиса.

444
00:20:41,160 --> 00:20:44,400
Открыть кронштейн, ключевое слово,
закрытая скобка, это тег.

445
00:20:44,400 --> 00:20:45,510
Или начать тег.

446
00:20:45,510 --> 00:20:48,590
А потом, когда вы
сделано выразить себя,

447
00:20:48,590 --> 00:20:52,300
как в вы закончите с пунктом,
вы так говорите противоположное.

448
00:20:52,300 --> 00:20:55,480
Но обратное не совсем в обратном направлении.

449
00:20:55,480 --> 00:21:00,630
>> Вы просто префикс то же тега
назвать с косой черты, как это.

450
00:21:00,630 --> 00:21:01,130
Все в порядке.

451
00:21:01,130 --> 00:21:02,570
Так что не все, что интересно.

452
00:21:02,570 --> 00:21:05,270
И в самом деле, мы не делая
веб-все, что более интересно.

453
00:21:05,270 --> 00:21:07,630
Что делать, если я хочу сделать
вещи больше и смелые?

454
00:21:07,630 --> 00:21:11,780
Так что получается, что вот пример
в headings.html, где в моем теле,

455
00:21:11,780 --> 00:21:17,280
Я получил H1 тег, H2, H3,
четыре, пять, шесть, все из которых

456
00:21:17,280 --> 00:21:18,310
кажется довольно сложных.

457
00:21:18,310 --> 00:21:21,010
Но если я иду открывать это
Например, давайте взглянем.

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

459
00:21:22,490 --> 00:21:27,030
>> Так браузеры по умолчанию может дать вам текст
это большой и жирный разрозненных размеров.

460
00:21:27,030 --> 00:21:28,070
H1 большой.

461
00:21:28,070 --> 00:21:31,240
Н6 меньше, а затем
все остальное между ними.

462
00:21:31,240 --> 00:21:34,170
Так вот интересно, но по-прежнему
на самом деле не знаю, веб-я.

463
00:21:34,170 --> 00:21:36,870
Что делать, если мы хотим, чтобы у меня
что-то вроде списка. ,

464
00:21:36,870 --> 00:21:40,190
Так вот маркированный список
три дома Гарварда.

465
00:21:40,190 --> 00:21:41,600
>> Как вы идти об этом?

466
00:21:41,600 --> 00:21:45,410
Ну, взгляните на list.html.

467
00:21:45,410 --> 00:21:47,870
И вот, мы видим, что
немного funkiness

468
00:21:47,870 --> 00:21:49,630
но давайте рассмотрим, что происходит.

469
00:21:49,630 --> 00:21:56,182
Так на основе того, что вы только что видели,
UL означает неупорядоченный список.

470
00:21:56,182 --> 00:21:57,640
Ненумерованный список просто означает маркированный.

471
00:21:57,640 --> 00:21:58,431
Там нет числа.

472
00:21:58,431 --> 00:22:01,850
Там также то, что называется
Упорядоченный список, который является ПР по метке.

473
00:22:01,850 --> 00:22:05,350
Затем Л. И., элемент списка все это значит.

474
00:22:05,350 --> 00:22:07,790
>> И так он автоматически
номера все для вас.

475
00:22:07,790 --> 00:22:11,270
Но, опять же, все мои отступы
и пробел просто ради моей.

476
00:22:11,270 --> 00:22:13,050
Браузер не
на самом деле происходит, чтобы заботиться.

477
00:22:13,050 --> 00:22:16,670
Таким образом, даже если вы не смогли
сделать это, просто чтобы быть ясно,

478
00:22:16,670 --> 00:22:19,880
Вы не должны даже хотя
В браузере будет по-прежнему

479
00:22:19,880 --> 00:22:22,130
быть в состоянии понять это просто отлично.

480
00:22:22,130 --> 00:22:24,590
Я удара перезагрузки в моем
браузера, я нажав перезагрузки

481
00:22:24,590 --> 00:22:26,760
и никаких изменений не происходит
потому что браузер по-прежнему

482
00:22:26,760 --> 00:22:29,550
делает именно то, что я говорю это сделать.

483
00:22:29,550 --> 00:22:30,050
>> Все в порядке.

484
00:22:30,050 --> 00:22:31,340
Так что это всего лишь текст.

485
00:22:31,340 --> 00:22:33,730
Теперь давайте сделаем что-то более интересное.

486
00:22:33,730 --> 00:22:36,660
Я собираюсь идти вперед и
заимствовать некоторые из этих HTML.

487
00:22:36,660 --> 00:22:40,910
Я собираюсь идти вперед и
создать новый файл здесь.

488
00:22:40,910 --> 00:22:43,370
И мы называем это rick.html.

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

490
00:22:46,190 --> 00:22:48,916
У нас есть непропорционально
б что-то

491
00:22:48,916 --> 00:22:51,290
называется ролл Рик в этом
класс в этом году, я не знаю

492
00:22:51,290 --> 00:22:53,880
это просто случилось органично.

493
00:22:53,880 --> 00:22:55,397
>> А теперь он получил из-под контроля.

494
00:22:55,397 --> 00:22:56,730
Так что я просто хочу, чтобы пойти с ним.

495
00:22:56,730 --> 00:22:59,700
И если я иду в Google
Изображения и Рик Эстли.

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

497
00:23:02,450 --> 00:23:06,170
Если вы не знаете, почему мы делаем
это, только что прочитал в Википедии.

498
00:23:06,170 --> 00:23:11,520
Каждый раз, когда вы нажали на ссылку,
кто-то где-то смеялся.

499
00:23:11,520 --> 00:23:14,860
И позвольте мне перейти ahead-- есть
мы идем, давайте смотреть на эту фотографию.

500
00:23:14,860 --> 00:23:16,750
>> Так вот у нас есть
изображение в Google Images.

501
00:23:16,750 --> 00:23:19,390
И давайте предположим, что это
разумно везде в интернете.

502
00:23:19,390 --> 00:23:22,570
Так что я буду считать, что это нормально для меня
на самом деле поставить это в моей веб-странице.

503
00:23:22,570 --> 00:23:24,820
Я собираюсь идти вперед
и скопировать URL изображения.

504
00:23:24,820 --> 00:23:28,600
И теперь, если я вернусь в облаке
9, давайте посмотрим, что я могу сделать здесь.

505
00:23:28,600 --> 00:23:30,630
Так вот только веб-страницы.

506
00:23:30,630 --> 00:23:39,020
Это Рик Эстли, ха-ха,
Я собираюсь вернуться в настоящее время

507
00:23:39,020 --> 00:23:43,510
в моем браузере, перезагружать, и интересно.

508
00:23:43,510 --> 00:23:44,530
>> Где Рик?

509
00:23:44,530 --> 00:23:46,050
Итак, позвольте мне видеть то, что случилось.

510
00:23:46,050 --> 00:23:49,114
На самом деле, я собираюсь
притворяться, что я не сделал этого.

511
00:23:49,114 --> 00:23:50,280
[Неразборчиво] положить его здесь.

512
00:23:50,280 --> 00:23:52,520
Мы вернемся к тому, что в настоящее время.

513
00:23:52,520 --> 00:23:54,200
Так вот rick.html.

514
00:23:54,200 --> 00:23:56,070
Так что это не Рик Эстли.

515
00:23:56,070 --> 00:23:59,680
Так что получается, что мы можем
на самом деле добавить его здесь.

516
00:23:59,680 --> 00:24:00,830
Это Рик Эстли.

517
00:24:00,830 --> 00:24:06,680
Я хочу сказать, дать мне изображение которого
источником является URL я просто скопировал, что

518
00:24:06,680 --> 00:24:09,110
по-видимому, является счастливым
день рождения что-то или другое.

519
00:24:09,110 --> 00:24:13,280
>> А теперь я собираюсь
закрыть тег как это.

520
00:24:13,280 --> 00:24:15,170
Так что это упаковка супер долго.

521
00:24:15,170 --> 00:24:17,740
Но обратите внимание, что все, что я
сделано открыт кронштейн изображение,

522
00:24:17,740 --> 00:24:20,270
источник с атрибутом этого.

523
00:24:20,270 --> 00:24:21,530
И это действительно долго URL.

524
00:24:21,530 --> 00:24:23,720
И в самом конце, заметить это.

525
00:24:23,720 --> 00:24:29,530
Почему я сделал слэш углом кронштейн
а, как и любой другой тег,

526
00:24:29,530 --> 00:24:33,590
имеющий открытый кронштейн,
IMG, закрыл кронштейн?

527
00:24:33,590 --> 00:24:37,040
Просто предположение, даже если вы
нет знакомство бы то ни было

528
00:24:37,040 --> 00:24:40,410
с HTML прежде.

529
00:24:40,410 --> 00:24:42,710
>> Так что, как он закрывает
команда, но почему

530
00:24:42,710 --> 00:24:45,850
это не реально сделать интуитивно
смысл делать что-то немного больше

531
00:24:45,850 --> 00:24:48,820
слишком разговорчивым, как тесным образом?

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

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

534
00:24:52,000 --> 00:24:55,620
Просто семантически, нет никакого смысла
начиная изображение и заканчивая изображение,

535
00:24:55,620 --> 00:24:56,870
это либо есть, либо его нет.

536
00:24:56,870 --> 00:25:00,960
Так что нет смысла оставлять зазор
что-нибудь еще внутри изображения.

537
00:25:00,960 --> 00:25:02,010
Вы просто не можете это сделать.

538
00:25:02,010 --> 00:25:03,720
И поэтому синтаксис
как правило, будет просто

539
00:25:03,720 --> 00:25:07,910
сделать косую черту внутри
открытого тега или начального тэга

540
00:25:07,910 --> 00:25:09,020
, а затем ударил Сохранить.

541
00:25:09,020 --> 00:25:13,350
>> Так что, если сейчас я перезагрузить этот файл, в настоящее время
Я получил хороший веб-страницы Готовить здесь.

542
00:25:13,350 --> 00:25:15,100
И, конечно, мы могли бы
действительно раздражать людей

543
00:25:15,100 --> 00:25:17,010
путем внедрения вместо
как ссылку YouTube.

544
00:25:17,010 --> 00:25:19,350
И в самом деле, в любое время
Вы когда-нибудь, чтобы YouTube,

545
00:25:19,350 --> 00:25:22,190
и пусть меня на самом деле случайно
Рик катаюсь здесь.

546
00:25:22,190 --> 00:25:25,770
Так Рик ролл.

547
00:25:25,770 --> 00:25:29,592
Так Рик roll-- я собираюсь ехать сюда.

548
00:25:29,592 --> 00:25:31,900
>> [Играет музыка]

549
00:25:31,900 --> 00:25:33,730
>> ОК, один человек понравилось.

550
00:25:33,730 --> 00:25:37,270
Так заметить все это время, если вы
нажмите Поделиться ссылкой, вы, конечно

551
00:25:37,270 --> 00:25:41,390
получить URL, что вы можете фактически
вставлять в сообщение электронной почты или судебно-изображения

552
00:25:41,390 --> 00:25:43,730
или в задаче установки или в слайде.

553
00:25:43,730 --> 00:25:49,055
И теперь, если я вместо нажмите на врезать,
заметить, что все это время, этот материал

554
00:25:49,055 --> 00:25:49,680
был там.

555
00:25:49,680 --> 00:25:50,910
Я собираюсь идти вперед и скопировать этот.

556
00:25:50,910 --> 00:25:54,000
>> И только так мы можем видеть это лучше, я
собирается вставить его в моей текстового редактора.

557
00:25:54,000 --> 00:25:55,860
Обратите внимание, что это то, что
YouTube уже говорил вам.

558
00:25:55,860 --> 00:25:57,693
Каждый раз, когда вы посетите
YouTube видео, если вы

559
00:25:57,693 --> 00:26:00,410
Чтобы встроить видео на ваш
веб-страницы, просто захватить этот.

560
00:26:00,410 --> 00:26:03,350
Таким образом, это еще один
HTML-теги называют IFRAME.

561
00:26:03,350 --> 00:26:04,590
Или в линии кадра.

562
00:26:04,590 --> 00:26:08,680
Так это тоже выглядит немного более
сложнее, чем всех остальных.

563
00:26:08,680 --> 00:26:11,950
Так что получается, что изображение
тег и, видимо, IFRAME тегов

564
00:26:11,950 --> 00:26:13,370
принять то, что называются атрибутами.

565
00:26:13,370 --> 00:26:15,710
>> И это еще один
кусок синтаксиса HTML.

566
00:26:15,710 --> 00:26:19,240
В дополнение к тега
имя, открывающая скобка имя тега,

567
00:26:19,240 --> 00:26:23,780
Вы можете контролировать поведение тега
имея целый букет атрибута

568
00:26:23,780 --> 00:26:24,860
равна стоимости.

569
00:26:24,860 --> 00:26:26,290
Атрибут равен стоимости.

570
00:26:26,290 --> 00:26:28,100
И так, например,
YouTube говорит нам

571
00:26:28,100 --> 00:26:31,990
если вы хотите ширину этого видео
чтобы быть 420 пикселей, а высота

572
00:26:31,990 --> 00:26:35,470
чтобы быть 315 пикселей, что это
как вы выражаете его в HTML.

573
00:26:35,470 --> 00:26:38,480
>> Источник видео будет
чтобы быть, что долго URL YouTube

574
00:26:38,480 --> 00:26:40,830
а затем некоторые другие вещи
как границы кадра равна нулю,

575
00:26:40,830 --> 00:26:43,500
так что, вероятно, означает, что есть
нет границы вокруг вещи.

576
00:26:43,500 --> 00:26:45,450
Разрешить полный экран, вероятно,
означает, что пользователь

577
00:26:45,450 --> 00:26:47,840
можно нажать кнопку и
на самом деле полный экран видео.

578
00:26:47,840 --> 00:26:52,870
Так что, если я действительно хочу быть
впечатляет здесь, в Рик точка HTML,

579
00:26:52,870 --> 00:26:58,490
а не использовать тег изображения, пусть
мне удалить, что вместо вставьте.

580
00:26:58,490 --> 00:27:00,810
А теперь перезагрузить.

581
00:27:00,810 --> 00:27:02,500
И вот мы идем снова.

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

583
00:27:04,979 --> 00:27:06,020
Ладно, хватит.

584
00:27:06,020 --> 00:27:08,970
Все права, поэтому я постараюсь
трудно не сделать это снова.

585
00:27:08,970 --> 00:27:11,400
Так что некоторые из еды на дом здесь?

586
00:27:11,400 --> 00:27:15,130
Так HTML, уродлив, как эти веб-страниц
являются, на самом деле довольно просто.

587
00:27:15,130 --> 00:27:16,467
Это не язык программирования.

588
00:27:16,467 --> 00:27:17,550
Он не имеет функции.

589
00:27:17,550 --> 00:27:18,410
Он не имеет петель.

590
00:27:18,410 --> 00:27:19,535
Он не имеет условий.

591
00:27:19,535 --> 00:27:22,900
Все это имеет в десятки
различные метки, каждая из которых

592
00:27:22,900 --> 00:27:24,620
имеет ноль или более атрибутов.

593
00:27:24,620 --> 00:27:27,320
И в самом деле, то, что интересно о
HTML, как вы начнете погружаться в

594
00:27:27,320 --> 00:27:29,560
то, что это очень самостоятельной учиться.

595
00:27:29,560 --> 00:27:32,880
>> Все это занимает понимание
в общих рамках HTML.

596
00:27:32,880 --> 00:27:36,510
Что такое тег, что это атрибут,
как вы на самом деле настроить веб-страницу

597
00:27:36,510 --> 00:27:37,250
следующее.

598
00:27:37,250 --> 00:27:40,720
А все остальное действительно результат
искать в интернет-ссылки

599
00:27:40,720 --> 00:27:43,080
или прибегая к помощи, как сделать некоторые
техника или, как мы видели,

600
00:27:43,080 --> 00:27:45,371
глядя на источник в Facebook
Код, глядя на веб-сайте

601
00:27:45,371 --> 00:27:48,710
что вам нравится в нем это исходный код и
понимание того, как разработчики там

602
00:27:48,710 --> 00:27:50,550
на самом деле положил вещи.

603
00:27:50,550 --> 00:27:52,180
>> Таким образом, мы можем сделать изображения, а также.

604
00:27:52,180 --> 00:27:53,994
И в самом деле, мы сделали это мгновение назад.

605
00:27:53,994 --> 00:27:55,410
Позвольте мне идти вперед и просто показать вам.

606
00:27:55,410 --> 00:27:56,770
Вот некоторые примеры кода.

607
00:27:56,770 --> 00:27:58,380
Если вы когда-нибудь хотели, чтобы увидеть сварливый кот.

608
00:27:58,380 --> 00:28:00,620
Так заметить, что я могу
есть тег изображения здесь.

609
00:28:00,620 --> 00:28:02,090
И я получил комментарий выше него.

610
00:28:02,090 --> 00:28:04,490
Я получил альтернативу
Текст для доступности.

611
00:28:04,490 --> 00:28:07,250
Так кто-то, кто с помощью экрана
Читатель по соображениям зрения

612
00:28:07,250 --> 00:28:10,172
может на самом деле, то есть их
чтения с экрана говорят сварливый кот.

613
00:28:10,172 --> 00:28:11,880
Потому что, если они не могут
увидеть изображение, они

614
00:28:11,880 --> 00:28:14,504
может по крайней мере, свой компьютер
сказать им в устной форме, что это такое.

615
00:28:14,504 --> 00:28:18,020
И источник этой файла cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Таким образом, в самом деле, если бы я действительно хотел, чтобы
получить умный, то, что я мог бы done--

617
00:28:22,472 --> 00:28:25,680
Я обещаю не ходить Рик Эстли, так
Я собираюсь Google для кошки, а не.

618
00:28:25,680 --> 00:28:28,290
И если я иду в Google Images
здесь, и мы предполагаем, что

619
00:28:28,290 --> 00:28:30,040
что это фотография моей кошки.

620
00:28:30,040 --> 00:28:35,070
>> Предположим, что у меня есть контроль нажал
или правой нажал на это, случайно

621
00:28:35,070 --> 00:28:35,630
жутко.

622
00:28:35,630 --> 00:28:40,320
И cat.jpeg я собираюсь
чтобы сэкономить на моем рабочем столе.

623
00:28:40,320 --> 00:28:44,700
Позвольте мне теперь вернуться к Cloud 9.

624
00:28:44,700 --> 00:28:48,150
Обратите внимание, что здесь, я могу
перейти к загрузить локальные файлы.

625
00:28:48,150 --> 00:28:51,530
И если я беру это
Файл, cat.jpeg уведомление

626
00:28:51,530 --> 00:28:54,674
что я могу перетащить его и
поместите его в облаке 9

627
00:28:54,674 --> 00:28:56,090
и это будет орать на меня здесь.

628
00:28:56,090 --> 00:28:59,000
>> Потому что мы уже
дал вам файл cat.jpeg,

629
00:28:59,000 --> 00:29:01,430
но это очень легко
захватить фотографию, вы

630
00:29:01,430 --> 00:29:03,220
взяты из Facebook
или Flickr или как

631
00:29:03,220 --> 00:29:05,678
а на самом деле и перетащите его
в облаке 9, а затем сделать его

632
00:29:05,678 --> 00:29:07,970
часть вашего личного
веб-сайт или проблема

633
00:29:07,970 --> 00:29:10,442
установить семь или восемь, как мы скоро увидим.

634
00:29:10,442 --> 00:29:12,150
А потом, когда тебя
наконец, посетить эту кошку,

635
00:29:12,150 --> 00:29:16,610
предполагая, я скачал тот же кот,
Уведомление that--, что было восхитительно.

636
00:29:16,610 --> 00:29:19,160
>> Что бы вы видите
что-то вроде этого лица здесь.

637
00:29:19,160 --> 00:29:21,810
Таким образом, файлы, которые вы
ссылка на веб-странице

638
00:29:21,810 --> 00:29:26,050
может быть либо локальный собственный
счета или дистанционное включение некоторого другого сервера

639
00:29:26,050 --> 00:29:29,670
как и в случае с Rick
Эстли фото немного назад.

640
00:29:29,670 --> 00:29:32,990
Так где else-- что
еще мы можем сделать здесь?

641
00:29:32,990 --> 00:29:34,890
Итак, давайте взглянем на следующее.

642
00:29:34,890 --> 00:29:36,160
Вы знаете, что круто?

643
00:29:36,160 --> 00:29:39,330
>> Мы до сих пор были сделать
очень статические веб-страницы.

644
00:29:39,330 --> 00:29:41,830
Я хочу, чтобы оживить следующим образом.

645
00:29:41,830 --> 00:29:44,344
Я хочу, чтобы мой собственный поисковик.

646
00:29:44,344 --> 00:29:47,010
Таким образом, чтобы сделать поисковик, давайте
идти вперед и начать делать это.

647
00:29:47,010 --> 00:29:52,570
Я собираюсь идти вперед и создавать
новый файл называется search.html.

648
00:29:52,570 --> 00:29:54,890
И мы prefabed версии онлайн.

649
00:29:54,890 --> 00:29:56,027
Упс.

650
00:29:56,027 --> 00:29:57,610
Не вставлять в окна терминала.

651
00:29:57,610 --> 00:29:58,744
Каркасные версии онлайн.

652
00:29:58,744 --> 00:30:00,160
И я собираюсь начать в следующем.

653
00:30:00,160 --> 00:30:04,490
Так вот начало
файл называется search.html.

654
00:30:04,490 --> 00:30:07,510
Я собираюсь сохранить его в
сегодня источник каталог.

655
00:30:07,510 --> 00:30:09,079
Я собираюсь назвать это поиск.

656
00:30:09,079 --> 00:30:10,370
На самом деле, мы сделаем это лучше.

657
00:30:10,370 --> 00:30:13,600
CS50 Поиск и фактически бренд это.

658
00:30:13,600 --> 00:30:17,500
А теперь, я собираюсь сказать,
что-то вроде H1 CS50 Поиск.

659
00:30:17,500 --> 00:30:20,930
А потом сюда, Н2 в ближайшее время.

660
00:30:20,930 --> 00:30:23,230
И только Напомним, H1 и
Н2 в виду то, соответственно?

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

662
00:30:26,750 --> 00:30:30,320
>> Да, так большой и жирный, и
не столь большой, но все еще шрифтом.

663
00:30:30,320 --> 00:30:37,375
Так что, если я сохранить это и идти сюда,
давайте посмотрим файл search.html.

664
00:30:37,375 --> 00:30:42,560
Ладно, и это одно
это right-- [неразборчиво].

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

666
00:30:46,980 --> 00:30:49,110
Поддерживать.

667
00:30:49,110 --> 00:30:49,945
Дэвид находится в замешательстве.

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

669
00:30:52,610 --> 00:30:54,080
О, это прямо там.

670
00:30:54,080 --> 00:30:54,860
Дэвид идиот.

671
00:30:54,860 --> 00:30:55,420
ХОРОШО.

672
00:30:55,420 --> 00:30:56,660
Так что это такое.

673
00:30:56,660 --> 00:30:58,350
Так поиск CS50 в ближайшее время.

674
00:30:58,350 --> 00:31:00,370
Так что теперь, давайте синтезировать
то, что мы сделали на прошлой неделе.

675
00:31:00,370 --> 00:31:03,400
>> Где мы говорили о
более низкие механика уровня на HTTP.

676
00:31:03,400 --> 00:31:05,780
И эти новые идеи
из HTML, который находится всего

677
00:31:05,780 --> 00:31:08,890
это язык разметки, где вас
рассказать браузер, что делать

678
00:31:08,890 --> 00:31:10,740
и осуществлять нашу собственную поисковую систему.

679
00:31:10,740 --> 00:31:12,520
Таким образом, вместо того, чтобы просто
говоря скоро, я

680
00:31:12,520 --> 00:31:14,810
собирается представить
то называется тэг формы.

681
00:31:14,810 --> 00:31:19,610
И в таком виде, я собираюсь
есть что-то вроде поля ввода.

682
00:31:19,610 --> 00:31:22,450
>> И имя этого входа
поле, я буду называть его В.

683
00:31:22,450 --> 00:31:26,240
И тип поля ввода этой
Я хочу сказать, это просто "текст".

684
00:31:26,240 --> 00:31:29,130
И текстовое поле, как мы будем
см, это просто текстовое поле.

685
00:31:29,130 --> 00:31:32,830
И так не чувствует здесь, чтобы
ничего внутри него в этот момент.

686
00:31:32,830 --> 00:31:35,320
И так Я просто собираюсь
закрыть тег с, что

687
00:31:35,320 --> 00:31:38,099
косая черта прямо в самом теге.

688
00:31:38,099 --> 00:31:39,890
А потом я собираюсь
есть еще один вход.

689
00:31:39,890 --> 00:31:43,480
Тип входа равна представить.

690
00:31:43,480 --> 00:31:45,320
А потом я собираюсь
закрыть этот тоже.

691
00:31:45,320 --> 00:31:46,840
>> А теперь я собираюсь вернуться сюда.

692
00:31:46,840 --> 00:31:49,520
И уже мы видим,
хотя довольно уродливые, я имею

693
00:31:49,520 --> 00:31:52,460
получил начало
мое страница поиска здесь.

694
00:31:52,460 --> 00:31:55,150
На самом деле, позвольте мне попытаться
очистить это немного.

695
00:31:55,150 --> 00:31:57,330
Оказывается, что на
вход здесь, я могу иметь

696
00:31:57,330 --> 00:31:59,910
другой атрибут называется заполнитель.

697
00:31:59,910 --> 00:32:05,165
И я мог бы увидеть что-то вроде ключевых слов,
или, более конкретно, запрашивать д.

698
00:32:05,165 --> 00:32:07,820
>> И заметьте, сейчас, у меня есть
этот вид серого текста

699
00:32:07,820 --> 00:32:10,440
что исчезает
только я начинаю печатать,

700
00:32:10,440 --> 00:32:12,930
но это, вероятно, что-то
вы видели в других веб-страниц.

701
00:32:12,930 --> 00:32:14,650
Я действительно не нравится кнопку Отправить.

702
00:32:14,650 --> 00:32:18,320
Так что я на самом деле происходит, чтобы дать
Разместить кнопку значение в этой категории.

703
00:32:18,320 --> 00:32:21,680
И теперь, если я перезагрузить, заметить, что
мой кнопка становится имени Поиск.

704
00:32:21,680 --> 00:32:24,140
Вы знаете, я на самом деле не
как логотип здесь.

705
00:32:24,140 --> 00:32:27,140
Так генератор Google Font.

706
00:32:27,140 --> 00:32:28,820
>> Я хочу, чтобы оживить это дальше.

707
00:32:28,820 --> 00:32:30,660
Так CS50 Поиск.

708
00:32:30,660 --> 00:32:31,870
Позвольте мне создать свой собственный логотип.

709
00:32:31,870 --> 00:32:33,080
Это выглядит красиво.

710
00:32:33,080 --> 00:32:36,945
Так что теперь позвольте мне сохранить этот as-- давай.

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

712
00:32:40,710 --> 00:32:43,120
Где это происходит?

713
00:32:43,120 --> 00:32:43,620
Там.

714
00:32:43,620 --> 00:32:44,160
ХОРОШО.

715
00:32:44,160 --> 00:32:44,980
Пропустил его.

716
00:32:44,980 --> 00:32:47,740
Сохранить как.

717
00:32:47,740 --> 00:32:49,470
Глупые браузеры.

718
00:32:49,470 --> 00:32:51,700
Держитесь крепче, мы собираемся
исправить это раз и навсегда.

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

720
00:32:57,650 --> 00:32:58,590
Там мы идем.

721
00:32:58,590 --> 00:32:59,090
Все в порядке.

722
00:32:59,090 --> 00:32:59,600
Сожалею.

723
00:32:59,600 --> 00:33:00,750
Выходной.

724
00:33:00,750 --> 00:33:02,310
Теперь это фанки.

725
00:33:02,310 --> 00:33:03,160
Выход из полноэкранного режима.

726
00:33:03,160 --> 00:33:04,150
Все в порядке.

727
00:33:04,150 --> 00:33:06,870
>> Теперь, как и обычный
человек, сохранить изображение как.

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

729
00:33:08,810 --> 00:33:13,194
Теперь я собираюсь идти в CS50IDE и
Я собираюсь просто захватить логотип,

730
00:33:13,194 --> 00:33:15,360
Я собираюсь перетащить его в
мой источник семь каталог

731
00:33:15,360 --> 00:33:17,002
файл уже существует, я в порядке с этим.

732
00:33:17,002 --> 00:33:19,210
Так что я собираюсь изменить это
потому что я уже его.

733
00:33:19,210 --> 00:33:20,630
И теперь, как мне избавиться от этого?

734
00:33:20,630 --> 00:33:24,670
>> Давайте идти вперед и делать здесь
Источник изображения равна logo.gif.

735
00:33:24,670 --> 00:33:25,490
Закрыть это.

736
00:33:25,490 --> 00:33:26,050
Сохранить.

737
00:33:26,050 --> 00:33:30,560
И теперь, если я вернусь в моем поиске
страница, теперь это выглядит довольно хорошо.

738
00:33:30,560 --> 00:33:33,610
Ладно, так что не имеет
достаточно сделать что-нибудь полезное.

739
00:33:33,610 --> 00:33:37,000
На самом деле, позвольте мне попробовать поиск
для кошки и посмотреть, что происходит.

740
00:33:37,000 --> 00:33:38,890
Кошки.

741
00:33:38,890 --> 00:33:39,420
Блин.

742
00:33:39,420 --> 00:33:41,400
Это не просто работать, по-видимому.

743
00:33:41,400 --> 00:33:43,760
Так в чем же ключевая часть
что здесь не хватает?

744
00:33:43,760 --> 00:33:49,100
>> Право, даже если вы не знаете, любой HTML,
Я начал разметки телефона форму

745
00:33:49,100 --> 00:33:54,130
и я сказал ему, как получить входы,
дать мне текстовое поле и кнопку отправки,

746
00:33:54,130 --> 00:33:55,730
какой кусок, по-видимому не хватает?

747
00:33:55,730 --> 00:33:58,975
Предположим, мы хотим на самом деле получить
эта вещь работает правильно.

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

749
00:34:02,420 --> 00:34:05,360
Что нам нужно сделать?

750
00:34:05,360 --> 00:34:08,860
У нас есть необходимость осуществления задний конец
базы данных или сама поисковая система,

751
00:34:08,860 --> 00:34:11,210
и что собирается взять
Вся много времени, честно говоря.

752
00:34:11,210 --> 00:34:13,380
>> Так что помните, что мы сделали в прошлый раз.

753
00:34:13,380 --> 00:34:18,230
Так что если вы ищете что-то на Google
и вы заранее выключен,

754
00:34:18,230 --> 00:34:20,355
Напомним, мгновенного поиска.

755
00:34:20,355 --> 00:34:22,230
Итак, позвольте мне обратиться, что с
таким образом, что это на самом деле

756
00:34:22,230 --> 00:34:26,650
ведет себя как старший школьный браузере
если я теперь искать что-то вроде кошек,

757
00:34:26,650 --> 00:34:28,190
Напомним, что URL-выглядит.

758
00:34:28,190 --> 00:34:29,449
Это довольно загадочным.

759
00:34:29,449 --> 00:34:33,000
Но встроенная в есть,
Напомним, это поиск слэш.

760
00:34:33,000 --> 00:34:35,100
Вопросительный знак Вопрос равна кошек.

761
00:34:35,100 --> 00:34:37,760
>> И, казалось бы, дать мне
целая куча результатов поиска.

762
00:34:37,760 --> 00:34:39,134
Таким образом, вы знаете, что я собираюсь сделать?

763
00:34:39,134 --> 00:34:41,650
Я собираюсь брать
Google на минутку.

764
00:34:41,650 --> 00:34:43,670
Я собираюсь перейти на
здесь, и я хочу сказать,

765
00:34:43,670 --> 00:34:47,850
что это формирует действия или
назначения, так сказать,

766
00:34:47,850 --> 00:34:49,330
должны быть в буквальном смысле Google.

767
00:34:49,330 --> 00:34:52,590
И метод я хотел
использованию будет получить.

768
00:34:52,590 --> 00:34:53,560
>> Так что это действие?

769
00:34:53,560 --> 00:34:55,760
Действие странно имени,
но это просто означает,

770
00:34:55,760 --> 00:34:58,120
кто собирается обращаться
действие этой формы?

771
00:34:58,120 --> 00:35:00,820
Когда я нажимаю поиск, где
Если результат идти?

772
00:35:00,820 --> 00:35:05,300
И если сейчас я возвращаюсь к форме
здесь и перезагрузить моей веб-странице

773
00:35:05,300 --> 00:35:09,000
и в настоящее время искать что-то
как собаки, обратите внимание, в настоящее время

774
00:35:09,000 --> 00:35:10,850
Я вновь реализованы Google.

775
00:35:10,850 --> 00:35:11,350
Правильно?

776
00:35:11,350 --> 00:35:14,141
>> Если я хочу, чтобы искать что-то
иначе, это работает не просто для собак,

777
00:35:14,141 --> 00:35:16,400
он также работает на кошек.

778
00:35:16,400 --> 00:35:21,930
Он также работает для CS50.

779
00:35:21,930 --> 00:35:24,310
И хорошо, что это просто
под подавляющем, не так ли?

780
00:35:24,310 --> 00:35:25,920
Ладно, но это на самом деле работает.

781
00:35:25,920 --> 00:35:27,360
Так что на самом деле происходит?

782
00:35:27,360 --> 00:35:31,340
Так что я научил мой браузер, используя
HTML, чтобы ввод от пользователя

783
00:35:31,340 --> 00:35:35,810
и на самом деле отправить этот вход
на удаленный сервер с помощью протокола HTTP.

784
00:35:35,810 --> 00:35:39,120
>> И потому, что мой браузер
понимает HTTP, это на самом деле

785
00:35:39,120 --> 00:35:43,500
построить URL так что то,
Я в конечном итоге более в моем браузере,

786
00:35:43,500 --> 00:35:45,660
заметить, что происходит
когда я искал для собак.

787
00:35:45,660 --> 00:35:49,270
Если я нажимаю поиск, заметить, что
URL-адрес меняется, как я предназначено

788
00:35:49,270 --> 00:35:52,770
чтобы google.com/search~~V запрос равна собаку.

789
00:35:52,770 --> 00:35:56,020
И это потому, что в виде
знает, потому что метод GET,

790
00:35:56,020 --> 00:35:59,560
просто добавить его к этому URL там.

791
00:35:59,560 --> 00:36:01,730
>> Теперь, эти веб-страницы по-прежнему уродливым.

792
00:36:01,730 --> 00:36:04,890
Так давайте познакомимся один
кусок синтаксиса, если мы можем сегодня.

793
00:36:04,890 --> 00:36:07,640
И это то, что известно
каскадные таблицы стилей.

794
00:36:07,640 --> 00:36:10,720
Итак, позвольте мне взглянуть на
этот пример здесь и посмотреть,

795
00:36:10,720 --> 00:36:12,380
если мы можем сделать вывод, что происходит.

796
00:36:12,380 --> 00:36:14,520
Это CSS0.html.

797
00:36:14,520 --> 00:36:16,532
И это то, где вещи
получить немного некрасиво.

798
00:36:16,532 --> 00:36:18,490
Потому что, к сожалению,
в мире Интернета,

799
00:36:18,490 --> 00:36:20,920
HTML в одиночку не может сделать все.

800
00:36:20,920 --> 00:36:22,920
И поэтому, если вы хотите, чтобы
стилизовать свою веб-страницу,

801
00:36:22,920 --> 00:36:28,370
Вы на самом деле нужно, чтобы сосредоточиться на
эстетика по-другому.

802
00:36:28,370 --> 00:36:33,090
Так вот, у меня есть тело мое сети
страница внутри которого находится большая дел.

803
00:36:33,090 --> 00:36:34,700
И DIV просто означает разделение.

804
00:36:34,700 --> 00:36:38,060
Так что это, как это, но пункте
не имеет ту же семантику

805
00:36:38,060 --> 00:36:39,180
абзаца текста.

806
00:36:39,180 --> 00:36:40,940
>> Это просто означает, к
браузера, вот идет

807
00:36:40,940 --> 00:36:45,210
большая прямоугольная область моей сети
страница, я хочу, чтобы обрабатывать его специально.

808
00:36:45,210 --> 00:36:47,420
Теперь, линия 21, где начинается что дел.

809
00:36:47,420 --> 00:36:48,770
И только сделать предположение.

810
00:36:48,770 --> 00:36:53,080
Какой эффект линии 21 на
Остальные содержимого страницы?

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

812
00:36:55,640 --> 00:36:56,311
Центрирующий его.

813
00:36:56,311 --> 00:36:56,810
Вот и все.

814
00:36:56,810 --> 00:36:58,830
Таким образом, мы не видели способ
фактически центрирования текста.

815
00:36:58,830 --> 00:37:00,996
>> На самом деле, мой поисковой системы,
в отличие от фактического Google,

816
00:37:00,996 --> 00:37:03,040
все было оправдано на левую.

817
00:37:03,040 --> 00:37:07,430
И вот теперь в строке 21, я говорю, эй
браузеру, создать разделение страницы.

818
00:37:07,430 --> 00:37:09,450
Просто дайте мне большой, невидимый прямоугольник.

819
00:37:09,450 --> 00:37:11,490
Вот как я хочу, чтобы
думать о веб-странице.

820
00:37:11,490 --> 00:37:13,870
А потом стилизовать его следующим образом.

821
00:37:13,870 --> 00:37:16,900
Внутри этих кавычек,
Теперь, является вторым языком

822
00:37:16,900 --> 00:37:19,969
что мы ввели сегодня
называемые каскадные таблицы стилей.

823
00:37:19,969 --> 00:37:22,010
К счастью, это тоже не
язык программирования,

824
00:37:22,010 --> 00:37:26,470
так что это очень ограничены в синтаксисе, но
Также очень ограничены в своей функциональности

825
00:37:26,470 --> 00:37:30,670
в то время как HTML это все о
разметки данные веб-страницы

826
00:37:30,670 --> 00:37:32,130
и структура веб-страницы.

827
00:37:32,130 --> 00:37:35,320
CSS, как правило, примерно
последней мили, эстетика,

828
00:37:35,320 --> 00:37:40,160
Получение размера и цвета и
Размещение точно прямо в веб-страницы.

829
00:37:40,160 --> 00:37:43,000
И в самом деле, он формируется
с пар ключ-значение.

830
00:37:43,000 --> 00:37:46,290
>> Свойство, как это, текст
выравнивать, за которым следует двоеточие,

831
00:37:46,290 --> 00:37:49,720
с последующим значением, что
свойство, которое в данном случае является центром.

832
00:37:49,720 --> 00:37:51,910
А теперь обратите внимание вам
могут гнездиться эти вещи.

833
00:37:51,910 --> 00:37:56,780
Если я хотел, чтобы все, что
Я выделил, сосредоточены,

834
00:37:56,780 --> 00:38:00,270
Вот почему у меня есть строка 21 и
соответствующая линия 31.

835
00:38:00,270 --> 00:38:04,820
Но теперь предположим, хочу сказать, Иоанна
Гарвард, добро пожаловать на мою домашнюю страницу.

836
00:38:04,820 --> 00:38:06,530
>> Символ Copyright Джон Гарвард.

837
00:38:06,530 --> 00:38:09,180
И предположим, я хочу в первую
эти строки, чтобы быть довольно большой.

838
00:38:09,180 --> 00:38:10,450
36 пикселей.

839
00:38:10,450 --> 00:38:11,530
Так вот приличного размера.

840
00:38:11,530 --> 00:38:13,240
И я хотел его вес должен быть смелым.

841
00:38:13,240 --> 00:38:15,450
Но тогда, что ниже,
Я хочу мелкий текст.

842
00:38:15,450 --> 00:38:19,980
И ниже, что я хочу,
еще меньше текст.

843
00:38:19,980 --> 00:38:20,480
Сожалею.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Сегодня чувствует как выходной день.

846
00:38:26,940 --> 00:38:29,840
>> Так что теперь, что я делаю, чтобы выразить это?

847
00:38:29,840 --> 00:38:34,580
Здесь, на линии 22 является встроенный
DIV DIV или вложенный, если вы будете.

848
00:38:34,580 --> 00:38:36,190
Это тоже имеет свой собственный тег стиля.

849
00:38:36,190 --> 00:38:38,160
Я указать размер шрифта 36.

850
00:38:38,160 --> 00:38:40,460
Я указать вес шрифта смелый.

851
00:38:40,460 --> 00:38:43,360
Здесь, внизу, я только указать 24 пикселей.

852
00:38:43,360 --> 00:38:45,960
И, наконец, в строке 28, я указываю 12.

853
00:38:45,960 --> 00:38:49,070
Так как для быстрой проверки вменяемости
и как человек читает это,

854
00:38:49,070 --> 00:38:52,545
какие слова на экране,
на самом деле происходит, чтобы быть смелым?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Какие строки на самом деле смелый?

857
00:38:58,760 --> 00:38:59,570
>> Просто Джон Гарвард.

858
00:38:59,570 --> 00:39:00,070
Правильно?

859
00:39:00,070 --> 00:39:05,940
Потому как линия 22, говорит, эй
браузеру, вот раздел страницы.

860
00:39:05,940 --> 00:39:07,920
Сделать размер шрифта 36 очко.

861
00:39:07,920 --> 00:39:09,460
Сделать вес шрифта смелый.

862
00:39:09,460 --> 00:39:11,920
Как только вы достигнете
Соответствующий закрывающий тег

863
00:39:11,920 --> 00:39:15,340
или закрытое тега в строке 24,
Это означает, что эй-браузер,

864
00:39:15,340 --> 00:39:17,640
перестать делать то, что вы делаете.

865
00:39:17,640 --> 00:39:21,020
И заметьте, что ясно, хотя
линия 22 имеет все эти атрибуты

866
00:39:21,020 --> 00:39:24,430
как стиль, когда вам
закрыть тег в строке 24,

867
00:39:24,430 --> 00:39:25,940
Вы только упомянуть имя тега.

868
00:39:25,940 --> 00:39:29,990
>> Вы не повторить стиль слово или
все, что находится внутри этих кавычек.

869
00:39:29,990 --> 00:39:32,860
И поэтому, если я смотрю на это сейчас
в моем браузере, давайте

870
00:39:32,860 --> 00:39:38,060
Взгляд на конечный результат. Отпусти меня
вперед к этому файлу, который CSS 0.

871
00:39:38,060 --> 00:39:41,814
И это все еще довольно простой,
но становится довольно интересно.

872
00:39:41,814 --> 00:39:43,980
Но, оказывается, есть
другие вещи, которые я могу сделать здесь,

873
00:39:43,980 --> 00:39:46,490
и на риск принятия
это полностью отвратительно,

874
00:39:46,490 --> 00:39:48,630
заметить здесь, что в моем
Тело моей веб-странице,

875
00:39:48,630 --> 00:39:53,930
Я могу сделать что-то смешное
как БГ или цвет фона.

876
00:39:53,930 --> 00:39:56,670
>> И быстро, что ваш любимый цвет?

877
00:39:56,670 --> 00:39:57,720
Зеленый я слышал.

878
00:39:57,720 --> 00:39:58,750
Все в порядке.

879
00:39:58,750 --> 00:40:02,920
Так что теперь, если я ударил перезагрузка сейчас,
у нас есть зеленый веб-страницы.

880
00:40:02,920 --> 00:40:04,710
Ладно, так что это не плохо.

881
00:40:04,710 --> 00:40:08,350
И теперь, если я хочу, чтобы это действительно
круто, я могу сделать цвет моего текста

882
00:40:08,350 --> 00:40:09,360
даже красный.

883
00:40:09,360 --> 00:40:10,870
Итак, давайте посмотрим, как это выглядит.

884
00:40:10,870 --> 00:40:12,230
Теперь это выглядит довольно хорошо.

885
00:40:12,230 --> 00:40:15,460
И здесь, если вы действительно
хотите возиться с кем-то

886
00:40:15,460 --> 00:40:17,487
или если вы хотите быть
один из тех людей, которые

887
00:40:17,487 --> 00:40:20,570
пытается обмануть вас в посещение веб
страница, потому что они обманули Google

888
00:40:20,570 --> 00:40:27,610
в мышлении есть целая куча
ключевых слов like-- давайте посмотрим, перезагрузить.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Куда он делся?

891
00:40:30,680 --> 00:40:31,530
А там нас.

892
00:40:31,530 --> 00:40:32,030
Все в порядке.

893
00:40:32,030 --> 00:40:34,905
Поэтому я говорю это, как в сторону, мы будем
говорить об этом материале в течение нескольких недель

894
00:40:34,905 --> 00:40:36,740
когда мы говорим о
безопасности, если вы на самом деле

895
00:40:36,740 --> 00:40:38,852
вставлять целые гроздья
ключевые слова в веб-страницы,

896
00:40:38,852 --> 00:40:41,810
даже если они не видны к
человек, кто-то, как Google, конечно,

897
00:40:41,810 --> 00:40:43,250
может еще на самом деле найти это.

898
00:40:43,250 --> 00:40:45,820
Ладно, так что это довольно
отвратительный довольно быстро.

899
00:40:45,820 --> 00:40:48,420
>> И в самом деле, это далеко не все
что многое в отличие от моего собственного веб

900
00:40:48,420 --> 00:40:51,480
страница как студент, который
Я начал прибегая к помощи вокруг, чтобы найти

901
00:40:51,480 --> 00:40:53,690
предыдущие версии моих старых сайтов.

902
00:40:53,690 --> 00:40:54,500
Это было довольно плохо.

903
00:40:54,500 --> 00:40:56,650
На самом деле, я нашел
одним только перед классом.

904
00:40:56,650 --> 00:40:58,620
Но еще хуже, там.

905
00:40:58,620 --> 00:41:01,534
Это, видимо, был мой
Главная страница назад в 1996 году.

906
00:41:01,534 --> 00:41:04,200
Видимо, я думал, что это было
уместно спросить людей свое имя

907
00:41:04,200 --> 00:41:05,991
прежде чем они могли
на самом деле вижу свою веб-страницу.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> И тогда я показал им
то глупо, наверное.

910
00:41:11,920 --> 00:41:13,450
Я выкопать более в следующий раз.

911
00:41:13,450 --> 00:41:16,220
Но сейчас, давайте
Рассмотрим немного дизайн.

912
00:41:16,220 --> 00:41:17,444
Мы говорили о стиле.

913
00:41:17,444 --> 00:41:19,735
И эту страницу сих пор, и
большинство все, что я написал

914
00:41:19,735 --> 00:41:21,890
довольно чистый стилистически.

915
00:41:21,890 --> 00:41:23,320
Но то, что о дизайне?

916
00:41:23,320 --> 00:41:25,990
Ну, есть много избыточности
в том, что я делаю здесь.

917
00:41:25,990 --> 00:41:28,156
>> Я упомянул слово
цвет в нескольких местах.

918
00:41:28,156 --> 00:41:31,630
Я упомянул размер шрифта в пару
места и смелое в нескольких местах.

919
00:41:31,630 --> 00:41:34,870
И принципиально, я сотрудничества
смешивание двух языков.

920
00:41:34,870 --> 00:41:38,100
У меня с моими HTML-теги и мой
атрибуты, а затем вдруг,

921
00:41:38,100 --> 00:41:40,100
кавычки, я
второй язык сегодня

922
00:41:40,100 --> 00:41:43,830
называется CSS, который опять-таки, только эти
пар ключ-значение или эти свойства

923
00:41:43,830 --> 00:41:45,280
разделенных двоеточиями.

924
00:41:45,280 --> 00:41:47,700
>> Оказывается, что многое
как в C, где мы

925
00:41:47,700 --> 00:41:50,550
может начать вынести
некоторый код в файлы заголовков,

926
00:41:50,550 --> 00:41:53,520
так мы можем сделать то же самое в HTML.

927
00:41:53,520 --> 00:41:56,030
И шаг к что происходит следующим образом.

928
00:41:56,030 --> 00:42:02,230
Обратите внимание, что эта версия, является CSS1.html
Конструктивно тот же веб-страницу.

929
00:42:02,230 --> 00:42:05,250
Так что я получил целую кучу
из дивы, но на этот раз, у меня

930
00:42:05,250 --> 00:42:07,220
избавился от обертки
DIV, как вы увидите.

931
00:42:07,220 --> 00:42:12,390
>> И я дал эти три дивы
верхней, средней, и снизу, уникальные идентификаторы.

932
00:42:12,390 --> 00:42:14,760
Это хорошо, потому что
давая те подразделения

933
00:42:14,760 --> 00:42:18,715
из страниц уникальных идентификаторов,
Я могу ссылаться на них в другом месте.

934
00:42:18,715 --> 00:42:19,215
Где?

935
00:42:19,215 --> 00:42:21,070
Ну, позвольте мне прокрутку вверх.

936
00:42:21,070 --> 00:42:24,070
И до сих пор, в любое время мы смотрели
на голове веб-страницы, что

937
00:42:24,070 --> 00:42:28,560
только тег мы имели в
руководитель веб-странице?

938
00:42:28,560 --> 00:42:29,740
Чуть громче.

939
00:42:29,740 --> 00:42:30,799
Просто название до сих пор.

940
00:42:30,799 --> 00:42:32,590
Но, оказывается, есть
несколько других вещей,

941
00:42:32,590 --> 00:42:35,840
Вы можете положить туда, один из
который он называется тегом стиль.

942
00:42:35,840 --> 00:42:37,850
Так некоторое время назад, мы смотрели
в виде атрибута стиля.

943
00:42:37,850 --> 00:42:39,150
Оказывается, есть тег стиль.

944
00:42:39,150 --> 00:42:41,200
Он принадлежит внутри
руководитель веб-странице.

945
00:42:41,200 --> 00:42:42,840
А теперь обратите внимание, что я делаю.

946
00:42:42,840 --> 00:42:46,540
У меня внутри этого
стиль тега следующее.

947
00:42:46,540 --> 00:42:51,190
Я буквально отметить на линии 20
имя тега, что я хочу, чтобы стилизовать.

948
00:42:51,190 --> 00:42:53,489
>> Тогда у меня есть открытый фигурную скобку
и закрыл фигурную скобку.

949
00:42:53,489 --> 00:42:56,030
Так близки по духу C, но
опять же, это не функция,

950
00:42:56,030 --> 00:42:57,796
это просто синтаксический здесь подробно.

951
00:42:57,796 --> 00:43:00,170
И тогда я, конечно, говорю
браузер, эй-браузер,

952
00:43:00,170 --> 00:43:05,210
сделать все тело страницы
есть выравнивание текста по центру.

953
00:43:05,210 --> 00:43:06,930
И тогда это говорит следующее.

954
00:43:06,930 --> 00:43:12,600
Эй-браузер, если вы видите HTML
элемент или тэг на странице, что

955
00:43:12,600 --> 00:43:17,040
имеет уникальный идентификатор верхней,
поэтому символ хэш здесь просто означает,

956
00:43:17,040 --> 00:43:21,010
Уникальная идея вершину, идти вперед
и сделать его размер шрифта 36

957
00:43:21,010 --> 00:43:22,490
а его вес шрифта смелый.

958
00:43:22,490 --> 00:43:26,840
>> Эй-браузер, элемент которого
ID средняя, ​​сделать это 24 пикселей.

959
00:43:26,840 --> 00:43:31,070
И эй-браузер, если вы видите
Идея дно, сделать это 12 пикселей.

960
00:43:31,070 --> 00:43:33,540
Эффект в конце
это точно Сэм.

961
00:43:33,540 --> 00:43:36,500
Если я иду в CSS 1,
страница выглядит так же.

962
00:43:36,500 --> 00:43:39,810
Но мы шаг к
немного лучше дизайн.

963
00:43:39,810 --> 00:43:44,850
Позвольте мне теперь вернуться сюда, чтобы CSS2
и посмотреть, что еще я сделал.

964
00:43:44,850 --> 00:43:48,030
>> Теперь страница действительно, действительно чистый.

965
00:43:48,030 --> 00:43:50,730
На самом деле, я могу соответствовать всем
содержимое на странице здесь.

966
00:43:50,730 --> 00:43:54,270
Но то, что новый тег я
введена, очевидно?

967
00:43:54,270 --> 00:43:54,770
Ссылка.

968
00:43:54,770 --> 00:43:57,853
И это не лучшее название для тега,
потому что это не ссылка в смысле

969
00:43:57,853 --> 00:44:00,780
что мы знаем это, но это означает,
ссылку в какой-то другой файл.

970
00:44:00,780 --> 00:44:02,890
Это вроде как резкое включают в С.

971
00:44:02,890 --> 00:44:06,280
>> Это путь в HTML
сказать эй браузер,

972
00:44:06,280 --> 00:44:10,240
иди содержимое
файл называется css2.css.

973
00:44:10,240 --> 00:44:12,880
Отношения, мне,
то, что это таблица стилей.

974
00:44:12,880 --> 00:44:17,980
И в самом деле, это то, что одним из
S годов в каскадные таблицы стилей средствами.

975
00:44:17,980 --> 00:44:20,350
Это таблица стилей.

976
00:44:20,350 --> 00:44:23,120
Это просто текстовый файл, содержащий
целая куча имущества.

977
00:44:23,120 --> 00:44:25,940
Это целый букет стилей
что вы хотите, чтобы применить к странице.

978
00:44:25,940 --> 00:44:28,860
>> И так это, видимо,
ссылаясь на втором файле.

979
00:44:28,860 --> 00:44:32,970
И если я открываю, что CSS2.css,
заметить, что все, что я сделал

980
00:44:32,970 --> 00:44:35,900
это скопировать и вставить все
это в этот файл.

981
00:44:35,900 --> 00:44:38,220
И теперь, даже если вы никогда не
кодируется этот материал раньше,

982
00:44:38,220 --> 00:44:40,700
просто рассмотреть с
пресловутый инженерно шляпа

983
00:44:40,700 --> 00:44:44,220
на, почему это
лучше дизайн вероятно?

984
00:44:44,220 --> 00:44:48,910
Факторинг из этих свойств CSS,
положить их в свой файл.

985
00:44:48,910 --> 00:44:51,330
Даже если мы решили это
Проблема, как пять минут назад

986
00:44:51,330 --> 00:44:52,600
в самой первой версии.

987
00:44:52,600 --> 00:44:55,730
>> Мы не улучшилось
страница стилистически,

988
00:44:55,730 --> 00:44:57,520
это просто лучше
дизайн в каком-то смысле.

989
00:44:57,520 --> 00:44:58,990
Почему вы думаете?

990
00:44:58,990 --> 00:45:01,510
Да.

991
00:45:01,510 --> 00:45:02,260
Более гибкая, как?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Да.

994
00:45:05,540 --> 00:45:07,373
Так что, если вы хотите пойти
назад и изменить вещи,

995
00:45:07,373 --> 00:45:09,540
Теперь, у вас есть одно место,
где вы можете изменить положение вещей.

996
00:45:09,540 --> 00:45:11,622
И в самом деле, что-то
как проблема установить семь,

997
00:45:11,622 --> 00:45:13,690
где мы будем реализовать
торговля акциями сайт,

998
00:45:13,690 --> 00:45:15,523
что происходит, чтобы иметь
целая куча страниц.

999
00:45:15,523 --> 00:45:17,620
И это было бы действительно
раздражает, если вы решите, хм,

1000
00:45:17,620 --> 00:45:21,630
Я не очень люблю 24 пикселей, я хочу
это будет 28 пикселей или немного больше.

1001
00:45:21,630 --> 00:45:23,550
И тогда придется сделать
Глобальный поиск и замена

1002
00:45:23,550 --> 00:45:27,560
или открыть все файлы вашего сайта
просто на самом деле изменить одно значение.

1003
00:45:27,560 --> 00:45:31,290
По факторинга эти стили
в одном месте,

1004
00:45:31,290 --> 00:45:34,720
Теперь вы можете открыть один текстовый файл
в CS50IDE в любой программе,

1005
00:45:34,720 --> 00:45:36,479
изменить его, сохранить его, и сделано.

1006
00:45:36,479 --> 00:45:38,270
Вы распространяются те
изменения везде.

1007
00:45:38,270 --> 00:45:42,450
И, что бы быть такой же,
в дот ч файла, а также.

1008
00:45:42,450 --> 00:45:46,697
Так какие-либо вопросы, таким образом,
далеко от этого синтаксиса?

1009
00:45:46,697 --> 00:45:48,530
Все права, поэтому мы
сделали все, кажется,

1010
00:45:48,530 --> 00:45:51,170
кроме фактической реализации гиперссылки.

1011
00:45:51,170 --> 00:45:52,740
И так давайте идти вперед и делать это.

1012
00:45:52,740 --> 00:45:54,830
Позвольте мне идти вперед и
создать новый файл здесь.

1013
00:45:54,830 --> 00:45:59,970
Я буду называть его
link.html, положить в сегодняшнем коде.

1014
00:45:59,970 --> 00:46:03,000
>> И я собираюсь сделать открытым
Кронштейн тип документа HTML.

1015
00:46:03,000 --> 00:46:05,970
Как в сторону, это вещь в
сверху, этот документ типа декларации,

1016
00:46:05,970 --> 00:46:08,420
это единственное, что странно
с восклицательным знаком.

1017
00:46:08,420 --> 00:46:12,100
Вы просто должны это делать там, и это
означает, что мы используем HTML версии 5.

1018
00:46:12,100 --> 00:46:14,460
Старые версии
язык имел намного дольше

1019
00:46:14,460 --> 00:46:16,400
струны, что вам нужно, чтобы поставить там.

1020
00:46:16,400 --> 00:46:18,620
Так вот пример называется ссылку.

1021
00:46:18,620 --> 00:46:20,950
>> Мне нужно тело моей веб-странице здесь.

1022
00:46:20,950 --> 00:46:29,770
И здесь, а равно HREF
скажем HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
и мой любимый сайт, мы будем говорить.

1024
00:46:35,420 --> 00:46:38,550
Ладно, так что очень
безобидно, удобный страница.

1025
00:46:38,550 --> 00:46:42,950
Если я сейчас углубляться в моем каталоге
листинг тут и открыть link.html,

1026
00:46:42,950 --> 00:46:44,780
у нас есть гипер текста.

1027
00:46:44,780 --> 00:46:47,410
>> И в самом деле, это где
Н в HTTP приходит.

1028
00:46:47,410 --> 00:46:51,580
Протокол передачи гипертекста
о передаче текста

1029
00:46:51,580 --> 00:46:53,840
что имеет гиперссылки на другие ресурсы.

1030
00:46:53,840 --> 00:46:58,210
И в самом деле, здесь знакомо,
если ретро, ​​синий ссылку, что если нажата,

1031
00:46:58,210 --> 00:47:02,607
фактически приведет меня к Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Теперь, о, что выходит в ближайшее время.

1033
00:47:03,940 --> 00:47:08,970
Ладно, так что теперь, что некоторые
о последствиях этого?

1034
00:47:08,970 --> 00:47:11,610
>> И, честно говоря, мир начинает
чтобы получить немного больше знакомы

1035
00:47:11,610 --> 00:47:15,090
а также немного страшнее
но также немного более

1036
00:47:15,090 --> 00:47:17,840
самостоятельно оправданным как только вы начинаете
чтобы понять эти вещи.

1037
00:47:17,840 --> 00:47:21,610
Потому что шансы, что некоторые из вас, если вы идете
через папку со спамом Gmail или даже

1038
00:47:21,610 --> 00:47:23,990
Ваш почтовый ящик, вы, вероятно,
получил какой-то электронной почте

1039
00:47:23,990 --> 00:47:26,980
что просит вас, чтобы изменить свою
пароль может быть или может быть проверить

1040
00:47:26,980 --> 00:47:28,910
Ваши учетные данные PayPal или этажерка.

1041
00:47:28,910 --> 00:47:34,510
>> И в самом деле, вы, возможно, получили
то, что говорит, как нажмите здесь

1042
00:47:34,510 --> 00:47:42,260
сбросить пароль PayPal.

1043
00:47:42,260 --> 00:47:44,130
А теперь обратите внимание, если
это не Disney.com

1044
00:47:44,130 --> 00:47:51,600
но, как и badplace.com
перезагрузить, обратите внимание, что текст здесь

1045
00:47:51,600 --> 00:47:53,710
может сказать что-нибудь вообще.

1046
00:47:53,710 --> 00:47:55,260
И в самом деле, это всего лишь слова.

1047
00:47:55,260 --> 00:48:04,610
Почему не я на самом деле супер вредоносный
и сказать http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Нажмите здесь, сбросить PayPal
пароль и теперь перезагрузить.

1049
00:48:14,090 --> 00:48:16,220
Это выглядит довольно законным, верно?

1050
00:48:16,220 --> 00:48:20,470
Я имею в виду, я не щелкнул бы на
по электронной почте, что только говорит, что это.

1051
00:48:20,470 --> 00:48:22,450
Но обратите внимание дихотомию.

1052
00:48:22,450 --> 00:48:26,880
Это говорит www.paypal.com,
и в самом деле, погоди,

1053
00:48:26,880 --> 00:48:29,210
мы знаем, что вы хотите
Индекс S для обеспечения безопасности.

1054
00:48:29,210 --> 00:48:35,450
Так что теперь, пойти в www.paypal.com HTTPS,
но если вы никогда не делали этого раньше,

1055
00:48:35,450 --> 00:48:38,182
действительно получают в привычку
зависший над маленькими ссылкам здесь.

1056
00:48:38,182 --> 00:48:39,890
И это трудно понять,
На экране есть,

1057
00:48:39,890 --> 00:48:41,340
и это еще не все, что легче здесь.

1058
00:48:41,340 --> 00:48:43,615
Но путь здесь, в
крошечный маленький уголок

1059
00:48:43,615 --> 00:48:45,740
делает браузер на самом деле
сказать вам, что мы собираемся

1060
00:48:45,740 --> 00:48:48,850
чтобы badplace.com вместо Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Теперь, когда мы собираемся с этим?

1062
00:48:51,620 --> 00:48:54,859
Все примеры, которые мы сделали сегодня,
мы жестко и ввели вручную.

1063
00:48:54,859 --> 00:48:56,900
Веб невероятно
неинтересно, когда вам трудно

1064
00:48:56,900 --> 00:48:59,844
код веб-страниц, так что содержание
статична и никогда не меняется.

1065
00:48:59,844 --> 00:49:01,760
Конечно, все наши
любимые веб-сайты сегодня,

1066
00:49:01,760 --> 00:49:04,470
будь то Gmail или Twitter или
Facebook или любое количество других

1067
00:49:04,470 --> 00:49:05,290
динамичны.

1068
00:49:05,290 --> 00:49:07,340
Они меняются в
ответ на действия пользователя

1069
00:49:07,340 --> 00:49:08,840
так же, как в результатах поиска Google.

1070
00:49:08,840 --> 00:49:12,415
>> И так в среду, что мы делаем,
мы оставляем HTML и CSS введение

1071
00:49:12,415 --> 00:49:14,290
позади нас, и мы берем
собой разумеющимся, что мы теперь

1072
00:49:14,290 --> 00:49:16,640
знаю его и введем
новый язык программирования

1073
00:49:16,640 --> 00:49:19,050
называется PHP, который нравится
С, собирается дать нам

1074
00:49:19,050 --> 00:49:22,450
власть фактически создать программы
что сами по себе генерировать вывод.

1075
00:49:22,450 --> 00:49:25,900
В этом случае, мы будем использовать
PHP для создания динамически Интернет

1076
00:49:25,900 --> 00:49:27,340
страницы, используя этот новый язык.

1077
00:49:27,340 --> 00:49:28,989
Так об этом в среду.

1078
00:49:28,989 --> 00:49:29,530
Тогда увидимся.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [Играет музыка]

1081
00:49:37,380 --> 00:52:38,864