الفصل السادس: تضمين الوسائط (Media) في HTML

1. مقدمة إلى الوسائط في HTML

تسمح HTML بتضمين الوسائط المتعددة مثل الصور، الفيديوهات، والصوتيات بسهولة داخل صفحات الويب، مما يضيف حيوية وتفاعلية للمحتوى.

2. الصور (Images)

إضافة الصور:

يمكن إضافة الصور باستخدام العنصر <img>.

الصيغة:

<img src="path/to/image.jpg" alt="وصف الصورة" width="500" height="300">

السمات الشائعة:

• src: يُحدد مسار الصورة.
• alt: يُوفر وصفًا للصورة عند عدم تحميلها.
• width و height: لتحديد أبعاد الصورة.

مثال:

<img src="example.jpg" alt="صورة توضيحية" width="600" height="400">

الروابط والصور:

يمكن جعل الصور قابلة للنقر باستخدام عنصر <a>.

مثال:

<a href="https://example.com">
    <img src="example.jpg" alt="صورة قابلة للنقر" width="400">
</a>

3. الفيديوهات (Videos)

تضمين الفيديوهات:

يتم استخدام العنصر <video>.

الصيغة:

<video src="video.mp4" controls width="600" height="400">
    فيديوك غير مدعوم في متصفحك.
</video>

السمات الشائعة:

• src: يُحدد مسار الفيديو.
• controls: يُضيف أدوات التحكم بالفيديو.
• autoplay: يجعل الفيديو يبدأ تلقائيًا.
• loop: يُعيد تشغيل الفيديو تلقائيًا بعد انتهائه.
• muted: يجعل الفيديو مكتومًا افتراضيًا.

مثال:

<video src="example.mp4" controls autoplay loop muted width="600"></video>

تضمين الفيديوهات من يوتيوب:

يمكن تضمين فيديوهات من يوتيوب باستخدام <iframe>.

مثال:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

4. الصوتيات (Audios)

تضمين الصوتيات:

يتم استخدام العنصر <audio>.

الصيغة:

<audio src="audio.mp3" controls>
    ملف الصوت غير مدعوم في متصفحك.
</audio>

السمات الشائعة:

• src: يُحدد مسار الصوت.
• controls: يُضيف أدوات التحكم بالصوت.
• autoplay: يجعل الصوت يبدأ تلقائيًا.
• loop: يُعيد تشغيل الصوت تلقائيًا بعد انتهائه.
• muted: يجعل الصوت مكتومًا افتراضيًا.

مثال:

<audio src="example.mp3" controls autoplay loop muted></audio>

5. دمج الوسائط مع النصوص

يمكن دمج الوسائط مع النصوص لتصميم محتوى متكامل وجذاب.

مثال:

<div>
    <h3>هذا هو عنوان الفيديو:</h3>
    <video src="video.mp4" controls width="600"></video>
    <p>شاهد هذا الفيديو للتعرف على المزيد حول الموضوع.</p>
</div>

6. تحسين الوسائط باستخدام CSS

تنسيق الصور:

<style>
    img {
        border: 2px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
</style>

تنسيق الفيديوهات:

<style>
    video {
        display: block;
        margin: 20px auto;
        border: 2px solid #000;
    }
</style>

7. تمارين تطبيقية

1. قم بإضافة صورة إلى صفحتك مع وصف نصي لها.
2. أضف فيديو بتنسيق MP4 يحتوي على أدوات التحكم ويبدأ تلقائيًا.
3. قم بإنشاء مشغل صوتي يحتوي على أغنية مع أدوات التحكم.
4. جرب تضمين فيديو من يوتيوب في صفحتك.

بهذا الفصل، تعلمنا كيفية تضمين الوسائط المتعددة في صفحات الويب. في الفصل القادم، سنتعلم كيفية إنشاء الروابط (Links) والتنقل بين الصفحات.