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

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

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

<img src="https://blogjquery.ru/wp-content/uploads/2016/11/2323423.jpg" >

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

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

<img src="https://blogjquery.ru/wp-content/uploads/2016/11/2323423.jpg" alt="Картинка с морем">

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

<img src="/images/2323423.jpg" alt="Картинка с морем">

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

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

<img src="/images/2323423.jpg" alt="Картинка с морем" style="width: 150px; height: auto;">

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

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

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

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

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

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


Введите капчу: