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

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

В этом блоке заданий мы отработаем технологию **hash-навигации**, также известную как "якорные ссылки". Это мощный инструмент HTML, который позволяет создавать ссылки, перемещающие пользователя к определённому месту на той же самой странице без её перезагрузки. Это особенно полезно для длинных страниц, таких как лендинги, статьи с оглавлением или секции FAQ. Вы научитесь связывать навигационные меню с различными контентными блоками, создавать ссылки "Наверх" и использовать специальные CSS-эффекты для выделения активных разделов. Задания построены от самого простого, где нужно создать одну ссылку, до более сложных, имитирующих реальные компоненты веб-сайтов. Демонстрация инструмента ограничена.

Список тем

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

id: 37809_hash-nav-1

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

CSS

html {
  scroll-behavior: smooth;
}
body {
  font-family: sans-serif;
  padding: 1rem;
}
nav {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20px;
}
nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
section {
  height: 300px;
  border: 1px solid #ccc;
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
}

                     <nav>
  <a input1="#about-us">О нас</a>
</nav>

<main>
  <div style="height: 200px; background: #eee; padding: 10px; border-radius: 8px;">
    Здесь мог бы быть другой контент, чтобы создать пространство для прокрутки.
  </div>

  <section input2="about-us">
    <h2>Раздел 'О нас'</h2>
    <p>Информация о нашей компании.</p>
  </section>
</main>

HTML

<nav>
  <a input1="#about-us">О нас</a>
</nav>

<main>
  <div style="height: 200px; background: #eee; padding: 10px; border-radius: 8px;">
    Здесь мог бы быть другой контент, чтобы создать пространство для прокрутки.
  </div>

  <section input2="about-us">
    <h2>Раздел 'О нас'</h2>
    <p>Информация о нашей компании.</p>
  </section>
</main>

Чтобы связать ссылку и раздел, используется атрибут `id`. Сначала задайте уникальный `id` для целевого раздела (`<section>`). Затем, для тега `<a>`, в атрибуте `href` укажите этот `id` с символом решётки (`#`) в начале. Например, если `id` раздела — `about`, то `href` у ссылки должен быть `"#about"`.

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

Результат

Сообщения

Выполнить

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

Указание правильного идентификатора

id: 37809_hash-nav-2

Теперь атрибуты уже на месте, но их значения пропущены. Вам нужно правильно заполнить значения атрибутов `href` и `id`, чтобы связать ссылку 'Портфолио' с соответствующей секцией. Помните о синтаксических различиях.

CSS

html {
  scroll-behavior: smooth;
}
body {
  font-family: sans-serif;
  padding: 1rem;
}
nav {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20px;
}
section {
  height: 400px;
  border: 1px solid #ccc;
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
}
img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

                     <nav>
  <a href="input1">Портфолио</a>
</nav>

<div style="height: 150px;"></div>

<section id="input2">
  <h2>Портфолио</h2>
  <p>Примеры наших работ:</p>
  <img src="https://naytikurs.ru/img/1.png" alt="Пример работы 1">
</section>

HTML

<nav>
  <a href="input1">Портфолио</a>
</nav>

<div style="height: 150px;"></div>

<section id="input2">
  <h2>Портфолио</h2>
  <p>Примеры наших работ:</p>
  <img src="https://naytikurs.ru/img/1.png" alt="Пример работы 1">
</section>

Значение атрибута `href` для якорной ссылки должно начинаться с символа `#`. Значение атрибута `id` у целевого элемента должно быть точно таким же, но без символа `#`. Оба значения должны совпадать по имени.

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

Результат

Сообщения

Выполнить

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

Построение полноценного меню навигации

id: 37809_hash-nav-3

Одной ссылки мало. Создайте полноценное навигационное меню. Свяжите каждую из трёх ссылок ('Главная', 'Услуги', 'Контакты') с соответствующим разделом на странице, заполнив пропуски в коде.

CSS

html {
  scroll-behavior: smooth;
}
body {
  font-family: sans-serif;
  padding: 1rem;
}
.main-nav {
  background-color: #333;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
}
.main-nav a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
}
section {
  min-height: 250px;
  border: 1px solid #ccc;
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
}

                     <nav class="main-nav">
  <a href="input1">Главная</a>
  <a href="input2">Услуги</a>
  <a href="input3">Контакты</a>
</nav>

<main>
  <section id="input4">
    <h2>Главная</h2>
    <p>Основная информация.</p>
  </section>

  <section id="input5">
    <h2>Услуги</h2>
    <p>Описание наших услуг.</p>
  </section>

  <section id="input6">
    <h2>Контакты</h2>
    <p>Как с нами связаться.</p>
  </section>
</main>

HTML

<nav class="main-nav">
  <a href="input1">Главная</a>
  <a href="input2">Услуги</a>
  <a href="input3">Контакты</a>
</nav>

<main>
  <section id="input4">
    <h2>Главная</h2>
    <p>Основная информация.</p>
  </section>

  <section id="input5">
    <h2>Услуги</h2>
    <p>Описание наших услуг.</p>
  </section>

  <section id="input6">
    <h2>Контакты</h2>
    <p>Как с нами связаться.</p>
  </section>
</main>

Вам необходимо последовательно связать каждую ссылку с её секцией. Для ссылки 'Главная' используйте `href="#home"` и `id="home"`, для 'Услуги' — `href="#services"` и `id="services"`, и так далее. Главное — не перепутать пары.

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

Результат

Сообщения

Выполнить

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

Подсветка активного раздела с помощью CSS

id: 37809_hash-nav-4

Hash-навигация становится ещё нагляднее, если подсвечивать активный раздел. CSS для этого уже написан с использованием псевдо-класса `:target`. Ваша задача — правильно настроить HTML-связь между ссылкой и разделом 'Преимущества', чтобы магия CSS сработала.

CSS

html {
  scroll-behavior: smooth;
}
body {
  font-family: sans-serif;
  padding: 1rem;
}
section {
  min-height: 200px;
  border: 2px solid #ccc;
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
/* Вот та самая магия! */
section:target {
  background-color: #e8f5e9; /* Светло-зеленый фон */
  border-color: #4CAF50; /* Зеленая рамка */
}

                     <a class="button" href="input1">Узнать о преимуществах</a>

<div style="height: 300px;"></div>

<section id="input2">
  <h2>Наши преимущества</h2>
  <p>Мы предлагаем лучшие решения на рынке.</p>
</section>

HTML

<a class="button" href="input1">Узнать о преимуществах</a>

<div style="height: 300px;"></div>

<section id="input2">
  <h2>Наши преимущества</h2>
  <p>Мы предлагаем лучшие решения на рынке.</p>
</section>

Это задание не отличается от предыдущих по механике. Вам просто нужно создать рабочую якорную ссылку. CSS автоматически применит стили к элементу, `id` которого совпадает с хэшем в адресной строке URL. Просто свяжите ссылку и секцию с `id` 'features'.

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

Результат

Сообщения

Выполнить

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

Создание ссылки 'Наверх'

id: 37809_hash-nav-5

На длинных страницах часто встречается кнопка 'Наверх' для удобства пользователя. Реализуйте этот функционал. Ссылка внизу страницы должна возвращать пользователя к самому верху, где расположен заголовок.

CSS

html {
  scroll-behavior: smooth;
}
body {
  font-family: sans-serif;
  padding: 1rem;
}
header {
  background: #333;
  color: white;
  padding: 20px;
  border-radius: 8px;
}
.content {
  height: 800px; /* Искусственно удлиняем страницу */
  padding-top: 20px;
}
.back-to-top {
  display: inline-block;
  background: #555;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
}

                     <header input1="page-top">
  <h1>Моя Длинная Страница</h1>
</header>

<div class="content">
  <p>Прокрутите вниз...</p>
</div>

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

HTML

<header input1="page-top">
  <h1>Моя Длинная Страница</h1>
</header>

<div class="content">
  <p>Прокрутите вниз...</p>
</div>

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

Принцип тот же, но наоборот. Вам нужно дать `id` элементу, который находится в самом верху документа. Это может быть `<body>`, `<header>` или первый заголовок `<h1>`. Затем ссылка внизу страницы должна в своём атрибуте `href` указывать на этот `id`.

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

Результат

Сообщения

Выполнить

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

Изображение в качестве якорной ссылки

id: 37809_hash-nav-6

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

CSS

html {
  scroll-behavior: smooth;
}
body {
  font-family: sans-serif;
  padding: 1rem; 
  text-align: center;
}
.intro {
  height: 250px;
}
.intro img {
  cursor: pointer;
  width: 48px;
  height: 48px;
}
#gallery {
  min-height: 300px;
  border: 1px solid #ccc;
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
}

                     <section class="intro">
  <h2>Добро пожаловать!</h2>
  <p>Прокрутите вниз, чтобы увидеть галерею</p>
  <input1 href="#gallery">
    <img src="https://naytikurs.ru/img/8.png" alt="Стрелка вниз">
  </input1>
</section>

<section id="gallery">
  <h2>Галерея</h2>
  <img src="https://naytikurs.ru/img/4.png" alt="Картинка 1" style="width: 100px; margin: 5px;">
  <img src="https://naytikurs.ru/img/5.png" alt="Картинка 2" style="width: 100px; margin: 5px;">
</section>

HTML

<section class="intro">
  <h2>Добро пожаловать!</h2>
  <p>Прокрутите вниз, чтобы увидеть галерею</p>
  <input1 href="#gallery">
    <img src="https://naytikurs.ru/img/8.png" alt="Стрелка вниз">
  </input1>
</section>

<section id="gallery">
  <h2>Галерея</h2>
  <img src="https://naytikurs.ru/img/4.png" alt="Картинка 1" style="width: 100px; margin: 5px;">
  <img src="https://naytikurs.ru/img/5.png" alt="Картинка 2" style="width: 100px; margin: 5px;">
</section>

Чтобы любой элемент, включая картинку, стал ссылкой, его нужно обернуть в тег `<a>`. Открывающий тег `<a>` ставится перед `<img>`, а закрывающий `</a>` — после. Не забудьте добавить тегу `<a>` атрибут `href` с путём к якорю.

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

Результат

Сообщения

Выполнить

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

Навигация по карточкам товаров

id: 37809_hash-nav-7

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

CSS

html {
  scroll-behavior: smooth;
}
body {
  font-family: sans-serif;
  padding: 1rem;
}
.quick-links {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}
.quick-links li {
  margin-bottom: 5px;
}
.product-card {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.product-card img {
  max-width: 150px;
  float: left;
  margin-right: 15px;
}
.product-card:target {
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.8);
  border-color: #ffa500;
}

                     <h4>Быстрый переход к товарам:</h4>
<ul class="quick-links">
  <li><a href="input1">Смартфон X</a></li>
  <li><a href="input2">Планшет Y</a></li>
</ul>

<div style="height:100px"></div>

<div class="product-card" id="input3">
  <img src="https://naytikurs.ru/img/6.png" alt="Смартфон">
  <h3>Смартфон X</h3>
  <p>Современный и мощный смартфон.</p>
</div>

<div class="product-card" id="input4">
  <img src="https://naytikurs.ru/img/7.png" alt="Планшет">
  <h3>Планшет Y</h3>
  <p>Идеально подходит для работы и развлечений.</p>
</div>

HTML

<h4>Быстрый переход к товарам:</h4>
<ul class="quick-links">
  <li><a href="input1">Смартфон X</a></li>
  <li><a href="input2">Планшет Y</a></li>
</ul>

<div style="height:100px"></div>

<div class="product-card" id="input3">
  <img src="https://naytikurs.ru/img/6.png" alt="Смартфон">
  <h3>Смартфон X</h3>
  <p>Современный и мощный смартфон.</p>
</div>

<div class="product-card" id="input4">
  <img src="https://naytikurs.ru/img/7.png" alt="Планшет">
  <h3>Планшет Y</h3>
  <p>Идеально подходит для работы и развлечений.</p>
</div>

Здесь нужно применить все полученные знания. Каждой ссылке `<a>` в списке нужно задать `href`, указывающий на уникальный `id`. Этот `id` нужно присвоить соответствующей карточке товара (`<div class="product-card">`). Например, для 'Смартфон X' можно использовать пару `href="#product-x"` и `id="product-x"`.

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

Результат

Сообщения

Выполнить

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