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

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

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

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

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

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

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

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

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

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

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