Практическая работа №1. Создание семантического многостраничного сайта на HTML

• Номер работы: 1
• Длительность: 2 пары / 4 академических часа
• Формат: индивидуальная работа за компьютером
• Технологии: только HTML5. Без CSS, JavaScript, конструкторов сайтов и фреймворков.

Эта работа — начало одного учебного проекта, а не одноразовая страница. Сейчас вы создадите его содержательную и техническую основу: страницы, связи между ними, семантическую структуру и данные. В следующих практических работах этот же проект будет развиваться, поэтому не удаляйте его после сдачи и храните файлы в понятной структуре.

Цель работы

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

Важен не «красивый сайт» и не количество тегов. Важнее, чтобы по вашему HTML было понятно, где навигация, где основное содержание, какие блоки самостоятельны, какие данные действительно табличные и как пользователь должен заполнить форму.

Что вы уже должны знать

Перед началом повторите первые две лекции. Вы должны уметь:

• объяснить разницу между сайтом, страницей, браузером и сервером;
• создать базовый HTML-документ;
• работать с элементами, атрибутами и вложенностью;
• использовать заголовки, абзацы, ссылки, списки, изображения, таблицы и форму;
• понимать назначение header, nav, main, footer, section, article и div;
• отличать относительный путь от локального пути на своём компьютере;
• открыть DevTools и панель Elements;
• запустить проверку в HTML-валидаторе.

Важно: если какой-то элемент из лекции забыт, разрешается открыть конспект или MDN. Справочник — обычная часть работы разработчика. Не копируйте найденный пример целиком, не разобравшись, зачем в нём каждый элемент.

Что будет создано

Вы сделаете информационный сайт выбранной предметной области из трёх страниц:

Названия файлов можно адаптировать к своей теме, если смысл остаётся понятным. Например, для кинотеатра catalog.html может называться films.html. Во всех остальных требованиях это будет «вторая страница». Ссылка в навигации должна вести на реальное имя вашего файла.

К концу работы сайт должен быть готов к дальнейшему развитию: в нём есть единая основа страниц, навигация, место для новых разделов и аккуратно разложенные ресурсы.

Общие требования к проекту

1. Работайте в отдельной папке проекта. Назовите её латиницей и без пробелов, например practice-01-book-club.
2. Используйте только HTML. Не подключайте CSS-файлы, не вставляйте атрибут style, не добавляйте JavaScript и не используйте готовые шаблоны сайтов.
3. Содержание выбирается по вашему варианту в конце документа. Технические требования одинаковы для всех.
4. Текст, названия и данные должны относиться к выбранной теме. Не оставляйте в готовой работе Lorem ipsum, «Название сайта», «Товар 1» или случайные данные из чужого примера.
5. На каждой странице должен быть один понятный h1. Подзаголовки должны отражать структуру, а не размер текста.
6. Все внутренние переходы должны работать после переноса папки проекта на другой компьютер.
7. Сохраняйте проект целиком: HTML-файлы и изображения. На сдачу передаётся папка проекта, а не один скопированный HTML-файл.

Важно: браузер может открыть файл по адресу вида file:///..., но путь к картинке нельзя писать как C:\\Users\\Имя\\Desktop\\.... Это путь только на вашем компьютере. Файл изображения должен лежать в папке проекта, а src должен быть относительным.

Файловая структура

Начните с такой структуры. При необходимости добавляйте папки, но не меняйте смысл основных файлов.

practice-01-your-topic/
├── index.html
├── catalog.html
├── contact.html
└── images/
    ├── hero.jpg
    ├── item-01.jpg
    └── item-02.jpg

Изображения могут быть в форматах .jpg, .png, .webp или .svg. Используйте только те файлы, которые вы действительно положили в images/.

Если позже вы создадите вложенную страницу, путь из неё к изображению может выглядеть иначе:

<img src="../images/hero.jpg" alt="Описание изображения">

../ означает «подняться на один уровень выше». В текущей работе все три HTML-файла лежат рядом с папкой images, поэтому для них обычно достаточно images/имя-файла.

Пара 1. Каркас и структура сайта

Цель первой пары — не заполнить каждую мелочь, а создать рабочий скелет сайта. К концу занятия по всем трём страницам уже можно перейти, а главная страница содержит полноценное содержание.

Этап 1. Создайте проект и документы

1. Создайте папку проекта и папку images.
2. Создайте index.html, catalog.html и contact.html.
3. На каждой странице самостоятельно соберите современный базовый HTML-документ.
4. Укажите русский язык документа, кодировку UTF-8, viewport и осмысленный title.

Ориентир для начала файла — не готовая страница, а минимальный документ:

<!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>

Названия вкладок не должны совпадать механически. Например: «Главная — Книжный клуб», «Подборки книг — Книжный клуб», «Контакты — Книжный клуб».

Этап 2. Создайте общую структуру и навигацию

На каждой странице выделите:

• верхнюю часть сайта (header);
• навигацию между тремя страницами (nav);
• основное уникальное содержание страницы (main);
• нижнюю часть с краткой служебной информацией (footer).

Навигация должна быть одинаковой по смыслу на всех страницах. Это не означает, что нужно бездумно копировать файл: после копирования проверьте title, h1 и содержание конкретной страницы.

Фрагмент одной ссылки в навигации может выглядеть так:

<a href="catalog.html">Каталог</a>

Ссылка — элемент a. Не заменяйте её div, span или текстом с атрибутом onclick.

Проверьте переходы, открыв index.html в браузере. Перейдите на вторую страницу, затем на контакты и вернитесь на главную. Если браузер показывает содержимое HTML как текст или сообщает, что файл не найден, сначала проверьте расширение файла и href.

Этап 3. Наполните главную страницу

Главная страница должна отвечать посетителю на вопросы: что это за сайт, кому он полезен, что в нём можно найти и куда перейти дальше.

Разместите на ней:

• один h1 с названием сайта;
• вводный абзац или несколько связанных абзацев;
• не менее двух смысловых блоков с заголовками второго уровня;
• один список: маркированный или нумерованный — выбирайте по смыслу;
• минимум две ссылки: одна ведёт на вторую страницу, другая — на страницу контактов; дополнительные ссылки допускаются;
• одно тематическое изображение из папки images с осмысленным alt;
• краткую информацию в footer, например название проекта, учебный год или ссылку на контакты.

Не нужно пытаться «нарисовать дизайн» с помощью десятков br, таблицы или заголовков неподходящего уровня. Без CSS страница будет выглядеть просто — это нормально. Сейчас мы проверяем структуру документа.

Как выбирать section, article и div

• Используйте section, когда внутри есть отдельный смысловой раздел страницы с собственным заголовком: например, «О проекте», «Что мы предлагаем», «Ближайшие события».
• Используйте article, если блок мог бы существовать самостоятельно: отдельная новость, карточка одного фильма, описание одной услуги, публикация.
• Используйте div, если нужно только объединить элементы, но у группы нет самостоятельного значения.

Один небольшой фрагмент может быть таким:

<section>
  <h2>Почему стоит прийти</h2>
  <ul>
    <li>Новые тематические подборки каждую неделю</li>
    <li>Возможность оставить заявку через форму</li>
  </ul>
</section>

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

Checkpoint после первой пары

До конца первой пары покажите преподавателю или проверьте самостоятельно:

• Есть папка проекта, три HTML-файла и папка images.
• Все три страницы открываются в браузере.
• Навигация ведёт на существующие страницы и позволяет вернуться на главную.
• На каждой странице есть корректный базовый HTML-документ и осмысленный title.
• На главной есть header, nav, main, footer, h1, текст, разделы, список, ссылки и изображение.
• Заголовки не пропускают уровни без причины.
• В путях нет C:\\Users, рабочего стола или другого адреса вашего компьютера.

Если не успели: не начинайте форму и таблицу, пока не работают файлы, базовый каркас и навигация. Это фундамент второй пары.

Пара 2. Наполнение и завершение

Во второй паре вы превращаете каркас в законченную первую версию сайта. Добавьте каталог, настоящую таблицу, форму контактов, затем проверьте разметку.

Этап 4. Наполните вторую страницу

На второй странице покажите набор однотипных сущностей из вашего варианта: не менее четырёх книг, фильмов, услуг, курсов, маршрутов, животных или других подходящих объектов.

Для каждой сущности подготовьте содержательные данные: название, краткое описание и хотя бы одну полезную характеристику. Не ограничивайтесь строками «Объект 1», «Описание объекта».

Выберите разметку по смыслу. Например, самостоятельные карточки фильмов или услуг обычно оправданно оформить как article, а общий раздел — как section. Если вы используете изображения сущностей:

• у каждого img должен быть рабочий src;
• alt должен передавать содержательный смысл изображения, а не просто повторять имя файла;
• добавьте атрибуты width и height с разумными значениями;
• используйте figure и figcaption, когда подпись действительно нужна читателю: например, у афиши события или фотографии маршрута.

Пример изображения с подписью:

<figure>
  <img src="images/item-01.jpg" alt="Обложка книги «Маяк на севере»" width="360" height="540">
  <figcaption>Книга месяца: приключенческий роман для обсуждения в клубе.</figcaption>
</figure>

Если картинка исключительно декоративная и не добавляет информации, допустим пустой alt="". В этой практической большинство картинок тематические, поэтому обычно нужен содержательный alt.

На второй странице также должен быть хотя бы один список, если его нет в содержании сущностей. Выбирайте тип списка по смыслу: последовательность шагов — ol, набор равноправных пунктов — ul.

Этап 5. Добавьте таблицу данных

Создайте одну таблицу с данными, которые действительно удобно сравнивать по строкам и столбцам. Её тема определяется вашим вариантом: расписание, цены и длительность услуг, сеансы, уровни сложности маршрутов, время работы и так далее.

Таблица должна содержать:

• caption, объясняющий, что показывают данные;
• thead для заголовков;
• tbody для данных;
• tr, th, td;
• scope у заголовков столбцов или строк;
• не менее трёх строк данных и не менее трёх смысловых столбцов.

Фрагмент структуры таблицы:

<table>
  <caption>Расписание встреч клуба на октябрь</caption>
  <thead>
    <tr>
      <th scope="col">Дата</th>
      <th scope="col">Тема</th>
      <th scope="col">Время</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>05.10</td>
      <td>Обсуждение книги месяца</td>
      <td>17:00</td>
    </tr>
  </tbody>
</table>

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

Этап 6. Создайте страницу контактов и форму

На странице контактов разместите обычную контактную информацию и форму обращения по теме сайта. Форма в этой работе не отправляет данные на сервер: мы отрабатываем HTML-разметку и встроенную проверку браузера.

Форма должна содержать:

• form;
• несколько связанных с подписями полей: label + input;
• поле e-mail с type="email";
• минимум один select с несколькими option;
• textarea для сообщения;
• кнопку отправки button;
• атрибуты name у полей;
• required у обязательных данных;
• уместные ограничения, например minlength, maxlength, min или max;
• тематические поля, обязательные для вашего варианта.

Связь подписи и поля строится через for и уникальный id:

<label for="visitor-email">Электронная почта</label>
<input id="visitor-email" name="email" type="email" required>

Кнопка отправки — это кнопка:

<button type="submit">Отправить обращение</button>

Не используйте кликабельный div и не делайте ссылку в роли кнопки. Если поле обязательно, не пишите только звёздочку рядом с ним: добавьте required, чтобы правило знал и браузер.

Выберите осмысленные type. Например, type="tel" для телефона, type="number" для количества, type="date" для даты. Не применяйте type="text" ко всему автоматически.

Подсказка: отправьте незаполненную форму кнопкой submit. Браузер должен показать встроенную проверку обязательных полей. Затем введите заведомо неверный e-mail и убедитесь, что правило type="email" тоже работает.

Этап 7. Проверьте HTML

Перед сдачей выполните три разные проверки.

1. Переходы и ресурсы в браузере. Откройте каждую страницу. Перейдите по всем внутренним ссылкам. Убедитесь, что изображения загружаются.
2. DOM в DevTools. Откройте инструменты разработчика → Elements (в Firefox — «Инспектор»). Найдите один смысловой раздел, одно изображение, таблицу и поле формы. Сопоставьте DOM с исходным файлом. Проверьте, что браузер не перестроил вашу вложенность неожиданным образом.
3. HTML-валидатор. Проверьте все три HTML-файла через W3C Nu Html Checker : загрузите файл или вставьте код. Исправьте ошибки. Предупреждения тоже прочитайте: не каждое предупреждение критично, но каждое требует понимания.

Комментарии в HTML допустимы, если поясняют неочевидный участок, например начало крупного раздела. Не комментируйте каждую строку и не оставляйте служебные фразы вроде TODO или «здесь будет что-то» в работе на сдачу.

Спецсимволы и entities используйте только по необходимости. Например, & нужен, когда амперсанд должен стать частью текста или URL в HTML, а не «на всякий случай». Обычный русский текст писать entities не требует.

Checkpoint после второй пары

К окончанию второй пары проект должен быть полностью готов к сдаче:

• Вторая страница содержит минимум четыре содержательных однотипных сущности.
• Изображения лежат в проекте, открываются, имеют корректные src, alt, width и height.
• Есть хотя бы один содержательный список.
• Есть одна настоящая таблица с caption, thead, tbody, заголовками th и scope.
• На странице контактов есть тематическая форма с label, name, правильными type, обязательными полями, select, textarea и button.
• Проверена встроенная в браузер валидация формы.
• HTML проверен валидатором, исправлены найденные ошибки.
• В DevTools проверена структура DOM.

Подсказки по работе

Сначала содержание, затем элементы

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

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

Относительные пути

В этой структуре путь к файлу рядом с текущим документом:

<a href="contact.html">Контакты</a>

Путь к картинке внутри папки images:

<img src="images/hero.jpg" alt="...">

Не ставьте в начало пути /, пока не работаете на настроенном сервере. Для локального набора файлов /images/hero.jpg означает путь от корня сайта, которого при открытии файлов на компьютере может не быть.

Проверяйте небольшими шагами

После каждого нового раздела сохраните файл и обновите страницу. Так проще понять, после какого изменения появилась ошибка. Не ждите момента, когда весь файл будет написан.

Типичные ошибки

Допустимое использование AI

AI разрешено использовать как помощника: чтобы объяснить назначение элемента, предложить вариант структуры, разобрать сообщение валидатора или проверить, не забыли ли вы обязательное требование.

Но AI не заменяет вашу работу. Вы отвечаете за весь переданный код и должны:

• понимать, что означает каждый использованный элемент и важный атрибут;
• проверить предложенный код в браузере и валидаторе;
• заменить случайные тексты и данные на содержание своего варианта;
• уметь найти в файле и исправить небольшой фрагмент без повторного запроса к AI;
• объяснить на защите, почему выбраны section, article, таблица и конкретные типы полей формы.

Работа может быть оценена ниже, даже если визуально она открывается, если студент не может объяснить её структуру или выполнить контрольное изменение. Преподаватель оценивает не происхождение кода, а ваше владение результатом.

Сдача и защита

Сдайте папку проекта целиком. В ней должны быть HTML-файлы и папка images с используемыми файлами. Способ передачи указывает преподаватель: архив, репозиторий или учебная платформа.

На защите откройте сайт в браузере и будьте готовы за 2–4 минуты:

1. показать переходы между страницами;
2. показать свою таблицу и объяснить, почему данные табличные;
3. показать форму и назвать назначение label, name, required и одного выбранного type;
4. объяснить один выбор семантического элемента;
5. показать результат проверки валидатором или повторно проверить один файл;
6. выполнить небольшое индивидуальное контрольное изменение в существующем проекте.

Индивидуальное контрольное изменение

Преподаватель выбирает одно небольшое изменение, которое не требует CSS или JavaScript. Например:

• добавить новую сущность на вторую страницу по тем же правилам;
• добавить строку в таблицу;
• изменить тип одного поля формы и объяснить выбор;
• добавить обязательное ограничение minlength или maxlength;
• добавить ссылку на созданную страницу в навигацию;
• заменить неподходящий div на семантический элемент;
• исправить намеренно оставленную небольшую ошибку во вложенности или alt.

Изменение выполняется в вашем проекте и проверяется обновлением страницы. Оно не является «ловушкой»: его цель — подтвердить, что вы понимаете собственный HTML.

Проверка перед сдачей

Перед передачей проекта пройдите по списку ещё раз.

• Я выполняю свой вариант и не оставил чужие названия, Lorem ipsum или заполнители.
• В папке есть index.html, вторая тематическая страница, contact.html и images/.
• На всех страницах есть <!doctype html>, html lang="ru", meta charset, viewport, title и body.
• На всех страницах одинаковая по смыслу работающая навигация.
• На главной есть полноценная структура и содержательный текст.
• На второй странице есть минимум четыре однотипных объекта, список и таблица данных.
• У каждого смыслового изображения есть корректный путь, alt, width и height.
• Таблица не используется для раскладки страницы и имеет все требуемые части.
• В форме у всех полей есть label, name и подходящий тип; обязательные поля имеют required.
• Кнопка отправки — button, а не кликабельный контейнер.
• Я проверил переходы, изображения, DOM в DevTools и HTML-валидатор.
• Я могу объяснить свой код и внести маленькое изменение без полной переделки проекта.

Варианты задания

Как определить свой вариант

Вариант определяется по последней цифре номера в журнале:

Иначе говоря: возьмите последнюю цифру номера. Если она 0, это вариант 10. Например, студент под номером 28 выполняет вариант 8, а под номером 30 — вариант 10.

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

Вариант 1. Книжный клуб

• Тема сайта: клуб чтения «Открытая глава».
• Главная: кратко расскажите о клубе, его встречах и направлениях чтения; добавьте список причин вступить или правил встречи.
• Сущности второй страницы: минимум четыре книги для ближайших обсуждений. Для каждой укажите автора, жанр и короткую аннотацию.
• Таблица: расписание встреч: дата, обсуждаемая книга, ведущий/место или время.
• Форма: имя, e-mail, выбранная встреча, любимый жанр (select), комментарий.
• Специфические требования: добавьте ссылку на фрагмент главной страницы «Правила клуба»; у одной книги используйте figure с содержательной подписью.

Вариант 2. Кинотеатр

• Тема сайта: небольшой кинотеатр «Кадр».
• Главная: представьте кинотеатр, текущую программу и правила посещения; добавьте список доступных форматов показа или правил зала.
• Сущности второй страницы: минимум четыре фильма. Для каждого укажите жанр, возрастное ограничение и краткое описание.
• Таблица: расписание сеансов: фильм, дата, время, зал.
• Форма: имя, e-mail, фильм (select), количество билетов (number), сообщение.
• Специфические требования: укажите хотя бы один возрастной рейтинг в тексте; добавьте осмысленную ссылку со страницы фильма на страницу контактов для бронирования.

Вариант 3. Автосервис

• Тема сайта: автосервис «Точка хода».
• Главная: расскажите о специализации сервиса, преимуществах и подготовке автомобиля к визиту; добавьте список основных работ.
• Сущности второй страницы: минимум четыре услуги: диагностика, замена масла, шиномонтаж, проверка тормозов или другие подходящие услуги. Для каждой укажите краткое описание и ориентировочную длительность.
• Таблица: услуги, длительность, ориентировочная цена, необходимость записи.
• Форма: имя, телефон, марка автомобиля, нужная услуга (select), желаемая дата, комментарий.
• Специфические требования: используйте type="tel" и type="date" по назначению; добавьте в главную ссылку на раздел второй страницы через якорь.

Вариант 4. Образовательная платформа

• Тема сайта: платформа коротких практических курсов «Старт в деле».
• Главная: объясните, для кого платформа, как устроено обучение и какие направления есть; добавьте нумерованный список шагов начала обучения.
• Сущности второй страницы: минимум четыре курса. Для каждого укажите уровень, длительность и результат обучения.
• Таблица: курсы, старт, длительность, формат занятий.
• Форма: имя, e-mail, выбранный курс (select), уровень подготовки (select), цель обучения, комментарий.
• Специфические требования: одно поле должно иметь minlength; разместите на главной отдельный раздел с ответом на вопрос «Как начать».

Вариант 5. Туристический сервис

• Тема сайта: сервис однодневных поездок «Выходной маршрут».
• Главная: представьте направления, принцип выбора маршрута и что взять с собой; добавьте список обязательных вещей.
• Сущности второй страницы: минимум четыре маршрута. Для каждого укажите место, продолжительность, уровень сложности и короткое описание.
• Таблица: маршруты, дата ближайшего выезда, продолжительность, уровень сложности, стоимость.
• Форма: имя, e-mail, маршрут (select), число участников (number), дата/период, сообщение.
• Специфические требования: используйте figure с подписью для одной фотографии маршрута; у числа участников задайте подходящие min и max.

Вариант 6. Кофейня

• Тема сайта: кофейня «Утренний свет».
• Главная: расскажите о кофейне, её атмосфере и предложениях дня; добавьте список вариантов напитков или правил предзаказа.
• Сущности второй страницы: минимум четыре позиции меню. Для каждой укажите состав, объём или вес и цену.
• Таблица: позиции, категория, объём/вес, цена, доступность в течение дня.
• Форма: имя, телефон или e-mail, позиция меню (select), количество (number), способ получения (select), комментарий.
• Специфические требования: обозначьте аллергены или состав хотя бы у одной позиции; используйте maxlength у комментария к заказу.

Вариант 7. Игровой клуб

• Тема сайта: клуб настольных игр «Ход игрока».
• Главная: представьте клуб, форматы встреч и правила участия; добавьте список того, что ждёт новичка на первой встрече.
• Сущности второй страницы: минимум четыре настольные игры. Для каждой укажите жанр, число игроков и примерную длительность партии.
• Таблица: расписание игровых вечеров: дата, игра, начало, свободные места.
• Форма: имя, e-mail, выбранная встреча (select), опыт в настольных играх (select), число участников, комментарий.
• Специфические требования: добавьте ссылку на правила клуба в пределах главной страницы; используйте type="number" для количества участников.

Вариант 8. Музыкальный фестиваль

• Тема сайта: городской фестиваль «Громче лета».
• Главная: объясните идею фестиваля, дату и площадку; добавьте список правил для гостей или того, что разрешено взять с собой.
• Сущности второй страницы: минимум четыре исполнителя. Для каждого укажите жанр, город/страну и краткое описание выступления.
• Таблица: программа фестиваля: время, сцена, исполнитель, продолжительность.
• Форма: имя, e-mail, день посещения (select), формат билета (select), количество билетов, вопрос организаторам.
• Специфические требования: у одной афиши используйте figure и figcaption; сделайте поле количества билетов обязательным с ограничением min="1".

Вариант 9. Приют для животных

• Тема сайта: приют «Дом хвоста».
• Главная: расскажите о работе приюта, способах помощи и правилах знакомства с животными; добавьте список того, что можно принести в помощь.
• Сущности второй страницы: минимум четыре животных. Для каждого укажите кличку, вид, возраст/размер и короткое описание характера.
• Таблица: дни и время знакомства: день недели, время, ответственный, доступные животные или формат визита.
• Форма: имя, e-mail, цель обращения (select: знакомство, волонтёрство, помощь), выбранное животное (select), сообщение.
• Специфические требования: у каждого животного должно быть содержательное описание в alt; добавьте отдельный смысловой раздел о правилах ответственного обращения.

Вариант 10. Спортивный центр

• Тема сайта: спортивный центр «Ритм».
• Главная: представьте направления, возможности для новичков и правила посещения; добавьте список того, что взять на первое занятие.
• Сущности второй страницы: минимум четыре спортивные секции или тренировки. Для каждой укажите уровень, длительность и краткое описание.
• Таблица: расписание: направление, день, время, уровень, зал.
• Форма: имя, e-mail или телефон, выбранная секция (select), уровень подготовки (select), желаемый день, комментарий.
• Специфические требования: добавьте в главную ссылку на таблицу расписания через якорь; используйте required для выбранной секции и уровня подготовки.

Результат

После этой практической у вас будет первая рабочая версия многостраничного HTML-сайта. Она ещё не оформлена CSS и не отправляет форму на сервер — это намеренно. Но её структура, содержание и связи должны быть достаточно аккуратными, чтобы в следующей практической продолжить работу с тем же проектом, а не начинать всё заново.