03:55 Урок 7 - HTML тег <img>, атрибуты img. Картинки на сайте через html, примеры | |
HTML тег <img>В интернете трудно найти сайт, который бы не содержал изображений, и это не удивительно, ведь изображения - это основная часть дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта - залог его успешного развития. Синтаксис тега <img>: <img alt="Описание изображения" src="URL"> Данный тег является одиночным и не требует закрывающего тега. У него есть один важный атрибут src, которому присваивается адрес изображения. alt - не является обязательным, но я рекомендую прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем. Приведем пример на html. Пример 1. Использование тега <img> <body> ... <img src="http://img-fotki.yandex.ru/get/4423/29308795.36/0_6078a_76f36193_M.jpg"> ... </body> Этот код преобразуется на странице в следующее: В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной странице, то произойдет переход на следующую строку. Пример 2. Вывод нескольких картинок друг за другом <body> ... <img src="http://img-fotki.yandex.ru/get/4423/29308795.36/0_6078a_76f36193_M.jpg"> <img src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ... </body> Преобразуется на странице в следующее: Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось. Теперь рассмотрим подробно все атрибуты тега <img>. Атрибуты тега img1) align="параметр" - определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
Например: выравнивание изображения по правому краю <body> ... <img align="right" src="http://img-fotki.yandex.ru/get/4423/29308795.36/0_6078a_76f36193_M.jpg"> ... </body> Преобразуется на странице в следующее: 2) alt="текст" - подсказка/описание картинки. Выполняет сразу две важные функции:
Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов ранжирования в поисковых системах. 3) border="ЧИСЛО" - задает толщину рамки обтекающей изображение. Измеряется в пикселях. 4) bordercolor="цвет" - задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0. 5) height="ЧИСЛО" - задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально. 6) width="ЧИСЛО" - задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960. 7) hspace="ЧИСЛО" - задает горизонтальный отступ изображения в пикселях от других объектов html. 8) vspace="ЧИСЛО" - задает вертикальный отступ изображения в пикселях от других объектов html. Примечание Вместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:
Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0. Например: <body> ... <img style="margin-top:10px; margin-left:50px" src="http://img-fotki.yandex.ru/get/4423/29308795.36/0_6078a_76f36193_M.jpg"> ... </body> Преобразуется на странице в следующее: В данном примере - отступ сверху составил 10 пикселей, слева 50 пикселей. 9) class="имя_класса" - можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса. Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку. Ссылка на следующий урок: Урок 8. HTML тег form - подробное описание с примерами | |
| Категория: Все о сайтах | Просмотров: 331 | | |
| Всего комментариев: 0 | |