☛HTML и CSS ✎ |
Для размещения изображений в HTML-документе используется одинарный тег <IMG>. Он имеет обязательный атрибут SRC, значением которого является URL-адрес файла изображения, записанная в абсолютной (полностью) или относительной форме (начиная от текущего каталога, при этом «родительский» каталог обозначают с помощью двух точек и слешу (.. /)). При открытии документа браузер загружает рисунок и отображает его в том месте документа, где расположен тег <IMG>.
Рисунок будет показан на странице в своих реальных размерах. Если есть необходимость в их изменении (масштабировании объекта), новые размеры можно задать с помощью атрибутов WIDTH и HEIGHT, значения которых определяют соответственно ширину и высоту изображения в пикселях. При этом необходимо сохранить пропорции рисунка, иначе он будет иметь вид растянутого или сплюснутого.
Следует также помнить, что иногда пользователи отключают отражения графики в окне браузера, чтобы ускорить загрузку документов. Поэтому, на случай, когда картинки на странице не будет, желательно сообщить, что на нем изображено. Для этого используют альтернативный текст - бильшменш подробное описание изображения, который задают в теге <IMG> как значение специального атрибута ALT. Если браузер не может показать рисунок, он вместо него выводит этот текст.
Рассмотрим HTML-документ, в котором используем рисунок fla-mingo.jpg, где изображены фламинго. В теге <IMG> зададим атрибуты WIDTH, HEIGHT и ALT.
<HTML>
<Тить> Рисунок </ тить>
<BODY BACKGROUND="flamingo.jpg">
<IMG SRC="2.jpg" WIDTH=300 HEIGHT=200 АЬТ =" Фламинго ">
</ BODY>
</ HTML>
Другие статьи по теме:
Михаил Сидоров
15 Января 2026
Отличная статья! Особенно понравился раздел про визуальную иерархию. Обязательно применю эти принципы в своём следующем проекте.