يوفر HTML مجموعة خاصة من العلامات لعرض المعلومات في شكل قوائم. تعد القوائم أحد أكثر أشكال عرض البيانات استخدامًا، سواء في المستندات الإلكترونية أو المطبوعة. نصادف قوائم كل يوم تقريبًا - يمكن أن تكون قائمة بالمشتريات الضرورية في أحد المتاجر، أو الطلاب في الفصل، أو ببساطة الأشياء التي يجب القيام بها. تتوفر القدرة على تنظيم هياكل القائمة في العديد من برامج تحرير النصوص، على وجه الخصوص، يحتوي معالج النصوص القوي Microsoft Word على أدوات ملائمة لتنسيق قوائم من أنواع مختلفة (تتم مناقشة إمكانيات إنشاء قوائم HTML باستخدام Microsoft Word في الفصل 8). فيما يلي عدد من الحالات التي يكون فيها استخدام القوائم مناسبًا تمامًا:
- دمج أجزاء من المعلومات في بنية واحدة لإنشاء مظهر قابل للقراءة.
- وصف العمليات المعقدة خطوة بخطوة.
- ترتيب المعلومات بأسلوب جدول المحتويات، مع فقرات تشير إلى الأقسام ذات الصلة من المستند.
لاحظ أن النقاط المذكورة أعلاه منظمة بدقة في شكل بنية قائمة.
يوفر HTML الأنواع الرئيسية التالية من القوائم: قائمة ذات تعداد نقطي ومرقمة وقائمة التعريفات. تُستخدم العلامات التالية لتنفيذ قوائم من أنواع مختلفة:
- ,
- (LI - عنصر القائمة، عنصر القائمة). بطاقة شعار
- لا يتطلب علامة إغلاق مقابلة، على الرغم من أن وجودها غير محظور من حيث المبدأ. تبدأ المتصفحات عادةً كل عنصر قائمة جديد في سطر جديد عند عرض مستند.
المعلومات المقدمة كافية لإنشاء قائمة ذات تعداد نقطي أساسي. دعونا نعطي مثالاً لمستند HTML باستخدام قائمة ذات تعداد نقطي، والتي يظهر عرضها بواسطة المتصفح في الشكل. 2.1.
مثال على القائمة ذات التعداد النقطي - بُرْجُ الحَمَل
- برج الثور
- توأمان
- سرطان
- أسد
- بُرْجُ العَذْراء
- مقاييس
- برج العقرب
- برج القوس
- بُرْجُ الجَدْي
- برج الدلو
- سمكة
علامات زودياك:
أرز. 2.1.عرض المتصفح للقائمة النقطية
لاحظ أنه بالإضافة إلى عناصر القائمة المميزة بالعلامة
- قد تكون عناصر HTML أخرى موجودة. في المثال أعلاه، أحد هذه العناصر هو نص عادي، وهو ليس عنصر قائمة، ولكنه يعمل كعنوان لها.
ملحوظة
تشير بعض الكتب المدرسية الخاصة بلغة HTML إلى ضرورة استخدام علامة الحاوية لتعيين عنوان القائمة.
(LH - رأس القائمة، رأس القائمة). لم يتم التعرف على هذه العلامة حاليًا بواسطة أي متصفحات شائعة وليست جزءًا من مواصفات HTML. وبذلك يصبح استخدامه بلا جدوى، رغم أنه لن يؤدي إلى أي أخطاء. في العلامة
- يمكن تحديد معلمتين: COMPACT وTYPE.
- .
إدخال المثال:
-
.
ملحوظة
تفسر المستعرضات مواصفات نوع التعداد النقطي لعنصر قائمة فردي بشكل مختلف. يقوم متصفح Netscape بتغيير مظهر العلامة لهذه العلامة وجميع العلامات اللاحقة حتى تتم مواجهة إعادة التعريف التالية لمظهر العلامة. يقوم Internet Explorer بتغيير مظهر العلامة لهذا العنصر فقط.
علامات القائمة الرسومية
يمكنك استخدام الصور الرسومية كقوائم نقطية، والتي تُستخدم على نطاق واسع لإنشاء مستندات HTML جذابة ومصممة جيدًا. في الواقع، لا يتم توفير هذا الاحتمال مباشرة من خلال لغة HTML، ولكن يتم تنفيذه بشكل مصطنع إلى حد ما. هذا لا يعني أن القيام بذلك غير مستحسن أو مستهجن، ولكن فقط أنه لن يتم استخدام بنيات لغة HTML خاصة هنا.
لفهم الفكرة، عليك أن تفهم آلية تنفيذ القوائم على صفحات HTML. وتبين أن علامة القائمة
- (كما هو الحال بالفعل، قائمة العلامات من الأنواع الأخرى، التي تمت مناقشتها أدناه) تؤدي مهمة واحدة - فهي تخبر المتصفح أنه يجب عرض جميع المعلومات الموجودة بعد هذه العلامة إلى اليمين (مسافة بادئة) بمقدار معين. العلامات
- ، والتي تشير إلى عناصر القائمة الفردية، توفر علامات قياسية لعناصر القائمة.
إذا أردنا إنشاء قائمة باستخدام العلامات الرسومية، فيمكننا الاستغناء عن العلامات تمامًا
- . سيكون كافيًا إدراج الصورة الرسومية المطلوبة قبل كل عنصر في القائمة. المشكلة الوحيدة التي تحتاج إلى حل هي فصل عناصر القائمة عن بعضها البعض. يمكنك استخدام علامات الفقرة لهذا الغرض
أو فرض تغذية الخط
. مثال على تنفيذ قائمة بعلامات رسومية، يظهر عرضها في الشكل. 2.2 موضح أدناه:قائمة نقطية علامات زودياك:
بُرْجُ الحَمَل
أرز. 2.2.قائمة ذات تعداد نقطي تحتوي على تعداد نقطي رسومي
في المثال الموضح، يتم استخدام الملف الرسومي Green_ball.gif كعلامة لعنصر القائمة. لاحظ أن استخدام الرسومات على صفحات HTML يمكن أن يزيد بشكل كبير من كمية المعلومات المنقولة. ومع ذلك، في هذه الحالة هذه الزيادة ضئيلة للغاية. هنا يتم استخدام نفس الملف لجميع العلامات،
والتي سيتم إرسالها مرة واحدة فقط. أحجام ملفات الصور الصغيرة هي أيضًا صغيرة جدًا.
ملحوظة
وتتم مناقشة تقنيات إنشاء القوائم باستخدام الرموز النقطية الرسومية تباعًا في الفصل الثامن.
قائمة مرقمة
نوع آخر من القائمة المطبقة في HTML هو القائمة المرقمة. وبخلاف ذلك، تسمى القوائم من هذا النوع مرتبة. غالبًا ما يتم استخدام الاسم الأخير كترجمة رسمية لاسم العلامة المقابلة
- ، والتي يتم من خلالها تنظيم القوائم من هذا النوع في مستندات HTML (OL - قائمة مرتبة، قائمة مرتبة).
- .
فيما يلي مثال لمستند HTML باستخدام قائمة مرقمة: عرض منهاالمتصفح موضح في الشكل 2.3.
مثال على قائمة مرقمة - سيريوس
- ك أنوب
- السماك القطبية
- ألفا قنطورس
- فيجا
- تسمية ك
- ريجل
- بروسيون
- أشيرنار
- بيتا سنتوري
- Wetelgeuse
- الديبران
. . .- ميزار
. . .- القطبية
ألمع النجوم التي يمكن رؤيتها من الأرض:
أرز. 2.Z.قائمة مرقمة
في العلامة
- يمكن تحديد المعلمات التالية: COMPACT وTYPE وSTART.
- .
إدخال المثال:
- .
معلمة علامة البداية
- يسمح لك ببدء ترقيم القائمة من شيء آخر غير واحد. يجب أن تكون قيمة معلمة START دائمًا رقمًا طبيعيًا، بغض النظر عن نوع ترقيم القائمة. هنا مثال:
- بالنسبة للقوائم المرقمة، يسمح باستخدام معلمات TYPE وVALUE. يمكن أن تأخذ المعلمة TYPE نفس القيم الخاصة بالعلامة
- .
- .
ملحوظة
تفسر المستعرضات نوع الترقيم لعنصر قائمة فردي بشكل مختلف. يقوم متصفح Netscape بتغيير مظهر الترقيم لهذا العنصر وجميع العناصر اللاحقة حتى تتم مواجهة التجاوز التالي. يقوم Internet Explorer بتغيير مظهر الرقم لهذا العنصر فقط.
زقيمة معلمة علامة VALUE
- - يسمح لك بتغيير رقم عنصر القائمة المحدد. يؤدي هذا إلى تغيير ترقيم جميع العناصر اللاحقة. التطبيق النموذجي عبارة عن قوائم تحتوي على بعض العناصر المفقودة. تم تقديم مثال على هذه القائمة أعلاه (الشكل 2.3). ويقدم قائمة مرتبة لألمع النجوم، حيث يحتوي المركزان 58 و 75 على نجوم يمكن رؤيتها بوضوح عند خطوط العرض لدينا (المزار هو ألمع نجم في كوكبة الدب الأكبر، والبولاريس هو ألمع نجم في كوكبة الدب الأصغر). .
دعونا نعطي مثالا أصليا آخر لاستخدام أنواع مختلفة من الترقيم. يحتوي كود HTML أدناه على ثلاث قوائم بأرقام مختلفة. لسهولة المشاهدة، يتم وضع كل قائمة في خلية جدول منفصلة. جميع القوائم الثلاث متطابقة وتختلف فقط في نوع الترقيم: في العمود الأول من الجدول توجد أرقام عربية، وفي العمود الثاني - أرقام رومانية، وفي العمود الثالث يكون الترقيم بأحرف لاتينية. يرجى ملاحظة أن عناصر القائمة فارغة، أي بعد أي علامة
- ليس هنالك معلومات. ومثال على هذا النوع يمكن استخدامه كجدول المراسلات بين كتابة الأرقام بالأرقام العربية والأرقام الرومانية. اتضح أنه يمكن استخدام أي متصفح يدعم القوائم كمولد لمثل هذا الجدول (الشكل 2.4)، ما عليك سوى كتابة كود HTML المحدد. يعمل الترقيم بالأرقام الرومانية بشكل صحيح حتى القيمة 3999. ومن خلال دراسة العمود الأيمن، يمكنك فهم كيفية إجراء الترقيم بالأحرف الرومانية. بمجرد استنفاد الترقيم المكون من حرف واحد (من A إلى Z)، يتم اعتبار الرقم المكون من حرفين الأول هو الرقم التالي - AA، وما إلى ذلك.
استخدام أنواع مختلفة من الترقيم في القوائم -
. . .
-
. . .
-
. . .
أرز. 2.4.أنواع مختلفة من ترقيم قائمة HTML
قائمة التعاريف
قوائم التعريفات، والتي تسمى أيضًا قواميس التعريف، هي نوع خاص من القوائم. على عكس الأنواع الأخرى من القوائم، يتكون كل عنصر في قائمة التعريفات دائمًا من جزأين. يحتوي الجزء الأول من عنصر القائمة على المصطلح الذي يتم تعريفه، ويحتوي الجزء الثاني على نص على شكل إدخال قاموس يكشف معنى المصطلح.
يتم تحديد قوائم التعريف باستخدام علامة الحاوية
- (قائمة التعريفات). داخل الحاوية مع العلامة
- (مصطلح التعريف) يتم وضع علامة على المصطلح الذي يتم تعريفه، والعلامة
- (وصف التعريف) - فقرة مع تعريفها. للعلامات
- و
- يمكنك حذف علامات الإغلاق المقابلة.
بشكل عام، يتم كتابة قائمة التعاريف على النحو التالي:
- شرط
- تعريف المصطلح
في النص بعد العلامة
- لا يمكن استخدام عناصر مستوى الكتلة مثل علامات الفقرة
أو رؤوس
-
. كقاعدة عامة، يجب أن يكون نص المصطلح المحدد موجودا على سطر واحد. يتم عرض النص الذي يحتوي على تعريف المصطلح بدءًا من السطر التالي (أو كل سطر لبعض المتصفحات) بعد تعريف المصطلح، مع وضع مسافة بادئة إلى اليمين. في المعلومات الموضوعة بعد العلامة
- ، يمكن تحديد موقع العناصر على مستوى الكتلة. ويترتب على ذلك، على وجه الخصوص، أن قوائم التعريفات يمكن أن تكون متداخلة.
في العلامة
- قد يتم تحديد معلمة COMPACT، والغرض منها مشابه للقوائم الأخرى الموضحة أعلاه.
- شخص بلغمي
- سلبي، مجتهد للغاية، بطيء في التكيف؛
مزاج مستقر، قليل التأثر بالتأثيرات الخارجية؛
خمول ردود الفعل العاطفية والبطء في النشاط الإرادي
- متفائل
- نشط وحيوي وقابل للتكيف ، -
حيوية وتنقل ردود الفعل العاطفية وسرعة وقوة المظاهر الإرادية
- كولي
- نشط، نشيط للغاية، مثابر؛
اندفاع وقوة ردود الفعل العاطفية ومظاهر الإرادة العنيفة
- حزين
- سلبي، متعب بسهولة، من الصعب التكيف، -
ضعف المظاهر الإرادية وسيادة المزاج المكتئب والشك في الذات - زيمبيا
- قمر
- خريطة
- فوبوس
- ديموس
- أورانوس
- ارييل
- اومبريل
- تيتانيا
- أوبيرون
- ميراندا
- نبتون
- تريتون
- نيريد
يوم جيد!
في هذه المقالة، ستتعرف على جميع إمكانيات القوائم، وستفهم كيفية إنشاء قائمة مرقمة، والعلامات الرئيسية التي ستساعدك على تحويل قائمة ذات تعداد نقطي بسيط إلى قائمة أكثر إثارة للاهتمام وملاحظة باستخدام تعداد نقطي عشوائي. بعد الانتهاء من الدرس، سيكون لديك فهم أين يتم استخدام القوائم وتحت أي ظروف يمكن استخدامها.
هذه المقالة هي الثالثة في هذه الدورة القصيرة حول أساسيات HTML. قبل قراءة هذا الدرس أنصح بالاطلاع على الدرسين السابقين:
لقد بدأت المقالة للتو، ويمكنك بالفعل ملاحظة استخدام قائمة ذات تعداد نقطي قياسي. يبدو الأمر بسيطًا جدًا على موقع الويب الخاص بي: على اليسار توجد مسافة بادئة صغيرة بها خط وعلامة مربعة. لاحقًا في المقالة، سننظر بالتفصيل في أنواع العلامات الموجودة وكيفية عمل الأرقام وأيضًا كيفية صنع قلم التحديد الخاص بك.
في كل جزء من المقالة، سيكون إنشاء قوائم معينة مصحوبًا بشرح تفصيلي لإدراج قائمة معينة.
1. القوائم ذات التعداد النقطي في HTML
يستخدم هذا النوع من القوائم لإدراج مجموعة من العناصر ذات المعاني المتشابهة في النص. يمكن أن تكون هذه قائمة بالروابط المرتبطة بنفس الموضوع، وشرحًا تفصيليًا للأجزاء الفردية من النص. ولكن دعونا نرى كيف تبدو القوائم النقطية في الكود:
وهذا ما يبدو عليه في المتصفح:
أرز. 1.1. العرض القياسي لقائمة HTML ذات تعداد نقطي غير مرتبة في المتصفح1.1 الرموز النقطية القياسية للقوائم النقطية
في الصورة أعلاه (الشكل 1.1) يمكنك رؤية الدوائر في بداية كل عنصر من عناصر القائمة. هذه هي العلامة. افتراضيًا، يظهر كدائرة مملوءة في المتصفح. هناك عدة أنواع من العلامات في HTML: دائرة مملوءة، ودائرة فارغة، ومربع. لا تتطلب أي صور CSS أو صور تابعة لجهات خارجية:
1.2 قائمة العلامة على شكل دائرة فارغة
أنت تعرف قيم السمات، ولكن الآن دعونا نرى كيفية إنشاء قائمة نقطية بتنسيق HTML في التعليمات البرمجية. من الجدول أعلاه، اخترنا القيمة الثانية "الدائرة" لسمة النوع وقمنا بتعيينها في قائمتنا النقطية:
<أتش تي أم أل > <الرأس > <العنوان >مثال لقائمة ذات تعداد نقطي مع علامة دائرة فارغة</العنوان> </الرأس> <الجسم > <ص>النجوم:</ ع> <نوع ul = "دائرة"> <لى>سيريوس</ لى> <لى>السماك القطبية</ لى> <لى>بولوكس</ لى> <لى>منكب الجوزاء</ لى> <لى>شمس</ لى> </ أول> </ الجسم> </أتش تي أم أل> دعونا نرى على الفور كيف سيبدو هذا الرمز في المتصفح:
أرز. 1.2. عرض علامة القائمة على شكل دائرة في المتصفح1.3 قائمة العلامات على شكل مربع
دعونا نلقي نظرة أيضًا على المثال الأخير الذي يحتوي على علامة مربعة لقائمة HTML:
انتبه للعلامة فقد أصبحت مربعة:
أرز. 1.3. عرض علامة القائمة كمربع في المتصفحملاحظة مهمة:لم تعد هذه الطريقة تُستخدم لإنشاء أنماط للقوائم ذات التعداد النقطي. هناك فصل واضح بين CSS (اقرأ ما هو CSS) وHTML. HTML مخصص للترميز وCSS مخصص لإنشاء مظهر جذاب.
الكود الذي يحتوي على هذه السمة عند تحديد نوع المستند الحالي كـ HTML5 ("")، سيظهر خطأ أثناء التحقق من الصحة. إذا لم تكن قد سمعت ما هو التحقق من الصحة، فهذا هو المكان المناسب لك.
الخطأ سيكون على النحو التالي:
أرز. 1.4. حدث خطأ في أداة التحقق من الصحة عند استخدام خاصية "النوع" الخاصة بالقائمةلقد قمنا بفرز القوائم النقطية. ننتقل الآن إلى القوائم المرقمة، ثم نفكر في القوائم المتداخلة والعديد من الأمثلة الجاهزة التي يتم استخدامها غالبًا على المواقع الحقيقية.
2. قوائم مرقمة في HTML
على عكس النوع السابق من القوائم، تتمتع القوائم المرقمة بميزة واحدة مهمة: وهي أنها يتم ترقيمها تلقائيًا. يكون هذا مفيدًا عندما تحتاج إلى ترقيم قائمة كبيرة. سيستغرق القيام بذلك يدويًا الكثير من الوقت، ولا يزال من الممكن أن تشعر بالارتباك. يتم تحديد قائمة مرقمة باستخدام العلامة. كيف يبدو في الممارسة العملية:
مثال على قائمة مرقمة:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <أتش تي أم أل > <الرأس > <العنوان >مثال على قائمة مرقمة قياسية</العنوان> </الرأس> <الجسم > <ص>من الواحد إلى الخامس:</ ع> <رأ> <لى>أولاً</ لى> <لى>ثانية</ لى> <لى>ثالث</ لى> <لى>الرابع</ لى> <لى>الخامس</ لى> </رأ> </ الجسم> </أتش تي أم أل> هذا ما تبدو عليه القائمة المرقمة مع إعدادات المتصفح القياسية:
أرز. 2.1. قائمة مرقمة في المتصفح مع الإعدادات القياسيةمثل سابقتها (القائمة النقطية)، لديها أنماطها الخاصة لعرض الأرقام. الترقيم العادي ليس هو النوع الوحيد من التعداد النقطي لقائمة مرقمة في HTML.
2.1 الرموز النقطية القياسية للقوائم المرقمة
هنا لدينا خيار ليس من بين ثلاثة أنواع من العلامات، بل من خمسة:
اسم العلامة قيمة السمة "النوع". مثال القائمة علامات على شكل أرقام عربية 1 - تنس الريشة
- البيسبول
علامات على شكل أحرف لاتينية صغيرة أ - تشومولونغما
- تشوجوري
- كانشينجونجا
علامات على شكل حروف لاتينية كبيرة أ - قمة الهبوط
- نوبة غضب الزقاق
- مجنون
علامات الأرقام الرومانية الصغيرة أنا - بحر الفلبين
- البحر العربي
- بحر المرجان
علامات الأرقام الرومانية الكبيرة أنا - أحمر
- أخضر
- أزرق
2.2 الترقيم الخاص في قائمة HTML
بالإضافة إلى المخرجات المعتادة لقائمة مرقمة، يمكننا أيضًا أن نبدأ الترقيم من أي رقم. للقيام بذلك، تحتاج إلى تعيين السمة الإضافية "بدء" . يعمل هذا الترقيم على كافة أنواع العلامات الخاصة بالقوائم المرقمة. كيف يبدو في الممارسة العملية:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <أتش تي أم أل > <الرأس > <العنوان >ترقيم مخصص لقائمة مرقمة</العنوان> </الرأس> <الجسم > <ص>نبدأ بالترقيم من اثني عشر:</ ع> <نوع ol = "أ" ابدأ = "12" > <لى>اثني عشر</ لى> <لى>ثلاثة عشر</ لى> <لى>أربعة عشرة</ لى> <لى>خمسة عشر</ لى> <لى>السادس عشر</ لى> </رأ> </ الجسم> </أتش تي أم أل> وإليك كيف سيظهر على الموقع الحقيقي:
أرز. 2.2. الترقيم من رقم عشوائي في قائمة مرقمةفي الصورة أعلاه، قمنا بترقيم القائمة بدءًا من اثني عشر، مع عمل علامات على شكل أحرف لاتينية صغيرة. الآن، أعتقد أنه أصبح من الواضح كيفية استخدام هذه السمات في مشاريعك.
حسنًا، لننتقل الآن إلى قوائم HTML المتداخلة.
3. كيفية عمل قائمة متعددة المستويات (متداخلة) في لغة HTML
يتم استخدام قوائم متعددة المستويات في الموقع لإنشاء القوائم. تظهر هذه القائمة غالبًا إما على شكل قائمة منسدلة لأسفل (الدرس قيد التشغيل) أو قائمة منسدلة على اليسار أو اليمين. تسمح لك هذه القوائم بتخزين عناصر القائمة الأخرى في شكل مضغوط.
باستخدام نماذج السيارات كمثال، سنقوم ببناء قائمة متعددة المستويات بتنسيق HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <أتش تي أم أل > <الرأس > <العنوان > HTML قائمة نقطية متداخلة</العنوان> </الرأس> <الجسم > <أول> <لى>سيتروين<أول> <لى>بيرلينجو</ لى> <لى>ج1</ لى> <لى>ج2</ لى> <لى> C3 بيكاسو</ لى> <لى>سي 4 جراند بيكاسو</ لى> </ أول> </ لى> <لى>كيا</ لى> <لى>تويوتا</ لى> <لى>أودي</ لى> <لى>لكزس</ لى> </ أول> </ الجسم> </أتش تي أم أل> لاحظ كيف تبدو القائمة متعددة المستويات في المتصفح:
أرز. 3.1. مثال لقائمة متعددة المستويات في HTMLلقد أنشأنا قائمة متعددة المستويات باستخدام التعداد النقطي (tag
- ). ظهرت قائمة متعددة المستويات بنماذج Citroen مع علامات أخرى. تحتوي القائمة الرئيسية على تعداد نقطي، بينما تحتوي قائمة المستوى الثاني على دوائر فارغة. ولكن، كما تتذكر، باستخدام السمة "type" يمكننا إعادة تعريف العلامات (من الأفضل تعيينها ).
- كما هو مبين أدناه.
- النقطة الأولى
- النقطة الثانية
- النقطة الثالثة
يجب أن تحتوي القائمة على علامة إغلاق
ولكن يمكننا دمج القوائم متعددة المستويات مع القوائم المرقمة والتعداد النقطي مثل هذا:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <أتش تي أم أل > <الرأس > <العنوان >قوائم مرقمة ونقطية ومتعددة المستويات بلغة HTML</العنوان> </الرأس> <الجسم > <أول> <لى>المجموعة الأولى من زهور التوليب<رأ> <لى>الصف الاول<أول> <لى>زهور التوليب المبكرة البسيطة</ لى> </ أول> </ لى> <لى>الصف الثاني<أول> <لى>تيري التوليب</ لى> </ أول> </ لى> </رأ> </ لى> </ أول> </ الجسم> </أتش تي أم أل> في المثال أعلاه لدينا تداخل مزدوج (مستويين). أولاً، تم تضمين قائمة بفئتين من زهور التوليب؛ ثم يتم تضمين قائمة ذات تعداد نقطي داخل كل عنصر من العناصر الموجودة في القائمة ذات التعداد الرقمي.
دعونا نرى كيف يبدو في المتصفح:
أرز. 3.2. مثال لقائمة مرقمة متعددة المستويات لقائمة ذات تعداد نقطي في المتصفح4. مواد مفيدة في قوائم HTML
هذه هي المعلومات التي تتطلب فهم خصائص CSS. وللقيام بذلك أنصح بدراسة الدروس التالية: . سيتم دمج جميع الأمثلة فورًا مع الكود المصدري وتقسيمها إلى علامات تبويب HTML (البنية) وCSS (الأنماط) والنتيجة (النتيجة).
4.1 كيفية تحويل قائمة HTML إلى سلسلة
قد يكون تحويل قائمة HTML إلى سلسلة ضروريًا عند إنشاء قائمة أفقية. فإنه من السهل جدا القيام به:
4.2 كيفية عمل قائمة HTML بدون أيقونة
الخاصية list-style-type في CSS هي المسؤولة عن هذا (مزيد من التفاصيل):
4.3 كيفية توسيط القائمة في HTML
عنصر القائمة عبارة عن عنصر كتلة، لذا يجب توسيطه باستخدام الحشو. ولكن هناك نقطة مهمة واحدة - يجب أن نحدد بوضوح العرض حتى تعمل المحاذاة:
4.4 كيفية إنشاء قائمة بتنسيق HTML بالصور
خاصية CSS واحدة فقط، list-style-image، تكفي. داخل عنوان URL، حدد العنوان قبل الرمز. أريد فقط أن أشير إلى أنه من الأفضل تحديد صورة صغيرة على الفور، لأن ارتفاع سطر القائمة يعتمد عليها:
4.5 قائمة نقطية HTML الخاص بك
في هذه الحالة، تحتاج إلى توصيل أيقونات الخطوط مسبقًا (على سبيل المثال، FontAwesome ). ثم يمكنك إنشاء أي رمز بدلاً من العلامة القياسية:
4.6 كيفية عمل قائمة بلغة HTML في عدة أعمدة
لإنشاء قائمة في عدة أعمدة، سنستخدم خاصية عدد أعمدة CSS (الخاصية مدعومة فقط في المتصفحات التالية: IE 10+، Chrome 1.0+، Opera 11.1+، Safari 3.0+، Firefox 1.5+). تحتاج أيضًا إلى ضبط ارتفاع القائمة لرؤية التقسيم إلى أعمدة متعددة:
5. تدرب على العمل مع القوائم
في الفيديو أدناه، يمكنك رؤية كل العمل باستخدام قوائم HTML عمليًا:
يتم تعريف القائمة ذات التعداد النقطي عن طريق إضافة رمز نقطي صغير، عادة على شكل دائرة مملوءة، قبل كل عنصر في القائمة. يتم تشكيل القائمة نفسها باستخدام حاوية
- ، ويبدأ كل عنصر في القائمة بعلامة
على الرغم من أن ذلك ليس مطلوبًا، إلا أننا نوصي دائمًا بإضافته إلى عناصر القائمة المنفصلة بشكل واضح.
- تشيبوراشكا
- تمساح جينا
- شابوكلياك
- الفئران لاريسا
- أولاً
- ثانية
- ثالث
- أولاً
- ثانية
- ثالث
- أولاً
- ثانية
- ثالث
- تغيير في العقيدة الدينية (اختياري: البوذية، الكونفوشيوسية، الهندوسية). عرض خاص - اليهودية والإسلام معًا؛
- تغير في الاعتقاد بعصمة الحزب المفضل؛
- الاعتقاد بوجود كائنات فضائية؛
- تفضيل النظام السياسي باعتباره الأفضل من نوعه (للاختيار من بين: الإقطاع، الاشتراكية، الشيوعية، الرأسمالية).
- عنصر القائمة الأول
- العنصر الثاني في القائمة
- العنصر الثالث في القائمة
- ، ثم يوضع أمامه تلقائيًا .
- 1 - الأرقام العربية؛
- أ - الحروف الكبيرة.
- أ - الحروف اللاتينية الصغيرة؛
- أنا - الأرقام الرومانية الكبيرة؛
- ط - الأرقام الرومانية الصغيرة.
- تم وضع علامة عليها بعلامة ،
قائمة مرقمة —- - كل عنصر من عناصر القائمة
- تم وضع علامة برقم
قائمة التعاريف- - يتكون من أزواج مصطلحات- —
- تعريف.
كل قائمة عبارة عن حاوية توجد بداخلها عناصر القائمة أو أزواج تعريف المصطلح. تتصرف عناصر القائمة مثل عناصر الكتلة، حيث يتم تكديسها تحت بعضها البعض وتحتل العرض الكامل لكتلة الحاوية. يحتوي كل عنصر قائمة على كتلة إضافية موجودة على الجانب، والتي لا تشارك في التخطيط.
إنشاء قوائم HTML
1. قائمة ذات تعداد نقطي
قائمة نقطيةهي قائمة غير مرتبة (من القائمة الإنجليزية غير المرتبة). تم إنشاؤها باستخدام علامة مقترنة
. علامة عنصر القائمة هي تسمية، على سبيل المثال، دائرة مملوءة.تضيف المتصفحات بشكل افتراضي التنسيق التالي إلى كتلة القائمة:
يتم إنشاء كل عنصر في القائمة باستخدام علامة مقترنة
- (من عنصر القائمة الإنجليزية).
- متاح .
- مايكروسوفت
- جوجل
- تفاحة
2. قائمة مرقمة
قائمة مرقمةيتم إنشاؤه باستخدام علامة مقترنة. يتم أيضًا إنشاء كل عنصر قائمة باستخدام العنصر
- تم وضع علامة برقم
- . يقوم المتصفح بترقيم العناصر بالترتيب تلقائيًا، وإذا قمت بحذف عنصر أو أكثر من هذه القائمة، فسيتم إعادة حساب الأرقام المتبقية تلقائيًا.
تحتوي كتلة القائمة أيضًا على أنماط المتصفح الافتراضية:
- تتوفر سمة القيمة، والتي تسمح لك بتغيير الرقم الافتراضي لعنصر القائمة المحدد. على سبيل المثال، إذا كان للعنصر الأول في القائمة التي قمت بتعيينها
- ، فسيتم إعادة حساب الترقيم المتبقي بالنسبة إلى القيمة الجديدة.
للعلامة
- السمات التالية متوفرة:
- مايكروسوفت
- جوجل
- تفاحة
- و
- متاح .
- مخرج:
- بيتر توتشيلين
- يقذف:
- أندريه جيدوليان
- أليكسي جافريلوف
- فيتالي جوجونسكي
- ماريا كوزيفنيكوفا
أرز. 3. قائمة التعاريف4. قائمة متداخلة
في كثير من الأحيان، لا تكون إمكانيات القوائم البسيطة كافية؛ على سبيل المثال، عند إنشاء جدول محتويات، لا توجد طريقة للاستغناء عنها العناصر المتداخلة. سيكون ترميز القائمة المتداخلة كما يلي:
- الفقرة 1.
- النقطة 2.
- البند الفرعي 2.1.
- البند الفرعي 2.2.
- البند الفرعي 2.2.1.
- البند الفرعي 2.2.2.
- البند الفرعي 2.3.
- النقطة 3.
أرز. 4. قائمة متداخلة5. قائمة مرقمة متعددة المستويات
يتم استخدام القائمة متعددة المستويات لعرض عناصر القائمة على مستويات مختلفة بمسافات بادئة مختلفة. سيكون الترميز لقائمة مرقمة متعددة المستويات كما يلي:
- فقرة
- فقرة
- فقرة
- فقرة
- فقرة
- فقرة
- فقرة
- فقرة
- فقرة
- فقرة
- فقرة
سيؤدي هذا الترميز الافتراضي إلى إنشاء ترقيم جديد لكل قائمة متداخلة، بدءًا بواحد. لإنشاء ترقيم متداخل، تحتاج إلى استخدام الخصائص التالية:
تقوم ميزة إعادة تعيين العداد بإعادة تعيين عداد واحد أو أكثر، مع تحديد القيمة التي سيتم إعادة تعيينها؛
تحدد الزيادة المضادة قيمة زيادة العداد، أي. في أي زيادات سيتم ترقيم كل عنصر لاحق؛
المحتوى - المحتوى الذي تم إنشاؤه، وفي هذه الحالة يكون مسؤولاً عن عرض الرقم قبل كل عنصر في القائمة.Ol ( /* إزالة الترقيم القياسي */ نمط القائمة: لا شيء؛ /* تحديد العداد وإعطائه الاسم li. لم يتم تحديد قيمة العداد - افتراضيًا هي 0 */ counter-reset: li; ) li :before ( /* نحدد العنصر الذي سيتم ترقيمه - li يشير العنصر الزائف قبل إلى أن المحتوى المدرج باستخدام خاصية المحتوى سيتم وضعه قبل عناصر القائمة. يتم تعيين قيمة زيادة العداد هنا (الافتراضي هو 1) */ counter-increment: li /). * تعرض خاصية المحتوى رقم عنصر القائمة counters() مما يعني أن النص الذي تم إنشاؤه يمثل قيم جميع العدادات التي تحمل هذا الاسم بين الأرقام، ويتم إضافة نقطة بمسافة قبل محتوى كل عنصر في القائمة */ content: counters(li,"") "." )
أرز. 5. قائمة مرقمة متعددة المستويات
الجدول 1. سمات العلامة
يصف الوصف، القيمة المقبولة عكس تؤدي السمة المعكوسة إلى عرض القائمة بترتيب عكسي (على سبيل المثال، 9، 8، 7...). يبدأ تحدد سمة البداية القيمة الأولية التي سيبدأ منها الترقيم، على سبيل المثال، البناء - سيتم تعيين الرقم التسلسلي "10" للعنصر الأول. يمكنك أيضًا تحديد نوع الترقيم في نفس الوقت، على سبيل المثال،
- .
يكتب تحدد سمة النوع نوع العلامة التي سيتم استخدامها في القائمة (أحرف أو أرقام). القيم المقبولة:
1 - القيمة الافتراضية، الترقيم العشري.
أ - ترقيم القائمة بالترتيب الأبجدي، بالأحرف الكبيرة (أ، ب، ج، د).
أ - ترقيم القائمة بالترتيب الأبجدي، بالأحرف الصغيرة (أ، ب، ج، د).
I - الترقيم بالأرقام الرومانية الكبيرة (I، II، III، IV).
i — الترقيم بالأرقام الرومانية الصغيرة (i، ii، iii، iv).3. قائمة التعاريف
قوائم التعاريفيتم إنشاؤها باستخدام علامة
تحتوي كتلة قائمة التعريفات على أنماط المتصفح الافتراضية التالية:
للعلامات
- ,
فيما يلي مثال لمستند HTML يستخدم قائمة التعريفات:
مثال على قائمة التعريفات تصنيف المزاجات البشرية النموذجية
قائم علىعلى آراء أبقراط
يظهر الشكل عرض مستند HTML المحدد في المتصفح. 2.5.
أرز. 2.5.قائمة التعريفات (تشبه مجموعة من الإدخالات في القاموس)
نوع القوائم
و - .
تم تصميم هذه الأنواع من القوائم في الأصل لتكون أكثر إحكاما من القوائم النقطية العادية. وفقا لقواعد كتابة عناصر هذه القوائم، لم يسمح باستخدام عناصر الكتلة فيها، مما يعني أنه كان من المستحيل تنفيذ تداخل قوائم من هذا النوع. كان كل عنصر في القائمة عبارة عن سطر واحد من النص.
لقوائم مثل
تم التخطيط لإدخال حد على "طول نص عنصر القائمة (24 حرفًا)." مثل هذا القيد سيسمح لنا بالاستخلاص قوائم مثل
في نموذج مشابه لإخراج قائمة الدلائل في أنظمة التشغيل UNIX وMS-DOS عند استخدام رمز التبديل /W (في عدة أعمدة). بالإضافة إلى ذلك، لم يتم عرض العلامات لعناصر القائمة من هذا النوع. في الوقت الحالي، لم يتم تنفيذ جميع هذه الخطط، حيث لا يوصى باستخدام المزيد من قوائم هذه الأنواع. تعرض الإصدارات الحديثة من المتصفحات قوائم من هذه الأنواع بنفس الطريقة تمامًا مثل القوائم
- .
القوائم المتداخلة
هناك أوقات تحتاج فيها إلى تضمين قائمة كاملة من نفس النوع أو نوع آخر في عنصر قائمة من نوع واحد. سيؤدي هذا إلى إنشاء قوائم متعددة المستويات أو متداخلة. يسمح HTML بالتداخل العشوائي لأنواع مختلفة من القوائم، ولكن يجب توخي الحذر عند تنظيمها.
يوجد أدناه رمز HTML لمستند يحتوي على قوائم متداخلة، والذي يظهر عرضه في الشكل. 2.6. في هذا المثال، يحتوي كل عنصر في القائمة ذات التعداد النقطي على قائمة مرقمة خاصة به.
مثال على القائمة المتداخلة الأقمار الصناعية لبعض الكواكب
يوضح المثال 11.1 كود HTML لإضافة قائمة ذات تعداد نقطي إلى صفحة ويب.
مثال 11.1. إنشاء قائمة ذات تعداد نقطي
قائمة نقطية
وتظهر نتيجة هذا المثال في الشكل. 11.1.
أرز. 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. ولكن إذا كنت ترغب في ذلك، يمكنك البدء من مائة على الأقل. للقيام بذلك، تحتاج إلى تحديد سمة البداية بأي قيمة.
بالإضافة إلى ذلك، يمكنك استخلاص النتيجة بترتيب عكسي. للقيام بذلك، عليك أن تكتب بشكل معكوس.
تصميم القوائم
يمكن تصميم قائمة مرقمة بتنسيق HTML بشكل جميل لدرجة أنك قد لا تدرك على الفور أن هذه قائمة عادية وليست صورة تم إنشاؤها في Photoshop.
فيما يلي أمثلة على القوائم الجميلة.
كما يتبين من المثال، يمكنك تغيير مظهر الترقيم والعناصر نفسها.
يمكنك إنشاء قائمة عادية مثل هذا.
في أنماط CSS تحتاج إلى تحديد التصميم لعلامات ol. يرجى ملاحظة أنه في هذه الحالة سيتم تطبيق الإعدادات على كافة القوائم في جميع أنحاء الموقع حيث يتم استخدام ملف النمط هذا.
دعونا نفكر أولاً في خيار تصميم القائمة المستديرة. العودة إلى رمز القائمة. تتم الإشارة إلى القائمة المستديرة للفصل هناك. هذا هو الفصل الذي تحتاج إلى التلاعب به لإنشاء مثل هذا الجمال. يمكنك تسمية الفصل كما تريد.
الآن دعونا نلقي نظرة على التصميم المربع.
الأنماط متشابهة تمامًا. الفرق هو أنه في الحالة الأولى يتم تقريب العنصر باستخدام إمكانيات CSS.
يجب على مصمم التخطيط المحترف أن يتوقع ويفهم أنه ليس كل المستخدمين يستخدمون أجهزة الكمبيوتر الحديثة. ليس كل شخص لديه أنظمة التشغيل Windows 7 و8 و10 مثبتة، فهناك نسبة من المستخدمين الذين ما زالوا يستخدمون نظام التشغيل Windows XP ويستخدمون الإصدارات القديمة من متصفح Internet Explorer.
كقاعدة عامة، لا يتم دعم جميع تحسينات التصميم الحديثة للعناصر تقريبًا. سيبدو للمستخدم أنه لم يتم القيام بأي عمل في تصميم الموقع على الإطلاق. أن كل شيء قد انتقل بعيدا. تتصادم العناصر مع بعضها البعض. لتجنب ذلك، تحتاج إلى النظر في جميع الخيارات.
يغض بعض مشرفي المواقع الطرف عنهم لأن حصتهم في السوق الحديثة أصبحت أصغر فأصغر. لكن بالنسبة للمحترف، كل زائر مهم، خاصة إذا كان موقعًا تجاريًا.
اصنع شيئًا مناسبًا للجميع أو خذ في الاعتبار جميع اختلافات المتصفح.
قوائم HTMLتستخدم لتجميع أجزاء من المعلومات ذات الصلة. هناك ثلاثة أنواع من القوائم:
قائمة نقطية —
- - كل عنصر من عناصر القائمة
- ، يمكن تحديد موقع العناصر على مستوى الكتلة. ويترتب على ذلك، على وجه الخصوص، أن قوائم التعريفات يمكن أن تكون متداخلة.
-
صإدخال المثال:
- .
- .
يحدد هذا الإدخال ترقيم القائمة الذي يبدأ بالحرف اللاتيني الكبير "E". بالنسبة لأنواع الترقيم الأخرى، فإن الإدخال START=5 سيحدد الترقيم، على التوالي، من الرقم "5"، والرقم الروماني "V"، وما إلى ذلك.
يمكن تغيير نوع ترقيم القائمة وقيمها الرقمية لأي عنصر من عناصر القائمة. بطاقة شعار
- بالنسبة للقوائم المرقمة، يسمح باستخدام معلمات TYPE وVALUE. يمكن أن تأخذ المعلمة TYPE نفس القيم الخاصة بالعلامة
المعلمة COMPACT لها نفس معنى القوائم النقطية. يتم استخدام المعلمة TYPE لتحديد نوع ترقيم القائمة. يمكن أن تأخذ القيم التالية:
TYPE = A - يضبط العلامات على شكل أحرف لاتينية كبيرة؛
TYPE = a - يعين العلامات على شكل أحرف لاتينية صغيرة؛
TYPE = I - يضبط العلامات على شكل أرقام رومانية كبيرة؛
TYPE = i - يضبط العلامات على شكل أرقام رومانية صغيرة؛
TYPE = 1 - يضبط العلامات على شكل أرقام عربية.
القيمة الافتراضية هي دائمًا TYPE = 1، أي الترقيم باستخدام الأرقام العربية. ينطبق هذا أيضًا على القوائم المرقمة المتداخلة. هنا، على عكس القوائم النقطية، لا تجعل المتصفحات بشكل افتراضي الترقيم مختلفًا عند مستويات مختلفة من تداخل القوائم. لاحظ أنه بعد رقم عنصر القائمة توجد دائمًا علامة "نقطة" إضافية.
يمكن استخدام معلمة TYPE بنفس القيم لتحديد نمط الترقيم لعناصر القائمة الفردية. للقيام بذلك، يُسمح بتحديد معلمة TYPE ذات القيمة المقابلة في علامة عنصر القائمة
عادة ما تكون القوائم من هذا النوع عبارة عن تسلسل مرتب للعناصر الفردية. الفرق عن القوائم ذات التعداد النقطي هو أنه في القائمة المرقمة، يسبق كل عنصر تلقائيًا رقم تسلسلي. يعتمد نوع الترقيم على المتصفح ويمكن ضبطه بواسطة معلمات علامات القائمة. وبخلاف ذلك، فإن تنفيذ القوائم المرقمة يشبه إلى حد كبير تنفيذ القوائم النقطية.
العلامات
- و
لإنشاء قائمة مرقمة، يجب عليك استخدام علامة الحاوية، التي توجد بداخلها جميع عناصر القائمة. توفر علامتي فتح وإغلاق القائمة فاصل أسطر قبل القائمة وبعدها، وبالتالي فصل القائمة عن المحتوى الرئيسي للمستند.
كما هو الحال مع القائمة ذات التعداد النقطي، يجب أن يبدأ كل عنصر في القائمة المرقمة بالعلامة
- ، والتي تشير إلى عناصر القائمة الفردية، توفر علامات قياسية لعناصر القائمة.
تتم كتابة المعلمة COMPACT بدون قيمة ويتم استخدامها للإشارة إلى المتصفح بضرورة عرض القائمة المحددة في نموذج مضغوط. على سبيل المثال، قد يتم تقليل الخط أو المسافة بين أسطر القائمة وما إلى ذلك.
ملحوظة
حاليا، وجود المعلمة COMPACT في العلامة
- لا يؤثر بأي شكل من الأشكال على عرض القوائم في المتصفحات الرائدة. ولذلك، فإن استخدام هذه المعلمة لا معنى له، خاصة وأن مواصفات HTML 4.0 لا ينصح باستخدامها.
يمكن أن تأخذ المعلمة TYPE القيم التالية: قرص، ودائرة، ومربع. يتم استخدام هذه المعلمة لفرض ظهور القائمة النقطية. يعتمد النوع الدقيق للعلامة على المتصفح الذي تستخدمه. خيارات العرض النموذجية هي كما يلي:
TYPE = قرص - يتم عرض العلامات كدوائر مملوءة؛ TYPE = دائرة - يتم عرض العلامات كدوائر مفتوحة؛ TYPE = مربع - يتم عرض العلامات كمربعات مملوءة. إدخال المثال:
-
.
القيمة الافتراضية هي TYPE = القرص. بالنسبة للقوائم النقطية المتداخلة، القيمة الافتراضية هي القرص في المستوى الأول، والدائرة في المستوى الثاني، والمربع في المستوى الثالث وما بعده. وهذا بالضبط ما يتم فعله في أحدث الإصدارات من متصفحي Netscape وInternet Explorer. يرجى ملاحظة أن المتصفحات الأخرى قد تعرض العلامات بشكل مختلف. على سبيل المثال، في مواصفات HTML 4.0، يتم عرض نوع العلامة عندما يتم تحديد TYPE = مربع كمخطط تفصيلي مربع.
يمكن استخدام معلمة TYPE بنفس القيم لتحديد نوع العلامات لعناصر القائمة الفردية. للقيام بذلك، يُسمح بتحديد معلمة TYPE ذات القيمة المقابلة في علامة عنصر القائمة
- .
- ,
- ,
- ، بمساعدة القوائم من هذا النوع التي يتم تنظيمها في مستندات HTML (UL - قائمة غير مرتبة، قائمة غير مرتبة).
في القائمة ذات التعداد النقطي، يتم استخدام أحرف خاصة تسمى علامات القائمة لتسليط الضوء على عناصرها (غالبًا ما تسمى تعداد نقطي، وهو النطق الرسمي للمصطلح الإنجليزي رصاصة). يتم تحديد مظهر علامات القائمة بواسطة المتصفح، وعند إنشاء قوائم متداخلة، تقوم المتصفحات تلقائيًا بتنويع مظهر العلامات عند مستويات تداخل مختلفة.
العلامات و<لي>
لإنشاء قائمة ذات تعداد نقطي، يجب عليك استخدام علامة حاوية، والتي توجد بداخلها جميع عناصر القائمة. توفر علامات فتح وإغلاق القائمة فاصل أسطر قبل القائمة وبعدها، وبالتالي فصل القائمة عن المحتوى الرئيسي للمستند، لذلك ليست هناك حاجة لاستخدام علامات الفقرة هنا
.
يجب أن يبدأ كل عنصر في القائمة بعلامة
