تطبيق وصل wassll لمتابعة مخصصات المحروقات

القوائم Lists في html

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

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

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

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

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

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

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

مثال 1

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

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

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

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

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

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

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

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

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

مثال 2

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

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

مثال 3

<h1> administrators: </h1>
<ol type="a">
	<li>Muhammad</li>
	<li>Ahmed</li>
	<li>Saja</li>
</ol>

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

مثال 4

<h1> administrators: </h1>
<ol type="I">
	<li>Muhammad</li>
	<li>Ahmed</li>
	<li>Saja</li>
</ol>

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

مثال 5

<h1> administrators: </h1>
<ol type="i">
	<li>Muhammad</li>
	<li>Ahmed</li>
	<li>Saja</li>
</ol>

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

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

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

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

مثال 6

<h1> administrators: </h1>
<ul>
	<li>Muhammad</li>
	<li>Ahmed</li>
	<li>Saja</li>
</ul>

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

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

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

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

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

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

مثال 7

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

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

مثال 8

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

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

مثال 9

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

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

مثال 10

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

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

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

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

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

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

مثال 11

<dl>
	<dt>Admin: </dt>
	<dd>- Muhammad</dd>
	<dd>- Ahmed</dd>
	<dd>- Saja</dd>
	<dt>From and Age: </dt>
	<dd>- Syria 30</dd>
	<dd>- Yemen 20</dd>
	<dd>- Sudan 29</dd>
</dl>

أنشأنا قائمة وصف بواسطة الوسم <dl> ثم أنشأنا الوسم <dt> من أجل وضع عنوان للقائمة.

و عن طريق الوسم <dd> قمنا بإنشاء ثلاث عناصر و هي أسماء أصحاب هذا الموقع.

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