Полное руководство по HTML

Введение в HTML

HTML (HyperText Markup Language) - это стандартный язык разметки для создания веб-страниц. Он используется для определения структуры и содержимого веб-документов, включая текст, изображения, ссылки и другие элементы.

Основная структура HTML документа

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок страницы</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это базовая HTML страница.</p>
</body>
</html>

Этот пример показывает базовую структуру HTML документа. Давайте разберем каждый элемент:

!DOCTYPE html: Объявляет, что это HTML5 документ.
html: Корневой элемент HTML страницы.
head: Содержит мета-информацию о документе.
meta charset="UTF-8": Указывает кодировку документа.
meta name="viewport": Контролирует отображение на мобильных устройствах.
title: Заголовок страницы, отображаемый во вкладке браузера.
body: Содержит видимое содержимое страницы.

Текстовые элементы

Заголовки

HTML предоставляет шесть уровней заголовков, от h1 до h6:

<h1>Это заголовок первого уровня</h1>
<h2>Это заголовок второго уровня</h2>
<h3>Это заголовок третьего уровня</h3>
<h4>Это заголовок четвертого уровня</h4>
<h5>Это заголовок пятого уровня</h5>
<h6>Это заголовок шестого уровня</h6>

Параграфы и форматирование текста

<p>Это обычный параграф текста.</p>
<p>Это параграф с <strong>жирным текстом</strong> и <em>курсивом</em>.</p>
<p>А это параграф с <mark>выделенным</mark> и <del>зачеркнутым</del> текстом.</p>

Ссылки и изображения

Ссылки

<p>
  <a href="https://www.example.com">Это ссылка на example.com</a>
</p>
<p>
  <a href="page.html">Относительная ссылка на страницу в том же каталоге</a>
</p>
<p>
  <a href="#section">Ссылка на элемент с id="section" на этой же странице</a>
</p>

Изображения

<img src="https://picsum.photos/200/300" alt="Случайное изображение">
<img src="https://picsum.photos/300/200" alt="Еще одно случайное изображение">

Списки

Маркированные списки

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ul>

Нумерованные списки

<ol>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
  <li>Третий элемент списка</li>
</ol>

Таблицы

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

Формы

<form>
    <div>
        <label for="name">Имя:</label>
        <input type="text" id="name" name="name" required>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div>
        <label for="message">Сообщение:</label>
        <textarea id="message" name="message"></textarea>
    </div>
    <button type="submit">Отправить</button>
</form>

Семантические элементы HTML5

HTML5 ввел ряд семантических элементов, которые помогают лучше структурировать содержимое страницы:

<header>
    <h1>Заголовок сайта</h1>
    <nav>
        <ul>
            <li><a href="#home">Главная</a></li>
            <li><a href="#about">О нас</a></li>
            <li><a href="#contact">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>Заголовок статьи</h2>
        <p>Содержание статьи...</p>
    </article>
    
    <aside>
        <h3>Дополнительная информация</h3>
        <p>Какой-то второстепенный контент...</p>
    </aside>
</main>

<footer>
    <p>&copy; 2023 Мой сайт. Все права защищены.</p>
</footer>

Заключение

Это базовое введение в HTML. По мере изучения вы обнаружите много других элементов и атрибутов, которые помогут вам создавать более сложные и интерактивные веб-страницы. Не забывайте практиковаться и экспериментировать с различными элементами для лучшего понимания их работы.