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
لغة توصيف النص التشعبي.

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
حسنا، 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 ليست نحويا
صحيح، قد تكون الصفحة الخاصة بك لا تزال

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
العلامة HTML يقول أساسا،
هنا يأتي بعض HTML.

41
00:02:01,970 --> 00:02:04,950
ثم لدينا علامة الرأس مع
علامة عنوان داخله.

42
00:02:04,950 --> 00:02:09,430
العلامة رئيس يمكن ان يخطر لك كما
تضم كود 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
العلامات الأخرى التي يمكن أن تظهر
هنا كذلك.

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
>> يمكنك فتح مع علامة صورة يتبع
بواسطة البديل في سمة في

60
00:03:05,910 --> 00:03:07,240
مصدر الصورة.

61
00:03:07,240 --> 00:03:12,030
قيمة السمة البديل هو فقط بعض
النص البديل في حالة لا يمكن لمستخدم

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
لقد استعملت سمة معرف داخل
التقسيم، أو شعبة الوسم، ولقد استعملت

99
00:05:31,170 --> 00:05:34,120
فئة السمة داخل
شعبة الوسم آخر.

100
00:05:34,120 --> 00:05:37,190
>> سمات الهوية والدرجة
العمل بالمثل.

101
00:05:37,190 --> 00:05:41,210
والفرق الوحيد هو أنك يمكن أن يكون فقط
عنصر واحد، معرف محددة، ولكن

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
إنشاء قسم آخر
مع أعلى رقم.

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 وجافا سكريبت، يمكن حقا
جعل صفحات تبرز.

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