Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 1. Введение и HTML Занятие 6

Ссылки

Сегодня мы сделаем меню, которое ведёт на полезные сайты и на разделы нашей же страницы.

Изучаем: a, href, target, якоря
Результат: Меню ссылок на внешние сайты и разделы страницы

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

👀 Сегодня сделаем вот такое

Показать код примера 
<h1 id="top">Мои ссылки</h1>
<ul>
  <li><a href="#books">Книги</a></li>
  <li><a href="#games">Игры</a></li>
  <li><a href="https://ru.wikipedia.org" target="_blank">Википедия</a></li>
</ul>

<h2 id="books">Книги</h2>
<p>Здесь будет список любимых книг.</p>
<p style="height: 300px">...</p>

<h2 id="games">Игры</h2>
<p>Здесь будет список любимых игр.</p>
<p><a href="#top">Наверх ↑</a></p>

💡 Объяснение

Гипертекст — главная идея интернета

Помнишь расшифровку HTML? HyperText — гипертекст. Это текст, в котором есть ссылки, позволяющие мгновенно перейти к другому документу. Именно ссылки превратили миллионы отдельных страниц во «всемирную паутину» — World Wide Web.

Тег <a> и атрибут href

Ссылку создаёт тег <a> (от anchor — якорь). Сам по себе он ничего не делает — ему нужен атрибут href (hypertext reference) с адресом, куда вести.

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

Атрибут — это дополнительная настройка тега. Атрибуты пишут в открывающем теге после имени, через пробел, в формате имя="значение". Кавычки обязательны!

Текст между <a> и </a> — это то, на что нажимает посетитель. По умолчанию браузер делает его синим и подчёркнутым, а посещённые ссылки — фиолетовыми.

Виды адресов

  • Абсолютный адрес — полный, с протоколом: https://www.openstreetmap.org. Нужен для ссылок на другие сайты. Без https:// браузер будет искать файл у тебя в папке!
  • Относительный адрес — путь к файлу своего сайта: about.html (файл в той же папке), pages/games.html (файл в папке pages). Подробнее разберём на занятии о многостраничных сайтах.
  • Якорь — ссылка на место на той же странице: #games.
  • Почта: mailto:адрес — открывает почтовую программу.

Открыть в новой вкладке: target="_blank"

<a href="https://ru.wikipedia.org" target="_blank">Википедия</a>

Атрибут target="_blank" открывает ссылку в новой вкладке, и твой сайт остаётся открытым. Обычно так делают для ссылок на чужие сайты. Ссылки внутри своего сайта лучше открывать в той же вкладке — иначе у посетителя накопится куча вкладок.

Якоря: переход к разделу страницы

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

  1. Даём элементу-цели уникальное имя атрибутом id: <h2 id="games">Мои игры</h2>.
  2. Делаем ссылку с решёткой # и этим именем: <a href="#games">К играм</a>.

Правила для id: латиница, без пробелов, уникальное на странице (двух одинаковых id быть не должно). В id решётку не пишем, в href — пишем.

Ссылка href="#top" на элемент с id="top" в начале страницы — классическая кнопка «Наверх».

Хороший текст ссылки

Текст ссылки должен объяснять, куда она ведёт. Люди «пробегают» страницу глазами, а незрячие пользователи часто слушают список всех ссылок подряд. Сравни:

  • ❌ «Чтобы узнать расписание, нажмите здесь».
  • ✅ «Посмотрите расписание кружков».

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

  • Ставь ссылки только на сайты, которым доверяешь.
  • Не публикуй на сайте свою личную почту в mailto:.
  • Прежде чем нажать на незнакомую ссылку, наведи на неё мышь — внизу браузера появится настоящий адрес.

Частые ошибки

  • href="ru.wikipedia.org" без https:// — ссылка не работает.
  • Не совпадают имена: id="Games" и href="#games" — регистр букв важен.
  • Решётка в id: id="#games" — так неправильно.
  • Забыты кавычки или закрывающий </a> — ссылкой стал весь текст ниже.

Проверь себя

  1. Что такое атрибут и где он пишется?
  2. Как сделать, чтобы ссылка открылась в новой вкладке?
  3. Какие два шага нужны, чтобы сделать ссылку-якорь?

⌨️ Практика

  1. Сделай меню-список из трёх ссылок на полезные сайты, открывающихся в новой вкладке.
  2. Добавь на страницу три раздела с id: «books», «games», «music».
  3. Сделай вверху меню-якоря, которые прокручивают к разделам.
  4. В конце страницы добавь ссылку «Наверх».

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход