Списъци в HTML

Неподредени (неномерирани) списъци
Отделните елементи на списъка се изброяват с един и същи графичен знак: кръгче, квадрат, отметка и т.н. – каквото укажете.
Пример
Необходими продукти за баница:
Кори за баница
Сирене
Яйца
Кисело мляко
Олио

Неподредени (неномерирани) списъци
Указват се с таг
за начало и
– за край. Отделните неща в списъка се отбелязват с таговете
и
.
Необходими продукти за баница:
Кори за баница
Сирене
Яйца
Кисело мляко
Олио

Неподредени (неномерирани) списъци
При задаване на този код браузърът изобразява списъка с автоматичен отстъп от лявото поле. Не е нужно и да се изписва тагът за преминаване на следващ ред
, тъй като това също става автоматично. Автоматично се добавя и по един празен ред над и под списъка.

Неподредени (неномерирани) списъци
Знакът, който се появява пред всеки ред в списъка е, по подразбиране, черен запълнен кръг. Ако желаете да използвате други символи трябва да ги зададете като стойности към атрибута type на тага ul.
Възможните стойности са:
– disc (запълнен кръг като този, който е по подразбиране);
– circle (незапълнен кръг);
– square (запълнен квадрат).

Неподредени (неномерирани) списъци
Пример за неподреден списък с незапълнени кръгчета
Първи елемент от списъка
Втори елемент от списъка
Трети елемент от списъка

Неподредени (неномерирани) списъци
Пример за неподреден списък със запълнени квадратчета:
Първи елемент от списъка
Втори елемент от списъка
Трети елемент от списъка

Пример
Планети
Меркурий
Венера
Земя
Марс
Юпитер
Сатурн
Уран
Нептун

Пример
Неподреден списък

Пример
Планети:
Меркурий
Венера
Земя
Марс
Юпитер
Сатурн
Уран
Нептун

Номерирани (подредени) списъци
С тези списъци изброяваните елементи получават номер.
Указват се с таг
за начало и
– за край на списъка. Отделните неща в списъка се отбелязват с таговете
и
.
Пример за подреден списък:
Минерална вода
Сок
Айрян

Номерирани (подредени) списъци
Минерална вода
Сок
Айрян

Номерирани (подредени) списъци
Номерът, който се появява пред всеки ред в списъка е, по подразбиране, арабско число. Ако желаете да използвате друга номерация, трябва да укажете това в атрибута type на тага оl.
Възможните номерации са:
– чрез арабски числа
– чрез големи римски числа
– чрез малки римски числа
– чрез главни латински букви
– чрез малки латински букви

Номерирани (подредени) списъци
Понякога е нужно един подреден списък да започне номерирането не от първото число или буква, а от някаква следваща. Това се постига като в тага се включи атрибутът start и му се зададе съответната числова (винаги в арабски числа) стойност.

Номерирани (подредени) списъци
Например за да започне изброяването от 5-тото голямо римско число се пише следният код:
Първи елемент от списъка, номериран с голямо римско число 5
Втори елемент от списъка, номериран с голямо римско число 6
Трети елемент от списъка, номериран с голямо римско число 7

Пример
Изучавани предмети
I. Математика
II. Химия
III. Физика
IV. Биология
V. История

CSS - Вид на символ за списъчен елемент
Вид на символ за списъчен елемент се задава със свойството list-style-type
ul {
list-style-type:none
}
Възможни стойности за неподреден списък
none - без символ
disc - запълнен кръг (това е символа по подразбиране)
circle - незапълнен кръг
square - квадрат

CSS - Вид на символ за списъчен елемент
Възможни стойности за подреден списък
decimal - арабски числа: 1, 2, 3...
decimal-leading-zero - като decimal, но с допълваща нула за числата от 1 до 9, напр. 01, 02, 03
lower-latin - малки латински букви:a, b, c, d, e...
lower-greek - малки гръцки букви: α, β, γ, δ...
lower-roman - римски числа, малки: i, ii, iii, iv, v...
upper-latin - главни латински букви: A, B, C, D, E...
upper-roman – римски числа, главни: I, II, III, IV, V...

CSS - Позициониране на списък
Позицията на списъка може да се управлява допълнително със свойството list-style-position. Възможните стойности са:
outside - стойността по подразбиране
inside - ще зададе допълнителен отстъп за списъка

Задача
Създайте уеб сайт на тема “Готварски рецепти”. Създайте външен CSS файл, в който се задава следното форматиране по ваш избор:
1) на страницата – фон;
2) на заглавията от ниво h1 – цвят, размер;
3) на заглавията от ниво h2 – цвят, размер;
4) на абзаците – цвят на текста, подравняване, размер на символите;
5) на картинките – размер;
6) на неподредените списъци – символ за изброяване;
7) на подредените списъци – вид на номерацията.
Създаденият CSS файл да се добави към всички страници на сайта.

Задача
Сайтът да съдържа: Една главна страница и три подстраници.
Главната страница да има заглавие от ниво h1 “Готварски рецепти” и след това 3 заглавия от ниво h2 – три ястия. Всяко заглавие от ниво h2 да бъде хиперлинк към подстраница с информация за това как може да се сготви съответното ястие (рецепта за готвене).