تعريف قائمة نقطية. القوائم المحددة. علامة القائمة على شكل دائرة فارغة

تسمح لك القوائم النقطية بتقسيم النص الكبير إلى كتل منفصلة ، يبدأ كل منها برصاصة - عادةً ما تكون نقطة صغيرة. هذا يلفت انتباه القارئ إلى النص ويزيد من قابليته للقراءة.

مع العنصر

في المكان الذي تلتقي فيه
- تحتوي القائمة على مسافات بادئة في الأعلى والأسفل ؛
- يتم عرض العلامات كدائرة مملوءة بشكل افتراضي ؛
- يتم تحويل كل عنصر من عناصر القائمة إلى اليمين بالنسبة إلى النص الأساسي.
يوضح الشكل 1 نتيجة المثال ، موضحًا الميزات المذكورة أعلاه لقائمة التعداد النقطي.
أرز. 1. عرض القائمة النقطية
نوع العلامة
يمكن أن تتخذ العلامات أحد الأشكال الثلاثة: دائرة مملوءة (افتراضي) ودائرة فارغة ومربع. لتحديد نوع العلامة ، استخدم خاصية list-style-type أو نمط القائمة العام (المثال 1). تنطبق القيم التالية:
- قرص - علامات على شكل دائرة مملوءة ؛
- دائرة - علامات على شكل دائرة غير مملوءة ؛
- علامات مربعة.
مثال 1 - تغيير مظهر العلامة
القوائم
- سبولكي
- القبر
- بني داكن
يوضح المثال كيفية إنشاء قائمة نقطية تستخدم مربعًا صغيرًا بلون خالص كرمز تعداد نقطي. على الرغم من أن عدد القيم يقتصر على ثلاثة ، فإن هذا لا يعني أن لدينا ثلاثة أنواع فقط من العلامات في حوزتنا. هناك العديد من الأحرف الخاصة التي يمكن أن تعمل بنجاح كرمز علامة. "برغي" لهم مباشرة إلى
لن ينجح ، لذلك عليك العمل. للقيام بذلك ، قم بإخفاء علامات القائمة باستخدام خاصية نمط القائمة بقيمة لا شيء وفي النص قبل المحتوى
أضف الطابع الخاص بك مع :: قبل العنصر الزائف. في المثال 2 ، يعمل المثلث كعلامة.
مثال 2: استخدام :: before
القوائم
- سبولكي
- القبر
- بني داكن
تظهر نتيجة هذا المثال في الشكل. 2. نظرًا لأن استخدام خاصية نمط القائمة مع القيمة لا شيء لا يزيل العلامات على الإطلاق ، ولكنه يخفيها فقط عن العرض ، يتم إزاحة القائمة إلى اليمين. للتخلص من هذه الخصوصية ، يضيف المثال خاصية المسافة البادئة للنص بقيمة سالبة. وتتمثل مهمتها في نقل النص إلى اليسار بمقدار حرف واحد.
أرز. 2. علامات التعسفي في القائمة
ليس من الضروري أن يكون الحرف بتنسيق سداسي عشري ، بل يمكن أيضًا إدراجه مباشرةً في النص. الشيء الرئيسي هو حفظ المستند بترميز UTF-8 وأن يدعمه المحرر. يمكن أخذ الشخصيات نفسها ورموزها ، على سبيل المثال ، من LibreOffice Writer (الشكل 3).
أرز. 3. اختيار الرمز في LibreOffice
قائمة بالرصاص مرسومة
تسمح لك الأنماط بتعيين أي صورة مناسبة كعلامة من خلال خاصية list-style-image. القيمة هي مسار نسبي أو مطلق لملف الرسوم ، كما هو موضح في المثال 3.
مثال 3: استخدام صورة كعلامة
القوائم
- سبولكي
- القبر
- بني داكن
من الأفضل اختيار صورة ذات حجم صغير حتى لا تتحول عناصر القائمة إلى تعليقات توضيحية. على التين. يوضح الشكل 4 نتيجة إجراء المثال لاستخدام الصور الصغيرة كعلامات.
أرز. 4. الرسم كعلامة
صورة نمط القائمة لها بعض العيوب:
- لا يمكن تحريك النمط لأعلى أو لأسفل ؛
- في المتصفحات المختلفة ، قد يختلف موضع الصورة بالنسبة للنص.
يمكن تجنب هذه المشكلات باستخدام خاصية الخلفية التي تحدد صورة الخلفية. لكل عنصر قائمة

نقوم بإزالة العلامات الأصلية وتعيين صورة الخلفية دون تكرار. وحتى لا يتم عرض النص أعلى الصورة ، نقوم بتحويله إلى اليمين من خلال المساحة المتروكة لليسار (مثال 4).

مثال 4 استخدام الخلفية

Ul (margin-left: -1em ؛) li (list-style: none ؛ الخلفية: url (images / bullet.png) لا تكرار 0 2 بكسل ؛ المساحة اليسرى: 20 بكسل ؛)

موضع النص والرصاصة

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


داخل	الخارج

أرز. 5. وضع علامات بالنسبة للنص

تُستخدم خاصية list-style-position للتحكم في موضع العلامات. لها معنيان: الخارج - يتم وضع الرموز النقطية خارج كتلة النص (هذا هو الإعداد الافتراضي) والداخل - تعد الرموز النقطية جزءًا من كتلة النص ويتم عرضها في عنصر القائمة (المثال 5).

مثال 5. قم بتغيير موضع العلامات

القوائم

قبل بدء العمل ، تحقق من توفر المعدات المضمنة في مجموعة 3BM.
في حالة عدم وجود جهاز طرفي واحد أو أكثر ، يجب عليك الاتصال على الفور بالفريق الفني في CC.
بعد فحص منطقة عملك بصريًا ، يمكنك تشغيل 3BM بعناية.

تظهر نتيجة هذا المثال في الشكل. 6.

مرحبا عزيزي قراء موقع المدونة. اليوم ، تحت هذا العنوان ، أود التحدث عن قوائم Html المختلفة التي يمكن إنشاؤها بناءً على علامات UL و OL و LI و DL المصممة خصيصًا لهذا الغرض. بمساعدة زوج من UL و LI ، يتم إنشاء قوائم ذات تعداد نقطي ، بمساعدة قوائم مرقمة OL و LI ، وبمساعدة العناصر DL و DT و DD ، يتم إنشاء ما يسمى بقوائم التعريفات. سننظر أيضًا بإيجاز في مبادئ إنشاء الهياكل المتداخلة.

أريد أن أذكرك بأننا تمكنا بالفعل من التحدث عن أساسيات التخطيط الحديث والجداول (). بالإضافة إلى ذلك ، تطرقنا إلى الأساسيات ، حسنًا ، تعلمنا من خلالها.

قوائم نقطية تستند إلى علامات UL و LI

يتم استخدام علامة UL لإنشاء قوائم ذات تعداد نقطي ، ويتم استخدام علامة OL لإنشاء قوائم مرقمة. يتم إقران هذه العلامات ومنعها ، تمامًا مثل عنصر LI.

توجد عناصر القائمة المنفصلة بين علامتي الفتح والإغلاق ، والتي يتم تضمينها بدورها في عنصر الفتح والإغلاق LI. في أعلى وأسفل قوائم Html ، يضيف المستعرض مسافة بادئة من سطر واحد ، على غرار المسافة البادئة التي تم إنشاؤها بواسطة علامة الفقرة.

دعنا نرى ، على سبيل المثال ، نسخة ذات تسمية قد تبدو كالتالي:

السطر الأول
ثانيا
العنصر الأخير

داخل علامات الفتح والإغلاق UL ، يمكن وضع عناصر LI فقط ، ويمكنك بالفعل داخل هذه العناصر (الفقرات) إدراج أي محتوى (نص ، صور ، عناوين ، فقرات ، روابط ، وحتى قوائم أخرى).

أولئك. تعمل UL فقط على تنظيم قائمة نقطية (غير مرتبة) ، ويتم تنفيذ كل ما تراه على صفحة ويب بداخلها باستخدام محتوى عناصر LI.

بالنسبة إلى UL ، يمكنك تغيير مظهر العلامة عن طريق تعيين قيم مختلفة لسمة "النوع" فيها. إذا لم يتم تحديد "النوع" (إدارة مظهر العلامات) لعنصر UL ، فسيتم عرض نوع العلامة الافتراضية (القرص عبارة عن دائرة مملوءة بلون النص):

في الأمثلة أعلاه ، كتبنا سمة "النوع" في عنصر UL ، باستخدام هذا النوع من العلامات لجميع العناصر. ولكن يمكن أيضًا كتابة سمة "النوع" لكل علامة LI فردية ، مع تعيين نوع العلامة الخاصة بها لهذا العنصر.

مثال لقائمة نقطية بأنواع تعداد نقطي مختلفة لكل عنصر:

علامة قرص ممتلئة
علامة على شكل قرص غير مظلل
ميدان

القوائم المرقمة في Html بناءً على علامة OL

لإنشاء قائمة مرقمة ، يتم استخدام علامات OL ، والتي سيتم تحديد موقع عناصر LI فيها مرة أخرى. OL و LI ، كما ذكرت سابقًا ، على مستوى الكتلة (أي أنها تميل إلى شغل كل المساحة المتاحة لها في العرض) ولا يمكن وضع أي شيء داخل OL باستثناء عناصر LI.

اتضح أن OL و UL هي علامات خدمة مطلوبة فقط لإخبار المتصفح بنوع القائمة التي نشكلها (نقطية أو مرقمة). في حالة الرقم واحد ، على يسار كل عنصر ، لن نرى علامة ، بل رقمًا ونقطة خلفه:

السطر الأول
النقطة الثانية
الخط الثالث

كما ذكرت أعلاه ، تتمتع عناصر UL و OL و LI بالقدرة على استخدام سمة TYPE. يسمح لك بتعيين نوع العلامة أو تحديد الأرقام أو الأحرف التي سيتم ترقيم عناصر القائمة بها. بالنسبة لقائمة مرتبة ، يمكن لمعلمات هذه السمة أن تأخذ القيم التالية:

مثال لقائمة مرقمة بأنواع مختلفة من الترقيم لكل عنصر:
1. مرقمة بأرقام رومانية كبيرة
2. الترقيم بأحرف لاتينية صغيرة
3. الترقيم بأرقام رومانية صغيرة
عند إنشاء قوائم مرقمة ، من الممكن أيضًا بدء الترقيم ليس من واحد ، ولكن من الرقم المحدد في سمة START. فمثلا:
1. يبدأ العنصر الأول الذي تم تحديد رقمه في علامة OL بواسطة السمة = "23"
2. العنصر التالي ، برقم واحد آخر
3. واحد آخر
بالنسبة إلى OL ، يمكنك أيضًا بدء ترقيم جديد من أي قيمة ، بدءًا من أي عنصر ، عن طريق كتابة سمة VALUE مع الرقم المطلوب في LI الافتتاحي لهذا العنصر. فمثلا:
1. البند الأول رقم واحد
2. سيتلقى هذا العنصر الرقم المحدد في قيمة السمة = "32"
3. عنصر مع عدد كبير
تصميم مظهر القوائم في CSS (أوراق الأنماط)
ولكن ، كقاعدة عامة ، لا يتم الآن تعيين مظهر العلامات من خلال سمة TYPE ، ولكن يتم كتابة الخصائص المقابلة لها.
سأقدم هنا مثالاً على العلامات المختلفة للقوائم غير المرتبة ، والتي يتم تعيين مظهرها من خلال ملف منفصل به أوراق أنماط متتالية.
- النقطة الأولى
- ثانيا
- آخر
لكننا سنتحدث عنها في المقالات المستقبلية. هذه هي الطريقة التي يتم بها تعيين مظهر علامات UL على هذه المدونة. تُستخدم الصور كعلامات: للعناصر العادية لقائمة غير مرقمة - ، للعناصر المتداخلة لقائمة غير مرقمة -.
القوائم الخاصة والمتداخلة في كود Html
النوع الثالث والأخير يسمى "قوائم التعريف" ويتم تعيينها باستخدام ثلاث علامات - DL و DT و DD. يخبر DL للمتصفح أن قائمة التعريفات ستتبع.
عادةً ما يتم استخدام هذا النوع (أو كان من المفترض استخدامه) لكتابة مدخلات القاموس التي تتكون من مصطلحات (مضمنة في علامات DT) وأوصافها (المضمنة في علامات DD).

الفصل الدراسي الأول

وصف

الفصل الثاني

وصفه

إذا نظرت إلى المثال أعلاه ، ستلاحظ أن عنصر DD (وصف المصطلح) قد تم إزاحته (بمقدار 40 بكسل) بالنسبة إلى عنصر DT (المصطلح نفسه).
بشكل عام ، تعد DL و DT و DD علامات كتلة ، ويمكن فقط إدراج المحتوى الذي يحتوي على علامات مضمنة داخل عنصر DT (اتضح أنه لا يمكن استخدام عناصر كتلة العناوين والفقرات داخل DT). وداخل علامات DD ، يمكنك إدراج أي عناصر ، مضمنة وكتلة.
قائمة متداخلةفي Html ، يتم إنشاؤه عن طريق القياس مع عنصر بسيط ، ولكن داخل القائمة الرئيسية ، يتم تضمين بعض العناصر مرة أخرى في علامة الفتح والإغلاق UL أو OL.
يرجى ملاحظة أن LI الختامي للعنصر الذي سيتم إنشاء العنصر المتداخل فيه يتم وضعه فقط بعد الكود الكامل للقائمة المتداخلة (هذا مهم جدًا لعرضه الصحيح على صفحة الويب). قد تبدو القائمة المتداخلة كما يلي:
1. أول فقرة رئيسية مرقمة
2. النقطة الثانية
  - أول عنصر متداخل المسمى
  - ثانيا
  - النقطة الثالثة والأخيرة من المعلمة
3. العنصر الثالث من المرقمة
كل التوفيق لك! نراكم قريبا على موقع صفحات المدونة
قد تكون مهتمًا
كيفية إدراج ارتباط وصورة (صورة) في علامات HTML - IMG و A. حدد ، خيار ، Textarea ، Label ، Fieldset ، Legend - علامات Html لشكل القائمة المنسدلة وحقل النص
نماذج Html للموقع - علامات Form، Input and Select، Option، Textarea، Label وغيرها لإنشاء عناصر نموذج الويب
كيف يتم تعيين الألوان في كود Html و CSS ، واختيار ظلال RGB في الجداول ، ونتائج Yandex والبرامج الأخرى
التضمين والعنصر - علامات Html لعرض محتوى الوسائط (فيديو ، فلاش ، صوت) على صفحات الويب
علامات وسمات العناوين H1-H6 والخط الأفقي Hr وفاصل الأسطر Br والفقرة P وفقًا لمعيار Html 4.01
الجداول في Html - علامات Table و Tr و Td ، بالإضافة إلى Colspan و Cellpadding و Cellspacing و Rowspan لإنشائها
ما هي لغة ترميز النص التشعبي Html وكيفية سرد كافة العلامات في مدقق W3C
الخط (الوجه والحجم واللون) و Blockquote والعلامات المسبقة - تنسيق نص مهمل بتنسيق HTML خالص (بدون استخدام CSS)
Iframe و Frame - ما هما وما أفضل طريقة لاستخدام الإطارات في Html
Img - علامة Html لإدراج صورة (Src) ، ومحاذاتها ولفها بنص (محاذاة) ، وكذلك تعيين خلفية (خلفية)

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

المثال 11-1 هو رمز HTML لإضافة قائمة ذات تعداد نقطي إلى صفحة ويب.

مثال 11.1. قم بإنشاء قائمة ذات تعداد نقطي

قائمة نقطية

تشيبوراشكا
التمساح جينا
شابوكليك
فأر لاريسا

تظهر نتيجة هذا المثال في الشكل. 11.1.

أرز. 11.1. عرض قائمة نقطية

لاحظ المساحة المتروكة أعلى القائمة وأسفلها ويسارها. تتم إضافة هذه المسافات البادئة تلقائيًا.

يمكن أن تتخذ العلامات أحد الأشكال الثلاثة: دائرة (افتراضي) ، ودائرة ، ومربع. يتم استخدام سمة النوع للعلامة لتحديد نمط العلامة.

نوع القائمة	كود HTML	مثال
قائمة بالرصاص على شكل دائرة		الأول ثانيا ثالث
قائمة بالرصاص على شكل دائرة		الأول ثانيا ثالث
قائمة ذات تعداد نقطي مربع		الأول ثانيا ثالث

قد يختلف مظهر العلامات اختلافًا طفيفًا في المتصفحات المختلفة ، وكذلك عند تغيير الخط وحجم النص.

يظهر إنشاء قائمة بعلامات مربعة في المثال 11.2.

مثال 11.2. نوع العلامات

قائمة نقطية

تغيير المعتقدات

تغيير العقيدة الدينية (للاختيار من بينها: البوذية ، الكونفوشيوسية ، الهندوسية). عرض خاص - اليهودية والإسلام معًا ؛
تغيير في الإيمان بعصمة الحبيب ؛
الاعتقاد بوجود كائنات فضائية ؛
تفضيل النظام السياسي ، باعتباره الأفضل من نوعه (للاختيار من بينها: الإقطاع ، والاشتراكية ، والشيوعية ، والرأسمالية).

تظهر نتيجة هذا المثال في الشكل. 11.2.

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

يمكن تحويل هذه القوائم بأي طريقة تريدها. كل هذا يتوقف على خيالك. أولاً ، سننظر في القوائم القياسية ، كما هو الحال في محرر Word ، ثم سنقوم بتحسينها وتصميمها بحيث لا يمكن التعرف عليها.

قائمة مرقمة HTML

يمكن إنشاء رقم عادي باستخدام العلامات التالية:

العنصر الأول في القائمة

البند الثاني في القائمة

البند الثالث في القائمة

تبدو القوائم البسيطة هكذا

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

، ثم يضعها تلقائيًا قبلها

وبالتالي ، يمكن عمل القوائم كما هو موضح أدناه.

لكن من وجهة نظر المحترفين ، هذا غير صحيح.

يتم إنشاء القوائم غير المرتبة (أو النقطية) بنفس الطريقة تمامًا ، ولكن بدلاً من علامة ol ، تتم كتابتها ul.

لا توجد أرقام أو أحرف فيه - فقط رموز مختلفة تسمى علامات.

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

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

لإنشاء القائمة الموضحة في المثال أعلاه ، تحتاج إلى كتابة ما يلي.

لاحظ أنه في هذا الرمز ، على عكس الأمثلة الأولى ، تمت إضافة سمة النوع. بفضله ، يمكنك تحديد نوع الفرز لكل من القوائم المرقمة والنقطية.

بالنسبة إلى الترقيم ، نشير إلى الأبجدية أو نوع الأرقام ، وبالنسبة للحالات الأخرى - نوع العلامة.

إذا كنت تستخدم علامة HTML خاصة ، فيمكن أن تكون القائمة المرقمة هي ما تريد.

يمكنك تحديد سمة النوع بأي قيمة من الجدول. أو ، في فئة نمط css ، حدد نوع نمط القائمة مع نوع الفرز المطلوب.

ترجمة القيم بسيطة للغاية. معرفة أساسية كافية باللغة الإنجليزية. ولكن حتى إذا كنت لا تستطيع ترجمة الكلمات "دائرة" ، "مربع" ، وما إلى ذلك ، يمكنك أن تفهم بصريًا ما ستكون عليه النتيجة عندما تحدد هذه القيم في سمة النوع.

للقوائم المرقمة ، استخدم الخيارات التالية:

1 - أرقام عربية ؛
أ - الحروف الكبيرة ؛
أ - أحرف لاتينية صغيرة ؛
أنا - أرقام رومانية كبيرة ؛
ط - أرقام رومانية صغيرة.

الافتراضي هو دائمًا قائمة بها. أي إذا لم تحدد أي شيء ، فهذا يكافئ النوع = "1".

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

بالإضافة إلى ذلك ، يمكن استخلاص الاستنتاج بترتيب عكسي. للقيام بذلك ، عليك أن تكتب معكوسًا.

تصميم القائمة

يمكن تصميم قائمة HTML المرقمة بشكل جميل لدرجة أنك قد لا تدرك على الفور أن هذه قائمة عادية وليست صورة تم إنشاؤها في Photoshop.

فيما يلي أمثلة على القوائم الجميلة.

كما ترى من المثال ، يمكنك تغيير مظهر الترقيم والعناصر نفسها.

يمكنك إنشاء قائمة منتظمة مثل هذه.

في أنماط css ، تحتاج إلى تحديد تصميم علامات ol. يرجى ملاحظة أنه في هذه الحالة سيتم تطبيق الإعدادات على جميع قوائم الموقع بأكمله حيث يتم استخدام ملف النمط هذا.

فكر أولاً في الخيار بتصميم قائمة مستديرة. العودة إلى رمز القائمة. تم تحديد فئة القائمة المقربة هناك. مع هذه الفئة التي تحتاج إلى العبث بها لصنع مثل هذا الجمال. يمكنك تسمية الفصل كما تريد.

فكر الآن في تصميم المربع.

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

يجب أن يتوقع مصمم التخطيط المحترف ويفهم أنه ليس كل المستخدمين يستخدمون أجهزة كمبيوتر حديثة. ليس لدى الجميع Windows 7 و 8 و 10. هناك نسبة مئوية من المستخدمين لا يزالون يستخدمون Windows XP ويستخدمون إصدارات أقدم من متصفح Internet Explorer.

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

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

افعل شيئًا مناسبًا للجميع أو ضع في اعتبارك جميع خيارات المتصفح.

توفر لغة HTML مجموعة خاصة من العلامات لتقديم المعلومات في شكل قوائم. القوائم هي واحدة من أكثر أشكال عرض البيانات شيوعًا في كل من المستندات الإلكترونية والمطبوعة. نصادف قوائم بشكل شبه يومي ، سواء كانت قائمة باحتياجات التسوق في المتجر ، أو الطلاب في الفصل ، أو ببساطة المهام التي يجب القيام بها. تتوفر القدرة على تنظيم هياكل القوائم في العديد من برامج تحرير النصوص ، وعلى وجه الخصوص ، يحتوي معالج النصوص القوي Microsoft Word على أدوات ملائمة لتنسيق القوائم من مختلف الأنواع (تمت مناقشة إمكانيات إنشاء قوائم HTML باستخدام Microsoft Word في الفصل الثامن). فيما يلي بعض الحالات التي يكون فيها استخدام القوائم أمرًا ملائمًا للغاية:

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

لاحظ أن العناصر المذكورة أعلاه منظمة فقط في شكل هيكل قائمة.

يوفر HTML الأنواع الرئيسية التالية من القوائم: قائمة التعداد النقطي والرقمي وقائمة التعريف. تُستخدم العلامات التالية لتنفيذ قوائم بأنواع مختلفة:

, , . بمساعدة أنواع مختلفة من القوائم المضمنة في مستند ، يمكن تنفيذ مجموعة متنوعة من الميزات ، والتي يكون وصفها موضوع هذا الفصل. يتم النظر في ميزات قوائم البناء من مختلف الأنواع ، وكذلك استخدام القوائم المتداخلة.

قائمة نقطية

أحد أنواع القوائم المطبقة في HTML هو القائمة النقطية. خلاف ذلك ، تسمى القوائم من هذا النوع غير مرتبة أو

مضطرب. غالبًا ما يستخدم الاسم الأخير كترجمة رسمية لاسم العلامة المطابق.

في القائمة النقطية ، لإبراز عناصرها ، يتم استخدام أحرف خاصة ، تسمى علامات القائمة (تسمى غالبًا الرموز النقطية ، وهي السبر الرسمي للمصطلح الإنجليزي bullet). يتم تحديد مظهر علامات القائمة بواسطة المستعرض ، وعند إنشاء قوائم متداخلة ، تقوم المستعرضات تلقائيًا بتنويع مظهر علامات مستويات مختلفة من التداخل.

العلامات

و<LI>

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

يجب أن يبدأ كل عنصر في القائمة بعلامة

(LI - عنصر قائمة ، عنصر قائمة). بطاقة شعار
لا يحتاج إلى علامة إغلاق مناسبة ، على الرغم من أن وجودها ليس ممنوعًا من حيث المبدأ. تبدأ المستعرضات عادةً كل عنصر قائمة جديد في سطر جديد عند عرض مستند.

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

مثال قائمة نقطية
أرز. 2.1.عرض المستعرض لقائمة نقطية

لاحظ أنه بالإضافة إلى عناصر القائمة المميزة بالعلامة
، قد تكون عناصر HTML الأخرى موجودة. في المثال أعلاه ، أحد هذه العناصر هو نص عادي ، وهو ليس عنصر قائمة ، ولكنه يلعب دور العنوان الخاص به.

ملحوظة

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

في العلامة