Карта сайта

Урок 6: Ссылки в HTML (внутренние, внешние, target _blank)

/Уроки по HTML/CSS/Урок 6: Ссылки в HTML (внутренние, внешние, target _blank)
Урок 6: Ссылки в HTML (внутренние, внешние, target _blank)
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

На шестом уроке мы переходим к одному из самых важных элементов HTML это ссылкам. Без них интернет был бы похож на набор разрозненных страниц без возможности перехода. В этом уроке мы разберем, как создавать внутренние и внешние ссылки, открывать их в новых вкладках, а также закрепим знания на практических примерах.

Почему ссылки так важны?

Ссылки это «кровеносная система» интернета. Они соединяют страницы между собой, позволяют пользователям перемещаться по сайту и находить нужную информацию. В HTML за создание ссылок отвечает тег <a>, который мы сегодня детально изучим.

Основы тега <a>

Тег <a> (anchor — якорь) используется для создания гиперссылок. Его главный атрибут href, который указывает, куда ведет ссылка. Вот базовый пример:

<a href="https://max-gabov.ru">Мой сайт</a>

Эта ссылка откроет главную страницу моего сайта в текущей вкладке. Но возможности тега <a> гораздо шире! Давайте разбираться по порядку.

Внутренние ссылки (#id)

Внутренние ссылки позволяют переходить к определенным разделам внутри одной страницы. Это особенно полезно для длинных статей, меню или FAQ-страниц.

Как это работает?

  1. Создаем якорь, назначаем элементу уникальный id. Например:
<h2 id="section1">Раздел 1</h2>
  1. Ссылаемся на якорь через #id в атрибуте href:
<a href="#section1">Перейти к Разделу 1</a>

Пример страницы с навигацией

<!DOCTYPE html>
<html>
<head>
    <title>Внутренние ссылки</title>
</head>
<body>
    <nav>
        <a href="#chapter1">Глава 1</a> |
        <a href="#chapter2">Глава 2</a>
    </nav>

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

    <h2 id="chapter2">Глава 2</h2>
    <p>Текст главы 2...</p>
</body>
</html>

При клике на ссылки в <nav> страница автоматически прокрутится к нужному разделу.

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

Внешние ссылки ведут на другие сайты. Здесь важно указывать полный URL, включая протокол (http:// или https://).

Примеры:

<!-- Ссылка на сайт -->
<a href="https://google.com">Google</a>

<!-- Ссылка на файл -->
<a href="document.pdf">Скачать PDF</a>

Если забудете указать протокол, браузер подумает, что это внутренняя ссылка, и попытается найти страницу на вашем сайте. Например:

<!-- Неправильно! -->
<a href="max-gabov.ru">Сайт</a>

<!-- Правильно! -->
<a href="https://max-gabov.ru">Сайт</a>

Открытие ссылок в новой вкладке (_blank)

Иногда нужно, чтобы ссылка открывалась в новой вкладке, не закрывая текущую. Для этого используется атрибут target=»_blank».

Пример:

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

Безопасность

Всегда добавляйте атрибут rel=»noopener noreferrer» при использовании target="_blank". Это защитит вашу страницу от потенциальных уязвимостей:

<a href="https://max-gabov.ru" target="_blank" rel="noopener noreferrer">Безопасная ссылка</a>

Практические задачи

Закрепим материал на реальных примерах.

Задача 1: Создайте меню с якорными ссылками

Создайте HTML-страницу с тремя разделами (О нас, Услуги, Контакты) и меню для быстрого перехода между ними.

Решение:

<!DOCTYPE html>
<html>
<head>
    <title>Практика: Якорные ссылки</title>
</head>
<body>
    <nav>
        <a href="#about">О нас</a> |
        <a href="#services">Услуги</a> |
        <a href="#contacts">Контакты</a>
    </nav>

    <section id="about">
        <h2>О нас</h2>
        <p>Мы учим HTML и CSS!</p>
    </section>

    <section id="services">
        <h2>Услуги</h2>
        <p>Курсы для начинающих.</p>
    </section>

    <section id="contacts">
        <h2>Контакты</h2>
        <p>Email: info@max-gabov.ru</p>
    </section>
</body>
</html>

Задача 2: Добавьте внешние ссылки с открытием в новой вкладке

Создайте блок со ссылками на социальные сети (например, ВКонтакте, Одноклассники), которые открываются в новых вкладках.

Решение:

<div class="social">
    <a href="https://vk.com/" target="_blank" rel="noopener noreferrer">ВКонтакте</a>
    <a href="https://ok.ru/" target="_blank" rel="noopener noreferrer">Одноклассники</a>
</div>

Задача 3: Комбинируем внутренние и внешние ссылки

Создайте страницу с оглавлением, где одна ссылка ведет на внешний ресурс, а остальные — к разделам статьи.

Пример:

<nav>
    <a href="#intro">Введение</a> |
    <a href="#chapter1">Глава 1</a> |
    <a href="https://wikipedia.org" target="_blank">Википедия</a>
</nav>

Советы и рекомендации

  1. Проверяйте ссылки. Убедитесь, что все id уникальны, а внешние URL рабочие.
  2. Не злоупотребляйте target="_blank". Открытие множества вкладок может раздражать пользователей.
  3. Используйте понятный текст ссылок. Избегайте «кликните здесь» — лучше «Подробнее о курсе HTML».

Сегодня вы научились создавать ссылки, которые соединяют страницы и разделы. Это важный шаг к созданию полноценных сайтов!

Не останавливайтесь на достигнутом! Полный курс «HTML/CSS для начинающих» с 30 уроками ждет вас здесь — HTML/CSS для начинающих

Увидимся в следующем уроке, где мы будем изучать изображения и их оптимизацию!