الفرق بين المراجعتين ل"HTML/ul"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
(إضافة قسمين وأمثلة)
سطر 3: سطر 3:
 
قائمة غير مرتبة <code><nowiki><ul></nowiki></code> فيها ثلاثة عناصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>:<syntaxhighlight lang="html">
 
قائمة غير مرتبة <code><nowiki><ul></nowiki></code> فيها ثلاثة عناصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>:<syntaxhighlight lang="html">
 
<ul>
 
<ul>
−
    <li>first item</li>
+
  <li>العنصر الأول</li>
−
    <li>second item</li>
+
  <li>العنصر الثاني</li>
−
    <li>third item</li>
+
  <li>العنصر الثالث</li>
 
</ul>
 
</ul>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 53: سطر 55:
 
* <code>disc</code>
 
* <code>disc</code>
 
* <code>square</code>
 
* <code>square</code>
−
لكن هذه الخاصية أصبحت مهملةً أيضًا، لذا لا تستعملها وإنما استعمل خاصية <code>list-style-type</code> في CSS.
+
لكن هذه الخاصية أصبحت مهملةً أيضًا، لذا لا تستعملها وإنما استعمل خاصية <code>[[CSS/list-style-type|list-style-type]]</code> في CSS.
  
 
== ملاحظات الاستخدام ==
 
== ملاحظات الاستخدام ==
−
* يُستخدم العنصر <code><nowiki><ul></nowiki></code> لتجميع مجموعة من العناصر التي ليس لها ترتيب رقمي والتي لا يكون لترتيبها أهمية، وتوضع عادةً قبل العناصر نقط أو مربعات أو دوائر ...إلخ. ويمكن تعريف شكل تلك النقط باستخدام خاصية <code>list-style-type</code> في CSS.
+
* يُستخدم العنصر <code><nowiki><ul></nowiki></code> لتجميع مجموعة من العناصر التي ليس لها ترتيب رقمي والتي لا يكون لترتيبها أهمية، وتوضع عادةً قبل العناصر نقط أو مربعات أو دوائر ...إلخ. ويمكن تعريف شكل تلك النقط باستخدام خاصية <code>[[CSS/list-style-type|list-style-type]]</code> في CSS.
 
* لا يوجد حد أقصى لتشعّب القوائم (سواءً كانت قوائم مرتبة <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو غير مرتبة <code><nowiki><ul></nowiki></code>).
 
* لا يوجد حد أقصى لتشعّب القوائم (سواءً كانت قوائم مرتبة <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو غير مرتبة <code><nowiki><ul></nowiki></code>).
 
* عنصرا <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> و <code><nowiki><ul></nowiki></code> يمثلان قائمةً بالعناصر، ويختلفان عن بعضهما أنَّ ترتيب العناصر في <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> مهم. لذا إذا كنتَ في حيرةٍ من أمرك وأردتَ أن تعرف أيُّ العنصرين تختار، فجرِّب تغيير ترتيب العناصر، فإن تغيّر المعنى فيجب استخدام العنصر <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> وإن بقي على حاله فاستعمل <code><nowiki><ul></nowiki></code>.
 
* عنصرا <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> و <code><nowiki><ul></nowiki></code> يمثلان قائمةً بالعناصر، ويختلفان عن بعضهما أنَّ ترتيب العناصر في <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> مهم. لذا إذا كنتَ في حيرةٍ من أمرك وأردتَ أن تعرف أيُّ العنصرين تختار، فجرِّب تغيير ترتيب العناصر، فإن تغيّر المعنى فيجب استخدام العنصر <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> وإن بقي على حاله فاستعمل <code><nowiki><ul></nowiki></code>.
  
 
== أمثلة ==
 
== أمثلة ==
−
مثال عن قائمة غير مرتبة متشعبة، مع ترك وضع وسم الإغلاق للعنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>: <syntaxhighlight lang="html">
+
مثال عن قائمة غير مرتبة متشعبة، لاحظ مكان وسم الإغلاق للعنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>: <syntaxhighlight lang="html">
 
<ul>
 
<ul>
−
   <li>first item</li>
+
   <li>العنصر الأول</li>
−
   <li>second item   
+
   <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق -->  
−
  <!-- Look, the closing </li> tag is not placed here! -->
 
 
     <ul>
 
     <ul>
−
       <li>second item first subitem</li>
+
       <li>العنصر الفرعي الأول</li>
−
       <li>second item second subitem
+
       <li>العنصر الفرعي الثاني  <!-- </li> لا يوجد وسم إغلاق -->  
−
      <!-- Same for the second nested unordered list! -->
 
 
         <ul>
 
         <ul>
−
           <li>second item second subitem first sub-subitem</li>
+
           <li>العنصر الفرعي الأول في القائمة الفرعية</li>
−
           <li>second item second subitem second sub-subitem</li>
+
           <li>العنصر الفرعي الثاني في القائمة الفرعية</li>
−
           <li>second item second subitem third sub-subitem</li>
+
           <li>العنصر الفرعي الثالث في القائمة الفرعية</li>
 
         </ul>
 
         </ul>
−
       </li> <!-- Closing </li> tag for the li that
+
       </li>   <!-- </li> هنا وسم الإغلاق -->
−
                  contains the third unordered list -->
+
       <li>العنصر الفرعي الثالث</li>
−
       <li>second item third subitem</li>
 
 
     </ul>
 
     </ul>
−
  <!-- Here is the closing </li> tag -->
+
    <!-- </li> هنا وسم الإغلاق -->
 
   </li>
 
   </li>
−
   <li>third item</li>
+
   <li>العنصر الثالث</li>
 
</ul>
 
</ul>
 
</syntaxhighlight>مثال عن قائمة غير مرتبة يتشعب داخلها قائمة مرتبة <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code>:<syntaxhighlight lang="html">
 
</syntaxhighlight>مثال عن قائمة غير مرتبة يتشعب داخلها قائمة مرتبة <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code>:<syntaxhighlight lang="html">
 
<ul>
 
<ul>
−
   <li>first item</li>
+
   <li>العنصر الأول</li>
−
   <li>second item
+
   <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق -->  
−
  <!-- Look, the closing </li> tag is not placed here! -->
 
 
     <ol>
 
     <ol>
−
       <li>second item first subitem</li>
+
       <li>العنصر الفرعي الأول</li>
−
       <li>second item second subitem</li>
+
       <li>العنصر الفرعي الثاني</li>
−
       <li>second item third subitem</li>
+
       <li>العنصر الفرعي الثالث</li>
 
     </ol>
 
     </ol>
−
  <!-- Here is the closing </li> tag -->
+
    <!-- </li> هنا وسم الإغلاق -->
 
   </li>
 
   </li>
−
   <li>third item</li>
+
   <li>العنصر الثالث</li>
 
</ul>
 
</ul>
 +
</syntaxhighlight>
 +
==التنسيق الافتراضي==
 +
تعرض أغلبية المتصفحات العنصر <code><nowiki><ul></nowiki></code> مع ضبط قيمة الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، وشكل الإشارة الخاصة بالقائمة <code>[[CSS/list-style-type|list-style-type]]</code> إلى <code>disc</code>، مع ضبط الهوامش (<code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> إلى <code>1em</code>، و <code>[[CSS/margin-left|margin-left]]</code> و <code>[[CSS/margin-right|margin-right]]</code> إلى <code>0</code>)، والحاشية اليسرى <code>[[CSS/padding-left|padding-left]]</code> (أو اليمنى <code>[[CSS/padding-right|padding-right]]</code> إذا كان اتجاه النص من اليمين إلى اليسار) إلى <code>40px</code>:<syntaxhighlight lang="css">
 +
ul {
 +
  display: block;
 +
  list-style-type: disc;
 +
  margin-top: 1em;
 +
  margin-bottom: 1em;
 +
  margin-left: 0;
 +
  margin-right: 0;
 +
  padding-left: 40px;
 +
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==

مراجعة 09:38، 18 فبراير 2018

يُمثِّل العنصر <ul> قائمةً غير مرتبة من العناصر، التي تُعرَض على شكل قائمة منقطة عادةً.

قائمة غير مرتبة <ul> فيها ثلاثة عناصر <li>:

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ul>

بطاقة العنصر

تصنيفات المحتوى محتوى تنظيمي.
المحتوى المسموح عنصر <li> واحد أو أكثر، ويمكن لهذا العنصر أن يحتوي أيضًا على قوائم <ol> أو <ul> متشعبة داخله.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM HTMLUListElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

compact

هذه الخاصية المنطقية (boolean) تُحدِّد إذا كانت القائمة ستُعرَض متراصةً على بعضها، لكن تفسير هذه الخاصية يختلف حسب المتصفح ولا تعمل بشكل متناسق في جميع المتصفحات.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة في HTML5، ولا يجب استخدامها، وإنما يمكن تنسيق العنصر <ul> عبر أنماط CSS، ونستطيع تطبيق نفس تأثير هذه الخاصية إذا ضبطنا قيمة line-height إلى 80%.

type

تستعمل هذه الخاصية لتحديد نوع النقط التي تظهر قبل عناصر القائمة وهي:

  • circle
  • disc
  • square

لكن هذه الخاصية أصبحت مهملةً أيضًا، لذا لا تستعملها وإنما استعمل خاصية list-style-type في CSS.

ملاحظات الاستخدام

  • يُستخدم العنصر <ul> لتجميع مجموعة من العناصر التي ليس لها ترتيب رقمي والتي لا يكون لترتيبها أهمية، وتوضع عادةً قبل العناصر نقط أو مربعات أو دوائر ...إلخ. ويمكن تعريف شكل تلك النقط باستخدام خاصية list-style-type في CSS.
  • لا يوجد حد أقصى لتشعّب القوائم (سواءً كانت قوائم مرتبة <ol> أو غير مرتبة <ul>).
  • عنصرا <ol> و <ul> يمثلان قائمةً بالعناصر، ويختلفان عن بعضهما أنَّ ترتيب العناصر في <ol> مهم. لذا إذا كنتَ في حيرةٍ من أمرك وأردتَ أن تعرف أيُّ العنصرين تختار، فجرِّب تغيير ترتيب العناصر، فإن تغيّر المعنى فيجب استخدام العنصر <ol> وإن بقي على حاله فاستعمل <ul>.

أمثلة

مثال عن قائمة غير مرتبة متشعبة، لاحظ مكان وسم الإغلاق للعنصر <li>: 

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق --> 
    <ul>
      <li>العنصر الفرعي الأول</li>
      <li>العنصر الفرعي الثاني   <!-- </li> لا يوجد وسم إغلاق --> 
        <ul>
          <li>العنصر الفرعي الأول في القائمة الفرعية</li>
          <li>العنصر الفرعي الثاني في القائمة الفرعية</li>
          <li>العنصر الفرعي الثالث في القائمة الفرعية</li>
        </ul>
      </li>   <!-- </li> هنا وسم الإغلاق -->
      <li>العنصر الفرعي الثالث</li>
    </ul>
    <!-- </li> هنا وسم الإغلاق -->
  </li>
  <li>العنصر الثالث</li>
</ul>

مثال عن قائمة غير مرتبة يتشعب داخلها قائمة مرتبة <ol>:

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق --> 
    <ol>
      <li>العنصر الفرعي الأول</li>
      <li>العنصر الفرعي الثاني</li>
      <li>العنصر الفرعي الثالث</li>
    </ol>
    <!-- </li> هنا وسم الإغلاق -->
  </li>
  <li>العنصر الثالث</li>
</ul>

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <ul> مع ضبط قيمة الخاصية display إلى block، وشكل الإشارة الخاصة بالقائمة list-style-type إلى disc، مع ضبط الهوامش (margin-top و margin-bottom إلى 1em، و margin-left و margin-right إلى 0)، والحاشية اليسرى padding-left (أو اليمنى padding-right إذا كان اتجاه النص من اليمين إلى اليسار) إلى 40px:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

مصادر ومواصفات

مجلوبة من "https://wiki.hsoub.com/index.php?title=HTML/ul&oldid=2603"