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

Эта тема охватывает все аспекты создания ссылок — от простых гиперссылок до ссылок для 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:
  Изменяет фон при наведении, создавая интерактивный эффект.

Советы:

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