Базовые ссылки (a href) [Модуль 3: Ссылки и навигация]: Тренажер HTML

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

Этот тренажер посвящен тегу `<a>` — основному элементу для создания гиперссылок в HTML. Без ссылок интернет не был бы "всемирной паутиной". В этих заданиях вы на практике научитесь создавать различные типы ссылок: от простых переходов на другие сайты до более сложных, таких как якорные ссылки для навигации по странице, ссылки для отправки email или совершения звонка. Вы также познакомитесь с важными атрибутами, которые расширяют функциональность ссылок, например, `target` для открытия ссылки в новой вкладке, `download` для скачивания файлов и `title` для добавления всплывающих подсказок. Задания построены по принципу "от простого к сложному", что позволит вам постепенно закрепить материал и уверенно использовать ссылки в своих проектах.

Список тем

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

id: 37800_basic-links-1

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

CSS

a {
  color: #007BFF;
  text-decoration: none;
  font-size: 18px;
}
a:hover {
  text-decoration: underline;
}

                     <input1 href="https://naytikurs.ru">
  Учебный портал
</input1>

HTML

<input1 href="https://naytikurs.ru">
  Учебный портал
</input1>

Для создания ссылок используется парный тег `<a>`. Открывающий тег ставится перед текстом, а закрывающий — после. В данном задании нужно заменить `input1` на имя тега `a`.

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

Результат

Сообщения

Выполнить

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

Указание адреса для перехода

id: 37800_basic-links-2

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

CSS

a {
  color: #28a745;
  font-size: 18px;
  font-family: sans-serif;
}

                     <a input1="https://developer.mozilla.org/">
  Документация MDN
</a>

HTML

<a input1="https://developer.mozilla.org/">
  Документация MDN
</a>

Основным атрибутом тега `<a>` является `href` (Hypertext Reference). Его значением является URL-адрес, на который будет осуществлен переход при клике. Вам нужно вставить `href` вместо `input1`.

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

Результат

Сообщения

Выполнить

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

Заполнение адреса ссылки

id: 37800_basic-links-3

Ссылка создана, но она никуда не ведет. Заполните значение атрибута `href` так, чтобы ссылка вела на главную страницу поисковой системы Google.

CSS

a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1a73e8;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: sans-serif;
}

                     <a href="input1">
  Поиск информации
</a>

HTML

<a href="input1">
  Поиск информации
</a>

В качестве значения атрибута `href` нужно указать полный URL-адрес сайта. Для Google это `https://google.com`. Не забудьте, что адрес должен быть заключен в кавычки.

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

Результат

Сообщения

Выполнить

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

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

id: 37800_basic-links-4

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

CSS

a {
  color: #dc3545;
  font-weight: bold;
  font-size: 18px;
  font-family: Arial, sans-serif;
}

                     <a href="https://wikipedia.org" input1="input2">
  Открыть Википедию
</a>

HTML

<a href="https://wikipedia.org" input1="input2">
  Открыть Википедию
</a>

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

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

Результат

Сообщения

Выполнить

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

Всплывающая подсказка для ссылки

id: 37800_basic-links-5

Добавьте к ссылке всплывающую подсказку, которая будет появляться при наведении на нее курсора. Текст подсказки должен быть: "Перейти к веб-стандартам". Это полезно для улучшения доступности и информирования пользователя.

CSS

a {
  color: #17a2b8;
  font-size: 1.1em;
  font-family: 'Courier New', Courier, monospace;
}

                     <a href="https://www.w3.org/" input1="input2">
  Сайт W3C
</a>

HTML

<a href="https://www.w3.org/" input1="input2">
  Сайт W3C
</a>

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

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

Результат

Сообщения

Выполнить

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

Якорная ссылка внутри страницы

id: 37800_basic-links-6

Создайте ссылку, которая будет плавно прокручивать страницу к разделу "Заключение". Для этого нужно правильно указать адрес в ссылке и присвоить соответствующему заголовку уникальный идентификатор.

CSS

html {
  scroll-behavior: smooth;
}
body {
  font-family: sans-serif;
}
a {
  font-size: 18px;
}
.spacer {
  height: 400px;
  border-bottom: 2px dashed #ccc;
}
h2 {
  font-size: 24px;
  color: #333;
}

                     <a input1="#conclusion">
  Перейти к заключению
</a>

<div class="spacer"></div>

<h2 input2="conclusion">
  Заключение
</h2>
<p>Это заключительная часть страницы, к которой ведет якорная ссылка.</p>

HTML

<a input1="#conclusion">
  Перейти к заключению
</a>

<div class="spacer"></div>

<h2 input2="conclusion">
  Заключение
</h2>
<p>Это заключительная часть страницы, к которой ведет якорная ссылка.</p>

Чтобы создать ссылку на элемент внутри страницы (якорь), в атрибуте `href` нужно указать символ `#`, а затем имя `id` элемента, к которому нужно перейти. Самому элементу (в нашем случае `<h2>`) нужно добавить атрибут `id` с таким же именем (но без `#`).

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

Результат

Сообщения

Выполнить

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

Ссылка для отправки E-mail

id: 37800_basic-links-7

Создайте ссылку, при нажатии на которую у пользователя откроется почтовый клиент с уже вставленным адресом получателя `support@example.com`. Для этого используется специальный протокол в атрибуте `href`.

CSS

a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #ffc107;
  color: #212529;
  padding: 8px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
}

                     <a href="input1:support@example.com">
  📧 Написать в поддержку
</a>

HTML

<a href="input1:support@example.com">
  📧 Написать в поддержку
</a>

Чтобы создать ссылку для отправки электронной почты, в значении атрибута `href` используется префикс `mailto:`, после которого указывается email-адрес.

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

Результат

Сообщения

Выполнить

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

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

id: 37800_basic-links-8

Создайте ссылку, которая на мобильных устройствах позволит сразу начать звонок на номер `+7-800-555-35-35`. Это очень удобно для контактной информации на сайтах.

CSS

a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  text-decoration: none;
  font-family: sans-serif;
}

                     <a href="input1:+78005553535">
  📞 Позвонить нам
</a>

HTML

<a href="input1:+78005553535">
  📞 Позвонить нам
</a>

Для создания ссылки, инициирующей телефонный звонок, используется префикс `tel:`, после которого указывается номер телефона без пробелов и дефисов.

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

Результат

Сообщения

Выполнить

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

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

id: 37800_basic-links-9

Сделайте так, чтобы изображение стало кликабельной ссылкой, которая ведет на сайт с фотографиями и открывается в новой вкладке. Для этого нужно обернуть тег `<img>` в тег ссылки.

CSS

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  transition: transform 0.2s;
}
a:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

                     <input1 href="https://unsplash.com/" target="input2">
  <img src="https://naytikurs.ru/img/4.png" alt="Красивый пейзаж">
</input1>

HTML

<input1 href="https://unsplash.com/" target="input2">
  <img src="https://naytikurs.ru/img/4.png" alt="Красивый пейзаж">
</input1>

Чтобы сделать любой элемент, включая картинку, ссылкой, его нужно поместить внутрь контейнера `<a>...</a>`. Не забудьте добавить атрибут `target="_blank"` к тегу `<a>` для открытия в новой вкладке.

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

Результат

Сообщения

Выполнить

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

Ссылка для скачивания файла

id: 37800_basic-links-10

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

CSS

a {
  font-family: sans-serif;
  font-size: 16px;
  padding: 10px;
  border: 1px solid #007BFF;
  border-radius: 4px;
  text-decoration: none;
  color: #007BFF;
}

                     <a href="https://naytikurs.ru/img/5.png" input1>
  Скачать изображение
</a>

HTML

<a href="https://naytikurs.ru/img/5.png" input1>
  Скачать изображение
</a>

Чтобы браузер начал скачивание файла по ссылке, а не переход по ней, к тегу `<a>` нужно добавить атрибут `download`. Этот атрибут не требует значения.

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

Результат

Сообщения

Выполнить

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

Безопасная ссылка в новой вкладке

id: 37800_basic-links-11

При использовании `target="_blank"` рекомендуется добавлять атрибут `rel` со значениями `noopener` и `noreferrer` для повышения безопасности. Добавьте этот атрибут к ссылке.

CSS

a {
  color: #ff5722;
  font-size: 18px;
  font-family: sans-serif;
}

                     <a href="https://example.com" target="_blank" input1="input2">
  Безопасная внешняя ссылка
</a>

HTML

<a href="https://example.com" target="_blank" input1="input2">
  Безопасная внешняя ссылка
</a>

Добавьте к тегу `<a>` атрибут `rel` и в качестве его значения укажите `"noopener noreferrer"`. Порядок этих двух слов не имеет значения.

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

Результат

Сообщения

Выполнить

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

Навигационное меню с якорями

id: 37800_basic-links-12

Создайте простое навигационное меню. Первая ссылка должна вести к разделу с `id="about"`, а вторая — к разделу с `id="contact"`. Заполните адреса для этих двух ссылок.

CSS

nav {
  display: flex;
  gap: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
}
nav a {
  text-decoration: none;
  color: #333;
  font-family: sans-serif;
}
.spacer {
  height: 250px;
}
section {
  padding: 10px;
  border: 1px solid #ddd;
}
h2 {
  margin-top: 0;
}

                     <nav>
  <a href="input1">О нас</a>
  <a href="input2">Контакты</a>
</nav>

<div class="spacer"></div>

<section id="about">
  <h2>О нас</h2>
  <p>Информация о нашей компании...</p>
</section>

<div class="spacer"></div>

<section id="contact">
  <h2>Контакты</h2>
  <p>Наша контактная информация...</p>
</section>

HTML

<nav>
  <a href="input1">О нас</a>
  <a href="input2">Контакты</a>
</nav>

<div class="spacer"></div>

<section id="about">
  <h2>О нас</h2>
  <p>Информация о нашей компании...</p>
</section>

<div class="spacer"></div>

<section id="contact">
  <h2>Контакты</h2>
  <p>Наша контактная информация...</p>
</section>

Для навигации к элементу на той же странице используйте в `href` символ `#` и `id` нужного элемента. Например, для элемента `<section id="about">` ссылка будет иметь `href="#about"`.

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

Результат

Сообщения

Выполнить

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