Веб-разработка: HTML, CSS, HTTP и доступность
Все объяснения, задачи и лабораторная в одном месте.
Можно сохранить страницу в PDF через печать браузера. Для печати разборы ответов раскрываются автоматически.
1. Как работает веб
Объяснение
Браузер разрешает имя, соединяется с сервером, проверяет TLS для HTTPS и отправляет HTTP-запрос. Сервер возвращает статус, заголовки и тело. Cookies связывают запросы с состоянием, но HTTP сам не хранит сессию пользователя.
Задача для самостоятельного решения
Чем 404 отличается от ошибки TLS?
Показать разбор ответа
404 — корректно полученный HTTP-ответ о ненайденном ресурсе. Ошибка TLS возникает до доверенного HTTP-обмена, например из-за неверного имени сертификата.
2. Семантический HTML
Объяснение
HTML задаёт смысл документа: headings, nav, main, button, form. Семантика помогает браузеру и вспомогательным технологиям. Заголовки должны отражать структуру, а не только желаемый размер шрифта.
Задача для самостоятельного решения
Чем ссылка отличается от кнопки?
Показать разбор ответа
Ссылка переходит к ресурсу, кнопка выполняет действие. Используйте соответствующий элемент, чтобы сохранить ожидаемую клавиатурную и браузерную работу.
3. CSS: поток, сетки и адаптивность
Объяснение
Normal flow задаёт естественное расположение. Flexbox удобен по одной оси, Grid — по двум. Responsive layout должен переносить текст и ограничивать ширину без фиксированной высоты текста.
Задача для самостоятельного решения
Как избежать горизонтального скролла у длинного блока кода на телефоне?
Показать разбор ответа
Ограничить ширину контейнера и дать самому pre overflow-x:auto. Не расширять весь viewport и не обрезать содержимое без возможности чтения.
4. Формы, доступность и безопасность
Объяснение
Label связывает подпись с полем. Клиентская проверка улучшает UX, серверная обеспечивает корректность. Недоверенные данные нужно экранировать при выводе, а действия с cookies защищать от CSRF.
Задача для самостоятельного решения
Достаточно ли input type=email для безопасного сохранения адреса?
Показать разбор ответа
Нет: сервер должен проверить формат и ограничения, а вывод — экранировать. Пользователь может отправить запрос вообще без браузерной формы.
Лабораторная работа
Подготовка
Сохраните пример в index.html и откройте браузером. Форма демонстрирует семантику; серверная обработка пока отсутствует.
Учебный пример
<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Учебная форма</title>
<style>
body { max-width:42rem; margin:2rem auto; padding:1rem; font:1.1rem/1.6 system-ui; }
input,button { font:inherit; padding:.6rem; max-width:100%; box-sizing:border-box; }
:focus-visible { outline:3px solid #2864c5; outline-offset:3px; }
</style>
<main><h1>Мой учебный план</h1>
<form method="get">
<label for="topic">Тема</label>
<input id="topic" name="topic" required maxlength="80">
<button>Выбрать</button>
</form></main>
</html>Как работает пример и что ожидать
Tab переводит фокус на поле и кнопку, label даёт полю доступное имя. Отправка GET добавляет topic в URL; это не сохранение в базе. max-width и box-sizing удерживают поле в контейнере. Секретные данные не следует передавать таким учебным GET-параметром.
Итоговая работа
Создайте страницу каталога, карточку и форму с сообщениями об ошибках. Проверьте 320, 768 и 1440 пикселей, увеличение текста и клавиатурное управление. Добавьте серверную валидацию до сохранения данных; объясните отличие её от required.
Проверка результата
1. Опишите исходные данные и условия запуска, чтобы другой человек мог повторить работу.
2. Приложите результат обычного сценария и сравните его с ожидаемым.
3. Проверьте неверный вход, граничный случай и отказ зависимости, если она есть.
4. Объясните выбранное решение и известное ограничение.
5. Сохраните исправления после самопроверки вместе с примером, который раньше не работал.
Как оценить работу
По каждому пункту поставьте 0 (не выполнено), 1 (выполнено с пробелами) или 2 (результат воспроизводим и объяснён). Если обязательный сценарий не работает, вернитесь к нему независимо от общей суммы. Это рубрика самопроверки: сайт не исполняет присланный код и не выдаёт автоматическую оценку проекта.