يتعلم هذا القسم عناصر القائمة في HTML. تمثل نموذج القائمة نسبة كبيرة نسبيًا من تصميم موقع الويب ، ومعلومات العرض رائعة للغاية وبديهية ، وهو أمر سهل على فهم المستخدمين. سيتم استخدام الدور المتقدم لعناصر القائمة على نطاق واسع في تعلم نمط CSS اللاحق.
قوائم تنظيم البياناتبعد تعلم العديد من علامات HTML التي تتحكم في عرض صفحات الويب ، يمكن للقراء في البداية إنشاء صفحات مقالة نقية. يتعلم هذا القسم عناصر القائمة في HTML. تمثل نموذج القائمة نسبة كبيرة نسبيًا من تصميم موقع الويب ، ومعلومات العرض رائعة للغاية وبديهية ، وهو أمر سهل على فهم المستخدمين. سيتم استخدام الدور المتقدم لعناصر القائمة على نطاق واسع في تعلم نمط CSS اللاحق.
4.4.1 التكوين الهيكلي للقائمةعنصر قائمة HTML هو هيكل محاط بعلامة قائمة ، وعناصر القائمة الموجودة تتكون من <li> </li>. يظهر الهيكل المحدد في الشكل 4.17.
4.4.2 إنشاء قائمة غير مرتبةكما يوحي الاسم ، فإن القائمة غير المرتبة هي نموذج قائمة لا يوجد فيه عناصر القائمة في بنية القائمة أي طلب. تستخدم معظم تطبيقات الويب قوائم غير مرتبة ، وعلامات قائمتها هي <ul> </ul>. طريقة الكتابة كما يلي:
<ul>
<li> القائمة البند 1 </li>
<li> قائمة البند 2 </li>
<li> قائمة البند 3 </li>
<li> قائمة البند 4 </li>
<li> القائمة البند 5 </li>
</ul>
4.4.3 قم بعمل قائمة مرتبةكما يوحي الاسم ، تعني القائمة المطلوبة أن عناصر القائمة في بنية القائمة لها سلسلة من القوائم. من الأعلى إلى الأسفل ، يمكن أن يكون هناك أرقام تسلسل مختلفة ، مثل 1 أو 2 أو 3 أو A أو B أو C ، إلخ. قم بإنشاء ملف صفحة ويب في D:/ Web/ Directory ، اسمه UL_OL.HTM ، واكتب الرمز كما هو موضح في الرمز 4.17.
كود 4.17 إعدادات قائمة: ul_ol.htm
<html>
<head>
<title> إعدادات قائمة </title>
</head>
<body>
<حجم الخط = 5>
تقنية مكتب الاستقبال على الويب
<ul>
<li> html </li>
<li> CSS </li>
<li> JavaScript </li>
<li> فلاش </li>
</ul>
تعلم خلفية الويب
<ol>
<li> ASP </li>
<li> asp.net </li>
<li> php </li>
<li> CGI </li>
<li> روبي </li>
<li> Python </li>
</ol>
</font>
</body>
</html>
أدخل http: //localhost/ul_ol.htm في شريط عنوان المتصفح ، ويظهر تأثير التصفح في الشكل 4.18.
الشكل 4.18 إعدادات القائمة