HTML и CSS: структура документа, теги, ссылки, таблицы и формы, селекторы, блочная модель, позиционирование, адаптивная вёрстка — тест

Любая веб-страница — это текст, размеченный тегами HTML, и правила оформления на языке CSS. Разметка отвечает за структуру (заголовок, абзац, ссылка, таблица, форма), стили — за внешний вид: цвета, отступы, расположение блоков и то, как страница перестраивается на экране телефона.

Что проверяется

Структура HTML-документа: doctype, html, head, title, body. Основные теги: ссылка, изображение, списки, таблица, поля формы; атрибуты href и alt; семантические теги header, nav, footer; уровни заголовков. CSS: свойства цвета, фона и отступов, селекторы по тегу, классу и идентификатору, псевдокласс hover, каскад и порядок правил. Блочные и строчные элементы, блочная модель и итоговая ширина блока, абсолютное позиционирование, медиазапросы.

Задания

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

Разбор

Пояснения показывают, зачем у изображения атрибут alt, чем padding отличается от margin, почему ширина блока с padding и border оказывается больше width, от какого элемента отсчитывается абсолютное позиционирование и как медиазапрос меняет вёрстку на узком экране.

Назначение

Работа рассчитана на первый раздел программы перед переходом к JavaScript: сценарии работают с элементами страницы через их теги, классы и идентификаторы, поэтому разметку и селекторы нужно знать уверенно. Программа «Web-дизайн» на семьдесят два часа соединяет графический дизайн, вёрстку и первые сценарии на JavaScript. Занятия идут парами часов раз в неделю, каждый раздел заканчивается практической работой, а курс — собственным сайтом, который ученик проектирует, верстает и защищает. Эта работа — вторая из 3 по курсу.

Организация тестирования

Задания открываются в браузере на компьютере, планшете или мобильном телефоне, поэтому подойдёт любое устройство под рукой. Период выполнения задаётся гибко, поэтому работу проводят и в классе, и дома. Чтобы снизить риск списывания, фиксируются попытки переключиться на другие вкладки браузера или другие приложения.