أولاً: إدراج الصور باستخدام <img>
الصيغة الأساسية:
<img src="رابط_الصورة" alt="وصف بديل" width="عرض" height="ارتفاع">
مثال:
<img src="images/logo.png" alt="شعار الموقع" width="200">
شرح:
src: مسار الصورة.alt: وصف يظهر في حال لم تُعرض الصورة.widthوheight: لتحديد أبعاد الصورة.
ثانيًا: إدراج الصوت باستخدام <audio>
الصيغة الأساسية:
<audio controls>
<source src="audio/track.mp3" type="audio/mpeg">
المتصفح لا يدعم تشغيل الصوت.
</audio>
ملاحظات:
controlsتُظهر أدوات التشغيل (تشغيل، إيقاف، مستوى الصوت...).- يمكنك إدراج أكثر من صيغة صوت لضمان التوافق بين المتصفحات.
ثالثًا: إدراج الفيديو باستخدام <video>
الصيغة الأساسية:
<video width="400" controls>
<source src="video/sample.mp4" type="video/mp4">
المتصفح لا يدعم تشغيل الفيديو.
</video>
خصائص إضافية:
autoplay: تشغيل الفيديو تلقائيًا.loop: إعادة تشغيل الفيديو تلقائيًا بعد انتهائه.muted: بدء الفيديو بدون صوت.poster: صورة تظهر مكان الفيديو قبل التشغيل.
مثال عملي متكامل:
<!DOCTYPE html>
<html>
<head>
<title>وسائط في HTML</title>
</head>
<body>
<h1>وسائط متنوعة</h1>
<h2>صورة</h2>
<img src="images/photo.jpg" alt="منظر طبيعي" width="300">
<h2>ملف صوتي</h2>
<audio controls>
<source src="media/music.mp3" type="audio/mpeg">
جهازك لا يدعم تشغيل الصوت.
</audio>
<h2>فيديو</h2>
<video width="400" controls poster="images/preview.jpg">
<source src="media/video.mp4" type="video/mp4">
جهازك لا يدعم تشغيل الفيديو.
</video>
</body>
</html>
الواجب العملي:
- أنشئ صفحة تحتوي على:
- صورة شخصية أو من اختيارك.
- ملف صوتي للتشغيل.
- فيديو توضيحي بسيط.
- تأكد من وجود بدائل (
altو النص داخل<audio>و<video>) لحالات عدم دعم الوسائط.
تهانينا!
لقد أتممت سلسلة HTML المكوّنة من 10 دروس.
أصبحت الآن قادرًا على إنشاء صفحات ويب أساسية تحتوي على:
- نصوص وعناوين
- روابط وقوائم
- جداول ونماذج
- تقسيمات احترافية
- وسائط متعددة