القوائم Lists في لغة HTML 8 - Programmer Tech
html

القوائم Lists في لغة HTML 8

القوائم Lists في HTML

القوائم Lists في لغة HTML

القوائم ( Lists ) عبارة عن مجموعة من البيانات التي نقوم بإنشاءها على شكل أرقام أو نقاط أو أحرف. و يتم إستخدام القوائم Lists من أجل تقديم قائمة البيانات بطربقة جيدة و تسمح ببناء نص جميل و جذاب.

أنواع القوائم في HTML

  1. قوائم غير مرتبة (Unordered list) تُستخدم من أجل إنشاء قائمة بيانات بدون ترتيب.
  2. قوائم مرتبة ( Ordered list ) تُستخدم من أجل إنشاء قائمة بيانات بترتيب معين.
  3. قوائم الوصف ( Description list ) تستخدم من أجل إنشاء قائمة بالمصطلحات وتفصيلاتها.

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

القائمة المرتبة ( Ordered ) يقصد فيها عرض مجموعة عناصر مع إظهار رقم كل عنصر تم إدخاله فيها. يتم إستخدام في القوائم المرتبة الوسم <ol> </ol> وهي إختصار للكلمة ( Ordered ) من أجل إخبار متصفح الويب أننا نريد عرض قائمة مرتبة. و عندما نريد أن نضيف عناصر للقائمة المرتبة نضعه ضمن الوسم <li> </li> لكل عنصر و هي إختصار للمصطلح ( Item ) وهي تعتبر عنصر ضمن قائمة.

مثال

<h1>Site administrators from: </h1>
<ol>
	<li>Egypt</li>
	<li>Syrian</li>
	<li>Sudan</li>
</ol>

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

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

الـ List item يستخدم في بداية السطر الخاص بكل بند li ولتعيين كل بند من بنود القائمة بالتسلسل رقمياً.

أنواع الترقيم المستخدمة مع القوائم المرتبة

الخاصية type هي الخاصية الوحيدة التي تُستخدَم مع هذا الوسم و وظيفتها تحديد شكل type للرمز الظاهر مع بنود القائمة وعادتاً ما تُستخدم مع وسم بداية القائمة <ol>. و تستطيع أيضاً إستخدامه مع وسم البنود لإعطاءه التحكم في كل بند داخل القائمة وتحديد رمز مختلف لكل بند و هي:

  1. القيمة A تستخدم من أجل إظهار ترقيم بأحرف إنجليزية كبيرة قبل كل عنصر. القيمة a تستخدم من أجل إظهار ترقيم بأحرف صغيرة قبل كل عنصر. القيمة I تستخدم من أجل إظهار ترقيم روماني بأحرف كبيرة. القيمة i تستخدم من أجل إظهار ترقيم روماني بأحرف صغيرة.

مثال

<h1> administrators: </h1>
<ul type="A">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

قمنا بإستخدام القيمة type=”A” في المثال من أجل إظهار ترقيم أبجدي إنجليزي بأحرف كبيرة.

القوائم Lists في لغة HTML 8

مثال

<h1> administrators: </h1>
<ul type="a">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul

قمنا بإستخدام القيمة type=”a” في المثال من أجل إظهار ترقيم أبجدي إنجليزي بأحرف صغيرة.

القوائم Lists في لغة HTML 8

مثال

<h1> administrators: </h1>
<ul type="I">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

قمنا بإستخدام القيمة type=”I” في المثال من أجل إظهار ترقيم روماني بأحرف كبيرة.

القوائم Lists في لغة HTML 8

مثال

<h1> administrators: </h1>
<ul type="i">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

قمنا بإستخدام القيمة type=”i” في المثال من أجل إظهار ترقيم روماني بأحرف صغيرة.

القوائم Lists في لغة HTML 8

القوائم الغير مرتبة Unordered lists

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

مثال

<h1> administrators: </h1>
<ul>
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

أنشأنا عنوان من الوسم <h1> و كتبنا به أسماء مشرفين الموقع من. و قمنا بإنشاء قائمة غير مرتبة عن طريق الوسم <ul> ووضعنا في هذه القائمة ثلاث عناصر عن طريق <li>.

القوائم Lists في لغة HTML 8

نلاحظ أنه سلسَل لنا العناصر بنقاط بعكس المثال السابق كان أرقام مرتبة.

الرموز التي يمكن عرضها مع العناصر في القوائم غير المرتبة

من أجل تحديد نوع الرموز التي سوف تظهَر قبل العناصر, من خلال الخاصية type في الوسم <ul> و تمرير إحدى الكلمات كقيمة:

  1. القيمة square لأجل إظهار مربع في بداية كل عنصر في القائمة.
  2. القيمة circle لأجل إظهار دائرة في بداية كل عنصر في القائمة.
  3. القيمة disc لأجل إظهار نقطة كبيرة في بداية كل عنصر و هي القيمة الإفتراضية.
  4. القيمة none من أجل عدم إظهار رمز في بداية كل عنصر في القائمة.

مثال

<ul type="square">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

أنشأنا قائمة غير مرتبة ووضعنا لها الخاصية type ووضعنا القيمة square من أجل عرض مربع في بداية العناصر.

القوائم Lists في لغة HTML 8

مثال

<ul type="circle">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

أنشأنا قائمة غير مرتبة ووضعنا لها الخاصية type ووضعنا القيمة circle من أجل عرض دائرة فارغة في بداية العناصر.

القوائم Lists في لغة HTML 8

مثال

<ul type="disc">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

أنشأنا قائمة غير مرتبة ووضعنا لها الخاصية type ووضعنا القيمة disc من أجل عرض دائرة ممتلئة في بداية العناصر.

القوائم Lists في لغة HTML 8

مثال

<ul type="none">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

أنشأنا قائمة غير مرتبة ووضعنا لها الخاصية type ووضعنا القيمة none من أجل عدم إظهار أي شيئ قبل العناصر.

القوائم Lists في لغة HTML 8

قوائم الوصف Description

قوائم الوصف ( Description Lists ) يقصد بها عرض مجموعة مصطلحات و كل مصطلح يكون معه وصف, و في هذا النوع أي مصطلح أو وصف يتم كتابته يتم إعتباره كعنصر في القائمة. من أجل عرض قائمة وصف في صفحة الويب نستخدم الوسوم:

  1. الوسم <dl> </dl> هذا يكون الوسم الأساسي الذي نضعه من أجل إعلام المتصفح أنك تريد عرض بيانات في داخل قائمة وصف.
  2. الوسم <dt> </dt> يتم إستخدامه لإضافة عنوان لما سوف يتم وضعخ تحته في القائمة.
  3. الوسم <dd> </dd> يتم إستخدامه من أجل إضافة شرح للمصطلح.

مثال

<dl>
	<dt>Admin: </dt>
	<dd>- Ahmed Kaissar</dd>
	<dd>- Muhammad Alush</dd>
	<dd>- Saja Alsadig</dd>
	<dt>From and Age: </dt>
	<dd>- Egypt 23</dd>
	<dd>- Syria 28</dd>
	<dd>- Sudan 27</dd>
</dl>

أنشأنا قائمة وصف بواسطة الوسم <dl> ثم أنشأنا الوسم <dt> من أجل وضع عنوان للقائمة. و عن طريق الوسم <dd> قمنا بإنشاء ثلاث عناصر و هي أسماء أصحاب هذا الموقع. ثم قمنا بإنشاء قائمة ثانية في الأسفل و الوصف هو الدولة و العمر.

القوائم Lists في لغة HTML 8

محمد تركي العلوش

من سورية بالتحديد من مدينة "منبج" ، ‏مبرمج ويب، محب للتقنية | ‎#أمن_المعلومات | ‎#الأمن_السيبراني | ‎#الشبكات | ‎#توعية_أمنية ، آمل أن أُقدم كل ما هو مفيد للجميع.
شاهد أيضاً
إغلاق
زر الذهاب إلى الأعلى