HTML-страницы целиком

НЕ ОБЯЗАТЕЛЬНО ДЛЯ НОВИЧКОВ

Приветствую! Здесь вы наверняка найдете, что ищете. Примеры в лаборатории рассчитаны на то, что мы разбираем что-то конкретное.

Текущая статья посвящена целым HTML-страницам с семантической разметкой — от лендинга до формы.

Поэтому за теорией по текущей теме вам — в энциклопедию. Если ещё не погружались, то маршрут прост:

  1. Основы
  2. Система и сеть
  3. Данные и разметка
  4. Код и разработка
  5. Языки
  6. Искусственный интеллект
  7. Проект
  8. Инфраструктура и безопасность
  9. Спин-офф

Обязательно пройдитесь.

А теперь приступим к нашему предмету.

Теория и соседние материалы

Таблицу не используют, чтобы «разложить весь сайт в клетки» — для макета есть Flexbox и Grid и готовые макеты.

Основы целой веб-страницы

HTML-страница — один текстовый файл, который браузер читает сверху вниз и строит из тегов дерево документа. CSS добавляет внешний вид, JavaScript — поведение; без HTML не из чего собрать сайт.

С чего начать

Теория тегов и гипертекста — HTML и HTML — о разделе.

Минимальный шаблон в одном блоке — Шаблоны. После того как каркас понятен, оформите макет в галерее HTML+CSS или через Tailwind.

Навигация по примерам

Ищут в интернете (RU / EN) Раздел ниже
html страница пример / complete html page example Обязательный каркас
html привет мир / hello world html code Привет, мир
html структура страницы / html document structure Как устроен файл
html статья h1 h2 / html blog post example Статья с оглавлением
html список ul ol / ordered list html Списки
html таблица table / html schedule table Таблица
html форма обратной связи / contact form html Форма
html img alt / insert image html Изображение и ссылки
html details summary / accordion without js FAQ на details
html портфолио сайт / personal portfolio html Портфолио
html резюме cv / resume html template Резюме
html landing page / одностраничный сайт html Лендинг
header nav main footer / semantic html Семантика
link stylesheet / подключить css к html Отдельный CSS-файл
html проект для школы / лабораторная html Чистая база

Какую страницу выбрать

Вам нужно… Откройте пример Что скопировать
Проверить, что файл открывается Привет, мир Весь блок — 15 строк
Реферат, конспект, блог Статья header + nav + main + article
Список шагов или покупок Списки ul, ol или dl
Расписание, оценки, тарифы Таблица table, thead, tbody
«Напишите нам» на сайте Форма form, label, input, textarea
Отчёт с картинкой Медиа figure, img, alt
Вопросы-ответы без JS details details + summary
Сдать портфолио в 11 классе Портфолио Секции #about, #projects
CV на одну страницу Резюме section + time
Сайт кружка / проекта Лендинг Hero + карточки + форма

Для практики со всем веб-стеком сразу — WebEditor (HTML, CSS и JavaScript в отдельных вкладках, живой предпросмотр).

Вставьте любой пример из статьи в редактор — предпросмотр обновится через пару секунд. Так быстрее проверить разметку, чем каждый раз пересохранять файл на диске.

Как запустить страницу за 30 секунд

  1. Скопируйте весь блок от <!DOCTYPE html> до </html> (включая эти строки).
  2. VS Code или Блокнот → «Сохранить как» → index.html.
  3. В VS Code внизу справа выберите UTF-8 (иначе кириллица сломается).
  4. Откройте файл двойным щелчком или перетащите в Chrome / Edge / Firefox.
  5. Правите текст → F5 — сразу видите изменение. Или вставьте код в HTMLPlayground выше на этой странице.

Проверка, что всё ок: на вкладке браузера — ваш <title>, на экране — не «лес» из тегов, а нормальный текст.

Где править Зачем
Текст между <p>…</p> Содержимое видно сразу
Атрибут href у <a> Куда ведёт ссылка
src и alt у <img> Картинка и подпись для доступности
Блок <style> в <head> Только оформление; структура остаётся в HTML

Базовые термины

Термин Простыми словами
Тег Команда браузеру: «здесь заголовок», «здесь абзац»
Атрибут Уточнение в теге: href, src, alt, type
<head> Служебная часть: заголовок вкладки, кодировка, стили
<body> Всё, что видит человек на экране
Семантика Тег по смыслу (<nav>, <article>), а не голый <div>
DOM Дерево элементов страницы; с ним работает JavaScript
Валидность Страница без «сломанных» тегов; проще для поиска и скринридеров
Парный тег Открывающий <p> и закрывающий </p> — пара обязательна
Одиночный тег <img>, <br>, <meta> — закрывающего нет (в HTML5 можно без /)
Комментарий <!-- текст --> — виден в коде, в браузере не показывается

Как устроен один HTML-файл

Браузер читает файл сверху вниз и строит дерево. Учебная схема (не код, а логика):

<!DOCTYPE html>          ← «режим HTML5»
<html>
  <head>                 ← вкладка, кодировка, стили (не на экране)
    <meta>, <title>, <style> или <link>
  </head>
  <body>                 ← всё, что видит человек
    <header>, <nav>, <main>, <footer> …
  </body>
</html>
Часть Видно на экране? Типичная ошибка новичка
<head> Нет (кроме <title> на вкладке) Пишут заголовок h1 в head — на странице пусто
<body> Да Забывают закрыть </body> — браузер «догадывается», но в отчёте снимут баллы
<style> Нет (только эффект) Путают с тегами: стили не внутри <p>

Обязательный каркас каждой страницы

Любой пример ниже можно вставить внутрь этого фундамента. Стили здесь минимальные — только чтобы текст читался; оформление добавите из галереи макетов.

Что увидите в браузере: белая страница с комментарием не видна — тело пустое, пока не вставите разметку вместо <!-- header, main, footer … -->. Вкладка покажет текст из <title>.

Разбор по строкам (HTML).

Строка Что делает Зачем
<!DOCTYPE html> Включает стандартный режим HTML5 Без этой строки старые браузеры рисуют страницу «наугад»
<html lang="ru"> Корень документа + язык Скринридер выберет русское произношение; поиск понимает локаль
<head>…</head> Служебный блок Сюда не кладут видимый текст абзацев
<meta charset="UTF-8"> Кодировка файла Иначе «Привет» превратится в Привет
viewport + width=device-width Масштаб на телефоне Без meta страница на iPhone — мелкая «уменьшенная копия ПК»
meta name="description" Краткое описание сайта Часто попадает в сниппет Google — пишите по сути, 1–2 предложения
<title>…</title> Заголовок вкладки То, что видно в закладках и истории
<!-- … --> Комментарий для себя В отчёте можно оставить подсказку «сюда вставить меню»

Разбор CSS внутри <style> (минимум для учёбы).

Правило Что делает Зачем на практике
box-sizing: border-box Padding входит в ширину блока Два блока по 50% реально встают в ряд
body &#123; margin: 0 &#125; Убирает белую полоску браузера По умолчанию у body есть отступ
main &#123; max-width: 42rem; margin: 0 auto &#125; Колонка по центру, не на весь 4K Текст удобно читать
img &#123; max-width: 100% &#125; Картинка не вылезает за экран Важно для мобильного отчёта

Что поменять под своё задание: замените description и title на тему работы; в <body> вставьте любой пример ниже целиком (можно без повторного DOCTYPE — только содержимое body).

Типичные ошибки (и что видите)
  • Файл index.html.txt — в браузере откроется код текстом, не сайт. Включите отображение расширений в Windows.
  • Заголовок h1 внутри head — на странице пусто, в инспекторе (F12) заголовок «потерян».
  • Незакрытый <div> — блоки наезжают друг на друга, таблица «ломается».
  • Два h1 на странице — для школьного отчёта лучше один h1 и подразделы h2.
  • Кириллица в имени файла на старых хостингах — сохраняйте index.html латиницей.

Стартовые страницы

Простые целые файлы — то, что чаще всего требуют на первом уроке HTML.

Привет, мир

«html hello world», «первая html страница», «как создать index.html» — самый короткий рабочий файл, чтобы убедиться, что всё сохранено правильно.

Задача. Минимальная страница: один заголовок, два абзаца, одна внешняя ссылка.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это моя первая HTML-страница. Я сохранил файл как <strong>index.html</strong>.</p>
  <p><a href="https://developer.mozilla.org/ru/docs/Web/HTML">Учебник HTML на MDN</a></p>
</body>
</html>

Что увидите в браузере: крупный заголовок «Привет, мир!», обычный текст, слово index.html жирным, синяя подчёркнутая ссылка на MDN. На вкладке — «Моя первая страница».

Разбор по строкам.

Строка Что делает Зачем
<!DOCTYPE html> Старт HTML5 Та же строка, что в каркасе
<head>…</head> Служебная часть Здесь только кодировка, viewport и title — без CSS
<body>…</body> Видимая страница Всё, что нужно для зачёта «страница создана»
<h1>Привет, мир!</h1> Главный заголовок Самый крупный текст на странице
<p>…</p> Абзац Каждый новый абзац — новый тег <p>
<strong>index.html</strong> Логически важное слово Жирный без «кричащего» визуала, в отличие от устаревшего <b>
<a href="https://…"> Гиперссылка href — куда перейдёт браузер по клику

Что поменять под своё задание: в <title> — тема урока; в <h1> — ваше имя; в href — ссылка на школьный сайт или GitVerse с отчётом.

Попробуйте сами.

  1. Поменяйте <title> — обновите вкладку (F5).
  2. Добавьте <p>Автор: Ваше Имя</p> под первым абзацем.
  3. Удалите <meta viewport> — откройте файл на телефоне и сравните масштаб (потом верните meta).
Для отчёта

Сделайте скриншот: окно браузера + вкладка с title + исходник в VS Code рядом. Учителю видно, что вы понимаете связь файла и экрана.

Статья с заголовками и оглавлением

Зачем: реферат, конспект, «html страница с разделами», «оглавление по якорям», «header main footer пример».

Задача. Текст с разделами; клик по «Введение» в меню прокручивает к нужному заголовку на этой же странице.

Что увидите в браузере: шапка с датой и h1, серый блок «Содержание» с тремя ссылками, три раздела с подзаголовками, внизу подвал с почтой. Клик по «Теги» — страница прокрутится к середине.

Разбор по строкам (главное).

Строка / блок Что делает Зачем
<header> в начале Шапка всей страницы Не путать с <header> внутри статьи (там тоже бывает — для даты поста)
<nav aria-label="Содержание"> Блок меню aria-label озвучивается скринридером: «навигация, Содержание»
<a href="#vvedenie"> Якорная ссылка # + id на той же странице — без перезагрузки
<h2 id="vvedenie"> Заголовок + метка id должен точно совпадать с частью после # в ссылке
<main> Основной контент Один на страницу — главная часть для поисковиков и доступности
<article> Текст статьи Можно вынести на отдельную страницу в большом сайте
<code>&lt;p&gt;</code> Показать тег как текст &lt; — это символ <, иначе браузер подумает, что вы открыли тег
<footer> Подвал Контакты, копирайт
mailto:ivan@… Открыть почтовый клиент Схема ссылки, не обычный https

Разбор CSS (коротко).

Правило Эффект
max-width: 40rem; margin: 0 auto Текст по центру, узкая колонка
nav &#123; background: #f4f4f9 &#125; Подсветка блока оглавления

Что поменять: замените три h2 на разделы вашего реферата; в nav добавьте четвёртую ссылку и id на новый h2.

Попробуйте сами. Опечатайте href="#vvedenye" вместо #vvedenie — клик никуда не ведёт; исправьте и запомните: якорь = точное имя id.

Типичные ошибки
  • href="#Введение" и id="vvedenie" — якорь не сработает (разный регистр и язык).
  • Два одинаковых id на странице — нарушение стандарта, скролл ведёт к первому.
  • Всё в div без main — страница работает, но в отчёте по семантике снимут баллы.

Списки — маркированный и нумерованный

Зачем: «html маркированный список», «нумерованный список ul ol», «список определений dl».

Задача. На одной странице — три типа списков: пункты без порядка, шаги по порядку, термин + определение.

Что увидите: три блока подряд — точки у «Что взять», цифры 1–4 у «Порядок действий», пары «HTML — язык…» в глоссарии.

Разбор по строкам.

Строка Что делает Зачем
<ul>…</ul> Маркированный список Порядок не важен
<ol>…</ol> Нумерованный Лабораторная, рецепт, инструкция
<li> Один пункт Внутри ul или ol, не напрямую в body
<dl> Список определений Словарь, глоссарий
<dt> Термин Жирный по умолчанию в браузере
<dd> Определение Отступ слева под термином
<code>index.html</code> Моноширинный фрагмент Имя файла в тексте

Что поменять: замените пункты на свой список покупок или план домашки.

Попробуйте сами. Вложите <ul> внутрь <li> — получите подсписок (многоуровневый список для содержания реферата).

Таблица — расписание

Зачем: «html table пример», «таблица расписание html», «thead tbody».

Задача. Таблица с подписью, шапкой столбцов и двумя уроками — как в дневнике или журнале.

Что увидите: заголовок «Расписание…», подпись «8 «А» класс», таблица с синей шапкой и рамками.

Разбор по строкам.

Строка Что делает Зачем
<table> Начало таблицы Только для данных, не для всей вёрстки сайта
<caption> Название таблицы Озвучивается до ячеек — «таблица: 8 А»
<thead> Блок заголовков «Урок
<tbody> Данные Уроки 1, 2, …
<tr> Строка Table row
<th scope="col"> Заголовок столбца Связь «эта ячейка — заголовок колонки»
<th scope="row">1</th> Заголовок строки Номер урока — логическая подпись строки
<td>…</td> Обычная ячейка Данные

Что поменять: добавьте <tr> с третьим уроком — скопируйте блок <tr>…</tr> и поменяйте ячейки.

Попробуйте сами. Уберите <thead> — таблица останется, но для слабовидящих станет непонятнее, что заголовок.

Важно

Таблицу не используют, чтобы «разложить весь сайт в клетки» — для макета есть Flexbox и Grid и готовые макеты.

Форма обратной связи

Зачем: «html форма пример», «input label for», «форма обратной связи html код», «required html».

Задача. Страница с полями, выпадающим списком, галочкой согласия и кнопкой «Отправить».

Что увидите: поля с подписями, при пустом email браузер подсветит ошибку, при коротком сообщении (< 10 символов) — предупреждение. Кнопка «Отправить» с action="#" перезагрузит страницу наверх — данные никуда не уйдут (учебная заглушка).

Разбор по строкам.

Строка Что делает Зачем
<form action="#" method="post"> Контейнер полей action — URL сервера; # = «та же страница»
<label for="name"> + <input id="name"> Связка подписи и поля Клик по «Имя» ставит курсор в input
name="name" Имя поля при отправке На сервере придёт name=Иван
type="email" Поле почты Без @ браузер не даст отправить
placeholder="you@mail.ru" Подсказка в пустом поле Не заменяет <label>
<select> + <option value="…"> Выпадающий список value уходит на сервер, текст — для человека
<textarea rows="5"> Многострочный текст Отзыв, сообщение
minlength="10" Минимум символов Встроенная проверка HTML5
type="checkbox" required Галочка обязательна Без неё submit заблокирован
<button type="submit"> Отправка формы Не путать с <button> без type — поведение другое

Что поменять: добавьте <option> «Другое»; поле name должно совпадать с тем, что ждёт ваш PHP/Node на сервере.

Попробуйте сами. Нажмите Submit с пустым email — увидите всплывающую подсказку браузера (без JavaScript).

Отправку на сервер и FormData в JS — DOM — формы.

Изображение, подпись и ссылки

Зачем: «html вставить картинку», «img src alt», «как сделать ссылку html», «figure figcaption».

Задача. Иллюстрация с подписью «Рис. 1» и список ссылок (внешняя, относительная, почта).

Что увидите: заголовок проект, фото с picsum (нужен интернет), подпись под фото, три ссылки разного цвета/поведения.

Разбор по строкам.

Строка Что делает Зачем
<figure> Блок «иллюстрация + подпись» В отчёте: «рисунок 1»
<img src="https://…"> Адрес картинки Локально: src="img/foto.jpg"
alt="Панорама…" Текстовое описание Обязателен: иначе пустой прямоугольник при ошибке сети
width и height Размер в разметке Браузер резервирует место до загрузки
loading="lazy" Ленивая загрузка Картинка внизу длинной страницы не тормозит старт
<figcaption> Подпись к рисунку «Рис. 1 — …» для тетради
target="_blank" Новая вкладка Для внешних сайтов
rel="noopener noreferrer" Безопасность Вместе с target="_blank" — стандарт 2020-х
href="./index.html" Относительный путь На уровень выше по папкам
mailto:teacher@… Почтовый клиент Открывает «написать письмо»

Что поменять: положите foto.jpg в папку img/ и замените src на img/foto.jpg — работает офлайн для отчёта.

Типичные ошибки
  • src="C:\Users\…\foto.jpg" — на другом ПК путь не сработает; только относительный путь от HTML-файла.
  • Нет alt — в отчёте по доступности и на ЕГЭ/олимпиадках по вебу снимают баллы.
  • alt="" у смыслового фото — скринридер «молчит»; пустой alt только у декора.

FAQ на <details> и <summary>

Зачем: «html раскрывающийся список без javascript», «details summary пример», «аккордеон html».

Задача. Три вопроса; второй открыт сразу (open), остальные — по клику на заголовок.

Что увидите: три «плашки»; у средней ответ виден сразу; у остальных — только вопрос, по клику раскрывается абзац.

Разбор по строкам.

Строка Что делает Зачем
<details> Блок вопрос-ответ Встроено в HTML5, JS не нужен
<summary> Заголовок, по нему кликают Единственный обязательный ребёнок по смыслу
<details open> Раскрыт при загрузке Удобно для «самого важного» FAQ
<p> внутри Текст ответа Можно вставить ссылки и списки

Попробуйте сами. Добавьте четвёртый <details> с вопросом из вашей темы урока.

Готовые страницы целиком

Типовые «целые сайты» из одного файла — для портфолио, кружка и отчёта.

Портфолио школьника или студента

Зачем: «html портфолио сайт», «личный сайт html пример», «сайт визитка html», проект 11 класс информатика.

Задача. Одна страница: меню в шапке, три секции по якорям, карточки проектов, контакты в <address>.

Что увидите: тёмная шапка с именем и тремя ссылками; при клике «Проекты» — прокрутка; две карточки в сетке; подвал с копирайтом.

Разбор по блокам (что написать в отчёте).

Блок кода Что делает Зачем учителю
<header> + <nav> Шапка и меню Семантика: не div class="menu"
href="#about" Якорь к секции Одностраничный сайт без JS
<section id="about"> Раздел «Обо мне» id совпадает с якорем
<h1> внутри about Главный заголовок страницы Один h1 на документ
<ul> навыков Список технологий HTML, CSS, Python — видно содержание
.projects + display: grid Сетка карточек Минимальный CSS; подробнее — макеты 110
<article class="project"> Один проект Отдельная сущность в списке
<address> Контакты Тег для email, не «просто div»
<footer> Подвал Копирайт, год

Что поменять: ФИО, класс, проекты, mailto: на свою почту; ссылку на Turtle замените на свой GitHub.

Попробуйте сами. Удалите display: grid — карточки встанут столбиком; верните — снова в ряд (на широком экране).

Резюме одной страницей

Зачем: «html resume template», «резюме html страница», «cv html пример».

Задача. CV с контактами, навыками, опытом и датами — печать через Ctrl+P → «Сохранить как PDF».

Что увидите: имя крупно, серая строка с должностью и телефоном (tel: откроет набор на телефоне), блоки «О себе», «Навыки», «Опыт» с датами.

Разбор по строкам.

Строка Что делает Зачем
<a href="tel:+7900…"> Ссылка на звонок На мобильном — сразу набор номера
<section> без id Логический блок Разделы резюме
<article> в «Опыт» Одна позиция Можно добавить второй <article>
<time datetime="2025-09"> Машинная дата datetime — для парсеров; текст — «Сентябрь 2025» для человека

Что поменять: подставьте свои навыки и даты стажировки.

Попробуйте сами. Ctrl+P → PDF — приложите к заявке на стажировку вместе с ссылкой на портфолио.

Лендинг кружка или проекта

Зачем: «html landing page», «одностраничный сайт html», «сайт кружка html», hero section html.

Задача. Яркая шапка-hero, три карточки преимуществ, форма записи внизу, кнопка «Записаться» ведёт к форме.

Что увидите: синий градиент вверху, белая кнопка «Записаться» (скролл к форме), три карточки в ряд на широком экране, форма с двумя полями.

Разбор по строкам (ключевое).

Строка Что делает Зачем
<header class="hero"> Шапка-баннер Можно header + класс для стиля
linear-gradient(…) Фон градиент Чистый CSS, без картинки
font-size: clamp(1.5rem, 4vw, 2.25rem) Адаптивный заголовок На телефоне мельче, на мониторе крупнее
<a class="btn" href="#signup"> Кнопка-ссылка Не <button> — переход к якорю формы
grid-template-columns: repeat(auto-fit, …) Адаптивные карточки Сами перестраиваются в столбик на узком экране
<section id="signup"> Блок записи Цель якоря #signup
<input type="tel"> Поле телефона На мобильном — цифровая клавиатура

Что поменять: название кружка, тексты карточек, поля формы под вашу школу.

Utility-версия тех же блоков — Tailwind 1117. Сетка и hero подробнее — макеты 110.

Семантика — что выбрать вместо «голого div»

Задача Лучше тег Не лучше
Шапка сайта <header> <div class="header">
Меню ссылок <nav> <div class="menu">
Основной текст <main> <div id="content">
Отдельная статья <article> <div class="post">
Боковая колонка <aside> <div class="sidebar">
Подвал <footer> <div class="footer">
Дата публикации <time datetime="…"> <span>2026</span>
Цитата <blockquote> + <cite> <p>«…»</p>

Скринридеры и поисковые системы опираются на такую структуру. Внешний вид по-прежнему задаёт CSS.

Страница блога — один пост

Зачем: «html blog post», «страница статьи html», «blockquote html».

Задача. Пост с датой, автором, цитатой учителя и нумерованным списком шагов.

Разбор.

Элемент Зачем в отчёте
Вложенный <header> в <article> Шапка статьи (дата), не всей сайта
<cite> Имя автора как цитата/ссылка на персону
<blockquote> + <footer> Цитата с подписью «— отзыв учителя»
<footer> внутри blockquote Подпись источника цитаты (допустимо в HTML5)

Подключить отдельный файл стилей

Зачем: «как подключить css к html», «link rel stylesheet», структура папок проекта.

Когда CSS выносится из HTML (привычка для «взрослых» проектов и курсовых):

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Мой сайт</title>
  <link rel="stylesheet" href="css/style.css">
</head>

Файлы на диске:

my-site/
  index.html
  css/
    style.css
  img/
    logo.png
Строка Что делает Зачем
<link rel="stylesheet" href="css/style.css"> Подключает внешний CSS Один раз стили — на всех страницах сайта
href="css/style.css" Путь от HTML-файла Файлы в одной папке my-site/

src у картинки: img/logo.png. Путь относительный — переносите папку целиком на флешку или хостинг.

Чистая база для своего проекта

Зачем: «html шаблон сайта», «скелет html страницы», старт курсовой или хакатона.

Скопируйте и наращивайте секции внутри <main>.

Разбор по строкам.

Строка Что делает Зачем
<link rel="icon" href="favicon.ico"> Иконка вкладки Мелочь, но портфолио выглядит «как сайт»
<a class="skip" href="#main"> Skip link Tab с клавиатуры — сразу в контент
.skip &#123; left: -9999px &#125; Ссылка скрыта Видна только при фокусе — стандарт a11y
<main id="main"> Цель skip-link id совпадает с href="#main"

Что поменять: пункты в <nav>, секции #about как в портфолио.

Типовые задания из школы и вуза — что копировать

Формулировка в задании Возьмите из главы
«Создайте HTML-страницу с заголовком и абзацем» Привет, мир
«Страница с гиперссылкой на источник» Привет или Медиа
«Таблица расписания / оценок» Таблица
«Форма регистрации / обратной связи» Форма
«Сайт-портфолио / визитка» Портфолио
«Одностраничный сайт организации» Лендинг
«Использовать семантические теги» Семантика + любой полный пример

Частые вопросы

Чем эта глава отличается от HTML + CSS — макеты?
Здесь — целые страницы с разбором тегов (формы, таблицы, семантика, портфолио). В 110 — упор на вёрстку и CSS (центрирование, Grid, адаптив).

Нужен ли интернет?
Для локальных примеров — нет. Картинки с https://… (picsum) требуют сеть при открытии файла.

Почему форма не отправляет письмо?
В учебных файлах action="#" — заглушка. Нужен backend (PHP, Node, форма на хостинге) или сервис форм.

Как сдать работу учителю?
Папка с index.html, картинками и css/; архив ZIP или ссылка на GitHub / GitVerse.

Когда подключать JavaScript?
Когда нужны вкладки без перезагрузки, проверка формы, галерея — см. DOM — 30 приёмов.

Что изучить дальше

Тема Куда перейти
Все теги и гипертекст HTML
Сетки, центрирование, адаптив HTML + CSS — макеты
Utility-классы Tailwind — блоки
Скрипты в странице JavaScript DOM
Запросы к API Fetch / axios
Компоненты React React — рецепты
Статика в Docker Dockerfile — образы
Для отчёта и портфолио

В описании работы укажите, какие семантические теги использовали: «шапка на header, навигация в nav, проекты в article». Одно точное название тега показывает, что вы понимаете разметку, а не только скопировали шаблон.