Гиперссылки и навигация сайта

Гиперссылки и навигация сайта

Собери мини-сайт из трёх локальных страниц и свяжи их относительными ссылками.

Без ссылок страницы остаются отдельными файлами. Со ссылками они становятся сайтом, по которому можно ходить.

Результат урока

Объяснишь, зачем нужна гиперссылка; создашь в папке MiniSite_10 три файла (index.html, about.html, hobbies.html или аналогичные) с каркасом HTML и меню из относительных href; проверишь переходы в обе стороны; различишь относительный и абсолютный URL; найдёшь и исправишь одну сломанную ссылку.

Перед началом

Работай в своей папке и соблюдай правила кабинета. При неисправности остановись и обратись к учителю. Нужны простой текстовый редактор и браузер. Интернет для практики не нужен.

На учебной странице размещай только учебный текст: без домашнего адреса, телефона и личных фотографий.

Вспомни: каркас HTML (html, head, body, title, h1, p), расширение .html и обновление страницы по F5 — с урока 9. Теги оформления текста и списки — с уроков 10–11. Новое — переходы между страницами.

Основа — § 7 учебника. Изображения и CSS — следующие уроки. Атрибут target="_blank" сегодня в резерве.

Зачем нужна гиперссылка

Гиперссылка — элемент страницы, по которому читатель переходит к другому документу, разделу или ресурсу. Именно ссылки превращают набор файлов в навигацию сайта.

Без ссылки страница существует, но от неё нельзя уйти кликом. С ссылкой браузер знает, какой файл открыть следующим.

Элемент a и атрибут href

Ссылку создаёт парный тег <a>. Адрес перехода задаёт атрибут href (hypertext reference).

<a href="about.html">О себе</a>

Текст ссылки должен говорить о цели: «О себе», а не «нажмите сюда». Теги браузер выполняет: если на странице видны сами <a> и href, файл, скорее всего, сохранён не как .html.

Относительный и абсолютный адрес

Относительный адрес указывает путь от текущего файла. Для страниц в одной папке достаточно имени файла: about.html, index.html.

Абсолютный URL задаёт полный адрес с протоколом и доменом, например https://example.com/about.html. Он не зависит от того, в какой папке лежит текущий файл, но для учебного мини-сайта на диске неудобен: без сети и домена такой переход не откроет соседний файл.

Сегодня в практике используй относительные имена файлов. Абсолютный URL нужно уметь отличить и объяснить.

Три страницы — один сайт

Мини-сайт — несколько HTML-файлов с общей темой и взаимными ссылками. На уроке:

Имена можно чуть изменить, но все три файла должны лежать в одной папке, иначе относительный href «сломается».

Навигация на каждой странице

Одинаковое меню на каждой странице помогает ходить по сайту в обе стороны: с главной на «О себе» и обратно, с «Увлечений» на главную и т. д.

<p>
  <a href="index.html">Главная</a> |
  <a href="about.html">О себе</a> |
  <a href="hobbies.html">Увлечения</a>
</p>

Проверка: открой index.html в браузере, перейди на каждую страницу и вернись. Если хотя бы один переход не работает — ищи опечатку в href или в имени файла.

Сломанная ссылка

Ссылка «ломается», когда браузер не находит файл по адресу из href.

Типичные ошибки: About.html вместо about.html (регистр), hobies.html (опечатка), файл лежит в другой папке, забыли расширение .html.

Сохранение файлов сайта

Все страницы мини-сайта сохраняй в одну папку MiniSite_10 (10 — номер места), тип «Все файлы», кодировка UTF-8, расширение .html.

Просмотр в браузере

Открой index.html двойным щелчком. Кликай по ссылкам меню. После правки кода сохрани файл и обнови страницу (F5). Интернет не нужен: браузер читает файлы с диска.

Чек-лист переходов

Пауза перед практикой

На минуту отведи взгляд от экрана, расслабь кисти и проверь посадку. Затем переходи к своей папке.

Практика: MiniSite_10

Создай папку MiniSite_10 в своей рабочей папке.

Лист проверки

Критерии готовности

Шесть диагностических баллов: три .html-файла в одной папке; на каждой странице есть меню из относительных href; переходы работают в обе стороны между всеми страницами; ученик объясняет отличие относительного и абсолютного URL; сломанная ссылка найдена и исправлена; правка видна после сохранения и F5. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: единый текст меню скопирован без расхождений; добавлена четвёртая учебная страница; кратко объяснить, почему target="_blank" сегодня не обязателен.

Если результат отличается

Объясни самостоятельно

1. Зачем нужна гиперссылка и какая роль у атрибута href?
2. Чем относительный адрес отличается от абсолютного URL? Какой удобнее для трёх файлов в одной папке?
3. Что проверить в первую очередь, если ссылка «не работает»?

Показать ответ после выполнения

Домашнее задание

§ 7, фрагмент о гиперссылках и адресах. Письменно: 1) зачем нужна гиперссылка; 2) чем относительный href отличается от абсолютного URL; 3) две причины, почему ссылка может «не работать». По желанию — дописать текст на страницах MiniSite. Изображения, CSS и target="_blank" не задаются. Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: глава 2, § 7 «Создание веб-страниц» (гиперссылки). Содержание главы. Электронное приложение.

MDN Web Docs: элемент a, создание ссылок.

MiniSite, чек-лист переходов, лист и критерии — авторская адаптация; одиннадцать иллюстраций условные и не являются снимками браузера или редактора.