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

Как сделать ссылку на изображение: простой пример html-кода

11.04.21
1420 просмотров
Создание страницы
Картинки — не только часть дизайна сайтов. Это инструмент продвижения и дополнительный функционал на сайтах и мини-лендингах. Красивые кнопки, баннеры — это изображение со ссылкой, сделанное при помощи html.
html для фотографий

Виды картинок на сайтах

·  Кнопки
Это картинки, нарисованные в Photoshop. При помощи кодов они совершают какое-то действие (скачать, начать чат, записаться, купить) или направляют пользователя на другую страницу (посмотреть программу курса, войти в комнату вебинара, ).
·  Иллюстрации, инфографика, таблицы, скриншоты, дополняющие текст.
·  Баннеры
Рекламные коллажи, при нажатии происходит переход на другую страницу или новое окно браузера. Переход на страницу услуги, обучающего курса, товара.
·  Фон
Подложка под основными блоками сайта
·  Слайдеры
Карусель картинок, сменяющих друг друга. Обычно вставляются в начале страницы. При нажатии происходит переход на другую страницу.

Само по себе изображение не может совершить действия. Это картинка в формате .jpeg, .jpg, .png. Чтобы изображения работали, а не были просто украшением нужно сделать из них ссылку html.

Как сделать изображение ссылкой  

Для добавления рисунка на HTML-страницу используется тег img от слова «image». Следующий код служит для отображения картинок, которые ни на что не ссылаются.
<img src="http://site.ru/image01.jpg" />
Чтобы изображение стало ссылкой нужно вставить тег img  внутрь ссылки a.
<a href=" site.ru/link-to-page">здесь ссылка на контент</a>
Соедините вместе две строчки:
<a href="site.ru/link"><img src="http://site.ru/image01.jpg" /></a>

Расшифровка кода:

·  src указывает адрес картинки
·  href — адрес сайта, страницы, куда ведет линк.
·  site.ru — замените на ваш домен
·  site.ru/Link ­­— адрес страницы

Разместить изображение c Html

Если вы размещаете фотографии на сайте со своим движком, то они по умолчанию хранятся в определенной назначенной папке, обычно uploads или pictures.
Если вставить картинку строчкой <img src="http://site.ru/image01.png" /> , то оно будет отображено с оригинальным размером, без выравнивания, без тегов.
Ниже шаблон html-кода для аккуратного размещения картинки на странице:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ссылка</title>
</head>
<body>
<p><a href="site.ru"><img src="images/image01.jpg" width="50"
height="50" border="0" alt="Альтернативный текст"></a></p>
</body>
</html>

Html-параметры изображений

Для отображения фотографий с помощью тега IMG используются атрибуты:
·   Width — ширина
·   height – высота
Оба параметра указывают в пикселах (px) или процентах. Значение ="100%" растянет изображение на всю ширину страницы.
·   align – выравнивание: «right» по правому краю, «left» по левому, «center» по центру.
·   border – указывает толщину рамки вокруг рисунка в px. Чтобы окантовки не было указывают border=0.
·   hspace/vspace – отступ от окружающего контента. Чтобы текст не «наезжал» плотно на рисунок, по его периметру добавляют пустое пространство.
Пример html кода с атрибутами:
<img src="http://имясайта.ru/image01.png" width="640" height="480" align="center" border="2" hspace="16" vspace="16" />

Тег изображений

Чтобы картинки помогали продвигать сайт, вписывают теги.
Alt – описание того, что изображено на фото. Если фото не загрузилось из-за низкой скорости интернета, человек увидит альтернативный текст. Прописанные теги любят поисковые роботы — заполняйте их.

Картинки на конструкторе

Если работаете с конструктором сайтов или простой CMS как WordPress, то дополнительные знания кодов не нужны — все делается в редакторе. Чтобы залить фото в статью блога, используют опцию загрузки изображений. В окне загрузки выбираете путь к картинке и публикуете ее. Дополнительно можно прописать теги Title и Alt, вписав ключевые слова. Они помогают продвигать сайт изображениями.

Как обойтись без HTML

В сервисе для создания мини-лендингов Hipolink ссылки из изображений можно делать без знания html.
В блоке «Ссылки» можно сделать кнопку. Справа окно настроек. Здесь можно выбрать:
·  ширину,
·  высоту,
·  скругление углов,
·  цвет,
·  написать текст,
·  вписать url-адрес, телефон, почту,
·  добавить иконку.
Без кодов.

Блок HTML в Hipolink

Если вы хотите создать свой дизайн с нарисованными кнопками, используйте html-модуль.

Свои баннеры в Hipolink

Чтобы разместить фото, баннер, иллюстрацию, которые должны вести пользователя на другую страницу, используйте блок «Фото». Выберите размер изображения, вставьте текст описания, добавьте url. Так ваше фото станет ссылкой.
Модуль «Фото» Hipolnk

В каких случаях нужна ссылка на изображение:

·  Сделать пост в социальной сети.
·  Поделиться фоткой.
·  Можно узнать папку, где лежат изображения на сайте.
·  Разместить фото со стороннего ресурса, не загружая на свой сайт. Это не очень хорошо для продвижения, но иногда бывает нужно.
Нажмите правой кнопкой на фото и выберите «Скопировать адрес ссылки».  
Если потребуется загрузить картинку из Гугл
Коментарии к статье
Доступно для ввода 0 из 700 символов
Оставить коментарий