Практика: создание простой веб-страницы с текстом, изображением и таблицей

Подготовка: структура HTML-документа 📝

Начнём с базового шаблона HTML5 — фундамента любой веб-страницы:

<!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>
    <!-- Здесь будет контент -->
</body>
</html>

🔍 Разберём ключевые элементы:

<!DOCTYPE html> — объявление типа документа
<html lang="ru"> — корневой элемент с указанием языка
<meta charset="UTF-8"> — поддержка кириллицы и спецсимволов
<meta name="viewport"> — адаптивность для мобильных устройств

Добавляем текст и заголовки ✏️

Используем семантические теги для текстового контента:

<body>
    <h1>Добро пожаловать в мир HTML!</h1>
    <h2>Почему веб-разработка — это круто</h2>

    <p>HTML — это скелет вашего сайта. С его помощью вы можете:</p>
    <ul>
        <li>Создавать структурированный контент</li>
        <li>Добавлять мультимедиа</li>
        <li>Оформлять таблицы данных</li>
    </ul>

    <p>Этот абзац демонстрирует <strong>жирный текст</strong> и <em>курсив</em>.</p>
</body>

💡 Профессиональный совет:

Заголовки <h1>-<h6> должны идти по порядку (не пропускайте уровни)
Для списков используйте <ul> (маркированные) или <ol> (нумерованные)
<strong> и <em> предпочтительнее <b> и <i> (семантика!)

Вставляем изображение 🖼️

Работаем с тегом <img> и его атрибутами:

<section>
    <h2>Красивое место для вдохновения</h2>
    <img src="nature.jpg" alt="Горный пейзаж" width="600">
    <p>Фото: Национальный парк "Таганай"</p>
</section>

📌 Важные нюансы:

src — путь к изображению (относительный или абсолютный)
alt — альтернативный текст (обязателен для доступности!)
width/height — лучше задавать только один параметр для сохранения пропорций

Создаём таблицу 📊

Демонстрация таблицы с данными:

<table border="1">
    <caption>Сравнение технологий</caption>
    <thead>
        <tr>
            <th>Технология</th>
            <th>Год создания</th>
            <th>Назначение</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML</td>
            <td>1991</td>
            <td>Структура</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>1996</td>
            <td>Оформление</td>
        </tr>
    </tbody>
</table>

🔧 Оптимизация кода:

<caption> — заголовок таблицы (улучшает семантику)
<thead>/<tbody> — логическое разделение
border="1" — временное решение для визуализации (в реальных проектах используйте CSS)

Финальный код: объединяем всё вместе 🎁

Полноценная веб-страница с наработками:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя первая HTML-страница</title>
</head>
<body>
    <h1>Добро пожаловать в мир HTML!</h1>

    <section>
        <h2>Примеры возможностей</h2>
        <p>Эта страница демонстрирует базовые элементы:</p>
        <ul>
            <li>Текстовое оформление</li>
            <li>Изображения</li>
            <li>Таблицы</li>
        </ul>
    </section>

    <section>
        <h2>Горный пейзаж</h2>
        <img src="mountains.jpg" alt="Горы на закате" width="500">
    </section>

    <section>
        <h2>Сравнение технологий</h2>
        <table border="1">
            <!-- Таблица из предыдущего примера -->
        </table>
    </section>
</body>
</html>

🚀 Дальнейшие шаги:

Сохраните файл как index.html
Откройте его в браузере через "Открыть файл"
Экспериментируйте, меняя параметры тегов!

Полезные привычки для начинающих 🛠️

Валидация кода — проверяйте через validator.w3.org
Комментирование — отмечайте сложные участки 
Семантика — используйте <section>, <article>, <header> вместо <div>
Доступность — добавляйте alt и aria-атрибуты для инклюзивности ```

Готово! Теперь у вас есть полноценный практический урок по созданию первой веб-страницы. 🌟