Блог на Петя Газдова

Основни видове HTML списъци:

Неподредени списъци (<ul>): Използват се за елементи, където редът не е от значение. Елементите се маркират по подразбиране с точки (bullets). Типът маркер може да се променя чрез CSS или атрибута type (disc, circle, square).
Подредени списъци (<ol>): Използват се за елементи, където редът е важен (номерирани). Номерирането е автоматично (1, 2, 3...). Чрез атрибута type може да се зададе номериране с букви (a, A) или римски цифри (i, I).
Описващи списъци (<dl>): Служат за създаване на списъци с термини и техните дефиниции. Използват таговете <dt> (definition term) за термина и <dd> (definition description) за описанието.
Вложени списъци: Позволяват поставянето на един списък (например неподреден) вътре в друг (подреден) за създаване на йерархични структури.

Структура и атрибути:

Всеки елемент в <ul> или <ol> се поставя в тага <li> (list item).
За подредените списъци, номерирането се задава автоматично, без нужда от ръчно изписване на цифри.

Практическа задача: "Моята любима рецепта"

Тази практическа задача има за цел да упражни създаването на подредени (<ol>), неподредени (<ul>) и вложени списъци в HTML. Ще създадете структура за рецепта, като използвате различни типове номериране (тип type="1", a, i) за стъпките.

Задача: Създайте HTML файл с име recipe.html, който съдържа следното структурирано съдържание:

Заглавие: H1 "Рецепта за Палачинки"
Подзаглавие: H2 "Необходими продукти" (Неподреден списък <ul>)
- 2 яйца
- 1 ч.ч. брашно
- 1 ч.ч. прясно мляко
- щипка сол
Подзаглавие: H2 "Начин на приготвяне" (Подреден списък <ol>)
- Разбийте яйцата.
- Добавете брашното и млякото.
- Изпечете в тиган.
Вложен списък (Бонус): Под стъпка 3 ("Изпечете"), добавете вложен неподреден списък с "Полезни съвети":
- Използвайте масло за тигана.
- Първата палачинка е за проба.

Решение (HTML код)

html

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <title>Моята Рецепта</title>
</head>
<body>

    <h1>Рецепта за Палачинки</h1>

    <h2>Необходими продукти</h2>
    <ul>
        <li>2 яйца</li>
        <li>1 ч.ч. брашно</li>
        <li>1 ч.ч. прясно мляко</li>
        <li>Щипка сол</li>
    </ul>

    <h2>Начин на приготвяне</h2>
    <ol type="1">
        <li>Разбийте яйцата.</li>
        <li>Добавете брашното и млякото.</li>
        <li>Изпечете в тиган.
            <ul>
                <li>Използвайте масло за тигана.</li>
                <li>Първата палачинка е за проба.</li>
            </ul>
        </li>
    </ol>

</body>
</html>

Какво да упражните допълнително?
Променете type="1" на <ol> с type="A" или type="i", за да видите как се променя номерирането.
Добавете type="square" на неподредения списък (<ul>), за да смените точките с квадратчета.

Блог на Петя Газдова

неделя, 15 февруари 2026 г.

Търсене на информация в интернет

петък, 13 февруари 2026 г.

ОБРАБОТКА НА ИНФОРМАЦИЯ И КОМУНИКАЦИЯ.

Меню с HTMLс използване на списъци

четвъртък, 12 февруари 2026 г.

За изпитване

сряда, 11 февруари 2026 г.

Тест

Списъци в HTML

петък, 6 февруари 2026 г.

СЪЗДАВАНЕ И ПУБЛИКУВАНЕ НА ИНФОРМАЦИЯ В ИНТЕРНЕТ

Страници

неделя, 15 февруари 2026 г.