Добавление базовых изображений (img)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 24
Автор
Рек. время прохождения 3 минуты
Упражнений 10
Комментарии 0
Тренажер HTML
Изображения — неотъемлемая часть веба. В этой серии заданий вы научитесь добавлять картинки на HTML-страницу с помощью тега `<img>`. Мы начнем с самых основ: как вставить изображение и указать путь к нему. Затем перейдем к важным атрибутам, таким как альтернативный текст, который делает контент доступным для всех пользователей и помогает поисковым системам. Вы также попрактикуетесь в управлении размерами изображений прямо в HTML и научитесь делать их интерактивными, превращая в ссылки. В конце мы затронем тему стилизации и адаптивности, чтобы ваши картинки отлично смотрелись на любых устройствах. Каждое задание — это маленький шаг к уверенному владению одним из самых важных тегов в HTML.
Список тем

Вставляем первое изображение

id: 37812_html_img_tag_1

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

CSS
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  margin: 0;
  background-color: #f0f0f0;
}
img {
  max-width: 100%;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 8px;
}
HTML
<input1 src="https://naytikurs.ru/img/1.png" alt="Горный пейзаж">
Чтобы добавить изображение на страницу, используется одиночный (непарный) тег `<img>`. Просто впишите 'img' вместо макроса `input1`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указываем путь к файлу (атрибут src)

id: 37812_html_img_src_2

Тег для изображения уже на месте, но картинка не отображается, потому что браузер не знает, какой файл загружать. Необходимо добавить атрибут, который указывает путь (URL) к файлу изображения.

CSS
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  margin: 0;
  background-color: #f0f0f0;
}
img {
  max-width: 100%;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 8px;
}
HTML
<img input1="https://naytikurs.ru/img/2.png" alt="Лесная тропа">
Путь к изображению указывается в атрибуте `src` (сокращение от 'source'). Добавьте `src` вместо `input1`, чтобы картинка появилась.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавляем альтернативный текст (атрибут alt)

id: 37812_html_img_alt_3

Изображение есть, но что если оно не загрузится? Или если сайтом пользуется незрячий человек? Для таких случаев нужен альтернативный текст. Добавьте атрибут, который отвечает за это.

CSS
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  margin: 0;
  background-color: #f0f0f0;
}
img {
  max-width: 100%;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 8px;
}
HTML
<img src="https://naytikurs.ru/img/4.png" input1="Закат на озере">
Альтернативный текст для изображения задается с помощью атрибута `alt`. Этот текст описывает содержимое картинки для поисковых систем и программ чтения с экрана (скринридеров).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Обязательные атрибуты изображения

id: 37812_html_img_src_alt_4

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

CSS
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  margin: 0;
  background-color: #f0f0f0;
}
img {
  max-width: 100%;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 8px;
}
HTML
<img input1="https://naytikurs.ru/img/5.png" input2="Звездное небо над горами">
Вам нужно последовательно добавить два атрибута: `src` для указания URL картинки и `alt` для ее описания. Порядок атрибутов в HTML обычно не важен, но в этом задании следуйте указанной последовательности.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Управляем шириной изображения

id: 37812_html_img_width_5

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

CSS
body {
  text-align: center;
}
img {
  max-width: 100%;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 8px;
}
HTML
<img src="https://naytikurs.ru/img/6.png" alt="Городской пейзаж ночью" input1="250">
Для установки ширины элемента используется атрибут `width`. Значение нужно указать просто числом, без единиц измерения (например, `width="250"`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Точные размеры: ширина и высота

id: 37812_html_img_width_height_6

Теперь давайте зададим точные размеры для изображения. Установите ширину 300 пикселей и высоту 200 пикселей, используя соответствующие HTML-атрибуты.

CSS
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
img {
  border: 2px solid #ccc;
  border-radius: 8px;
  object-fit: cover;
}
HTML
<img src="https://naytikurs.ru/img/7.png" alt="Пустыня" input1="300" input2="200">
Используйте атрибут `width` для ширины и `height` для высоты. Значения указываются в пикселях, но без добавления 'px' в значении атрибута.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Декоративное изображение

id: 37812_html_img_decorative_7

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

CSS
body { 
  padding: 20px; 
  text-align: center; 
  font-family: sans-serif; 
  color: #333;
}
h1 {
  font-weight: 300;
}
.divider {
  height: 20px;
  width: 150px;
  object-fit: cover;
  margin: 10px 0;
  border-radius: 4px;
}
HTML
<h1>Новости</h1>
<img src="https://naytikurs.ru/img/8.png" class="divider" input1="">
<p>Свежие события и анонсы.</p>
Для декоративных изображений атрибут `alt` должен присутствовать, но быть пустым (`alt=""`). Это сообщает программам чтения с экрана, что изображение можно проигнорировать. Вставьте `alt` вместо `input1`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Изображение-ссылка

id: 37812_html_img_link_8

Превратите изображение в интерактивный элемент. Сделайте так, чтобы при клике на картинку пользователь переходил на другую страницу. Для этого нужно 'обернуть' изображение в тег ссылки.

Всплывающая подсказка для изображения

id: 37812_html_img_title_9

Добавьте к изображению дополнительную информацию, которая будет появляться при наведении курсора мыши. Текст для подсказки уже подготовлен, вам нужно лишь вставить правильный атрибут.

CSS
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
img {
  width: 250px;
  border: 2px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
}
HTML
<img src="https://naytikurs.ru/img/1.png" alt="Горный пейзаж" input1="Нажмите, чтобы узнать больше о горах">
Для создания всплывающей текстовой подсказки, которая появляется при наведении, используется глобальный атрибут `title`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Адаптивное изображение через класс

id: 37812_html_img_class_10

В CSS уже есть готовый стиль `.responsive-img` для адаптивных изображений, но он не применяется к нашей картинке. Добавьте к тегу `<img>` атрибут, который свяжет его с этим CSS-классом.

CSS
.responsive-img {
  max-width: 100%;
  height: auto;
  border: 3px solid #4CAF50;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
HTML
<img src="https://naytikurs.ru/img/4.png" alt="Закат на озере" input1="responsive-img">
Чтобы применить CSS-стили из определенного класса к элементу, используется атрибут `class`. Вставьте `class` вместо `input1`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру