Содержание
Веб-сайты не похожи ни на какие средства коммуникации, которые были до них Одной из главных вещей, которые отличают веб-сайты от предыдущих медиаформатов, таких как печать, радио и даже телевидение, является концепция гиперссылки.
Гиперссылки, также известные как «ссылки», — вот что делает Интернет таким динамичным. В отличие от печатной публикации, которая может ссылаться на другую статью или другой ресурс, веб-сайты могут использовать эти ссылки для фактической отправки посетителей на другие страницы и ресурсы. Никакая другая среда вещания не может сделать это. Вы можете услышать рекламу по радио или посмотреть по телевизору, но нет гиперссылок, которые могли бы привести вас к компаниям в этих объявлениях так, как это легко может сделать веб-сайт. Ссылки действительно являются удивительным средством общения и взаимодействия.
Часто ссылки, которые можно найти на веб-сайте, представляют собой текстовый контент, который направляет посетителей на другие страницы этого же сайта. Навигация по сайту является одним из примеров текстовых ссылок на практике, но ссылки не обязательно должны быть основаны на тексте. Вы также можете легко связать изображения на вашем сайте. Давайте посмотрим, как это делается, а затем несколько случаев, когда вы захотите использовать гиперссылки на основе изображений.
Как связать изображение
Первое, что вам нужно сделать, это поместить само изображение в ваш HTML-документ. Обычное использование ссылки на основе изображения — это изображение логотипа сайта, которое затем возвращается на домашнюю страницу сайта. В нашем примере кода ниже файл, который мы используем, является SVG для нашего логотипа. Это хороший выбор, поскольку он позволяет масштабировать наше изображение для разных разрешений, сохраняя при этом качество изображения и небольшой общий размер файла.
Вот как бы вы разместили свое изображение в HTML-документе:
Вокруг тега изображения вы должны добавить ссылку привязки, открывая элемент привязки перед изображением и закрывая привязку после изображения. Это похоже на то, как вы бы связывали текст, но вместо того, чтобы обернуть слова, которые вы хотите связать с тегами привязки, вы оборачиваете изображение. В приведенном ниже примере мы ссылаемся на домашнюю страницу нашего сайта, которая называется index.html.
При добавлении этого HTML-кода на страницу не ставьте пробелов между тегом привязки и тегом изображения. Если вы это сделаете, некоторые браузеры добавят маленькие галочки рядом с изображением, что будет выглядеть странно.
Изображение логотипа теперь также будет действовать как кнопка домашней страницы, которая в наши дни является в значительной степени веб-стандартом. Обратите внимание, что мы не включаем никакие визуальные стили, такие как ширина и высота изображения, в нашу HTML-разметку. Мы оставим эти визуальные стили CSS и будем поддерживать четкое разделение структуры HTML и стилей CSS.
Как только вы дойдете до CSS, стили, которые вы пишете для этого логотипа, могут включать в себя изменение размера изображения, в том числе адаптивные стили для изображений, удобных для нескольких устройств, а также любые визуальные элементы, которые вы хотите добавить к изображению / ссылке, такие как границы или CSS падающие тени Вы также можете указать свое изображение или ссылку на атрибут класса, если вам нужны дополнительные «крючки» для использования со своими стилями CSS.
Варианты использования для ссылок на изображения
Так что добавить ссылку на изображение довольно просто. Как мы только что видели, все, что вам нужно сделать, это обернуть изображение соответствующими тегами привязки. Ваш следующий вопрос может быть: «Когда бы вы на самом деле сделали это на практике, помимо вышеупомянутого примера с логотипом / ссылкой на домашнюю страницу?»
Вот несколько мыслей:
- Миниатюры изображений в галерее, которые ссылаются на более крупные версии этих изображений.
- Изображения, которые используются отдельно для представления контента, например фотографии продуктов для веб-сайта электронной коммерции.
- Изображения-тизеры, которые являются частью другого контента, например статьи блога или пресс-релиза, побуждают людей заметить, что контент дает им целевую область, которую можно нажать или щелкнуть, чтобы прочитать статью полностью.
- Изображения значков, которые используются в качестве кнопок для подключения к определенным функциям или страницам на сайте.
- Ссылки в социальных сетях, в которых используются узнаваемые логотипы различных сайтов социальных сетей, которые важны для этого сайта или компании.
- Изображения, используемые в качестве кнопок для определенных функций, таких как отправка форм (обратите внимание на лучшие практики — с точки зрения производительности веб-сайта кнопки, стилизованные исключительно с помощью CSS, являются лучшим выбором, чем кнопки с изображениями).
Напоминание при использовании изображений
Изображения могут играть важную роль в успехе сайта. Один из примеров, приведенных выше, использует изображения вместе с другим контентом, чтобы привлечь внимание к этому контенту и заставить людей читать его.
При использовании изображений вы должны помнить о том, чтобы выбрать правильное изображение для ваших нужд, включая правильное содержание, формат изображения, а также убедиться, что все изображения, которые вы используете на своем сайте, должным образом оптимизированы для доставки на сайт. Это может показаться большой работой только для добавления изображений, но результат того стоит! Изображения действительно могут добавить так много к успеху сайта.
Не стесняйтесь использовать соответствующие изображения на вашем сайте, и связывайте эти изображения, когда это необходимо, чтобы добавить некоторые интерактивные элементы к своему контенту, но также примите во внимание эти рекомендации по использованию изображений и правильно и ответственно используйте эти графические элементы / ссылки в своей работе по веб-дизайну.
