وسم : list tag

في عالم تطوير الويب، تلعب علامات القوائم دورًا أساسيًا في تنظيم وتصميم المحتوى بشكل منظم وسهل الفهم. تساعد هذه العلامات في ترتيب البيانات والمعلومات بطريقة تجعل تجربة المستخدم أكثر سلاسة. في هذا الدرس، سنستكشف علامات القوائم الرئيسية في لغة ترميز الويب HTML وكيفية استخدامها بشكل فعّال.

وسم : list tag

توجد علامة <ul> في لغة ترميز الويب HTML، وتستخدم لإنشاء قوائم غير مرتبة. هذا يعني أن العناصر داخل هذه القائمة لا تظهر بترتيب محدد، وإنما تظهر كقائمة تحتوي على عناصر فرعية.

الاستخدامات الرئيسية لوسم <ul> كما يلي:

انشاء قائمة نقطية غير مرقمة:

يمكن استخدام <ul> لإنشاء قائمة غير مرتبة.

يتم تعريف العناصر داخل القائمة باستخدام <li> (عنصر القائمة)، وستظهر هذه العناصر كنقاط أو رموز منفصلة، دون ترتيب محدد.

مثال:

<ul>
  <li>عنصر 1</li>
  <li>عنصر 2</li>
  <li>عنصر 3</li>
</ul>

ستعرض الشاشة:

عنصر 1

عنصر 2

عنصر 3

تضمين قوائم داخلية:

يمكنك أيضًا تضمين قوائم داخلية داخل عناصر القائمة الغير مرتبة. على سبيل المثال، يمكنك وضع قائمة غير مرتبة داخل عنصر آخر في قائمة غير مرتبة.

مثال:

<ul>

  <li>عنصر 1</li>

  <li>عنصر 2

    <ul>

      <li>فرعي 1</li>

      <li>فرعي 2</li>

    </ul>

  </li>

  <li>عنصر 3</li>

</ul>

ستعرض الشاشة:

عنصر 1

عنصر 2

فرعي 1

فرعي 2

عنصر 3

علامة <ul> هي جزء من العناصر الأساسية في HTML التي تساعد في هيكلة وتنظيم المحتوى على صفحات الويب.

بالطبع، إليك مثال كامل يستخدم علامات <ul> و <li> لإنشاء قائمة غير مرتبة في صفحة HTML:

<!DOCTYPE html>

< dir= rtl html lang="ar">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>مثال على علامة &lt;ul&gt; في HTML</title>
</head>

<body>
<h1>قائمة غير مرتبة</h1>
<ul>
    <li>عنصر 1</li>

    <li>عنصر 2</li>

    <li>عنصر 3

        <ul>
            <li>فرعي 1</li>

            <li>فرعي 2</li>
        </ul>
    </li>
    <li>عنصر 4</li>
</ul>

</body>

</html>

في هذا المثال، تم إنشاء صفحة HTML بسيطة تحتوي على علامات <ul> و <li> لإنشاء قائمة غير مرتبة. يوجد أربعة عناصر في القائمة الرئيسية، والعنصر رقم 3 يحتوي على قائمة داخلية بفرعين. يمكنك نسخ هذا الكود ولصقه في ملف HTML لاستعراض النتيجة في متصفح الويب.

Types of list tag in html

في لغة ترميز الويب HTML، هناك نوعين رئيسيين من علامات القوائم (List Tags): قوائم مرتبة <ol> وقوائم غير مرتبة <ul>.

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

(<ol> – Ordered Lists)

تُستخدم علامة <ol> لإنشاء قوائم مرتبة، حيث يتم ترقيم العناصر تلقائيًا.

يتم استخدام عنصر القائمة <li> داخل <ol> لتعريف كل عنصر في القائمة.

يمكن تحديد نوع الترقيم باستخدام الخاصية type في عنصر <ol>.

مثال:

<ol>

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

ستعرض الشاشة:

العنصر الأول

العنصر الثاني

العنصر الثالث

القوائم غير المرتبة (<ul> – Unordered Lists):

تُستخدم علامة <ul> لإنشاء قوائم غير مرتبة، حيث تظهر العناصر كنقاط أو رموز منفصلة دون ترقيم تلقائي.

يستخدم عنصر القائمة <li> داخل <ul> لتعريف كل عنصر في القائمة.

مثال:

<ul>

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

</ul>

ستعرض الشاشة:

العنصر الأول

العنصر الثاني

العنصر الثالث

تستخدم هذه القوائم في HTML لتنظيم وترتيب المحتوى على الصفحات بشكل منظم.

<dl> (Definition List)

في لغة ترميز الويب HTML، تُستخدم علامة <dl> لإنشاء قوائم تعريف (Definition Lists). تُستخدم هذه القوائم لتقديم تعاريف للكلمات أو المصطلحات وتوفير شرح أو توضيح لكل منها. يتكون كل عنصر في القائمة من اثنين من العناصر: <dt> (عنصر التعريف) و <dd> (عنصر الوصف).

الشكل العام لقائمة التعريف هو كالتالي:

<dl>
    <dt>المصطلح الأول</dt>
    <dd>الوصف أو التعريف للمصطلح الأول</dd>
    <dt>المصطلح الثاني</dt>
    <dd>الوصف أو التعريف للمصطلح الثاني</dd>
    <!-- يمكن إضافة مزيد من الأزواج من dt و dd حسب الحاجة -->
</dl>

الآن، دعونا نقدم مثالًا كاملًا:

<!DOCTYPE html>

< dir= rtl html lang="ar">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>مثال على علامة &lt;dl&gt; في HTML</title>
</head>
<body>
<h1>قائمة تعريف</h1>
<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز الويب</dd>
    <dt>CSS</dt>
    <dd>ورقة أنماط التنسيق</dd>
    <dt>JavaScript</dt>
    <dd>لغة برمجة الويب</dd>
</dl>
</body>
</html>

في هذا المثال:

تم إنشاء صفحة HTML تحتوي على قائمة تعريف تشمل ثلاثة أزواج.
لكل زوج، يوجد عنصر <dt> يحتوي على المصطلح وعنصر <dd> يحتوي على التعريف أو الوصف لهذا المصطلح.
يمكنك تحديد عدد الأزواج حسب احتياجاتك في المستند.
list tag

كيف يمكن انشاء قائمة list tags

يمكنك إنشاء قوائم في لغة ترميز الويب HTML باستخدام علامات <ul> (للقوائم غير المرتبة) و <ol> (للقوائم المرتبة)، مع استخدام علامة <li> لتعريف كل عنصر في القائمة.

فيما يلي مثال كامل يوضح كيفية إنشاء قائمة غير مرتبة وقائمة مرتبة:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>أمثلة على علامات القوائم في HTML</title>
</head>
<body>
<!-- قائمة غير مرتبة -->
<h2>قائمة غير مرتبة</h2>
<ul>
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ul>
<!-- قائمة مرتبة -->
<h2>قائمة مرتبة</h2>
<ol>
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
</ol>
</body>
</html>

في هذا المثال:

قائمة غير مرتبة:

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

قائمة مرتبة:

تستخدم علامة <ol> لإنشاء قائمة مرتبة.
يتم تعريف كل عنصر في القائمة باستخدام علامة <li> أيضًا.

يمكنك نسخ هذا الكود ولصقه في مستند HTML، ثم فتح الملف في متصفح الويب لرؤية النتيجة.

كيف ننشيء: How to create Definition List

لإنشاء قائمة تعريف في HTML، يمكنك استخدام علامات <dl> (للقائمة الرئيسية) و <dt> و <dd> لتحديد كل زوج من المصطلح وتعريفه.

فيما يلي مثال كامل:

<!DOCTYPE html>

<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>أمثلة على علامة &lt;dl&gt; في HTML</title>
</head>
<body>
<!-- قائمة تعريف -->
<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز الويب</dd>
    <dt>CSS</dt>
    <dd>ورقة أنماط التنسيق</dd>
    <dt>JavaScript</dt>
    <dd>لغة برمجة الويب</dd>
</dl>
</body>
</html>

في هذا المثال:

يتم استخدام علامة <dl> لتحديد بداية ونهاية القائمة التعريفية.
تُستخدم <dt> لتحديد المصطلح (العنصر الذي سيتم تعريفه).
تُستخدم <dd> لتحديد التعريف أو الوصف للمصطلح.

يمكنك نسخ هذا الكود ولصقه في ملف HTML، ثم فتح الملف في متصفح الويب لرؤية النتيجة. ستظهر قائمة تعريف تحتوي على ثلاثة أزواج، حيث يتم تعريف كل مصطلح بواسطة <dt> ويتبعه التعريف أو الوصف بواسطة <dd>.

خصائص وسم القائمة

Attributes of list tags

تتيح لغة ترميز الويب HTML استخدام العديد من السمات (Attributes) مع علامات القوائم لتعديل سلوكها أو تخصيصها بطرق مختلفة.

العلامات الرئيسية المتعلقة بالقوائم هي <ul> (للقوائم غير المرتبة) و <ol> (للقوائم المرتبة).

فيما يلي بعض السمات الشائعة التي يمكن استخدامها مع هذه العلامات مع أمثلة كاملة:

سمات <ul> (للقوائم غير المرتبة):

type: تُستخدم لتحديد نوع الرمز المستخدم لتمثيل العناصر في القائمة (مثل دائرة، مربع، أو مثلث).

مثال:

<ul type="circle">

    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ul>

سمات <ol> (للقوائم المرتبة):

type: تُستخدم لتحديد نوع الترقيم المستخدم في القائمة (مثل أرقام عربية، أحرف لاتينية، أرقام رومانية).

مثال:

<ol type="I">
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
</ol>

start: تُستخدم لتحديد القيمة التي تبدأ منها عملية الترقيم.

مثال:

 

<ol start="10">
    <li>العنصر 10</li>
    <li>العنصر 11</li>
    <li>العنصر 12</li>
</ol>

سمات <li> (للعناصر في القوائم):

value: تُستخدم لتحديد القيمة التي سيتم عرضها كترقيم للعنصر.

مثال:

<ol>
    <li value="5">العنصر 5</li>
    <li>العنصر 6</li>
    <li>العنصر 7</li>
</ol>

تلك هي بعض السمات الشائعة التي يمكن استخدامها مع علامات القوائم في HTML. يمكنك تضمين هذه السمات حسب الحاجة لتخصيص سلوك وعرض القوائم وفقًا لمتطلبات الموقع الخاص بك.

سمة :Compact Attributes

في HTML، يمكنك استخدام سمة compact لتحديد ما إذا كانت القائمة (List) تكون مضغوطة أو لا.

هذه السمة غالبًا ما تكون مرتبطة بقوائم التعريف <dl>.

القيمة المقبولة لسمة compact هي “compact” نفسها، وعندما يتم تحديدها، يتم عرض القائمة بشكل أكثر اكتمالًا، وذلك عبر تقليل المسافات بين العناصر في القائمة.

لنقدم مثالًا:

<!DOCTYPE html>

<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على Compact Attribute</title>
</head>
<body>
<!-- قائمة تعريف بدون Compact Attribute -->
<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز الويب</dd>
    <dt>CSS</dt>
    <dd>ورقة أنماط التنسيق</dd>
    <dt>JavaScript</dt>
    <dd>لغة برمجة الويب</dd>
</dl>
<!-- قائمة تعريف مع Compact Attribute -->
<dl compact>
    <dt>HTML</dt>
    <dd>لغة ترميز الويب</dd>
    <dt>CSS</dt>
    <dd>ورقة أنماط التنسيق</dd>
    <dt>JavaScript</dt>
    <dd>لغة برمجة الويب</dd>
</dl>
</body>
</html>

في هذا المثال، يتم استخدام <dl> لإنشاء قائمة تعريف مكونة من ثلاثة أزواج (<dt> و <dd>).

يظهر الجزء الأول من القائمة بدون استخدام سمة compact، والجزء الثاني يستخدمها.

يرجى ملاحظة أن استخدام سمة compact قد يؤدي إلى تأثيرات مختلفة على التصميم تعتمد على المتصفح، ولكن في كثير من الحالات، تقليل المسافات بين العناصر يجعل القائمة أكثر اكتمالًا.

ol > (Ordered List) Attributes>

سمات <ol> تتيح لك تخصيص تصميم وسلوك القوائم المرتبة في HTML. فيما يلي بعض السمات الشائعة التي يمكنك استخدامها مع علامة <ol>:

سمة type:

تُستخدم لتحديد نوع الترقيم المستخدم في القائمة. القيم الشائعة تشمل “1” (الترقيم العددي الافتراضي)، “A” (الأحرف اللاتينية الكبيرة)، “a” (الأحرف اللاتينية الصغيرة)، “I” (الأرقام الرومانية الكبيرة)، “i” (الأرقام الرومانية الصغيرة).

مثال:

<ol type="A">
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
</ol>

سمة start:

تُستخدم لتحديد القيمة التي تبدأ منها عملية الترقيم في القائمة.

مثال:

<ol start="10">
    <li>العنصر 10</li>
    <li>العنصر 11</li>
    <li>العنصر 12</li>
</ol>

سمة reversed:

تُستخدم لعكس ترتيب العناصر في القائمة.

مثال:

 <ol reversed>
    <li>العنصر 3</li>
    <li>العنصر 2</li>
    <li>العنصر 1</li>
</ol>

مثال كامل:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>أمثلة على سمات &lt;ol&gt; في HTML</title>
</head>
<body>
<!-- قائمة مرتبة مع سمات -->

<ol type="I" start="5">
    <li>العنصر 5</li>
    <li>العنصر 6</li>
    <li>العنصر 7</li>
</ol>
<!-- قائمة مرتبة مع تغيير ترتيب العناصر -->
<ol reversed>
    <li>العنصر 3</li>
    <li>العنصر 2</li>
    <li>العنصر 1</li>
</ol>
</body>
</html>

هذا المثال يستخدم عدة سمات مع <ol> لتغيير نوع الترقيم وبداية الترقيم وعكس ترتيب العناصر. يمكنك تجربة هذا الكود بنفسك عن طريق نسخه ولصقه في ملف HTML وعرضه في متصفح الويب.

:< (Unordered List) Attribute<ul

عادةً، علامة <ul> (للقوائم غير المرتبة) في HTML لا تتضمن الكثير من السمات المخصصة، ولكن هناك سمة واحدة تستخدم أحيانًا:

سمة type:

تُستخدم لتحديد نوع الرمز المستخدم لتمثيل العناصر في القائمة (مثل دائرة، مربع، أو مثلث).

مثال:

<ul type="square">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ul>

في هذا المثال، يتم استخدام سمة type لتحديد استخدام رمز مربع للقائمة بدلاً من الدوائر الافتراضية.

مثال آخر:

<ul type="circle">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ul>

هنا، يتم استخدام سمة type لتحديد استخدام رمز دائرة.

تلك هي السمات الرئيسية المرتبطة بعلامة <ul> في HTML.

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

تطبيق كامل عن هذا الدرس

في هذا المثال، سنقوم بإنشاء صفحة ويب بسيطة تستخدم قوائم مرتبة وغير مرتبة.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تطبيق القوائم في HTML</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        ul {
            list-style-type: square;
            margin-bottom: 20px;
        }
        ol {
            list-style-type: upper-roman;
            margin-bottom: 20px;
        }
        li {
            font-size: 18px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>تطبيق القوائم في HTML</h1>
    <ul>
        <li>عنصر 1</li>
        <li>عنصر 2</li>
        <li>عنصر 3</li>
    </ul>
    <ol>
        <li>المهمة 1</li>
        <li>المهمة 2</li>
        <li>المهمة 3</li>
    </ol>
    <ul type="circle">
        <li>عنصر 4</li>
        <li>عنصر 5</li>
        <li>عنصر 6</li>
    </ul>
    <ol type="A">
        <li>المهمة 4</li>
        <li>المهمة 5</li>
        <li>المهمة 6</li>
    </ol>
    <p>تطبيق القوائم في HTML يمكن أن يكون سهلاً ومرناً باستخدام السمات المتاحة.</p>
</body>
</html>

في هذا التطبيق:

نستخدم علامات <ul> و <ol> لإنشاء قوائم غير مرتبة ومرتبة على التوالي.
تم استخدام السمة type لتحديد نوع الرمز المستخدم في القائمة.
تم تخصيص التصميم باستخدام العناصر <style> لتحديد الخصائص البصرية.
تم إضافة عناصر <p> لتوضيح الفائدة العامة لتطبيق القوائم في HTML.

يمكنك نسخ هذا الكود وتجربته بنفسك عن طريق لصقه في ملف HTML وفتحه في متصفح الويب. ستظهر لك صفحة بسيطة تستخدم القوائم بشكل مختلف.

القوائم التعريفية <dl>:

تُستخدم لإنشاء قوائم تعريف، حيث يتم عرض المصطلحات مع تعاريفها.

<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز الويب</dd>
    <dt>CSS</dt>
    <dd>ورقة أنماط التنسيق</dd>
    <dt>JavaScript</dt>
    <dd>لغة برمجة الويب</dd>
</dl>

الناتج:

HTML: لغة ترميز الويب

CSS: ورقة أنماط التنسيق

JavaScript: لغة برمجة الويب

القوائم المتداخلة:

يمكنك تضمين قوائم داخل أخرى لتحقيق هيكل تنظيمي أكثر تعقيدًا.

<ul>

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

استخدام السمات:

يمكنك استخدام السمات مثل type و start لتخصيص ترقيم ونوع الرموز.

<ol type="A" start="5">
    <li>العنصر 5</li>
    <li>العنصر 6</li>
    <li>العنصر 7</li>
</ol>

هذه أمثلة على كيفية استخدام علامات القوائم في HTML لتحقيق تنظيم مناسب وعرض المحتوى بطريقة منظمة.

القوائم باستخدام رموز مخصصة:

يمكنك استخدام صور أو رموز مخصصة بدلاً من الرموز الافتراضية أو أرقام الترقيم.

<ul>
    <li><img src="bullet.png" alt="نقطة"></li>
    <li><span class="custom-icon">+</span> العنصر الثاني</li>
    <li>العنصر الثالث</li>
</ul>

استخدام التعليقات:

يمكنك استخدام التعليقات لشرح أو وصف العناصر داخل القوائم.

<ul>
    <li>العنصر 1</li>
    <!-- هذا تعليق يشرح العنصر 2 -->
    <li>العنصر 2</li>
    <li>العنصر 3</li>
</ul>

تخصيص التصميم:

يمكنك استخدام CSS لتخصيص التصميم والأسلوب للقوائم بشكل دقيق.

<style>
    ul {
        list-style-type: none;
    }
    li {
        background-color: #f2f2f2;
        margin: 5px;
        padding: 10px;
    }
</style>
<ul>
    <li>العنصر 1</li>
    <li>العنصر 2</li>
    <li>العنصر 3</li>
</ul>

هذه أمثلة توضح الاستخدامات المتنوعة لعلامات القوائم في HTML.

يمكنك تجربة هذه الأمثلة عن طريق إنشاء ملف HTML ولصق الشيفرة فيه، ثم فتح الملف باستخدام متصفح الويب لرؤية النتيجة.

إتش تي إم إل بالعربي HTML Tutorial

Curriculum

وسم : list tag

وسم : list tag

الاستخدامات الرئيسية لوسم <ul> كما يلي:

انشاء قائمة نقطية غير مرقمة:

تضمين قوائم داخلية:

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

(<ol> – Ordered Lists)

القوائم غير المرتبة (<ul> – Unordered Lists):

<dl> (Definition List)

كيف يمكن انشاء قائمة list tags

كيف ننشيء: How to create Definition List

خصائص وسم القائمة

سمات <ul> (للقوائم غير المرتبة):

سمات <ol> (للقوائم المرتبة):

start: تُستخدم لتحديد القيمة التي تبدأ منها عملية الترقيم.

سمات <li> (للعناصر في القوائم):

value: تُستخدم لتحديد القيمة التي سيتم عرضها كترقيم للعنصر.

سمة :Compact Attributes

ol > (Ordered List) Attributes>

سمة type:

سمة start:

سمة reversed:

:< (Unordered List) Attribute<ul

سمة type:

تطبيق كامل عن هذا الدرس

القوائم التعريفية <dl>:

القوائم المتداخلة:

استخدام السمات:

القوائم باستخدام رموز مخصصة:

استخدام التعليقات:

تخصيص التصميم:

Leave a Reply

Modal title