HTML: базовый уровень

Навыки работы с HTML являются базовым требованием для любого, кто хочет работать в сфере веб-разработки или создавать собственные интернет-проекты. HTML (HyperText Markup Language) — это основа всех веб-страниц, язык, который задает структуру контента, будь то текст, изображения, таблицы или формы. Если вы начинающий разработчик или просто хотите освоить базовые навыки, выполнение тестовых заданий — отличный способ проверить свои знания и закрепить теорию на практике.

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

Будьте готовы не только вспомнить стандартные теги вроде <div>, <p>, и <a>, но и разобраться в тонкостях их применения в реальных задачах. Начнем с самых простых, но важных вопросов!

👉🏻Навигация и ссылки по всем материалам в Telegram

Вопрос 1:

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

Варианты ответа:

<header>
<title>
<h1>
<meta>
<heading>

Обоснование:

<header>: Этот тег используется для обозначения шапки страницы или раздела, но он не влияет на заголовок вкладки браузера.
<title>: Этот тег определяет заголовок страницы, отображаемый на вкладке браузера. Он включается в <head> документа.
<h1>: Этот тег задает заголовок первого уровня внутри страницы, но не влияет на вкладку браузера.
<meta>: Этот тег используется для метаинформации о странице (например, кодировка, описание), но не для заголовка вкладки.
<heading>: Такого тега в HTML не существует.

📌Правильный ответ:

<title>

Вопрос 2:

Чем является код <p> в HTML?

Варианты ответа:

Тегом комментария внутри кода
Тегом для отображения изображения
Началом абзаца текста
Концом абзаца текста
Указанием на внешнюю ссылку

Обоснование:

Тегом комментария внутри кода: Для комментариев в HTML используется конструкция . Тег <p> не имеет отношения к комментариям.
Тегом для отображения изображения: Для изображений используется тег <img>.
Началом абзаца текста: Тег <p> используется для обозначения абзаца текста. Внутри него содержится текст, а браузер добавляет отступы или другие стили по умолчанию.
Концом абзаца текста: Конец абзаца в HTML автоматически определяется закрывающим тегом </p>. Сам <p> не является концом.
Указанием на внешнюю ссылку: Для ссылок (внешних и внутренних) используется тег <a>.

📌Правильный ответ:

Началом абзаца текста.

Вопрос 3:

С помощью какого тега можно добавить изображение на страницу?

Варианты ответа:

<img image.jpg />
<img source="image.jpg">
<img href="image.jpg">
<image src="image.jpg">
<img src="image.jpg">

Обоснование:

<img image.jpg />: Этот синтаксис неверен, так как атрибут src обязателен для указания пути к изображению.
<img source="image.jpg">: В HTML атрибут source не используется с тегом <img>.
<img href="image.jpg">: Атрибут href применяется для ссылок в теге <a>, а не для изображений.
<image src="image.jpg">: Такого тега, как <image>, в HTML не существует.
<img src="image.jpg">: Это корректный тег для добавления изображения. Тег <img> является одиночным и использует атрибут src для указания пути к изображению.

📌Правильный ответ:

<img src="image.jpg">.

Вопрос 4:

Выберите верное суждение о заголовках в HTML.

Варианты ответа:

Заголовки нужны для установки размера шрифта в тексте, чтобы разные части страницы выглядели по-разному.
Заголовки не имеют отношения к SEO-оптимизации.
Чтобы добавить заголовок на страницу, можно использовать тег <h> или тег <p>.
Заголовки используются только для декоративного оформления текста и могут быть произвольными по порядку.
Веб-страница может иметь корректную структуру контента, даже если в ней нет ни одного заголовка.

Обоснование:

Заголовки нужны для установки размера шрифта: Это неверно. Заголовки в HTML используются для семантической структуры страницы, а не только для изменения визуальных стилей. Размер шрифта задаётся стилями CSS.
Заголовки не имеют отношения к SEO-оптимизации: Неверно. Заголовки играют ключевую роль в SEO, так как поисковые системы анализируют их для определения структуры контента и ключевых слов.
Можно использовать тег <h> или <p>: Неверно. Тег <h> не существует, а тег <p> используется для абзацев, а не для заголовков. Заголовки задаются с помощью тегов <h1> - <h6>.
Заголовки используются только для декоративного оформления: Это неверно. Заголовки определяют структуру страницы, что важно для читабельности и SEO. Также порядок использования заголовков должен быть логичным (например, <h1> → <h2>).
Веб-страница может иметь корректную структуру без заголовков: Это верное утверждение. Хотя заголовки помогают структурировать контент, они не являются обязательными. Без них структура может быть выстроена другими способами.

📌Правильный ответ:

Веб-страница может иметь корректную структуру контента, даже если в ней нет ни одного заголовка.

Вопрос 5:

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

Варианты ответа:

<br>
<b>
<s>
<u>
<i>

Обоснование:

<br>: Этот тег используется для переноса строки и не влияет на стиль текста.
<b>: Тег <b> делает текст жирным, но без дополнительного семантического значения. Он подходит, если цель — визуальное выделение текста.
<s>: Этот тег отображает текст зачеркнутым, а не жирным.
<u>: Этот тег подчеркивает текст, но не делает его жирным.
<i>: Этот тег делает текст курсивным, а не жирным.

📌Правильный ответ:

<b>.

Вопрос 6:

Выберите вариант ответа, в котором указаны ТОЛЬКО строчные элементы.

Варианты ответа:

<span>, <strong>, <em>
<a>, <div>, <label>
<b>, <section>, <u>
<input>, <h2>, <i>
<img>, <p>, <button>

Обоснование:

В HTML элементы могут быть строчными (inline) или блочными (block). Строчные элементы обычно занимают только необходимое пространство и располагаются в одной строке, тогда как блочные элементы занимают всю ширину контейнера.

<span>, <strong>, <em>: Все эти элементы являются строчными:<span> — используется для группировки текста для стилизации.
<strong> — выделяет текст полужирным, добавляя семантическое значение важности.
<em> — выделяет текст курсивом, добавляя семантическое значение акцента.
<a>, <div>, <label>: <a> и <label> — строчные, но <div> — блочный элемент.
<b>, <section>, <u>: <b> и <u> — строчные, но <section> — блочный элемент.
<input>, <h2>, <i>: <input> и <i> — строчные, но <h2> — блочный элемент.
<img>, <p>, <button>: <img> — строчный, но <p> и <button> — блочные элементы.

📌Правильный ответ:

<span>, <strong>, <em>.

Вопрос 7:

Какой спецсимвол нужно использовать для отображения «<» (знак меньше)?

Варианты ответа:

&lte;
<
<
≤
<

Обоснование:

Для отображения символа < в HTML используется специальный символ (entity), так как сам символ < интерпретируется как начало тега. Рассмотрим варианты:

&lte;: Используется для обозначения «меньше или равно» (≤), а не для символа <.
<: Это числовой код символа <. Он корректен и может быть использован.
<: Это сокращённое имя (entity name) для символа <. Оно также корректно и чаще используется.
≤: Это entity для символа «меньше или равно» (≤), а не для <.
<: Это шестнадцатеричный код символа <. Он корректен, но используется реже.

📌Правильный ответ:

<.
Этот спецсимвол проще и предпочтительнее для отображения знака меньше в HTML.

Вопрос 8:

Что произойдет, если кнопку без атрибута type поместить в форму и нажать на нее?

Варианты ответа:

Кнопка выполнит действие по умолчанию браузера, но не отправит форму.
Браузер вызовет диалоговое окно с предупреждением, что атрибут type не указан.
Форма перезагрузится, но данные из полей ввода не будут отправлены.
Форма отправится на сервер.
Ничего не произойдет, кнопка не будет реагировать на нажатие.

Обоснование:

В HTML кнопка <button> без явно указанного атрибута type автоматически получает значение type="submit" по умолчанию. Это значит, что:

Нажатие на такую кнопку приведет к отправке формы, если она расположена внутри элемента <form>.
Если форма не имеет атрибута action, страница просто перезагрузится.

Рассмотрим варианты:

Кнопка выполнит действие по умолчанию браузера, но не отправит форму: Неверно, так как действие по умолчанию для кнопки в форме — это отправка формы.
Браузер вызовет диалоговое окно с предупреждением: Неверно, браузеры не предупреждают об отсутствии атрибута type.
Форма перезагрузится, но данные из полей ввода не будут отправлены: Неверно, данные будут отправлены, если форма настроена правильно.
Форма отправится на сервер: Верно, если кнопка находится в форме, она выполняет действие submit.
Ничего не произойдет: Неверно, действие произойдет, так как кнопка активна.

📌Правильный ответ:

Форма отправится на сервер.

Вопрос 9:

Какой атрибут необходимо добавить к тегу <a>, чтобы ссылка открывалась в новой вкладке?

Варианты ответа:

target="_new"
rel="noopener"
open="new"
href="_blank"
target="_blank"

Обоснование:

Для открытия ссылки в новой вкладке используется атрибут target с заданным значением _blank. Рассмотрим варианты:

target="_new": Неверно, так как значение _new не открывает ссылку в новой вкладке.
rel="noopener": Этот атрибут используется для безопасности при открытии ссылки в новой вкладке (чтобы ограничить доступ открытой странице к текущей странице), но сам по себе не открывает ссылку в новой вкладке.
open="new": В HTML такого атрибута не существует.
href="_blank": Атрибут href используется для указания адреса ссылки, но не определяет поведение при открытии ссылки.
target="_blank": Это правильный ответ. Атрибут target со значением _blank заставляет браузер открыть ссылку в новой вкладке.

📌Правильный ответ:

target="_blank".

Вопрос 10:

Какой элемент и атрибут вы используете для объединения ячеек по вертикали?

Варианты ответа:

Использовать элемент <tr> и атрибут colspan
Использовать элемент <th> и атрибут rowspan
Использовать элемент <td> и атрибут colspan
Использовать элемент <table> и атрибут colspan
Использовать элемент <td> и атрибут rowspan

Обоснование:

Для объединения ячеек таблицы по вертикали используется атрибут rowspan, который применяется к элементам ячеек, таким как <td> (ячейки данных) или <th> (ячейки заголовков). Атрибут colspan, напротив, применяется для объединения ячеек по горизонтали.

Рассмотрим варианты:

<tr> и colspan: Атрибут colspan не объединяет ячейки по вертикали, и <tr> (строка таблицы) не принимает этот атрибут.
<th> и rowspan: Этот вариант корректен, если объединяемые ячейки находятся в заголовочной части таблицы (<th>).
<td> и colspan: Атрибут colspan используется для объединения ячеек по горизонтали, а не по вертикали.
<table> и colspan: Атрибут colspan не используется на уровне таблицы.
<td> и rowspan: Этот вариант корректен для объединения ячеек данных по вертикали.

📌Правильный ответ:

Использовать элемент <td> и атрибут rowspan.

Если объединяются ячейки заголовков, можно также использовать <th> и rowspan, в зависимости от контекста.

Заключение

Дорогие читатели! Если материалы данной статьи помогли вам успешно пройти тест, буду признателен, если вы поставите лайк 👍🏻 именно той статье, которая соответствовала вашему уровню подготовки. Также, если тестирование оказалось неудачным ❌, пожалуйста, оставьте комментарий 📝 с указанием количества ошибок допущенных в тесте.

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