Изображение Теперь добавьте картинку на страницу сами. Ссылка на изображение: https://images.unsplash.com/photo-1583337130417-3346a1be7dee?w=400&h=300, используйте тег <img>.

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

Пояснение по шагам

• Тег img вставляет изображение на страницу. Он берет источник из атрибута src.
• Атрибут alt нужен для доступности: текстовое описание изображения на случай, если картинку невозможно загрузить или для читателей скрин reader.
• Можно задать размер изображения через width/height или через CSS (для адаптивности).
• Можно добавить подпись к изображению с помощью figure/figcaption или обернуть в блоки для стилизации.

Примеры (для середины школьной подготовки)

1. Базовый вариант

• Используйте только src и alt.
• Пример кода:

2. Вариант с явными размерами

• Это заставит браузер отобразить изображение размером 400x300 пикселей.
• Пример кода:

3. Адаптивный вариант (рекомендуется для сайтов и блогов)

• Изображение остаётся внутри ширины контейнера и масштабируется пропорционально.
• Пример кода:

4. С подписью (figure + figcaption)

• Хорошо для презентаций и учебных материалов.
• Пример кода:

  

5. Полный минимальный HTML-документ (для тестирования)

Дополнительные полезные детали

• Атрибут loading: можно использовать loading="lazy" для отложенной загрузки изображения, что экономит трафик и ускоряет загрузку страницы. Пример:
• Если у вас несколько изображений, можно добавить уникальные alt-тексты, чтобы каждый элемент был понятен пользователю и поисковику.
• Не забывайте, что параметры w=400&h=300 в URL задают желаемые размеры изображения на сервере; однако в браузере размеры могут быть изменены стилями CSS или атрибутами width/height.

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