HTML

List Attributes
خصائص القوائم في لغة HTML

سوف تتعلم في هذا الدرس جميع الخصائص المتعلقة بالقوائم في لغة HTML، وسبب استخدام كل خاصية.

التاريخ

31 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

3174

المواضيع

12
الشروحات chevron_left List Attributes chevron_left HTML

Lists Attributes in HTML
خصائص القوائم في لغة HTML

</> Lists attributes in HTML
خصائص القوائم في لغة HTML

تستخدم lists attributes خصائص القوائم في لغة HTML، للتحكم في ترتيب وترقيم وشكل القوائم، وأهم خصائص القوائم في لغة HTML هي:

  • type تستخدم هذه الخاصية مع القائمة المرقمة لتغيير الأرقام إلى حروف أو إلى ترقيم روماني، كما تستخدم مع القوائم غير المرقمة لتغيير شكل الترقيم وجعله دوائر أو مربعات أو نقط أو بدون علامات.
  • start تستخدم مع الترقيم ليبدأ العد من رقم معين، فليس من الضروري أن يبدأ العد من رقم واحد أو من حرف A.
  • value تستخدم لتعيين قيمة أو ترقيم مختلف تماماً عن الترتيب التسلسلي للقائمة.
  • reversed تستخدم لتعكس الترقيم الافتراضي وجعله من الأكبر إلى الأصغر، حيث يكون الترقيم في الحالة الافتراضية من الأصغر إلى الأكبر.

</> Type attribute with order list in HTML
خاصية type مع القوائم المرقمة في لغة HTML

القيم التي يمكن تعيينها داخل خاصية type مع القوائم المرقمة هي:

  • a حرف صغير يعني أن الترقيم يكون أبجدي بحروف إنجليزية صغيرة.
  • A حرف كبير يعني أن الترقيم يكون أبجدي بحروف إنجليزية كبيرة.
  • i حرف صغير يعني أن الترقيم يكون بالحروف الرومانية بحروف صغيرة.
  • I حرف كبير يعني أن الترقيم يكون بالحروف الرومانية بحروف كبيرة.
a lower case value with ordered list

مثال على القيمة ["a"] مع الخاصية type داخل القائمة المرقمة.

<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>
A uppercase case value with ordered list

مثال على القيمة ["A"] مع الخاصية type داخل القائمة المرقمة.

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>
i lower case value with ordered list

مثال على القيمة ["i"] مع الخاصية type داخل القائمة المرقمة، حيث نلاحظ أن الترقيم أصبح على هيئة أرقام رومانية بحروف صغيرة.

<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>
I uppercase case value with ordered list

مثال على القيمة ["I"] مع الخاصية type داخل القائمة المرقمة، حيث نلاحظ أن الترقيم أصبح على هيئة أرقام رومانية بحروف كبيرة.

<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>
ملاحظة
  • خاصية type داخل قوائم HTML غير مدعومة في الإصدار الأخير من لغة HTML الذي هو HTML5.
  • في حالة وَضع القيمة ["none"] داخل ordered list القائمة المُرتبة سوفَ تَكونُ القيمة داخل القائمة المُرتبة هي الوضع الافتراضي والذي هو الترتيب الرقمي.
  • عن طريق لغة CSS تَستطيع التحكم في بادئة عناصر قوائم HTML، وتغييرها بكل سهولة.

</> Type attribute with unordered list in HTML
خاصية type مع القوائم غير المرقمة في لغة HTML

القيم التي يمكن تعيينها داخل خاصية type مع القوائم غير المرقمة هي:

  • disc بحروف صغيرة يعني أن التعداد يكون كما هو في الوضع الافتراضي الذي يكون على شكل نقط دائرية سوداء.
  • circle بحروف صغيرة يعني أن التعداد يكون على شكل نقاط دائرية بيضاء ولها إطار أسود صغير.
  • square بحروف صغيرة يعني أن التعداد يكون على شكل مربعات سوداء.
  • none تلغي هذه القيمة علامة التعداد وتكون القائمة عندها بدون علامات.
circle value with unordered list

مثال على القيمة ["circle"] مع الخاصية type داخل القائمة غير المرقمة.

<ul type="circle">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>
square value with unordered list

مثال على القيمة ["square"] مع الخاصية type داخل القائمة غير المرقمة.

<ul type="square">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>
"Attribute type value "none

مثال على القيمة ["none"] مع الخاصية type داخل القائمة غير المرقمة.

<ul type="none">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

</> Ordered list attributes in HTML
خصائص القوائم المرقمة في لغة HTML

يمكن التحكم في شكل الترقيم في ordered list القائمة المرقمة في لغة HTML، عن طريق مجموعة خصائص، هي:

  • start تُستخدم هذه الخاصية لجعل الترقيم يبدأ من رقم محدد، بدلاً من الترقيم الافتراضي الذي يبدأ بالرقم واحد 1.
  • value تقوم هذه الخاصية بتعيين أي قيمة داخل أي عنصر من عناصر القائمة واستثنائه من ترتيب (ترقيم) القائمة.
  • reversed تُستخدم هذه الخاصية في عكس الترتيب من تصاعدي إلى تنازلي، أي جعله يبدأ من الرقم الكبير إلى الرقم الصغير.
Start attribute

مثال على الخاصية start داخل القائمة المُرتبة.

<ol start="20">
Value attribute

مثال على الخاصية value داخل القائمة المُرتبة.

<li value="30">
Reversed attribute

مثال على الخاصية reversed داخل القائمة المُرتبة.

<ol reversed>
ملاحظة
  • عن طريق لغة CSS يُمكنكَ التحكم بشكل كبير في ordered list القائمة المُرتبة والاستغناء عن الخصائص السابقة.
  • تَذكر أن value القيمة مع خاصية start وخاصية value يَجبُ أن تَكونَ رقم صحيح، وليس رقم به كُسور عشرية أو فواصل.
  • خاصية reversed غير مدعومة في المتصفحات [IE, FIREFOX ,OPERA].
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.