الدرس: بنية المحتوى — HTML

نواتج التعلّم

• تعرّف مفهوم القوائم المرتبة وغير المرتبة.
• تميّز بين ul و ol و li.
• تنشئ قائمة تحتوي على عناصر متعددة.
• تستخدم الروابط التشعبية وخصائصها مثل href و target.
• تضيف الصور والفيديو في صفحة HTML باستخدام img و video.

القوائم في HTML

القوائم تُستخدم لعرض عناصر متعددة بطريقة مرتبة أو غير مرتبة.

<ol>
  <li>كرة القدم</li>
  <li>كرة السلة</li>
  <li>كرة اليد</li>
</ol>

<ul>
  <li>الصفحة الرئيسة</li>
  <li>التاريخ</li>
  <li>المعرض</li>
</ul>

الروابط التشعبية

يتم إنشاء الروابط باستخدام الوسم <a> مع الخاصية href.

<a href="https://www.moe.gov.sa/">اضغط هنا</a>

فتح الرابط في تبويب جديد

<a href="https://www.moe.gov.sa/" target="_blank">وزارة التعليم</a>

رابط بريد إلكتروني

<a href="mailto:info@example.com">أرسل بريدًا</a>

إضافة الصور

يتم استخدام الوسم <img> وهو وسم فارغ لا يحتوي على إغلاق.

<img src="images/pic.jpg" width="600" height="400" alt="وصف الصورة" />

إضافة الفيديو

باستخدام الوسم <video> مع خصائص التحكم.

<video src="videos/clip.mp4" width="600" controls poster="poster.jpg"></video>

قيّم نفسك

1. ما الوسم المستخدم للقائمة غير المرتبة؟
   • <ol>
   • <ul>
   • <li>
2. أي خاصية تستخدم لتحديد رابط الصفحة؟
   • href
   • src
   • alt