Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Как вставить изображение в 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 стилей, о чём и пойдёт речь в нашей следующей статье. Подпишитесь на обновления, чтобы не пропустить. Я же на сегодня с вами прощаюсь желаю всего доброго до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-22

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог