Бросаем якоря!

Автор:Дата:Как сослаться не на всю страницу, а на ее фрагмент? Как поставить метку якоря и как прописать ее в ссылке?

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

Якорь и анкор

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

<a href= “http://site.ru/post/” title=”текст всплывающий при наведении курсора на нашу ссылку” target=”_blank” >текст ссылки на пост</a>

Кстати, здесь мы видим знакомый атрибут title, который нам встречался и в коде для оптимизации изображений. Атрибут target=”_blank” указывает, что ссылка будет открываться в новом окне (чтобы читатель не ушел с текущей страницы, не дочитав ее).

Но бывает, и очень часто, что нам нужно сослаться на какую-то часть текущей публикации. Самый простой пример – ссылка с текстом «наверх», нажав на которую, читатель вернется к заголовку статьи. Возможно у нас в тексте есть списки, перечисления, определения, которые важны для понимания отдельных его частей. Вместо того, чтобы объясняться, мол, вот выше мы писали о том и о том – можно просто поставить якорь, который вернет посетителя к нужному определению.

Пример:

Нажмите на стрелочку, чтобы вернуться к началу этой статьи

Нажмите на стрелочку, чтобы увидеть финал статьи

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

Как поставить якорь в публикации?

Посмотрим на простейший код, который оформляет текст:

<p>Трам-пам-пам! Здесь у нас текст.</p>

Или это заголовок, например, второго уровня

<h2>Наш заголовок велик и прекрасен</h2>

Чтобы отметить любой элемент текста якорем, нужно добавить рядом с ним следующий код:

  • для html
<a name="anchor"></a>
  • для xhtml

<a id="anchor"></a>

Сначала разберемся, что мы написали: name=”anchor” или id=”anchor” – это атрибуты, устанавливающие якорь. Вариант id=”…” – более «продвинутый», более валидный, то есть, соответствующий последним стандартам W3C. Для шаблонов, написанных на языке xhtml нужно использовать только его. Но для шаблонов, созданных при помощи html – подойдет и атрибут name=»…»

Слово anchor в кавычках – просто пример. Вы можете написать там любые метки, которые будут вам понятны. Требования к таким меткам: они должны быть написаны латиницей и начинаться с буквы. Также, привыкайте всё писать строчными буквами – для xhtml это правило, а для html – хороший тон.

Вот как это будет выглядеть целиком:

<a name="anchor"></a><p>Трам-пам-пам! Здесь у нас текст.</p>

Обратите внимание, что в теги анкора не обязательно заключать какой-то текст. Это просто точка, к которой вернет нас ссылка.

Автоматическая постановка анкора в редакторе Вордпресс

В редакторе есть специальная кнопка с изображением якоря, которая вставляет якорь в текст статьи. Поставьте курсор на то место, где хотите «зацепиться», и впишите имя якоря во всплывающем окне:

анкор в вордпрессе

Итак, мы расставили по тексту метки id=”anchor” или name=”anchor”, id=”anchor2” и т.д. Теперь будем на них ссылаться.

Как сослаться на якорь в текущей публикации?

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

<p>Вот наш текст со <a name=”#text1”>ссылкой на текст №1</a>.</p>

Выглядеть она будет, как обычная гиперссылка. Но при нажатии перенесет читателя к той части текста, которая была нами отмечена, как id=”text1”.

В примере с картинками код, окружающий картинку, выглядит так:

<a href=”#top”><img scr=»http;//site.ru/…/…/arrow_up.png» /></a>

То есть, вместо атрибута id стоит href.

Как сослаться на фрагмент другой страницы?

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

Но мы способны облегчить задачу, которую сами ставим перед посетителем. Он будет благодарен. А сделать это – легко. Прописываем обычную гиперссылку:

<p>Вот наш текст <a href= “http://site.ru/post/#text1” title=”” target=”_blank” >со ссылкой на фрагмент другого поста</a>.</p>

Найди 10 отличий!))) Мы подписали название анкора к адресу ссылки. Не забываем предварять эту метку знаком # — именно в ссылке.

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

И, вуаля! Теперь читатели непринужденно серфят по нашему блогу – им удобно, им приятно, им совершенно не хочется куда-то уходить…

А что еще нужно блоггеру?! — Ну, разве, чтобы вы делились его постом в социальных сетях и комментировали его!

Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Введите свой E-MAIL:

     Katyaru 31.05.2012


    
Читайте БлоготеЙ! на Google+
Читайте БлоготеЙ! на Фейсбуке

К записи "Бросаем якоря!" оставлено 15 коммент.

  1. Вот классно! ПА я все думала, как у них это получается? Сохраню себе и буду пользоваться.

    [Ответить]

    katyaru отвечает:

    Это магия… html)))

    [Ответить]

  2. Здорово!.. ))) Но надо будет перечитать это на свежую голову с утра, а то у меня мозг сегодня просто перегружен… )))

    [Ответить]

    katyaru отвечает:

    Да ты просто знай, что тут у меня об этом написано — как решишь воспользоваться, сразу придешь и на практике сделаешь)

    [Ответить]

  3. Ценный пост по всем пунктам, но особенно о ссылке на фрагмент другой статьи! Опять в закладочки ставлю.

    [Ответить]

    katyaru отвечает:

    Стараюсь!

    [Ответить]

  4. Весьма полезно. Мне всегда было лень в этом разбираться.

    [Ответить]

    katyaru отвечает:

    Мне тоже, но… все-таки я допинала себя до этого)))

    [Ответить]

  5. как всегда очень много полезного, спасибо, надо будет попробовать

    [Ответить]

    katyaru отвечает:

    Да, это очень приятная для читателя, а значит, полезная для блоггера штука!

    [Ответить]

  6. Григорий:

    Спасибо, очень помогло!

    [Ответить]

  7. Сергей:

    Отличная статья, спасибо!

    А вот то, что справа внизу у тебя стрелочка «вернуться в топ» — это тоже типа якорь, но в сайдбаре? Или нет? Как её прописать? В style.css отдельно?

    [Ответить]

    katyaru отвечает:

    Да, прописано в футере. В таблице стилей прописано, как должна отображаться эта кнопка (размеры, прозрачность)А уж куда автор шаблона засунул сам якорь (id=»top») — что-то не могу найти:)

    [Ответить]

  8. Влад:

    Вы не могли поставить якорь на какой нибудь текст в этой статье, чтобы было понятнее?

    [Ответить]

  9. Влад:

    Разобрался, можете не ставить якорь

    [Ответить]


2 + = девять

Палю тему!
Гугл в помощь
Надо подписаться!

Введите свой E-MAIL:

Delivered by FeedBurner

Дружите с Блоготеем в соцсетях


Смотрите все ВИДЕО Блоготея на YouTube


Blogotey | 


Спутник Блоготея в Tumblr

НаверхКарта Сайта