HTML з нуля: форматування тексту. Урок №3 Overcod.net

HTML з нуля: форматування тексту. Урок №3

Робота з текстом в HTML — одна з перших основ, яку необхідно засвоїти початківцям у веб-розробці. У цьому уроці ви навчитеся додавати текст у HTML-документ, форматувати його, вирівнювати, змінювати колір і розмір, а також використовувати спеціальні ефекти, як-от закреслення чи підкреслення. Почнемо з простого та поступово перейдемо до складнішого.

Основні теги для роботи з текстом

1. Заголовки
Теги <h1>–<h6> використовуються для заголовків різних рівнів. Чим менший номер у тега, тим більший текст:

<h1>Найбільший заголовок</h1>
<h6>Найменший заголовок</h6>

Заголовки автоматично виділяються напівжирним шрифтом і починаються з нового рядка.

2. Вирівнювання заголовків:
Атрибут align дозволяє задати горизонтальне вирівнювання тексту:

<h1 align="center">Центрований заголовок</h1>

3. Абзаци
Тег  розділяє текст на абзаци:

<p>Це перший абзац.</p>
<p>Це другий абзац.</p>

Атрибут align також можна використовувати для вирівнювання тексту в абзаці.

4. Лінії
Для поділу тексту використовується тег <hr>. Його можна налаштувати:

<hr width="50%" align="center" size="5" color="blue" noshade>

5. Виділення тексту

Курсив:  або 
Жирний текст:  або 
Підкреслений текст: 
~~Закреслений текст~~: <s></s>
Верхній/нижній індекс:  і 
Приклад:

&lt;p>Це формула: H&lt;sub>2&lt;/sub>O.&lt;/p>

6. Стилі тексту
За допомогою тега  (застарілого) можна змінювати колір, розмір і шрифт тексту:

<font color="red" size="5" face="Arial">Червоний текст</font>

Приклад HTML-коду

Зберемо всі вивчені елементи в одному документі:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Форматування тексту в HTML</title>
</head>
<body>
    <h1 align="center">Форматування тексту</h1>
    <p align="justify">HTML — це мова розмітки, яка дозволяє створювати веб-сторінки.</p>
    <p>Приклад виділення тексту: <strong>жирний</strong>, <i>курсив</i>, <u>підкреслений</u>.</p>
    <hr width="50%" size="3">
    <p align="right">Формула води: H<sub>2</sub>O.</p>
    <p align="center"><font color="blue" size="4">Успіхів у вивченні HTML!</font></p>
</body>
</html>

Залиште коментар(2)

Раскажіть будь ласка за ці атриібути:
```
<hr width="50%" align="center" size="5" color="blue" noshade>
```
Відповісти
Розміщено: 24.01.2025

width=”50%” – задає ширину лінії в процентному співвідношенні від ширини контейнера. У цьому випадку лінія буде займати 50% ширини доступного простору.
align=”center” – вирівнює лінію по центру сторінки або контейнера.
size=”5″ – визначає висоту лінії, тобто її товщину. Чим більше значення, тим товща лінія.
color=”blue” – встановлює колір лінії. В цьому випадку лінія буде синьою.
noshade – цей атрибут додає лінії ефект “необробленої” або без тіні (відсутність візуального ефекту градієнта). Він зазвичай використовується для того, щоб лінія виглядала більш простою, без додаткових ефектів тіні.

Розміщено: 24.01.2025