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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Сегодня, я собираюсь
немного поговорим о HTML,

3
00:00:10,450 --> 00:00:12,330
Язык разметки гипертекста.

4
00:00:12,330 --> 00:00:14,450
Вы видите HTML везде в эти дни.

5
00:00:14,450 --> 00:00:17,190
В самом деле, если вы смотрите это
видео в браузере, вы

6
00:00:17,190 --> 00:00:19,120
видя HTML прямо сейчас.

7
00:00:19,120 --> 00:00:22,760
HTML не является языком программирования,
скорее, это язык разметки, используемый на

8
00:00:22,760 --> 00:00:25,460
веб-браузеры, способные воспроизводить страницы
в Интернете.

9
00:00:25,460 --> 00:00:30,410
>> Таким образом, вы можете спросить, как именно пишет
Адрес страницы в сети HTML отличается

10
00:00:30,410 --> 00:00:33,574
от написания программы в программировании
язык, как C?

11
00:00:33,574 --> 00:00:38,010
Ну, C является языком с очень строгим
синтаксические правила, которые необходимо

12
00:00:38,010 --> 00:00:39,880
составлен до того, как может работать.

13
00:00:39,880 --> 00:00:43,070
Если вы когда-либо забыли включить
Точка с запятой в конце заявлении в

14
00:00:43,070 --> 00:00:46,660
ваша C код, вы знаете, о чем я говорю
о в отношении строгого синтаксиса.

15
00:00:46,660 --> 00:00:50,360
>> Веб-браузеры тем не менее, немного больше
прощая когда дело доходит до HTML.

16
00:00:50,360 --> 00:00:53,860
Даже если ваш HTML не синтаксически
правильно, ваша страница все еще может быть

17
00:00:53,860 --> 00:00:57,150
отображается в браузере, но это могло бы
Не смотрите, что хотели.

18
00:00:57,150 --> 00:00:59,640
Так что это всегда лучше
следовать правилам.

19
00:00:59,640 --> 00:01:01,990
Лучший способ получить интуицию
о том, как все это работает, чтобы

20
00:01:01,990 --> 00:01:03,300
пройти через примера.

21
00:01:03,300 --> 00:01:07,360
>> Итак, что мы имеем здесь дело с основным
основой для веб-страницы.

22
00:01:07,360 --> 00:01:10,690
Вы, наверное, заметили много вещей
между угловыми скобками.

23
00:01:10,690 --> 00:01:12,900
Ну, это только теги.

24
00:01:12,900 --> 00:01:15,810
Теги основном информирует веб-браузеров
что, эй, что-то

25
00:01:15,810 --> 00:01:17,150
приходит на ваш сайт.

26
00:01:17,150 --> 00:01:20,770
Помните, каждый раз при открытии
тег, необходимо закрыть его, как только вы

27
00:01:20,770 --> 00:01:21,750
закончите его использования.

28
00:01:21,750 --> 00:01:24,690
>> Так, например, я открываю раздел
кода с открытым

29
00:01:24,690 --> 00:01:26,960
Кронштейн тело, закрывающая скобка.

30
00:01:26,960 --> 00:01:31,280
Затем я добавить текст, в данном случае, мой
Первый веб-страницы, то когда я пошел в

31
00:01:31,280 --> 00:01:35,540
В заключение этого раздела, я использую почти
идентичны тег кроме этого времени с

32
00:01:35,540 --> 00:01:37,660
косая черта перед теле.

33
00:01:37,660 --> 00:01:41,140
В общем, это формат вы
собираетесь использовать всякий раз, когда вы открываете

34
00:01:41,140 --> 00:01:42,680
и закрывающие теги.

35
00:01:42,680 --> 00:01:47,900
Вместе с открытым теги и конечный тег
сочинять то, что называется элемент.

36
00:01:47,900 --> 00:01:51,870
>> Если вы посмотрите на первой линии, вы будете
см. восклицательный знак с последующим

37
00:01:51,870 --> 00:01:53,350
DOCTYPE HTML.

38
00:01:53,350 --> 00:01:56,280
Это действительно просто говорю ваш браузер
, что файл является веб-страница

39
00:01:56,280 --> 00:01:58,280
написано в HTML.

40
00:01:58,280 --> 00:02:01,970
HTML тегов существу говорит,
вот идет некоторые HTML.

41
00:02:01,970 --> 00:02:04,950
Тогда у нас есть голова тег с
тег название внутри него.

42
00:02:04,950 --> 00:02:09,430
Глава тег вы можете думать о качестве
включающий HTML код, который приходит для

43
00:02:09,430 --> 00:02:12,670
основная часть вашей веб-страницы
Фактическое содержание.

44
00:02:12,670 --> 00:02:16,700
>> В общем, вы положили название вашего
веб-страницы здесь, хотя есть некоторые

45
00:02:16,700 --> 00:02:19,350
другие теги, которые могут появиться
здесь также.

46
00:02:19,350 --> 00:02:25,020
Далее идет тело вашей веб-странице, тем
фактическое мясо и кости вашего сайта.

47
00:02:25,020 --> 00:02:28,910
В нашем примере, мы просто поставить простой
Приговор, Мой первый веб-страницы,

48
00:02:28,910 --> 00:02:34,100
которые, если мы запустим наш сайт, будет выглядеть
немного что-то вроде этого.

49
00:02:34,100 --> 00:02:36,810
Наша веб-страница не слишком странно,
но не волнуйтесь.

50
00:02:36,810 --> 00:02:39,210
Мы ели его в ближайшее время.

51
00:02:39,210 --> 00:02:44,070
>> Таким образом, выше HTML, мы дадим вам очень
базовый шаблон для веб-страницы,

52
00:02:44,070 --> 00:02:46,310
ничто не полагает, просто голые кости.

53
00:02:46,310 --> 00:02:49,160
Но если я создаю веб-страницу,
что делать, если я хочу добавить

54
00:02:49,160 --> 00:02:50,760
картина, скажем, себя?

55
00:02:50,760 --> 00:02:52,760
Ну, я могу это сделать.

56
00:02:52,760 --> 00:02:55,460
Есть несколько способов
добавлять изображения на ваш сайт.

57
00:02:55,460 --> 00:02:59,780
Если изображение в той же папке,
Ваш HTML файл, вы можете по ссылке

58
00:02:59,780 --> 00:03:01,950
Изображение с помощью пути, как это.

59
00:03:01,950 --> 00:03:05,910
>> Вы открываете с тега изображения с последующим
на в атрибуте Alt в

60
00:03:05,910 --> 00:03:07,240
источник изображения.

61
00:03:07,240 --> 00:03:12,030
Значение Альт атрибута является лишь некоторые
Альтернативный текст в случае, если пользователь не может

62
00:03:12,030 --> 00:03:13,580
видеть изображение.

63
00:03:13,580 --> 00:03:19,680
Кроме того, вы можете перейти по ссылке
Изображения с помощью полного URL, как это.

64
00:03:19,680 --> 00:03:24,180
Теперь, что веб-сайт на самом деле не существует,
но если бы картина

65
00:03:24,180 --> 00:03:27,760
мне по этому адресу, я мог бы использовать
источник URL включить

66
00:03:27,760 --> 00:03:29,930
его образ на моем сайте.

67
00:03:29,930 --> 00:03:35,590
В любом случае, вы в конечном итоге с гораздо
красивее сайт, что-то вроде этого.

68
00:03:35,590 --> 00:03:39,730
>> Ну, это очень здорово, но я как бы
от того, хотите какой-нибудь текст здесь.

69
00:03:39,730 --> 00:03:43,020
Так что давайте просто добавить что-то
супер просто выше

70
00:03:43,020 --> 00:03:45,210
Изображение, как и заголовок.

71
00:03:45,210 --> 00:03:50,830
Все, что я сделал до сих пор, это использовать заголовок
тег, H1, и разрыв фраза, шир.

72
00:03:50,830 --> 00:03:54,900
Тег заголовка делает шрифт немного
немного больше и более заметным.

73
00:03:54,900 --> 00:03:58,930
Тег обрыва линии, с другой
С другой стороны, это круто.

74
00:03:58,930 --> 00:04:03,720
В отличие от большинства других тегов, вы не должны
открытие и закрытие перерыв тег, просто

75
00:04:03,720 --> 00:04:05,120
один показано выше.

76
00:04:05,120 --> 00:04:10,420
Это потому, что перерыв не имеет содержания
и поэтому, пустой элемент.

77
00:04:10,420 --> 00:04:14,940
>> Пустые элементы, как это, вы можете открыть
и близко одновременно просто

78
00:04:14,940 --> 00:04:20,420
в том числе косой черты в
конец первоначального заявления.

79
00:04:20,420 --> 00:04:24,390
Так что теперь мой сайт выглядит немного
что-то вроде этого.

80
00:04:24,390 --> 00:04:27,410
Лучше, но это отчасти чувствует
как тупик.

81
00:04:27,410 --> 00:04:30,850
Там в некуда идти в сторону
из этой главной странице.

82
00:04:30,850 --> 00:04:33,075
Ну, давайте исправить,
включая ссылку.

83
00:04:33,075 --> 00:04:36,860
>> То, что я собираюсь сделать вот использовать
атрибут обозначается и сделать

84
00:04:36,860 --> 00:04:40,780
Изображение ссылку на, скажем так, CS50 телевизор.

85
00:04:40,780 --> 00:04:44,460
Таким образом, всякий раз, когда кто-нибудь нажимает на меня,
их браузер будет направлена ​​на

86
00:04:44,460 --> 00:04:47,810
другой, вероятно, более
полезно, веб-страницы.

87
00:04:47,810 --> 00:04:51,040
Мне пришлось свести к минимуму размер
текст немного, потому что наш веб-страница

88
00:04:51,040 --> 00:04:52,470
становится все более продвинутые.

89
00:04:52,470 --> 00:04:54,590
Но, надеюсь, это все еще ясно.

90
00:04:54,590 --> 00:04:59,460
Мой сайт выглядит точно так же только
Теперь, всякий раз, когда я нажимаю на картинке,

91
00:04:59,460 --> 00:05:04,410
мой браузер откроет другой
Вкладка для веб-страницы CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Наконец, предположим, что я собираюсь стиле
этот сайт позже с помощью CSS.

93
00:05:08,970 --> 00:05:11,730
CSS является то, что известно как
каскадные таблицы стилей.

94
00:05:11,730 --> 00:05:15,230
И это в основном обеспечивает эффективный
способ редактирования и стиль

95
00:05:15,230 --> 00:05:16,910
подобные блоки кода.

96
00:05:16,910 --> 00:05:21,290
Я хочу начать организации моей HTML к
чтобы было легче укладывать в дальнейшем.

97
00:05:21,290 --> 00:05:26,900
Здесь, я создал два различных вида
идентификаторы, которые помогут организовать свой код.

98
00:05:26,900 --> 00:05:31,170
Я использовал атрибут ID внутри
разделение или дел тег, и я использовал

99
00:05:31,170 --> 00:05:34,120
Класс атрибутов внутри
другой дел тег.

100
00:05:34,120 --> 00:05:37,190
>> ID и атрибуты класса
работают аналогично.

101
00:05:37,190 --> 00:05:41,210
Разница лишь в том, вы можете иметь только
один элемент, удельный ID, но

102
00:05:41,210 --> 00:05:43,600
любое количество элементов
можете поделиться класс.

103
00:05:43,600 --> 00:05:47,690
Так, например, я могу использовать класс
изображения несколько раз, но я не могу

104
00:05:47,690 --> 00:05:50,533
создать еще один отдел
с ID вершине.

105
00:05:50,533 --> 00:05:54,750
Хотя я не пошел в CSS,
другой язык обычно используется

106
00:05:54,750 --> 00:05:59,700
наряду HTML, как только я начинаю стиль
мой код с CSS, я могу использовать эти

107
00:05:59,700 --> 00:06:03,730
организационные атрибуты к воздействию
эстетика моего веб-страницы.

108
00:06:03,730 --> 00:06:07,600
>> Все в рамках Отдела верхней
будет иметь такие же стилю или любого

109
00:06:07,600 --> 00:06:12,010
Другая группа HTML I группы в
Класс изображение поделятся подобный взгляд.

110
00:06:12,010 --> 00:06:15,700
Это гораздо легче, чем пытаться редактировать
и изображения или блоки стиль

111
00:06:15,700 --> 00:06:17,690
текст индивидуально.

112
00:06:17,690 --> 00:06:21,480
>> Таким образом, мы перешли основы того, как
чтобы сделать веб-страницу с HTML.

113
00:06:21,480 --> 00:06:25,280
HTML имеет кучу других функций слишком
что, когда в паре с другими языками

114
00:06:25,280 --> 00:06:29,220
как CSS и JavaScript, могут на самом деле
сделать страницы выделиться.

115
00:06:29,220 --> 00:06:32,960
Лучший способ научиться работать с
HTML просто возиться с ним,

116
00:06:32,960 --> 00:06:35,120
посмотреть, что работает, а что нет.

117
00:06:35,120 --> 00:06:36,570
>> Меня зовут Daven Фарнхэм.

118
00:06:36,570 --> 00:06:37,820
Это CS50.

119
00:06:37,820 --> 00:06:40,640

120
00:06:40,640 --> 00:06:45,690
>> Так, например, я могу использовать
образ класс -

121
00:06:45,690 --> 00:06:48,028
Нет, есть очень много атрибутов.

122
00:06:48,028 --> 00:06:52,500

123
00:06:52,500 --> 00:06:53,950
Меня зовут Daven Фарнхэм.

124
00:06:53,950 --> 00:06:58,560
Это CS 650.

125
00:06:58,560 --> 00:06:59,810
Я хочу сказать, CSS.

126
00:06:59,810 --> 00:07:02,325

127
00:07:02,325 --> 00:07:03,575
Это CSS.

128
00:07:03,575 --> 00:07:05,408