1
00:00:00,000 --> 00:00:06,100

2
00:00:06,100 --> 00:00:08,790
>> ДАГ Lloyd: Так мы провели
about-- если моя математика является правильным,

3
00:00:08,790 --> 00:00:11,900
и я думаю, глядя back-- Я думаю,
мы потратили около 35 видео говорить

4
00:00:11,900 --> 00:00:15,139
о различных аспектах С, может быть
немного больше, может быть, чуть меньше.

5
00:00:15,139 --> 00:00:16,930
И мы не покрывают
все в C, но мы

6
00:00:16,930 --> 00:00:21,170
охватывает большой кусок из
язык, подавляющее большинство из него,

7
00:00:21,170 --> 00:00:22,882
конечно, для общего применения.

8
00:00:22,882 --> 00:00:25,090
Теперь мы собираемся говорить
о другой язык, HTML.

9
00:00:25,090 --> 00:00:28,180
И мы собираемся, чтобы покрыть
это только в одном видео.

10
00:00:28,180 --> 00:00:29,340
>> Но это будет в порядке.

11
00:00:29,340 --> 00:00:31,410
Это происходит на самом деле стать
то, что вы собираетесь, чтобы привыкнуть к.

12
00:00:31,410 --> 00:00:33,535
Теперь, у вас есть
Основы одном языке,

13
00:00:33,535 --> 00:00:35,776
это на самом деле довольно легко
чтобы начать обучение других.

14
00:00:35,776 --> 00:00:37,650
Итак, мы собираемся, чтобы начать
к шагу немного назад

15
00:00:37,650 --> 00:00:43,340
и замалчивать основной
Различия между этими языками

16
00:00:43,340 --> 00:00:45,750
и вроде оставить вас с ним.

17
00:00:45,750 --> 00:00:48,530
Там очень много действительно здорово
ресурсы в Интернете, который

18
00:00:48,530 --> 00:00:51,279
мы собираемся начать направляя вас
к, потому что Интернет

19
00:00:51,279 --> 00:00:53,340
огромное хранилище информации.

20
00:00:53,340 --> 00:00:55,960
И таким образом, это не нравится вам
быть проиграв обязательно

21
00:00:55,960 --> 00:00:58,349
не имея информацию
покрыты видео.

22
00:00:58,349 --> 00:01:00,640
Вы по-прежнему будете иметь возможность получить
все, что нужно и использование

23
00:01:00,640 --> 00:01:03,590
знание вы уже
застроена понимания C

24
00:01:03,590 --> 00:01:07,130
сделать процесс обучения для них
другие языки на самом деле много лестных.

25
00:01:07,130 --> 00:01:08,640
Обещаю.

26
00:01:08,640 --> 00:01:12,770
>> Но давайте поговорим о одном языке
это действительно фундаментальное значение для каждого веб

27
00:01:12,770 --> 00:01:14,830
страница, которая HTML.

28
00:01:14,830 --> 00:01:18,230
HTML является язык гипертекстовой разметки.

29
00:01:18,230 --> 00:01:22,700
HTML является языком, но это
не является языком программирования.

30
00:01:22,700 --> 00:01:23,900
>> HTML не иметь переменные.

31
00:01:23,900 --> 00:01:26,430
Он не имеет логики или
функции или что-нибудь подобное.

32
00:01:26,430 --> 00:01:30,301
Мы не можем сделать любой
программирование по себе в HTML.

33
00:01:30,301 --> 00:01:32,300
Иногда вы будете слышать
люди описывают себя

34
00:01:32,300 --> 00:01:35,710
а HTML программистов, которые
это не совсем точно.

35
00:01:35,710 --> 00:01:37,980
Мы не можем написать HTML программы.

36
00:01:37,980 --> 00:01:40,770
>> HTML только для разметки текста.

37
00:01:40,770 --> 00:01:42,690
Это называется языком разметки.

38
00:01:42,690 --> 00:01:47,680
И то, что это does-- этот markup--
мы используем теги HTML и эти tags--

39
00:01:47,680 --> 00:01:51,600
это семантически markup--
определяет структуру страницы

40
00:01:51,600 --> 00:01:55,280
и вызывает простой текст, что
существует между метки должны интерпретироваться

41
00:01:55,280 --> 00:01:57,320
браузерами по-разному.

42
00:01:57,320 --> 00:02:00,370
И, возможно, это лучше объяснить
это, способ иллюстрации.

43
00:02:00,370 --> 00:02:06,450
>> Вот очень простой HTML-страницы, не
HTML-программа, опять же, HTML-страница.

44
00:02:06,450 --> 00:02:08,680
И мы знаем, что это
HTML-страница, потому что мы

45
00:02:08,680 --> 00:02:11,480
ограничена все с HTML-теги.

46
00:02:11,480 --> 00:02:13,850
Так что это то, что HTML-теги выглядит.

47
00:02:13,850 --> 00:02:15,870
Это между угловыми скобками.

48
00:02:15,870 --> 00:02:18,570
И обратите внимание, в верхней имеем
HTML и в самом низу,

49
00:02:18,570 --> 00:02:21,400
после того как мы сделали то, что
по-видимому, много другой HTML,

50
00:02:21,400 --> 00:02:24,310
у нас есть скобка слэш HTML.

51
00:02:24,310 --> 00:02:29,262
Так что вроде есть граница
между тем, что HTML-а что нет.

52
00:02:29,262 --> 00:02:32,220
И, конечно, условно, только
как вы написали все ваши программы C

53
00:02:32,220 --> 00:02:35,300
с расширениями точка C,
все ваши HTML файлы

54
00:02:35,300 --> 00:02:37,909
закончится точек расширений HTML.

55
00:02:37,909 --> 00:02:39,200
Но это еще не происходит.

56
00:02:39,200 --> 00:02:40,658
Мы не просто иметь эти HTML-теги.

57
00:02:40,658 --> 00:02:44,010
Мы, видимо, есть это
что называется головной тег.

58
00:02:44,010 --> 00:02:46,010
Ну, хорошо, что это такое?

59
00:02:46,010 --> 00:02:48,550
>> Ну, может быть, лучше
выделить путем тела,

60
00:02:48,550 --> 00:02:50,590
Тело является содержание веб-страницы.

61
00:02:50,590 --> 00:02:55,860
Так, может быть, глава тэг определяет материал
который не находится в окне браузера собственно,

62
00:02:55,860 --> 00:02:59,410
но как-то важно, чтобы наши
веб-страницы, оказываемые правильно.

63
00:02:59,410 --> 00:03:02,490
Например, внутри из
Глава тег нас есть теги названия.

64
00:03:02,490 --> 00:03:05,500
>> Так название будучи привет мир,
что на самом деле происходит, то, что

65
00:03:05,500 --> 00:03:08,797
Выставки в закладке в Chrome
или в сафари или Firefox--

66
00:03:08,797 --> 00:03:11,880
все браузер prefer-- это
что происходит, чтобы показать в названии.

67
00:03:11,880 --> 00:03:14,800
И прежде, чем вкладки было бы показать
в всем окне браузера

68
00:03:14,800 --> 00:03:19,710
и вы можете иметь только одну страницу
открыть в окне браузера в то время.

69
00:03:19,710 --> 00:03:22,160
Так, что происходит, чтобы быть
Название моей страницы вверх на вкладке

70
00:03:22,160 --> 00:03:24,600
или бар окно браузера, привет мир.

71
00:03:24,600 --> 00:03:28,611
И тогда содержание моей
веб-страница будет мир, привет.

72
00:03:28,611 --> 00:03:31,360
Итак, давайте взглянем на то, что некоторые
вещь, как это может выглядеть.

73
00:03:31,360 --> 00:03:33,210
Это довольно простой HTML-страницы.

74
00:03:33,210 --> 00:03:35,970
Так что я здесь, в моем CS50 IDE и
Я увеличено немного.

75
00:03:35,970 --> 00:03:38,290
И я просто хочу, чтобы
открыть привет точка HTML

76
00:03:38,290 --> 00:03:42,000
и показать вам, что это в значительной степени
содержимое страницы, что мы видели раньше.

77
00:03:42,000 --> 00:03:45,240
Мои теги HTML простые, головные
теги заголовков, тела, и так далее.

78
00:03:45,240 --> 00:03:47,320
Я с отступом, чтобы быть чистым.

79
00:03:47,320 --> 00:03:51,530
>> И тогда то, что я могу сделать в моем
IDE просто просмотреть страницу.

80
00:03:51,530 --> 00:03:52,630
И мы идем.

81
00:03:52,630 --> 00:03:56,070
Содержание моей странице мира,
привет, и я не вижу ничего

82
00:03:56,070 --> 00:03:58,500
в с тегами голове.

83
00:03:58,500 --> 00:03:59,980
Это просто содержание тела.

84
00:03:59,980 --> 00:04:00,780
Мир, привет.

85
00:04:00,780 --> 00:04:03,700
И снова тело просто
сказал, мир, привет.

86
00:04:03,700 --> 00:04:06,160
Другая часть отсутствует.

87
00:04:06,160 --> 00:04:07,610
>> Так что на самом деле все это.

88
00:04:07,610 --> 00:04:11,370
Это очень просто основной странице HTML.

89
00:04:11,370 --> 00:04:14,280
Теперь я с отступом мой HTML на
действительно хороший и организованный,

90
00:04:14,280 --> 00:04:15,840
но я на самом деле не придется.

91
00:04:15,840 --> 00:04:17,959
Я мог бы сделать это выглядеть довольно уродливым.

92
00:04:17,959 --> 00:04:19,467
И это будет по-прежнему работать.

93
00:04:19,467 --> 00:04:21,050
Это будет точно такой же веб-странице.

94
00:04:21,050 --> 00:04:23,100
Я только что избавился от
все пустое пространство.

95
00:04:23,100 --> 00:04:24,820
>> Как выясняется, белый пространство данных.

96
00:04:24,820 --> 00:04:28,540
И поэтому, когда мы посылаем данные из
отправителя к получателю, от сервера

97
00:04:28,540 --> 00:04:30,670
клиенту, данные стоит денег.

98
00:04:30,670 --> 00:04:34,460
И так, чтобы избавиться от пробелов
на самом деле хорошая идея

99
00:04:34,460 --> 00:04:37,320
если вы кто-то, кто служит
до много веб-контента.

100
00:04:37,320 --> 00:04:39,820
Это плохая идея, если вы
тот, кто учится этот материал

101
00:04:39,820 --> 00:04:41,528
и вы хотите, чтобы
это красиво организовано.

102
00:04:41,528 --> 00:04:43,810
Это намного проще, чтобы разобрать, чем это.

103
00:04:43,810 --> 00:04:45,540
Но это функционально идентичны.

104
00:04:45,540 --> 00:04:48,720
>> Углубление и тому подобное
на самом деле не имеет значения, в HTML.

105
00:04:48,720 --> 00:04:53,634
Все, что имеет значение открытия теги и
закрывающие теги в правильном порядке.

106
00:04:53,634 --> 00:04:55,050
Обратите внимание, что здесь произошло, хотя.

107
00:04:55,050 --> 00:04:58,450
Разметка дает нам путь к
общаться дополнительную информацию

108
00:04:58,450 --> 00:04:59,940
о том, что мы написали.

109
00:04:59,940 --> 00:05:03,130
Приветствия, Всемирный часть была
интерпретируется как название.

110
00:05:03,130 --> 00:05:06,410
И мир, привет часть была
интерпретируется как содержание

111
00:05:06,410 --> 00:05:09,090
или то, что должно быть
видны на моей веб-странице.

112
00:05:09,090 --> 00:05:12,167
>> Есть более чем 100 из них отличается
теги и много больших ресурсов

113
00:05:12,167 --> 00:05:13,000
онлайн, чтобы найти их.

114
00:05:13,000 --> 00:05:14,900
Мы собираемся говорить о
Некоторые из них в этом видео, некоторые

115
00:05:14,900 --> 00:05:16,440
в самом деле фундаментальной вещи.

116
00:05:16,440 --> 00:05:18,440
Но мы не собираемся говорить
обо всем этом потому, что он

117
00:05:18,440 --> 00:05:20,250
будет исчерпывающим сделать.

118
00:05:20,250 --> 00:05:22,880
>> Еще одна вещь, вы можете сделать, хотя,
это открыть инструменты разработчика.

119
00:05:22,880 --> 00:05:26,069
И если вы помните из
наше видео на HTTP,

120
00:05:26,069 --> 00:05:27,860
Я объяснил, как открыть
до инструментов для разработчиков.

121
00:05:27,860 --> 00:05:32,020
В Chrome это обычно клавишу F12
чтобы открыть панель инструментов разработчика.

122
00:05:32,020 --> 00:05:35,909
Тогда вместо выбора сети
закладка, вы можете выбрать вкладку Elements.

123
00:05:35,909 --> 00:05:37,700
И если вы загружаете веб
страниц, вы на самом деле

124
00:05:37,700 --> 00:05:40,280
посмотреть HTML, который создает эту веб-страницу.

125
00:05:40,280 --> 00:05:44,090
И так вы можете узнать много нового о HTML
, глядя на ваши любимые веб-сайты

126
00:05:44,090 --> 00:05:48,474
и видя, как они строить
различные части из них, которые вам нравятся.

127
00:05:48,474 --> 00:05:50,890
Так, может быть, есть в этом прохладном
рисунок или что-то подобное.

128
00:05:50,890 --> 00:05:52,140
Как они делают это с HTML?

129
00:05:52,140 --> 00:05:55,630
Ну вы можете просто открыть свой разработчику
инструменты и наведите курсор на этом элементе

130
00:05:55,630 --> 00:05:57,700
и увидеть то, что делает его HTML.

131
00:05:57,700 --> 00:05:59,450
Так что это действительно
хороший способ, чтобы узнать HTML,

132
00:05:59,450 --> 00:06:02,330
и я настоятельно рекомендую, что
вы делаете это, чтобы узнать, как HTML-

133
00:06:02,330 --> 00:06:04,930
а также узнать немного
немного о некоторых из вариантов

134
00:06:04,930 --> 00:06:07,050
доступны для вас в
инструменты для разработчиков, которые

135
00:06:07,050 --> 00:06:10,200
непременно пригодится в
Вы начинаете делать более интенсивное Интернет

136
00:06:10,200 --> 00:06:11,090
программирование.

137
00:06:11,090 --> 00:06:14,080
>> Итак, давайте взглянем на
пара общих тегов HTML.

138
00:06:14,080 --> 00:06:17,210
И мы будем прыгать и взглянуть на
то, что эти теги также будет оказана

139
00:06:17,210 --> 00:06:20,490
а, глядя на некоторых файлов в моем IDE.

140
00:06:20,490 --> 00:06:26,330
Так вот три самые основные теги для
настройки внешнего вида текста.

141
00:06:26,330 --> 00:06:29,050
Там это B теги, теги, I и U теги.

142
00:06:29,050 --> 00:06:33,170
И, соответственно, то, что они делают, это
визуализации текста между ними жирным шрифтом,

143
00:06:33,170 --> 00:06:35,430
курсив, подчеркивание и.

144
00:06:35,430 --> 00:06:40,430
Итак, давайте посмотрим, что это будет выглядеть
как на реальной веб-страницы в моей IDE.

145
00:06:40,430 --> 00:06:43,390
>> Так вот в моем IDE у меня
Файл называется МУВ точка HTML.

146
00:06:43,390 --> 00:06:46,770
МУВ точка HTML просто быть
полужирный, курсив, подчеркивание.

147
00:06:46,770 --> 00:06:47,830
Я открою его.

148
00:06:47,830 --> 00:06:51,810
>> И мы увидим, что здесь я
есть этот текст является B теги выделены жирным шрифтом.

149
00:06:51,810 --> 00:06:54,010
Этот текст метки I курсив.

150
00:06:54,010 --> 00:06:56,307
И этот текст U теги подчеркнул.

151
00:06:56,307 --> 00:06:57,640
Что это будет выглядеть?

152
00:06:57,640 --> 00:06:59,473
Ну опять же, все, что я
чтобы сделать, это зайти сюда

153
00:06:59,473 --> 00:07:04,690
в моем браузере, мой файл-браузер, нажмите
Предварительный просмотр, и это то, что идет вверх.

154
00:07:04,690 --> 00:07:07,520
>> Текст между B
теги действительно в настоящее время выделены жирным шрифтом.

155
00:07:07,520 --> 00:07:10,720
Текст между I
теги действительно в настоящее время курсивом.

156
00:07:10,720 --> 00:07:14,634
И текст в между U
теги действительно в настоящее время подчеркнуты.

157
00:07:14,634 --> 00:07:15,550
Так что это довольно хорошо.

158
00:07:15,550 --> 00:07:18,450
Теперь мы знаем, как сделать текст
выглядеть немного больше фантазии

159
00:07:18,450 --> 00:07:20,360
или нарисовать акцент на определенных вещах.

160
00:07:20,360 --> 00:07:25,530
Еще пару общих тегов здесь
теги параграфов, теги Р, и заголовок,

161
00:07:25,530 --> 00:07:27,980
которые я оказал здесь HX.

162
00:07:27,980 --> 00:07:32,520
>> Эти P теги, этих тегов абзаца,
разбить текст на абзацы до.

163
00:07:32,520 --> 00:07:34,646
Это не достаточно просто
Введите ударил и оставить пробелы,

164
00:07:34,646 --> 00:07:37,186
потому что компьютер будет только
делать то, что вы скажете ей сделать

165
00:07:37,186 --> 00:07:39,450
и игнорирует белый
Пространство по большей части.

166
00:07:39,450 --> 00:07:41,636
Поэтому мы не можем просто нажмите Enter
и ожидать наш компьютер

167
00:07:41,636 --> 00:07:43,760
интерпретировать, что мы хотим
чтобы начать новый абзац.

168
00:07:43,760 --> 00:07:47,670
У нас есть очень явно говорят, что это
является одним paragraph-- это another--

169
00:07:47,670 --> 00:07:50,740
заключая друг в наборе тэгов P.

170
00:07:50,740 --> 00:07:54,560
>> И мы также имеем эти варианты
для H, эти теги заголовков.

171
00:07:54,560 --> 00:07:57,000
У нас есть шесть различных уровней
заголовков, один, два, три,

172
00:07:57,000 --> 00:08:01,110
четыре, пять, шесть, которые являются
постепенно все больше и больше

173
00:08:01,110 --> 00:08:01,710
заголовков.

174
00:08:01,710 --> 00:08:04,360
И они становятся все меньше и
меньше и меньше, и меньше.

175
00:08:04,360 --> 00:08:07,690
Поэтому у нас есть заголовок верхнего уровня, второй
Заголовок уровня, и так далее, и так далее.

176
00:08:07,690 --> 00:08:10,480
>> Давайте взглянем на некоторые, может быть,
P-теги и теги заголовков некоторые

177
00:08:10,480 --> 00:08:13,110
в действии на веб-странице.

178
00:08:13,110 --> 00:08:18,180
Так вот в моем IDE у меня есть файл с именем
PH точка HTML, PH быть пункты

179
00:08:18,180 --> 00:08:18,970
и теги заголовков.

180
00:08:18,970 --> 00:08:20,709
Откройте, что до.

181
00:08:20,709 --> 00:08:23,000
Там очень много происходит здесь
потому что я поставить некоторые Lorem

182
00:08:23,000 --> 00:08:24,660
Ipsum, некоторые просто случайный текст здесь.

183
00:08:24,660 --> 00:08:27,284
Так что я буду удалять немного
потому что есть так много всего происходит.

184
00:08:27,284 --> 00:08:31,980
Но обратите внимание, что у меня есть, по крайней
началу здесь у меня есть H1, уровень один,

185
00:08:31,980 --> 00:08:32,802
заголовок тега.

186
00:08:32,802 --> 00:08:36,010
Тогда у меня есть пункт, который находится всего
куча случайных text-- Lorem ipsum--

187
00:08:36,010 --> 00:08:38,720
просто по умолчанию стандартный заполнение текста.

188
00:08:38,720 --> 00:08:41,970
Так что у меня два абзаца внутри, что
Уровень один заголовок, а затем вниз I

189
00:08:41,970 --> 00:08:46,850
есть уровень два заголовка здесь, на линии 24,
заголовок второго уровня, и еще два

190
00:08:46,850 --> 00:08:47,840
пункты.

191
00:08:47,840 --> 00:08:51,910
Ну что это похоже
если я его просмотра в моем просмотра?

192
00:08:51,910 --> 00:08:53,790
Посмотрим.

193
00:08:53,790 --> 00:08:55,730
>> Так заметить, что
заголовок первого уровня здесь

194
00:08:55,730 --> 00:08:58,420
на самом деле совсем немного больше
чем заголовок второго уровня.

195
00:08:58,420 --> 00:08:59,940
Поэтому мы использовали H1 теги.

196
00:08:59,940 --> 00:09:03,820
И обратите внимание, что теги P позволяют нам
сломать вещи в пунктах.

197
00:09:03,820 --> 00:09:07,500
Если бы мы избавились от этих тегов P
а на самом деле просто положить Вход или возврат

198
00:09:07,500 --> 00:09:10,110
в между тем, что мы надеялись,
быть различные пункты,

199
00:09:10,110 --> 00:09:13,193
они всего лишь хлопнуть вместе и
это не было бы этого прекрасного пункт

200
00:09:13,193 --> 00:09:15,840
разделение с пространством выше и ниже.

201
00:09:15,840 --> 00:09:18,300
И вот что пункт
теги и теги заголовков

202
00:09:18,300 --> 00:09:22,440
обычно используются, чтобы сделать, чтобы привлечь
внимание к частям нашего веб-странице

203
00:09:22,440 --> 00:09:23,550
в том направлении.

204
00:09:23,550 --> 00:09:27,560
>> Затем некоторые признаки, которые мы используем
построить списки на нашей веб-странице.

205
00:09:27,560 --> 00:09:30,820
Итак, мы имеем неупорядоченный
lists-- ULs-- которые просто

206
00:09:30,820 --> 00:09:34,090
маркированные списки, упорядоченные
Список которых numbered--

207
00:09:34,090 --> 00:09:37,680
OLs-- и внутри либо
один из тех, кого мы должны иметь

208
00:09:37,680 --> 00:09:40,600
наборы, как указывают элементы списка, LI.

209
00:09:40,600 --> 00:09:44,370
И поэтому мы должны открытое UL тег
и положить предметы внутри него.

210
00:09:44,370 --> 00:09:46,920
А потом, когда мы закончили с
что мы можем закрыть тег UL.

211
00:09:46,920 --> 00:09:49,850
>> И точно так же мы можем иметь
упорядоченный список или нумерованный

212
00:09:49,850 --> 00:09:51,560
и поставить элементы списка внутри, что.

213
00:09:51,560 --> 00:09:53,350
Итак, давайте взглянем
на пару списков

214
00:09:53,350 --> 00:09:57,230
и то, что они будут
оказывать также на CS50 IDE.

215
00:09:57,230 --> 00:10:00,640
Так что я здесь, в моей IDE а
файл с именем списки точка HTML.

216
00:10:00,640 --> 00:10:03,100
Давайте взглянем.

217
00:10:03,100 --> 00:10:08,482
>> И заметьте здесь у меня есть неупорядоченный
список с пяти вещей в нем.

218
00:10:08,482 --> 00:10:11,440
А то у меня упорядоченный список, а
Я изменил тег немного,

219
00:10:11,440 --> 00:10:11,939
правильно?

220
00:10:11,939 --> 00:10:13,152
Я сказал старт равна шести.

221
00:10:13,152 --> 00:10:16,110
Оказывается с упорядоченной список I
может установить начальную точку там, где это

222
00:10:16,110 --> 00:10:20,130
Я want-- по умолчанию он будет одно--
просто добавив этот так называемый атрибут

223
00:10:20,130 --> 00:10:21,190
на мой OL тега.

224
00:10:21,190 --> 00:10:23,572
И так этот список будет
начать отсчет в шесть.

225
00:10:23,572 --> 00:10:26,780
Так что элементы этого нумерованного списка
должно быть шесть, семь, восемь, девять, десять,

226
00:10:26,780 --> 00:10:29,930
потому что есть пять элементов
в списке, в отличие от одного,

227
00:10:29,930 --> 00:10:33,770
два, три, четыре, пять, который
было бы в случае, если я сказал ПР

228
00:10:33,770 --> 00:10:36,730
без указания атрибута начала.

229
00:10:36,730 --> 00:10:41,594
>> Таким образом, мы просто просмотреть это так, вы можете
получить чувство для того, что здесь происходит.

230
00:10:41,594 --> 00:10:42,260
И мы идем.

231
00:10:42,260 --> 00:10:44,610
Там мой список.

232
00:10:44,610 --> 00:10:47,810
Первые пять элементов
неупорядоченные или маркированные списки.

233
00:10:47,810 --> 00:10:51,010
И в ближайшие пять элементов
это отдельная упорядоченный список

234
00:10:51,010 --> 00:10:52,980
начиная с шести.

235
00:10:52,980 --> 00:10:56,247
Так вот, как мы можем
создавать списки, используя HTML.

236
00:10:56,247 --> 00:10:58,080
Еще одна вещь, вы могли бы
хотите сделать с HTML

237
00:10:58,080 --> 00:11:01,520
это создать таблицу
Информация из строк и столбцов

238
00:11:01,520 --> 00:11:04,560
представить информацию в
Особенно организованно.

239
00:11:04,560 --> 00:11:09,110
Чтобы сделать это с HTML мы можем иметь
Определение таблицы начинают открытую скобку

240
00:11:09,110 --> 00:11:10,160
Таблица.

241
00:11:10,160 --> 00:11:14,680
А потом внутри этой таблицы мы
может иметь множество строк, TR тегов

242
00:11:14,680 --> 00:11:15,980
чтобы указать каждую строку.

243
00:11:15,980 --> 00:11:22,510
А потом TD теги зайти внутрь ПДД тегов
для определения столбца в строке.

244
00:11:22,510 --> 00:11:24,340
>> Почему она называется ТД и не TC?

245
00:11:24,340 --> 00:11:25,940
Ну, ТД выступает за табличных данных.

246
00:11:25,940 --> 00:11:27,900
Обычно вы помещаете
есть ваша информация.

247
00:11:27,900 --> 00:11:29,440
Так вот, почему это ТД, а не ТС.

248
00:11:29,440 --> 00:11:31,140
Это немного сбивает с толку.

249
00:11:31,140 --> 00:11:33,720
>> Таким образом, вы должны таблиц тегов и
внутри тегов таблицы

250
00:11:33,720 --> 00:11:35,600
у вас есть несколько строк, ТУ.

251
00:11:35,600 --> 00:11:40,030
А внутри каждой строки у вас есть
TDS для числа столбцов

252
00:11:40,030 --> 00:11:42,880
что вы хотите, чтобы
В этом конкретном ряду.

253
00:11:42,880 --> 00:11:47,730
Давайте взглянем на очень
простая таблица на себя в CS50 IDE.

254
00:11:47,730 --> 00:11:49,730
>> Так что я здесь файл
называется таблица точка HTML.

255
00:11:49,730 --> 00:11:53,390
Давайте посмотрим на
как это выглядит.

256
00:11:53,390 --> 00:11:56,225
Там очень много происходит здесь, но
если вы заметили, у меня есть таблица открыта.

257
00:11:56,225 --> 00:11:57,850
Я начинаю определение со столом.

258
00:11:57,850 --> 00:12:02,100
И тогда в моем первом ряду, видимо, я
есть четыре колонны, один, два, три,

259
00:12:02,100 --> 00:12:02,660
4.

260
00:12:02,660 --> 00:12:04,290
И тогда я сделал с этой строки.

261
00:12:04,290 --> 00:12:07,750
>> Тогда я начинаю другую строку и
сделать два, четыре, шесть, восемь.

262
00:12:07,750 --> 00:12:08,850
Закончить эту строку.

263
00:12:08,850 --> 00:12:11,410
У другой ряд, три, шесть, девять, 12.

264
00:12:11,410 --> 00:12:14,830
А потом последняя строка, четыре,
восемь, 12, и, хотя это

265
00:12:14,830 --> 00:12:16,560
немного отрезать здесь, 16.

266
00:12:16,560 --> 00:12:17,710
>> Я закончил эту строку.

267
00:12:17,710 --> 00:12:18,970
Я закончил таблицу.

268
00:12:18,970 --> 00:12:21,430
И тогда я сделал с моей HTML.

269
00:12:21,430 --> 00:12:22,590
Что это выглядит?

270
00:12:22,590 --> 00:12:26,014

271
00:12:26,014 --> 00:12:27,430
Ну, это на самом деле не много, чтобы видеть.

272
00:12:27,430 --> 00:12:31,690
Я четко организовал мою информацию
в несколько более организованно.

273
00:12:31,690 --> 00:12:33,755
Но это не супер довольно здесь.

274
00:12:33,755 --> 00:12:36,130
И мы собираемся иметь дело с
что, когда мы говорим о CSS.

275
00:12:36,130 --> 00:12:38,930
Мы вернемся эту идею
что мы делаем, чтобы сделать table--

276
00:12:38,930 --> 00:12:41,260
может быть, отформатировать его немного лучше?

277
00:12:41,260 --> 00:12:45,070
Но я все еще есть четыре строки,
каждый из которых состоит из четырех столбцов,

278
00:12:45,070 --> 00:12:48,890
и действительно, что это составляет это
очень простой четыре на четыре умножения

279
00:12:48,890 --> 00:12:49,870
Таблица.

280
00:12:49,870 --> 00:12:51,690
>> Еще несколько тегов, мы будем говорить о.

281
00:12:51,690 --> 00:12:54,617
Давайте поговорим о
Концепция HTML форме.

282
00:12:54,617 --> 00:12:57,450
Таким образом, вы, возможно, видели это в
Контекст входа в веб-страницы.

283
00:12:57,450 --> 00:12:59,100
Обычно вы вводите свое имя пользователя.

284
00:12:59,100 --> 00:13:01,510
Вы вводите свой пароль,
и вы хорошо идти.

285
00:13:01,510 --> 00:13:04,170
Это было бы началом виде.

286
00:13:04,170 --> 00:13:05,420
>> Пропуск более DIV секунду.

287
00:13:05,420 --> 00:13:07,987
У нас также есть входы, которые
вид поместиться внутри форм.

288
00:13:07,987 --> 00:13:10,320
Это элементы, которые
вы на самом деле введя в,

289
00:13:10,320 --> 00:13:12,580
или радио-кнопки вы
тикают, или проверка

290
00:13:12,580 --> 00:13:14,310
ящики, которые вы галочку.

291
00:13:14,310 --> 00:13:15,770
Таким образом, эти идут внутри формы.

292
00:13:15,770 --> 00:13:18,500
И они включают в основном
каждая строка виде

293
00:13:18,500 --> 00:13:19,887
если ваша форма будет отформатирован также.

294
00:13:19,887 --> 00:13:22,220
Тогда есть эта концепция
DIV, который на самом деле не

295
00:13:22,220 --> 00:13:25,060
вписаться в любой конкретной категории
тегов, как те, которые я

296
00:13:25,060 --> 00:13:26,170
делал ранее.

297
00:13:26,170 --> 00:13:29,790
Это просто своего рода разграничивает
начало некоторой произвольной division--

298
00:13:29,790 --> 00:13:31,670
div-- страницы.

299
00:13:31,670 --> 00:13:33,210
Там нет никаких визуальных перерыв.

300
00:13:33,210 --> 00:13:34,800
Там нет линии.

301
00:13:34,800 --> 00:13:37,180
Это не засчитываются как
отдельный кусок автоматически.

302
00:13:37,180 --> 00:13:39,430
Вы должны были бы разработать это
что способ сделать это.

303
00:13:39,430 --> 00:13:42,110
>> Это просто своего рода говорит, что я хочу
кусок пространства на моей веб-странице,

304
00:13:42,110 --> 00:13:45,190
и я просто буду называть
это такое разделение моей странице.

305
00:13:45,190 --> 00:13:47,619
Мы можем положить вещи внутри
из дивы, и в самом деле,

306
00:13:47,619 --> 00:13:49,410
когда мы над головой
IDE в секунду, мы будем

307
00:13:49,410 --> 00:13:53,760
видеть, что я ставлю мой
образуют внутри дел.

308
00:13:53,760 --> 00:13:57,050
>> Так что я здесь, в моей IDE а
Файл называется DIV форма точка HTML.

309
00:13:57,050 --> 00:13:59,260
Давайте откроем его.

310
00:13:59,260 --> 00:14:01,460
Обратите внимание, что, как я сказал,
DIV вроде произвольным.

311
00:14:01,460 --> 00:14:01,640
Правильно?

312
00:14:01,640 --> 00:14:02,973
Это на самом деле не значит ничего.

313
00:14:02,973 --> 00:14:05,140
Так что я произвольное
Первый раздел моей странице.

314
00:14:05,140 --> 00:14:07,848
И тогда вместо другого DIV
позднее, начиная с линии восьми,

315
00:14:07,848 --> 00:14:08,730
У меня есть этот вид.

316
00:14:08,730 --> 00:14:13,594
А внутри формы у меня есть
Количество входов, поля формы.

317
00:14:13,594 --> 00:14:16,510
Так что у меня поле, чье имя является A--
которые на самом деле не означает ничего

318
00:14:16,510 --> 00:14:19,350
Право now--, что, видимо
принимает текст, еще одно, что

319
00:14:19,350 --> 00:14:22,630
принимает пароль, другой, что это радио
Кнопка, другой, что это флажок,

320
00:14:22,630 --> 00:14:24,797
и еще, что это кнопки Отправить.

321
00:14:24,797 --> 00:14:26,630
Ну, то, что делает это
все на самом деле выглядит?

322
00:14:26,630 --> 00:14:27,629
Ну, давайте взглянем.

323
00:14:27,629 --> 00:14:31,010
Мы откроем его в нашем окне предварительного просмотра.

324
00:14:31,010 --> 00:14:33,557
Обратите внимание, что это произвольное
в первую очередь это division-- есть

325
00:14:33,557 --> 00:14:34,640
нет визуального разделения здесь.

326
00:14:34,640 --> 00:14:37,150
Это на самом деле не делать ничего, верно?

327
00:14:37,150 --> 00:14:38,220
>> А то у меня мою форму.

328
00:14:38,220 --> 00:14:39,890
И я не сделал никакого специального форматирования.

329
00:14:39,890 --> 00:14:42,680
Таким образом, форма является лишь одним
большой ряд информации.

330
00:14:42,680 --> 00:14:46,424
Если бы я по-другому отформатированные свою форму,
Я мог бы построчно построчно.

331
00:14:46,424 --> 00:14:47,590
Но я не делал никаких стиль.

332
00:14:47,590 --> 00:14:49,256
Опять же, мы не говорим о CSS здесь.

333
00:14:49,256 --> 00:14:51,030
Мы только что говорили о HTML.

334
00:14:51,030 --> 00:14:53,980
>> Ну в моем текстовом виде я могу type--
помните, что формы типа текст

335
00:14:53,980 --> 00:14:55,480
так что я могу поставить свою подпись.

336
00:14:55,480 --> 00:14:57,330
И в моем пароль Я
можно ввести свой пароль.

337
00:14:57,330 --> 00:14:59,740
И потому, что этой области
это типа пароля,

338
00:14:59,740 --> 00:15:01,470
Вы не знаете, что мой пароль.

339
00:15:01,470 --> 00:15:02,800
Это все точки.

340
00:15:02,800 --> 00:15:09,140
>> Я также могу выбрать галочку
радио-кнопки или отметьте флажок.

341
00:15:09,140 --> 00:15:10,420
Или я мог бы представить свою форму.

342
00:15:10,420 --> 00:15:11,810
И я ничего не делаю,
поэтому, когда я представить мою форму,

343
00:15:11,810 --> 00:15:13,090
страница просто обновляется.

344
00:15:13,090 --> 00:15:16,970
Но я мог бы, возможно, настроить мой
Разместить кнопку, чтобы сделать что-то еще.

345
00:15:16,970 --> 00:15:20,410
И мы увидим, что мы можем сделать с
что в будущем видео на PHP.

346
00:15:20,410 --> 00:15:22,520
Но это создает очень
простая форма, что мы

347
00:15:22,520 --> 00:15:27,360
можно использовать, чтобы взаимодействовать пользователи и
представить информацию на нашем сайте.

348
00:15:27,360 --> 00:15:29,620
>> Один последний комментарий, прежде чем мы
перейти к некоторым другим тегам

349
00:15:29,620 --> 00:15:32,040
являются взглянуть на это
тег ввода еще раз.

350
00:15:32,040 --> 00:15:35,760
Обратите внимание, что я выделил
концы тега в красном.

351
00:15:35,760 --> 00:15:39,390
Каждый другой тег мы видели до сих пор имеет
было начало и конец, отверстие

352
00:15:39,390 --> 00:15:41,030
тег и закрывающий тег.

353
00:15:41,030 --> 00:15:42,520
>> Но вход тег не делает.

354
00:15:42,520 --> 00:15:46,860
Там нет текста, который идет
между входными тегов.

355
00:15:46,860 --> 00:15:49,160
Вся информация
мы намерены передать

356
00:15:49,160 --> 00:15:52,640
связан как часть
атрибуты этого входа.

357
00:15:52,640 --> 00:15:54,690
Обратите внимание, у нас есть имя входа равна х.

358
00:15:54,690 --> 00:15:55,580
Тип равна у.

359
00:15:55,580 --> 00:15:57,660
Это действительно все
Информация, которую мы должны.

360
00:15:57,660 --> 00:15:59,470
>> Это называется само закрывающий тег.

361
00:15:59,470 --> 00:16:02,470
Это не требует открытия и на
близко, потому что все информации

362
00:16:02,470 --> 00:16:04,974
содержится внутри
тег и его атрибуты.

363
00:16:04,974 --> 00:16:06,390
Так что иногда вы увидите это, тоже.

364
00:16:06,390 --> 00:16:10,400
Так просто быть в курсе, что если у вас есть
тег, который полностью автономным,

365
00:16:10,400 --> 00:16:14,170
открывается и закрывается себя
открытая скобка слева

366
00:16:14,170 --> 00:16:17,000
и угол слэш
Кронштейн справа.

367
00:16:17,000 --> 00:16:20,580
Мы увидим еще один из тех,
сейчас с тегами изображения, а также.

368
00:16:20,580 --> 00:16:23,300
>> Прежде чем мы поговорим об изображениях, мы
нужно говорить о гиперссылок.

369
00:16:23,300 --> 00:16:26,080
Если мы хотим, чтобы наш веб-страницы, чтобы быть
интерактивным и переместить нас вокруг,

370
00:16:26,080 --> 00:16:28,121
было бы неплохо иметь возможность
нажать на одного из тех,

371
00:16:28,121 --> 00:16:30,190
то, что как правило, были синий ссылка.

372
00:16:30,190 --> 00:16:34,440
Это на самом деле, как мы строим
гиперссылка на нашей веб-странице.

373
00:16:34,440 --> 00:16:36,540
И что интересно
есть еще один тег HTML

374
00:16:36,540 --> 00:16:39,000
называется звено, которое не является гиперссылка.

375
00:16:39,000 --> 00:16:44,130
А вот стоит для якоря, и
вот как мы указываем гиперссылки.

376
00:16:44,130 --> 00:16:49,150
>> HREF равна х средства идут
веб-страницы Х. И все

377
00:16:49,150 --> 00:16:51,580
между открытым Тег
и близко Тег

378
00:16:51,580 --> 00:16:56,010
это то, что будет, что подчеркнул
синий текст, который выглядит как ссылку

379
00:16:56,010 --> 00:16:57,590
что мы знакомы.

380
00:16:57,590 --> 00:17:01,660
Ниже у нас есть изображение, которое тег
является самостоятельной закрывающий тег для отображения

381
00:17:01,660 --> 00:17:05,599
изображение находится в X. А
Вы могли бы быть в состоянии изменить

382
00:17:05,599 --> 00:17:08,280
что изображения, указав
Ширина и высота

383
00:17:08,280 --> 00:17:11,640
и другие атрибуты в
что точка точка точка есть.

384
00:17:11,640 --> 00:17:14,260
>> В самом низу здесь
у нас есть очень интересный

385
00:17:14,260 --> 00:17:16,170
ищу тег, который не
есть закрывающий тег.

386
00:17:16,170 --> 00:17:19,410
Это восклицательный знак DOCTYPE HTML.

387
00:17:19,410 --> 00:17:23,300
Так HTML был примерно с
начале 1990-х для строительства веб-страниц,

388
00:17:23,300 --> 00:17:25,859
и он ушел претерпели
ряд изменений с тех пор.

389
00:17:25,859 --> 00:17:28,550
Совсем недавно в 2014 году
он прошел ревизию

390
00:17:28,550 --> 00:17:33,440
называется HTML5, который в настоящее время является ток
рода де-факто стандартом HTML.

391
00:17:33,440 --> 00:17:36,730
>> Чтобы указать, что наш веб-
страницы, написанные с использованием HTML5,

392
00:17:36,730 --> 00:17:38,160
это, как мы начинаем.

393
00:17:38,160 --> 00:17:40,380
Это может быть опущено, но
то, что, что в основном

394
00:17:40,380 --> 00:17:45,930
означает, что вы не можете использовать любой из тегов
которые HTML5 теги, эти новые теги.

395
00:17:45,930 --> 00:17:48,591
Таким образом, мы всегда начать
если мы с помощью HTML5.

396
00:17:48,591 --> 00:17:51,340
И все теги мы говорили о
ранее не HTML5 теги.

397
00:17:51,340 --> 00:17:55,470
Но это означало бы, что
HTML5-теги будут присутствовать.

398
00:17:55,470 --> 00:17:58,400
И поэтому мы должны восклицание
DOCTYPE HTML, который

399
00:17:58,400 --> 00:18:01,280
находится в самом начале нашего
HTML-файл, а затем, после точки, что

400
00:18:01,280 --> 00:18:04,930
мы на самом деле есть открытый наш HTML-
пометить и перейти оттуда.

401
00:18:04,930 --> 00:18:10,050
>> Последняя является тег комментария,
который выглядит немного отличается, тоже.

402
00:18:10,050 --> 00:18:12,810
Она начинается с угла
Кронштейн восклицательный тире

403
00:18:12,810 --> 00:18:15,220
тире, но не закрывающая скобка.

404
00:18:15,220 --> 00:18:20,150
В между этими двумя элементами там
где вы пишете свои комментарии.

405
00:18:20,150 --> 00:18:28,420
И давайте взглянем на изображение,
Комментарии и ссылки в и CS50 IDE.

406
00:18:28,420 --> 00:18:32,850
>> Так что я здесь файл называется ссылка для изображения
точка HTML, который я собираюсь открыть.

407
00:18:32,850 --> 00:18:36,420
И заметьте, я получил пару
комментарии здесь, в моих HTML комментарии.

408
00:18:36,420 --> 00:18:38,990
Так же, как в C и других
языки программирования,

409
00:18:38,990 --> 00:18:43,169
HTML только будучи язык разметки
действительно есть способность иметь комментарии.

410
00:18:43,169 --> 00:18:45,710
И поэтому я, по-видимому собирается
разместить картину Рик Эстли

411
00:18:45,710 --> 00:18:49,060
где-то между этой DIV
тег, это произвольное разделение.

412
00:18:49,060 --> 00:18:51,497
Видимо, что файл
расположен в Рик точка JPEG, который

413
00:18:51,497 --> 00:18:53,580
если мы возвращаемся к
мой дерево файлов на секунду,

414
00:18:53,580 --> 00:18:55,490
это файл, который существует в
текущий каталог.

415
00:18:55,490 --> 00:18:56,031
Так что все нормально.

416
00:18:56,031 --> 00:18:57,710
Я могу сослаться на него.

417
00:18:57,710 --> 00:18:59,680
>> Тогда я могу иметь внутренние ссылки.

418
00:18:59,680 --> 00:19:05,080
Так заметить в строке 11 тут
мой HREF является привет точка HTML.

419
00:19:05,080 --> 00:19:09,050
Так что просто относится к привет точка HTML
которая существует в текущем каталоге.

420
00:19:09,050 --> 00:19:12,980
И я могу также внешний
ссылки по протоколу HTTPS только с указанием

421
00:19:12,980 --> 00:19:16,180
чтобы показать, что я не говорю
о файле в моем текущем каталоге.

422
00:19:16,180 --> 00:19:19,730
Я говорю о том, что файл существует
где-то на интернете, которые я

423
00:19:19,730 --> 00:19:23,370
просить по протоколу HTTP.

424
00:19:23,370 --> 00:19:25,990
>> Итак, давайте взглянем на то, что
Эта страница может выглядеть

425
00:19:25,990 --> 00:19:29,500
и получить готовый для картины Рик
Эстли, чтобы показать на экране.

426
00:19:29,500 --> 00:19:31,490
Так что я буду просматривать это.

427
00:19:31,490 --> 00:19:33,800
Там Рик Эстли это на
очень сверху в этом произвольное

428
00:19:33,800 --> 00:19:35,008
разделение я положил его на вершине.

429
00:19:35,008 --> 00:19:36,960
А потом внизу I
мои ссылки, верно?

430
00:19:36,960 --> 00:19:39,330
>> У меня есть ссылка на привет точка HTML.

431
00:19:39,330 --> 00:19:42,860
И если я нажимаю, что я получаю
перешел на этой странице

432
00:19:42,860 --> 00:19:47,050
что мы очень хорошо знакомы с из
в самом начале нашей программы.

433
00:19:47,050 --> 00:19:50,880
Если я поп эту страницу открытой снова, если я
поп ссылка для изображения открыть еще один раз,

434
00:19:50,880 --> 00:19:54,420
Я также могу перейти внешне
на сайт CS50 в.

435
00:19:54,420 --> 00:19:56,740
И там мы будем see-- я
уменьшить немного here--

436
00:19:56,740 --> 00:20:00,260
мы увидим Вебсайт Сортировать CS50-х
встроен в середине странице.

437
00:20:00,260 --> 00:20:04,670
Так что я был в состоянии сделать внутренний
связать, а также по внешней ссылке.

438
00:20:04,670 --> 00:20:07,200
>> Последнее правило с HTML, что
мы будем говорить о здесь

439
00:20:07,200 --> 00:20:09,510
является то, что ваш HTML-должны быть хорошо сформированы.

440
00:20:09,510 --> 00:20:13,020
В C мы много говорили о
различные синтаксис вещей.

441
00:20:13,020 --> 00:20:17,650
В HTML синтаксис действительно
вращается вокруг тегов.

442
00:20:17,650 --> 00:20:19,660
Каждый тег открытии должен быть закрыт.

443
00:20:19,660 --> 00:20:22,630
И в самом деле, каждый тег открытии
должны быть закрыты в обратном порядке.

444
00:20:22,630 --> 00:20:25,790
>> Так что, если вы открываете тэг, курсивное
тег, а затем подчеркивание тег

445
00:20:25,790 --> 00:20:28,120
чтобы сделать все три до А
Конкретный набор текста,

446
00:20:28,120 --> 00:20:30,070
вы должны закрыть их в обратном порядке.

447
00:20:30,070 --> 00:20:32,270
Так что, если вы открыли смелый,
курсив, подчеркивание, вы

448
00:20:32,270 --> 00:20:35,240
Чтобы закрыть подчеркивания, курсив, полужирный.

449
00:20:35,240 --> 00:20:39,990
Это своего рода инкапсуляции, что
держит HTML красиво и организовано.

450
00:20:39,990 --> 00:20:44,370
>> В отличие от C, хотя, синтаксические ошибки не будет
на самом деле калечит ваш HTML, возможно,.

451
00:20:44,370 --> 00:20:48,730
Ваш HTML-может быть не хорошо
формируется, но будет работать.

452
00:20:48,730 --> 00:20:50,589
И так эти ошибки
сортировать слайд по.

453
00:20:50,589 --> 00:20:52,130
Это до вас, чтобы действительно быть бдительными.

454
00:20:52,130 --> 00:20:54,760
Иногда они не смогут, но
иногда вы можете получить вместе с ним.

455
00:20:54,760 --> 00:20:56,509
>> Это может быть действительно
сложная задача, хотя,

456
00:20:56,509 --> 00:21:00,660
чтобы отслеживать, когда вы открыли
тег, когда вы закрыли его,

457
00:21:00,660 --> 00:21:04,110
особенно в качестве HTML
файлы становятся больше и больше.

458
00:21:04,110 --> 00:21:05,490
Вы хотите некоторую помощь.

459
00:21:05,490 --> 00:21:07,560
И есть онлайн
валидатор инструменты, которые вы

460
00:21:07,560 --> 00:21:11,474
можно использовать, чтобы взглянуть на свой веб
страница и посмотреть, если это хорошо сформированные HTML.

461
00:21:11,474 --> 00:21:13,390
И вы должны, безусловно,
взглянуть на тех,

462
00:21:13,390 --> 00:21:16,620
и начать использовать их, как вы
начать делать некоторую работу с HTML,

463
00:21:16,620 --> 00:21:20,800
писать HTML, только так вы получите
некоторые хорошие привычки о организации

464
00:21:20,800 --> 00:21:24,377
Ваш HTML в хорошем смысле и
хороший стиль и убедившись,

465
00:21:24,377 --> 00:21:27,210
что вы не делаете ничего, что
может создать синтаксическую ошибку, что

466
00:21:27,210 --> 00:21:30,270
вызовет вам немного
проблема по дороге.

467
00:21:30,270 --> 00:21:31,190
>> Я Дуг Ллойд.

468
00:21:31,190 --> 00:21:33,450
Это CS50.

469
00:21:33,450 --> 00:21:34,859