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
ფაქტობრივად, თუ თქვენ თვალს ამ
video ბრაუზერის, თქვენ

6
00:00:17,190 --> 00:00:19,120
ხედავს HTML ახლა.

7
00:00:19,120 --> 00:00:22,760
HTML არ არის პროგრამირების ენა,
უფრო სწორად, ეს არის markup ენა გამოიყენება

8
00:00:22,760 --> 00:00:25,460
ვებ ბრაუზერები გაწევა გვერდები
ინტერნეტში.

9
00:00:25,460 --> 00:00:30,410
>> ასე, რომ თქვენ ალბათ იკითხავთ, როგორ ზუსტად წერს
ვებ გვერდი HTML სხვადასხვა

10
00:00:30,410 --> 00:00:33,574
წერილობით პროგრამის პროგრამირების
ენა, როგორიცაა C?

11
00:00:33,574 --> 00:00:38,010
ისე, C არის ენის ძალიან მკაცრი
სინტაქსური წესები, რომელიც უნდა იყოს

12
00:00:38,010 --> 00:00:39,880
შედგენილი ადრე მას შეუძლია აწარმოებს.

13
00:00:39,880 --> 00:00:43,070
თუ თქვენ ოდესმე დავიწყებას უნდა შეიცავდეს
მძიმით დასასრულს განცხადება

14
00:00:43,070 --> 00:00:46,660
თქვენი C კოდი, იცით, რა მე ვსაუბრობ
დაახლოებით მიმართ მკაცრი სინტაქსი.

15
00:00:46,660 --> 00:00:50,360
>> ბრაუზერების თუმცა, ცოტა მეტი
ვაპატიოთ, როდესაც საქმე ეხება HTML.

16
00:00:50,360 --> 00:00:53,860
მაშინაც კი, თუ თქვენი HTML არ არის 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
ისე, ეს მხოლოდ tags.

24
00:01:12,900 --> 00:01:15,810
წარწერები ძირითადად ინფორმირება ბრაუზერების
რომ, hey, რაღაც

25
00:01:15,810 --> 00:01:17,150
მოდის თქვენი გზა.

26
00:01:17,150 --> 00:01:20,770
დამახსოვრება თუმცა, როდესაც თქვენ გახსნა
tag, თქვენ უნდა დახუროს ეს ერთხელ თქვენ

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
bracket სხეულის ახლოს bracket.

30
00:01:26,960 --> 00:01:31,280
მე მაშინ დაამატოთ ზოგიერთი ტექსტი, ამ შემთხვევაში, ჩემი
პირველი ვებ გვერდზე მაშინ, როდესაც მივედი

31
00:01:31,280 --> 00:01:35,540
განყოფილების დახურვა, მე თითქმის
იდენტური tag გარდა ამ დროს

32
00:01:35,540 --> 00:01:37,660
ველით slash ადრე ორგანო.

33
00:01:37,660 --> 00:01:41,140
ზოგადად, ეს არის ფორმატი, თქვენ
აპირებთ გამოიყენოთ როდესაც თქვენ გახსნით

34
00:01:41,140 --> 00:01:42,680
და დახურვის tags.

35
00:01:42,680 --> 00:01:47,900
ერთად, ღია tag და ბოლოს tag
დაკომპლექტებას რასაც ელემენტს.

36
00:01:47,900 --> 00:01:51,870
>> თუ გადავხედავთ პირველი ხაზი, თქვენ
ვხედავ ძახილის წერტილი მოჰყვა

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

38
00:01:53,350 --> 00:01:56,280
ეს მართლაც მხოლოდ ვეუბნებოდი თქვენი ბრაუზერის
რომ ფაილი არის ვებ გვერდი

39
00:01:56,280 --> 00:01:58,280
დაწერილი HTML.

40
00:01:58,280 --> 00:02:01,970
HTML tag არსებითად ამბობს,
აქ მოდის ზოგიერთი HTML.

41
00:02:01,970 --> 00:02:04,950
მაშინ ჩვენ გვაქვს ხელმძღვანელი tag ერთად
სათაური tag შიგნით.

42
00:02:04,950 --> 00:02:09,430
ხელმძღვანელი tag შეგიძლიათ წარმოიდგინოთ, რომ, როგორც
მოიცავს HTML კოდი, რომელიც მოდის

43
00:02:09,430 --> 00:02:12,670
ნაყარი თქვენს ვებ გვერდზე
რეალური შინაარსი.

44
00:02:12,670 --> 00:02:16,700
>> ზოგადად, თქვენ დააყენა სათაური თქვენი
ვებ გვერდი აქ, თუმცა არსებობს

45
00:02:16,700 --> 00:02:19,350
სხვა tags რომელიც შეიძლება აღმოჩნდეს
აქაც.

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
ჩვენ ნაძვის it up მალე.

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
>> თქვენ გახსენით იმიჯი tag მოჰყვა
მიერ ამ 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
გარდა ამისა, ასევე შეგიძლიათ ბმული
images მეშვეობით სრული 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
ნებისმიერ შემთხვევაში, თქვენ დასრულდება up ერთად გაცილებით
გალამაზებაში ნახვა, რაღაც მსგავსი.

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
გამოსახულება, როგორიცაა header.

71
00:03:45,210 --> 00:03:50,830
ყველა მე ვაკეთებ ჯერჯერობით გამოიყენოთ header
tag, H1 და ხაზის შესვენების tag, ძმ.

72
00:03:50,830 --> 00:03:54,900
Header tag რაც შრიფტის პატარა
ცოტა უფრო დიდი და უფრო ცნობილი.

73
00:03:54,900 --> 00:03:58,930
ხაზი შესვენება აქვს, მეორეს
მხრივ, არის ერთგვარი cool.

74
00:03:58,930 --> 00:04:03,720
განსხვავებით ბევრი სხვა tags, თქვენ არ გაქვთ
გახსნისა და დახურვის შესვენების tag, უბრალოდ

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
მათ შორის ნაბიჯია slash ზე
ბოლოს თავდაპირველი დეკლარაცია.

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 TV.

85
00:04:40,780 --> 00:04:44,460
ეს გზა, როცა ვინმე დააჭერს me,
მათი ბრაუზერი იქნება მიმართული

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
ჩემს ბრაუზერში გაიხსნება სხვა
tab რომ 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
მინდა, რომ დაიწყოს ორგანიზება my HTML to
გაუადვილოს სტილი მოგვიანებით.

97
00:05:21,290 --> 00:05:26,900
აქ, მე შეიქმნა ორი სხვადასხვა სახის
პოტენციალი, რათა დაეხმაროს ორგანიზება ჩემი კოდი.

98
00:05:26,900 --> 00:05:31,170
მე გამოიყენება ID ატრიბუტის შიგნით
დაყოფა, ან div tag, და მე გამოიყენება

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, ერთხელ დავიწყო სტილის
ჩემი კოდი ცენტრთან, შემიძლია ამ

107
00:05:59,700 --> 00:06:03,730
ორგანიზაციული ატრიბუტები გავლენა
ჩემი ვებ გვერდის ესთეტიკას.

108
00:06:03,730 --> 00:06:07,600
>> ყველაფერი ფარგლებში სამმართველოს დაბრუნება
ექნება მსგავსი stylings ან ნებისმიერი

109
00:06:07,600 --> 00:06:12,010
მეორე ჯგუფის HTML I ჯგუფი შევიდა
კლასი გამოსახულება იზიარებენ მსგავსი სახეს.

110
00:06:12,010 --> 00:06:15,700
ეს არის ბევრად უფრო ადვილია, ვიდრე ცდილობს რედაქტირება
და სტილი გამოსახულება ან ბლოკები

111
00:06:15,700 --> 00:06:17,690
ტექსტის ინდივიდუალურად.

112
00:06:17,690 --> 00:06:21,480
>> ასე რომ, ჩვენ წავიდა საფუძვლებს როგორ
რათა ვებ გვერდზე HTML.

113
00:06:21,480 --> 00:06:25,280
HTML აქვს bunch სხვა მახასიათებლები ძალიან
რომ როდესაც დაწყვილებული სხვა ენებზე

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 Farnham.

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
>> ასე მაგალითად, მე შეიძლება გამოიყენოს
კლასი image -

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 Farnham.

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