القائمة الرئيسية

الصفحات

تعديل المشاركة

القوائم في لغة HTML الدرس الرابع

Almonther Almolikey
(1)
تابعنا ليصلك كل جديد

القوائم المرتبة والغير مرتبة و الوصفية/التعريفية في لغة html


في هذا المقال سوف نناقش القوائم وانواعها وكيفية انشاءها وخواصها كما سنخوض في موضوع الروابط التشعبية links والذي اخذناه الدرس السابق

لنتحدث قليلا عن الروابط التشعبيه لاضافة رابط تشعبي نستخدم الوسم<a></a> حيث ان الخاصية href تأخذ قيمة وتكون عبارة عن رابط الصفحة او الموقع المراد الانتقال اليه ومابين وسم الفتح ووسم الاغلاق النص الذي يظهر للمستخدم واذا ضغط المستخدم على هذا النص سوف ينقله الى الرابط

ناقشنا الروابط التشعبية   في الدرس السابق يمكنك الاطلاع عليه

 
القوائم المرتبة والغير مرتبة و الوصفية او التعريفية في لغة HTML

القوائم في لغة html

القوائم هي عبارة عن مجموعة من المعلومات او البيانات التي نقوم بسردها على شكل نقاط .

يتم استخدام القوائم في لغة html  من اجل تقديم قائمة المعلومات بطربقة جيدة وذات دلالية و تسمح لنا ببناء نص جميل و جذاب وترتيب معلوماتنا بشكل افضل وإدراج عدة عناصر من خلال تجميعها تحت قسم مشترك (مثل ماهو في القوائم المتداخلة).

توفر لنا لغة html  ثلاثة أنواع من القوائم ولكل واحدة استخدامها

  1.  القوائم المرتبة ordered lists : هي عبارة عن مجموعة عناصر مرقمة و مرتبة ترتيب معين .
  2.  القوائم الغير مرتبة unordered lists : هي عبارة عن مجموعة عناصر بدون ترتيب ولا يهم ترتيبها.
  3.  قوائم التعريفات أو قوائم الوصف Description lists : هي عبارة عن قائمة تحتوي على المصطلح وتعريفه

امثلة عن كيفية ستظهر القوائم المكتوبة بلغة html:

امثلة لجميع انواع القوائـم في html

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

  1. الفقرات في لغة html
  2. الروابط في لغة html
  3. القوائم في لغة htm
القوائم الغير مرتبة :
  • لغة html
  • لغة c++
  • لغة assembly

 القوائم الوصفية:

موقع اليمن التقني :
موقع اليمن التقني هو موقع يقدم مجموعة من الدروس في لغات البرمجة والحاسوب
stack overflow 
هو موقع يضم الأسئلة المتعلقة بالحاسوب ويجيب عليها خبراء من انحاء العالم

القوائم المرتبة في لغة html Ordered List 

يتم تعريف قائمة مرتبة باستخدام الوسم <ol>..</ol> الان قمنا بإخبار المتصفح اننا انشأنا قائمة مرتبة ولكننا لم نضيف لها عناصر ومن اجل إضافة عناصر نقوم باستخدام الوسم <li> وهو اختصار ل list item حيث كل عنصر سنضعه داخل وسم <li>…</li> ويجب ان تكون جميع العناصر ما بين وسم الفتح <ol> ووسم الاغلاق </ol>

اليك المثال التالي:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title> القوائم المرتبة</title>
  </head>
  <body>
    <ol>
    <li >العنصر الاول</li>
    <li >العنصر الثاني</li>
    <li>العنصر الثالث</li>
    </ol>
  </body>
</html>

 حيث ستكون النتيجة كالتالي:

  1. العنصر الاول
  2. العنصر الثاني
  3. العنصر الثالث

يجب ان تلاحظ ان العنصر الأول سوف يعرض ومرقم بالرقم 1 و العنصر الثاني سوف يحمل الرقم 2 وهكذا

خصائص الوسم <ol> 

1-     الخاصية type

يمكن اسناد احدى القيم التالية للخاصية type:

  •  « 1 »: القيمة الافتراضية. ستظهر الأرقام أمام كل عنصر من عناصر القائمة ؛
  • « I »: ستظهر الأرقام الرومانية بالحروف الكبيرة أمام كل عنصر من عناصر القائمة ؛
  • « i »: ستظهر الأرقام الرومانية بالحروف الصغيرة أمام كل عنصر من عناصر القائمة ؛
  • « A »: ستظهر الأحرف الكبيرة أمام كل عنصر في القائمة ؛
  • « a »: ستظهر الأحرف الصغيرة أمام كل عنصر في القائمة.

2-     الخاصية start

هذه الخاصية تحدد من أي رقم سيبداء ترقيم عناصر القائمة ويجب ان تكون قيمته من نفس نوع الترقيم المستخدم

مثلا لو استخدمنا الأرقام واعطينا هذه الخاصية القيمة 100 بالتالي فان اول عنصر سوف يكون رقمه 100 والعنصر الثاني سوف يكون رقمه 101 وهكذا <ol type="1" start="100">

3-     الخاصية reversed

هذه الخاصية تقوم بعكس ترتيب الترقيم وسيكون العنصر الأول يحمل القيمة الاعلى ثم يبدأ بترتيب أرقام القائمة تنازلياً بفارق 1- .

قم بالتجربة من اجل ان تفهم اكثر أيضا قم باستخدام الخاصيتين start & reversed في نفس الوقت ولاحظ النتيجة

خصائص الوسم <li>  

هذا الوسم له خاصية واحدة وهي الخاصية value وهي تحدد الرقم الذي سوف يحمله العنصر حيث يمكن إعطاء لكل عنصر رقم فريد وغير متسلسل

سنكون قادرين على إضافة سمة value  لكل عنصر li لتحديد القيمة بالضبط. وفي حالة عدم وجود سمة value لبعض العناصر li ، فإن قيمة الترقيم الخاصة بهم ستزداد  بشكل طبيعي (أي إضافة 1 اتباعـاً الرمز الرقمي السابق).

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title> القوائم المرتبة</title>
  </head>
  <body>
    <ol type="1" start="5" reversed>
    <li value="4">العنصر الاول</li>
    <li value="10">العنصر الثاني</li>
    <li>العنصر الثالث</li>
    </ol>
  </body>
</html>

لاحظ أنه في حالة تحديد خاصية start في القائمة وتحديد خاصية value لعنصر القائمة الأول ، فإن خاصية value ، الأكثر دقة ، سوف تكون لها الأسبقية وتفرض قيمتها.

القوائم الغير مرتبة في html Unordered List :

القائمة الغير مرتبة ( Unordered List ) يقصد بها عرض مجموعة عناصر بدون الإهتمام ما إن كان يجب عرض عنصر قبل الآخر.

من اجل انشاء قائمة غير مرتبة نستخدم الوسم <ul>..</ul> ويتم كتابة عناصر القائمة قبل وسم الاغلاق باستخدام الوسم <li>

مثل ما تم شرحة سابقا في القوائم المرتبة يختلف فقط في ان الوسم سيكون <ul>

من اجل كتابة عناصر القائمة سوف نستخدم الوسم <li> من اجل كل عنصر من عناصر القائمة ويجب ان تكون قبل وسم الاغلاق </ul>

مثال 
<b>بعض لغات البرمجه </b>
<ul>
<li>لغة html</li>
<li>لغة c++</li>
<li>لغة c#</li>
</ul>

 

يمكننا أيضًا تغيير نوع التعداد النقطي في القائمة غير المرتبة باستخدام خصائص العنصر <ul> الخاصية type.
تغير نوع الرمز  من الدائرة disc الافتراضي إلى مربع square  ونضعها بين علامتي تنصيص مزدوجه

تغيير نوع الرمز الذي سيظهر قبل عنصر محدد في القائمة

في حال أردت تغيير نوع الرمز الذي سيظهر قبل عنصر محدد في القائمة يمكنك إضافة الخاصية type للعنصر (أي للوسم <li>) و تمرير النوع الذي تريده أن يبدأ به مثل تغير نوع الرمز  من الدائرة disc الافتراضي إلى مربع square  ونضعها بين علامتي تنصيص مزدوجه


في المثال التالي قمنا بتغيير نوع الرمز الذي سيظهر قبل العنصر الثاني فقط إلى circle.

مثال

  • <ul>
  • <li>html</li>
  • <li type="circle">CSS</li>
  • <li>javaScript</li>
  • </ul>

 

القوائم الوصفية او التعريفية في لغة HTML Description lists

القائمة الوصفية او االتعريفية Description list : هذا النوع من القوائم نادر الاستخدام ويستخدم من اجل سرد العنصر مع وصفه

من اجل انشاء قائمة وصفية نستخدم الوسم <dl>..</dl> و dl  هو اختصار ل description list

ومن اجل تعريف عناصر القائمة نستخدم

1-     وسم <dt> من اجل تعريف المصطلح او العنصر وهو اختصار ل description term

2-     وسم <dd> من اجل كتابة تعريف المصطلح

يتم إنشاء قائمة الوصف باستخدام عنصر <dl>. يتم استخدام عنصر <dl> مع عنصر <dt> الذي يحدد المصطلح ، وعنصر <dd> الذي يحدد تعريف المصطلح.
تعرض متصفحات الويب عادةً قوائم الوصف عن طريق وضع المصطلحات والتعريفات في أسطر منفصلة ، حيث تكون تعريفات المصطلح بمسافة بادئة قليلاً.

 القوائم الوصفية / التعريفية تستخدم ثلاثة وسوم:

  • <dl> </dl> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل قائمة وصف.

  • <dt> </dt> تستخدمه لإضافة مصطلح أو عنوان لما سيوضع تحته في القائمة.

  • <dd> </dd> تستخدمه لإضافة شرح للمصطلح أو خيار يندرج تحته.

ولنقم الآن بكتابة شيفرة القائمة السابقة

<dl>
      <dt> موقع اليمن التقني :</dt>
      <dd> موقع اليمن التقني هو موقع يقدم مجموعة من الدروس في لغات البرمجة والحاسوب </dd>
      <dt> stack overflow</dt>
      <dd> هو موقع يضم الأسئلة المتعلقة بالحاسوب ويجيب عليها خبراء من انحاء العالم </dd>
    </dl>

القوائم المتداخلة في لغة html  nested lists

هي عبارة عن قائمة داخل قائمة أخرى قد تكون قائمة مرتبة داخل قائمة غير مرتبة او العكس 

<body>
<ol>
<li> لغات برمجة تطبيقات الويب وصفحات الانترنت </li>
<ul>
<li> html </li>
<li> Css  </li>
<li> javaScript</li>
<li> PHP </li>
</ul>
<li> لغات برمجة تطبيقات الاندرويد </li>
<ul>
<li> java</li>
<li> kotlen </li>
<li> C#</li>
</ul>
<li> لغات برمجة تطبيقات سطح المكتب </li>
<ul>
<li> C++</li>
<li> C</li>
<li> python</li>
<li> C#</li>
</ul>
</ol>

</body>

ملاحظة

عناصر القائمة يمكن ان تكون نص او صور او روابط او وسم يمكن اضافته

مثلا لو اردنا انشاء روابط نكتب الكود التالي

مثال4


<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <ol>
     <li><a href="www.thedigitalyemen.com/">موقع اليمن التقني</a></li>
     <li><a href="https://t.me/thedigitalyemen">قناة التليجرام</a></li>
     <li> <a href="https://facebook.com/">صفحتنا على الفيسبوك</a> </li>
   </ol>
  </body>
</html>

ركز جيداً: يجب وضع القائمة داخل القسم body

<ol></ol> هذا الوسم يعمل على تحديد قائمة مرتبة كاملة

<ul></ul> هذا الوسم يعمل على تحديد/إنشاء قائمة غير مرتبة

<li></li> هذا الوسم يعمل على تحديد عنصر من عناصر القائمة هناك بعض ويستخدم سواء مع القائمة المرتبة او الغير مرتبة لان وظيفته ببساطة هي تعريف عنصر فقط

أخر المواضيع من قسم : HTML

تعليقات

تعليق واحد
إرسال تعليق

إرسال تعليق

البحث في هذه المدونة الإلكترونية

جدول المحتويات