Как вставить изображение в html страницу

Сегодня любой сайт имеет, как минимум несколько картинок для успешного оформления дизайна. Рассмотрим способ вставки картинок через html код.

Если сразу приступить к решению вопроса, то вам потребуется тег img с атрибутом src, в который вставляется ссылка на картинку. Пример:

Как вы видите, в src указана абсолютная ссылка на картинку с моего сайта. Такие ссылки можно использовать, если вы хотите брать картинки с других сайтов. Однако, это не рекомендуется, хотя бы по той причине, что если пользователь удалит эту картинку, она исчезнет и с вашего сайта. В результате чего у вас будет отображаться пустота.

В этом случае можно использовать тег alt, он покажет текст в том месте где должна была быть картинка, если ее не существует. Например:

Если вы хотите грузить картинки со своего сайта, то сначала загрузите их в директорию на сайте. Например в /images/ В этом случае картинки можно задавать с относительным путем:

Плюс этого метода – картинки не привязаны к домену. Если вы его поменяете, то пути к картинкам не нужно будет переделывать.

Также помните, что любая картинка может иметь полезные css свойства, например:

– задаст ширину картинке в 150px, а высота будет автоподгоняться.

Некторые другие css свойства, которые могут вам пригодиться:

border: 5px solid #0058d9; – синяя рамка в 5px
border-radius: 15px; – скругление углов картинки
float:right; – размещаем картинку справа, например, относительно текста
opacity: 0.7; – прозрачность картинки (сейчас 70%)

Помните, что для установки картинок лучшим вариантом является jpg и png формат. Не грузите картинки слишком большого объема, иначе они будут долго загружаться (не больше 500кБ). Используйте относительные пути в картинках.

Понравилась статья?

Похожие публикации