محمد عكفي

HTML : القوائم المنتظمة والغير منتظمة

|

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

ما هي القوائم المنتظمة ( Order List )

هي عبارة عن قائمة ” مُرقمة ” تحتوي على نصوص ذات أهمية أو ملخص عام لإيصال المعنى بشكل مُرتب ومُنظم بأبسط صورة ممكنة، ودائمًا وابدأً تأتي على هذه الصورة في لغة HTML :

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

</ol>

حيث أنّ الناتج للصورة السابقة هي :

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

ما هي القوائم الغير منتظمة ( Unorder List )

هي القائمة العشوائية والتي لا تحتوي على أرقام وإنما عبارة عن سرد عام للنقاط المطلوب عرضها حيث أنّها تُكتب في لغة HTML بهذه الصورة :

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

</ul>

حيث أنّ الناتج للصورة السابقة هي :

  • النص الأول
  • النص الثاني
  • النص الثالث

كيف يُمكن تضمين القائمة المنتظمة والغير منتظمة معًا في لغة HTML ؟

بالعودة للمقالة التعريفية في HTML فإنّنا تعرفنا على هيكلة إنشاء صفحة متكاملة عبر معرفة الوسوم الأساسية أثناء العمل على لغة HTML فهنا عند تضمين القوائم المنتظمة والغير منتظمة فإنّنا سنحتاج إلى وضعها ضمن وسم

<body>
</body>

مثال متكامل

<html>
<head>
<title>عنوان صفحتي الأولى</title>
</head>
<body>

<h1>العنوان الأول !</h1>
<p>سطور حكايتي هنا.</p>

 <h1>أهدافي في الحياة : </h1>
<ol>
	<li>تعلم لغة جديدة مثل HTML </li>
	<li>إتقان لغة PHP لأكمل بها العلاقة بينها وبين HTML </li>
</ol>
 <h1>أفكار آمل في تقديمها : </h1>
<ul>
	<li> تصميم صفحة متكاملة HTML </li>
	<li> ربط عدة صفحات بواسطة الـ Hyper Link في HTML </li>
</ul>
</body>
</html>

تخطيط المثال السابق

<html>

<head>

<title>عنوان صفحتي الأولى</title>

</head>

<body>

<h1>العنوان الأول !</h1>
<p>سطور حكياتي هنا.</p>
<h1>أهدافي في الحياة : </h1>
<ol>
<li>تعلم لغة جديدة مثل HTML </li>
<li>إتقان لغة PHP لأكمل بها العلاقة بينها وبين HTML </li>
</ol>
<h1>أفكار آمل في تقديمها : </h1>
<ul>
<li> تصميم صفحة متكاملة HTML </li>
<li> ربط عدة صفحات بواسطة الـ Hyper Link في HTML </li>
</ul>

</body>

</html>

وصف المثال

  1. الوسم <ol> وإغلاقه </ol> مخصص لإنشاء قائمة مُرقمة ومنظمة
  2. الوسم <ul> وإغلاقه </ul> مخصص لإنشاء قائمة غير مُرقمة إنما نقطية

يُمكنك معاينة الوسوم الأخرى بالمثال والتعرف عليها في المثال الأول ضمن مقالة للمقالة التعريفية في HTML .

[button url=”http://codepen.io/okfie984/pen/MKzKVM” target=”blank” style=”flat” background=”#1d1954″ size=”6″ radius=”round” icon=”icon: code” desc=”انقر هنا لإختبار الأكواد”]جرّب المثال الأن! [/button]

اترك تعليقًا يُثري التدوينة