URI-схемы (sms:, geo:)

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

Опубликовано 04.04.2025
Просмотры 35
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этом блоке заданий мы изучим специальные URI-схемы, которые позволяют создавать интерактивные ссылки. Вы научитесь делать так, чтобы по клику на ссылку у пользователя открывалось приложение для отправки SMS (схема `sms:`) или карта с указанной точкой (схема `geo:`). Эти навыки полезны для создания контактных данных на сайтах, страниц мероприятий или визиток. Вам предстоит работать с атрибутом `href` тега `<a>` и его параметрами, чтобы ваши ссылки правильно взаимодействовали с приложениями на устройстве пользователя.
Список тем

Простая SMS-ссылка

id: 37810_uri-sms-1

Создайте ссылку, которая при нажатии откроет стандартное приложение для отправки SMS на заранее указанный номер телефона. Текст сообщения пользователь будет вводить самостоятельно.

CSS
.button {
  display: block;
  padding: 12px 15px;
  margin-top: 10px;
  background-color: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-family: sans-serif;
  font-weight: bold;
}
.button:hover {
  background-color: #0056b3;
}
HTML
<a input1="sms:+79991234567" class="button">Написать SMS</a>
Чтобы ссылка стала кликабельной и вела на какой-либо ресурс, используется атрибут `href`. Для инициации SMS-сообщения его значение должно начинаться со схемы `sms:`, за которой следует номер телефона.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ссылка на точку на карте

id: 37810_uri-geo-1

Сделайте ссылку, которая откроет приложение с картой и покажет точку по заданным географическим координатам (широта и долгота).

CSS
.button {
  display: block;
  padding: 12px 15px;
  margin-top: 10px;
  background-color: #28a745;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-family: sans-serif;
  font-weight: bold;
}
.button:hover {
  background-color: #218838;
}
HTML
<a href="input1:55.7558,37.6173" class="button">Показать на карте</a>
Чтобы браузер понял, что нужно открыть карту, используется URI-схема `geo:`. Укажите эту схему в значении атрибута `href` прямо перед координатами.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

SMS с готовым текстом

id: 37810_uri-sms-2

Теперь усложним задачу. Создайте SMS-ссылку, которая не только открывает приложение, но и автоматически вставляет в поле ввода заранее подготовленный текст сообщения.

CSS
.button {
  display: block;
  padding: 12px 15px;
  margin-top: 10px;
  background-color: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-family: sans-serif;
  font-weight: bold;
}
.button:hover {
  background-color: #0056b3;
}
HTML
<a href="sms:+79991234567?input1=Здравствуйте, пишу по вашему объявлению." class="button">Отправить шаблонное SMS</a>
Чтобы добавить текст сообщения в SMS-ссылку, после номера телефона поставьте знак вопроса `?` и используйте параметр `body`. Например: `?body=Ваш текст`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Поиск места на карте по названию

id: 37810_uri-geo-2

Иногда точных координат нет, но есть название объекта. Создайте гео-ссылку, которая будет искать на карте указанное место по его названию.

CSS
.button {
  display: block;
  padding: 12px 15px;
  margin-top: 10px;
  background-color: #28a745;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-family: sans-serif;
  font-weight: bold;
}
.button:hover {
  background-color: #218838;
}
HTML
<a href="geo:0,0?input1=Большой театр, Москва" class="button">Найти Большой театр</a>
Для поиска по названию используется параметр `q` (от слова 'query' - запрос). Его нужно добавить после координат `0,0` через знак вопроса. Например: `geo:0,0?q=Эйфелева башня`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сборка полной SMS-ссылки

id: 37810_uri-sms-3

Закрепим знания. Создайте полноценную ссылку для отправки SMS с нуля, указав тег, атрибут для адреса и правильную URI-схему.

CSS
.button {
  display: block;
  padding: 12px 15px;
  margin-top: 10px;
  background-color: #17a2b8;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-family: sans-serif;
  font-weight: bold;
}
.button:hover {
  background-color: #138496;
}
HTML
<input1 input2="input3:+79219876543" class="button">Связаться с автором</input1>
Вспомните, какой тег используется для создания ссылок. Ему нужен атрибут `href` для указания адреса. Адрес должен начинаться со схемы `sms:`, чтобы система поняла, какое приложение открывать.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Гео-метка для координат

id: 37810_uri-geo-3

Создайте ссылку, которая не только покажет точку на карте по координатам, но и подпишет её указанным названием для удобства пользователя.

CSS
.button {
  display: block;
  padding: 12px 15px;
  margin-top: 10px;
  background-color: #28a745;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-family: sans-serif;
  font-weight: bold;
}
.button:hover {
  background-color: #218838;
}
HTML
<a class="button" href="geo:59.9343,30.3351?input1=Дворцовая площадь">Показать Дворцовую площадь</a>
Чтобы добавить текстовую метку к конкретным координатам, используйте параметр `q`. Он указывается после координат через знак вопроса `?`. Полный формат: `geo:широта,долгота?q=Название метки`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Интерактивная карточка контактов

id: 37810_uri-combined-1

Применим знания на практике. Перед вами карточка компании. Добавьте в кнопки правильные URI-схемы, чтобы пользователь мог написать сообщение или найти офис на карте.

CSS
.card {
  font-family: sans-serif;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.card h3 {
  margin: 0;
}
.card p {
  color: #666;
  margin-top: 4px;
  margin-bottom: 16px;
}
.button {
  display: block;
  padding: 12px;
  margin-top: 10px;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}
.button.sms {
   background-color: #007bff;
}
.button.sms:hover {
   background-color: #0056b3;
}
.button.geo {
   background-color: #28a745;
}
.button.geo:hover {
   background-color: #218838;
}
HTML
<div class="card">
  <img src="https://naytikurs.ru/img/9.png" alt="Логотип компании">
  <h3>Техно-Мир</h3>
  <p>Всегда на связи!</p>
  <a class="button sms" href="input1:+78002000600?body=Хочу задать вопрос">Написать нам</a>
  <a class="button geo" href="input2:55.7495,37.6042?q=Офис Техно-Мир">Найти нас</a>
</div>
Для кнопки 'Написать нам' используйте схему `sms:`. Для кнопки 'Найти нас' используйте схему `geo:`. Не забудьте, что схема идет в самом начале значения атрибута `href`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру