القوائم Lists في لغة HTML - ProgrammerTech
Language:

Search

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

  • Share this:
القوائم Lists في لغة HTML

القوائم Lists

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

و يتم إستخدام القوائم Lists من أجل تقديم قائمة البيانات بطربقة جيدة و تسمح ببناء نص جميل و جذاب.

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

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

 

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

القائمة المرتبة ( Ordered ) يقصد فيها عرض مجموعة عناصر مع إظهار رقم كل عنصر تم إدخاله فيها.

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

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

مثال 1

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

أنشأنا عنوان من الوسم <h1> و كتبنا به عبارة أن مشرفين الموقع من.

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

و عند تشغيل الكود السابق في المتصفح سوف يكون الناتج مرتب بالشكل.

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

 

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

 

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

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

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

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

مثال 2

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

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

استخدام A في القوائم المرتبة Ordered

 

مثال 3

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

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

استخدام a القوائم المرتبة Ordered

 

مثال 4

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

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

القوائم المرتبة I في Ordered

 

مثال 5

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

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

قوائم مرتبة Ordered في html استخدام i

 

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

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

و يتم تمييز عناصر القائمة بدائرة سوداء.

مثال 6

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

أنشأنا عنوان من الوسم <h1> و كتبنا به أسماء مشرفين الموقع من.

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

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

 

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

 

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

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

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

مثال 7

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

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

إستخدام square في القوائم الغير مرتبة html

 

مثال 8

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

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

إستخدام circle في القوائم غير مرتبة html

 

مثال 9

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

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

إستخدام disc في القوائم غير مرتبة html

 

مثال 10

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

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

إستخدام none في القوائم غير مرتبة html

 

قوائم الوصف Description

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

من أجل عرض قائمة وصف في صفحة الويب نستخدم الوسوم:

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

مثال 11

<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> قمنا بإنشاء ثلاث عناصر و هي أسماء أصحاب هذا الموقع.

ثم قمنا بإنشاء قائمة ثانية في الأسفل و الوصف هو الدولة و العمر.

قوائم الوصف Description في لغة HTML

 


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com