استخدام وسم Embed في HTML لتضمين الملفات وعرض الصفحات داخل صفحة الويب

في هذا الدرس من دورة HTML CSS، ستتعلم كيفية استخدام وسم <embed> في HTML لعرض الملفات المختلفة مثل الصور والفيديوهات والملفات الصوتية وحتى صفحات HTML أخرى داخل صفحة الويب. يهدف هذا الدرس إلى تعزيز فهمك لكيفية تضمين محتويات متعددة بشكل سهل وسلس، مما يتيح لك بناء صفحات ويب متكاملة ومليئة بالمحتويات التفاعلية.

1. كيفية كتابة التنسيقات داخل وسم Style في HTML

تعد كتابة التنسيقات باستخدام وسم <style> في HTML من المهارات الأساسية التي يجب على كل مطور ويب إتقانها. سنستعرض كيفية استخدام محددات CSS (Selectors) لتحديد عناصر HTML التي ترغب في تنسيقها، وكيفية تطبيق الخصائص المختلفة داخل القوسين المجعدين { }.

شرح المحددات (Selectors) والنطاق داخل القوسين { }

المحددات (Selectors) هي الصيغة التي تستخدم لتحديد عنصر HTML معين لتطبيق التنسيقات عليه. على سبيل المثال، في الكود التالي:

• figuare: هو المحدد الذي يختار عنصر HTML باسم "figuare" لتطبيق التنسيقات عليه.


• { }: تحتوي القوسين المجعدين على خصائص CSS التي سيتم تطبيقها على العنصر المحدد.

شرح كل خاصية من خصائص CSS المستخدمة:

• text-align: center;: تقوم هذه الخاصية بمحاذاة النص داخل عنصر figuare ليكون في منتصف العنصر.


• background-color: #df2121;: تحدد هذه الخاصية لون الخلفية للعنصر، في هذه الحالة اللون هو أحمر.


• width: auto;: تعني هذه الخاصية أن عرض العنصر سيتم تحديده تلقائيًا بناءً على محتواه.


• display: table;: تجعل هذه الخاصية العنصر يظهر كجدول، مما يسهل تنظيم محتوياته.


• margin: 0 auto;: تحدد هذه الخاصية المسافات الفارغة حول العنصر، وفي هذه الحالة تجعل العنصر يتمركز أفقياً.


• margin-bottom: -17px;: تحدد هذه الخاصية المسافة الفارغة أسفل العنصر بقيمة سالبة، مما يرفع العنصر قليلاً.


• padding: 10px;: تضيف هذه الخاصية مسافة داخلية حول محتويات العنصر بمقدار 10 بكسل.


• border-radius: 10px;: تجعل هذه الخاصية الحواف دائرية بدلاً من أن تكون حادة، بقيمة 10 بكسل.


• color: #fff;: تحدد هذه الخاصية لون النص داخل العنصر، في هذه الحالة اللون هو أبيض.


• font-weight: bolder;: تجعل هذه الخاصية النص داخل العنصر أكثر سمكًا.

تنسيقات figcaption:

• border: 1px solid #777;: تضيف هذه الخاصية حدوداً بعرض 1 بكسل ولون رمادي حول عنصر figcaption.


• border-radius: 12px;: تجعل حواف الحدود دائرية بقيمة 12 بكسل.


• margin: 31px auto;: تحدد المسافات الفارغة حول العنصر وتجعله مركزيًا أفقيًا.


• display: table;: تجعل هذه الخاصية العنصر يظهر كجدول.

2. استخدام وسم Embed لتضمين الملفات داخل صفحة الويب

يتيح لك وسم <embed> تضمين ملفات متنوعة داخل صفحات الويب مثل الصور، الفيديوهات، الملفات الصوتية، وحتى صفحات HTML أخرى.

أنواع الملفات المستخدمة والسمات المرتبطة بها:

• الملف: صفحة HTML (figuare and figcaption.html)


• السمات:
  
  
  
  • width="1000px": تحدد عرض الإطار المضمن في الصفحة.
  
  
  • height="1000px": تحدد ارتفاع الإطار المضمن في الصفحة.
  
  
  • src: تحدد مسار ملف HTML الذي سيتم تضمينه.
  
  
  
  

• الملف: صورة (test.webp)


• السمات:
  
  
  
  • width="1000px": تحدد عرض الصورة المضمنة.
  
  
  • height="1000px": تحدد ارتفاع الصورة المضمنة.
  
  
  • src: تحدد مسار ملف الصورة الذي سيتم تضمينه.
  
  
  
  

• الملف: فيديو (video-test.webm)


• السمات:
  
  
  
  • width="1000px": تحدد عرض الفيديو المضمن.
  
  
  • height="1000px": تحدد ارتفاع الفيديو المضمن.
  
  
  • src: تحدد مسار ملف الفيديو الذي سيتم تضمينه.
  
  
  
  

لماذا يجب عليك الانضمام إلى هذه الدورة؟

تعلم كيفية استخدام وسم <embed> في HTML يعد خطوة هامة لأي مطور ويب يسعى لإنشاء صفحات ويب تفاعلية ومتعددة الوسائط. ستتمكن من تضمين محتويات خارجية بسهولة، مما يجعل موقعك أكثر جاذبية واحترافية. هذه الدورة ليست مجرد مجموعة من الدروس، بل هي رحلة تعليمية شاملة ستساعدك على بناء مهاراتك في تطوير الويب وتطبيق ما تعلمته في مشاريعك الخاصة.

انضم الآن إلى دورة HTML CSS واستفد من مجموعة واسعة من الدروس العملية التي ستأخذك من مستوى المبتدئ إلى الاحتراف. مع كل درس، ستكتسب الثقة والمعرفة اللازمة لتحقيق النجاح في عالم تطوير الويب.