لن يقوم مصممو صفحات الويب الذين يحترمون أنفسهم
بتصميم صفحات الويب دون تضمين
بعض الصور أو الوسائط على مواقعهم الإلكترونية.
أساتذة علوم الكمبيوتر هي استثناء.
في هذه المرحلة، أنت على الأرجح تتوقع مني
أن أقول هذا، ولكن هذا ليس ما سأقوله.
سأقول ذلك،
«الصورة تساوي 12 دولارًا على IstockPhoto.com.
يوفر Bootstrap دعمًا واسعًا
لتضمين الصور وأنواع مختلفة من الوسائط في مواقع الويب الخاصة بك وصفحات الويب الخاصة بك.
من الواضح أن علامة HTML للصورة سيتم استخدامها لتضمين الصور في صفحات الويب الخاصة بك.
يوفر Bootstrap أيضًا مجموعة من الفئات التي يمكنك تطبيقها
على علامة الصورة من أجل تحسين طريقة تضمين الصور في صفحة الويب الخاصة بك.
لذلك يمكنك استخدام فئة صورة تسمى img-fluid مما سيجعل صورك تستجيب،
مما يعني أن حجم الصورة سوف يتكيف تلقائيًا مع أحجام الشاشة المختلفة.
يمكنك أيضًا استخدام صورة مصغرة img-والتي ستضع حدودًا بيضاء حول صورتك.
يمكنك أيضا التعامل مع الأشكال والأحجام من الصور كما
ترون في هذه الصورة هنا حتى تتمكن من الحصول على الصور التي تقوم بإنشاء زوايا مدورة،
إما كل الزوايا الأربع،
أو أي زوج من الزوايا المختارة.
حتى تتمكن من تطبيق الطبقة حوله
لإنشاء صورة مع زوايا مدورة أو يمكنك أن ترى
واصلة مستديرة أعلى أسفل اليسار أو اليمين لوضع
زوايا مدورة في أي واحدة من هذه الحواف الأربعة من صورتك.
يمكنك أيضا تطبيق دائرة مستديرة لإنشاء صور دائرية.
لذلك، عندما تزور مواقع الويب،
سترى الصور المستخدمة في العديد من هذه الطرق بالفعل.
ستتذكر أننا رأينا فئة البطاقة في الدرس السابق والتمرين.
هنا، أقوم بتوضيح استخدام فئة البطاقة مع صورة مضمنة.
لذلك في هذه الحالة، نقوم بتضمين صورة مع صورة بطاقة الفئة الأعلى وإذا قمت
بتضمين حجم كبير بما فيه الكفاية سيتم تضمين الصورة
في الأعلى ثم تضمينها داخل بطاقة مثل هذا.
إذا كانت الصورة صغيرة جدًا،
فقد يتم وضعها في زاوية واحدة في بطاقتك.
لذلك استخدم صورة كبيرة بما فيه الكفاية لتكون قادرة على تحديد بطاقة نظيفة مثل هذا.
حتى هنا سترى الصورة التي يتم وصفها مع،
والطبقات المطبقة على ذلك بما في ذلك أعلى صورة بطاقة
و img-fluid لجعل الصورة تستجيب تلقائيا.
لذلك، هذه هي الطريقة التي يمكنك بها استخدام الصور مع فئة البطاقة
لتحديد البطاقات التي تستخدمها على صفحات الويب الخاصة بك.
طريقة أخرى لتضمين الصور والمحتوى ذي الصلة في صفحات الويب الخاصة بك هي كائن وسائط.
يسمح لك كائن الوسائط بتحديد صورة يمكنك وضعها
إما على اليسار أو على يمين الوصف.
أيضا، يمكنك تضمين نص الوسائط الذي
يحتوي على الوصف الذي يذهب جنبا إلى جنب مع الصورة.
لذلك كما ترون في هذا المثال هنا،
فإن نص الوسائط نفسه يرفق أي محتوى بتنسيق HTML هنا.
حتى هنا أنا باستخدام h2 و h4 جنبا إلى جنب
مع فئة p داخل الجسم وسائل الإعلام لتحديد المحتوى الفعلي.
سوف نستخدم كائن الوسائط في التمرين التالي.
يمكنك أيضًا إجراء تضمين متجاوب للمحتوى.
على سبيل المثال، إذا كان لديك فيديو تريد إرفاقه في صفحة الويب الخاصة بك،
فيمكنك استخدام فئة iframe لتأطير الفيديو،
ثم إرفاقه داخل div مع الفصول
المضمنة أحجام العطاء استجابة بحيث يمكنك
عرض المحتوى 16by9 أو 4by3 أو الفيديو.
لذلك تضمين استجابة، يمكنك استخدام تضمين أو iframe
أو الفيديو أو كائن HTML علامات ثم إرفاقها داخل div.
تطبيق تضمين استجابة وأيضا جنبا إلى جنب مع تضمين استجابة،
وتحديد الأبعاد التي تريد استخدامها لأبعاد 4by3 أو 16by9.
لذا هذه هي الطريقة التي يمكنك بها أيضًا تضمين محتوى الفيديو في صفحات الويب الخاصة بك.
الآن، بعد أن شهدنا الدعم للصور ووسائل الإعلام،
فقد حان الوقت للذهاب إلى تمرين حيث سننظر في كيفية تضمين
الصور في صفحة الويب أو الموقع الإلكتروني الذي كنا نعمل عليه.
سنقوم بإجراء بعض التغييرات على صفحة index.html من خلال
تضمين بعض الصور والمحتوى باستخدام كائن الوسائط.