Для добавления изображения в веб-страничку в 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='милый котенок' >
Выравнивание картинки относительно других элементов
Для указания выравнивания картинки относительно других элементов используется аттрибут 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
Оставить комментарий