إنشاء قوائم في HTML | دروس HTML5


القوائم في HTML


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


القوائم المتسلسلة وغير المتسلسلة

قائمة غير مرتبة بتنسيق HTML

تبدأ القائمة غير المرتبة بعلامة <ul>. يبدأ كل عنصر في القائمة بعلامة <li>.

يتم تمييز العناصر في القائمة دوائر سوداء صغيرة بشكل افتراضي.

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

خاصية List-style-type في القوائم

تُستخدم خاصية list-style-type لتحديد نوع الرموز (دائرة ، مربع ، إلخ) للعناصر في القائمة.


مثال لقيمة القرص:

<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

 مثال لقيمة الدائرة:

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

مثال للقيمة المربعة: 

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

مثال لقيمة بلا: 

<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

القوائم المتسلسلة بتنسيق HTML

تبدأ القائمة المتسلسلة بعلامة <ol>. تبدأ العناصر الموجودة في القوائم المتسلسلة بالعلامة <li>.

يتم تمييز عناصر القائمة برقم افتراضيً.

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

مثال للأرقام:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

مثال للأحرف الكبيرة:

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ol>

مثال للأحرف الصغيرة:

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

مثال على الأعداد اليونانية الكبيرة:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

مثال للأرقام اليونانية الصغيرة:

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

القوائم التفسيرية في HTML

يدعم HTML القوائم التفسيرية.

القوائم التوضيحية هي قوائم الكلمات (المصطلحات) التي يتم فيها توفير كلمة توضيحية لكل كلمة.

يمكن تحديد قائمة توضيحية باستخدام علامة <dl>.

تحدد العلامة <dt> الكلمة في القائمة.

تحدد العلامة <dd> شرحًا لكل كلمة.


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

القوائم المتداخلة في HTML

يمكن تضمين القوائم في HTML.

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

القوائم الأفقية بتنسيق HTML

يمكن تصميم القوائم بعدة طرق باستخدام CSS.

من الطرق الشائعة لتصميم القوائم جعلها أفقية، وهو ما يُستخدم في القوائم:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>



كلمات مفتاحية: