Основы 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

Тег <a> используется для создания гиперссылок.

<!-- Простая ссылка -->
<a href="https://example.com">Посетите Example.com</a>

<!-- Ссылка с атрибутом target -->
<a href="https://example.com" target="_blank">Открыть в новой вкладке</a>

<!-- Ссылка на email -->
<a href="mailto:info@example.com">Написать нам</a>

<!-- Ссылка-якорь -->
<a href="#top">Вернуться наверх</a>
            

Посетите Example.com
Открыть в новой вкладке
Написать нам
Вернуться наверх

Изображения в 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