إضافة الصور والفيديو والصوت في HTML
في هذا المقال ساشرح وسم img و video و audio مع أمثلة عملية
الصور والفيديو والصوت هي العناصر التي تحوّل صفحة HTML من مجرد نص جامد إلى تجربة حية وتفاعلية.
في هذا الدليل ستتعلم الطريقة الصحيحة لإضافة الوسائط في HTML باستخدام الوسوم:
imgللصورvideoللفيديوaudioللصوت
مع أمثلة واضحة ونصائح احترافية لتجنب الأخطاء الشائعة.
أولاً: وسم img – إضافة الصور في HTML
وسم img يُستخدم لعرض الصور داخل الصفحة، وهو وسم ذاتي الإغلاق (لا يحتاج وسم إغلاق).
أهم الخصائص:
src: مسار الصورة (محلي أو رابط خارجي)alt: نص بديل (مهم جداً لإمكانية الوصول و SEO) أو في حال حدوث خطأ في عرض الصورةwidth/height: أبعاد الصورة (يُفضل التحكم بها من خلال CSS)title: نص يظهر عند تمرير الماوس
مثال بسيط:
<img src="images/logo.png" alt="شعار الموقع" width="200" />نصائح مهمة مع img:
- لا تكتب alt=”image”
- استخدم وصفاً حقيقياً مثل:
alt="شعار HTML باللون البرتقالي"- استخدم صيغ حديثة مثل WebP أو JPG مضغوط
- لا ترفع صورة ضخمة ثم تصغرها بـ CSS (يؤثر على الأداء)
ثانياً: وسم video – عرض الفيديو في HTML
وسم video يسمح لك بتشغيل الفيديو مباشرة داخل الصفحة.
أهم الخصائص:
src: مسار ملف الفيديوcontrols: أزرار التشغيل والتحكمautoplay: تشغيل تلقائي (غالباً يحتاج muted)loop: إعادة تشغيل تلقائيmuted: كتم الصوتposter: صورة قبل تشغيل الفيديو
مثال فيديو بسيط:
<video src="video.mp4" controls width="640">
متصفحك لا يدعم عنصر الفيديو.
</video>مثال مع أكثر من مصدر (أفضل توافق):
<video controls width="640">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
متصفحك لا يدعم عنصر الفيديو.
</video>نصائح احترافية:
- أفضل صيغة حالياً: MP4 (H.264)
- لا تستخدم
autoplayمع الصوت - للفيديوهات الكبيرة: استخدم YouTube أو CDN
ثالثاً: وسم audio – تشغيل الصوت في HTML
وسم audio يُستخدم لتشغيل الملفات الصوتية مثل MP3.
مثال بسيط:
<audio src="sound.mp3" controls>
متصفحك لا يدعم عنصر الصوت.
</audio>مثال مع أكثر من مصدر:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
متصفحك لا يدعم عنصر الصوت.
</audio>الخصائص (controls – autoplay– loop) تعمل بنفس فكرة video.