قائمة نقطية. أمثلة على التصميم الأنيق لقوائم ul li CSS
قوائم مرقمة. العلامات و - ,
يستخدم HTML 5 ثلاثة أنواع من القوائم: قوائم مرقمة، وتعداد نقطي، وقوائم التعريف.
قائمة مرقمةتم تشكيلها بواسطة علامة مقترنة
- (من الانجليزية قائمة مرتبة). يتم استخدام العنصر "ol" نفسه كحاوية لعناصر القائمة التي يتم تشكيلها بواسطة العلامات المقترنة
-
افتراضيًا، يتم ترقيم عناصر القائمة بواسطة المستعرض بالترتيب، بدءًا من عنصر واحد. إذا كان الترقيم يحتاج إلى البدء بشيء آخر غير واحد، فسيتم استخدام سمة البداية، التي تحدد الرقم الذي ستبدأ منه القائمة المرقمة. تقبل السمة الأعداد الصحيحة كقيم. يمكنك أيضًا عكس ترتيب الترقيم. ويتم ذلك باستخدام السمة المعكوسة، والتي يتم استخدامها بدون قيم. يتم إدخال السمة أتش تي أم أل 5ويعمل في جميع المتصفحات باستثناء IE.
من الممكن أيضًا ضبط العرض علامة قائمة مرقمة. للقيام بذلك، استخدم سمة النوع، والتي يمكن أن تأخذ القيم "A | a | I | i | 1"، والتي تعني بالتالي:
- الحروف اللاتينية الكبيرة,
- الحروف اللاتينية الصغيرة,
- الأرقام الرومانية الكبيرة,
- أرقام رومانية صغيرة,
- الترقيم العربي.
نظرًا لأنه يمكن ضبط جميع القيم المدرجة، وأكثر من ذلك، بسهولة من خلال أنماط CSS، فإن استخدام سمة النوع، في رأي المؤلف، غير مستحسن، على الرغم من أنه مسموح به في HTML 5.
يظهر استخدام القائمة المرقمة في المثال 2.10.
قائمة مرقمة أشهر الربيع بالترتيب:- يمشي
- أبريل
- يمكن
- أغسطس
- يوليو
- يونيو
مثال 2.10. باستخدام العنصر "ol".
بالمناسبة، تعرض المتصفحات جميع القوائم كعناصر كتلة، لذلك عند عرض المثال، تكون المسافات البادئة الرأسية مرئية بوضوح. حاول كتابة الكود بنفسك، وأعطي القوائم خلفية صفراء وشاهد النتيجة.
قوائم نقطية. العلامات
- و
- ,
قائمة نقطيةتم تشكيلها بواسطة علامة مقترنة
- (من الانجليزية قائمة غير مرتبة). يتم استخدام عنصر "ul" نفسه كحاوية لعناصر القائمة، والتي يتم تشكيلها، كما في حالة القوائم المرقمة، بواسطة علامات مقترنة
- وتقع واحدة تلو الأخرى.
تستخدم القائمة ذات التعداد النقطي علامات الدائرة بدلاً من الأرقام والحروف. يمكنك تغيير مظهر العلامات باستخدام أنماط CSS. أما بالنسبة لسمة النوع، فقد تمت إزالتها في HTML 5. لذلك، تبقى السمات العالمية وسمات الحدث فقط.
قائمة نقطية أشهر الربيع:- يمشي
- أبريل
- يمكن
مثال 2.11. باستخدام العنصر "ul".
قوائم التعاريف. العلامات
- ,
- ,
قائمة التعاريفتم تشكيلها بواسطة علامة مقترنة
- (من الانجليزية قائمة التعريفات). يتم استخدام العنصر "dl" نفسه كحاوية لعناصر القائمة. ويتكون كل عنصر بدوره من عناصر "dt" (من اللغة الإنجليزية. مصطلح التعريف) و "dd" (من الإنجليزية. وصف التعريف)، والتي تم تشكيلها، على التوالي، بواسطة العلامات المقترنة
- و
- . أحدهما يحتوي على المصطلح المراد تعريفه، والثاني يحتوي على تعريف المصطلح.
دعونا نلقي نظرة على المثال 2.12 من أجل الوضوح.
قائمة التعاريف - لغة البرمجة
- لغة ترميز النص التشعبي القياسية لمستندات الويب
والذي يستخدم على نطاق واسع على شبكة الإنترنت العالمية. - CSS
- لغة رسمية لوصف مظهر الوثيقة،
مكتوبة باستخدام لغة الترميز.
مثال 2.12. باستخدام العنصر "دل".
القوائم المتداخلة
في بعض الأحيان يصبح من الضروري إنشاء قوائم متداخلة، وهي قوائم موجودة في عناصر القائمة الخارجية. دعونا نلقي نظرة على إنشاء قوائم متداخلة باستخدام المثال 2.13.
القوائم المتداخلة - ثلاثة أنواع من التفاح:
- أنتونوفكا،
- ستريفل,
- كوبان.
- ثلاثة أنواع من الكمثرى:
- تشيزوفسكايا،
- ويليامز،
- دوقة.
مثال 2.13. استخدام القوائم المتداخلة
كما ترون، إنشاء قوائم متداخلة ليس بالأمر الصعب على الإطلاق. للقيام بذلك، عليك توخي الحذر بين علامة الافتتاح
- وعلامة الإغلاق
بالنسبة للقوائم ذات التعداد الرقمي والتعداد النقطي، قم بترتيب القائمة المتداخلة من النوع المطلوب. بالنسبة لقوائم التعريف، يجب وضع القائمة المتداخلة بين علامة الفتح- وعلامة الإغلاق
. قد يكون ذلك ضروريًا، على سبيل المثال، إذا كنت بحاجة إلى إعطاء مصطلح عدة تعريفات.انتقل بسرعة إلى الصفحات الأخرى
- إنشاء القوائم في 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تستخدم لتجميع أجزاء من المعلومات ذات الصلة. هناك ثلاثة أنواع من القوائم:
قائمة نقطية —
- - كل عنصر من عناصر القائمة
- تم وضع علامة عليها بعلامة ،
قائمة مرقمة —- - كل عنصر من عناصر القائمة
- تم وضع علامة برقم
قائمة التعاريف- - يتكون من أزواج مصطلحات- —
- تعريف.
كل قائمة عبارة عن حاوية توجد بداخلها عناصر القائمة أو أزواج تعريف المصطلح. تتصرف عناصر القائمة مثل عناصر الكتلة، حيث يتم تكديسها تحت بعضها البعض وتحتل العرض الكامل لكتلة الحاوية. يحتوي كل عنصر قائمة على كتلة إضافية موجودة على الجانب، والتي لا تشارك في التخطيط.
إنشاء قوائم 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 على علامة
- ، تستخدم لإنشاء قوائم ذات تعداد نقطي. وهو مدعوم من قبل جميع المتصفحات الحديثة ويسمح لك بعرض العناصر بترتيب لا يتطلب ترقيمًا. على سبيل المثال، يعرض في كثير من الأحيان عناصر القائمة وكل ما يتعلق بالقوائم الموجودة على الصفحة: الأطباق والمنتجات والمعدات والأدوات وغير ذلك الكثير التي يجب إدراجها دون الإشارة إلى أولوية عنصر معين.
- العنصر رقم 1
- العنصر رقم 2
- العنصر رقم 3
- ...
- العنصر رقم 1
- العنصر رقم 2
- العنصر رقم 3
- العنصر رقم 1
-
- البند رقم 2-1
- العنصر رقم 2-2
- العنصر رقم 2-3
- العنصر رقم 3
- ...
- العنصر رقم 1
- العنصر رقم 2
- العنصر رقم 1
- العنصر رقم 2
- العنصر رقم 1
- العنصر رقم 2
- العنصر رقم 1
- العنصر رقم 2
- ...
- القرص - علامة على شكل دائرة (المثال أعلاه)
- دائرة - علامة على شكل دائرة شفافة (المثال أعلاه)
- مربع - علامة على شكل مربع (المثال أعلاه)
- عشري - علامة على شكل قائمة مرقمة بالأرقام العربية: 1، 2، 3، ...
- العلامة العشرية-البادئة-صفر - علامة على شكل قائمة مرقمة بالأرقام العربية بصفر بادئ: 01، 02، 03، ...
- Lower-roman - علامة على شكل قائمة مرقمة في الأبجدية الرومانية بأحرف صغيرة: i، ii، iii، iv، v
- الكتابة الرومانية العليا - علامة على شكل قائمة مرقمة في الأبجدية الرومانية بأحرف كبيرة: I، II، III، IV، V
- اللاتينية السفلية - علامة على شكل قائمة بالأبجدية اللاتينية بأحرف صغيرة: a، b، c، d، ...
- اللاتينية العلوية - علامة على شكل قائمة بالأبجدية اللاتينية بأحرف كبيرة: A، B، C، D، ...
- اليونانية السفلية - علامة على شكل قائمة بالأبجدية اليونانية بأحرف صغيرة
- اليونانية العليا - علامة على شكل قائمة بالأبجدية اليونانية بأحرف كبيرة
- . عند تعيين سمة إلى علامة
- سيتم عرض كافة عناصر القائمة كما هو موضح بواسطة السمة. ولكن يمكننا أن نعطي هذا العنصر أو ذاك عرضه الخاص. المثال في الصورة:
- العنصر رقم 1
- العنصر رقم 2
- العنصر رقم 3
- العنصر رقم 1
- العنصر رقم 2
- العنصر رقم 3
- العنصر رقم 1
- العنصر رقم 2
- العنصر رقم 3
- العنصر رقم 1
- العنصر رقم 2
- العنصر رقم 3
-
17 أبريل 2015متعدد النواة DSP TMS320C6678 -
17 أبريل 2015منتجات إنتل: الشرائح وميزاتها -
17 أبريل 2015كاتربيلر تكشف عن هاتف ذكي مزود بكاميرا حرارية Cat S60
يبدو الرمز كما يلي:
تغيير علامات العلامات
- باستخدام CSS
عناصر القائمة النقطية التي تم إنشاؤها بواسطة العلامة
- ، يمكن تمييزها بصور عشوائية. يتم استخدام CSS لتغيير نوع العلامة. على سبيل المثال
وهذا ما يبدو عليه في الصفحة:
باستخدام CSS، يمكننا تعيين أنواع أخرى من عرض العلامات. ولكن عليك أن تتذكر ذلك عند تحديد أي نمط للعلامة
- ، فهو ينطبق على جميع عناصر القائمة.
مقالات مماثلة
بناء جملة العلامة
يُترجم هذا الرمز إلى قائمة ذات تعداد نقطي على الموقع:
بطاقة شعار
- يتطلب الاستخدام الإلزامي لعلامة الإغلاق
لتكوين عناصر القائمة، يتم استخدام علامة مقترنة. توجد بين علامتي الفتح والإغلاق كلمات وعبارات وفقرات وصور وأجزاء من التعليمات البرمجية الفردية وغير ذلك الكثير التي تمثل محتوى القائمة ذات التعداد النقطي.
ماذا يمكن أن يكون محتوى القائمة ذات التعداد النقطي؟يمكن أن يكون هذا مجموعة متنوعة من النصوص، بما في ذلك الكلمات المفردة والعبارات والفقرات والصور والقوائم المتداخلة وأجزاء من كود php وغير ذلك الكثير الذي يحتاج إلى وضع علامات بسيطة.
يتم وضع مسافة بادئة لكل عنصر في القائمة ذات التعداد النقطي بمقدار 40 بكسل إلى اليمين بشكل افتراضي. باستخدام أنماط CSS، يمكننا تغيير عرض هذه القائمة كما نرغب. بطاقة شعار
- يعتمد على الكتلة، لذا فهو يشغل كامل المساحة المتاحة له، ويقتصر على حافة الشاشة، أو إطار الجدول، أو عناصر الصفحة الأخرى.
يُسمح بمرفقات القائمة داخل القائمة.
على سبيل المثال
سمات العلامة والخصائص
سمة العلامة المستخدمة على نطاق واسع
- هي سمة كتابة تشير إلى الشكل الذي ستبدو عليه علامة القائمة. يمكن أن تأخذ القيم التالية
1. اكتب = "القرص" - علامة على شكل دائرة مملوءة (هذه القيمة هي القيمة الافتراضية). كان مثال القرص أعلى قليلاً.
2. اكتب = "دائرة" - علامة على شكل دائرة شفافة
على سبيل المثال:
3. اكتب = "مربع" - علامة على شكل مربع
على سبيل المثال:
وهذا ما يبدو عليه في الصفحة:
في CSS، يتم تحديد نوع التعداد النقطي باستخدام سمة نوع نمط القائمة:
دعونا نلقي نظرة على القيم التي يمكن أن يتخذها نوع نمط القائمة:
ملاحظة 2
يمكن تعيين السمة للعلامة نفسها
- ، والعلامات
فيما يلي مثال لمستند HTML يستخدم قائمة التعريفات:
مثال على قائمة التعريفات تصنيف المزاجات البشرية النموذجية
قائم علىعلى آراء أبقراط
يظهر في الشكل عرض مستند HTML المحدد في المتصفح. 2.5.
أرز. 2.5.قائمة التعريفات (تشبه مجموعة من الإدخالات في القاموس)
نوع القوائم
و - .
تم تصميم هذه الأنواع من القوائم في الأصل لتكون أكثر إحكاما من القوائم النقطية العادية. وفقا لقواعد كتابة عناصر هذه القوائم، لم يسمح باستخدام عناصر الكتلة فيها، مما يعني أنه كان من المستحيل تنفيذ تداخل قوائم من هذا النوع. كان كل عنصر في القائمة عبارة عن سطر واحد من النص.
لقوائم مثل
كان من المخطط فرض حد على "طول نص عنصر القائمة (24 حرفًا)." مثل هذا القيد سيسمح لنا بالاستخلاص قوائم مثل
في نموذج مشابه لإخراج قائمة الدلائل في أنظمة التشغيل UNIX وMS-DOS عند استخدام رمز التبديل /W (في عدة أعمدة). بالإضافة إلى ذلك، لم يتم عرض العلامات لعناصر القائمة من هذا النوع. في الوقت الحالي، لم يتم تنفيذ جميع هذه الخطط، حيث لا يوصى باستخدام المزيد من قوائم هذه الأنواع. تعرض الإصدارات الحديثة من المتصفحات قوائم من هذه الأنواع بنفس الطريقة تمامًا مثل القوائم
- .
القوائم المتداخلة
هناك أوقات تحتاج فيها إلى تضمين قائمة كاملة من نفس النوع أو نوع آخر في عنصر قائمة من نوع واحد. سيؤدي هذا إلى إنشاء قوائم متعددة المستويات أو متداخلة. يسمح HTML بالتداخل العشوائي لأنواع مختلفة من القوائم، ولكن يجب توخي الحذر عند تنظيمها.
يوجد أدناه رمز HTML لمستند يحتوي على قوائم متداخلة، والذي يظهر عرضه في الشكل. 2.6. في هذا المثال، يحتوي كل عنصر في القائمة ذات التعداد النقطي على قائمة مرقمة خاصة به.
مثال على القائمة المتداخلة الأقمار الصناعية لبعض الكواكب
- ، يمكن تحديد موقع العناصر على مستوى الكتلة. ويترتب على ذلك، على وجه الخصوص، أن قوائم التعريفات يمكن أن تكون متداخلة.
-
صإدخال المثال:
- .
- .
يحدد هذا الإدخال ترقيم القائمة الذي يبدأ بالحرف اللاتيني الكبير "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 مجموعة خاصة من العلامات لعرض المعلومات في شكل قوائم. تعد القوائم أحد أكثر أشكال عرض البيانات استخدامًا، سواء في المستندات الإلكترونية أو المطبوعة. نصادف قوائم كل يوم تقريبًا - يمكن أن تكون قائمة بالمشتريات الضرورية في أحد المتاجر، أو الطلاب في الفصل، أو ببساطة الأشياء التي يجب القيام بها. تتوفر القدرة على تنظيم هياكل القائمة في العديد من برامج تحرير النصوص، على وجه الخصوص، يحتوي معالج النصوص القوي Microsoft Word على أدوات ملائمة لتنسيق قوائم من أنواع مختلفة (تتم مناقشة إمكانيات إنشاء قوائم HTML باستخدام Microsoft Word في الفصل 8). فيما يلي عدد من الحالات التي يكون فيها استخدام القوائم مناسبًا تمامًا:
لاحظ أن النقاط المذكورة أعلاه منظمة بدقة في شكل بنية قائمة.
يوفر HTML الأنواع الرئيسية التالية من القوائم: قائمة ذات تعداد نقطي ومرقمة وقائمة التعريفات. تُستخدم العلامات التالية لتنفيذ قوائم من أنواع مختلفة:
- ,
- ,
- ,
, - ، بمساعدة القوائم من هذا النوع التي يتم تنظيمها في مستندات HTML (UL - قائمة غير مرتبة، قائمة غير مرتبة).
في القائمة ذات التعداد النقطي، يتم استخدام أحرف خاصة تسمى علامات القائمة لتسليط الضوء على عناصرها (غالبًا ما تسمى تعداد نقطي، وهو النطق الرسمي للمصطلح الإنجليزي رصاصة). يتم تحديد مظهر علامات القائمة بواسطة المتصفح، وعند إنشاء قوائم متداخلة، تقوم المتصفحات تلقائيًا بتنويع مظهر العلامات عند مستويات تداخل مختلفة.
العلامات
- و<لي>
لإنشاء قائمة ذات تعداد نقطي، يجب عليك استخدام حاوية العلامات، التي توجد بداخلها جميع عناصر القائمة. توفر علامات فتح وإغلاق القائمة فاصل أسطر قبل القائمة وبعدها، وبالتالي فصل القائمة عن المحتوى الرئيسي للمستند، لذلك ليست هناك حاجة لاستخدام علامات الفقرة هنا
.يجب أن يبدأ كل عنصر في القائمة بعلامة
- ,
