subscribe
arrow
К списку статей

Ссылки на изображения. Как картинки появляются на сайтах.

12.01.21
1222 просмотров
Создание страницы
Сегодня практически на любой странице в Интернете можно увидеть различные картинки. Давайте разберемся как собственная ссылка на изображение или фото может быть размещена на сайте.
сервис для хранения фото
Сервисы для хранения обычно предлагают:
— загрузку картинок формата jpg, png, bmp, gif и других в зависимости от самого ресурса
— хранение на сервисе ограниченное/неограниченное время
— генерацию кодов HTML и BBCode для загрузки изображений на сайты, форумы
Хостинги обеспечивают конфиденциальность информации. Пользователь сам решает, кому открыт доступ к фото, значит, они не всплывают в общем поиске картинок.

HTML ссылка на фото

Вставить картинку на сайт с помощью ссылки через HTML можно, используя тег img и атрибут src. Код будет выглядеть:
<img src="адрес_картинки" />, где адрес_картинки - путь к файлу, т.е. url-адрес фото. С таким кодом вокруг изображения будет автоматически создаваться рамка толщиной в 1 пиксель, соответствуя цвету текстовых ссылок.

Уберите рамку, добавив атрибут border="0". При использовании CSS стилевое свойство "border" примет значение "none": A IMG { border: none; }. Такой стиль уберет рамку для изображений, находящихся только под тегом <img>.

<img> отобразит на странице изображение, не ссылаясь на другие документы.
Вставить HTML ссылку на фото и сделать его кликабельным можно, заменив тег <img> на <a> с атрибутом href, подразумевающим переходную ссылку на страницу. Вид кода: <a href="адрес_страницы"><img src="адрес_картинки" /></a>. Здесь "адрес_страницы" - URL к документу, на который перейдет пользователь кликнув на фото. URL-адрес будет сгенерирован в виде ссылки на сервисе, где хранятся ваши фотографии. Т.е. она должна быть размещена в Интернете в облачном хранилище, а не на компьютере.
Если вы хотите открыть ссылку на фото с соседнем окне, добавьте к href атрибут target="_blank":

<a href="адрес_страницы" target="_blank"><img src="адрес_картинки" /></a>

ссылка на фото с помощью html и css

Использование CSS

Ссылка на фото добавляется и через свойство CSS - background (background-image). К элементу div добавляем тег <a> и class. Обращаясь через класс к группе элементов, проще управлять стилистикой.
<div class="box-image">
<a href="адрес_страницы" class="link-image"></a>
</div>
Прописывая правила классу box-image и link-image вставляем фото через атрибут background-image:
background-image: url("адрес_картинки");
Добавление ссылки на фото - возможности HTML, даже при использовании инструментов CSS, мы добавляем теги html внутри div.

Ссылки с картинками в социальных сетях

В соцсетях и мессенджерах часто встречаются кликабельные изображения-ссылки с небольшим описанием под ними, вместо пустого URL-адреса. Такой вывод фото получается при использовании разметки Open Graph. При использовании различных систем управления сайтами и установке плагинов, параметры для вывода Open Graph определяются автоматически или прописываются создателем. Когда точной настройки не было, вывод картинки может произойти без установки плагина или разметки и быть некорректным. Соцсеть берет любую картинку с сайта, тайтл и описание страницы. Такой вывод не всегда удачен и красив, поэтому лучше установить плагины, настраивающие разметку Open Graph. 
разметка изображения с помощью open graph
Для лендингов и одностраничников проще установить стандартные настройки отображения главной страницы. Добавьте теги:
<meta property="og:title" content="_заглавие_страницы_title_">
<meta property="og:site_name" content="_название_сайта_">
<meta property="og:url" content="_сссылка_на_лендинг_">
<meta property="og:description" content="_описание_description_">
<meta property="og:image" content="_cсылка_на_картинку_логотип_лендинга_">
Использование ссылки на фото с помощью разметки позволит более удачно продвигать сайт через социальные сети. Подробнее о создании лендингов на сервисе Хиполинк можно прочитать здесь.
Коментарии к статье
Доступно для ввода 0 из 700 символов
Оставить коментарий