إنشاء القوائم ب: HTML

بواسطة / اترك تعليقاً

إنشاء القوائم ب: HTML

إنشاء القوائـــم داخل المقالات بلغة HTML

في هذا الدرس سنكتشف الأنواع المختلفة لقوائم HTML ومعرفة كيفية إنشائها.

مـاهي قـوائـم HTML؟

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

وعند إنشاء القائمة داخل المقالة، ستفهم المتصفحات ومحركات البحث أن هناك علاقة ين عناصر القائمة المختلفة.
سنكتشف هنا نوعين من القوائم:

  •  قوائم غير مرتبة أو قوائم نقطية
  • قوائم مرتبة أو قوائم مرقمة .

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

تبدو قائمة غير مرتبة كالتالي:

  • صور الطبيعة
  • صور الفواكه
  • صور الحيوانات الأليفة
  • صور الحيوانات المتوحشة

إنشاء القوائم ب: HTML

إنشاء القوائم ب: HTML

إنه نظام يسمح لنا بإنشاء قائمة بعناصر دون فكرة تنظيمها ، يعني: (لا يوجد “أولاً” ولا “أخيراً”).

إن إنشاء قائمة غير مرتبة بسيط للغاية. ما عليك سوى استخدام العلامة <ul>   التي يتم إغلاقها بعد إتمام إسم القائمة  ب <ul/>

لذا أبدأ في كتابة هذا:

</ul> و <ul>

والآن ، هذا ما سنفعله:  سنكتب كل عنصر في القائمة بين علامتين <li> و </li>   بحيث يجب أن تكون كل من هذه العلامات بين <ul> و </ul>.  

 

المثال هنا سيُوَضِّح لك كل شيء ، ما عليك سوى التركيز بروية:

1
2
3
4
5
6
7
8
9
<h1>القـوائـم</h1>
 
<!--هذا مثال للقوائم الغير المرتبة -->
<ul>
  <li>صور الطبيعة</li>
  <li>صور الفواكه</li>
  <li>صور الحيوانات الأليفة</li>
  <li>صور الحيوانات المتوحشة</li>
</ul>

والنتيجة هي في الشكل التالي:

  • صور الطبيعة
  • صور الفواكه
  • صور الحيوانات الأليفة
  • صور الحيوانات المتوحشة

 هذه قائمة غير مرتبة

تذكـر جيِّـداً:
لاحظ أنه يجب وضع القائمة داخل </ body> و <body>

إذن تذكر جيِّداً هاتين العلامتين:

 <ul> </ ul> لتحديد القائمة بأكملها.

<li> </ li>  لتحديد عنصـر من القائمة .

بإمكانك وضع العديد من العناصر التي تريدها في القائمة النقطية ، ولا تقتصر على  أربعة  عناصر كما في المثال .

والآن ، أنت تعرف كيفية إنشاء قائمة نقطية! أظن أنها ليست صعبة و عليك تطبيقها لمرات كي تستوعب جيداً كم هي سهلة. 💡 

 إعلم أنه من الممكن تمامًا تداخل قائمة في قائمة أخرى باتباع بعض القواعد البسيطة 

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

وهنا المثال:

  • صور الطبيعة
  • صور الفواكه
    • صور قديمة
    • صور مفبركة
    • صور حديثة
  • صور الحيوانات الأليفة
  • صور الحيوانات المتوحشة
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <li>صور الطبيعة </li>
    <li>صور الفواكه </li>
  <ul>
    <li>صور قديمة</li>
    <li>صور مفبركة</li>
    <li>صور حديثة</li>
  </ul>
  </li>
    <li>صور الحيوانات الأليفة</li>
    <li>صور الحيوانات المتوحشة</li>
  </ul>

 

قائمة داخل قائمة

هذه قائمة لقوائم متداخلة

ويمكننا إدخال قائمة رقمية في قائمة نقطية:

1
2
3
4
5
6
7
8
9
10
11
<ul>
    <li>العنصر الأول</li>
    <li>الخطاطة:
        <ol>
            <li>المرحلة 1</li>
            <li>المرحلة 2</li>
            <li>المرحلة 3</li>
        </ol>
    </li>
    <li>العنصر الثاني</li>
</ul>

وهذه النتيجــة:

  • العنصر الأول
  • الخطاطة:
    1. المرحلة 1
    2. المرحلة 2
    3. المرحلة 3
  • العنصر الثاني

قائمة مرتبة

تعمل القائمة المرتبة بنفس الطريقة ، فقط  يتم تغيير علامة واحدة  : استبدل <ul> </ ul> بـ <ol> </ ol>. أما داخل القائمة ، فلا نغير أي شيء:  نحن نستخدم دائماً <li> </ li> لتحديد العناصر.

الترتيب الذي تضع فيه العناصر في القائمة مهم. 

  • <li></ li> سيكون العنصر رقم 1 ، والثاني سيكون رقم  2  وهكذا …

بما أن العملية أصبحت سهلة   ، فسأتركك تستمتع  ببساطة هذا المثال:

برنامجي اليومي

 

1
2
3
4
5
6
7
<h1>برنامجي اليومي</h1>
<ol>
  <li>أستيقظ باكراً.</li>
  <li>أشرب قهوتي الصباحية.</li>
  <li>أقوم بتمارين رياضية</li>
  <li>أذهب إلى العمل</li>
</ol>

النتيـجـة:

    1. أستيقظ باكراً.
    2. أقوم بتمارين رياضية
    3. أشرب قهوتي الصباحية.
    4. أذهب إلى العمل
  1.  

القائمة الرقميةهذه قائمة مرتبة

هذا مثال آخــر:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h1>القوائم</h1>
 
<!--مثالين للقوائم المرتبة-->
<p>القائمة  رقم 1 :</p>
<ol>
    <li>أقلام حبر زرقاء</li>
    <li>أقلام الرصاص</li>
    <li>أوراق مزدوجة</li>
</ol>
        
<p>القائمة رقم 2 :</p>
<ol>
    <li>كتب الرياضيات</li>
    <li>كتب العربية</li>
    <li>كتب العلوم الطبيعية</li>
    <li>كتب الفيزياء</li>
</ol>

النتيـجـة:

القوائم

القائمة رقم 1 :

  1. أقلام حبر زرقاء
  2. أقلام الرصاص
  3. أوراق مزدوجة

القائمة رقم 2 :

  1. كتب الرياضيات
  2. كتب العربية
  3. كتب العلوم الطبيعية
  4. كتب الفيزياء

👀 كما ترون هنا، يتم عرض الأرقام  أمام كل عنصر في القائمة الافتراضية.

بالمقارنة مع المثال السابق ، كل ما كان علينا تغييره هو العلامة <ol>.

📎 كما ذكرت في أكثر من موضوع أن HTML غير مؤهلٍ للقيام بكل شيئ ، فهو يهتم فقط بالهيكل أمَّا المظهر والتَّجميل والتَّنسيق فهو من اختصاص CSS. 

وهنا سأتناول نوعـاً آخر من القوائم، فقط تذكر أنه يجب أن تفضل دائماً استخدام CSS لتنسيق محتوى HTML .

لنبدأ بسمة type التي تسمح لنا بتغيير مظهر الرموز النقطية في قائمة مرتبة وهي متنوعة كالتالي:

  •  « 1 »: القيمة الافتراضية. ستظهر الأرقام أمام كل عنصر من عناصر القائمة ؛
  • « I »: ستظهر الأرقام الرومانية بالحروف الكبيرة أمام كل عنصر من عناصر القائمة ؛
  • « i »: ستظهر الأرقام الرومانية بالحروف الصغيرة أمام كل عنصر من عناصر القائمة ؛
  • « A »: ستظهر الأحرف الكبيرة أمام كل عنصر في القائمة ؛
  • « a »: ستظهر الأحرف الصغيرة أمام كل عنصر في القائمة.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h1>القــوائــم</h1>
 
<!--مثال لقائمتان مرتبتان-->
<p>القائمة الأولى :</p>
<ol type="A">
  <li>أنا أتعلم</li>
  <li>أنت تشتغل</li>
  <li>هو لا يبالي</li>
</ol>
        
<p>القائمة الثانية :</p>
<ol type="i">
  <li>العنوان</li>
  <li>العرض</li>
  <li>التفاصيل</li>
  <li>الاستنتاج</li>
</ol>

إنشاء القوائم ب: HTML

النتـيجــــة:

القوائـم

القائمة الأولى :

  1. أنا أتعلم
  2. أنت تشتغل
  3. هو لا يبالي

القائمة الثانية :

  1. العنوان
  2. العرض
  3. التفاصيل
  4. الاستنتاج

من خلال ما تعلمناه في هذا الدرس، سنكون قادرين على تغيير هذا النمط وبدء قائمتنا المرتبة من نقطة محددة وذلك بفضل سمات HTML جديدة start أو value .

إن سمة start تسمح لنا باختيار نقطة انطلاق لقائمتنا المرتبة. وسنضعها في الرمز المفتوح للعنصر الذي يمثل قائمة ol.

من ناحية أخرى ، تتيح لنا سمة value اختيار قيمة كل شريحة من عناصر القائمة.

🔍من فضلك ركز معـي:

   سنكون قادرين على إضافة سمة value  لكل عنصر li لتحديد القيمة بالضبط. وفي حالة عدم وجود سمة value لبعض العناصر li ، فإن قيمة الشريحة الخاصة بهم ستزداد  بشكل طبيعي (أي إضافة 1 اتباعـاً الرمز الرقمي السابق).

لاحظ أنه في حالة تحديد سمة start في القائمة وتحديد سمة value لعنصر القائمة الأول ، فإن سمة value ، الأكثر دقة ، سوف تكون لها الأسبقية وتفرض قيمتها.

القوائـم

القائمة الأولى :

  1. أنا أتعلم
  2. أنت تشتغل
  3. هو لا يبالي

القائمة الثانية :

  1. أستيقظ باكراً
  2. أقوم بتمارين رياضية
  3. أشرب قهوتي الصباحية
  4. أذهب إلى العمل

القائمة الثالثة :

  1. أقلام حبر زرقاء
  2. أقلام الرصاص
  3. أوراق مزدوجة

القائمة الرابعة :

  1. المقدمة
  2. العرض
  3. الخاتمة

القائمة الخامسة :

  1. كتب الرياضيات
  2. كتب العلوم الطبيعية
  3. كتب الفيزياء
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<h1>القــوائــم</h1>
 
<p>القائمة الأولى :</p>
<ol start="3">
  <li>أنا أتعلم</li>
  <li>أنت تشتغل </li>
  <li>هو لا يبالي</li>
</ol>
  
<p>القائمة الثانية :</p>
<ol type="A" start="5">
  <li>أستيقظ باكراً</li>
  <li>أقوم بتمارين رياضية</li>
  <li>أشرب قهوتي الصباحية</li>
  <li>أذهب إلى العمل </li>
</ol>
        
<p>القائمة الثالثة :</p>
<ol start="10">
  <li>أقلام حبر زرقاء</li>
  <li value="7">أقلام الرصاص</li>
  <li>أوراق مزدوجة</li>
</ol>
  
<p>القائمة الرابعة :</p>
<ol>
  <li value="10">المقدمة</li>
  <li>العرض</li>
  <li>الخاتمة</li>
</ol>
<p>القائمة الخامسة :</p>
<ol start="5">
  <li value="3"> كتب الرياضيات</li>
  <li value="7">كتب العلوم الطبيعية</li>
  <li>كتب الفيزياء </li>
</ol>

بعض الامثلة لاستعمالات سمات start و value0

مازلنا نكتشف المزيد من أنواع القوائم المرتبة، لكن هاته المرة سنتعرف على القائمة المرتبة، مُرَتبةٌ عكسياً وذلك باستعمال السّمة reversed . سيحتوي العنصر الأول من الشريحة على القيمة الأعلى، ثم يبدأ بترتيب أرقام القائمة تنازلياً ب 1- .

 مثـــــال:

القوائـم

القائمة الأولى 

  1. العنصر الأول
  2. العنصر الثاني
  3. العنصر الثالث

القائمة الثانية :

  1. العنصر الأول
  2. العنصر الثاني
  3. العنصر الثالث
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h1>القوائـم</h1>
 
<p>القائمة الأولى :</p>
<ol reversed>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>
 
<p>القائمة الثانية :</p>
<ol start="10" reversed>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>

 

فقط للمزيد من المعلومات :  هناك نوع ثالث من القائمة ، أكثر ندرة:  قائمة التعريفات. وهي تتضمن العلامات:

 <dl>  لتحديد القائمة   <dt> لتحديد مصطلح   و  <dd>  لتحديد تعريف هذا المصطلح .

مثــال

1
2
3
4
5
<!--قائمة التعريفات-->
<dl>
<dt>HTML</dt>
<dd>html لبناء موقع</dd>
</dl>

النتـيجــــة:

قناتي على اليوتوب

تنظيم و ترتيب النّص ب HTML

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 457 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

448 عدد المشاهدات لهذا المحتوى
Scroll to Top