Главная / Сайтостроение / Бросаем якоря!

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

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

Якорь и анкор

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

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

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

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

Пример:

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

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

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

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

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

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

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

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

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

  • для html

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

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

  • для xhtml

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

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

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

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

Я считаю последний вариант избыточным. Попробуйте писать id, если не будет работать – меняйте его на name.

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

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

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

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

<p>Вот наш текст со <a id=”#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 отличий!))) Мы подписали название анкора к адресу ссылки. Не забываем предварять эту метку знаком # — именно в ссылке.

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

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

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

Читайте также

Как оптимизировать картинки для блога?

Как оптимизировать картинки для блога?

Недавно мы обсуждали, как важен для блога качественный графический контент. В комментах к статье было ...

Один комментарий

  1. Вячеслав

    Реанимированные комменты

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

    katyaru:
    31.05.2012 в 22:14
    Это магия… html)))

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

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

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

    katyaru:
    01.06.2012 в 09:40
    Стараюсь!

    ladosha:
    01.06.2012 в 10:11
    Весьма полезно. Мне всегда было лень в этом разбираться.

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

    anjelika:
    01.06.2012 в 21:54
    как всегда очень много полезного, спасибо, надо будет попробовать

    katyaru:
    01.06.2012 в 22:02
    Да, это очень приятная для читателя, а значит, полезная для блоггера штука!

Добавить комментарий

Ваш e-mail не будет опубликован.