List Attributes
خصائص القوائم في لغة HTML
سوف تتعلم في هذا الدرس جميع الخصائص المتعلقة بالقوائم في لغة 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].
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
