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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN Farnham: Hôm nay, tôi sẽ
nói một chút về HTML,

3
00:00:10,450 --> 00:00:12,330
HyperText Markup Language.

4
00:00:12,330 --> 00:00:14,450
Bạn nhìn thấy ở khắp mọi nơi HTML những ngày này.

5
00:00:14,450 --> 00:00:17,190
Trong thực tế, nếu bạn đang xem cái này
video trong một trình duyệt, bạn

6
00:00:17,190 --> 00:00:19,120
HTML nhìn thấy ngay bây giờ.

7
00:00:19,120 --> 00:00:22,760
HTML không phải là một ngôn ngữ lập trình,
đúng hơn, đó là một ngôn ngữ đánh dấu được sử dụng bởi

8
00:00:22,760 --> 00:00:25,460
trình duyệt web để làm cho các trang
trên internet.

9
00:00:25,460 --> 00:00:30,410
>> Vì vậy, bạn có thể hỏi, làm thế nào chính xác là bằng văn bản
một trang web trong HTML khác nhau

10
00:00:30,410 --> 00:00:33,574
từ viết một chương trình trong một chương trình
ngôn ngữ như C?

11
00:00:33,574 --> 00:00:38,010
Vâng, C là một ngôn ngữ với rất nghiêm ngặt
quy tắc cú pháp mà cần phải được

12
00:00:38,010 --> 00:00:39,880
biên dịch trước khi nó có thể chạy.

13
00:00:39,880 --> 00:00:43,070
Nếu bạn đã từng quên bao gồm
dấu chấm phẩy ở cuối một tuyên bố trong

14
00:00:43,070 --> 00:00:46,660
mã C của bạn, bạn biết những gì tôi đang nói
về liên quan đến cú pháp nghiêm ngặt.

15
00:00:46,660 --> 00:00:50,360
>> Trình duyệt web mặc dù, nhiều hơn một chút
tha thứ khi nói đến HTML.

16
00:00:50,360 --> 00:00:53,860
Ngay cả khi HTML của bạn không phải là cú pháp
chính xác, trang của bạn vẫn có thể

17
00:00:53,860 --> 00:00:57,150
hiển thị bằng một trình duyệt, nhưng nó có thể
không nhìn như bạn dự định.

18
00:00:57,150 --> 00:00:59,640
Vì vậy, nó luôn luôn tốt nhất để
theo các quy tắc.

19
00:00:59,640 --> 00:01:01,990
Cách tốt nhất để có được một trực giác
về những điều công việc là

20
00:01:01,990 --> 00:01:03,300
đi qua một ví dụ.

21
00:01:03,300 --> 00:01:07,360
>> Vì vậy, những gì chúng tôi có ở đây là một cơ bản
kế hoạch chi tiết cho một trang web.

22
00:01:07,360 --> 00:01:10,690
Bạn có thể nhận thấy rất nhiều thứ
ở giữa dấu ngoặc góc cạnh.

23
00:01:10,690 --> 00:01:12,900
Vâng, chỉ là những thẻ.

24
00:01:12,900 --> 00:01:15,810
Thẻ cơ bản thông báo cho các trình duyệt web
rằng, hey, một cái gì đó

25
00:01:15,810 --> 00:01:17,150
đang đến theo cách của bạn.

26
00:01:17,150 --> 00:01:20,770
Nhớ mặc dù, bất cứ khi nào bạn mở một
thẻ, bạn cần phải đóng nó một khi bạn đang

27
00:01:20,770 --> 00:01:21,750
thực hiện bằng cách sử dụng nó.

28
00:01:21,750 --> 00:01:24,690
>> Vì vậy, ví dụ, tôi mở một phần
mã với mở

29
00:01:24,690 --> 00:01:26,960
cơ thể khung, khung gần.

30
00:01:26,960 --> 00:01:31,280
Sau đó tôi thêm một số văn bản, trong trường hợp này, tôi
trang web đầu tiên sau đó khi tôi đến

31
00:01:31,280 --> 00:01:35,540
đóng phần này, tôi sử dụng gần như là một
thẻ giống hệt nhau ngoại trừ thời gian này với một

32
00:01:35,540 --> 00:01:37,660
dấu gạch chéo trước khi cơ thể.

33
00:01:37,660 --> 00:01:41,140
Nói chung, đây là định dạng bạn
sẽ sử dụng bất cứ khi nào bạn đang mở

34
00:01:41,140 --> 00:01:42,680
và đóng thẻ.

35
00:01:42,680 --> 00:01:47,900
Với nhau, một thẻ mở và một thẻ kết thúc
soạn những gì được gọi là một phần tử.

36
00:01:47,900 --> 00:01:51,870
>> Nếu bạn nhìn vào dòng đầu tiên, bạn sẽ
thấy một dấu chấm than tiếp theo

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

38
00:01:53,350 --> 00:01:56,280
Điều này thực sự chỉ nói với trình duyệt của bạn
rằng tập tin là một trang web

39
00:01:56,280 --> 00:01:58,280
viết bằng HTML.

40
00:01:58,280 --> 00:02:01,970
Các thẻ HTML cơ bản nói,
ở đây có một số HTML.

41
00:02:01,970 --> 00:02:04,950
Sau đó chúng tôi có một thẻ đầu với
một thẻ tiêu đề bên trong nó.

42
00:02:04,950 --> 00:02:09,430
Thẻ đầu bạn có thể nghĩ như
bao gồm HTML code mà đi kèm cho

43
00:02:09,430 --> 00:02:12,670
phần lớn các trang web của bạn
nội dung thực tế.

44
00:02:12,670 --> 00:02:16,700
>> Nói chung, bạn đặt tiêu đề của bạn
trang web ở đây, mặc dù có một số

45
00:02:16,700 --> 00:02:19,350
các thẻ khác có thể xuất hiện
ở đây là tốt.

46
00:02:19,350 --> 00:02:25,020
Tiếp đến cơ thể của trang web của bạn,
thịt thực tế và xương của trang web của bạn.

47
00:02:25,020 --> 00:02:28,910
Trong ví dụ của chúng tôi, chúng tôi đã chỉ cần đặt một đơn giản
câu, trang web đầu tiên của tôi,

48
00:02:28,910 --> 00:02:34,100
trong đó, nếu chúng ta chạy các trang web của chúng tôi, sẽ xem xét
một chút gì đó như thế này.

49
00:02:34,100 --> 00:02:36,810
Trang web của chúng tôi không phải là quá say sưa,
nhưng đừng lo lắng.

50
00:02:36,810 --> 00:02:39,210
Chúng tôi sẽ làm đẹp nó lên sớm.

51
00:02:39,210 --> 00:02:44,070
>> Vì vậy, các HTML trên, chúng tôi sẽ cung cấp cho bạn rất
mẫu cơ bản cho một trang web,

52
00:02:44,070 --> 00:02:46,310
không có gì ưa thích, chỉ cần xương trần.

53
00:02:46,310 --> 00:02:49,160
Nhưng nếu tôi là tạo ra một trang web,
những gì nếu tôi muốn thêm một

54
00:02:49,160 --> 00:02:50,760
hình ảnh, nói rằng, bản thân mình?

55
00:02:50,760 --> 00:02:52,760
Vâng, tôi có thể làm điều đó.

56
00:02:52,760 --> 00:02:55,460
Có một vài cách để
thêm hình ảnh vào trang web của bạn.

57
00:02:55,460 --> 00:02:59,780
Nếu hình ảnh là trong cùng thư mục với
tập tin HTML của bạn, bạn có thể liên kết đến các

58
00:02:59,780 --> 00:03:01,950
hình ảnh thông qua con đường như thế này.

59
00:03:01,950 --> 00:03:05,910
>> Bạn mở ra một thẻ hình ảnh sau
bởi trong thuộc tính Alt trong

60
00:03:05,910 --> 00:03:07,240
nguồn gốc của hình ảnh.

61
00:03:07,240 --> 00:03:12,030
Giá trị các thuộc tính Alt là chỉ một số
văn bản thay thế trong trường hợp một người sử dụng có thể không

62
00:03:12,030 --> 00:03:13,580
nhìn thấy hình ảnh.

63
00:03:13,580 --> 00:03:19,680
Ngoài ra, bạn cũng có thể liên kết đến
hình ảnh thông qua một URL đầy đủ, như thế này.

64
00:03:19,680 --> 00:03:24,180
Bây giờ, trang web mà không thực sự tồn tại,
nhưng nếu có một hình ảnh của

65
00:03:24,180 --> 00:03:27,760
tôi tại địa chỉ đó, tôi có thể sử dụng
URL nguồn bao gồm

66
00:03:27,760 --> 00:03:29,930
hình ảnh của mình trên trang web của tôi.

67
00:03:29,930 --> 00:03:35,590
Dù bằng cách nào, bạn kết thúc với một nhiều
trang web đẹp hơn, một cái gì đó như thế này.

68
00:03:35,590 --> 00:03:39,730
>> Vâng, đó là khá mát mẻ, nhưng tôi loại
của một số văn bản muốn ở đây là tốt.

69
00:03:39,730 --> 00:03:43,020
Vì vậy, bạn chỉ cần thêm một cái gì đó
siêu đơn giản trên

70
00:03:43,020 --> 00:03:45,210
hình ảnh, như tiêu đề.

71
00:03:45,210 --> 00:03:50,830
Tất cả tôi đã làm cho đến nay là sử dụng các tiêu đề
tag, H1, và ngắt dòng tag, br.

72
00:03:50,830 --> 00:03:54,900
Các tag tiêu đề làm cho phông chữ một chút
bit lớn hơn và nổi bật hơn.

73
00:03:54,900 --> 00:03:58,930
Thẻ ngắt dòng, mặt khác
tay, là loại mát mẻ.

74
00:03:58,930 --> 00:04:03,720
Không giống như hầu hết các thẻ khác, bạn không có
một thẻ mở và đóng cửa nghỉ, chỉ

75
00:04:03,720 --> 00:04:05,120
một trong những trình bày ở trên.

76
00:04:05,120 --> 00:04:10,420
Điều này là do nghỉ không có nội dung
và do đó, một phần tử rỗng.

77
00:04:10,420 --> 00:04:14,940
>> Các yếu tố sản phẩm nào như thế này, bạn có thể mở
và gần đồng thời đơn giản bằng cách

78
00:04:14,940 --> 00:04:20,420
trong đó có một dấu gạch chéo ở
kết thúc của việc kê khai ban đầu.

79
00:04:20,420 --> 00:04:24,390
Vì vậy, bây giờ trang web của tôi có vẻ hơi
một cái gì đó như thế này.

80
00:04:24,390 --> 00:04:27,410
Tốt hơn, nhưng nó loại cảm thấy
như một kết thúc chết.

81
00:04:27,410 --> 00:04:30,850
Có nơi nào để đi sang một bên
từ trang chính này.

82
00:04:30,850 --> 00:04:33,075
Vâng, chúng ta hãy khắc phục điều đó bằng cách
bao gồm một liên kết.

83
00:04:33,075 --> 00:04:36,860
>> Những gì tôi sẽ làm ở đây là sử dụng một
thuộc tính ký hiệu là A và làm cho

84
00:04:36,860 --> 00:04:40,780
hình ảnh một liên kết đến, chúng ta hãy nói, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Bằng cách đó, bất cứ khi nào ai nhấp chuột vào tôi,
trình duyệt của họ sẽ được dẫn đến

86
00:04:44,460 --> 00:04:47,810
khác, có lẽ nhiều hơn
hữu ích, trang web.

87
00:04:47,810 --> 00:04:51,040
Tôi đã có để giảm thiểu kích thước của
văn bản một chút bởi vì trang web của chúng tôi là

88
00:04:51,040 --> 00:04:52,470
nhận được nâng cao hơn.

89
00:04:52,470 --> 00:04:54,590
Nhưng hy vọng, nó vẫn còn rõ ràng.

90
00:04:54,590 --> 00:04:59,460
Trang web của tôi trông giống hệt nhau chỉ
bây giờ, bất cứ khi nào tôi bấm vào hình ảnh,

91
00:04:59,460 --> 00:05:04,410
trình duyệt sẽ mở ra một
tab cho trang web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Cuối cùng, chúng ta hãy nói tôi sẽ phong cách
trang web này sau đó sử dụng CSS.

93
00:05:08,970 --> 00:05:11,730
CSS là những gì được biết đến như một
Cascading Style Sheet.

94
00:05:11,730 --> 00:05:15,230
Và nó về cơ bản cung cấp một hiệu quả
cách để chỉnh sửa và phong cách

95
00:05:15,230 --> 00:05:16,910
khối tương tự như mã.

96
00:05:16,910 --> 00:05:21,290
Tôi muốn bắt đầu tổ chức HTML của tôi
làm cho nó dễ dàng hơn để tạo kiểu sau này.

97
00:05:21,290 --> 00:05:26,900
Ở đây, tôi thiết lập hai loại khác nhau của
định danh để giúp tổ chức mã của tôi.

98
00:05:26,900 --> 00:05:31,170
Tôi đã sử dụng các thuộc tính ID trong một
chia, hoặc thẻ div, và tôi đã sử dụng một

99
00:05:31,170 --> 00:05:34,120
Lớp thuộc tính bên trong
một thẻ div.

100
00:05:34,120 --> 00:05:37,190
>> ID và Class thuộc tính
làm việc tương tự.

101
00:05:37,190 --> 00:05:41,210
Sự khác biệt duy nhất là bạn chỉ có thể có
một yếu tố, ID cụ thể, nhưng

102
00:05:41,210 --> 00:05:43,600
bất kỳ số lượng của các yếu tố
có thể chia sẻ một lớp học.

103
00:05:43,600 --> 00:05:47,690
Ví dụ, tôi có thể sử dụng lớp
hình ảnh nhiều lần, nhưng tôi không thể

104
00:05:47,690 --> 00:05:50,533
tạo ra bộ phận khác
với đầu ID.

105
00:05:50,533 --> 00:05:54,750
Mặc dù tôi đã không đi vào CSS,
một ngôn ngữ khác thường được sử dụng

106
00:05:54,750 --> 00:05:59,700
cùng với HTML, một khi tôi bắt đầu tạo kiểu tóc
mã của tôi với CSS, tôi có thể sử dụng các

107
00:05:59,700 --> 00:06:03,730
thuộc tính tổ chức để ảnh hưởng
thẩm mỹ trang web của tôi.

108
00:06:03,730 --> 00:06:07,600
>> Tất cả mọi thứ trong đầu bộ phận
sẽ có stylings tương tự hoặc bất kỳ

109
00:06:07,600 --> 00:06:12,010
nhóm khác của nhóm tôi HTML vào
hình ảnh lớp học sẽ chia sẻ một cái nhìn tương tự.

110
00:06:12,010 --> 00:06:15,700
Điều này là dễ dàng hơn nhiều so với cố gắng để chỉnh sửa
và hình ảnh phong cách hay một cụm

111
00:06:15,700 --> 00:06:17,690
văn bản riêng.

112
00:06:17,690 --> 00:06:21,480
>> Vì vậy, chúng tôi đã đi qua những điều cơ bản như thế nào
để thực hiện một trang web với HTML.

113
00:06:21,480 --> 00:06:25,280
HTML có một loạt các tính năng khác nữa
mà khi kết hợp với các ngôn ngữ khác

114
00:06:25,280 --> 00:06:29,220
như CSS và JavaScript, có thể thực sự
làm cho các trang nổi bật.

115
00:06:29,220 --> 00:06:32,960
Cách tốt nhất để có được thoải mái với
HTML chỉ là để lộn xộn xung quanh với nó,

116
00:06:32,960 --> 00:06:35,120
xem những gì hoạt động, và những gì không.

117
00:06:35,120 --> 00:06:36,570
>> Tên tôi là Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Đây là CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Vì vậy, ví dụ, tôi có thể sử dụng
hình ảnh lớp -

121
00:06:45,690 --> 00:06:48,028
Không, có rất nhiều thuộc tính.

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

123
00:06:52,500 --> 00:06:53,950
Tên tôi là Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Đây là CS 650.

125
00:06:58,560 --> 00:06:59,810
Tôi muốn nói CSS.

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

127
00:07:02,325 --> 00:07:03,575
Đây là CSS.

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