🏠 Домашнее задание

⚡ Суть задания

Соберите собственный HTML-каркас с `doctype`, `head` и `body`, откройте его в браузере и проверьте, что заголовок вкладки и кириллица отображаются правильно.

📋 Формулировка задания

Задание урока 03:

Создайте свою страницу-черновик на любую тему. Важно не оформление, а правильный каркас: `doctype`, `html`, `head`, `body`, `meta charset`, `meta viewport`, `title`.

🔧 Шаг 0. Подготовка рабочего места

Для проверки достаточно браузера и папки с файлом `index.html`. Если хотите, можно открыть проект в VS Code и использовать Live Server, но это не обязательно.

Подсказка: держите документ в одной папке и используйте только относительные пути.

🛠️ Шаги выполнения задания

1

Создайте HTML-файл

Создайте index.html и впишите в него базовый каркас документа.

Файл: subjects/html-css/course/lessons/03-html-document-structure/index.html

<!-- 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>
  <h1>Мой первый каркас</h1>
  <p>Страница открывается без ошибок.</p>
</body>
</html>
2

Проверьте открытие в браузере

Откройте `index.html` двойным кликом или через Live Server. Убедитесь, что кириллица читается и вкладка браузера показывает заголовок из `title`.

3

Сверьте структуру с правилами урока

Проверьте, что `doctype` стоит первым, `head` находится до `body`, а видимый контент лежит внутри `body`.

✅ Полное решение

Ниже показан эталонный вариант, на который можно ориентироваться.

Файл: subjects/html-css/course/lessons/03-html-document-structure/homework.html

<!-- 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>
  <header>
    <h1>Моя страница</h1>
  </header>
  <main>
    <p>Содержимое страницы.</p>
  </main>
</body>
</html>

🧪 Как проверить решение

  1. Откройте `index.html` в браузере.
  2. Проверьте, что страница отображается без ошибок кодировки.
  3. Убедитесь, что заголовок вкладки совпадает с `title`.
  4. При желании прогоните файл через W3C Validator.

💡 Советы

  • Не удаляйте `doctype`, даже если страница очень простая.
  • Всегда начинайте `head` с `meta charset`.
  • Не смешивайте служебные теги и видимый контент.