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