Проверьте свои знания: Изображения в HTML
Цель этого теста навыков - оценить, поняли ли вы нашу статью Изображения в HTML.
Изображения в HTML №1
В этой задаче мы хотим, чтобы вы вставили на страницу простое изображение ягоды черники. Вам необходимо:
- Добавьте путь к изображению в соответствующий атрибут, чтобы встроить его на страницу. Изображение называется
blueberries.jpg
и оно находится в папке с именемimages
внутри текущей папки. - Добавьте альтернативный текст к соответствующему атрибуту, чтобы описать изображение для людей, которые его не видят.
- Дайте элементу
<img>
соответствующие значенияwidth
иheight
чтобы он отображался с правильным соотношением сторон и достаточно места на странице для отображения. Размер изображения 615 x 419 пикселей.
Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
Примечание: Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.
Изображения в HTML №2
В этой задаче у вас уже есть полнофункциональное изображение, но мы хотели бы, чтобы вы добавили всплывающую подсказку, которая появляется при наведении курсора на изображение. Вы должны ввести некоторую соответствующую информацию во всплывающую подсказку.
Попробуйте обновить живой код ниже, чтобы воссоздать законченный пример:
Примечание: Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.
Изображения в HTML №3
В этой последней задаче вам предоставляется как полнофункциональное изображение, так и текст заголовка. Здесь вам нужно добавить элементы, которые будут связывать изображение с его заголовком.
Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
Примечание: Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.
Оценка или дополнительная помощь
Вы можете попрактиковаться с этими примерами в интерактивных редакторах выше.
Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:
-
Поместите свою работу в онлайн-редактор, например CodePen, jsFiddle или Glitch. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведённых выше разделах.
-
Напишите сообщение с просьбой об оценке и / или помощи в MDN Discourse forum Learning category. Ваш пост должен включать:
- Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".
- Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.
- Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
- Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.