C, PHP, VB, .NET

Когато ни се налага да изброяваме поредица от елементи, то ние използваме т.нар. „списъци“. Езикът HTML позволява доста възможности за осъществяване на такава функционалност.

1. Подредени списъци: Може би са по-добре познати са като „номерирани списъци“. Чрез тях изреждаме стойности една след друга, като всяка си има пореден уникален номер. По подразбиране номерът следва числата 1, 2, 3, 4, …

Пример:

<div style="margin-left:50px">Нужни продукти:
<ol>
	<li>Картофи</li>
	<li>Моркови</li>
	<li>Зеле</li>
</ol>
</div>

Резултат:

Съществуват и други видове номерация. Тя зависи от стойността на стил „list-style-type“. Възможните стойности са ‘lower-alpha‘ (малки букви a,b,c,d,…), ‘upper-alpha‘ (главни букви A,B,C,D,…), ‘lower-roman‘ (малки римски числа i,ii,iii,iv,v,…), ‘upper-roman‘ (главни римски числа I,II,III,IV,V,…) и ‘decimal’ (по подразбиране числа 1,2,3,4,…). Ето един пример:

<div style="margin-left:50px">Нужни продукти:
<ol style="list-style-type:upper-roman">
	<li>Картофи</li>
	<li>Моркови</li>
	<li>Зеле</li>
</ol>
</div>

Резултат:

Възможно е да приложите същата промяна на стил и на елементите <li>, но това е много по-рядко практикувано, понеже не е естествено номерацията да се променя вътре в самия списък. Имаме възможност и за вложени списъци:

<div style="margin-left:50px">Задачи:
<ol style="list-style-type:decimal">
	<li>Задача 1
		<ol style="list-style-type:lower-alpha">
			<li>Подточка a</li>
			<li>Подточка b</li>
			<li>Подточка c</li>
		</ol>
	</li>
	<li>Задача 2
		<ol style="list-style-type:lower-alpha">
			<li>Подточка a</li>
			<li>Подточка b</li>
			<li>Подточка c</li>
		</ol>
	</li>
</ol>
</div>

Резултат:

2. Неподредени списъци: Това са списъците, в които просто изреждаме стойностите и те нямат уникална номерация.

Пример:

<div style="margin-left:50px">Необходими продукти:
<ul>
	<li>Картофи</li>
	<li>Моркови</li>
	<li>Зеле</li>
</ul>
</div>

Резултат:

И тук е валиден стилът list-style-type. Възможните стойности са circle, square и disc. Ще демонстрираме тези стилове директно чрез промяна на изброените стойности:

<div style="margin-left:50px">Необходими продукти:
<ul>
	<li style="list-style-type:circle">Картофи</li>
	<li style="list-style-type:square">Моркови</li>
	<li style="list-style-type:disc">Зеле</li>
</ul>
</div>

Резултат:

Тук ни е дадена възможност и за още един стил – list-style-image. Като стойност се приема релативен или пълен URL до картинка. Така в неподредения списък вместо disc, square или circle ще се появи посочената от нас картинка.

3. Списъци с обяснения: Използват се за „дефиниране“ на обекти. Например когато желаем да обясним дадени термини. Списъците с обяснения се ограждат с <dl> (definition list), последвано от двойки <dt> (definition term) и <dd> (definition description).

Пример:

<div style="margin-left:50px">Напитки:
<dl>
	<dt>Бира</dt>
		<dd>Газирано слабо алкохолно пиво</dd>
	<dt>Ракия</dt>
		<dd>Силно спиртно алкохолно питие</dd>
	<dt>Кола</dt>
		<dd>Газирана безалкохолна напитка</dd>
</dl>
</div>

Резултат:

4. Вложени списъци: Вече показахме пример с подредени списъци. Можем и още по-общо да влагаме и различни типове списъци. Ето един пример:

<div style="margin-left:50px">Програма:
<ul>
   <li>Понеделник:
        <ol>
            <li>Числени методи</li>
            <li>Дискретна математика</li>
        </ol>
	</li>
   <li>Сряда:
        <ol>
           <li>Числени методи</li>
           <li>Програмиране на C#</li>
           <li>Частни диференциални уравнения</li>
       </ol>
	</li>
</ul>
</div>

Резултат: