HTML тег <img>
В интернете трудно найти сайт, который бы не содержал изображений, и это не удивительно, ведь изображения - это основная часть дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта - залог его успешного развития. Синтаксис тега <img>:
<img alt="Описание изображения" src="URL">
Данный тег является одиночным и не требует закрывающего тега. У него есть один важный атрибут src, которому присваивается адрес изображения. Приведем пример на html.
Пример 1. Использование тега <img>.
|
<body>
...
<img src=http://www.zarabotkii.ru/uroki/8.jpg>
...
</body>
|
Этот код преобразуется на странице в следующее:
Возможно размещение нескольких картинок подряд.
Пример 2. Вывод нескольких картинок друг за другом через <img>.
|
<body>
...
<img src=http://www.zarabotkii.ru/uroki/8.jpg>
<img src=http://www.zarabotkii.ru/uroki/9.jpg>
...
</body>
|
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.
Теперь рассмотрим подробно все атрибуты тега <img>.
Атрибуты тега img
1) align="параметр" - определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
→ left - выравнивание по левому краю
→ middle - выравнивание середины изображения по базовой линии текущей строки
→ bottom - выравнивание нижней границы изображения по окружающему тексту
→ top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
→ right - выравнивание по правому краю
2) alt="текст" - подсказка/описание картинки. Выполняет сразу две важные функции:
→ выдает подсказку при наведении
→ если в браузере отключены изображения, то выводится этот текст.
Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению.
3) border="ЧИСЛО" - задает толщину рамки обтекающей изображение.
4) bordercolor="цвет" - задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border имеет значение больше 0.
5) height="ЧИСЛО" - задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а высоту укажем 150 пикселей, то оно сжимается до 300х150, т.е. пропорционально.
6) width="ЧИСЛО" - задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется до 1200х960.
7) hspace="ЧИСЛО" - задает горизонтальный отступ изображения в пикселях от других объектов html.
8) vspace="ЧИСЛО" - задает вертикальный отступ изображения в пикселях от других объектов html.
9) class="имя_класса" - можно присвоить класс изображению, чтобы задать определенный стиль всем изображениям этого класса.
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.
Ссылка на следующий урок: Урок 8. HTML тег form - подробное описание с примерами
← Перейти в каталог html уроков и советов
|
