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

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

Приветствую вас уважаемые читатели abrek-ad-abra.ru, сегодня мы разберёмся с вами в вопросе, как вставить изображение в html страницу. Нужно признаться, что изначально я планировал сегодня вам рассказать о том, как сделать изображение обтекаемое текстом, но после небольшого анализа пришёл к выводу, что не все начинающие веб мастера вообще знают, как вставлять картинку в html и поэтому решил, что для начала разумней будет написать об этом, если у вас также не получается вставить картинку в html, то данная статья как раз для вас.

И так давайте подробней рассмотрим, как же вставить картинку в html код.

Для вставки картинки в html страницу нам необходимо использовать специальные теги: «img», данный тег сообщает браузеру, что далее следует вывод картинки и тег «Src» из содержания которого и будет взято необходимое изображение.

В теге «Src» мы можем задавать, как полный путь к необходимой картинке так и относительный.

Полный путь к вставляемой в html картинке:

<img src="https://abrek-ad-abra.ru/папка/название_картинки">

При использовании данного способа изображение может быть взято с какого угодно сервера, то есть вовсе необязательно это должен быть ваш хостинг, вы можете скопировать ссылку на картинку с какого угодно ресурса например с этого и вставить её на свой.

Относительные пути к изображению:

<img src="foto.jpg">

Или так:

<img src="папка/foto.jpg">

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

Дополнительно к уже упомянутым тегам мы можем прописать в коде изображения вставляемого в html, теги определяющие размер изображения: «Width» ширина и «Height» высота например так:

<img src="путь до файла" width="ширина в пикселах" height="высота в пикселах">

И конечно нельзя не упомянуть о двух атрибутах, как: «Title» и «Alt».

Из которых «Title» служит как своего рода появляющаяся текстовая подсказка или дополнение при наведении курсора на картинку и «Alt» информация находящаяся в данном атрибуте выводится браузером если по каким либо причинам картинка не была загружена. Также в его содержание часто прописываются ключевые слова, что в свою очередь способствует продвижению ресурса в поисковой выдачи по этим ключевым фразам.

<img src="foto.jpg" width="300" height="300" title="описание" alt="альтернативное описание">

Также мы можем выводимую в html странице картинку сделать ссылкой, для этого прописываем:

<a href="https://abrek-ad-abra.ru/"><img src="foto.jpg" width="300" height="300" title="описание" alt="альт-описание"></a>

И определить его расположение с помощью атрибута «align», давайте вкратце пробежимся по его основным значениям.

«align-left» — в данном случае графика у нас с вами будет расположено по левому краю от текста.

<a href="https://abrek-ad-abra.ru/"><img src="путь" align="left" width="ширина" height="высота" title="описание" alt="альтернативное описание"></a>

«align-right» — изображение справа текст соответственно слева.

«align-bottom» — графика расположена сверху текста, такое же расположение картинки будет назначено по умолчанию если атрибут «align» не используется вовсе.

«align-middle» — при данном значении текст будет расположен ровно по центру изображения, данное значение в основном используется для вставки довольно маленьких изображений не превышающих размера строки, например для вставки смайлов.

«align-top» — в данном случае изображение будет вставлена ниже текста.

Вот основные базовые параметры которые вы можете использовать для вставки картинок в html страницу, дополнительные возможности нам открываются при использовании CSS стилей, о чём и пойдёт речь в нашей следующей статье. Подпишитесь на обновления, чтобы не пропустить. Я же на сегодня с вами прощаюсь желаю всего доброго до новых встреч!

Вам также может понравиться

Как сделать на своём сайте скачивание файлов

Как сделать на своём сайте скачивание файлов

Как заработать на блоге

Как заработать на блоге

Исходящие ссылки сайта что такое и как их найти

Исходящие ссылки сайта что такое и как их найти

ID страницы wordpress, способы определения и дальнейшее использование

ID страницы wordpress, способы определения и дальнейшее использование