Найти в Дзене

Тема 2. Как сделать ссылки в HTML?

Эта тема охватывает все аспекты создания ссылок — от простых гиперссылок до ссылок для email и телефонных номеров, а также стилизации ссылок, чтобы они выглядели как кнопки. <a href="https://example.com">Перейти на Example</a> <a href="https://example.com" target="_blank" title="Открыть Example в новой вкладке">Example</a> <a href="mailto:info@example.com">Отправить email</a> <a href="tel:+1234567890">Позвонить</a> <a href="https://example.com" class="btn">Кнопка-ссылка</a>
<style>
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4285f4;
color: white;
text-decoration: none;
border-radius: 5px;
}
.btn:hover {
background-color: #357ae8;
}
</style>
Оглавление

Эта тема охватывает все аспекты создания ссылок — от простых гиперссылок до ссылок для email и телефонных номеров, а также стилизации ссылок, чтобы они выглядели как кнопки.

2.1. Как сделать простую гиперссылку?

Пример кода:

<a href="https://example.com">Перейти на Example</a>

Подробный разбор:

  • <a href="https://example.com">
    Тег <a> создаёт ссылку, а атрибут href задаёт адрес назначения.
  • Текст ссылки:
    То, что видит пользователь и на что он кликает.

Советы:

  • Используйте понятные и описательные тексты для ссылок.
  • Проверяйте правильность URL, чтобы избежать битых ссылок.

2.2. Как сделать ссылку с открытием в новой вкладке?

Пример кода:

<a href="https://example.com" target="_blank" title="Открыть Example в новой вкладке">Example</a>

Подробный разбор:

  • target="_blank"
    Заставляет ссылку открываться в новой вкладке браузера.
  • title="..."
    Добавляет всплывающую подсказку при наведении курсора.

Советы:

  • Для повышения безопасности используйте атрибуты rel="noopener noreferrer".
  • Используйте ссылки с target="_blank" для внешних сайтов, чтобы не потерять пользователя.

2.3. Как сделать ссылку для отправки email?

Пример кода:

<a href="mailto:info@example.com">Отправить email</a>

Подробный разбор:

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

Советы:

  • Убедитесь, что email-адрес указан корректно.
  • Можно добавить subject и body в URL для предзаполнения письма.

2.4. Как сделать телефонную ссылку?

Пример кода:

<a href="tel:+1234567890">Позвонить</a>

Подробный разбор:

  • tel:
    Протокол, позволяющий запустить телефонное приложение на мобильных устройствах.
  • Преимущества:
    Особенно полезно для мобильных пользователей, упрощающих связь с компанией.

Советы:

  • Указывайте номер в международном формате для универсальности.

2.5. Как сделать стилизованную ссылку, похожую на кнопку?

Пример кода:

<a href="https://example.com" class="btn">Кнопка-ссылка</a>
<style>
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4285f4;
color: white;
text-decoration: none;
border-radius: 5px;
}
.btn:hover {
background-color: #357ae8;
}
</style>

Подробный разбор:

  • Класс .btn:
    Задает стиль для ссылки, превращая её в кнопку.
  • Свойства CSS:display: inline-block; позволяет элементу иметь размеры.
    padding создаёт внутренние отступы, background-color задаёт цвет фона, border-radius округляет углы.
  • Псевдокласс :hover:
    Изменяет фон при наведении, создавая интерактивный эффект.

Советы:

  • Используйте внешние таблицы стилей для повторного использования оформления кнопок.
  • Старайтесь поддерживать единый стиль ссылок на сайте.