Проверьте свои знания: Изображения в HTML

Цель этого теста навыков - оценить, поняли ли вы нашу статью Изображения в HTML.

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как CodePen, jsFiddle или Glitch для работы с задачами.

Изображения в HTML №1

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

  • Добавьте путь к изображению в соответствующий атрибут, чтобы встроить его на страницу. Изображение называется blueberries.jpg и оно находится в папке с именем images внутри текущей папки.
  • Добавьте альтернативный текст к соответствующему атрибуту, чтобы описать изображение для людей, которые его не видят.
  • Дайте элементу <img> соответствующие значения width и height чтобы он отображался с правильным соотношением сторон и достаточно места на странице для отображения. Размер изображения 615 x 419 пикселей.

Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

Изображения в HTML №2

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

Попробуйте обновить живой код ниже, чтобы воссоздать законченный пример:

Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

Изображения в HTML №3

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

Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

Оценка или дополнительная помощь

Вы можете попрактиковаться с этими примерами в интерактивных редакторах выше.

Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:

  1. Поместите свою работу в онлайн-редактор, например CodePen, jsFiddle или Glitch. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.
  2. Напишите сообщение с просьбой об оценке и / или помощи в MDN Discourse forum Learning category. Ваш пост должен включать:
    • Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".
    • Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.
    • Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
    • Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.