Ссылки на email и телефон [Модуль 3: Ссылки и навигация]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

В этом блоке заданий вы научитесь создавать специальные ссылки для быстрой связи: ссылки для отправки email и для набора телефонного номера. Это фундаментальный навык для создания интерактивных веб-страниц, особенно для разделов с контактами. Вы узнаете, как использовать специальные протоколы `mailto:` и `tel:` внутри стандартного тега `<a>`. Задания построены от самого простого, где нужно создать базовую ссылку, до более сложных, где вы будете добавлять в email-ссылку заранее заготовленные тему и текст письма, а также научитесь применять эти ссылки к иконкам и изображениям. Эта практика позволит вам делать сайты более удобными для пользователей, позволяя им в один клик связаться с вами.

Список тем

Создание простой ссылки на Email

id: 37805_links-mailto-basic-1

Ваша первая задача — создать базовую кликабельную ссылку. При нажатии на неё у пользователя должен открываться почтовый клиент по умолчанию с уже вставленным адресом получателя. Обратите внимание на специальный протокол, который нужно использовать в атрибуте `href`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
a {
  color: #007bff;
  text-decoration: none;
  font-size: 18px;
}
a:hover {
  text-decoration: underline;
}

                     <a href="input1:info@example.com">
  Напишите нам на почту
</a>

HTML

<a href="input1:info@example.com">
  Напишите нам на почту
</a>

Для создания ссылки на электронную почту используется протокол `mailto:`, который ставится перед email-адресом в значении атрибута `href`. Пример: `<a href="mailto:user@example.com">Написать</a>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Создание простой ссылки на телефон

id: 37805_links-tel-basic-2

Теперь создайте ссылку, при клике на которую (особенно на мобильных устройствах) будет предложено позвонить по указанному номеру. Для этого также используется специальный протокол, но уже другой.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
a {
  color: #28a745;
  text-decoration: none;
  font-size: 18px;
}
a:hover {
  text-decoration: underline;
}

                     <a href="input1:+74951234567">
  Позвонить нам
</a>

HTML

<a href="input1:+74951234567">
  Позвонить нам
</a>

Для создания ссылки для набора телефонного номера используется протокол `tel:`, который ставится перед номером телефона в атрибуте `href`. Номер телефона следует писать без пробелов и дефисов, начиная с кода страны. Пример: `<a href="tel:+79991234567">Позвонить</a>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Заполнение атрибута для email-ссылки

id: 37805_links-mailto-attribute-3

В этом задании вам нужно не только указать протокол и адрес, но и правильно назвать атрибут, который отвечает за адрес ссылки. Допишите недостающий атрибут, чтобы ссылка стала рабочей.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
a {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
}
a:hover {
  background-color: #0056b3;
}

                     <a input1="mailto:support@example.com">
  Служба поддержки
</a>

HTML

<a input1="mailto:support@example.com">
  Служба поддержки
</a>

Любая ссылка, будь то веб-страница, email или телефон, использует атрибут `href` для указания адреса назначения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Email-ссылка с темой письма

id: 37805_links-mailto-subject-4

Усложним задачу. Сделайте так, чтобы при клике на ссылку не только открывался почтовый клиент с адресом, но и автоматически подставлялась тема письма. Это делается с помощью специального параметра в `href`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
a {
  color: #dc3545;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}

                     <a href="mailto:order@example.com?input1=Заказ%20с%20сайта">
  Оформить заказ по почте
</a>

HTML

<a href="mailto:order@example.com?input1=Заказ%20с%20сайта">
  Оформить заказ по почте
</a>

Чтобы добавить тему письма, после email-адреса нужно поставить знак `?` и написать параметр `subject=ВАША_ТЕМА`. Пробелы в теме письма кодируются как `%20`, но браузеры чаще всего делают это автоматически. Пример: `href="mailto:info@example.com?subject=Вопрос по товару"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Email-ссылка с темой и текстом

id: 37805_links-mailto-body-5

Теперь давайте добавим еще и текст письма по умолчанию. Это полезно, когда вы хотите, чтобы пользователь отправил письмо по определенному шаблону. Для этого используется еще один параметр, который добавляется после темы.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
a {
  color: #17a2b8;
  text-decoration: none;
  font-size: 18px;
}
a:hover {
  text-decoration: underline;
}

                     <a href="mailto:hr@example.com?subject=Отклик%20на%20вакансиюinput1body=Добрый%20день,%20меня%20заинтересовала%20ваша%20вакансия.">
  Откликнуться на вакансию
</a>

HTML

<a href="mailto:hr@example.com?subject=Отклик%20на%20вакансиюinput1body=Добрый%20день,%20меня%20заинтересовала%20ваша%20вакансия.">
  Откликнуться на вакансию
</a>

Для добавления текста письма используется параметр `body`. Если вы добавляете его после `subject`, то параметры нужно разделить знаком амперсанда `&`. Пример: `href="mailto:info@example.com?subject=Вопрос&body=Здравствуйте,..."`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Изображение как ссылка для звонка

id: 37805_links-tel-image-6

Любой элемент можно сделать ссылкой, включая изображения. В этом задании вам нужно обернуть иконку телефона в тег ссылки, чтобы при клике на картинку предлагался звонок по номеру.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  text-align: center;
}
img {
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.2s;
}
img:hover {
  transform: scale(1.1);
}

                     <input1 href="tel:+78005553535">
  <img src="https://naytikurs.ru/img/8.png" alt="Позвонить">
</input1>

HTML

<input1 href="tel:+78005553535">
  <img src="https://naytikurs.ru/img/8.png" alt="Позвонить">
</input1>

Чтобы сделать картинку ссылкой, нужно поместить тег `<img>` внутрь тега `<a>`. Атрибут `href` при этом задается для тега `<a>`. Пример: `<a href="tel:+79991234567"><img src="path/to/icon.png"></a>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Комплексная карточка контактов

id: 37805_links-mailto-tel-complex-7

Финальное задание. Создайте небольшую карточку контактов с двумя ссылками: одна для email, другая для телефона. Вам нужно правильно заполнить пропущенные атрибуты и протоколы, чтобы обе ссылки работали корректно.

CSS

body {
  font-family: sans-serif;
}
.contact-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  max-width: 300px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.contact-card h3 {
  margin-top: 0;
}
.contact-card p {
  margin: 10px 0;
  font-size: 16px;
}
.contact-card a {
  color: #007bff;
  text-decoration: none;
}
.contact-card a:hover {
  text-decoration: underline;
}

                     <div class="contact-card">
  <h3>Свяжитесь с нами</h3>
  <p>
    Почта: 
    <a input1="input2:manager@example.com">
      manager@example.com
    </a>
  </p>
  <p>
    Телефон: 
    <a href="input3:+79111111111">
      +7 (911) 111-11-11
    </a>
  </p>
</div>

HTML

<div class="contact-card">
  <h3>Свяжитесь с нами</h3>
  <p>
    Почта: 
    <a input1="input2:manager@example.com">
      manager@example.com
    </a>
  </p>
  <p>
    Телефон: 
    <a href="input3:+79111111111">
      +7 (911) 111-11-11
    </a>
  </p>
</div>

Вспомните все, что вы прошли. Для email-ссылки используется протокол `mailto:` в атрибуте `href`. Для телефонной ссылки — протокол `tel:`, также в атрибуте `href`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку