Ссылки, пути и якоря
Добавим переходы из карточек и разберём абсолютные адреса, относительные пути и якоря страницы.
В каталоге уже есть шесть курсов, но их названия пока являются обычным текстом. Теперь карточка должна вести к соответствующему оглавлению. Это задача ссылки: читатель выбирает новое местоположение, а браузер выполняет переход. Для этого не нужно добавлять обработчик JavaScript или рисовать кнопку внутри названия. Важно правильно записать адрес и не потерять смысл текста ссылки.
Наш пример открывается как самостоятельный файл. Поэтому ссылки на настоящие курсы запишем целиком, включая протокол и домен ProfessorWeb. Навигация внутри каталога останется локальной. Такой выбор сделан по месту запуска, а не по внешнему виду: одна и та же ссылка может выглядеть одинаково при совершенно разном разрешении пути.
Адрес в названии курса
В карточке Markdown замените текст h3 ссылкой. Остальная разметка карточки не меняется:
<h3 class="course-title">
<a href="https://professorweb.ru/courses/static-site-markdown/">
Статический сайт из Markdown
</a>
</h3>При выборе названия ожидается открытие оглавления на ProfessorWeb. После изменения пяти остальных карточек каждая должна вести в свой курс. Не копируйте первый адрес во все записи. Название сообщает цель перехода, но браузер не выводит из него маршрут автоматически: значение href и видимый текст независимы.
| Название | Полный адрес |
|---|---|
| Техническое SEO | https://professorweb.ru/courses/technical-seo/ |
| Поиск по сайту | https://professorweb.ru/courses/site-search/ |
| Деплоймент | https://professorweb.ru/courses/web-deployment/ |
| Дизайн статьи | https://professorweb.ru/courses/article-design/ |
| Доступность | https://professorweb.ru/courses/web-accessibility/ |
Ссылка, у которой есть href, предоставляет браузерные возможности перехода: её можно открыть в другой вкладке или скопировать через контекстное меню. Назначение элемента и поддерживаемые атрибуты перечислены в MDN. В примере не указываем target: обычный переход остаётся в текущей вкладке. Читатель сам может выбрать другое поведение.
Имя курса достаточно содержательно, чтобы понять цель. Слова «нажмите здесь» заставили бы искать описание рядом. Не делайте всю карточку большой ссылкой с вложенными ссылками: вложенность таких интерактивных элементов будет некорректной. Пока кликабельным является только название. Позднее можно увеличить его внутреннюю область через CSS, сохранив одну ясную точку перехода.
Относительный путь зависит от документа
У бренда уже записано href="index.html". Для файла layout-lab/index.html такой адрес указывает на соседний файл с этим именем. Если документ перенести в layout-lab/pages/catalog.html, та же строка будет искать layout-lab/pages/index.html. Запись не означает «всегда на главную»; она означает путь относительно текущего адреса документа.
Рассмотрим три варианта для страницы https://example.test/lab/index.html:
styles.css → https://example.test/lab/styles.css
../index.html → https://example.test/index.html
/courses/ → https://example.test/courses/В первом случае ресурс расположен рядом. Во втором мы поднимаемся на уровень выше. В третьем начальный слеш означает путь от корня текущего сайта. Если написать /courses/ в файле, открытом через file:, это не превратит его в ссылку на ProfessorWeb. Браузер разрешит путь в рамках текущей схемы и окружения. Для самостоятельного примера поэтому выбраны полные адреса.
Пути в HTML-файле и CSS-файле тоже нужно различать. Ссылка на таблицу стилей вычисляется относительно документа. Путь изображения внутри url() в обычной внешней таблице стилей вычисляется относительно адреса этой таблицы. Если позже переместить CSS в папку css, прежнее url("assets/cover.svg") может начать искать другую папку. Мы избежим этого усложнения, сохраняя styles.css рядом с index.html.
Переименование папки не должно быть случайным способом исправлять переходы. Сначала выясните текущий адрес документа и конечный адрес ресурса, затем выберите нужное отношение между ними. На этапе сопровождения это быстрее, чем многократно добавлять и удалять слеши. Для большого сайта таблица постоянных URL становится отдельным источником данных; в нашем небольшом каталоге достаточно согласованной записи шести адресов.
Якорь выбирает место внутри страницы
Навигация содержит href="#courses". Часть после решётки соответствует идентификатору раздела каталога. При переходе браузер должен переместить страницу к этому элементу и добавить фрагмент в адрес. Он не создаёт новую страницу и не отправляет сам фрагмент как путь к отдельному файлу. В нашем HTML целевой section уже имеет id="courses".
В футере другая ссылка ведёт на #main. Она возвращает к началу основного содержимого, а не к произвольному верхнему пикселю окна. Это полезнее, чем пустой href="#": цель названа явно и существует в документе. Если заменить идентификатор у main, нужно поменять и ссылку. Браузер не предупреждает автора при каждом несоответствии; переход может лишь перестать давать ожидаемый эффект.
Нельзя повторять один id в шести карточках. Если позднее понадобятся прямые ссылки на отдельные курсы, назначьте разные значения, например course-markdown и course-seo. Класс course-card оставьте общим. Класс объединяет элементы для стилей, идентификатор позволяет указать один конкретный узел. Эти задачи похожи по синтаксису атрибутов, но различаются по назначению.
Ссылка и действие формы
Не заменяйте переход к курсу кнопкой только потому, что вам нужен прямоугольный фон. Ссылку можно оформить средствами CSS. Кнопка подходит для отправки формы и других действий внутри интерфейса. В пятом уроке она действительно появится и будет отправлять параметры. Сейчас мы сохраняем простой контракт: название курса меняет страницу, навигация выбирает фрагмент текущего документа.
Для ручной проверки выберите каждое название и сравните конечное оглавление с текстом карточки. Затем вернитесь к каталогу и попробуйте открыть название через контекстное меню. Проверьте переходы в шапке и футере. Это ожидаемые сценарии, а не отчёт о выполненной проверке: учебные исходники на этом этапе подготовлены для самостоятельного открытия.
Если в адресе ссылки есть несколько параметров, в исходном HTML разделяющий амперсанд удобно записывать как &. Браузер разбирает символьную ссылку и получает нужный символ в значении атрибута. Это относится к записи HTML, а не к ручной замене любого знака в самой адресной строке. Значение href, которое видно в исходнике, проходит разбор документа прежде, чем становится адресом перехода. Поэтому при диагностике полезно сравнивать и текст файла, и вычисленное значение в браузере.
Завершающий слеш в адресе оглавления тоже имеет значение для разрешения относительных путей внутри целевого документа. Не следует удалять его только ради короткой записи. Мы копируем постоянный адрес существующего курса целиком. При миграции сайта такой адрес становится частью контракта, и изменение имени файла учебного примера не должно случайно менять внешнее назначение ссылки.
После добавления адресов каталог становится системой переходов. Однако смысл карточек всё ещё хранится в тексте, а изображения отсутствуют. В следующем уроке добавим обложку и разберём, почему размер файла, собственный размер изображения и его размер на странице являются разными величинами.