الوسائط المتعددة: إضافة الفيديو والصوت
ضمّن مقاطع الفيديو والملفات الصوتية في صفحة الويب الخاصة بك
الوسائط المتعددة: إضافة الفيديو والصوت درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
التنسيقات المضمّنة: إضافة تنسيق بسيط إلى HTML
مرحبًا بكم في عالم التنسيق! سنتعلّم اليوم كيفية استخدام التنسيقات المضمّنة لتغيير مظهر العناصر في صفحة الويب. وتُعدّ التنسيقات المضمّنة طريقة بسيطة وسريعة لتحسين مظهر الصفحة.
ما التنسيقات المضمّنة؟
تتيح لكم التنسيقات المضمّنة تطبيق CSS (أوراق الأنماط المتتالية) مباشرةً على عنصر HTML باستخدام السمة style.
مثال:
<h1 style="color: red;">Hello, World!</h1>
سيعرض هذا عنوانًا باللون الأحمر. لنستكشف كيفية عمل ذلك!
تغيير لون النص
يمكنكم تغيير لون النص باستخدام الخاصية color في السمة style.
مثال:
<p style="color: blue;">This is blue text.</p>
تغيير حجم الخط
لتغيير حجم النص، استخدموا الخاصية font-size.
مثال:
<p style="font-size: 20px;">This text is 20 pixels large.</p>إضافة لون للخلفية
يمكنكم إضافة لون للخلفية إلى عنصر باستخدام الخاصية background-color.
مثال:
<p style="background-color: yellow;">This text has a yellow background.</p>دمج عدة تنسيقات
يمكنكم دمج عدة تنسيقات بفصلها باستخدام فاصلة منقوطة ;.
مثال:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles applied!
</p>تنسيق العناصر الأخرى
تعمل التنسيقات المضمّنة مع جميع عناصر HTML، مثل العناوين والفقرات والأزرار.
مثال:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: lightblue; border: none; padding: 10px;">
Styled Button
</button>جرّب بنفسك
لننشئ صفحة ويب باستخدام الأنماط المضمّنة. إليك مثالًا:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This paragraph has styled text.
</p>
<button style="background-color: coral; color: white; padding: 10px;">
Click Me!
</button>
</body>
</html>
أحسنتم!
تهانينا! لقد تعلّمتم كيفية استخدام الأنماط المضمّنة لإضافة تنسيق بسيط وفعّال إلى صفحات الويب الخاصة بكم. تُعدّ الأنماط المضمّنة طريقة رائعة لإجراء تغييرات سريعة، لكن عالم التنسيق أوسع من ذلك! في الدرس التالي، سنستكشف أساسيات CSS لإطلاق الإمكانات الكاملة لتصميم الويب. استعدّوا لإنشاء صفحات ويب مذهلة!
الأسئلة الشائعة
هل درس «الوسائط المتعددة: إضافة الفيديو والصوت» مجاني؟
نعم — نص درس «الوسائط المتعددة: إضافة الفيديو والصوت» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «الوسائط المتعددة: إضافة الفيديو والصوت»؟
ضمّن مقاطع الفيديو والملفات الصوتية في صفحة الويب الخاصة بك تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الوسائط المتعددة: إضافة الفيديو والصوت»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الجداول: تنظيم البيانات
- النماذج: جمع إدخالات المستخدم
- سمات HTML
- الوسائط المتعددة: إضافة الفيديو والصوت