إنشاء القوائم ب: 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> |
والنتيجة هي في الشكل التالي:
- صور الطبيعة
- صور الفواكه
- صور الحيوانات الأليفة
- صور الحيوانات المتوحشة
هذه قائمة غير مرتبة
إذن تذكر جيِّداً هاتين العلامتين:
<ul> </ ul> لتحديد القائمة بأكملها. <li> </ 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
- المرحلة 2
- المرحلة 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 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 :
- أقلام حبر زرقاء
- أقلام الرصاص
- أوراق مزدوجة
القائمة رقم 2 :
- كتب الرياضيات
- كتب العربية
- كتب العلوم الطبيعية
- كتب الفيزياء
كما ترون هنا، يتم عرض الأرقام أمام كل عنصر في القائمة الافتراضية.
بالمقارنة مع المثال السابق ، كل ما كان علينا تغييره هو العلامة <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
النتـيجــــة:
القوائـم
القائمة الأولى :
- أنا أتعلم
- أنت تشتغل
- هو لا يبالي
القائمة الثانية :
- العنوان
- العرض
- التفاصيل
- الاستنتاج
من خلال ما تعلمناه في هذا الدرس، سنكون قادرين على تغيير هذا النمط وبدء قائمتنا المرتبة من نقطة محددة وذلك بفضل سمات HTML جديدة start أو value .
إن سمة start تسمح لنا باختيار نقطة انطلاق لقائمتنا المرتبة. وسنضعها في الرمز المفتوح للعنصر الذي يمثل قائمة ol.
من ناحية أخرى ، تتيح لنا سمة value اختيار قيمة كل شريحة من عناصر القائمة.
من فضلك ركز معـي:
سنكون قادرين على إضافة سمة value لكل عنصر li لتحديد القيمة بالضبط. وفي حالة عدم وجود سمة value لبعض العناصر li ، فإن قيمة الشريحة الخاصة بهم ستزداد بشكل طبيعي (أي إضافة 1 اتباعـاً الرمز الرقمي السابق).
لاحظ أنه في حالة تحديد سمة start في القائمة وتحديد سمة value لعنصر القائمة الأول ، فإن سمة value ، الأكثر دقة ، سوف تكون لها الأسبقية وتفرض قيمتها.
القوائـم
القائمة الأولى :
- أنا أتعلم
- أنت تشتغل
- هو لا يبالي
القائمة الثانية :
- أستيقظ باكراً
- أقوم بتمارين رياضية
- أشرب قهوتي الصباحية
- أذهب إلى العمل
القائمة الثالثة :
- أقلام حبر زرقاء
- أقلام الرصاص
- أوراق مزدوجة
القائمة الرابعة :
- المقدمة
- العرض
- الخاتمة
القائمة الخامسة :
- كتب الرياضيات
- كتب العلوم الطبيعية
- كتب الفيزياء
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 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> |
النتـيجــــة:
أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.