Создаём сайт School Digital Day

Цели работы

11.5.3.2 Создавать интерфейс с помощью HTML и CSS.
11.5.3.3 Реализовывать навигацию сайта.

Повторите основные элементы веб-страницы, заголовки, абзацы, ссылки и элементы формы.

Результат: index.html, register.html и общий файл styles.css. Главная страница рассказывает о мероприятии, вторая содержит форму регистрации.

Распакуйте архив. Откройте папку student.

Понадобятся браузер и редактор кода. Интернет и веб-сервер не нужны. Сначала распакуйте архив. Работайте в папке student (скачайте и разархивируйте файл).

1. Спланируйте сайт · 4 минуты

1. Откройте index.html, register.html и styles.css в редакторе. Откройте index.html в браузере.
2. Нарисуйте на бумаге две небольшие схемы страниц. На каждой разместите шапку, меню, основное содержимое и подвал.
3. На схеме Home добавьте карточку мастер-класса и раздел Contact. На схеме Register разместите форму.
4. Покажите стрелками переходы Home → Register и Register → Home. Добавьте переход к Contact с каждой страницы.

2. Создайте главную страницу · 6 минут

В обоих HTML-файлах замените комментарий STEP 2 внутри head этой строкой:

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

Только в index.html замените комментарий внутри main следующим кодом:

<section>
  <h2>Explore digital skills</h2>
  <p>Join our school event and try a new skill.</p>
  <article>
    <h3>Web design workshop</h3>
    <p>Create a page with HTML and CSS.</p>
    <a class="button" href="register.html">Register now</a>
  </article>
</section>
<aside>
  <h2>Before you join</h2>
  <p>Bring a notebook. Beginners are welcome.</p>
</aside>
<section id="contact">
  <h2>Contact</h2>
  <p>Ask your Computer Science teacher.</p>
</section>

1. Измените название и описание воркшопа, предложив свою тему. Сохраните ссылку Register now.
2. Найдите header, main, section, article, aside и footer. Элемент nav добавите на следующем этапе. Сохраните вложенность элементов из примера.
3. Сохраните файлы и обновите страницу. Пока она отображается со стандартным оформлением браузера.

3. Добавьте навигацию · 7 минут

В обоих файлах замените комментарий STEP 3 этим меню:

<nav aria-label="Main navigation">
  <a href="index.html" aria-current="page">Home</a>
  <a href="register.html">Register</a>
  <a href="index.html#contact">Contact</a>
</nav>

1. В register.html перенесите aria-current="page" со ссылки Home на ссылку Register.
2. Сохраните оба файла. Проверьте переходы Home → Register → Home.
3. Проверьте Contact на обеих страницах: ссылка должна вести к разделу Contact в index.html.
4. На главной странице проверьте ссылку Register now.

Подсказка: index.html#contact означает «открой index.html и перейди к элементу с id="contact"». На этапе 5 CSS добавит подчёркивание ссылки на текущую страницу.

4. Создайте форму регистрации · 9 минут

Только в register.html замените комментарий внутри main следующим кодом:

<section>
  <h2>Your registration</h2>
  <p>Demo only: no data is sent or saved. Use fictional details.</p>
  <form onsubmit="event.preventDefault()">
    <label for="student-name">Name (required)</label>
    <input type="text" id="student-name" name="student_name" required>

    <label for="email">Email (required)</label>
    <input type="email" id="email" name="email" required>

    <!-- Add the workshop select here -->

    <label for="message">Your question (optional)</label>
    <textarea id="message" name="message" rows="3"></textarea>

    <button type="submit">Check my details</button>
  </form>
</section>

1. Замените комментарий <!-- Add the workshop select here --> кодом списка select, приведённым ниже.
2. Самостоятельно добавьте ещё один мастер-класс в список. Укажите для него отдельное значение value и понятное название.
3. Проверьте, совпадает ли значение for каждой подписи label со значением id соответствующего поля.
4. Сохраните файл. Нажмите Check my details при пустых полях. Затем заполните имя, введите некорректный email, например abc, и выберите мастер-класс. Посмотрите сообщение браузера.
5. Проверьте форму с вымышленными корректными данными: Alex, alex@example.com и выбранный мастер-класс.

<label for="workshop">Workshop (required)</label>
<select id="workshop" name="workshop" required>
  <option value="">Choose a workshop</option>
  <option value="web">Web design</option>
  <option value="python">Python</option>
</select>

Готовая строка onsubmit отменяет отправку формы после проверки браузером. Писать JavaScript в этой работе не требуется. При корректном вводе страница остаётся открытой, сообщение об успешной регистрации не появляется. Это учебный интерфейс: форма не регистрирует участника и не сохраняет данные.

5. Оформите интерфейс · 9 минут

Вставьте этот код в styles.css, сохраните файл и обновите обе страницы.

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #243b35;
  background: #f2f6f5;
  line-height: 1.5;
}
header, footer {
  padding: 20px;
  background: #286d60;
  color: white;
  text-align: center;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: #dcebe5;
}
nav a, .button, button {
  display: inline-block;
  padding: 10px 16px;
  background: #286d60;
  color: white;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  font: inherit;
}
nav a:hover, .button:hover, button:hover { background: #194b42; }
nav a[aria-current="page"] { text-decoration: underline; }
main { max-width: 850px; margin: auto; padding: 16px; }
section, aside {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid #b9d1c6;
  border-radius: 10px;
  background: white;
}
article { padding: 16px; border-left: 4px solid #286d60; }
aside { background: #fff4d8; }
label { display: block; margin-top: 12px; }
input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #617d70;
  border-radius: 5px;
  font: inherit;
}
button { margin-top: 16px; cursor: pointer; }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #a64b00;
  outline-offset: 3px;
}

Самостоятельно внесите три изменения:

1. Замените цвет фона header и footer на другой тёмный цвет. Белый текст должен оставаться хорошо различимым.
2. Измените padding у section и aside с 20px на 24px. Посмотрите, как изменилось пространство внутри границ блоков.
3. Измените их margin-bottom с 16px на 24px. Посмотрите, как изменились промежутки между блоками.

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

6. Проверьте и объясните результат · 5 минут

Поработайте в паре. Используйте вымышленные данные. Если найдёте ошибку, запишите, что не работало и как вы это исправили.

Сдайте: папку student с тремя файлами и три коротких ответа: 1) один HTML-элемент и его назначение; 2) одно изменение CSS и его результат; 3) одна исправленная ошибка навигации или формы. Если ошибок не было, опишите проведённую проверку и её результат.