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