Атрибуты target (_blank, _self) [Модуль 3: Ссылки и навигация]: Тренажер HTML

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

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

Список тем

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

id: 37803_target-attribute-task-1

Самая частая задача при работе со ссылками — сделать так, чтобы они открывались в новой вкладке браузера. Допишите недостающее значение для атрибута `target`, чтобы ссылка на Google открылась в новой вкладке.

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
}
a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  display: block;
  padding: 12px 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}
a:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

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

HTML

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

Чтобы ссылка открылась в новой вкладке, атрибуту `target` нужно присвоить специальное значение, которое начинается с символа нижнего подчеркивания. Это значение — `_blank`.

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

Результат

Сообщения

Выполнить

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

Добавляем атрибут target

id: 37803_target-attribute-task-2

В коде уже есть ссылка со значением `_blank`, но не хватает самого атрибута, который отвечает за способ открытия. Добавьте в тег `<a>` необходимый атрибут, чтобы ссылка заработала как надо.

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
}
a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  display: block;
  padding: 12px 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}
a:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

                     <a href="https://naytikurs.ru" input1="_blank">Перейти на NaytiKurs</a>

HTML

<a href="https://naytikurs.ru" input1="_blank">Перейти на NaytiKurs</a>

Атрибут, который указывает, где открывать ссылку, называется `target`. Его нужно дописать перед значением `_blank`.

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

Результат

Сообщения

Выполнить

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

Сравнение: новая и текущая вкладка

id: 37803_target-attribute-task-3

У вас есть две ссылки. Сделайте так, чтобы ссылка 'Внешний ресурс' открывалась в новой вкладке, а ссылка 'Внутренняя страница' — в этой же (текущей) вкладке. Для этого заполните значения атрибута `target` для обеих ссылок.

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
}
a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  display: block;
  margin-bottom: 15px;
  padding: 12px 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}
a:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

                     <!-- Открыть в новой вкладке -->
<a href="https://wikipedia.org" target="input1">Внешний ресурс</a>

<!-- Открыть в текущей вкладке -->
<a href="#" target="input2">Внутренняя страница</a>

HTML

<!-- Открыть в новой вкладке -->
<a href="https://wikipedia.org" target="input1">Внешний ресурс</a>

<!-- Открыть в текущей вкладке -->
<a href="#" target="input2">Внутренняя страница</a>

Для открытия в новой вкладке используется значение `_blank`. Для открытия в той же вкладке (поведение по умолчанию) используется значение `_self`.

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

Результат

Сообщения

Выполнить

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

Полная настройка ссылки

id: 37803_target-attribute-task-4

Для ссылки на GitHub не хватает и атрибута, и его значения, чтобы она открывалась в новой вкладке. Впишите недостающие части кода в соответствующие места.

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
}
a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  display: block;
  padding: 12px 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}
a:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

                     <a href="https://github.com" input1="input2">Профиль на GitHub</a>

HTML

<a href="https://github.com" input1="input2">Профиль на GitHub</a>

Сначала укажите имя атрибута `target`, а затем, после знака равенства, его значение `_blank` в кавычках.

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

Результат

Сообщения

Выполнить

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

Навигация по социальным сетям

id: 37803_target-attribute-task-5

Это блок с иконками социальных сетей. Все ссылки на внешние ресурсы должны открываться в новых вкладках, чтобы пользователь не покидал сайт. Добавьте недостающий атрибут `target` для обеих ссылок.

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  text-align: center;
}
.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.social-links a {
  display: inline-block;
  transition: transform 0.2s ease;
}
.social-links a:hover {
  transform: scale(1.1);
}
.social-links img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

                     <div class="social-links">
  <a href="#" input1="_blank">
    <img src="https://naytikurs.ru/img/7.png" alt="VK">
  </a>
  <a href="#" input2="_blank">
    <img src="https://naytikurs.ru/img/8.png" alt="Telegram">
  </a>
</div>

HTML

<div class="social-links">
  <a href="#" input1="_blank">
    <img src="https://naytikurs.ru/img/7.png" alt="VK">
  </a>
  <a href="#" input2="_blank">
    <img src="https://naytikurs.ru/img/8.png" alt="Telegram">
  </a>
</div>

Для каждой ссылки (`<a>`) нужно добавить атрибут `target`. Поскольку значение `_blank` уже указано, вам остается вписать только имя атрибута.

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

Результат

Сообщения

Выполнить

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

Возвращение к поведению по умолчанию

id: 37803_target-attribute-task-6

Эта ссылка сейчас открывается в новой вкладке. Измените значение атрибута `target` так, чтобы она открывалась в текущей вкладке, как самая обычная ссылка.

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
}
.button {
  display: inline-block;
  text-align: center;
  background-color: #28a745;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s ease;
}
.button:hover {
  background-color: #218838;
  text-decoration: none;
}

                     <a class="button" href="#" target="input1">Обновить страницу</a>

HTML

<a class="button" href="#" target="input1">Обновить страницу</a>

Поведение по умолчанию, когда ссылка открывается в той же вкладке, задается значением `_self`. Также можно просто удалить атрибут `target`, но в рамках задания требуется указать именно это значение.

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

Результат

Сообщения

Выполнить

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

Карточка товара с двумя ссылками

id: 37803_target-attribute-task-7

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

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
}
.card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 340px;
  margin: 0 auto;
}
.card img {
  width: 100%;
  height: auto;
  display: block;
}
.card-content {
  padding: 15px;
}
.card h3 {
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 10px;
}
.card-actions {
  display: flex;
  justify-content: space-between;
  padding: 0 15px 15px;
  gap: 10px;
}
.card-actions a {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.button-primary {
  background-color: #007bff;
  color: white;
}
.button-primary:hover {
  background-color: #0056b3;
}
.button-secondary {
  background-color: #6c757d;
  color: white;
}
.button-secondary:hover {
  background-color: #5a6268;
}

                     <div class="card">
  <img src="https://naytikurs.ru/img/4.png" alt="Товар">
  <div class="card-content">
    <h3>Классный товар</h3>
  </div>
  <div class="card-actions">
    <a href="#" class="button-primary">В корзину</a>
    <a href="https://example.com" class="button-secondary" input1="input2">Подробнее</a>
  </div>
</div>

HTML

<div class="card">
  <img src="https://naytikurs.ru/img/4.png" alt="Товар">
  <div class="card-content">
    <h3>Классный товар</h3>
  </div>
  <div class="card-actions">
    <a href="#" class="button-primary">В корзину</a>
    <a href="https://example.com" class="button-secondary" input1="input2">Подробнее</a>
  </div>
</div>

Ссылке 'Подробнее о товаре' нужно добавить атрибут `target` со значением `_blank`. Кнопка 'Добавить в корзину' уже работает как надо, так как у нее нет атрибута `target`, и она по умолчанию открывается в текущем окне.

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

Результат

Сообщения

Выполнить

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