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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1')
ط
 
(مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:العنصر <code><dl></code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:العنصر <code><dl></code>}}</noinclude>
 
يُمثِّل العنصر <code><nowiki><dl></nowiki></code> قائمة وصف (description list)، وهذا العنصر يتضمن مجموعةً من المصطلحات وشرحها. يستخدم هذا العنصر عادةً في القواميس أو شرح المصطلحات، أو لعرض البيانات الوصفية (قائمة من أزواج «مفاتيح-قيم»).
 
يُمثِّل العنصر <code><nowiki><dl></nowiki></code> قائمة وصف (description list)، وهذا العنصر يتضمن مجموعةً من المصطلحات وشرحها. يستخدم هذا العنصر عادةً في القواميس أو شرح المصطلحات، أو لعرض البيانات الوصفية (قائمة من أزواج «مفاتيح-قيم»).
 +
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 39: سطر 41:
 
لا تستعمل هذا العنصر (ولا عنصر <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>) لمحاذاة بعض عناصر الصفحة، وعلى الرغم من أنَّ ذلك قابل للتطبيق، لكن لا ينصح بذلك وسيؤدي ذلك إلى فقدان معنى هذا العنصر.
 
لا تستعمل هذا العنصر (ولا عنصر <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>) لمحاذاة بعض عناصر الصفحة، وعلى الرغم من أنَّ ذلك قابل للتطبيق، لكن لا ينصح بذلك وسيؤدي ذلك إلى فقدان معنى هذا العنصر.
  
−
لتغيير محاذاة محتوى عنصر <code><nowiki><dl></nowiki></code> فاستخدم خاصية <code>margin</code> في CSS.
+
لتغيير محاذاة محتوى عنصر <code><nowiki><dl></nowiki></code> فاستخدم خاصية <code>margin</code> في لغة [[CSS]].
  
 
== أمثلة ==
 
== أمثلة ==
سطر 46: سطر 48:
 
هذا مثالٌ عن قائمة وصف فيها مصطلح وحيد وشرحٌ عنه:<syntaxhighlight lang="html">
 
هذا مثالٌ عن قائمة وصف فيها مصطلح وحيد وشرحٌ عنه:<syntaxhighlight lang="html">
 
<dl>
 
<dl>
−
   <dt>Firefox</dt>
+
   <dt>موسوعة حسوب</dt>
 
   <dd>
 
   <dd>
−
     A free, open source, cross-platform,
+
     تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب بتصفح محتواها واطلع على دليل المساهمين.
−
    graphical web browser developed by the
 
−
    Mozilla Corporation and hundreds of
 
−
    volunteers.
 
 
   </dd>
 
   </dd>
−
 
+
   <!-- تعاريف أخرى -->
−
   <!-- Other terms and descriptions -->
 
 
</dl>
 
</dl>
 
</syntaxhighlight>
 
</syntaxhighlight>
سطر 61: سطر 59:
 
هذا مثالٌ عن قائمة وصف فيها عدِّة مصطلحات وشرحٌ وحيدٌ عنها:<syntaxhighlight lang="html">
 
هذا مثالٌ عن قائمة وصف فيها عدِّة مصطلحات وشرحٌ وحيدٌ عنها:<syntaxhighlight lang="html">
 
<dl>
 
<dl>
−
   <dt>Firefox</dt>
+
   <dt>موسوعة حسوب</dt>
−
   <dt>Mozilla Firefox</dt>
+
   <dt>Hsoub Wiki</dt>
−
  <dt>Fx</dt>
 
 
   <dd>
 
   <dd>
−
     A free, open source, cross-platform,
+
     تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب بتصفح محتواها واطلع على دليل المساهمين.
−
    graphical web browser developed by the
 
−
    Mozilla Corporation and hundreds of
 
−
    volunteers.
 
 
   </dd>
 
   </dd>
 +
  <!-- تعاريف أخرى -->
 +
</dl>
  
−
  <!-- Other terms and descriptions -->
 
−
</dl>
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
سطر 78: سطر 72:
 
هذا مثالٌ عن قائمة وصف فيها مصطلحٌ وحيد وأكثر من شرح عنه:<syntaxhighlight lang="html">
 
هذا مثالٌ عن قائمة وصف فيها مصطلحٌ وحيد وأكثر من شرح عنه:<syntaxhighlight lang="html">
 
<dl>
 
<dl>
−
   <dt>Firefox</dt>
+
   <dt>موسوعة حسوب</dt>
 
   <dd>
 
   <dd>
−
     A free, open source, cross-platform,
+
     تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب بتصفح محتواها واطلع على دليل المساهمين.
−
    graphical web browser developed by the
 
−
    Mozilla Corporation and hundreds of
 
−
    volunteers.
 
 
   </dd>
 
   </dd>
 
   <dd>
 
   <dd>
−
     The Red Panda also known as the Lesser
+
     موسوعة حسوب هي جزءٌ من البرنامج التعليمي الذي تقوده شركة حسوب.
−
    Panda, Wah, Bear Cat or Firefox, is a
 
−
    mostly herbivorous mammal, slightly larger
 
−
    than a domestic cat (60 cm long).
 
 
   </dd>
 
   </dd>
−
 
+
   <!-- تعاريف أخرى -->
−
   <!-- Other terms and descriptions -->
 
 
</dl>
 
</dl>
 
</syntaxhighlight>
 
</syntaxhighlight>
سطر 99: سطر 86:
 
هذا مثالٌ عن قائمة وصف فيها أكثر من مصطلح ويرتبط بكل مصطلح شرحٌ خاصٌ به:<syntaxhighlight lang="html">
 
هذا مثالٌ عن قائمة وصف فيها أكثر من مصطلح ويرتبط بكل مصطلح شرحٌ خاصٌ به:<syntaxhighlight lang="html">
 
<dl>
 
<dl>
−
   <dt>Coffee</dt>
+
   <dt>القهوة</dt>
−
   <dd>Black hot drink</dd>
+
   <dd>مشروب ساخن أسود</dd>
−
   <dt>Milk</dt>
+
    
−
  <dd>White cold drink</dd>
+
   <dt>الحليب</dt>
−
   <dt>Iced Coffee</dt>
+
   <dd>مشروب بارد أبيض</dd>
−
   <dd>Black cold drink</dd>
 
  
−
   <!-- Other terms and descriptions -->
+
  <dt>اليانسون</dt>
 +
  <dd>مشروب ساخن أخضر</dd>
 +
 
 +
   <!-- تعاريف أخرى -->
 
</dl>
 
</dl>
 
</syntaxhighlight>قد تستفيد أحيانًا من تعريف فاصل بين المصطلح وشرحه، وذلك عبر CSS، مثلًا:<syntaxhighlight lang="css">
 
</syntaxhighlight>قد تستفيد أحيانًا من تعريف فاصل بين المصطلح وشرحه، وذلك عبر CSS، مثلًا:<syntaxhighlight lang="css">
سطر 118: سطر 107:
 
<dl>
 
<dl>
 
   <div>
 
   <div>
−
    <dt>Coffee</dt>
+
    <dt>القهوة</dt>
−
    <dd>Black hot drink</dd>
+
    <dd>مشروب ساخن أسود</dd>
 
   </div>
 
   </div>
 +
 
 
   <div>
 
   <div>
−
    <dt>Milk</dt>
+
    <dt>الحليب</dt>
−
    <dd>White cold drink</dd>
+
    <dd>مشروب بارد أبيض</dd>
 
   </div>
 
   </div>
 +
 
   <div>
 
   <div>
−
    <dt>Iced Coffee</dt>
+
    <dt>اليانسون</dt>
−
    <dd>Black cold drink</dd>
+
    <dd>مشروب ساخن أخضر</dd>
 
   </div>
 
   </div>
 +
 
 +
    <!-- تعاريف أخرى -->
 +
</dl>
 +
</syntaxhighlight>
  
−
  <!-- Other terms and descriptions -->
+
== التنسيق الافتراضي ==
−
</dl>
+
تعرض أغلبية المتصفحات العنصر <code><nowiki><dl></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</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>:<syntaxhighlight lang="css">
 +
dl {
 +
  display: block;
 +
  margin-top: 1em;
 +
  margin-bottom: 1em;
 +
  margin-left: 0;
 +
  margin-right: 0;
 +
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==
 
*معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element HTML Living Standard].
 
*معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element HTML Living Standard].

المراجعة الحالية بتاريخ 16:08، 7 أكتوبر 2022

يُمثِّل العنصر <dl> قائمة وصف (description list)، وهذا العنصر يتضمن مجموعةً من المصطلحات وشرحها. يستخدم هذا العنصر عادةً في القواميس أو شرح المصطلحات، أو لعرض البيانات الوصفية (قائمة من أزواج «مفاتيح-قيم»).

بطاقة العنصر

تصنيفات المحتوى لا يوجد.
المحتوى المسموح مجموعة أو أكثر من عناصر <dt> متبوعة بعنصر <dd> واحد أو أكثر؛ ويُسمَح باستخدام العنصر <div> فيه.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM HTMLDListElement

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

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

الخاصيات

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

ملاحظات

لا تستعمل هذا العنصر (ولا عنصر <ul>) لمحاذاة بعض عناصر الصفحة، وعلى الرغم من أنَّ ذلك قابل للتطبيق، لكن لا ينصح بذلك وسيؤدي ذلك إلى فقدان معنى هذا العنصر.

لتغيير محاذاة محتوى عنصر <dl> فاستخدم خاصية margin في لغة CSS.

أمثلة

مصطلح وحيد وشرحٌ عنه

هذا مثالٌ عن قائمة وصف فيها مصطلح وحيد وشرحٌ عنه:

<dl>
  <dt>موسوعة حسوب</dt>
  <dd>
    تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب بتصفح محتواها واطلع على دليل المساهمين.
  </dd>
  <!-- تعاريف أخرى -->
</dl>

عدِّة مصطلحات وشرحٌ وحيدٌ عنها

هذا مثالٌ عن قائمة وصف فيها عدِّة مصطلحات وشرحٌ وحيدٌ عنها:

<dl>
  <dt>موسوعة حسوب</dt>
  <dt>Hsoub Wiki</dt>
  <dd>
    تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب بتصفح محتواها واطلع على دليل المساهمين.
  </dd>
  <!-- تعاريف أخرى -->
</dl>

مصطلحٌ وحيد وأكثر من شرح عنه

هذا مثالٌ عن قائمة وصف فيها مصطلحٌ وحيد وأكثر من شرح عنه:

<dl>
  <dt>موسوعة حسوب</dt>
  <dd>
    تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب بتصفح محتواها واطلع على دليل المساهمين.
  </dd>
  <dd>
    موسوعة حسوب هي جزءٌ من البرنامج التعليمي الذي تقوده شركة حسوب.
  </dd>
  <!-- تعاريف أخرى -->
</dl>

أكثر من مصطلح ويرتبط بكل مصطلح شرحٌ خاصٌ

هذا مثالٌ عن قائمة وصف فيها أكثر من مصطلح ويرتبط بكل مصطلح شرحٌ خاصٌ به:

<dl>
  <dt>القهوة</dt>
  <dd>مشروب ساخن أسود</dd>
  
  <dt>الحليب</dt>
  <dd>مشروب بارد أبيض</dd>

  <dt>اليانسون</dt>
  <dd>مشروب ساخن أخضر</dd>
  
  <!-- تعاريف أخرى -->
</dl>

قد تستفيد أحيانًا من تعريف فاصل بين المصطلح وشرحه، وذلك عبر CSS، مثلًا:

dt::after {
  content: ": ";
}

وضع كل مصطلح وشرحه ضمن عنصر <div>

أما هذا المثال فهو عن قائمة الوصف السابقة لكن مع وضع كل مصطلح وشرحه ضمن عنصر <div>:

<dl>
  <div>
    <dt>القهوة</dt>
    <dd>مشروب ساخن أسود</dd>
  </div>
  
  <div>
    <dt>الحليب</dt>
    <dd>مشروب بارد أبيض</dd>
  </div>

  <div>
    <dt>اليانسون</dt>
    <dd>مشروب ساخن أخضر</dd>
  </div>
  
    <!-- تعاريف أخرى -->
</dl>

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

تعرض أغلبية المتصفحات العنصر <dl> مع ضبط الخاصية display إلى block، والهوامش العلوية (margin-top) والسفلية (margin-bottom) إلى 1em، والهامش اليساري (margin-left) واليميني (margin-right) إلى 0:

dl {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

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

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