الدرس 2 دليل القوائم والصور والوسائط في HTML

شرح القوائم، الصور، والوسائط في HTML

---

محتوى الدرس

• القوائم في HTML
• الصور
• الفيديو والصوت
• تمرين عملي
• اختبار الدرس

---

دليل القوائم في لغة HTML

تستخدم القوائم لتنظيم المعلومات في شكل نقطي أو مرقم.

1. القوائم غير المرتبة (Unordered Lists)

تستخدم للنقاط التي ليس لها ترتيب معين:

الكود:

<ul>
    <li>عنصر أول</li>
    <li>عنصر ثاني</li>
    <li>عنصر ثالث</li>
</ul>
            

النتيجة:

• قهوة
• شاي
• حليب

2. القوائم المرتبة (Ordered Lists)

تستخدم للنقاط التي لها تسلسل أو أولوية:

الكود:

<ol>
    <li>افتح المتصفح</li>
    <li>اكتب العنوان</li>
    <li>اضغط Enter</li>
</ol>
            

النتيجة:

1. افتح محرر النصوص
2. اكتب كود HTML
3. احفظ الملف بصيغة .html
4. افتح الملف في المتصفح

3. قوائم الوصف (Definition Lists)

تستخدم للقواميس والمصطلحات:

الكود:

<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز النص الفائق</dd>
    
    <dt>CSS</dt>
    <dd>لغة تنسيق صفحات الويب</dd>
</dl>
            

النتيجة:

HTML

لغة ترميز النص الفائق - هيكل الصفحة

CSS

لغة تنسيق صفحات الويب - مظهر الصفحة

JavaScript

لغة برمجة - تفاعل الصفحة

4. القوائم المتداخلة (Nested Lists)

يمكن وضع قائمة داخل قائمة:

الكود:

<ul>
    <li>فواكه
        <ul>
            <li>تفاح</li>
            <li>موز</li>
        </ul>
    </li>
    <li>خضروات</li>
</ul>
            

النتيجة:

• منتجات الألبان
  • حليب
  • جبن
  • زبادي
• الفواكه
  1. تفاح
  2. برتقال
• المشروبات

خصائص القوائم المرتبة:

الخاصية	القيمة	الوصف	مثال
type	1, A, a, I, i	نوع الترقيم	النوع A
start	رقم	بدء الترقيم من رقم معين	يبدأ من 10
reversed	reversed	ترتيب عكسي	ثالث ثاني أول

---

دليل الصور في لغة HTML

عنصر <img> يستخدم لإضافة الصور إلى صفحات الويب.

بناء عنصر الصورة:

<img src="مسار_الصورة.jpg" alt="وصف الصورة">
            

السمات الأساسية للصور:

السمة	الوصف	إلزامية
src	مسار الصورة (URL)	✅ نعم
alt	النص البديل (يظهر إذا لم تظهر الصورة)	✅ نعم (للإمكانية والSEO)
width	عرض الصورة (بالبكسل)	❌ لا
height	ارتفاع الصورة (بالبكسل)	❌ لا
title	تلميح يظهر عند تمرير الماوس	❌ لا

أمثلة عملية:

1. صورة أساسية:

<img src="https://via.placeholder.com/150" alt="صورة تجريبية">
            

النتيجة:

2. صورة بحجم محدد:

<img src="https://via.placeholder.com/400" alt="صورة كبيرة" width="200" height="100">
            

النتيجة:

3. صور مرتبطة (كروابط):

<a href="https://www.example.com">
    <img src="https://via.placeholder.com/100" alt="اضغط هنا">
</a>
            

النتيجة:

أنواع ملفات الصور الشائعة:

النوع	الامتداد	الاستخدام
JPEG	.jpg, .jpeg	الصور الفوتوغرافية (بدون خلفية شفافة)
PNG	.png	الصور مع خلفية شفافة أو تفاصيل دقيقة
GIF	.gif	الصور المتحركة البسيطة
SVG	.svg	الرسومات المتجهية (قابلة للتكبير دون فقد الجودة)

💡 نصائح مهمة للصور:

1. استخدم سمة alt دائماً للمكفوفين ومحركات البحث
2. حجم الصور الكبير يبطئ الموقع - استخدم التحسين
3. استخدم الصور ذات الخلفية الشفافة PNG عندما تحتاجها
4. تجنب تغيير حجم الصور عبر width/height - عدل الصورة نفسها

---

دليل الفيديو والصوت في HTML

1. عنصر الفيديو <video>

الكود الأساسي:

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    متصفحك لا يدعم تشغيل الفيديو.
</video>
            

مثال عملي (فيديو تجريبي):

سمات عنصر الفيديو:

السمة	القيمة	الوصف
controls	controls	إظهار أدوات التحكم (تشغيل، إيقاف، صوت)
autoplay	autoplay	بدء التشغيل تلقائياً (غير موصى به)
loop	loop	تكرار الفيديو عند انتهائه
muted	muted	بدء الفيديو بدون صوت
poster	صورة.jpg	صورة تظهر قبل تشغيل الفيديو

2. عنصر الصوت <audio>

الكود الأساسي:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    متصفحك لا يدعم تشغيل الصوت.
</audio>
            

مثال عملي (صوت تجريبي):

3. تضمين وسائط من مواقع خارجية (مثل YouTube)

استخدام <iframe>:

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/كود_الفيديو" 
        frameborder="0" 
        allowfullscreen>
</iframe>
            

مثال عملي:

---

تمرين عملي من أجل إنشاء صفحة وصفة طعام

المطلوب:

أنشئ صفحة HTML لوصفة طعام تحتوي على:

1. عنوان الوصفة (باستخدام h1)
2. صورة للطبق النهائي
3. قائمة بالمقادير (قائمة غير مرتبة)
4. خطوات التحضير (قائمة مرتبة)
5. ملاحظات مهمة (قائمة وصف)
6. فيديو توضيحي (اختياري)

قالب لتبدأ منه:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>وصفة [اسم الوصفة]</title>
</head>
<body>
    <h1>[اسم الوصفة]</h1>
    
    <img src="مسار_الصورة.jpg" alt="صورة [اسم الوصفة]" width="400">
    
    <h2>المقادير:</h2>
    <ul>
        <li>مقادير الوصفة</li>
    </ul>
    
    <!-- أكمل الباقي -->
</body>
</html>
            

حل مقترح لوصفة سلطة فواكه:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>وصفة سلطة الفواكه</title>
</head>
<body>
    <h1>🍓 سلطة الفواكه الطازجة</h1>
    
    <img src="https://via.placeholder.com/400x300/ff6b6b/ffffff?text=سلطة+فواكه" 
         alt="سلطة فواكه ملونة" 
         width="400">
    
    <h2>المقادير:</h2>
    <ul>
        <li>تفاحتان</li>
        <li>موزتان</li>
        <li>برتقالة</li>
        <li>كوب فراولة</li>
        <li>ملعقة عسل</li>
        <li>عصير ليمونة</li>
    </ul>
    
    <h2>طريقة التحضير:</h2>
    <ol>
        <li>اغسل جميع الفواكه جيداً</li>
        <li>قشر التفاح والموز والبرتقال</li>
        <li>قطع جميع الفواكه لمكعبات متوسطة</li>
        <li>اخلط الفواكه في وعاء كبير</li>
        <li>أضف العسل وعصير الليمون</li>
        <li>قلب المكونات برفق</li>
        <li>قدم السلطة باردة</li>
    </ol>
    
    <h2>ملاحظات:</h2>
    <dl>
        <dt><strong>وقت التحضير:</strong></dt>
        <dd>15 دقيقة</dd>
        
        <dt><strong>التخزين:</strong></dt>
        <dd>في الثلاجة لمدة يومين</dd>
    </dl>
</body>
</html>
                

---

إختبار في لغة HTML الدرس الثاني

1. أي من هذه يستخدم لإنشاء قائمة مرقمة؟

أ) <ul>
ب) <ol> ✓
ج) <li>

2. ما هي السمة الإلزامية في عنصر الصورة <img>؟

أ) src و alt ✓
ب) width فقط
ج) title

3. كيف نضيف تحكمات التشغيل للفيديو؟

أ) <video src="..." controls> ✓
ب) <video src="..." autoplay>
ج) <video src="..." loop>

4. ماذا تفعل سمة alt في الصور؟

أ) تتحكم في حجم الصورة
ب) توفر نصاً بديلاً للصورة ✓
ج) تغير لون الصورة

---

ملخص الدرس الثاني في لغة HTML

• تعلمنا إنشاء القوائم بأنواعها (مرتبة، غير مرتبة، وصف)
• أضفنا الصور باستخدام <img> مع السمات المهمة
• تعرفنا على عناصر الوسائط <video> و <audio>
• عرفنا كيفية تضمين محتوى خارجي باستخدام <iframe>
• طبقنا المعرفة بإنشاء صفحة وصفة طعام متكاملة

ما تعلمناه في لغة HTML حتى الآن:

الدرس	المهارات
الدرس 0	مقدمة HTML، إعداد البيئة
الدرس 1	هيكل HTML، العناوين، الفقرات، الروابط
الدرس 2	القوائم، الصور، الوسائط

↑ العودة للأعلى | الدرس السابق | الدرس التالي: الجداول والنماذج

© 2026 دورة HTML للمبتدئين - الدرس 2