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
за различните аспекти на C, може би
малко повече, може би малко по-малко.

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
>> Но това ще е OK.

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 е Hyper Text Markup Language.

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
Ние не просто имат тези тагове.

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
World, здравей.

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
The маркиране ни дава начин да се
съобщава допълнителна информация

108
00:04:58,450 --> 00:04:59,940
за това, което съм писал.

109
00:04:59,940 --> 00:05:03,130
The Hello, World част беше
тълкува в заглавието.

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
>> Така че нека да разгледаме по-
Няколко общи тагове.

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 имам
файл, наречен BIU дот HTML.

146
00:06:43,390 --> 00:06:46,770
BIU дот HTML просто е
удебелен, курсив, подчертаване.

147
00:06:46,770 --> 00:06:47,830
Аз ще го отворят.

148
00:06:47,830 --> 00:06:51,810
>> И ние ще видим, че тук съм
имат този текст е тагове Б смели.

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
да ми браузър, ми файлов браузър, кликнете
Preview, и това е, което идва.

154
00:07:04,690 --> 00:07:07,520
>> Текстът в между В
тагове е наистина сега смели.

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
Друга двойка на общи тагове тук са
параграф тагове, P, и заглавни тагове,

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
I want-- по подразбиране ще бъде one--
само с добавяне на тази така наречена атрибут

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
две, три, четири, пет, които
би бил случаят, ако бях казал OL

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 тагове отиват във вътрешността на TR тагове
да посочите колона в рамките на един ред.

244
00:11:22,510 --> 00:11:24,340
>> Защо се нарича TD а не TC?

245
00:11:24,340 --> 00:11:25,940
Е, TD щандове за таблични данни.

246
00:11:25,940 --> 00:11:27,900
Обикновено можете да започнете поставянето
Вашата информация там.

247
00:11:27,900 --> 00:11:29,440
Така че защо е TD а не TC.

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
имате няколко реда, TRs.

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
И след това в първия си ред I очевидно
има четири колони, една, две, три,

259
00:12:02,100 --> 00:12:02,660
четири.

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
>> Пропускане над Разделения секунда.

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
Тогава там е тази концепция за
а Разделения, които в действителност не

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
Можем да сложим неща вътре
на divs, а в действителност,

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 а
файл, наречен Разделения форма дот HTML.

309
00:13:57,050 --> 00:13:59,260
Нека да го отворите.

310
00:13:59,260 --> 00:14:01,460
Забележете, че както казах,
Разделение е вид произволно.

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
И след това, вместо на друга Разделения
по-късно, започва на линия осем,

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
отнема парола, друг, че е Radio
бутон, друг това е поле за отметка,

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
И в моята парола I
да въведете паролата си.

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
>> A HREF равнява х означава отиват в
уеб страница X. И всичко

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
някъде между това Разделения
маркер, това произволно деление.

412
00:18:49,060 --> 00:18:51,497
Очевидно, че файла е
ООД с Rick дот 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