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>
Верхний/нижний индекс:  и 
Пример:

<p>Эта формула: H<sub>2</sub>O.</p>

6. Текстовые стили
С помощью тега  (устаревшего) можно менять цвет, размер и шрифт текста:

<font color="red" size="5" face="Arial">Красный текст</font>

Пример HTML-кода

Соберем все изученные элементы в одном документе:

<!DOCTYPE html>
<html lang="ru">
<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>