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

2
00:00:06,100 --> 00:00:08,790
>> DOUG LLOYD: Vì vậy, chúng tôi đã dành
about-- nếu toán học của tôi là đúng,

3
00:00:08,790 --> 00:00:11,900
và tôi nghĩ rằng tìm back-- tôi nghĩ
chúng tôi đã dành khoảng 35 video nói

4
00:00:11,900 --> 00:00:15,139
về các khía cạnh khác nhau của C, có thể
nhiều hơn một chút, có thể là một chút ít.

5
00:00:15,139 --> 00:00:16,930
Và chúng tôi đã không che
tất cả mọi thứ trong C, nhưng chúng tôi

6
00:00:16,930 --> 00:00:21,170
bao phủ một đoạn lớn của
ngôn ngữ, phần lớn của nó,

7
00:00:21,170 --> 00:00:22,882
chắc chắn để sử dụng phổ biến.

8
00:00:22,882 --> 00:00:25,090
Bây giờ chúng ta sẽ nói chuyện
về một ngôn ngữ khác, HTML.

9
00:00:25,090 --> 00:00:28,180
Và chúng ta sẽ bao gồm
nó chỉ trong một video.

10
00:00:28,180 --> 00:00:29,340
>> Nhưng đó sẽ là OK.

11
00:00:29,340 --> 00:00:31,410
Điều đó sẽ thực sự trở thành
một cái gì đó bạn sẽ được sử dụng để.

12
00:00:31,410 --> 00:00:33,535
Bây giờ bạn có
nguyên tắc cơ bản của một ngôn ngữ,

13
00:00:33,535 --> 00:00:35,776
nó thực sự khá dễ dàng
để bắt đầu học những người khác.

14
00:00:35,776 --> 00:00:37,650
Vì vậy, chúng ta sẽ bắt đầu
bước một chút trở lại

15
00:00:37,650 --> 00:00:43,340
và bóng trên cơ bản
sự khác biệt giữa các ngôn ngữ

16
00:00:43,340 --> 00:00:45,750
và loại bỏ bạn để nó.

17
00:00:45,750 --> 00:00:48,530
Có rất nhiều thực sự tuyệt vời
tài nguyên trên internet, trong đó

18
00:00:48,530 --> 00:00:51,279
chúng ta sẽ bắt đầu chỉ đạo bạn
hướng tới bởi vì Internet là

19
00:00:51,279 --> 00:00:53,340
một kho thông tin khổng lồ.

20
00:00:53,340 --> 00:00:55,960
Và do đó, nó không giống như bạn sẽ thấy
được mất ra nhất thiết

21
00:00:55,960 --> 00:00:58,349
bởi không có thông tin
bảo hiểm trong một video.

22
00:00:58,349 --> 00:01:00,640
Bạn vẫn có thể nhận được
tất cả mọi thứ bạn cần và sử dụng

23
00:01:00,640 --> 00:01:03,590
những kiến ​​thức bạn đã đã
xây dựng bằng sự hiểu biết C

24
00:01:03,590 --> 00:01:07,130
để làm cho đường cong học tập cho các
ngôn ngữ khác thực sự là một phẳng hơn rất nhiều.

25
00:01:07,130 --> 00:01:08,640
Tôi hứa.

26
00:01:08,640 --> 00:01:12,770
>> Nhưng chúng ta hãy nói về một ngôn ngữ
đó là thực sự cơ bản cho mỗi web

27
00:01:12,770 --> 00:01:14,830
trang, đó là HTML.

28
00:01:14,830 --> 00:01:18,230
HTML là Hyper Text Markup Language.

29
00:01:18,230 --> 00:01:22,700
HTML là một ngôn ngữ nhưng nó là
không phải là một ngôn ngữ lập trình.

30
00:01:22,700 --> 00:01:23,900
>> HTML không có các biến.

31
00:01:23,900 --> 00:01:26,430
Nó không có logic hay
chức năng hoặc bất cứ điều gì như thế.

32
00:01:26,430 --> 00:01:30,301
Chúng tôi không thể làm bất cứ
lập trình cho mỗi gia trong HTML.

33
00:01:30,301 --> 00:01:32,300
Đôi khi bạn sẽ nghe thấy
người mô tả bản thân

34
00:01:32,300 --> 00:01:35,710
như lập trình HTML, mà
là không hoàn toàn chính xác.

35
00:01:35,710 --> 00:01:37,980
Chúng tôi không thể viết chương trình HTML.

36
00:01:37,980 --> 00:01:40,770
>> HTML chỉ được sử dụng để đánh dấu lên văn bản.

37
00:01:40,770 --> 00:01:42,690
Nó được gọi là một ngôn ngữ đánh dấu.

38
00:01:42,690 --> 00:01:47,680
Và điều này does-- markup-- này
chúng tôi sử dụng thẻ trong HTML và các tags--

39
00:01:47,680 --> 00:01:51,600
này markup-- ngữ nghĩa
xác định cấu trúc của một trang

40
00:01:51,600 --> 00:01:55,280
và gây ra các văn bản thô
tồn tại giữa các thẻ để được giải thích

41
00:01:55,280 --> 00:01:57,320
bởi các trình duyệt trong nhiều cách khác nhau.

42
00:01:57,320 --> 00:02:00,370
Và có lẽ nó là tốt nhất để giải thích
cách bằng này của một minh hoạ.

43
00:02:00,370 --> 00:02:06,450
>> Đây là một trang HTML rất đơn giản, không
một chương trình HTML, một lần nữa, một trang HTML.

44
00:02:06,450 --> 00:02:08,680
Và chúng ta biết nó là một
Trang HTML bởi vì chúng tôi đã

45
00:02:08,680 --> 00:02:11,480
bao bọc tất cả mọi thứ với các thẻ HTML.

46
00:02:11,480 --> 00:02:13,850
Vì vậy, đây là những gì một tag HTML như thế nào.

47
00:02:13,850 --> 00:02:15,870
Đó là giữa dấu ngoặc nhọn.

48
00:02:15,870 --> 00:02:18,570
Và hãy chú ý ở phía trên chúng tôi có
HTML và ở dưới cùng rất,

49
00:02:18,570 --> 00:02:21,400
sau khi chúng tôi đã thực hiện được những gì
dường như rất nhiều HTML khác,

50
00:02:21,400 --> 00:02:24,310
chúng ta có góc khung slash HTML.

51
00:02:24,310 --> 00:02:29,262
Vì vậy, đó là loại ranh giới
giữa những gì là HTML và những gì không.

52
00:02:29,262 --> 00:02:32,220
Và tất nhiên, thông thường, chỉ cần
như bạn đã viết tất cả các chương trình C của bạn

53
00:02:32,220 --> 00:02:35,300
với phần mở rộng dot C,
tất cả các tập tin HTML của bạn

54
00:02:35,300 --> 00:02:37,909
sẽ kết thúc với phần mở rộng HTML dot.

55
00:02:37,909 --> 00:02:39,200
Nhưng có của nhiều đang xảy ra ở đây.

56
00:02:39,200 --> 00:02:40,658
Chúng tôi không chỉ có các thẻ HTML.

57
00:02:40,658 --> 00:02:44,010
Chúng tôi dường như có điều này
điều được gọi là một thẻ đầu.

58
00:02:44,010 --> 00:02:46,010
Vâng, OK, đó là những gì?

59
00:02:46,010 --> 00:02:48,550
>> Cũng có thể nó là tốt nhất để
phân biệt bằng cách của một cơ thể,

60
00:02:48,550 --> 00:02:50,590
cơ thể là nội dung của trang web.

61
00:02:50,590 --> 00:02:55,860
Vì vậy có lẽ thẻ đầu xác định cụ
đó không phải là trong cửa sổ trình duyệt thích hợp,

62
00:02:55,860 --> 00:02:59,410
nhưng là bằng cách nào đó quan trọng với chúng tôi
Trang web được biểu hiện một cách chính xác.

63
00:02:59,410 --> 00:03:02,490
Ví dụ, bên trong
thẻ đầu chúng tôi có thẻ tiêu đề.

64
00:03:02,490 --> 00:03:05,500
>> Vì vậy, tiêu đề là hello world,
đó là thực sự có được những gì

65
00:03:05,500 --> 00:03:08,797
cho thấy trong các tab trong Chrome
hoặc trong safari hoặc Firefox--

66
00:03:08,797 --> 00:03:11,880
bất cứ trình duyệt bạn prefer-- đó
những gì sẽ xuất hiện trong tiêu đề.

67
00:03:11,880 --> 00:03:14,800
Và trước khi các tab nó sẽ hiển thị
trong toàn bộ cửa sổ trình duyệt của bạn

68
00:03:14,800 --> 00:03:19,710
và bạn chỉ có thể có một trang
mở trong một cửa sổ trình duyệt tại một thời điểm.

69
00:03:19,710 --> 00:03:22,160
Vì vậy, đó sẽ là các
tiêu đề của trang web của tôi lên trong tab

70
00:03:22,160 --> 00:03:24,600
hoặc thanh cửa sổ trình duyệt, hello thế giới.

71
00:03:24,600 --> 00:03:28,611
Và sau đó nội dung của tôi
Trang web sẽ được thế giới, xin chào.

72
00:03:28,611 --> 00:03:31,360
Vì vậy, chúng ta hãy nhìn vào những gì một số
điều như thế này có thể trông như thế nào.

73
00:03:31,360 --> 00:03:33,210
Đây là một trang HTML khá đơn giản.

74
00:03:33,210 --> 00:03:35,970
Vì vậy, tôi ở đây trong IDE của tôi và CS50
Tôi đã phóng to một chút.

75
00:03:35,970 --> 00:03:38,290
Và tôi chỉ cần đi tới
mở ra chào dot HTML

76
00:03:38,290 --> 00:03:42,000
và cho bạn thấy rằng điều này là khá nhiều
nội dung trang mà chúng tôi đã nhìn thấy trước.

77
00:03:42,000 --> 00:03:45,240
Thẻ HTML, người đứng đầu đơn giản của tôi,
thẻ tiêu đề, cơ thể, và như vậy.

78
00:03:45,240 --> 00:03:47,320
Tôi đã thụt vào được sạch sẽ.

79
00:03:47,320 --> 00:03:51,530
>> Và sau đó những gì tôi có thể làm gì trong tôi
IDE chỉ được xem trước trang.

80
00:03:51,530 --> 00:03:52,630
Và ở đó chúng tôi đi.

81
00:03:52,630 --> 00:03:56,070
Nội dung của trang của tôi là thế giới,
hello, và tôi không thấy bất cứ điều gì

82
00:03:56,070 --> 00:03:58,500
từ các thẻ đầu ở đó.

83
00:03:58,500 --> 00:03:59,980
Nó chỉ là nội dung của cơ thể.

84
00:03:59,980 --> 00:04:00,780
Thế giới, xin chào.

85
00:04:00,780 --> 00:04:03,700
Và một lần nữa cơ thể chỉ
cho biết, trên thế giới, xin chào.

86
00:04:03,700 --> 00:04:06,160
Các phần khác là mất tích.

87
00:04:06,160 --> 00:04:07,610
>> Vì vậy, đó thực sự là tất cả nó.

88
00:04:07,610 --> 00:04:11,370
Đây là một trang HTML cơ bản rất đơn giản.

89
00:04:11,370 --> 00:04:14,280
Bây giờ tôi đã thụt vào HTML của tôi để
thật sự tốt đẹp và có tổ chức,

90
00:04:14,280 --> 00:04:15,840
nhưng tôi không thực sự phải.

91
00:04:15,840 --> 00:04:17,959
Tôi có thể làm cho nó trông khá xấu xí.

92
00:04:17,959 --> 00:04:19,467
Và điều này sẽ vẫn làm việc.

93
00:04:19,467 --> 00:04:21,050
Đây sẽ là các trang web chính xác như nhau.

94
00:04:21,050 --> 00:04:23,100
Tôi vừa gạt bỏ
tất cả các khoảng trắng.

95
00:04:23,100 --> 00:04:24,820
>> Khi nó quay ra, không gian màu trắng là dữ liệu.

96
00:04:24,820 --> 00:04:28,540
Và như vậy khi chúng tôi đang gửi dữ liệu từ
gửi đến người nhận, từ máy chủ

97
00:04:28,540 --> 00:04:30,670
cho khách hàng, dữ liệu chi phí tiền bạc.

98
00:04:30,670 --> 00:04:34,460
Và do đó, việc loại bỏ các khoảng trắng
thực sự là một ý tưởng tốt

99
00:04:34,460 --> 00:04:37,320
nếu bạn là một người nào đó phục vụ
lên rất nhiều nội dung web.

100
00:04:37,320 --> 00:04:39,820
Đó là một ý tưởng tồi nếu bạn
ai đó là công cụ học tập này

101
00:04:39,820 --> 00:04:41,528
và bạn muốn có
nó độc đáo được tổ chức.

102
00:04:41,528 --> 00:04:43,810
Điều này là dễ dàng hơn nhiều để phân tích hơn này.

103
00:04:43,810 --> 00:04:45,540
Nhưng đó là chức năng giống hệt.

104
00:04:45,540 --> 00:04:48,720
>> Các vết lõm và các công cụ như thế
không thực sự quan trọng trong HTML.

105
00:04:48,720 --> 00:04:53,634
Tất cả những vấn đề là thẻ mở và
đóng thẻ theo đúng thứ tự.

106
00:04:53,634 --> 00:04:55,050
Chú ý những gì xảy ra ở đây, mặc dù.

107
00:04:55,050 --> 00:04:58,450
Đánh dấu cho chúng ta một cách để
truyền đạt thông tin thêm

108
00:04:58,450 --> 00:04:59,940
về những gì chúng tôi đã viết.

109
00:04:59,940 --> 00:05:03,130
Phần Hello, World là
giải thích như tiêu đề.

110
00:05:03,130 --> 00:05:06,410
Và trên thế giới, hello phần là
hiểu là nội dung

111
00:05:06,410 --> 00:05:09,090
hoặc những gì cần được
hiển thị trên trang web của tôi.

112
00:05:09,090 --> 00:05:12,167
>> Hiện có hơn 100 các khác nhau
thẻ và nhiều tài nguyên tuyệt vời

113
00:05:12,167 --> 00:05:13,000
trực tuyến để tìm thấy chúng.

114
00:05:13,000 --> 00:05:14,900
Chúng ta sẽ nói về một
vài trong số họ trong video này, một số

115
00:05:14,900 --> 00:05:16,440
các công cụ thực sự cơ bản.

116
00:05:16,440 --> 00:05:18,440
Nhưng chúng tôi sẽ không nói chuyện
về nó bởi vì nó

117
00:05:18,440 --> 00:05:20,250
sẽ được đầy đủ để làm như vậy.

118
00:05:20,250 --> 00:05:22,880
>> Một điều bạn có thể làm, mặc dù,
là mở ra công cụ phát triển.

119
00:05:22,880 --> 00:05:26,069
Và nếu bạn nhớ lại từ
video của chúng tôi trên HTTP,

120
00:05:26,069 --> 00:05:27,860
Tôi giải thích làm thế nào để mở
lên các công cụ phát triển.

121
00:05:27,860 --> 00:05:32,020
Trong Chrome nó thường là phím F12
để mở ra các thanh công cụ phát triển.

122
00:05:32,020 --> 00:05:35,909
Sau đó, thay vì lựa chọn Mạng
tab, bạn có thể chọn tab Elements.

123
00:05:35,909 --> 00:05:37,700
Và nếu bạn tải một web
trang, bạn sẽ thực sự

124
00:05:37,700 --> 00:05:40,280
xem mã HTML để tạo trang web đó.

125
00:05:40,280 --> 00:05:44,090
Và như vậy bạn có thể học hỏi được rất nhiều về HTML
bằng cách nhìn vào các trang web ưa thích của bạn

126
00:05:44,090 --> 00:05:48,474
và nhìn thấy cách họ xây dựng các
phần khác nhau của họ mà bạn thích.

127
00:05:48,474 --> 00:05:50,890
Vì vậy, có lẽ đó là mát mẻ này
mô hình hoặc một cái gì đó như thế.

128
00:05:50,890 --> 00:05:52,140
Làm thế nào để họ làm cho nó với HTML?

129
00:05:52,140 --> 00:05:55,630
Vâng, bạn chỉ có thể mở lên phát triển của bạn
công cụ và di chuột trên yếu tố đó

130
00:05:55,630 --> 00:05:57,700
và xem chính xác những gì nó làm cho HTML.

131
00:05:57,700 --> 00:05:59,450
Vì vậy, đó là một thực sự
cách tốt để học HTML,

132
00:05:59,450 --> 00:06:02,330
và tôi khuyên
bạn làm điều đó cả hai phải học HTML

133
00:06:02,330 --> 00:06:04,930
và cũng để tìm hiểu một chút
chút thông tin về một số các tùy chọn

134
00:06:04,930 --> 00:06:07,050
sẵn cho bạn trong
công cụ phát triển, trong đó

135
00:06:07,050 --> 00:06:10,200
chắc chắn sẽ có ích như
bạn bắt đầu làm web chuyên sâu hơn

136
00:06:10,200 --> 00:06:11,090
lập trình.

137
00:06:11,090 --> 00:06:14,080
>> Vì vậy, chúng ta hãy nhìn vào một
vài thẻ HTML thông thường.

138
00:06:14,080 --> 00:06:17,210
Và chúng ta sẽ nhảy và có một cái nhìn tại
những gì các thẻ cũng sẽ làm

139
00:06:17,210 --> 00:06:20,490
là bằng cách nhìn vào một số tập tin trong IDE của tôi.

140
00:06:20,490 --> 00:06:26,330
Vì vậy, đây là ba thẻ rất cơ bản cho
tinh chỉnh các hình thức trực quan của văn bản.

141
00:06:26,330 --> 00:06:29,050
Có thẻ B, thẻ I, và các thẻ U.

142
00:06:29,050 --> 00:06:33,170
Và lần lượt những gì họ làm là
làm cho văn bản giữa chúng in đậm,

143
00:06:33,170 --> 00:06:35,430
in nghiêng, gạch chân và.

144
00:06:35,430 --> 00:06:40,430
Vì vậy, chúng ta hãy xem những gì mà sẽ tìm
như trên một trang web thực tế trong IDE của tôi.

145
00:06:40,430 --> 00:06:43,390
>> Vì vậy, ở đây trong IDE của tôi, tôi có một
tập tin gọi là BIU dot HTML.

146
00:06:43,390 --> 00:06:46,770
BIU dot HTML chỉ là
in đậm, in nghiêng, gạch chân.

147
00:06:46,770 --> 00:06:47,830
Tôi sẽ mở nó lên.

148
00:06:47,830 --> 00:06:51,810
>> Và chúng ta sẽ thấy rằng ở đây tôi
có văn bản này là thẻ B đậm.

149
00:06:51,810 --> 00:06:54,010
Văn bản này là thẻ Tôi nghiêng.

150
00:06:54,010 --> 00:06:56,307
Và văn bản này là thẻ U gạch chân.

151
00:06:56,307 --> 00:06:57,640
Những gì được này sẽ trông như thế nào?

152
00:06:57,640 --> 00:06:59,473
Vâng một lần nữa, tất cả tôi có
phải làm là đi qua đây

153
00:06:59,473 --> 00:07:04,690
để trình duyệt của tôi, trình duyệt tập tin của tôi, nhấp
Xem trước, và đây là những gì đi lên.

154
00:07:04,690 --> 00:07:07,520
>> Các văn bản ở giữa B
tags thực hiện táo bạo.

155
00:07:07,520 --> 00:07:10,720
Các văn bản ở giữa tôi
tags thực sự là doanh nghiệp in nghiêng.

156
00:07:10,720 --> 00:07:14,634
Và các văn bản ở giữa U
thẻ được thực hiện nay nhấn mạnh.

157
00:07:14,634 --> 00:07:15,550
Vì vậy, đó là khá tốt.

158
00:07:15,550 --> 00:07:18,450
Bây giờ chúng tôi biết làm thế nào để làm cho văn bản
nhìn một chút ưa thích hơn

159
00:07:18,450 --> 00:07:20,360
hoặc vẽ nhấn mạnh đến những điều nào.

160
00:07:20,360 --> 00:07:25,530
Một vài thẻ phổ biến ở đây là
tags khoản, thẻ P, và tiêu đề,

161
00:07:25,530 --> 00:07:27,980
mà tôi đã trả ở đây là HX.

162
00:07:27,980 --> 00:07:32,520
>> Các thẻ P, các thẻ đoạn,
phá vỡ văn bản của bạn thành nhiều phần.

163
00:07:32,520 --> 00:07:34,646
Nó không đủ để chỉ
nhấn Enter và để lại không gian,

164
00:07:34,646 --> 00:07:37,186
vì một máy tính chỉ được đi
để làm những gì bạn nói với nó để làm

165
00:07:37,186 --> 00:07:39,450
và nó bỏ qua màu trắng
không gian cho hầu hết các phần.

166
00:07:39,450 --> 00:07:41,636
Vì vậy, chúng ta không thể chỉ nhấn Enter
và mong muốn máy tính của chúng

167
00:07:41,636 --> 00:07:43,760
để giải thích rằng chúng tôi muốn
để bắt đầu một đoạn mới.

168
00:07:43,760 --> 00:07:47,670
Chúng ta phải nói rất rõ ràng này
là một paragraph-- này là another--

169
00:07:47,670 --> 00:07:50,740
bởi bao quanh mỗi một bộ các thẻ P.

170
00:07:50,740 --> 00:07:54,560
>> Và chúng tôi cũng có các tùy chọn
cho các thẻ H, các thẻ tiêu đề.

171
00:07:54,560 --> 00:07:57,000
Chúng tôi có sáu cấp độ khác nhau
các tiêu đề, một, hai, ba,

172
00:07:57,000 --> 00:08:01,110
bốn, năm, sáu, đó là
dần dần lớn hơn và lớn hơn

173
00:08:01,110 --> 00:08:01,710
tiêu đề.

174
00:08:01,710 --> 00:08:04,360
Và họ nhận được nhỏ hơn và
nhỏ hơn và nhỏ hơn và nhỏ hơn.

175
00:08:04,360 --> 00:08:07,690
Vì vậy, chúng ta có một mức độ tiêu đề hàng đầu, một giây
mức độ tiêu đề, và như vậy, và như vậy.

176
00:08:07,690 --> 00:08:10,480
>> Chúng ta hãy nhìn vào có thể một số
Tags P và một số thẻ header

177
00:08:10,480 --> 00:08:13,110
trong hành động trên một trang web.

178
00:08:13,110 --> 00:08:18,180
Vì vậy, ở đây trong IDE của tôi, tôi có một tập tin gọi là
PH dot HTML, PH là đoạn văn

179
00:08:18,180 --> 00:08:18,970
và các thẻ tiêu đề.

180
00:08:18,970 --> 00:08:20,709
Mở mà lên.

181
00:08:20,709 --> 00:08:23,000
Có của rất nhiều xảy ra ở đây
bởi vì tôi đã đặt một số lorem

182
00:08:23,000 --> 00:08:24,660
ipsum, một số văn bản chỉ là ngẫu nhiên ở đây.

183
00:08:24,660 --> 00:08:27,284
Vì vậy, tôi sẽ phóng to ra một chút
vì có rất nhiều đang xảy ra.

184
00:08:27,284 --> 00:08:31,980
Nhưng nhận thấy rằng tôi đã ở rất
đầu ở đây tôi có một H1, một cấp độ một,

185
00:08:31,980 --> 00:08:32,802
tag tiêu đề.

186
00:08:32,802 --> 00:08:36,010
Sau đó, tôi có một đoạn, mà chỉ là
một bó ngẫu nhiên text-- lorem ipsum--

187
00:08:36,010 --> 00:08:38,720
chỉ mặc điền tiêu chuẩn trong văn bản.

188
00:08:38,720 --> 00:08:41,970
Vì vậy, tôi có hai đoạn văn bên trong đó
cấp một tiêu đề và sau đó xuống bên dưới tôi

189
00:08:41,970 --> 00:08:46,850
có một mức độ tiêu đề hai ở đây trên đường 24,
một mức độ tiêu đề thứ hai, và hai khác

190
00:08:46,850 --> 00:08:47,840
đoạn văn.

191
00:08:47,840 --> 00:08:51,910
Vâng, điều này không giống như
nếu tôi xem nó trong bản xem trước của tôi?

192
00:08:51,910 --> 00:08:53,790
Chúng ta hãy xem.

193
00:08:53,790 --> 00:08:55,730
>> Vì vậy, nhận thấy rằng các
mức độ tiêu đề đầu tiên ở đây

194
00:08:55,730 --> 00:08:58,420
thực sự là khá lớn hơn một chút
hơn so với mức độ tiêu đề thứ hai.

195
00:08:58,420 --> 00:08:59,940
Vì vậy, chúng tôi sử dụng thẻ H1.

196
00:08:59,940 --> 00:09:03,820
Và nhận thấy rằng các thẻ P cho phép chúng tôi
phá vỡ mọi thứ ra thành nhiều đoạn.

197
00:09:03,820 --> 00:09:07,500
Nếu chúng ta đã gạt bỏ những thẻ P
và thực sự chỉ cần đặt Vào hoặc Returns

198
00:09:07,500 --> 00:09:10,110
ở giữa những gì chúng tôi hy vọng sẽ
được các đoạn văn khác nhau,

199
00:09:10,110 --> 00:09:13,193
họ sẽ tất cả chỉ slam với nhau và
nó sẽ không có đoạn này tốt đẹp

200
00:09:13,193 --> 00:09:15,840
tách với không gian bên trên và bên dưới.

201
00:09:15,840 --> 00:09:18,300
Và đó là những điều khoản
thẻ và thẻ tiêu đề

202
00:09:18,300 --> 00:09:22,440
thường được sử dụng để làm gì để vẽ
chú ý đến các phần của trang web của chúng tôi

203
00:09:22,440 --> 00:09:23,550
theo cách đó.

204
00:09:23,550 --> 00:09:27,560
>> Lên tiếp theo là một số thẻ mà chúng tôi sử dụng
để xây dựng danh sách trên trang web của chúng tôi.

205
00:09:27,560 --> 00:09:30,820
Vì vậy, chúng ta phải có thứ tự
lists-- ULs-- mà chỉ là

206
00:09:30,820 --> 00:09:34,090
danh sách gạch đầu dòng, ra lệnh
danh sách đó là numbered--

207
00:09:34,090 --> 00:09:37,680
OLs-- và bên trong của một trong hai
một trong những người chúng ta cần phải có

208
00:09:37,680 --> 00:09:40,600
bộ như thế nào để cho biết danh sách các mặt hàng, LI.

209
00:09:40,600 --> 00:09:44,370
Và vì vậy chúng tôi có mở thẻ UL
và chúng tôi đặt các mục bên trong của nó.

210
00:09:44,370 --> 00:09:46,920
Và sau đó khi chúng tôi đang thực hiện với
rằng, chúng ta có thể đóng thẻ UL.

211
00:09:46,920 --> 00:09:49,850
>> Và tương tự như chúng ta có thể có
một danh sách đặt hàng hoặc số

212
00:09:49,850 --> 00:09:51,560
và đưa danh sách các hạng mục bên trong đó.

213
00:09:51,560 --> 00:09:53,350
Vì vậy, chúng ta hãy có một cái nhìn
ở một vài danh sách

214
00:09:53,350 --> 00:09:57,230
và những gì họ sẽ
render như trên CS50 IDE.

215
00:09:57,230 --> 00:10:00,640
Vì vậy, tôi có ở đây trong IDE của tôi một
tập tin gọi là danh sách chấm HTML.

216
00:10:00,640 --> 00:10:03,100
Hãy nhìn xem.

217
00:10:03,100 --> 00:10:08,482
>> Và thông báo ở đây tôi có một thứ tự
danh sách với năm điều trong đó.

218
00:10:08,482 --> 00:10:11,440
Và sau đó tôi có một danh sách đặt hàng, và
Tôi đã thay đổi các tag một chút,

219
00:10:11,440 --> 00:10:11,939
bên phải?

220
00:10:11,939 --> 00:10:13,152
Tôi đã nói bắt đầu bằng sáu.

221
00:10:13,152 --> 00:10:16,110
Nó quay ra với một danh sách có thứ I
có thể thiết lập điểm bắt đầu bất cứ nơi nào

222
00:10:16,110 --> 00:10:20,130
Tôi want-- theo mặc định nó sẽ one--
bởi chỉ cần thêm cái gọi là thuộc tính này

223
00:10:20,130 --> 00:10:21,190
để tag CV của tôi.

224
00:10:21,190 --> 00:10:23,572
Và do đó, danh sách này sẽ
bắt đầu đếm ở sáu.

225
00:10:23,572 --> 00:10:26,780
Vì vậy, các yếu tố của danh sách đó số
nên là sáu, bảy, tám, chín, mười,

226
00:10:26,780 --> 00:10:29,930
vì có năm yếu tố
trong danh sách, như trái ngược với một,

227
00:10:29,930 --> 00:10:33,770
hai, ba, bốn, năm, mà
sẽ là trường hợp nếu tôi nói CV

228
00:10:33,770 --> 00:10:36,730
mà không xác định thuộc tính bắt đầu.

229
00:10:36,730 --> 00:10:41,594
>> Vì vậy, chúng tôi sẽ chỉ xem trước này, do đó bạn có thể
có được một cảm giác về những gì đang xảy ra ở đây.

230
00:10:41,594 --> 00:10:42,260
Và ở đó chúng tôi đi.

231
00:10:42,260 --> 00:10:44,610
Có danh sách của tôi.

232
00:10:44,610 --> 00:10:47,810
Năm yếu tố đầu tiên là
không có thứ tự hay dấu danh sách.

233
00:10:47,810 --> 00:10:51,010
Và năm yếu tố tiếp theo
là một danh sách đặt hàng riêng

234
00:10:51,010 --> 00:10:52,980
bắt đầu từ sáu.

235
00:10:52,980 --> 00:10:56,247
Vì vậy, đó là làm thế nào chúng ta có thể
xây dựng danh sách bằng cách sử dụng HTML.

236
00:10:56,247 --> 00:10:58,080
Một điều có lẽ bạn
muốn làm với HTML

237
00:10:58,080 --> 00:11:01,520
được xây dựng một bảng
thông tin của các hàng và cột

238
00:11:01,520 --> 00:11:04,560
để trình bày thông tin
đặc biệt là tổ chức cách.

239
00:11:04,560 --> 00:11:09,110
Để làm điều này với HTML, chúng tôi có thể có một
nghĩa bảng bắt đầu mở khung

240
00:11:09,110 --> 00:11:10,160
bàn.

241
00:11:10,160 --> 00:11:14,680
Và sau đó bên trong của bảng đó chúng tôi
có thể có một tập hợp các hàng, thẻ TR

242
00:11:14,680 --> 00:11:15,980
để chỉ ra mỗi hàng.

243
00:11:15,980 --> 00:11:22,510
Và sau đó thẻ TD đi bên trong các thẻ TR
để xác định một cột trong một hàng.

244
00:11:22,510 --> 00:11:24,340
>> Tại sao lại gọi là TD và không TC?

245
00:11:24,340 --> 00:11:25,940
Vâng, TD là viết tắt của bảng dữ liệu.

246
00:11:25,940 --> 00:11:27,900
Thông thường, bạn đang đặt
thông tin của bạn ở đó.

247
00:11:27,900 --> 00:11:29,440
Vì vậy, đó là lý do tại sao nó là TD và không TC.

248
00:11:29,440 --> 00:11:31,140
Đó là một chút khó hiểu.

249
00:11:31,140 --> 00:11:33,720
>> Vì vậy, bạn có thẻ bảng và
bên trong các thẻ bảng của bạn

250
00:11:33,720 --> 00:11:35,600
bạn có một số lượng hàng, TRS.

251
00:11:35,600 --> 00:11:40,030
Và bên trong mỗi hàng bạn có
TDS cho số cột

252
00:11:40,030 --> 00:11:42,880
mà bạn muốn có
trong đó hàng cụ thể.

253
00:11:42,880 --> 00:11:47,730
Chúng ta hãy nhìn vào một rất
bảng đơn giản hơn trong CS50 IDE.

254
00:11:47,730 --> 00:11:49,730
>> Vì vậy, tôi có ở đây một tập tin
gọi là bảng chấm HTML.

255
00:11:49,730 --> 00:11:53,390
Hãy có một cái nhìn tại
gì đó trông như thế nào.

256
00:11:53,390 --> 00:11:56,225
Có của nhiều đang xảy ra ở đây, nhưng
nếu bạn nhận thấy tôi có một bảng mở.

257
00:11:56,225 --> 00:11:57,850
Tôi bắt đầu định nghĩa với bảng.

258
00:11:57,850 --> 00:12:02,100
Và sau đó trong hàng đầu tiên của tôi, tôi rõ ràng
có bốn cột, một, hai, ba,

259
00:12:02,100 --> 00:12:02,660
bốn.

260
00:12:02,660 --> 00:12:04,290
Và sau đó tôi thực hiện với hàng đó.

261
00:12:04,290 --> 00:12:07,750
>> Sau đó, tôi bắt đầu dòng khác và
làm hai, bốn, sáu, tám.

262
00:12:07,750 --> 00:12:08,850
Kết thúc hàng đó.

263
00:12:08,850 --> 00:12:11,410
Làm một dòng khác, ba, sáu, chín, 12.

264
00:12:11,410 --> 00:12:14,830
Và sau đó một hàng cuối cùng, bốn,
tám, 12, và mặc dù nó

265
00:12:14,830 --> 00:12:16,560
một ít cắt ở đây, 16.

266
00:12:16,560 --> 00:12:17,710
>> Tôi đã hoàn thành hàng đó.

267
00:12:17,710 --> 00:12:18,970
Tôi đã hoàn thành bàn.

268
00:12:18,970 --> 00:12:21,430
Và sau đó tôi thực hiện với HTML của tôi.

269
00:12:21,430 --> 00:12:22,590
Điều này không giống như thế?

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

271
00:12:26,014 --> 00:12:27,430
Vâng, nó không thực sự nhiều để xem.

272
00:12:27,430 --> 00:12:31,690
Tôi đã tổ chức rõ ràng thông tin của tôi
theo một cách nào có tổ chức hơn.

273
00:12:31,690 --> 00:12:33,755
Nhưng nó không phải siêu đẹp đây.

274
00:12:33,755 --> 00:12:36,130
Và chúng ta sẽ đối phó với
rằng khi chúng ta nói về CSS.

275
00:12:36,130 --> 00:12:38,930
Chúng tôi sẽ xem xét lại ý tưởng này của
những gì chúng ta làm gì để làm cho một table--

276
00:12:38,930 --> 00:12:41,260
có thể định dạng nó tốt hơn một chút?

277
00:12:41,260 --> 00:12:45,070
Nhưng tôi vẫn còn có bốn hàng,
mỗi trong số đó có bốn cột,

278
00:12:45,070 --> 00:12:48,890
và thực sự những gì số tiền này để là một
rất đơn giản bốn bốn nhân

279
00:12:48,890 --> 00:12:49,870
bàn.

280
00:12:49,870 --> 00:12:51,690
>> Chỉ cần thêm một vài thẻ chúng tôi sẽ nói về.

281
00:12:51,690 --> 00:12:54,617
Hãy nói về những
Khái niệm về một dạng HTML.

282
00:12:54,617 --> 00:12:57,450
Vì vậy, bạn có thể đã thấy điều này trong
bối cảnh cách đăng nhập vào một trang web.

283
00:12:57,450 --> 00:12:59,100
Thông thường, bạn gõ vào tên người dùng của bạn.

284
00:12:59,100 --> 00:13:01,510
Bạn gõ vào mật khẩu của bạn,
và bạn tốt để đi.

285
00:13:01,510 --> 00:13:04,170
Đó sẽ là sự khởi đầu của một hình thức.

286
00:13:04,170 --> 00:13:05,420
>> Bỏ qua div một giây.

287
00:13:05,420 --> 00:13:07,987
Chúng tôi cũng có đầu vào mà
loại phù hợp bên trong các hình thức.

288
00:13:07,987 --> 00:13:10,320
Đây là những yếu tố mà
bạn đang thực sự gõ vào,

289
00:13:10,320 --> 00:13:12,580
hoặc các nút radio bạn
đánh dấu, hoặc kiểm tra

290
00:13:12,580 --> 00:13:14,310
hộp mà bạn đang hẹn off.

291
00:13:14,310 --> 00:13:15,770
Vì vậy, những đi vào bên trong của hình thức.

292
00:13:15,770 --> 00:13:18,500
Và họ bao gồm cơ bản
mỗi hàng của các hình thức

293
00:13:18,500 --> 00:13:19,887
nếu mẫu của bạn được định dạng tốt.

294
00:13:19,887 --> 00:13:22,220
Sau đó có khái niệm này
một div, mà không thực sự

295
00:13:22,220 --> 00:13:25,060
phù hợp với bất kỳ loại đặc biệt
của thẻ như những cái tôi đã

296
00:13:25,060 --> 00:13:26,170
đã làm trước đây.

297
00:13:26,170 --> 00:13:29,790
Nó chỉ là loại demarcates các
bắt đầu của một số division-- tùy ý

298
00:13:29,790 --> 00:13:31,670
div-- của trang.

299
00:13:31,670 --> 00:13:33,210
Không có đột phá thị giác.

300
00:13:33,210 --> 00:13:34,800
Không có đường.

301
00:13:34,800 --> 00:13:37,180
Nó không phải đặt ra như một
đoạn riêng biệt tự động.

302
00:13:37,180 --> 00:13:39,430
Bạn muốn có phong cách nó
theo cách đó để làm điều đó.

303
00:13:39,430 --> 00:13:42,110
>> Nó chỉ là loại nói tôi muốn có một
mảnh của không gian trên trang web của tôi,

304
00:13:42,110 --> 00:13:45,190
và tôi chỉ cần đi để gọi
nó phân chia này của trang của tôi.

305
00:13:45,190 --> 00:13:47,619
Chúng ta có thể đặt công cụ bên trong
divs, và trong thực tế,

306
00:13:47,619 --> 00:13:49,410
khi chúng tôi đi qua
IDE trong một giây, chúng tôi sẽ

307
00:13:49,410 --> 00:13:53,760
thấy rằng tôi đang đặt của tôi
hình thành bên trong của một div.

308
00:13:53,760 --> 00:13:57,050
>> Vì vậy, tôi có ở đây trong IDE của tôi một
tập tin gọi là div dạng dot HTML.

309
00:13:57,050 --> 00:13:59,260
Chúng ta hãy mở nó lên.

310
00:13:59,260 --> 00:14:01,460
Chú ý rằng như tôi đã nói,
div là loại tùy ý.

311
00:14:01,460 --> 00:14:01,640
Bên phải?

312
00:14:01,640 --> 00:14:02,973
Nó không thực sự có nghĩa là bất cứ điều gì.

313
00:14:02,973 --> 00:14:05,140
Vì vậy, tôi có một tùy ý
phân chia đầu tiên của trang của tôi.

314
00:14:05,140 --> 00:14:07,848
Và sau đó thay vì một div
sau đó, bắt đầu từ dòng tám,

315
00:14:07,848 --> 00:14:08,730
Tôi có hình thức này.

316
00:14:08,730 --> 00:14:13,594
Và bên trong của hình thức Tôi có một
số lượng đầu vào, các lĩnh vực của biểu mẫu.

317
00:14:13,594 --> 00:14:16,510
Vì vậy, tôi có một trường có tên là A--
mà không thực sự có nghĩa là bất cứ điều gì

318
00:14:16,510 --> 00:14:19,350
now-- ngay mà dường
có văn bản, một số khác mà

319
00:14:19,350 --> 00:14:22,630
mất mật khẩu, khác đó là một Radio
nút, khác đó là một hộp kiểm tra,

320
00:14:22,630 --> 00:14:24,797
và một người khác đó là một nút Submit.

321
00:14:24,797 --> 00:14:26,630
Vâng, những gì hiện nay
tất cả thực sự trông như thế nào?

322
00:14:26,630 --> 00:14:27,629
Vâng, chúng ta hãy có một cái nhìn.

323
00:14:27,629 --> 00:14:31,010
Chúng tôi sẽ mở nó lên trong cửa sổ xem trước của chúng tôi.

324
00:14:31,010 --> 00:14:33,557
Chú ý rằng tùy tiện này
đầu tiên division-- có

325
00:14:33,557 --> 00:14:34,640
không tách hình ảnh ở đây.

326
00:14:34,640 --> 00:14:37,150
Nó không thực sự làm bất cứ điều gì, phải không?

327
00:14:37,150 --> 00:14:38,220
>> Và sau đó tôi có hình thức của tôi.

328
00:14:38,220 --> 00:14:39,890
Và tôi đã không làm bất kỳ định dạng đặc biệt.

329
00:14:39,890 --> 00:14:42,680
Vì vậy, các hình thức chỉ là một
hàng lớn của thông tin.

330
00:14:42,680 --> 00:14:46,424
Nếu tôi đã được định dạng hình thức của tôi khác nhau,
Tôi có thể có nó xếp hàng bởi từng dòng.

331
00:14:46,424 --> 00:14:47,590
Nhưng tôi đã không làm bất kỳ phong cách.

332
00:14:47,590 --> 00:14:49,256
Một lần nữa, chúng tôi không nói về CSS ở đây.

333
00:14:49,256 --> 00:14:51,030
Chúng tôi chỉ nói về HTML.

334
00:14:51,030 --> 00:14:53,980
>> Cũng ở dạng văn bản của tôi, tôi có thể type--
hãy nhớ rằng hình thức của các loại văn bản

335
00:14:53,980 --> 00:14:55,480
vì vậy tôi có thể đặt tên của tôi.

336
00:14:55,480 --> 00:14:57,330
Và trong mật khẩu của tôi tôi
có thể gõ mật khẩu của tôi.

337
00:14:57,330 --> 00:14:59,740
Và bởi vì lĩnh vực đó
là loại mật khẩu,

338
00:14:59,740 --> 00:15:01,470
bạn không biết những gì mật khẩu của tôi là.

339
00:15:01,470 --> 00:15:02,800
Đó là tất cả các dấu chấm.

340
00:15:02,800 --> 00:15:09,140
>> Tôi cũng có thể chọn để đánh dấu một off
nút radio hay đánh dấu ra khỏi một hộp kiểm tra.

341
00:15:09,140 --> 00:15:10,420
Hoặc tôi có thể gửi mẫu của tôi.

342
00:15:10,420 --> 00:15:11,810
Và tôi đã không làm bất cứ điều gì,
do đó, khi tôi gửi hình thức của tôi,

343
00:15:11,810 --> 00:15:13,090
trang vừa làm mới.

344
00:15:13,090 --> 00:15:16,970
Nhưng có lẽ tôi có thể cấu hình của tôi
Nút Submit để làm cái gì khác.

345
00:15:16,970 --> 00:15:20,410
Và chúng ta sẽ thấy những gì chúng ta có thể làm với
rằng trong một đoạn video trong tương lai trên PHP.

346
00:15:20,410 --> 00:15:22,520
Nhưng điều này xây dựng một rất
hình thức đơn giản mà chúng tôi

347
00:15:22,520 --> 00:15:27,360
có thể sử dụng để có người sử dụng tương tác và
gửi thông tin cho trang web của chúng tôi.

348
00:15:27,360 --> 00:15:29,620
>> Một bình luận cuối cùng trước khi chúng tôi
di chuyển trên một số thẻ khác

349
00:15:29,620 --> 00:15:32,040
là để có một cái nhìn lúc này
thẻ đầu vào một lần nữa.

350
00:15:32,040 --> 00:15:35,760
Chú ý rằng tôi đã nêu bật
kết thúc của thẻ màu đỏ.

351
00:15:35,760 --> 00:15:39,390
Mỗi thẻ khác mà chúng tôi đã nhìn thấy cho đến nay có
đã có một khởi đầu và kết thúc, một mở

352
00:15:39,390 --> 00:15:41,030
tag và một thẻ đóng.

353
00:15:41,030 --> 00:15:42,520
>> Nhưng một thẻ đầu vào thì không.

354
00:15:42,520 --> 00:15:46,860
Không có văn bản mà đi
ở giữa các thẻ đầu vào.

355
00:15:46,860 --> 00:15:49,160
Tất cả các thông tin
chúng tôi đang có ý định truyền đạt

356
00:15:49,160 --> 00:15:52,640
là ràng buộc lên như là một phần của
thuộc tính của đầu vào đó.

357
00:15:52,640 --> 00:15:54,690
Chú ý chúng tôi có tên đầu vào bằng x.

358
00:15:54,690 --> 00:15:55,580
Loại bằng y.

359
00:15:55,580 --> 00:15:57,660
Đó thực sự là tất cả các
thông tin chúng tôi cần.

360
00:15:57,660 --> 00:15:59,470
>> Điều này được gọi là một thẻ tự đóng cửa.

361
00:15:59,470 --> 00:16:02,470
Nó không đòi hỏi một mở và một
gần bởi vì tất cả các thông tin

362
00:16:02,470 --> 00:16:04,974
được chứa bên trong
tag và thuộc tính của nó.

363
00:16:04,974 --> 00:16:06,390
Vì vậy, đôi khi bạn sẽ thấy điều này, quá.

364
00:16:06,390 --> 00:16:10,400
Vì vậy, chỉ cần lưu ý rằng nếu bạn có một
thẻ đó là hoàn toàn khép kín,

365
00:16:10,400 --> 00:16:14,170
nó mở ra và đóng chính nó với
khung góc mở bên trái

366
00:16:14,170 --> 00:16:17,000
và góc slash
khung bên phải.

367
00:16:17,000 --> 00:16:20,580
Chúng ta sẽ thấy một một trong những
ngay bây giờ với thẻ hình ảnh là tốt.

368
00:16:20,580 --> 00:16:23,300
>> Trước khi chúng tôi nói chuyện về hình ảnh, chúng tôi
cần phải nói về các siêu liên kết.

369
00:16:23,300 --> 00:16:26,080
Nếu chúng ta muốn trang web của chúng tôi để được
tương tác và di chuyển chúng xung quanh,

370
00:16:26,080 --> 00:16:28,121
nó sẽ được tốt đẹp có thể
bấm vào một trong những

371
00:16:28,121 --> 00:16:30,190
những gì đã thường là một liên kết màu xanh.

372
00:16:30,190 --> 00:16:34,440
Đây thật sự là cách chúng ta xây dựng
một liên kết trong trang web của chúng tôi.

373
00:16:34,440 --> 00:16:36,540
Và thú vị đủ
có một tag HTML

374
00:16:36,540 --> 00:16:39,000
được gọi là liên kết, mà không phải là một siêu liên kết.

375
00:16:39,000 --> 00:16:44,130
A ở đây là viết tắt của neo, và
đó là cách chúng tôi chỉ ra một siêu liên kết.

376
00:16:44,130 --> 00:16:49,150
>> A href bằng X phương tiện đi
Trang web X. Và tất cả mọi thứ

377
00:16:49,150 --> 00:16:51,580
giữa mở Thẻ
và gần A tag

378
00:16:51,580 --> 00:16:56,010
được những gì đang xảy ra để được rằng nhấn mạnh
dòng chữ màu xanh trông giống như một liên kết

379
00:16:56,010 --> 00:16:57,590
mà chúng ta đã quen thuộc với.

380
00:16:57,590 --> 00:17:01,660
Dưới đây chúng ta có một thẻ hình ảnh, mà
là một tự đóng tag để hiển thị

381
00:17:01,660 --> 00:17:05,599
một hình ảnh nằm ở X. Và
bạn có thể có thể thay đổi

382
00:17:05,599 --> 00:17:08,280
hình ảnh đó bằng cách xác định
chiều rộng và chiều cao

383
00:17:08,280 --> 00:17:11,640
và các thuộc tính khác
rằng dấu chấm chấm chấm đó.

384
00:17:11,640 --> 00:17:14,260
>> Ở bên dưới đây
chúng tôi có một rất thú vị

385
00:17:14,260 --> 00:17:16,170
tìm kiếm từ khóa đó không
có một thẻ đóng.

386
00:17:16,170 --> 00:17:19,410
Đó là dấu chấm than điểm DOCTYPE HTML.

387
00:17:19,410 --> 00:17:23,300
Vì vậy, HTML đã được khoảng từ
đầu những năm 1990 để xây dựng trang web,

388
00:17:23,300 --> 00:17:25,859
và nó đi trải qua công
chỉnh sửa vài lần kể từ đó.

389
00:17:25,859 --> 00:17:28,550
Gần đây nhất vào năm 2014
nó đã trải qua một phiên bản

390
00:17:28,550 --> 00:17:33,440
gọi là HTML5 mà bây giờ là hiện tại
loại tiêu chuẩn de facto HTML.

391
00:17:33,440 --> 00:17:36,730
>> Để chỉ ra rằng web của chúng tôi
trang được viết bằng HTML5,

392
00:17:36,730 --> 00:17:38,160
này là làm thế nào chúng ta bắt đầu.

393
00:17:38,160 --> 00:17:40,380
Nó có thể được bỏ qua nhưng
những gì mà cơ bản

394
00:17:40,380 --> 00:17:45,930
phương tiện là bạn không thể sử dụng bất kỳ thẻ
đó là các thẻ HTML5, những thẻ mới.

395
00:17:45,930 --> 00:17:48,591
Vì vậy, chúng tôi luôn luôn bắt đầu
nếu chúng ta đang sử dụng HTML5.

396
00:17:48,591 --> 00:17:51,340
Và tất cả các thẻ chúng tôi đã nói chuyện về
trước đây không phải là các thẻ HTML5.

397
00:17:51,340 --> 00:17:55,470
Nhưng điều này sẽ chỉ ra rằng
Thẻ HTML5 sẽ có mặt.

398
00:17:55,470 --> 00:17:58,400
Và vì vậy chúng tôi có chấm than
DOCTYPE HTML, mà

399
00:17:58,400 --> 00:18:01,280
là lúc bắt đầu của chúng tôi
Tập tin HTML, và sau đó sau thời điểm đó

400
00:18:01,280 --> 00:18:04,930
chúng tôi thực sự có HTML của chúng tôi mở
thẻ và tiến hành từ đó.

401
00:18:04,930 --> 00:18:10,050
>> Người cuối cùng là một thẻ nhận xét,
trông hơi khác nhau, quá.

402
00:18:10,050 --> 00:18:12,810
Nó bắt đầu giảm với góc
khung chấm than dash

403
00:18:12,810 --> 00:18:15,220
gạch ngang nhưng không có khung đóng.

404
00:18:15,220 --> 00:18:20,150
Ở giữa hai yếu tố có
là nơi bạn viết bình luận của bạn.

405
00:18:20,150 --> 00:18:28,420
Và chúng ta hãy nhìn vào hình ảnh
và các ý kiến ​​và liên kết trong CS50 IDE.

406
00:18:28,420 --> 00:18:32,850
>> Vì vậy, tôi có ở đây một tập tin gọi là liên kết hình ảnh
dot HTML mà tôi sẽ mở ra.

407
00:18:32,850 --> 00:18:36,420
Và việc thông báo tôi đã có một vài
Các bình luận ở đây trong ý kiến ​​HTML của tôi.

408
00:18:36,420 --> 00:18:38,990
Vì vậy, giống như trong C và khác
ngôn ngữ lập trình,

409
00:18:38,990 --> 00:18:43,169
HTML bằng việc là một ngôn ngữ đánh dấu
không có khả năng để có ý kiến.

410
00:18:43,169 --> 00:18:45,710
Và do đó, tôi dường như sẽ
đặt một hình ảnh của Rick Astley

411
00:18:45,710 --> 00:18:49,060
một nơi nào đó giữa div này
tag, phân chia tùy ý này.

412
00:18:49,060 --> 00:18:51,497
Rõ ràng đó là tập tin
nằm ở Rick dot JPEG, mà

413
00:18:51,497 --> 00:18:53,580
nếu chúng ta quay trở lại qua
cây tập tin của tôi cho một thứ hai,

414
00:18:53,580 --> 00:18:55,490
là một tập tin tồn tại trong
thư mục hiện hành.

415
00:18:55,490 --> 00:18:56,031
Vì vậy, đó là OK.

416
00:18:56,031 --> 00:18:57,710
Tôi có thể tham khảo nó.

417
00:18:57,710 --> 00:18:59,680
>> Sau đó, tôi có thể có liên kết nội bộ.

418
00:18:59,680 --> 00:19:05,080
Vì vậy, lưu ý trên đường 11 ở đây
href của tôi là chào dot HTML.

419
00:19:05,080 --> 00:19:09,050
Vì vậy, mà chỉ đề cập tới hello dot HTML
mà tồn tại trong thư mục hiện hành.

420
00:19:09,050 --> 00:19:12,980
Và tôi cũng có thể có bên ngoài
liên kết bởi chỉ cần xác định HTTPS

421
00:19:12,980 --> 00:19:16,180
để chỉ ra rằng tôi không nói
về một tập tin trong thư mục hiện tại của tôi.

422
00:19:16,180 --> 00:19:19,730
Tôi đang nói về một tập tin tồn tại
một nơi nào đó trên internet, mà tôi có

423
00:19:19,730 --> 00:19:23,370
yêu cầu sử dụng giao thức HTTP.

424
00:19:23,370 --> 00:19:25,990
>> Vì vậy, chúng ta hãy nhìn vào những gì
trang này có thể trông giống như

425
00:19:25,990 --> 00:19:29,500
và sẵn sàng cho một hình ảnh của Rick
Astley để hiển thị trên màn hình của bạn.

426
00:19:29,500 --> 00:19:31,490
Vì vậy, tôi sẽ xem trước này.

427
00:19:31,490 --> 00:19:33,800
Có Rick Astley ở
rất đầu trong tùy tiện này

428
00:19:33,800 --> 00:19:35,008
sư đoàn, tôi đặt nó ở đầu trang.

429
00:19:35,008 --> 00:19:36,960
Và sau đó xuống bên dưới tôi
có liên kết của tôi, phải không?

430
00:19:36,960 --> 00:19:39,330
>> Tôi có một liên kết tới hello dot HTML.

431
00:19:39,330 --> 00:19:42,860
Và nếu tôi nhấp vào đó, tôi nhận được
chuyển sang trang này

432
00:19:42,860 --> 00:19:47,050
rằng chúng tôi rất quen thuộc với các từ
khi bắt đầu chương trình của chúng tôi.

433
00:19:47,050 --> 00:19:50,880
Nếu tôi bật mở trang đó một lần nữa, nếu tôi
liên kết hình pop mở thêm một lần nữa,

434
00:19:50,880 --> 00:19:54,420
Tôi cũng có thể đi ra bên ngoài
vào trang web của CS50.

435
00:19:54,420 --> 00:19:56,740
Và ở đó chúng ta sẽ thấy see-- tôi
phóng to ra một chút here--

436
00:19:56,740 --> 00:20:00,260
chúng ta sẽ thấy trang web của CS50 loại
nhúng vào giữa trang của chúng tôi.

437
00:20:00,260 --> 00:20:04,670
Vì vậy, tôi đã có thể làm cho một nội bộ
liên kết cũng như liên kết ngoài.

438
00:20:04,670 --> 00:20:07,200
>> Quy tắc cuối cùng với HTML
chúng ta sẽ nói về ở đây

439
00:20:07,200 --> 00:20:09,510
là HTML của bạn nên được hình thành tốt.

440
00:20:09,510 --> 00:20:13,020
Trong C, chúng tôi đã nói chuyện rất nhiều về
cú pháp khác nhau của sự vật.

441
00:20:13,020 --> 00:20:17,650
Trong HTML cú pháp thực sự
xoay quanh các thẻ.

442
00:20:17,650 --> 00:20:19,660
Mỗi tag bạn mở cần phải được đóng lại.

443
00:20:19,660 --> 00:20:22,630
Và trên thực tế, mỗi tag bạn mở
nên được đóng lại theo thứ tự ngược.

444
00:20:22,630 --> 00:20:25,790
>> Vì vậy, nếu bạn mở một thẻ in đậm, in nghiêng một
tag, và sau đó một tag gạch chân

445
00:20:25,790 --> 00:20:28,120
để làm tất cả ba đến một
tập hợp các văn bản,

446
00:20:28,120 --> 00:20:30,070
bạn nên đóng chúng theo thứ tự ngược lại.

447
00:20:30,070 --> 00:20:32,270
Vì vậy, nếu bạn mở táo bạo,
nghiêng, gạch dưới, bạn

448
00:20:32,270 --> 00:20:35,240
muốn đóng gạch chân, in nghiêng, in đậm.

449
00:20:35,240 --> 00:20:39,990
Điều này loại đóng gói là gì
giữ HTML tốt đẹp và có tổ chức.

450
00:20:39,990 --> 00:20:44,370
>> Không giống như C, mặc dù, các lỗi cú pháp sẽ không
thực sự làm tê liệt HTML của bạn có thể.

451
00:20:44,370 --> 00:20:48,730
HTML của bạn có thể không tốt
hình thành nhưng vẫn sẽ làm việc.

452
00:20:48,730 --> 00:20:50,589
Và do đó, những lỗi
có thể sắp xếp các slide bằng.

453
00:20:50,589 --> 00:20:52,130
Đó là vào bạn để thực sự cảnh giác.

454
00:20:52,130 --> 00:20:54,760
Đôi khi, họ sẽ thất bại nhưng
đôi khi bạn có thể nhận được ngay với nó.

455
00:20:54,760 --> 00:20:56,509
>> Nó có thể là một thực sự
nhiệm vụ khó khăn, mặc dù,

456
00:20:56,509 --> 00:21:00,660
để theo dõi khi nào bạn mở
một thẻ, khi bạn đóng nó,

457
00:21:00,660 --> 00:21:04,110
đặc biệt như HTML của bạn
các tập tin được lớn hơn và lớn hơn.

458
00:21:04,110 --> 00:21:05,490
Bạn sẽ muốn có một số giúp đỡ.

459
00:21:05,490 --> 00:21:07,560
Và có trực tuyến
công cụ xác nhận rằng bạn

460
00:21:07,560 --> 00:21:11,474
có thể sử dụng để có một cái nhìn tại trang web của bạn
trang và xem nếu nó cũng được hình thành HTML.

461
00:21:11,474 --> 00:21:13,390
Và bạn nên chắc chắn
hãy nhìn vào những

462
00:21:13,390 --> 00:21:16,620
và bắt đầu sử dụng chúng như bạn
bắt đầu làm một số công việc với HTML,

463
00:21:16,620 --> 00:21:20,800
văn bản HTML, chỉ cần để bạn có được
một số thói quen tốt về tổ chức

464
00:21:20,800 --> 00:21:24,377
HTML của bạn trong một cách tốt và
phong cách tốt và đảm bảo

465
00:21:24,377 --> 00:21:27,210
rằng bạn không phải làm bất cứ điều gì
có thể tạo ra một lỗi cú pháp

466
00:21:27,210 --> 00:21:30,270
sẽ gây ra cho bạn một chút
một vấn đề xuống đường.

467
00:21:30,270 --> 00:21:31,190
>> Tôi Doug Lloyd.

468
00:21:31,190 --> 00:21:33,450
Đây là CS50.

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