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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: วันนี้ผมกำลังจะไป
พูดคุยเล็กน้อยเกี่ยวกับ HTML,

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

4
00:00:12,330 --> 00:00:14,450
คุณจะเห็น HTML ทุกวันนี้

5
00:00:14,450 --> 00:00:17,190
ในความเป็นจริงถ้าคุณกำลังรับชมนี้
วิดีโอในเบราว์เซอร์ที่คุณกำลัง

6
00:00:17,190 --> 00:00:19,120
HTML เห็นได้ในขณะนี้

7
00:00:19,120 --> 00:00:22,760
HTML ไม่เป็นภาษาการเขียนโปรแกรม
ค่อนข้างเป็นภาษามาร์กอัปที่ใช้โดย

8
00:00:22,760 --> 00:00:25,460
เว็บเบราเซอร์ที่จะทำให้หน้า
บนอินเทอร์เน็ต

9
00:00:25,460 --> 00:00:30,410
>> ดังนั้นคุณอาจจะถามวิธีการว่าจะเขียน
หน้าเว็บในรูปแบบ HTML ที่แตกต่างกัน

10
00:00:30,410 --> 00:00:33,574
จากการเขียนโปรแกรมในการเขียนโปรแกรม
ภาษาเช่น C?

11
00:00:33,574 --> 00:00:38,010
ดีซีเป็นภาษาที่มีความเข้มงวดมาก
กฎการสร้างประโยคที่ว่าจะต้อง

12
00:00:38,010 --> 00:00:39,880
รวบรวมก่อนที่จะสามารถเรียกใช้

13
00:00:39,880 --> 00:00:43,070
หากคุณลืมที่เคยมี
อัฒภาคที่ด้านท้ายของคำสั่งใน

14
00:00:43,070 --> 00:00:46,660
รหัส C ของคุณคุณจะรู้ว่าสิ่งที่ผมพูด
เกี่ยวกับในเรื่องที่เกี่ยวกับไวยากรณ์อย่างเคร่งครัด

15
00:00:46,660 --> 00:00:50,360
>> เว็บเบราเซอร์ แต่เป็นบิตเพิ่มเติม
ให้อภัยเมื่อมันมาถึง HTM​​L

16
00:00:50,360 --> 00:00:53,860
แม้ว่า HTML ของคุณไม่ได้เป็น syntactically
ที่ถูกต้องในหน้าของคุณอาจจะยัง

17
00:00:53,860 --> 00:00:57,150
แสดงโดยเบราว์เซอร์ แต่มันอาจจะ
ไม่ได้ดูที่คุณตั้งใจ

18
00:00:57,150 --> 00:00:59,640
ดังนั้นจึงเป็นสิ่งที่ดีที่สุดเสมอไป
ปฏิบัติตามกฎระเบียบ

19
00:00:59,640 --> 00:01:01,990
วิธีที่ดีที่สุดที่จะได้รับสัญชาติญาณ
เกี่ยวกับวิธีการทำงานของสิ่งที่เป็นไป

20
00:01:01,990 --> 00:01:03,300
ผ่านไปตัวอย่างเช่น

21
00:01:03,300 --> 00:01:07,360
>> ดังนั้นสิ่งที่เรามีที่นี่เป็นพื้นฐาน
พิมพ์เขียวสำหรับหน้าเว็บ

22
00:01:07,360 --> 00:01:10,690
คุณอาจสังเกตเห็นสิ่งต่างๆมากมาย
ในระหว่างวงเล็บมุม

23
00:01:10,690 --> 00:01:12,900
ดีเหล่านั้นเป็นเพียงแค่ป้าย

24
00:01:12,900 --> 00:01:15,810
แท็กพื้นแจ้งเว็บเบราเซอร์
ว่าเดี๋ยวก่อนสิ่งที่

25
00:01:15,810 --> 00:01:17,150
จะมาในแบบของคุณ

26
00:01:17,150 --> 00:01:20,770
จำไว้ว่าเมื่อใดก็ตามที่คุณเปิด
แท็กที่คุณต้องปิดมันเมื่อคุณอยู่

27
00:01:20,770 --> 00:01:21,750
ทำได้โดยใช้มัน

28
00:01:21,750 --> 00:01:24,690
>> ดังนั้นสำหรับตัวอย่างเช่นผมเปิดห้องสมุด
ของรหัสที่มีการเปิด

29
00:01:24,690 --> 00:01:26,960
ร่างกายวงเล็บวงเล็บปิด

30
00:01:26,960 --> 00:01:31,280
จากนั้นผมก็เพิ่มข้อความบางส่วนในกรณีนี้ของฉัน
หน้าเว็บก่อนแล้วเมื่อฉันไป

31
00:01:31,280 --> 00:01:35,540
ปิดส่วนนี้ผมใช้เก​​ือบ
แท็กเหมือนกันยกเว้นเวลานี้กับ

32
00:01:35,540 --> 00:01:37,660
ทับก่อนที่ร่าง

33
00:01:37,660 --> 00:01:41,140
โดยทั่วไปนี้เป็นรูปแบบที่คุณ
จะใช้เมื่อใดก็ตามที่คุณกำลังเปิด

34
00:01:41,140 --> 00:01:42,680
และแท็กปิด

35
00:01:42,680 --> 00:01:47,900
ร่วมกันแท็กเปิดและแท็กสิ้นสุด
เขียนสิ่งที่เรียกว่าธาตุ

36
00:01:47,900 --> 00:01:51,870
>> ถ้าคุณดูที่บรรทัดแรกที่คุณจะ
เห็นเครื่องหมายอัศเจรีย์ตามด้วย

37
00:01:51,870 --> 00:01:53,350
DOCTYPE html ที่

38
00:01:53,350 --> 00:01:56,280
นี้จริงๆเพียงแค่บอกเบราว์เซอร์ของคุณ
ไฟล์ที่เป็นหน้าเว็บ

39
00:01:56,280 --> 00:01:58,280
เขียนใน HTML

40
00:01:58,280 --> 00:02:01,970
แท็กเป็นหลักกล่าวว่า
ที่นี่มาบาง HTM​​L

41
00:02:01,970 --> 00:02:04,950
แล้วเรามีแท็กหัวด้วย
แท็กชื่อภายใน

42
00:02:04,950 --> 00:02:09,430
แท็กหัวคุณสามารถคิดเป็น
ที่ประกอบไปด้วยรหัสที่มาพร้อมกับ

43
00:02:09,430 --> 00:02:12,670
เป็นกลุ่มของหน้าเว็บของคุณ
เนื้อหาจริง

44
00:02:12,670 --> 00:02:16,700
>> โดยทั่วไปแล้วคุณใส่ชื่อของคุณ
หน้าเว็บที่นี่แม้ว่าจะมีบาง

45
00:02:16,700 --> 00:02:19,350
แท็กอื่น ๆ ที่สามารถปรากฏ
ที่นี่เช่นกัน

46
00:02:19,350 --> 00:02:25,020
ถัดมาร่างกายของหน้าเว็บของคุณ
เนื้อและกระดูกที่เกิดขึ้นจริงของเว็บไซต์ของคุณ

47
00:02:25,020 --> 00:02:28,910
ในตัวอย่างของเราที่เราได้เพียงแค่ใส่ง่าย
ประโยคหน้าเว็บแรกของฉัน

48
00:02:28,910 --> 00:02:34,100
ซึ่งถ้าเราใช้เว็บไซต์ของเราจะมอง
สิ่งเล็ก ๆ น้อย ๆ เช่นนี้

49
00:02:34,100 --> 00:02:36,810
หน้าเว็บของเราจะไม่แปลกเกินไป
แต่ไม่ต้องกังวล

50
00:02:36,810 --> 00:02:39,210
เราจะเรียบร้อยขึ้นในเร็ว ๆ นี้

51
00:02:39,210 --> 00:02:44,070
>> ดังนั้น HTML ข้างต้นเราจะให้คุณมาก
แม่แบบขั้นพื้นฐานสำหรับหน้าเว็บ

52
00:02:44,070 --> 00:02:46,310
ไม่มีอะไรแฟนซีเพียงกระดูกเปลือย

53
00:02:46,310 --> 00:02:49,160
แต่ถ้าฉันสร้างหน้าเว็บ
ถ้าสิ่งที่ฉันต้องการเพิ่ม

54
00:02:49,160 --> 00:02:50,760
ภาพของการพูดเองได้หรือไม่

55
00:02:50,760 --> 00:02:52,760
ดีฉันสามารถทำเช่นนั้นได้

56
00:02:52,760 --> 00:02:55,460
มีสองวิธีที่จะเป็น
เพิ่มภาพในเว็บไซต์ของคุณ

57
00:02:55,460 --> 00:02:59,780
หากภาพที่อยู่ในโฟลเดอร์เดียวกันกับ
ไฟล์ HTML ของคุณคุณสามารถเชื่อมโยงไปยัง

58
00:02:59,780 --> 00:03:01,950
ภาพผ่านทางเส้นทางเช่นนี้

59
00:03:01,950 --> 00:03:05,910
>> คุณสามารถเปิดขึ้นมาพร้อมกับแท็กภาพตาม
โดยใน Alt คุณลักษณะใน

60
00:03:05,910 --> 00:03:07,240
แหล่งที่มาของภาพ

61
00:03:07,240 --> 00:03:12,030
ค่าแอตทริบิวต์ Alt เป็นเพียงบางส่วน
ข้อความทางเลือกในกรณีที่ผู้ใช้ไม่สามารถ

62
00:03:12,030 --> 00:03:13,580
เห็นภาพ

63
00:03:13,580 --> 00:03:19,680
หรือคุณยังสามารถเชื่อมโยงไปยัง
ภาพผ่านทาง URL ที่เต็มรูปแบบเช่นนี้

64
00:03:19,680 --> 00:03:24,180
ตอนนี้เว็บไซต์ที่ไม่ได้จริงๆอยู่
แต่ถ้ามีภาพของ

65
00:03:24,180 --> 00:03:27,760
ผมที่อยู่ที่นั้นผมสามารถใช้
URL แหล่งที่มาของการรวม

66
00:03:27,760 --> 00:03:29,930
ภาพในเว็บไซต์ของฉัน

67
00:03:29,930 --> 00:03:35,590
ทั้งสองวิธีที่คุณจะจบลงด้วยมาก
เว็บไซต์สวยบางอย่างเช่นนี้

68
00:03:35,590 --> 00:03:39,730
>> ดีที่เย็นสวย แต่ผมชนิด
ต้องการให้ข้อความของบางอย่างที่นี่เช่นกัน

69
00:03:39,730 --> 00:03:43,020
เพื่อให้เพียงเพิ่มบางสิ่งบางอย่าง
ง่ายสุดดังกล่าวข้างต้น

70
00:03:43,020 --> 00:03:45,210
ภาพเช่นเดียวกับส่วนหัว

71
00:03:45,210 --> 00:03:50,830
ทั้งหมดที่ฉันได้ทำเพื่อให้ห่างไกลคือการใช้ส่วนหัว
แท็ก H1 และแบ่งบรรทัดแท็กนอน

72
00:03:50,830 --> 00:03:54,900
แท็กส่วนหัวทำให้ตัวอักษรเล็ก ๆ น้อย ๆ
บิตขนาดใหญ่และโดดเด่นมากขึ้น

73
00:03:54,900 --> 00:03:58,930
แท็กตัวแบ่งบรรทัดในที่อื่น ๆ
มือเป็นชนิดของเย็น

74
00:03:58,930 --> 00:04:03,720
แตกต่างมากที่สุดของแท็กอื่น ๆ ที่คุณจะได้ไม่ต้อง
แท็กเปิดและทำลายการปิดเพียง

75
00:04:03,720 --> 00:04:05,120
อย่างใดอย่างหนึ่งที่แสดงข้างต้น

76
00:04:05,120 --> 00:04:10,420
นี้เป็นเพราะมีการแบ่งเนื้อหา
และดังนั้นจึงเป็นองค์ประกอบว่างเปล่า

77
00:04:10,420 --> 00:04:14,940
>> องค์ประกอบที่ว่างเปล่าเช่นนี้คุณสามารถเปิด
และปิดพร้อมกันเพียงแค่

78
00:04:14,940 --> 00:04:20,420
รวมทั้งทับที่
ในตอนท้ายของการประกาศครั้งแรก

79
00:04:20,420 --> 00:04:24,390
ดังนั้นขณะนี้เว็บไซต์ของฉันดูหน่อย
บางอย่างเช่นนี้

80
00:04:24,390 --> 00:04:27,410
ดีขึ้น แต่ชนิดของมันรู้สึก
เช่นปลายตาย

81
00:04:27,410 --> 00:04:30,850
มีไม่มีที่ไหนเลยที่จะไปกัน
จากหน้าหลักนี้

82
00:04:30,850 --> 00:04:33,075
ดีขอแก้ไขว่า
รวมทั้งเชื่อมโยง

83
00:04:33,075 --> 00:04:36,860
>> สิ่งที่ฉันจะทำที่นี่คือการใช้
แอตทริบิวต์ชี้แนะด้วยและทำให้

84
00:04:36,860 --> 00:04:40,780
ภาพเชื่อมโยงไปยังสมมติว่า, CS50 ทีวี

85
00:04:40,780 --> 00:04:44,460
ด้วยวิธีการนี​​้เมื่อใดก็ตามที่ทุกคนคลิกที่ผม
เบราว์เซอร์ของพวกเขาจะถูกนำไป

86
00:04:44,460 --> 00:04:47,810
อื่นอาจจะมากขึ้น
ที่มีประโยชน์หน้าเว็บ

87
00:04:47,810 --> 00:04:51,040
ฉันเคยที่จะลดขนาดของ
ข้อความบิตเพราะหน้าเว็บของเราเป็น

88
00:04:51,040 --> 00:04:52,470
ได้รับที่สูงขึ้น

89
00:04:52,470 --> 00:04:54,590
แต่หวังว่าก็ยังคงชัดเจน

90
00:04:54,590 --> 00:04:59,460
เว็บไซต์ของฉันมีลักษณะที่เหมือนกันเท่านั้น
ตอนนี้เมื่อใดก็ตามที่ฉันคลิกที่ภาพ

91
00:04:59,460 --> 00:05:04,410
เบราว์เซอร์ของฉันจะเปิดขึ้นมาอีก
แท็บหน้าเว็บ CS50.tv

92
00:05:04,410 --> 00:05:08,970
>> สุดท้ายขอบอกว่าฉันจะสไตล์
เว็บไซต์นี้ในภายหลังใช้ CSS

93
00:05:08,970 --> 00:05:11,730
CSS เป็นสิ่งที่เรียกว่า
แผ่นลักษณะซ้อน

94
00:05:11,730 --> 00:05:15,230
และโดยทั่วไปให้มีประสิทธิภาพ
วิธีการที่จะแก้ไขและสไตล์

95
00:05:15,230 --> 00:05:16,910
บล็อกที่คล้ายกันของรหัส

96
00:05:16,910 --> 00:05:21,290
ฉันต้องการที่จะเริ่มต้นการจัด HTML ของฉันไป
ทำให้ง่ายต่อการรูปแบบในภายหลัง

97
00:05:21,290 --> 00:05:26,900
ที่นี่ผมตั้งสองชนิดแตกต่างกันของ
ระบุเพื่อช่วยจัดระเบียบรหัสของฉัน

98
00:05:26,900 --> 00:05:31,170
ผมเคยใช้แอตทริบิวต์ ID ภายใน
หารหรือแท็ก div และผมเคยใช้

99
00:05:31,170 --> 00:05:34,120
ชั้นเชื่อภายใน
แท็ก div อื่น

100
00:05:34,120 --> 00:05:37,190
>> คุณลักษณะ ID และชั้น
ทำงานคล้าย

101
00:05:37,190 --> 00:05:41,210
ความแตกต่างเพียงอย่างเดียวคือคุณสามารถมีเพียง
องค์ประกอบหนึ่งที่ ID เฉพาะ แต่

102
00:05:41,210 --> 00:05:43,600
จำนวนขององค์ประกอบใด ๆ
สามารถใช้ร่วมชั้นเรียน

103
00:05:43,600 --> 00:05:47,690
ดังนั้นสำหรับตัวอย่างเช่นที่ฉันสามารถใช้ในชั้นเรียน
ภาพหลายครั้ง แต่ฉันไม่สามารถ

104
00:05:47,690 --> 00:05:50,533
สร้างส่วนอื่น
กับด้านบน ID

105
00:05:50,533 --> 00:05:54,750
แม้ว่าผมจะไม่ได้ไปลงใน CSS,
ภาษาที่ใช้กันทั่วไปอื่น

106
00:05:54,750 --> 00:05:59,700
ควบคู่ไปกับ HTML, เมื่อฉันเริ่มต้นการจัดแต่งทรงผม
รหัสของฉันด้วย CSS, ฉันสามารถใช้เหล่านี้

107
00:05:59,700 --> 00:06:03,730
คุณลักษณะขององค์กรที่จะมีอิทธิพลต่อ
งามหน้าเว็บของฉัน

108
00:06:03,730 --> 00:06:07,600
>> ทุกอย่างภายในส่วนด้านบน
จะมีสไตล์ที่คล้ายกันหรือ

109
00:06:07,600 --> 00:06:12,010
กลุ่มอื่น ๆ ของกลุ่ม HTML ฉันเป็น
ภาพจะมีส่วนร่วมในชั้นเรียนมีลักษณะที่คล้ายกัน

110
00:06:12,010 --> 00:06:15,700
นี้จะง่ายกว่าการพยายามที่จะแก้ไข
และภาพรูปแบบหรือบล็อกของ

111
00:06:15,700 --> 00:06:17,690
ข้อความที่เป็นรายบุคคล

112
00:06:17,690 --> 00:06:21,480
>> ดังนั้นเราจึงเดินไปที่พื้นฐานของวิธี
เพื่อให้หน้าเว็บที่มี HTML

113
00:06:21,480 --> 00:06:25,280
HTML มีพวงของคุณสมบัติอื่น ๆ เกินไป
ที่เมื่อจับคู่กับภาษาอื่น ๆ

114
00:06:25,280 --> 00:06:29,220
เช่น CSS และ JavaScript สามารถจริงๆ
ทำให้หน้าดูโดดเด่น

115
00:06:29,220 --> 00:06:32,960
วิธีที่ดีที่สุดที่จะได้รับความสะดวกสบายด้วย
HTML ที่เป็นเพียงแค่ไปรับประทานอาหารรอบกับมัน

116
00:06:32,960 --> 00:06:35,120
ดูว่าอะไรทำงานและสิ่งที่ไม่

117
00:06:35,120 --> 00:06:36,570
>> ชื่อของฉันคือ Daven อัม

118
00:06:36,570 --> 00:06:37,820
นี้เป็น CS50

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

120
00:06:40,640 --> 00:06:45,690
>> ดังนั้นสำหรับตัวอย่างเช่นที่ฉันสามารถใช้
ภาพชั้น -

121
00:06:45,690 --> 00:06:48,028
ไม่มีมีคุณสมบัติมากมาย

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

123
00:06:52,500 --> 00:06:53,950
ชื่อของฉันคือ Daven อัม

124
00:06:53,950 --> 00:06:58,560
นี้เป็น CS 650

125
00:06:58,560 --> 00:06:59,810
ฉันต้องการจะบอก CSS

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

127
00:07:02,325 --> 00:07:03,575
นี้เป็น CSS

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