سمات HTML
افهم كيفية إضافة تفاصيل إضافية إلى العناصر باستخدام السمات
سمات HTML درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
الوسائط المتعددة: إضافة الفيديو والصوت
مرحبًا بكم في الدرس التالي! سنتعلّم اليوم كيفية إضافة الفيديو والصوت إلى صفحات الويب. تجعل الوسائط المتعددة صفحاتكم أكثر تفاعلية ومتعة!
لماذا نضيف الوسائط المتعددة؟
يمكن لمقاطع الفيديو والصوت أن تجعل صفحات الويب:
- أكثر تشويقًا
- غنية بالمعلومات وممتعة
- تفاعلية
لنتعلّم كيفية إضافتها باستخدام HTML!
إضافة فيديو
تُضاف مقاطع الفيديو باستخدام الوسم <video>. ويمكنكم تحديد ملف الفيديو باستخدام السمة src.
مثال:
في هذا المثال:
src: تحدد ملف الفيديو.controls: تضيف عناصر التحكم في التشغيل والإيقاف المؤقت ومستوى الصوت.width: تحدد عرض الفيديو.
<video src="example.mp4" controls width="400"></video>
إضافة تنسيقات فيديو متعددة
لا تدعم جميع المتصفحات تنسيقات الفيديو نفسها. ويمكنكم تضمين مصادر متعددة باستخدام الوسم <source>.
مثال:
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
إضافة الصوت
يُضاف الصوت باستخدام الوسم <audio>. ويمكنكم تحديد ملف الصوت باستخدام السمة src.
في هذا المثال:
src: تحدد ملف الصوت.controls: تضيف عناصر التحكم في التشغيل والإيقاف المؤقت ومستوى الصوت.
<audio src="example.mp3" controls></audio>
إضافة تنسيقات صوتية متعددة
كما هي الحال مع مقاطع الفيديو، يمكنكم تضمين مصادر صوتية متعددة لتحسين التوافق مع المتصفحات.
مثال:
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
التشغيل التلقائي والتكرار
يمكنكم جعل مقاطع الفيديو والصوت تعمل تلقائيًا أو تتكرر بإضافة السمتين autoplay وloop.
مثال:
ملاحظة: قد تُعطّل بعض المتصفحات التشغيل التلقائي لأسباب تتعلق بتجربة المستخدم.
<audio src="example.mp3" autoplay loop></audio>
تضمين مقاطع فيديو YouTube
يمكنكم تضمين مقاطع فيديو YouTube في صفحتكم باستخدام الوسم <iframe>.
مثال:
استبدلوا example بالمعرّف الفريد للفيديو.
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
أحسنتم!
تهانينا! لقد تعلّمتم كيفية إضافة مقاطع الفيديو والصوت وحتى تضمينات YouTube إلى صفحات الويب. تجعل الوسائط المتعددة المحتوى أكثر حيوية وتشويقًا. في الدرس التالي، سنتعمق في التنسيق باستخدام CSS لجعل صفحات الويب تبدو رائعة. استعدوا لاستكشاف عالم التصميم!
الأسئلة الشائعة
هل درس «سمات HTML» مجاني؟
نعم — نص درس «سمات HTML» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «سمات HTML»؟
افهم كيفية إضافة تفاصيل إضافية إلى العناصر باستخدام السمات تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «سمات HTML»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.