Главная › Новости

Якоря

Опубликовано: 14.10.2023

Якоря

Два шага - Установка якоря - Вставить ссылку - Пример - Коварство - Преимущества - Комбинация - История - Механизм функциональности - Дифференциация нажатого якоря - Ссылка на любой текст на странице

Должно быть, вы сталкивались со странными ссылками во время просмотра веб-страниц, которые не переключались на другой текст, а простопрокручивалитекст куда-нибудь вниз. Такие ссылки называются ссылками наанкоры(ранее также закладки, в английском чаще всегоанкоры, илифрагмент). Общепринятого названия начешском нет, но якорь, вероятно, усядется,потому что слово «закладки», которым я называл якоря, сегодня гораздо чаще используется для различных окон в браузере (также вкладок, вкладок), или для избранных элементов (закладок ).

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

Я предполагаю, что вы знаете использование ссылки в HTML.

Два шага

Чтобы разместить на странице якорную ссылку, мне нужно сделать две вещи.

1. Вставьте якорь в текст и назовите его.
2. Создайте ссылку, которая будет указывать на якорь.

Установка якоря

В HTML-коде якорь выглядит так:

На первый взгляд это выглядит как ссылка — буква «а» в начале, но это не ссылка. Он отличается двумя способами. Во-первых, ссылка не содержит цели (атрибут href), во-вторых, она пуста = не содержит текста (то есть, точнее: может содержать, ноне можета если есть,насколько я знаю, это не имеет никакого значения). Поэтому якорь не будет отражаться на отображении текста на странице. Единственный смысл такой:

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

Атрибут имени важен для привязки. Вы также можете указать атрибут id, он должен работать так же, как имя. Хорошо вводить анкорный текст четко и логично (но без пробелов и диакритических знаков).

Более современная установка анкера

Все браузеры, используемые в 2005 году, уже могут перейти к якорю, указанному более современным способом, а именно через атрибут id . Кроме того, он не обязательно должен быть в теге. Например:

Заголовок

или возможно

некоторые образцы

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

Так что же использовать?

Не беда, но я бы лучше рекомендовал вставлять якоря через id. Так, например:

Абзац про котенка...

Вставка якорной ссылки

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

В коде ссылка выглядит так:

текст ссылки.

Опытные авторы признают классическую ссылку (а в начале + атрибут href). Только атрибут href имеет этот магический крест в начале. #. Крестик просто означает, что ссылка не на файл, а на якорь. Теперь понятно и то, почему это было так важно имя якоря (это слово стоит за крестом).

(Если вы не знаете, как написать знак #, на чешской клавиатуре это делается путем удержания правого Alt и нажатия клавиши X. На английской клавиатуре это тройка со сдвигом.)

Пример

Якорь, характеризующийся этим кодом, вставлен в начале этой страницы:

...

Следующая ссылка имеет этот код:

Попробуй!

После нажатия на нее следует переключиться на верхнюю часть страницы (то есть на якорь). Попробуй это!

Коварство

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

• Они затрудняют навигацию по страницам, поскольку у читателя возникает ошибочное ощущение, что он после ссылки находится на другой странице.
• Они прерывают поток текста. Сняв якорь, я забываю, где уже читал, а где нет. Якорные ссылки не меняют цвет, как обычные ссылки.
• Это заставляет вас прокручивать. Если я хочу вернуться туда, где я щелкнул якорь, мне придется развернуть окно. К счастью, браузеры запоминают, что было в окне до того, как вы нажали на него, и позволяют разумно использовать кнопку «Назад».
• Старайтесь не размещать ссылки на другие страницы и не закреплять ссылки рядом друг с другом. Это сбивает с толку читателей. Всегда старайтесь как-то указать, что это ссылка на якорь (чаще всего через форматирование, окружающий текст или контекст). (Я использую курсив, но я сам полевой солдат.)

Преимущества

Якоря существенно облегчают ориентацию в длинных текстах. В начале каждого такого текста желательно поставить строку с названиями активных глав или параграфов. Когда у меня есть время и настроение, я это делаю. Я заранее определил, что они будут отображаться курсивом (используя CSS и занятия "якорь").

Google может перечислить важные привязки, которые он находит на странице, прямо в фрагменте ссылки.

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

Многие авторы используют ссылки "В начало страницы". Иногда это бывает полезно. Я этого не делаю, потому что считаю, что читатели не такие уж глупые и могут сами пролистать туда (например, с помощью клавиши «Домой»).

Если вы используете Word для создания своих страниц, якоря и ссылки на них будут хорошо переводиться. Аналогично автоматическое содержание (только вместо номеров страниц у них звездочка со ссылкой).

Комбинация

Используется редко, но при этом можно сделать обычную ссылку якорем. Просто добавьте атрибут имени (и идентификатор формы) к ссылке:

Текстовая ссылка

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

текст ссылки

Это используется гораздо чаще.

История

Тот факт, что якорь и ссылка вводятся с одним и тем же тегом (т.е. с буквой А ) дается историческим развитием. В доисторическом HTML (начало 1990-х годов) существовало очень мало символов, и кодификаторы не хотели создавать ненужные новые. Исторически сложилось так, что у нас есть один тег для двух совершенно разных вещей. Но эта двойственность исключает вставку якорей с использованием id.

Механизм функциональности

Немного теории, можете пропустить.

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

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

https://www.jakpsatweb.cz/kotvy.html #механизм

(где #meanism — пример имени привязки).

Что делает браузер с таким адресом? Он просто берет все, что предшествует персонажу #,воспринимает это как адрес и переключается на него (если он уже на нем, то загружает страницу из кеша). Затем он берет все после знака #, он интерпретирует это как имя привязки и ищет в исходном коде страницы элемент, для которого значение параметра id (или name) установлено равным имя якоря. Если он его находит, он прокручивается до этого места.

Дифференциация нажатого якоря

Когда кто-то нажимает на ссылку, которая прокручивается до половины страницы, он иногда не знает, где находится. В таком случае пригодится графическая подсветка, чтобы он знал, на что обратить внимание.

В CSS есть новый псевдокласс: цель. При присоединении к элементу, который используется в качестве привязки, элемент можно выбрать и отформатировать с помощью этого псевдокласса. Это немного грубовато, лучше привести пример. В заголовке документа будет стиль, а затем абзац h2 с заданным идентификатором в тексте.

При нажатии на ссылку в конце URL-адреса появляется #anor. Это сигнал странице о том, что ей следует сначала прокрутиться до элемента с идентификатором привязки. Во-вторых, стиль проходит через документ, если какой-либо элемент h2 не имеет установленного идентификатора, равного значению привязки в URL-адресе. Если да, он отформатирует этот элемент (в частности, установит желтый фон). Попробуйте ссылку на живой пример. Он работает только в новых браузерах (после 2010 года) и требует Internet Exorer 9. строгий тип документа.

Ссылка на любой текст на странице

Некоторые браузеры могут выполнять поиск по странице сразу после перехода по ссылке. какой-то текст,прокрутите до него и выберите его. Например, если бы я ввел поиск с помощью Ctrl+F на целевой странице и нажал Enter.

Это похоже на якорную ссылку, но вместо имени якоря используется двойной крест пишет особая последовательность символов за которым следует текст поиска.

# :~:текст=

Так, например, URL-адрес главной страницы этого сайта (jakpsatweb.cz) с выделенным текстом «мета-теги» выглядит так:

https://www.jakpsatweb.cz/ # :~:текст= мета %20 теги

Обратите внимание, что зазор в поиск текста заменен escape-последовательность %20. Здесь нельзя использовать символ +, который может заменить пробел в других ситуациях в URL-адресе.

Написано в ссылке, то логически это выглядит так:

Ссылка для выделения метатегов на странице

На английском языке он называется URL Scroll To Text Fragment , иногда также пишется через дефисы: URL Scroll-To-Text фрагмент . Он выделит первое вхождение строки поиска на странице. Если этой строки нет, ничего не происходит, она просто переходит на целевую страницу без выделения или прокрутки.

Изменение желтухи

Теоретически найденный текст должен быть отформатирован иначе, чем с желтым фоном при использовании псевдоэлемента ::target-text.

::target-text {цвет фона: аква;}

Когда это будет работать:

• Браузер Chrome или его родственники (в 2020 году Edge, Seznam, Opera) и браузеры на Android
• искомый текст должен быть целыми словами - у меня не сработало при поиске подстроки
• они должны быть на странице именно такими, какими они написаны в ссылке.
• строчные и прописные буквы могут отличаться
• Чешские символы в ссылке можно вводить обычным способом, но ссылающаяся и связанная страницы должны быть в одной и той же кодировке. В противном случае чешские символы необходимо будет экранировать (в кодировке целевой страницы).

Итак, как обычно: это не то, что всегда работает, и на него нельзя положиться. Но риск ошибки невелик, и в случае неудачи он просто ничего не высветит.

Версия Chrome от ноября 2021 года позволяет вам вызвать опцию «Копировать выделенную ссылку» из контекстного меню, которая делает именно это: копирует URL-адрес страницы, добавляет #:~:text= и выделенный текст (экранированный) к это.

Опубликовано где-то в 2000 году, постоянно обновляется, последний раз в июне 2022 года.