Внутренние ссылки и якоря [Модуль 3: Ссылки и навигация]: Тренажер HTML

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

Внутренние ссылки, также известные как якоря, — это мощный инструмент для улучшения навигации на веб-страницах. Они позволяют создавать ссылки, которые перемещают пользователя не на другую страницу, а к определенному месту на текущей. Это особенно полезно для длинных статей, одностраничных сайтов (landing pages) или страниц с содержанием, где нужно быстро переходить между разделами. Представьте себе оглавление в книге: вы нажимаете на название главы и мгновенно попадаете на нужную страницу. Якоря в HTML работают по тому же принципу. В этой серии заданий вы на практике научитесь создавать такие ссылки. Вы начнете с базовой связи между ссылкой и элементом, затем построите полноценное навигационное меню для статьи и научитесь применять якоря для создания удобных кнопок типа «Вернуться наверх». Эти упражнения помогут вам закрепить синтаксис и понять логику работы внутренних ссылок. Ссылки заблокированы на этой странице.

Список тем

Создание первой якорной ссылки

id: 37801_anchor-link-basic-creation

Давайте создадим базовую внутреннюю ссылку. На странице есть заголовок и ссылка. Ваша задача — связать их так, чтобы при нажатии на 'Перейти к главе 1' страница прокручивалась к заголовку 'Глава 1'.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
.content {
  margin-top: 500px; /* Имитируем длинную страницу для скролла */
}
h2 {
  background-color: #f0f0f0;
  padding: 10px;
  border-left: 4px solid #007bff;
}

                     <!-- Навигация -->
<a href="input1">Перейти к главе 1</a>

<!-- Контент страницы -->
<div class="content">
  <h2 id="input2">Глава 1: Начало</h2>
  <p>Это текст первой главы.</p>
</div>

HTML

<!-- Навигация -->
<a href="input1">Перейти к главе 1</a>

<!-- Контент страницы -->
<div class="content">
  <h2 id="input2">Глава 1: Начало</h2>
  <p>Это текст первой главы.</p>
</div>

Чтобы ссылка указывала на элемент на этой же странице, её атрибуту `href` нужно присвоить значение, начинающееся с символа `#`, за которым следует уникальное имя (идентификатор). Целевому элементу, к которому будет переход, нужно добавить атрибут `id` с таким же именем (но уже без символа `#`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Указываем правильные атрибуты

id: 37801_anchor-link-attribute-names

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

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
.description-block {
  margin-top: 400px;
}
.description-block:target {
  background-color: #fff8e1;
  border: 1px solid #ffc107;
  padding: 10px;
  border-radius: 5px;
}

                     <p>Ознакомьтесь с описанием ниже.</p>
<a input1="#description">Показать описание</a>

<div class="description-block" input2="description">
  <h3>Подробное описание</h3>
  <p>Этот блок должен подсвечиваться при переходе по ссылке.</p>
</div>

HTML

<p>Ознакомьтесь с описанием ниже.</p>
<a input1="#description">Показать описание</a>

<div class="description-block" input2="description">
  <h3>Подробное описание</h3>
  <p>Этот блок должен подсвечиваться при переходе по ссылке.</p>
</div>

Атрибут, отвечающий за адрес ссылки, называется `href`. Атрибут, который задает уникальный идентификатор элементу, называется `id`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Оглавление для статьи

id: 37801_anchor-link-table-of-contents

Создайте простое оглавление для небольшой статьи. Вам нужно связать каждую ссылку из списка с соответствующим заголовком. При нажатии на пункт оглавления, страница должна плавно перемещаться к нужному разделу.

CSS

html {
  scroll-behavior: smooth; /* Для плавной прокрутки */
}
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 10px;
}
.toc {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 15px;
  background-color: #f9f9f9;
}
.toc li a {
  text-decoration: none;
  color: #0056b3;
}
section {
  margin-bottom: 20px;
  padding-top: 20px; /* Чтобы заголовок не прилипал к верху */
}

                     <h2>Оглавление</h2>
<ul class="toc">
  <li><a href="input1">Введение</a></li>
  <li><a href="input2">Основная часть</a></li>
  <li><a href="#conclusion">Заключение</a></li>
</ul>

<section id="input3">
  <h3>Введение</h3>
  <p>Текст введения... тут много текста для создания высоты страницы.</p>
  <p>Еще немного текста...</p>
</section>

<section id="input4">
  <h3>Основная часть</h3>
  <p>Текст основной части... тут тоже много текста для создания высоты страницы.</p>
  <p>И еще...</p>
</section>

<section id="conclusion">
  <h3>Заключение</h3>
  <p>Текст заключения.</p>
</section>

HTML

<h2>Оглавление</h2>
<ul class="toc">
  <li><a href="input1">Введение</a></li>
  <li><a href="input2">Основная часть</a></li>
  <li><a href="#conclusion">Заключение</a></li>
</ul>

<section id="input3">
  <h3>Введение</h3>
  <p>Текст введения... тут много текста для создания высоты страницы.</p>
  <p>Еще немного текста...</p>
</section>

<section id="input4">
  <h3>Основная часть</h3>
  <p>Текст основной части... тут тоже много текста для создания высоты страницы.</p>
  <p>И еще...</p>
</section>

<section id="conclusion">
  <h3>Заключение</h3>
  <p>Текст заключения.</p>
</section>

Для каждого пункта оглавления (ссылки `<a>`) используйте атрибут `href` со значением `#имя-раздела`. Для каждого заголовка (`<h2>`), на который ведет ссылка, добавьте атрибут `id` с соответствующим `имя-раздела`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Ссылка-кнопка «Наверх»

id: 37801_anchor-link-back-to-top

Очень частая задача — создать кнопку или ссылку, которая возвращает пользователя в начало страницы. Установите якорь в самом верху страницы и создайте ссылку внизу, которая будет на него указывать.

CSS

body {
  font-family: sans-serif;
}
.page-wrapper {
  padding: 15px;
}
.content {
  height: 800px; /* Имитация длинного контента */
  background-color: #f0f4f8;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
.footer {
  text-align: center;
}
.back-to-top {
  display: inline-block;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

                     <div class="page-wrapper" id="input1">
  <h1>Заголовок страницы</h1>
  <p>Прокрутите вниз, чтобы увидеть ссылку.</p>
  
  <div class="content">
    <p>Длинный контент...</p>
  </div>

  <footer class="footer">
    <a class="back-to-top" href="input2">Наверх</a>
  </footer>
</div>

HTML

<div class="page-wrapper" id="input1">
  <h1>Заголовок страницы</h1>
  <p>Прокрутите вниз, чтобы увидеть ссылку.</p>
  
  <div class="content">
    <p>Длинный контент...</p>
  </div>

  <footer class="footer">
    <a class="back-to-top" href="input2">Наверх</a>
  </footer>
</div>

В качестве цели для возврата наверх можно использовать тег `<body>` или основной контейнер страницы, добавив ему `id`. Например, `<body id="top">`. Тогда ссылка внизу должна иметь `href="#top"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Якорь на изображение

id: 37801_anchor-link-to-image

Якорь можно поставить на любой элемент, не только на заголовок. В этом задании создайте ссылку, которая будет прокручивать страницу к определенному изображению в галерее.

CSS

body {
  font-family: sans-serif;
  padding: 10px;
}
.gallery {
  margin-top: 30px;
}
.gallery img {
  max-width: 100%;
  display: block;
  margin: 20px 0;
}
img:target {
  outline: 3px solid #ff9800;
  outline-offset: 4px;
}

                     <p>Нажмите, чтобы перейти к фото с автомобилем.</p>
<a href="input1">Перейти к фото</a>

<div class="gallery">
  <p>Начало галереи...</p>
  <img src="https://naytikurs.ru/img/1.png" alt="Фото 1">
  <p>Промежуточный текст...</p>
  <img src="https://naytikurs.ru/img/2.png" alt="Фото 2" input2="car-photo">
  <p>Конец галереи.</p>
</div>

HTML

<p>Нажмите, чтобы перейти к фото с автомобилем.</p>
<a href="input1">Перейти к фото</a>

<div class="gallery">
  <p>Начало галереи...</p>
  <img src="https://naytikurs.ru/img/1.png" alt="Фото 1">
  <p>Промежуточный текст...</p>
  <img src="https://naytikurs.ru/img/2.png" alt="Фото 2" input2="car-photo">
  <p>Конец галереи.</p>
</div>

Принцип тот же: ссылке `<a>` задайте `href` со значением `#имя-якоря`, а изображению `<img>` добавьте атрибут `id` с этим же именем `имя-якоря`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Создание полного тега ссылки

id: 37801_anchor-full-tag-creation

В этом задании вам нужно самостоятельно написать открывающий и закрывающий теги для ссылки. Сделайте так, чтобы текст 'Подробнее о доставке' стал ссылкой, ведущей к соответствующему разделу.

CSS

body {
  font-family: sans-serif;
  padding: 10px;
}
.intro {
  background: #eef;
  padding: 15px;
  border-radius: 5px;
}
.delivery-section {
  margin-top: 500px;
}
.delivery-section:target {
  animation: highlight 1.5s ease;
}
@keyframes highlight {
  from { background-color: #fdd835; }
  to { background-color: transparent; }
}

                     <div class="intro">
  <p>У нас есть быстрая доставка по всему городу. <input1 href="#delivery">Подробнее о доставке</input1>.</p>
</div>

<div id="delivery" class="delivery-section">
  <h3>Условия доставки</h3>
  <p>Мы доставляем товары в течение 24 часов.</p>
</div>

HTML

<div class="intro">
  <p>У нас есть быстрая доставка по всему городу. <input1 href="#delivery">Подробнее о доставке</input1>.</p>
</div>

<div id="delivery" class="delivery-section">
  <h3>Условия доставки</h3>
  <p>Мы доставляем товары в течение 24 часов.</p>
</div>

Оберните текст в теги `<a>` и `</a>`. Открывающему тегу `<a>` не забудьте добавить атрибут `href` с нужным значением, указывающим на `id` секции доставки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Навигация по вкладкам (Tab-панель)

id: 37801_anchor-link-tabs-simulation

Якоря можно использовать для имитации работы вкладок (табов) без JavaScript. Создайте навигацию, при клике на которую будет 'показываться' нужный блок контента. CSS уже настроен так, чтобы при переходе по якорю нужный блок становился видимым.

CSS

body {
  font-family: sans-serif;
  padding: 10px;
}
.tabs-nav {
  display: flex;
  border-bottom: 2px solid #ccc;
}
.tabs-nav a {
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  background: #eee;
  border: 1px solid #ccc;
  border-bottom: none;
  margin-right: 5px;
}
.tab-content {
  display: none; /* Все вкладки по умолчанию скрыты */
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}
.tab-content:target {
  display: block; /* Показываем только ту, на которую ведет якорь */
}

                     <div class="tabs">
  <nav class="tabs-nav">
    <a href="input1">Профиль</a>
    <a href="#settings">Настройки</a>
    <a href="input2">Помощь</a>
  </nav>
  <div class="tabs-container">
    <div id="input3" class="tab-content">
      <h4>Профиль пользователя</h4>
      <p>Здесь информация о вашем профиле.</p>
    </div>
    <div id="settings" class="tab-content">
      <h4>Настройки аккаунта</h4>
      <p>Здесь можно изменить пароль.</p>
    </div>
    <div id="help" class="tab-content">
      <h4>Раздел помощи</h4>
      <p>Часто задаваемые вопросы.</p>
    </div>
  </div>
</div>

HTML

<div class="tabs">
  <nav class="tabs-nav">
    <a href="input1">Профиль</a>
    <a href="#settings">Настройки</a>
    <a href="input2">Помощь</a>
  </nav>
  <div class="tabs-container">
    <div id="input3" class="tab-content">
      <h4>Профиль пользователя</h4>
      <p>Здесь информация о вашем профиле.</p>
    </div>
    <div id="settings" class="tab-content">
      <h4>Настройки аккаунта</h4>
      <p>Здесь можно изменить пароль.</p>
    </div>
    <div id="help" class="tab-content">
      <h4>Раздел помощи</h4>
      <p>Часто задаваемые вопросы.</p>
    </div>
  </div>
</div>

Свяжите каждую ссылку в навигации (`.tabs-nav a`) с соответствующим блоком контента (`.tab-content`) с помощью `href` и `id`. CSS-свойство `:target` сделает всю магию, отображая только активный блок.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку