Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
3 г. назад

Интересные примеры работы с HTML-ссылками на сайте

Ссылка в вебе - это, наверное, самый распространенный элемент. Ссылки есть на всех сайтах. Вот, хочу немного поделиться небольшой информацией о том, что можно сделать, используя HTML-разметку и, конечно, тег <a>. Начнем с определения.

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от наличия атрибутов name или href, тег <a> устанавливает ссылку или якорь.

Пример №1. Гиперссылка.

<a href="http://site.ru" title="Ссылка на какой-то сайт">Сайт</a>

Все просто, тут мы говорим пользователю, куда будет переход, если кликнуть на ссылку сайт. Не забываем использовать параметр title, он добавляет всплывающую подсказу. В таком виде ссылка будет валидна.

Пример №2. Якорь.

<a href="#body" title="Ссылка на какой-то сайт">Сайт</a>

или

<a href="http://site.ru#body" title="Ссылка на какой-то сайт">Сайт</a>

При такой ссылке в первом случае браузер проскроллится к элементу сайта с идентификатором id="body", а во втором случае сначала перейдет на страницу http://site.ru, а потом уже проскроллится к элементу сайта с идентификатором id="body".

Пример №3. Гиперссылка для отправки e-mail.

<a href="malito:mail{at}yandex.ru?subject=Feedback&body=Тело20письма&cc=copy{at}yandex.ru&bcc=hiddencopy{at}yandex.ru" title="Ссылка на какой-то сайт">Сайт</a>

Этот вариант, конечно, немного сложнее, но зато можно через параметр mailto, пользователю создать уже заполненное письмо. Для этого есть удобные параметры: subject, body, cc и bcc. О них подробнее:

    • subjectТема письма. Следует учесть, что некоторые почтовые программы (The Bat, к примеру) не воспринимают пробелы в значении этого поля. Поэтому нужно заменять знаки пробелов на подчёркивание или %20: mailto:mail{at}yandex.ru?subject=Feedback_from_My_Site или mailtomail{at}yandex.ru?subject=Feedback%20from%20My%20Site
    • body – В этом поле можно задать текст самого письма. Зачастую этот метод используется в ситуации, когда от посетителя сайта требуется сообщить вам об ошибке Error 404. В этом случае вы сами заполняете текст письма, указав, если нужно, страницу, которую запросил пользователь (её можно получить из серверной переменной $REQUEST_URL). Например: mailto:mail{at}yandex.ru?subject=Error404&body=/mypage.php.
      Перевод строки можно задать с помощью %0A.
    • cc – Этот параметр задаёт копию письма. Пример: mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ?сс= Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript .
    • bcc – Если же вы хотите, чтобы кому-то отправлялась скрытая копия письма, то укажите этот параметр: mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ?bсс= Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript .

Кстати, параметры эти необязательные.

Теперь будут два весьма изысканных метода использования ссылок в HTML. Первые три метода абсолютно уверенно работают во всех браузерах. Следующие два работают только на мобильных устройствах, которые имеют модуль сотовой связи.

Пример №4. Ссылка «телефонный звонок» в мобильных браузерах.

Некоторые браузеры распознают номера телефонов и подчеркивают их. Если кликнуть, то есть коснуться этой ссылки в телефоне, то произойдет набор номера. К сожалению, я пока не нашел идеального решения для форматирования номера, зато нашел, как можно просто сверстать ссылку типа «телефонный звонок»:

<a href="tel:+1234567890"> Звоните нам бесплатно! </ a> 

Такая простая ссылка выделит номер телефона в любом виде. К сожалению, десктоп-браузеры не знают такой тег, при этом он еще и не проходит валидацию. Для этого делаем простую проверку с помощью mobiledetect.net.

lt;?php if ($this->params->get("telephone")&& ($deviceType == 'phone')) {?>
      <div class="h_telephone">Телефон: <a href="tel:<?php echo $this->params->get("telephone");?>"><?php echo $this->params->get("telephone");?></a></div>
<?php  } else { ?>
      <div class="h_telephone">Телефон: <b><?php echo $this->params->get("telephone");?></b></div>
<?php } ?>

Пример №5. Ссылка «отправить sms» в мобильных браузерах.

Как и в предыдущем примере, отправка смс работает только на мобильных устройствах, имеющих модуль сотовой связи. Сразу перейду к примерам:

<a href="sms:12345678">SMS для 12345678</a>
<a href="sms:12345678?body=Привет мой друг. Как дела?">Отправить sms другу</a>
<a href="sms:123456789,+123456780?body=Привет. Как дела?">Отправить sms нескольким друзьям.</a>

Пример №6. CSS-стилизация/оформление ссылок. Псевдоселекторы.

Конечно, без верстки тут тоже не обойдется. У ссылки есть четыре состояния: активная, наведение, клик и посещенная. Каждое из них можно оформить, желательно всегда уделять этому время. Пользователю будет легче перемещаться по сайту.

  • a {} — Стиль ссылки по умолчанию.
  • a:visited {} — Стиль для посещенной ссылки.
  • a:active {} — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
  • a:hover {} — Стиль для ссылки при наведении на нее мышью.

Пример №7. Оформление внешних ссылок на сайте с помощью CSS.

Порою не хочется мучиться с заданием классов для внешних ссылок на сайте. Это можно упростить, используя селекторы:

a[href^="http:"] {}

Этот код означает, что все ссылки с атрибутом href, начинающимся с http: будут иметь стили, присвоенные в данном правиле. Обратите внимание, что если внутренняя ссылка на какой-нибудь странице сайта будет начинаться с http, то он тоже будет выделена.

Источники:

  1. http://html5.by/blog/category/mobile/
  2. http://htmlcssjs.ru/HTML/?13
  3. http://htmlbook.ru/content/tsvet-ssylok
  4. http://dotrb.blogspot.ru/2008/11/css-external-links-design.html

Добавить комментарий

Наверх