يوفر HTML لمبرمجي الويب ثلاث طرق لتحديد قوائم المعلومات. يجب أن تحتوي جميع القوائم على عنصر قائمة واحد أو أكثر. قد تحتوي القوائم على -
<ul> - قائمة غير مرتبة. هذا سوف يسرد العناصر باستخدام التنقيط العادي.
<ol> - قائمة مرتبة. سيستخدم هذا مخططات مختلفة من الأرقام لسرد العناصر الخاصة بك.
<dl> - قائمة تعريف. يقوم هذا بترتيب العناصر الخاصة بك بنفس طريقة ترتيبها في القاموس.
قوائم HTML غير مرتبة (Unordered)
القائمة غير المرتبة هي مجموعة من العناصر ذات الصلة التي ليس لها ترتيب أو تسلسل خاص. يتم إنشاء هذه القائمة باستخدام علامة <ul> . يتم تمييز كل عنصر في القائمة برمز نقطي.
<!DOCTYPE html>
<html>
<head>
<title> قوائم غير مرتبة </title>
</head>
<body>
<ul>
<li>Tito</li>
<li>Mido</li>
<li>Ahmed</li>
<li>Hussien</li>
</ul>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
Tito •
Mido •
Ahmed •
Hussien •
سمة النوع (type)
يمكنك استخدام سمة النوع لعلامة <ul> لتحديد نوع الرمز النقطي الذي تريده. بشكل افتراضي ، هو يكون قرص أوdisc . فيما يلي الخيارات الممكنة :
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
فيما يلي مثال استخدمنا فيه <"ul type = "circle>
<!DOCTYPE html>
<html>
<head>
<title> قائمة غير مرتبة </title>
</head>
<body>
<ul type = "circle">
<li>Tito</li>
<li>Mido</li>
<li>Ahmed</li>
<li>Hussien</li>
</ul>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
o Tito
o Mido
o Ahmed
o Hussien
قوائم HTML المرتبة (Ordered)
إذا طُلب منك وضع العناصر الخاصة بك في قائمة ذات تعداد رقمي بدلاً من التعداد النقطي ، فسيتم استخدام قائمة HTML المرتبة. يتم إنشاء هذه القائمة باستخدام علامة <ol>. يبدأ الترقيم بالرقم واحد ويزداد بواحد لكل عنصر قائمة متتالي مرتب تم تمييزه بـ <li>.
<!DOCTYPE html>
<html>
<head>
<title> المرتبة HTML قوائم </title>
</head>
<body>
<ol>
<li>Tito</li>
<li>Mido</li>
<li>Ahmed</li>
<li>Hussien</li>
</ol>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
1. Tito
2. Mido
3. Ahmed
4. Hussien
سمة النوع (type)
يمكنك استخدام سمة النوع لعلامة <ol> لتحديد نوع الترقيم الذي تريده. بشكل افتراضي ، هي رقم. فيما يلي الخيارات الممكنة :
أرقام الحالة الافتراضية <ol type = "1"> - أرقام الأحرف الكبيرة <ol type = "I"> - أرقام صغيرة <ol type = "i"> - الأحرف الكبيرة <ol type = "A"> - الأحرف الصغيرة <ol type = "a"> -
مثال
فيما يلي مثال استخدمنا فيه <"ol type = "1>
<!DOCTYPE html>
<html>
<head>
<title> المرتبة HTML قوائم </title>
</head>
<body>
<ol type = "1">
<li>Tito</li>
<li>Mido</li>
<li>Ahmed</li>
<li>Hussien</li>
</ol>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
1. Tito
2. Mido
3. Ahmed
4. Hussien
مثال
فيما يلي مثال استخدمنا فيه <"ol type = "I>
<!DOCTYPE html>
<html>
<head>
<title> المرتبة HTML قوائم </title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
I . Tito
II . Mido
III . Ahmed
IV . Hussien
مثال
فيما يلي مثال استخدمنا فيه <"ol type = "i>
<!DOCTYPE html>
<html>
<head>
<title> المرتبة HTML قوائم </title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
i . Tito
ii . Mido
iii . Ahmed
iv . Hussien
سمة البداية (start)
يمكنك استخدام سمة البداية لعلامة <ol> لتحديد نقطة البداية للترقيم الذي تحتاجه. فيما يلي الخيارات الممكنة :
<ol type = "1" start = "4"> - تبدأ الارقام بالرقم 4 <ol type = "I" start = "4"> - IV تبدأ الارقام بــ <ol type = "i" start = "4"> - iv تبدأ الارقام بــ تبدأ الأحرف بحرف d <ol type = "a" start = "4"> - تبدأ الأحرف بحرف D <ol type = "A" start = "4"> -
قوائم التعريف HTML
يدعم HTML و XHTML نمط قائمة يسمى قوائم التعريف حيث يتم سرد الإدخالات كما هو الحال في قاموس أو موسوعة. قائمة التعريفات هي الطريقة المثلى لتقديم مسرد أو قائمة بالمصطلحات أو قائمة اسم / قيمة أخرى.
قائمة التعريفات تستخدم العلامات الثلاثة التالية.
<dl> - يحدد بداية القائمة
<dt> - مصطلح
<dd> - تعريف المصطلح
</dl> - يحدد نهاية القائمة
<!DOCTYPE html>
<html>
<head>
<title> قوائم التعريف </title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol