🧱

Модуль 1. Введение и HTML

Занятие 6
Ссылки

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

👀

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

🕸

Всемирная паутина

HyperText — текст со ссылками.

Ссылки соединяют миллионы страниц в паутину — World Wide Web (www).

Без ссылок интернет был бы кучей отдельных листочков.

🔗

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

  • a — ссылка
  • href="…" — куда ведёт
  • Текст внутри — на что нажимать

Атрибут = настройка тега: имя="значение"

<p>
  Я читаю
  <a href="https://ru.wikipedia.org">Википедию</a>
  каждый день.
</p>
🗂

Какие бывают адреса

  • 🌐 https://site.ru — другой сайт (нужен https://)
  • 📄 about.html — страница моего сайта
  • ⚓ #games — место на этой странице
  • ✉️ mailto:… — написать письмо
🆕

Новая вкладка: target="_blank"

  • Чужой сайт → новая вкладка
  • Свой сайт → та же вкладка

Так посетитель не потеряет твой сайт.

<a href="https://www.openstreetmap.org" target="_blank">
  Открыть карту в новой вкладке
</a>
⚓

Якоря: прыжок по странице

  1. Цели даём имя: id="games"
  2. Ссылка с решёткой: href="#games"

В id — без #, в href — с #

<a href="#games">К играм ↓</a>
<p style="height: 250px">Много текста...</p>
<h2 id="games">Мои игры</h2>
<a href="#">Наверх ↑</a>
✍️

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

❌ Расписание — нажмите здесь
✅ Смотрите расписание кружков

Из текста ссылки должно быть понятно, куда она ведёт.

🛡 Наведи мышь на ссылку — внизу браузера увидишь настоящий адрес.

🐞

Почему ссылки не работают?

Найди 3 ошибки.

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

<a href="#Music">К музыке</a>
<h2 id="#music">Музыка</h2>
🃏

Запомни!

  • <a href="…">Ссылка
  • target="_blank"Открыть в новой вкладке
  • id="name"Имя места на странице
  • href="#name"Ссылка-якорь на это место
  • href="page.html"Ссылка на свою страницу
⌨️

Практика: Меню ссылок на внешние сайты и разделы страницы

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

🚀 Со звёздочкой: Сделай ссылку, которая открывает письмо: href="mailto:…". Подумай, почему нельзя указывать свою личную почту на публичном сайте.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

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

✨ По желанию: Подбери 3 безопасных полезных сайта по своему хобби.