1
00:00:03,250 --> 00:00:07,080
لن يقوم مصممو صفحات الويب الذين يحترمون أنفسهم

2
00:00:07,080 --> 00:00:10,990
بتصميم صفحات الويب دون تضمين

3
00:00:10,990 --> 00:00:15,665
بعض الصور أو الوسائط على مواقعهم الإلكترونية.

4
00:00:15,665 --> 00:00:19,055
أساتذة علوم الكمبيوتر هي استثناء.

5
00:00:19,055 --> 00:00:23,390
في هذه المرحلة، أنت على الأرجح تتوقع مني

6
00:00:23,390 --> 00:00:26,270
أن أقول هذا، ولكن هذا ليس ما سأقوله.

7
00:00:26,270 --> 00:00:29,255
سأقول ذلك،

8
00:00:29,255 --> 00:00:33,425
«الصورة تساوي 12 دولارًا على IstockPhoto.com.

9
00:00:33,425 --> 00:00:38,060
يوفر Bootstrap دعمًا واسعًا

10
00:00:38,060 --> 00:00:42,800
لتضمين الصور وأنواع مختلفة من الوسائط في مواقع الويب الخاصة بك وصفحات الويب الخاصة بك.

11
00:00:42,800 --> 00:00:49,040
من الواضح أن علامة HTML للصورة سيتم استخدامها لتضمين الصور في صفحات الويب الخاصة بك.

12
00:00:49,040 --> 00:00:55,170
يوفر Bootstrap أيضًا مجموعة من الفئات التي يمكنك تطبيقها

13
00:00:55,170 --> 00:01:02,215
على علامة الصورة من أجل تحسين طريقة تضمين الصور في صفحة الويب الخاصة بك.

14
00:01:02,215 --> 00:01:08,535
لذلك يمكنك استخدام فئة صورة تسمى img-fluid مما سيجعل صورك تستجيب،

15
00:01:08,535 --> 00:01:15,195
مما يعني أن حجم الصورة سوف يتكيف تلقائيًا مع أحجام الشاشة المختلفة.

16
00:01:15,195 --> 00:01:22,585
يمكنك أيضًا استخدام صورة مصغرة img-والتي ستضع حدودًا بيضاء حول صورتك.

17
00:01:22,585 --> 00:01:29,480
يمكنك أيضا التعامل مع الأشكال والأحجام من الصور كما

18
00:01:29,480 --> 00:01:36,635
ترون في هذه الصورة هنا حتى تتمكن من الحصول على الصور التي تقوم بإنشاء زوايا مدورة،

19
00:01:36,635 --> 00:01:38,995
إما كل الزوايا الأربع،

20
00:01:38,995 --> 00:01:42,020
أو أي زوج من الزوايا المختارة.

21
00:01:42,020 --> 00:01:45,595
حتى تتمكن من تطبيق الطبقة حوله

22
00:01:45,595 --> 00:01:49,450
لإنشاء صورة مع زوايا مدورة أو يمكنك أن ترى

23
00:01:49,450 --> 00:01:53,130
واصلة مستديرة أعلى أسفل اليسار أو اليمين لوضع

24
00:01:53,130 --> 00:01:57,905
زوايا مدورة في أي واحدة من هذه الحواف الأربعة من صورتك.

25
00:01:57,905 --> 00:02:02,780
يمكنك أيضا تطبيق دائرة مستديرة لإنشاء صور دائرية.

26
00:02:02,780 --> 00:02:05,170
لذلك، عندما تزور مواقع الويب،

27
00:02:05,170 --> 00:02:10,310
سترى الصور المستخدمة في العديد من هذه الطرق بالفعل.

28
00:02:10,310 --> 00:02:16,000
ستتذكر أننا رأينا فئة البطاقة في الدرس السابق والتمرين.

29
00:02:16,000 --> 00:02:21,085
هنا، أقوم بتوضيح استخدام فئة البطاقة مع صورة مضمنة.

30
00:02:21,085 --> 00:02:27,320
لذلك في هذه الحالة، نقوم بتضمين صورة مع صورة بطاقة الفئة الأعلى وإذا قمت

31
00:02:27,320 --> 00:02:30,760
بتضمين حجم كبير بما فيه الكفاية سيتم تضمين الصورة

32
00:02:30,760 --> 00:02:35,030
في الأعلى ثم تضمينها داخل بطاقة مثل هذا.

33
00:02:35,030 --> 00:02:36,860
إذا كانت الصورة صغيرة جدًا،

34
00:02:36,860 --> 00:02:41,245
فقد يتم وضعها في زاوية واحدة في بطاقتك.

35
00:02:41,245 --> 00:02:47,315
لذلك استخدم صورة كبيرة بما فيه الكفاية لتكون قادرة على تحديد بطاقة نظيفة مثل هذا.

36
00:02:47,315 --> 00:02:52,030
حتى هنا سترى الصورة التي يتم وصفها مع،

37
00:02:52,030 --> 00:02:56,035
والطبقات المطبقة على ذلك بما في ذلك أعلى صورة بطاقة

38
00:02:56,035 --> 00:03:00,510
و img-fluid لجعل الصورة تستجيب تلقائيا.

39
00:03:00,510 --> 00:03:04,470
لذلك، هذه هي الطريقة التي يمكنك بها استخدام الصور مع فئة البطاقة

40
00:03:04,470 --> 00:03:08,525
لتحديد البطاقات التي تستخدمها على صفحات الويب الخاصة بك.

41
00:03:08,525 --> 00:03:16,605
طريقة أخرى لتضمين الصور والمحتوى ذي الصلة في صفحات الويب الخاصة بك هي كائن وسائط.

42
00:03:16,605 --> 00:03:20,740
يسمح لك كائن الوسائط بتحديد صورة يمكنك وضعها

43
00:03:20,740 --> 00:03:26,225
إما على اليسار أو على يمين الوصف.

44
00:03:26,225 --> 00:03:29,690
أيضا، يمكنك تضمين نص الوسائط الذي

45
00:03:29,690 --> 00:03:32,880
يحتوي على الوصف الذي يذهب جنبا إلى جنب مع الصورة.

46
00:03:32,880 --> 00:03:35,110
لذلك كما ترون في هذا المثال هنا،

47
00:03:35,110 --> 00:03:41,270
فإن نص الوسائط نفسه يرفق أي محتوى بتنسيق HTML هنا.

48
00:03:41,270 --> 00:03:44,820
حتى هنا أنا باستخدام h2 و h4 جنبا إلى جنب

49
00:03:44,820 --> 00:03:49,755
مع فئة p داخل الجسم وسائل الإعلام لتحديد المحتوى الفعلي.

50
00:03:49,755 --> 00:03:54,240
سوف نستخدم كائن الوسائط في التمرين التالي.

51
00:03:54,240 --> 00:03:57,670
يمكنك أيضًا إجراء تضمين متجاوب للمحتوى.

52
00:03:57,670 --> 00:04:03,360
على سبيل المثال، إذا كان لديك فيديو تريد إرفاقه في صفحة الويب الخاصة بك،

53
00:04:03,360 --> 00:04:07,690
فيمكنك استخدام فئة iframe لتأطير الفيديو،

54
00:04:07,690 --> 00:04:10,760
ثم إرفاقه داخل div مع الفصول

55
00:04:10,760 --> 00:04:16,410
المضمنة أحجام العطاء استجابة بحيث يمكنك

56
00:04:16,410 --> 00:04:21,020
عرض المحتوى 16by9 أو 4by3 أو الفيديو.

57
00:04:21,020 --> 00:04:27,630
لذلك تضمين استجابة، يمكنك استخدام تضمين أو iframe

58
00:04:27,630 --> 00:04:34,450
أو الفيديو أو كائن HTML علامات ثم إرفاقها داخل div.

59
00:04:34,450 --> 00:04:41,345
تطبيق تضمين استجابة وأيضا جنبا إلى جنب مع تضمين استجابة،

60
00:04:41,345 --> 00:04:47,295
وتحديد الأبعاد التي تريد استخدامها لأبعاد 4by3 أو 16by9.

61
00:04:47,295 --> 00:04:53,685
لذا هذه هي الطريقة التي يمكنك بها أيضًا تضمين محتوى الفيديو في صفحات الويب الخاصة بك.

62
00:04:53,685 --> 00:04:57,570
الآن، بعد أن شهدنا الدعم للصور ووسائل الإعلام،

63
00:04:57,570 --> 00:05:02,230
فقد حان الوقت للذهاب إلى تمرين حيث سننظر في كيفية تضمين

64
00:05:02,230 --> 00:05:07,310
الصور في صفحة الويب أو الموقع الإلكتروني الذي كنا نعمل عليه.

65
00:05:07,310 --> 00:05:11,345
سنقوم بإجراء بعض التغييرات على صفحة index.html من خلال

66
00:05:11,345 --> 00:05:17,200
تضمين بعض الصور والمحتوى باستخدام كائن الوسائط.