Сегодня любой сайт имеет, как минимум несколько картинок для успешного оформления дизайна. Рассмотрим способ вставки картинок через 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кБ). Используйте относительные пути в картинках.
