اكمالاً لسلسلتنا المفصلة لتعلم html بالعربية سنقدم لكم اليوم درسنا عن كيفية اضافة عناصر قائمة بكل انواعها المنقطة والمرتبة وبالاضافة الى القائمة التعريفية وتغيير شكل القائمة.
يجب ان تحرص على فهم وتعلم جزئية القوائم التي تعد من الاساسيات المهمة لتعلم لغة html واتقانها واحترافها بشكل جيد فعندما تبدأ بالعمل في المشاريع الكبيرة في تصميم وانشاء مواقع باستخدام لغات البرمجة الاساسية لبرمجة وتصميم المواقع كلغة html ستعرف كم فائدة القوائم في تصميم الاجزاء المختلفة من المشروع.
الان دعنا نبدأ في موضوعنا الشيق عن القوائم في html وكيفية اضافتها لصفحات ومستندات html.
ما هي قوائم html؟
اعتقد انك تعرف ما هي القائمة وانك قد رأيت مواقع تظهر مجموعة من المعلومات في هيئة نقاط او ارقام مرتبة ولكي تتضح لك الصورة اكثر عن القوائم اليك هذا المثال عن انواع القوائم في html:
- <ul> قائمة غير مرتبة
- <ol> قائمة مرتبة (1.2.3.4..)
- <dl> قائمة تعريفية للمصطلحات
هذا مارايته الان احد انواع القوائم التي ستستعملها كثيراً اثناء عملك في لغة html وهي القائمة غير المرتبة <ul>.
في الاساس يوجد عنصرين شائعين للقوائم وهما عنصر <ol> للقائمة المرتبة ordered list التي ترتب عناصرها بالارقام وبطريقة منظمة وهناك النوع الاخر وهو عنصر <ul> للقوائم غير المرتبة او المنقطة unordered list.
هذين العنصرين هم الاكثر استخداماً من قبل المطورين ولكن يوجد نوع ثالث من القوائم وهي القائمة التعريفية <dl> التي هي ماخوذة من اول حرف من كلمات description list وهي عبارة عن مجموعة من التعريفات او المصطلحات التي نريد توضيحها وعرضها على صفحات الويب.
كل عنصر من عناصر القائمة قد يحتوي على عنصر او اكثر من الابناء وهم وسوم <li> التي تمثل العناصر او المعلومات الظاهرة في القائمة.
القائمة غير المرتبة ( HTML Unordered list)
تعبر عن مجموعة من النصوص او البيانات الي لا تهمنا ترتيبها ونستخدم العنصر <ul> لاخبارالمتصفح بانها قائمة غير مرتبة.
لاعطاء القائمة المحتويات والعناصر اللازمة نستخدم عنصر <li> لتحديد العناصر الغير مرتبة وبامكاننا اضافة اي عدد من هذه العناصر داخل القائمة التي ستظهر بجانبها نقطة بلون اسود صغيرة توضح انها عنصر قائمة غير مرتبة.
لا تنسى ان لكل عنصر من هؤلاء له وسم فتح واغلاق مثل <ul> </u> والعنصر <li> </li>.
اليك مثال اخر على القائمة غير المرتبة باكواد html:
<ul>
<li>فاكهة</li>
<li>خضروات</li>
<li>لحوم</li>
</ul>
القائمة المرتبة بالارقام (HTML Ordered list)
هي القائمة التي ترتب عناصرها واحد تلو الاخر وبالارقام ونستخدم العنصر <ol> لكتابة محتويات القائمة.
ونحدد ايضاً عناصر القائمة بالوسم <li> وستظهر العناصر واحد تلو الاخر بجانبها ارقام وهذا مثال عليها باكواد html.
<ol>
<li>فاكهة</li>
<li>خضروات</li>
<li>لحوم</li>
</ol>
الخاصية type
تحدد هذه الخاصية المتوفرة في قوائم المرتبة كيفية ظهور شطل الترتيب فيمكنك تغيير الارقام التي هي الافتراضية الى نوع اخر من طرق ترتيب العناصر كالارقام الرومانية والحروف الصغيرة وغيرها ساقدم لك جدولا بكل قيمة ونتيجتها لكن اليك الان مثالاً على قائمة مرتبة بالحروف الرومانية الصغيرة:
<ol type="i">
<li>فاكهة</li>
<li>خضروات</li>
<li>لحوم</li>
</ol>
جدول قيم الخاصية type
| القائمة | شرح النتيجة |
|---|---|
| "1" | اظهار القائمة مرتبة بارقام وهي القيمة الافتراضية للمتصفح |
| "a" | ترتيب القائمة بشكل حروف صغيرة |
| "A" | ترتيب القائمة بشكل حروف كبيرة |
| "i" | ترتيب القائمة بشكل ارقام رومانية صغيرة مثل المثال السابق |
| "I" | ترتيب القائمة بشكل ارقام رومانية كبيرة |
القائمة التعريفية (HTML Description list)
عندما تكون لديك قائمة بمصطلحات ما تستطيع عرضها باستخدام هذا النوع من القوائم ونستخدم فيها عنصر <dl> ونكتب بها محتويات القائمة.
تختلف هذا النوع عن البقية في تحديد العناصر يجب اولاً ان تعرف انه يوجد مصطلح ومفهوم لكي تضيف عنصر لهذه القائمة.
لكي تحدد المصطلح نستعمل الوسم الصغير <dt> ولكي تحدد له مفهوم نستعمل اخاه الوسم <dd> واليك مثال عليها لتتضح لك الفكرة.
<dl>
<dt>html</dt>
<dd>- لغة ترميز صفحات الويب</dd>
<dt>css</dt>
<dd>- لغة تصميم وتنسيق صفحات الويب</dd>
<dt>js</dt>
<dd>- اضافة الحيوية لصفحات الويب</dd>
</dl>
وهكذا قد وصلنا لنهاية درسنا اليوم عن القوائم وكل انواعها في لغة html.
انتظرونا في درس جديد من السلسة.
