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