Инструкции к выполнению

Пошаговое руководство по созданию первой HTML страницы

📋 Подготовка к работе

  1. Установите текстовый редактор

    Рекомендуется использовать Visual Studio Code, Sublime Text или Notepad++

  2. Создайте рабочую папку

    Создайте папку "lab1" на рабочем столе или в удобном месте

  3. Подготовьте браузер

    Используйте современный браузер: Chrome, Firefox, Edge или Safari

🚀 Этап 1: Создание базовой структуры

<!-- Шаг 1: Создайте файл index.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>
    <!-- Здесь будет содержимое -->
</body>
</html>

Объяснение элементов:

  • <!DOCTYPE html> - объявление типа документа HTML5
  • <html lang="ru"> - корневой элемент с указанием языка
  • <head> - контейнер для метаданных
  • <meta charset="UTF-8"> - кодировка документа
  • <title> - заголовок страницы в браузере
  • <body> - основное содержимое страницы

📝 Этап 2: Добавление контента

Добавьте следующие элементы в секцию <body>:

Заголовки и параграфы

<h1>Главный заголовок страницы</h1>
<h2>Подзаголовок</h2>
<p>Это обычный параграф текста. Здесь можно написать 
любую информацию о вашем проекте.</p>

Списки

<!-- Маркированный список -->
<ul>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ul>

<!-- Нумерованный список -->
<ol>
    <li>Шаг первый</li>
    <li>Шаг второй</li>
    <li>Шаг третий</li>
</ol>

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

<!-- Ссылка -->
<a href="https://www.example.com">Текст ссылки</a>

<!-- Изображение -->
<img src="image.jpg" alt="Описание изображения" width="300">

🎨 Этап 3: Добавление стилей

Создайте файл styles.css в той же папке:

/* Базовые стили */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}

p {
    color: #666;
    margin-bottom: 15px;
}

/* Стили для списков */
ul, ol {
    margin-left: 30px;
}

li {
    margin-bottom: 5px;
}

Подключите стили к HTML файлу, добавив в <head>:

<link rel="stylesheet" href="styles.css">

📊 Этап 4: Создание таблицы

<table>
    <thead>
        <tr>
            <th>Тег</th>
            <th>Описание</th>
            <th>Пример</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>&lt;p&gt;</td>
            <td>Параграф</td>
            <td>Обычный текст</td>
        </tr>
        <tr>
            <td>&lt;h1&gt;</td>
            <td>Заголовок</td>
            <td>Главный заголовок</td>
        </tr>
        <tr>
            <td>&lt;a&gt;</td>
            <td>Ссылка</td>
            <td>Гиперссылка</td>
        </tr>
    </tbody>
</table>

✅ Этап 5: Проверка и тестирование

  1. Откройте файл в браузере

    Дважды кликните на файл index.html или перетащите его в окно браузера

  2. Проверьте отображение всех элементов
    • Заголовки должны быть разного размера
    • Списки должны иметь маркеры или номера
    • Ссылки должны быть кликабельными
    • Стили должны применяться корректно
  3. Валидация кода

    Используйте W3C Validator для проверки правильности HTML кода

  4. Проверка адаптивности

    Измените размер окна браузера, чтобы убедиться, что страница хорошо выглядит на разных экранах

⚠️ Частые ошибки и их решения

Неправильная кодировка

Проблема: Вместо русских букв отображаются иероглифы

Решение: Убедитесь, что файл сохранен в UTF-8 и есть мета-тег charset

Стили не применяются

Проблема: CSS не работает

Решение: Проверьте путь к файлу CSS и правильность синтаксиса

Изображения не отображаются

Проблема: Вместо картинки значок ошибки

Решение: Проверьте путь к файлу и его наличие в папке

Незакрытые теги

Проблема: Странное отображение

Решение: Убедитесь, что все теги закрыты правильно

💡 Полезные советы

  • Используйте семантические теги HTML5: <header>, <nav>, <main>, <footer>
  • Всегда добавляйте атрибут alt к изображениям для доступности
  • Используйте внешние файлы CSS вместо встроенных стилей
  • Проверяйте код в разных браузерах
  • Сохраняйте резервные копии вашей работы
  • Комментируйте сложные участки кода
  • Используйте понятные имена для файлов и классов