Как сделать якорь на страницу

Закрыть ... [X]

tehnopost.info

Якорь в HTML | Закладка на веб-странице

 Якорь в HTML – это закладка на поле веб-страницы. Вся эта статья сделана закладками-якорями. Кликая по ссылкам в этой статье и перемещаясь по закладкам на этой странице можно якорь легко понять, что такое якоря, зачем они нужны и как они работают.

  1. Пример использования якоря
  2. Действие якоря
  3. Показания к применению якоря
  4. Как создать и установить якорь на веб-странице
  5. Имя якоря
  6. Код якоря
    1. Код классического якоря (тег <а>)
    2. Код правильного якоря
    3. «невидимый» и «видимый» якоря
    4. Код самого простого якоря
    5. Якорь в заголовке, в списке, в таблице.
      Якорь в любом открывающем теге элемента HTML...
  7. Ссылка на якорь
    1. Код ссылки на якорь, в пределах одной страницы
    2. Код ссылки на якорь, расположенный на другой странице
    3. Код ссылки на якорь, расположенный на другом домене (блоге, сайте)
    4. Абсолютная ссылка

(продолжение статьи – Зачем на сайте якоря)

Пример практического использования якорей в HTML – настоящая статья с меню-оглавлением. В этом случае, в ключевые разделы и заголовки текста статьи были установлены якоря, а пункты меню оглавления – выступают ссылками на них. Кликая по ссылкам в меню оглавления статьи, пользователь перемещается в нужные места и разделы в теле самой статьи.

Переход пользователя по ссылке на якорь приводит его (пользователя) к месту установки якоря, к «заякоренной» намеченной точке на веб-странице. Иными словами, при переходе пользователя по ссылке на якорь – веб-страница откроется в браузере не со своего сначала, а сразу в том месте, где этот якорь установлен. Более подробно можно почитать в статье «Зачем на сайте якоря»

Якорь в гипертекстовой разметке HTML применяется, когда необходимо направить пользователя непосредственно в требуемое место страницы, минуя утомительное листание всего текста. Такое перенаправление может понадобиться в рекламных целях, или просто – по желанию другого пользователя. Например, если нужно сделать интерактивное меню-оглавление для большой статьи, такое как в статье про якоря.

Как создать и установить якорь на веб-странице

(к оглавлению)

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

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

На одной странице (по одному веб-адресу) не может быть двух якорей с одинаковым именем. Если на одной странице будут находиться якоря с одинаковым именем, то они – либо совсем не будут работать, либо будет открываться только первый из них (это зависит от браузера пользователя).

Но! Якоря с одинаковым именем, расположенные на разных веб-страницах (по разным веб-адресам) – будут прекрасно работать. Например, у меня на всех страницах блога стоит якорь "zaglavie" и отлично работает на каждой странице.

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

Изначально, для создания пользовательских якорей, в HTML был задуман тег <a> и его атрибут name. Параллельно атрибуту name, у тега <a> существовал атрибут id, который тоже расценивался как якорь на веб-странице. Так они и стали родоначальниками классических якорей – тег <a> и его атрибуты – name и (или) id

Код классического якоря создаётся при помощи тега <a>
При этом – имя якоря (его идентификатор)
задаётся через атрибуты тега <a> – name или id
Таким образом, код классического якоря,
вставляемый в документ HTML будет иметь вид
<a name="razdel"></a> или <a id="razdel"></a>
где, слово "razdel" – это произвольное уникальное имя якоря
в пределах страницы его местонахождения.

«невидимый» и «видимый» якоря, анкор якоря

(к оглавлению)

Правильные якоря бывают видимыми и невидимыми. «Видимым» называется тот якорь, который имеет анкор – видимую часть элемента. Как правило, это текстовая часть. Лично я такими якорями никогда не пользуюсь, поэтому упомянул про них исключительно ради объективности своего обзора.

Код невидимого якоря:
<a name="razdel"></a> или <a id="razdel"></a>
Код видимого якоря:
<a name="razdel">ТЕКСТ</a> или <a id="razdel"> ТЕКСТ </a>
где, слово «ТЕКСТ» – видимая часть текста якоря (анкор). Этот текст (анкор) будет «отсвечивать» в месте установки якоря.

И тут возникает вопрос в правильности выбора атрибута.
Какой из них правильней будет использовать – name или id ???
Если работают-то оба???

Относительно выбора атрибута name или id, то по отношению тега <a> – прекрасно работают оба варианта, поскольку тег <a> отлично поддерживает оба из них. Лично я, долгое время использовал конструкцию вида <p><a name="razdel"></a></p>, которую вручную вставлял в HTML-код текста непосредственно перед заголовком (тегом <Н>). При этом, якорь красиво открывал страницу сайта в месте его установки, с небольшим пробелом вверху экрана.

Через некоторое время, после очередного обновления своего HTML-редактора, я заметил, что он автоматически заменяет name на id, и везде ставит якоря, вида <a id="razdel"></a>

Всё понятно. Атрибут (идентификатор) «id» стал более предпочтительным, поскольку он более универсален. Атрибут (идентификатор) «id» легко обрабатывается браузером и поддерживается большинством тегов XHTML и HTML. В то время, когда атрибут name – это очень специфичный атрибут, который поддерживается только тегом <a>. И, если при помощи идентификатора id можно вставить якорь, практически в любой элемент веб-разметки, то при помощи атрибута name можно всунуть якорь только в тег <a>...

Но! С другой стороны – атрибут name, как раз-таки и придуман для создания якорей. При чём, этот атрибут придуман ещё на заре Интернет-времён и поддерживается ещё в древнейшем HTML 3.2. А это значит, что наш дорогой «name» уже присутствует на миллионах веб-страниц и его ещё не скоро отправят на помойку. Просто не смогут!

Таким образом получается что, с точки зрения классики веб-языков и истории создания кода якорей, то – более правильным будет атрибут name. Ну, а с точки зрения удобства, универсальности и прогресса, то, естественно – код правильного якоря должен быть написан через атрибут id и иметь вид: <a id="razdel"></a>

Но, два раза правильно – так не бывает! Где же истина?
И, как будет более правильно, <a name="razdel"></a> или <a id="razdel"></a>?

Истину, как всегда, можно узреть в корне проблемы, задавшись вопросом – «А при чём здесь вообще тег <a>, если атрибут id поддерживают почти все теги HTML?». Если атрибут id имеет такую широкую поддержку, то не проще будет пользоваться именно им? Ведь тогда код якоря значительно упрощается и сводится к виду id="razdel", который можно установить почти в любой открывающий тег HTML и XHTML!

Атрибут («id») поддерживают теги списков (ul, ol, li, dl, dd, dt), теги таблицы (table, tr, td...), теги блоков и абзацев (div, p) и ещё семь десятков открывающих тегов других элементов HTML. И, во все из них можно вставить или попытаться вставить якорь, при помощи атрибута «id». Делается это достаточно просто – в открывающий тег требемого элемента нужно добавить конструкцию, вида id="razdel", где, естественно, слово "razdel" – это уникальное имя якоря в пределах его страницы. Если такая конструкция там уже есть, например – она может быть сделана верстальщиком шаблона сайта, значит – ничего делать не нужно. Якорь уже стоит. Надо только запомнить его имя и сделать ссылку на него.

Якорь в заголовке, в списке, в таблице.
Якорь в любом открывающем теге элемента HTML...

(к оглавлению)

Таким образом, учитывая что код самого простого якоря имеет вид id="razdel", то код требуемого элемента разметки HTML, с установленным в него якорем, будет выглядеть, примерно так:

для заголовка (h1, h2, h3, h4, h5, h6) <h1 id="razdel">Текст заголовка... для списка (ul, ol, dl) и его элементов (li, dt, dd) <ul id="razdel">тело списка...
<li id="razdel">тело элемента списка... для элементов таблицы (table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr) <table id="razdel">тело таблицы или её элемента...
... и так далее, и тому подобные конструкции, вида:
<div id="razdel"> или <p id="razdel">
и всё это будут – якоря в открывающих тегах элементов HTML.
(закрывающие теги для элементов, естественно – обязательно)

Прошу прощения за столь вольное обращение с написанием тегов, но я всего лишь хотел подчеркнуть собственное бессилие перед созиданием и проверкой семи десятков почти одинаковых примеров. И так понятно, что код якоря вида id="razdel" можно вставить, практически в любой открывающий тег HTML. И такой якорь должен работать. Для примера, вся эта статья сделана именно такими якорями.

Ссылка на якорь создаётся при помощи тега <a> и его атрибута href. Ссылка на якорь ничем не отличается от обычной ссылки, с той только разницей, что к адресу веб-документа добавляется решётка (#) и имя якоря. Как и все остальные ссылки на свете, ссылки на якорь могут быть локальными и абсолютными. Локальные – это ссылки на якорь в пределах одного сайта (домена), абсолютные – это ссылки с указанием полного веб-пути к веб-странице и якорю на ней. Как правило, абсолютные ссылки используют для якорей расположенных на других сайтах (доменах). Количество ссылок на один якорь и место расположения этих ссылок ни чем не лимитировано и ни как не ограничено. На один и тот же якорь может быть сколько угодно ссылок, расположенным по всем страницам всех сайтов Интернета.

Все ссылки на якоря можно условно разделить на три группы:

1 группа – Локальные ссылки на якорь,
расположенный в пределах одной страницы Код ссылки на якорь, расположенный в пределах одной и той же страницы, будет выглядеть так: <a href="#razdel">ТЕКСТ ССЫЛКИ</a> где, razdel – это уникальное имя якоря в пределах документа html, а ТЕКСТ ССЫЛКИ – это видимая текстовая часть (анкор) ссылки.

Если якорь и ссылка на него находятся в пределах одной страницы сайта или блога, то полный путь к якорю в ссылке указывать не обязательно, достаточно просто решётки и имени якоря – #razdel. Браузер сам найдёт якорь на странице, причём сделает это гораздо быстрее, нежели в случае с полным указанием абсолютного пути к якорю, когда потребуется перезагрузка страницы.

2 группа – Локальные ссылки на якорь,
расположенный в пределах одного домена (сайта, блога) Код ссылки на якорь, расположенный на другой странице в том же домене имеет вид: <a href="/adress-stranici.html#razdel">ТЕКСТ ССЫЛКИ</a> где, /adress-stranici.html – адрес веб-страницы без указания домена, razdel – уникальное имя якоря, в пределах именно той страницы, где он расположен.

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

3 группа – Абсолютные ссылки на якорь,
расположенный на другом домене (блоге, сайте) Если якорь и ссылка на него находятся на страницах разных сайтов с разными доменными именами, то в такой ссылке нужно прописать полный (абсолютный) путь к веб-документу и якорю на нём. Делается это, с указанием протокола (обычно http), домена (доменного имени сайта), полного адреса страницы и уникального имени самого якоря. Код такой ссылки будет выглядеть так:
<a href="http://tehnopost.info/adress-stranici.html#razdel">ТЕКСТ ССЫЛКИ</a> где, http://tehnopost.info/adress-stranici.html – полный адрес страницы в Сети, с указанием домена, razdel – уникальное имя якоря, в пределах страницы его местонахождения.

Ссылка с указанием полного пути называется абсолютной ссылкой.
Абсолютные ссылки можно использовать для любых якорей, даже находящихся на одной и той же странице. Абсолютные ссылки наиболее предпочтительны для SEO-оптимизации страницы и сайта, ибо, зачастую – якоря, на которые сделаны абсолютные ссылки – могут быть засчитаны поисковиком за абсолютно разные веб-адреса и тексты. И, даже – якоря, на которые сделаны абсолютные ссылки – могут предлагаться отдельными позициями при выдаче в СЕРП (страницу поисковой выдачи). По крайней мере, у Google такое иногда наблюдается.

Недостаток работы абсолютной ссылки на якорь – полная перезагрузка страницы из сервера. Т.е. переход на якорь происходит с полной перезагрузкой страницы в браузер, даже если якорь и ссылка на него находятся на одной странице. Полная перезагрузка страницы занимает дополнительное время, создаёт дополнительную нагрузку на сетевое подключение, дополнительно жрёт трафик пользователя и самое главное – не работает без подключённого Интернета (в локальном или автономном режиме).

Якорь в HTML | Закладка на веб-странице на tehnopost.info
(продолжение статьи – Зачем на сайте якоря)

  1. Зачем на сайте якоря
  2. Теория якорного дела
  3. Якорь в HTML – как это работает
  4. Якоря и SEO (поисковая оптимизация)
  5. Ограничения на количество якорей
  6. Код якоря и ссылки на него,
    способы установки якорей...

Исходный код:

<a href="#c204">204</a>

<a href="#razdel">ТЕКСТ ССЫЛКИ</a>


как сделать якорь на страницу <p id="razdel"><span class="letter">Р</span>азумные люди приспосабливаются к окружающему миру.
Неразумные люди приспосабливают мир к себе. <br>Вот почему прогресс определяется
действиями неразумных людей.</p>
<p>Бернард Шоу</p>

<div class="xyz">

<span id="c204">
204
</span>
Не работает. <br>
Может быть это специфика <br>
сконвертированного<br>
из doc html-файла?<br>
Буду благодарна за помощь<br>
</div>

Пример работы:

204 ТЕКСТ ССЫЛКИ

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

Бернард Шоу

204 Не работает.
Может быть это специфика
сконвертированного
из doc html-файла?
Буду благодарна за помощь

Буду благодарна за помощь

 

 HTML5

x Интернетчик: HTML сайт тег программирование интернет


Источник: http://tehnopost.info/html/10-yakor-ankor-na-veb-stranice.html


Поделись с друзьями



Рекомендуем посмотреть ещё:



Как сделать якорь ссылки на html странице и что это такое Как сделать их поролона маску


Как сделать якорь на страницу Как сделать якорь на страницу Как сделать якорь на страницу Как сделать якорь на страницу Как сделать якорь на страницу Как сделать якорь на страницу Как сделать якорь на страницу Как сделать якорь на страницу Как сделать якорь на страницу

ШОКИРУЮЩИЕ НОВОСТИ