Ответы к экзамену: Основы веб-разработки (HTML, CSS)

Расположите в хронологическом порядке этапы эволюции HTML:
HTML 2.0 и 3.2
HTML 4.01
XHTML
HTML5

Такие технологии, как …, обычно относятся к клиентской (фронтенд) части интернет-ресурса (укажите 3 варианта ответа)

Существуют такие распространенные способы расчета стоимости веб-проекта, как … (укажите 3 варианта ответа)

Существуют такие методы подключения CSS к HTML‑документу, как …

Сопоставьте элементы с их назначением:
A. ˂nav˃
B. ˂footer˃
C. ˂main˃
D. ˂header˃
E. навигационное меню
F. нижняя часть страницы
G. основной контент
H. заголовочная часть

Соотнесите понятия с их определениями:
A. Веб-сайт
B. Доменное имя
C. HTML
D. CSS
E. jаvascript
F. Сервер
G. совокупность связанных между собой страниц, объединенных одной темой, дизайном и системой ссылок
H. индивидуальное имя сайта в интернете, которое соответствует его IP-адресу
I. язык разметки, отвечающий за «скелет» веб-страницы
J. язык стилей, используемый для оформления внешнего вида веб-страницы (цвета, шрифты, отступы и т.д.)
K. язык программирования, который оживляет веб-страницу, обеспечивая интерактивность и динамическое поведение
L. программное обеспечение, принимающее запросы от клиентов и отправляющее им ответы, обеспечивающее работу сайта с серверной стороны

Селектор … – это тип селектора в CSS, который применяется для выбора элемента по его уникальному идентификатору

Самым популярным инструментом для работы с HTML и CSS является …

Редактор кода … имеет открытый исходный код и является бесплатным

Расставьте в правильном порядке основные этапы формирования стоимости веб-проекта:
сбор и анализ требований
оценка объемов и сложности работ
согласование сроков и бюджета
финальный подсчет общих расходов

Такой интернет-ресурс, как …, в первую очередь реализует транзакционную функцию

Расположите в хронологическом порядке этапы развития CMS:
статические HTML-страницы (1990-е гг.)
появление первых систем управления контентом с административными панелями (конец 1990-х гг. – начало 2000-х гг.)
эволюция с концепциями плагинов, тем и массовым внедрением современных CMS

Расположите в правильном порядке этапы создания клиентской части веб‑приложения:
анализ требований и планирование
проектирование макета и прототипирование
подготовка HTML‑разметки
стилизация с помощью CSS
проверка и отладка вёрстки

Расположите в правильной последовательности этапы верстки:
анализ требований
проектирование макета
HTML-разметка
CSS-стилизация
оптимизация
развертывание

Протокол … обеспечивает шифрованную передачу данных

При создании адаптивной верстки, когда стили сначала пишутся для маленьких экранов, используется принцип …

При разработке простого сайта студент создал базовый HTML‑документ и подключил внешний CSS‑файл через тег ˂link˃. Однако при открытии страницы в браузере стили не применяются. Что прежде всего следует предпринять для устранения этой проблемы?

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

Первым этапом процесса создания клиентской части веб-приложения является …

Первый этап процесса создания клиентской части веб‑приложения – это …

Установите соответствие между понятием и его определением:
A. HTTP
B. DNS
C. HTML
D. jаvascript
E. протокол для передачи гипертекста между клиентом и сервером
F. система, преобразующая доменные имена в IP-адреса
G. язык гипертекстовой разметки, создающий структуру веб-страницы
H. скриптовый язык, обеспечивающий интерактивное поведение на стороне клиента

Язык разметки используется для создания структуры веб‑страницы –это…

Фронтенд-разработчик работает над созданием адаптивного корпоративного сайта с уникальным дизайном, требующим быстрой модификации и высокого уровня производительности. Перед разработчиком стоит выбор между использованием готового CSS-фреймворка и самостоятельной разработкой стилизации. Какой подход в этом случае будет наиболее эффективным с учетом необходимости постоянных обновлений и минимизации технического долга?

Файл с расширением … необходимо создать первым для верстки веб-страницы

Утилитарный подход к стилизации интерфейсов применяется в таком фреймворке, как …

Установите соответствие между этапами создания клиентской части и их основными результатами:
A. Этап анализа и планирования
B. Этап проектирования макета и прототипирования
C. Этап подготовки HTML‑разметки
D. Этап стилизации с помощью CSS
E. техническое задание, схематический план, выбор инструментов
F. прототип и согласованный набор UI‑элементов
G. базовая HTML‑страница и семантическая структура
H. набор CSS‑файлов, оптимизированный дизайн и адаптивная верстка

Установите соответствие между семантическими HTML‑тегами и их основными функциями:
A. ˂header˃
B. ˂nav˃
C. ˂article˃
D. ˂footer˃
E. оформляет верхнюю часть страницы (шапку)
F. определяет навигационный блок страницы
G. содержит самостоятельный блок контента (например, статью или новость)
H. содержит информацию в нижней части страницы (контакты, копирайт)

Установите соответствие между преимуществами и фреймворками, которые имеют эти преимущества:
A. Полная кастомизация через tailwind.config.js
B. Большое количество готовых тем и шаблонов
C. Высокая гибкость и A11Y из коробки
D. Простой синтаксис классов и отсутствие JS
E. Tailwind CSS
F. WordPress
G. Foundation
H. Bulma

Установите соответствие между популярными CMS и их основными особенностями:
A. WordPress
B. Joomla
C. Drupal
D. 1С-Битрикс
E. большая библиотека тем и плагинов, простота установки
F. расширенные возможности «из коробки» для сложных проектов
G. масштабируемость и высокая гибкость для серьезных проектов
H. бесшовная интеграция с продуктами 1С и наличие коммерческой лицензии

Установите соответствие между понятиями и их содержанием:
A. UI
B. UX
C. Юзабилити
D. внешний вид и элементы интерфейса
E. общее впечатление и опыт работы с сайтом
F. удобство использования и эффективность выполнения задач

Основное отличие протокола HTTPS от HTTP – в том, что HTTPS …

Установите соответствие между методами подключения CSS и их описаниями:
A. Inline‑стили
B. Секция ˂style˃
C. Внешний CSS‑файл
D. стили задаются непосредственно в HTML‑теге через атрибут style
E. стили размещаются внутри тега ˂style˃ в секции ˂head˃
F. стили хранятся в отдельном файле и подключаются через тег ˂link˃

Установите соответствие между значением свойства display и его поведением:
A. block
B. inline
C. flex
D. grid
E. элемент занимает всю ширину родителя
F. элемент располагается по горизонтали, как текст
G. создает гибкий контейнер для распределения элементов
H. создает сетку с строками и колонками

Установите соответствие между HTML-тегами и их назначением:
A. ˂strong˃
B. ˂em˃
C. ˂sup˃
D. ˂sub˃
E. ˂mark˃
F. выделение важного текста
G. курсивное выделение
H. надстрочный индекс
I. подстрочный индекс
J. выделение текста маркером

Установите соответствие между CMS-системами и их особенностями:
A. WordPress
B. Joomla
C. Drupal
D. 1С-Битрикс
E. подходит для блогов и малого бизнеса
F. много модулей «из коробки», включая поддержку форумов
G. высокая гибкость и безопасность для крупных проектов
H. хорошая интеграция с 1С

Уникальное имя, связанное с IP-адресом сайта, которое пользователь вводит в адресной строке, – это...

Тип интернет-ресурсов, который обеспечивает интерактивные действия без полной перезагрузки страницы, – это …-сайты, или одностраничные приложения

Термин «…» обозначает удобство использования сайта для конечного пользователя

Тег ˂meta charset="UTF-8"˃ в HTML-документе …

В компании планируется оптимизация существующего интернет‑магазина. Требуется разработать клиентскую часть с адаптивным дизайном, удобной навигацией и быстрой загрузкой. Пользователи на мобильных устройствах испытывают трудности с доступом к основным функциям сайта. Какой комплекс мер будет наиболее эффективным для оптимизации клиентской части и повышения удобства использования на мобильных устройствах?

Вы разрабатываете клиентскую часть интернет-приложения. Перед вами стоит задача реализовать навигационное меню, которое на десктопе отображается горизонтально, а на мобильных устройствах – вертикально, с раскрытием по клику. Какой подход следует выбрать для наилучшей реализации этого с точки зрения адаптивности и методологии Mobile-First?

Вы отвечаете за запуск сайта интернет-магазина, который должен быть интегрирован с бухгалтерией на платформе 1С. Требуется готовый функционал для оплаты, доставки и учета остатков. Какую систему управления содержимым (CMS) вы выберете, учитывая потребности бизнеса?

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

Вам нужно создать интернет-магазин по продаже электроники с интерфейсом на трех языках и безопасными онлайн-платежами. Какой подход к формированию стоимости проекта будет наиболее удобным и прозрачным для такого интернет-магазина?

В этап анализа требований и планирования процесса создания клиентской части веб‑приложения входят задачи по … (укажите 3 варианта ответа)

В числе методологий организации CSS-кода – …

В числе задач, которые решает система управления сайтом (CMS), – … (укажите 4 варианта ответа)

В ряду недостатков CMS-систем – … (укажите 3 варианта ответа)

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

Вы разрабатываете многостраничный сайт и хотите обеспечить единообразие внешнего вида, удобство поддержки и переиспользование стилей на всех страницах проекта. Какой способ подключения CSS является оптимальным для достижения этих целей?

Атрибут href в теге ˂a˃ …

Английская аббревиатура … обозначает язык разметки, предназначенный для создания структуры веб‑страниц

Английская аббревиатура … обозначает программное обеспечение для управления содержимым сайта

HTML/CSS-фреймворкам присущи такие ограничения, как … (укажите 3 варианта ответа)

CSS-фреймворк … характеризуется как самый продвинутый благодаря утилитарному подходу

CMS-фреймворк … ориентирован на Material Design

… является популярным инструментом для создания прототипов веб‑сайтов

… – это фреймворк, полностью основанный на CSS и не использующий jаvascript

… – это селектор CSS, который используется для выбора всех элементов ˂p˃ с классом «highlight», находящихся внутри элемента с классом «container»

К клиентской части веб-сайта относятся технологии …

Основная функция семантического тега
в HTML – отображение …

Основная роль веб-сервера в структуре интернет-ресурса – это …

Одинарными являются такие теги, как … (укажите 3 варианта ответа)

Неверно, что такой фреймворк, как …, ориентирован на утилитарный подход в стилизации

Неверно, что к улучшениям пользовательского опыта (UX) можно отнести …

Название визуального блочного редактора контента для WordPress – …

Компания планирует разработать интернет-магазин, требующий тесной интеграции с 1С для синхронизации бухгалтерских и складских данных, а также быстрый запуск проекта с минимальными затратами на разработку. Какую систему управления содержимым (CMS) будет оптимально использовать для реализации проекта и почему?

Ключевым преимуществом использования семантических тегов в HTML является повышение …: семантические теги упрощают навигацию по содержимому для людей с ограниченными возможностями, использующих технологии вроде экранного чтения

К преимуществам использования следует отнести … (укажите 4 варианта ответа)

… – это атрибут тега ˂meta˃, который используется для задания кодировки документа

К CSS‑свойствам, которые относятся непосредственно к блочной модели элемента, следует отнести … (укажите 4 варианта ответа)

Значение свойства box-sizing, позволяющее включить padding и border в размеры элемента, не увеличивая его итоговую ширину, – …

Значение 0.5 для CSS-свойства opacity означает, что элемент – …

Домен … является международным

Для создания адаптивного сайта используют … (укажите 3 варианта ответа)

Для оптимизации загрузки рекомендуется использовать формат изображений … – современный формат от Google, который сочетает высокое качество с минимальным размером файла

Главным отличием статического сайта от динамического является то, что статический сайт …

Вы создали HTML-страницу и добавили к ней внешний CSS-файл style.css, но стили не применяются. Укажите возможные причины этого. (Укажите 4 варианта ответа).