إدراج الصور والفيديو والصوت والروابط التشعبية وتنظيم البيانات بالجداول
تتميز لغة HTML5 بالقدرة الفائقة على دمج الوسائط التفاعلية الغنية كملفات الصوت والفيديو بصفة أصلية دون الحاجة لبرامج إضافية. في هذه المحطة، ندرس أساليب إدراج وتخصيص الصور الرقمية، وضوابط تشغيل الوسائط المتعددة عبر وسوم video وaudio، وكيفية ربط الصفحات ببعضها عبر الروابط التشعبية المرجعية، بجانب بناء الجداول الرقمية المنظمة لعرض البيانات التعليمية بكفاءة عالية.
1. إدراج الصور الرقمية والتحكم في خواصها
يُستخدم الوسم الفردي <img> لإدراج الصور، ويعتمد على خاصيتين إلزاميتين :
src(Source) : مسار أو رابط ملف الصورة المراد عرضه.alt(Alternative Text) : النص البديل الذي يظهر في حال تعذر تحميل الصورة ويساعد قارئات الشاشة لذوي الاحتياجات الخاصة.widthوheight: لتحديد أبعاد الصورة بالبكسل أو النسبة المئوية.
<img src="images/banner.jpg" alt="شعار منصة الأمين التعليمية" width="400" height="200">2. الوسائط المتعددة الأصلية في HTML5 (الفيديو والصوت)
أتاحت HTML5 وسوماً أصلية لتشغيل ملفات الميديا بضوابط تحكم تفاعلية متقدمة :
| الوسم البرمجي | أهم الخصائص (Attributes) | المثال البرمجي |
|---|---|---|
<video> |
controls (أزرار التشغيل والتحكم)، autoplay، loop، poster |
<video src="lesson.mp4" controls width="640"></video> |
<audio> |
controls، autoplay، loop |
<audio src="audio/lecture.mp3" controls></audio> |
3. الروابط التشعبية وبناء الجداول
أولاً: الروابط التشعبية (Hyperlinks) : يُستخدم الوسم <a> لربط الصفحات :
href(Hypertext Reference) : يحدد مسار الصفحة أو الموقع المستهدف.target="_blank": لفتح الرابط في لسان تبويب أو نافذة جديدة ومستقلة.
ثانياً: الجداول المنظمة (Tables) : تتكون شبكة الجدول من وسوم متداخلة منظمة :
<table>: الحاوية الرئيسية للجدول.<tr>(Table Row) : يمثل صفاً أفقياً في الجدول.<th>(Table Header) : خلية رأس الجدول، وتكون نصوصها غامقة وفي المنتصف.<td>(Table Data) : خلية بيانات عادية تحتوي على القيمة أو النص.
أنشطة التدريب العملي
controls تقوم بإظهار شريط أدوات التحكم للمستخدم (زر التشغيل والإيقاف المؤقت، شريط التقدم الزمني، مؤشر رفع وخفض الصوت، وزر ملء الشاشة). بدونها لن يستطيع المستخدم التحكم في تشغيل المقطع.
target="_blank" داخل وسم الرابط <a href="..." target="_blank">.
اضغط على أي بطاقة لاكتشاف المعنى الدقيق، واضغط على أيقونة الصوت للاستماع للنطق:
اضغط على الإجابة لتتحقق من فهمك وتكتشف التفسير النموذجي فورياً: