Если вы создаете тексты для интернет-изданий, то встреча с гиперссылками довольна частая, поэтому продолжим освещение вопросов, которые возникают у пользователей: как создать гиперссылку на электронную почту, как удалить все гиперссылки в документе сразу все и «одним движением» (как мы любим), как можно настроить автоматическое создание гиперссылки в документе? Узнаем, как создать или перенести копию гиперссылки (анкор) на новое место? Для этого читаем статью до конца, чтобы не упустить интересное и полезное. А ваш лайк греет мне душу 🙂 Ранее уже писала о том, что такое гиперссылка, как их создавать внутри документа и на внешние документы, об этом можно посмотреть в статьях и виде.
- Гиперссылки в Word: как создать гиперссылку на документ, веб-страницу. Выбираем способ
- Как сделать гиперссылку в Word на текст (место) в документе: самый быстрый способ
- Видео: как «одним движением» создать гиперссылку на текст в этом же документе Word, не открывая никаких окон и меню?
Как создать гиперссылку на электронную почту?
В случае создания гиперссылки на электронную почту, Email. пользователь при нажатии на нее будет переходить в свое почтовое приложение, например, Outlook и в строке Кому будет иметь «подставленный электронный адрес». Как создать такую ссылку?
Как вставить кликабельную ссылку на файл в сообщение Outlook. Несколько секретов.
Порядок действий:
1. В окне открытого документа выделяем на странице фрагмент текста, символ или графический объект, к которому будет привязана гиперссылка.
2. Щелкаем правой кнопкой по выделению.
3. В контекстном меню выбираем пункт «Гиперссылка».
Источник: dzen.ru
Как сделать ссылку на адрес электронной почты?
При щелчке по такой ссылке открывается почтовая программа по умолчанию. Если подобные ссылки ещё не открывались, то операционная система выведет окно со списком программ (рис. 1).
Рис. 1. Список программ для открытия адреса электронной почты
По своему виду такая ссылка ничем не отличается от обычных ссылок на сайты. Чтобы пользователь их как-то различал можно использовать следующие рекомендации.
В тексте ссылки дать адрес.
Написать пояснение в тексте.
Добавить символ почты до или после текста ссылки с помощью свойства content и псевдоэлемента ::before или ::after, как показано в примере 1. Чтобы иконка работала только с нужными ссылками, мы используем селектор a[href^=»mailto»] , он будет применять стиль только к элементам , у которых атрибут href начинается с mailto .
Пример 1. Иконка после адреса
Результат данного примера показан на рис. 1. Иконка взята с сайта utf8icons.com.
Как сделать ссылку на почту. Кликабельная почта
Рис. 1. Иконка после адреса почты
См. также
- content
- quotes
- relative и absolute
- text-decoration-skip-ink
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибуты ссылок
- Добавление тени
- Использование :hover
- Наследование в CSS
- Не только текст
- Очистка float
- Подробнее о позиционировании
- Псевдоэлемент ::after
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Создание ссылок
- Ссылки
- Ссылки
- Ссылки в HTML
- Якоря
Источник: webref.ru
Как использовать ссылки mailto: и tel:
Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.
Такие форматы ссылок поддерживаются всеми браузерами, так что вы можете по необходимости использовать их в своих проектах не переживая, что где-то они не сработают.
mailto:
Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto: , после которого указывается адрес почты. Это самый простой вариант.
Текст письма указывается с помощью параметра body .
За тему письма отвечает параметр subject .
Можно даже указать кого-то в копии, для этого используются параметры cc и bcc .
Что произойдёт, если кликнуть на ссылку с mailto
Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:
Если почтовая программа по умолчанию не установлена, появится окно выбора программы.
Как стилизовать mailto
Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=»mailto:»] .
a[href^=»mailto:»]
tel:
Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel: .
Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:
Хорошо
В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.
Чуть хуже
В этом случае жители всех городов смогут дозвониться до компании, а короткий номер будет понятен и местным. Случай перейдёт в категорию «плохо», если по сайту непонятно, из какого города компания.
Плохо
Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.
Другое обязательное требование RFC 3966 — номер телефона, указанный в href , должен быть явно виден на странице.
Хорошо
Звоните 8-900-111-11-11 по любому поводу.
Номер видно в тексте ссылки.
Плохо
Звоните по любому поводу.
Номер не видно в тексте ссылки, непредсказуемое поведение.
Что произойдёт, если кликнуть на ссылку с tel
На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще-то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства.
- Android, iOS — откроется звонилка по умолчанию.
- Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
- Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.
Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.
Windows на ноутбуке предложит выбрать, с помощью какой программы открывать ссылки tel:
Как стилизовать
С помощью CSS-селектора a[href^=»tel:»] .
a[href^=»tel:»]
А так можно добавить иконку телефона из Unicode, которая есть во всех системах:
a[href^=»tel:»]:before
Получится такой результат:
Дополнительные материалы по теме
- RFC 6068 — The ’mailto’ URI Scheme
- RFC 3966 — The tel URI for Telephone Numbers
- The Current State of Telephone Links
Ещё о вёрстке
- Как убрать подчёркивание ссылок
- Как сделать список без точек в HTML
- В чём отличие aside и article
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Источник: htmlacademy.ru