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

Списъци в HTML

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