Обучающий сайт по HTML

Изучайте основы HTML с простыми и понятными примерами

Основы HTML

HTML (HyperText Markup Language) - это стандартный язык разметки для создания веб-страниц.

Структура HTML-документа

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Моя первая страница</title> </head> <body> <h1>Привет, мир!</h1> <p>Это моя первая HTML-страница.</p> </body> </html>

Привет, мир!

Это моя первая HTML-страница.

Работа с текстом

HTML предоставляет множество тегов для форматирования текста.

Примеры текстовых тегов

<h1>Заголовок 1 уровня</h1> <h2>Заголовок 2 уровня</h2> <p>Это обычный абзац текста.</p> <p><strong>Это жирный текст</strong> и <em>это курсив</em>.</p> <p><u>Подчеркнутый текст</u> и <s>перечеркнутый текст</s>.</p> <p>Текст с <br> переносом строки.</p>

Заголовок 1 уровня

Заголовок 2 уровня

Это обычный абзац текста.

Это жирный текст и это курсив.

Подчеркнутый текст и перечеркнутый текст.

Текст с
переносом строки.

Изображения в HTML

Тег <img> используется для вставки изображений на страницу.

<!-- Простое изображение --> <img src="https://via.placeholder.com/150" alt="Пример изображения"> <!-- Изображение с размерами --> <img src="https://via.placeholder.com/300x200" alt="Пример" width="300" height="200"> <!-- Изображение с подписью --> <figure> <img src="https://via.placeholder.com/400x300" alt="Пример"> <figcaption>Это пример изображения с подписью</figcaption> </figure>
Пример изображения
Пример
Пример
Это пример изображения с подписью

Таблицы в HTML

Таблицы создаются с помощью тегов <table>, <tr>, <th> и <td>.

<table border="1"> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> </table>
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6