Добавление изображения в html.

Для добавления изображения в веб-страничку в html используется тег img с обязательным атрибутом src . <img src=  ‘ url ‘ > , где url — путь  указывающий на файл с картинкой , которую мы хотим вывести на страничку.

пример: <img src= ‘ http://home-pg.ru/images/cat.jpg ‘ >

результат отображения данного кода в браузере:

котенок , изображение

Вывод картинки с указанием размеров

В теге img можно дополнительно указать ширину и высоту выводимой картинки, используя дополнительно аттрибуты width , height, размеры указываются в пикселах , либо в процентах от размера окна браузера.

пример : <img src= ‘ http://home-pg.ru/images/cat.jpg ‘  width=’200′ height=’150’  >

Результат в браузере будет следующим.

котенок , изображение

Аттрибут Alt , альтернативный текст

у тега img также есть необязательный атрибут alt, в котором можно указать текст, который будет выводиться вместо картинки, если картинка недоступна для загрузки, по определенным причинам, к примеру слабый траффик, либо так настроен браузер.

пример : <img src= ‘ http://home-pg.ru/images/cat.jpg ‘  width=’200′ height=’150′  alt=’милый котенок’ >

alt аттрибут

Выравнивание картинки относительно других элементов

Для указания выравнивания картинки относительно других элементов используется аттрибут align. Он имеет несколько значений, но в основном используются

  • left -выравнивает картину по левому краю, текст обтекает справа от картинки
  • right -выравнивает картинку по правому краю, текст обтекает слева от картинки

Пример

<img src= ‘ http://home-pg.ru/images/cat.jpg ‘  align=’left’> <p>котенок милое существо </p>

котенок , изображение котенок — милое существо


Для того , чтобы прекратить обтекание текста можно использовать тег br. У тега есть аттрибут clear, что означает завершение обтекания. Аттрибут имеет следующие значения

  • left -завершает обтекание текста картинки, выровненной по левому краю
  • right -завершает обтекание текста картинки, выровненной по правому краю
  • all — завершение обтекания текстом.

Отступы вокруг картинки

Обычно по умолчанию , текст отображается вплотную к картинкам. Для того чтобы были отступы от картинки нужно использовать следующие аттрибуты

  • vspace -вертикальный отступ от картинки
  • hspace -горизонтальный отступ от картинки

пример  <img src= ‘ http://home-pg.ru/images/cat.jpg ‘  align=’left’  hspace=’10’> <p>котенок милое существо </p>

В результате браузер выведет
котенок , изображение котенок — милое существо

 

Вывод картинки с обрамлением

Для вывода рамки вокруг картинки используется аттрибут border , с числовым значением в пикселах, которое определяет тольщину рамки.

Пример

<img src= ‘ http://home-pg.ru/images/cat.jpg ‘  border=’10’>

В браузере мы увидим следующее:

На этом мы завершим статью о выводе картинки на Html




Язык HTML. Содержание

Medicine Ratings and Health Care Opinions: JoshGoldfaden.com

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *