Создай лендинг бесплатно
Лендинг бесплатно
Как сделать ссылку на изображение: простой пример 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. Так ваше фото станет ссылкой.
В каких случаях нужна ссылка на изображение:
· Сделать пост в социальной сети.
· Поделиться фоткой.
· Можно узнать папку, где лежат изображения на сайте.
· Разместить фото со стороннего ресурса, не загружая на свой сайт. Это не очень хорошо для продвижения, но иногда бывает нужно.
Нажмите правой кнопкой на фото и выберите «Скопировать адрес ссылки».