🌟 الوسائط في HTML: كيف تجعل موقعك حياً بالصور والفيديو والصوت؟

تخيل موقع ويب مكون فقط من نصوص... سيكون مملاً جداً، أليس كذلك؟ الوسائط (Media) مثل الصور والفيديوهات والمقاطع الصوتية هي التي تضفي الحيوية والجاذبية على صفحات الويب. في هذا الدرس، سنتعلم معاً كيفية إضافة هذه العناصر الأساسية إلى صفحة HTML الخاصة بك بكل سهولة.

📸 إضافة الصور باستخدام وسم <img>

الوسم <img> هو الوسيلة الأساسية لإدراج صورة في صفحة HTML. المميز في هذا الوسم أنه وسم ذاتي الإغلاق، أي لا يحتاج إلى وسم إغلاق منفصل مثل </img>.

لكي يعمل الوسم، يجب أن تخبر المتصفح عن مصدر الصورة. نفعل ذلك باستخدام السمة (Attribute) src.

<img src="cat.jpg">

ماذا يعني src؟ هي اختصار لـ Source، أي المصدر. يمكن أن يكون المصدر:

  1. مسار ملف محلي على جهازك (مثل images/logo.png).
  2. رابط URL لصورة موجودة على موقع آخر على الإنترنت (مثل https://example.com/photo.jpg).

🛡️ السمة المهمة: alt

هذه السمة تعني النص البديل (Alternative Text). لها وظيفتان أساسيتان:

  1. للمكفوفين: تقرأها برامج قارئ الشاشة لوصف الصورة.
  2. عند الخطأ: تظهر إذا تعذر تحميل الصورة (بسبب رابط خاطئ أو مشكلة في الاتصال).
<img src="sunset.jpg" alt="منظر لغروب الشمس خلف الجبال">

🎬 إضافة الفيديو باستخدام وسم <video>

لإضافة فيديو، نستخدم الوسم <video>. على عكس <img>، هذا الوسم ليس ذاتي الإغلاق ويتطلب وسم إغلاق </video>.

السمة الأساسية هنا أيضاً هي src لتحديد مصدر ملف الفيديو.

<video src="movie.mp4"></video>

لكن، إذا قمت بتجربة الكود أعلاه، قد لا ترى شيئاً أو ترى صورة ثابتة فقط! 👀 هذا لأن المتصفح يحتاج إلى تعليمات إضافية للتحكم في تشغيل الفيديو.

⚙️ خصائص التحكم في الفيديو

لنجعل الفيديو قابلاً للاستخدام، نضيف بعض السمات:

  • controls: تضيف شريط التحكم (تشغيل، إيقاف، صوت، إلخ).
  • width و height: تحدد عرض وارتفاع مشغل الفيديو بالبكسل.
<video src="tutorial.mp4" controls width="600" height="400"></video>

🔊 إضافة الصوت باستخدام وسم <audio>

إضافة الملفات الصوتية تشبه إلى حد كبير إضافة الفيديو، لكننا نستخدم الوسم <audio>.

<audio src="song.mp3" controls></audio>

نفس السمة controls ضرورية هنا لإظهار أزرار التشغيل والإيقاف وضبط مستوى الصوت.

💡 ملاحظة مهمة حول تنسيقات الملفات

ليس كل المتصفحات تدعم كل تنسيقات الوسائط. للتأكد من عمل ملف الفيديو أو الصوت على أكبر عدد من الأجهزة، نستخدم الوسم <source> داخل <video> أو <audio>.

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- الرسالة التالية تظهر إذا فشل المتصفح في تشغيل أي من التنسيقات أعلاه -->
  عذراً، متصفحك لا يدعم تشغيل الفيديو.
</video>

🧪 لنطبق معاً: صفحة ويب متكاملة الوسائط

لنقم بإنشاء قسم بسيط في صفحة تعرض ما تعلمناه:

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="UTF-8">
    <title>تجربة الوسائط</title>
</head>
<body>
    <h1>معرض الوسائط البسيط</h1>

    <h2>صورة لطيفة</h2>
    <img src="nature.jpg" alt="غابة خضراء في ضوء النهار" width="500">

    <h2>مقطع فيديو تعليمي</h2>
    <video src="intro.mp4" controls width="500"></video>

    <h2>خلفية موسيقية هادئة</h2>
    <audio src="background-music.mp3" controls></audio>

</body>
</html>

🧠 ملخص الدرس

  • نستخدم الوسم <img> مع السمة src لإضافة الصور، ولا ننسى السمة المهمة alt.
  • نستخدم الوسم <video> مع السمة src و controls لإضافة الفيديوهات القابلة للتحكم.
  • نستخدم الوسم <audio> مع السمة src و controls لإضافة المقاطع الصوتية.
  • الوسمين <video> و <audio> ليسا ذاتيي الإغلاق، بينما <img> هو وسم ذاتي الإغلاق.
  • يمكننا استخدام الوسم <source> لتوفير أكثر من تنسيق للملف لضمان التوافق.