понеделник, 30 март 2026 г.

HTML форматиране на текст

 Създайте HTML документ със заглавие „Родна стряха“, в който да представите част от стихотворението.

Изпълнете следните изисквания:

  1. Задайте фон на страницата.
  2. Добавете заглавие (h1), което да е:
    • центрирано
    • с различен шрифт
    • с цвят по избор
  3. Въведете текста на стихотворението в отделни абзаци (<p>), като:
    • използвате различни шрифтове за всеки абзац
    • зададете различен размер на текста
    • използвате различни цветове
  4. Форматирайте отделни думи, като използвате:
    • удебелен текст (bold)
    • наклонен текст (italic)
    • <u>подчертан текст</u>
  5. Добавете хоризонтална линия (<hr>).
  6. В края на страницата поставете изречение, което:
    • е центрирано
    • е с по-голям размер
    • е подчертано
Пример:
<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <title>Родна стряха</title>
</head>
<body style="background-color: #f5f5dc;">

    <h1 style="text-align:center; color:darkred; font-family:Georgia;">
        Родна стряха
    </h1>

    <p style="font-family:Arial; font-size:18px; color:navy;">
        Под <span style="font-weight:bold;">родната стряха</span> аз пораснах,
    </p>

    <p style="font-family:'Courier New'; font-size:20px; color:green;">
        там първи песни аз запях,
    </p>

    <p style="font-family:Verdana; font-size:22px; color:purple;">
        там майка <span style="font-style:italic;">мила</span> ме погалва,
    </p>

    <p style="font-family:Tahoma; font-size:18px; color:brown;">
        там татко дума ми продума.
    </p>

    <hr>

    <p style="text-align:center; font-family:Impact; font-size:24px; color:darkblue;">
        <u>Обичам те, родино свята!</u>
    </p>

</body>
</html>


Тагът <hr> в HTML означава хоризонтална линия (horizontal rule).

👉 Използва се, за да:

  • разделя съдържание на части
  • прави текста по-прегледен
  • визуално отделя различни абзаци или секции

📌 1. Цветна линия

<hr style="color:red;">

📌 2. По-дебела линия

<hr style="height:5px;">

📌 3. Цветна и дебела линия

<hr style="height:5px; background-color:blue;">

📌 4. Пунктирана линия

<hr style="border: 2px dotted green;">

📌 5. Прекъсната (даширана) линия

<hr style="border: 3px dashed purple;">

📌 6. Центрирана и по-къса линия

<hr style="width:50%; margin:auto;">

💡 Най-често използван вариант:

<hr style="height:3px; background-color:black; width:70%;">