Ссылки: тег <a>, атрибуты href, target, внутренние и внешние ссылки

🌐 Введение в мир ссылок

Ссылки — это кровеносная система интернета. Без них веб-страницы были бы изолированными островами. Тег <a> — твой инструмент для создания гиперссылок, а атрибуты href и target — его настройки.

🔗 Базовый синтаксис: тег `<a>` и атрибут `href`

Тег <a> (anchor — якорь) создаёт кликабельную ссылку. Его главный атрибут — href (hypertext reference), который указывает адрес назначения.

<a href="https://example.com">Посетить Example.com</a>

📌 Как это работает:
- Браузер отображает текст «Посетить Example.com» как кликабельную ссылку.
- При клике пользователь переходит на https://example.com.

🎯 Управление поведением: атрибут `target`

Хотите открыть ссылку в новой вкладке? Используйте target="_blank"!

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

🔍 Варианты target:
- _blank — открывает ссылку в новой вкладке/окне.
- _self — открывает в текущей вкладке (значение по умолчанию).
- _parent — для фреймов: открывает в родительском контексте.
- _top — для фреймов: игнорирует все вложенные структуры.

🏠 Внутренние vs. внешние ссылки

🔗 Внешние ссылки

Ведут на другие сайты. Всегда включают полный URL с протоколом (https://).

<a href="https://google.com" target="_blank">Перейти на Google</a>

🏡 Внутренние ссылки

Ссылаются на страницы внутри вашего сайта. Используют относительные пути.

<!-- Страница в той же папке -->  
<a href="about.html">О нас</a>  

<!-- Страница в подпапке -->  
<a href="blog/post.html">Читать пост</a>  

<!-- Ссылка на якорь (id элемента) -->  
<a href="#section2">Перейти к разделу 2</a>

⚓ Якорные ссылки

Позволяют прыгать к определённым разделам страницы. Для этого:
1. Назначьте id элементу.
2. Создайте ссылку с href="#id".

<h2 id="chapter3">Глава 3</h2>  
<p>Текст главы...</p>  

<!-- Где-то в другом месте страницы -->  
<a href="#chapter3">Вернуться к Главе 3</a>

🔥 Продвинутые фишки

✉️ Ссылки на email и телефон

<!-- Email -->  
<a href="mailto:hello@example.com">Напишите нам</a>  

<!-- Телефон -->  
<a href="tel:+1234567890">Позвонить</a>

📎 Загрузка файлов

Хотите предложить скачать PDF? Используйте атрибут download.

<a href="/files/manual.pdf" download>Скачать инструкцию (PDF)</a>

🛠️ Практика: соберите всё вместе

Создадим навигационное меню с внутренними и внешними ссылками:

<nav>  
  <a href="/">Главная</a>  
  <a href="/about.html">О нас</a>  
  <a href="#contact">Контакты</a>  
  <a href="https://youtube.com/@DanilaBezhin" target="_blank">Видеоуроки</a>  
</nav>  

<section id="contact">  
  <h2>Наши контакты</h2>  
  <a href="mailto:support@site.com">support@site.com</a>  
</section>

🧪 Проверь себя

Как сделать ссылку, открывающуюся в новой вкладке?
Какая разница между href="#id" и href="page.html#id"?
Как создать кнопку «Позвонить» для мобильных устройств?

🚀 Следующий шаг: научись стилизовать ссылки с помощью CSS, чтобы они выглядели ещё круче!