Атрибуты изображений (alt, width, height)

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

Опубликовано 04.04.2025
Просмотры 27
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий мы изучим, как добавлять изображения на веб-страницу и управлять ими с помощью HTML-атрибутов. Вы научитесь использовать основной тег для изображений и познакомитесь с тремя важными атрибутами: `src`, `alt`, `width` и `height`. Атрибут `src` указывает путь к файлу изображения. `alt` предоставляет альтернативный текст, что крайне важно для доступности сайта. Атрибуты `width` и `height` позволяют задавать размеры изображения прямо в HTML, что помогает браузеру быстрее отрисовать страницу, предотвращая скачки контента при загрузке. Пройдите задания от простого к сложному, чтобы закрепить эти знания на практике.
Список тем

Добавление изображения на страницу

id: 37813_image-attributes-1-basic-img

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

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

Указание источника изображения (src)

id: 37813_image-attributes-2-src-attribute

Тег `<img>` бесполезен без указания, какое именно изображение нужно показать. Для этого используется атрибут, который содержит URL-адрес картинки. Добавьте недостающий атрибут.

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

Альтернативный текст (alt)

id: 37813_image-attributes-3-alt-attribute

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

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

Задание размеров: ширина (width)

id: 37813_image-attributes-4-width-attribute

Чтобы изображение занимало определенную ширину на странице, можно использовать атрибут `width`. Задайте изображению ширину в 300 пикселей, добавив соответствующий атрибут и его значение.

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

Задание размеров: высота (height)

id: 37813_image-attributes-5-height-attribute

Аналогично ширине, можно задать и высоту изображения с помощью атрибута `height`. Добавьте атрибут высоты и установите её значение равным 200 пикселей.

CSS
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  margin: 0;
}
img {
  border: 2px solid dodgerblue;
}
HTML
<img src="https://naytikurs.ru/img/6.png" alt="Чашка кофе и ноутбук" width="300" input1="input2">
Для управления высотой используется атрибут `height`. Вставьте `height` в первое поле и значение `200` во второе. Это зафиксирует высоту изображения.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексное задание

id: 37813_image-attributes-6-all-together

Теперь соберём всё вместе. Перед вами код с несколькими пропусками. Вам нужно вставить тег изображения и указать для него все три атрибута: `src`, `alt` и `width`.

CSS
body {
  padding: 20px;
  font-family: sans-serif;
  text-align: center;
}
img {
  display: block;
  margin: 10px auto;
  border-radius: 50%;
}
HTML
<h1>Фото дня</h1>
<input1 input2="https://naytikurs.ru/img/7.png" input3="Милый рыжий котёнок" input4="250">
Сначала вставьте тег `img` в первое поле. Затем последовательно добавьте атрибуты: `src` для источника, `alt` для описания и `width` для ширины со значением 250.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Адаптивная ширина

id: 37813_image-attributes-8-responsive-width

Атрибутам `width` и `height` можно задавать не только пиксели, но и проценты. Это позволяет изображению адаптироваться под размер родительского элемента. Задайте ширину изображения `100%`, чтобы оно заняло всё доступное пространство.

CSS
body {
  padding: 1rem;
}
.container {
  width: 100%;
  max-width: 320px;
  border: 2px solid #333;
  padding: 5px;
  box-sizing: border-box;
}
img {
  display: block;
}
HTML
<div class="container">
  <img src="https://naytikurs.ru/img/8.png" alt="Ночной город с высоты" width="input1" height="input2">
</div>
В значении атрибута `width` укажите `100%`. CSS уже ограничивает максимальную ширину контейнера, поэтому изображение не выйдет за его пределы. Атрибут `height` лучше установить в `auto` или вовсе убрать, чтобы сохранились пропорции.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру