Часто бывает так, что нам нужно отправить посетителя нашего сайта по ссылке именно на определенное место в нашей веб странице. Например, туда, где находится форма для подписки на рассылку; или туда, где находится описание определенного продукта из длинного списка продуктов, которые мы продаем. Таким образом, мы можем не волноваться о том, долистает ли пользователь страницу до нужного места. И сделать мы это можем поставив якорь для гиперссылки…
Также якоря могут быть очень удобны, когда на веб-странице расположено достаточно много контента, разделенного главами или подразделами. Вы, наверное, бывали на сайте Википедии и видели, что в начале каждой статьи есть небольшое оглавление, составленное из гиперссылок. Каждая из таких гиперссылок ведет на определенное место на веб странице, характеризующее определенные раздел или подтему. Достаточно удобно, согласитесь. По крайней мере гораздо удобнее, чем скролить и искать требуемый раздел. А ведь один из главных принципов создания хорошего веб-ресурса – это удобство пользователя.
Можно привести еще много примеров, когда якоря гиперссылок могут послужить нам хорошую службу. Но я думаю, Вы и сами уже представили все эти примеры у себя в голове.
Давайте я лучше расскажу, как это можно реализовать на практике.
Ставим якорь гиперссылки
Итак, якоря, в отличие от ссылок не указывают на другую веб-страницу, а помечают некоторый фрагмент текущей веб-страницы, чтобы другая гиперссылка могла на него сослаться.
Как я уже говорила, так можно пометить главы одного текстового документа, чтобы посетитель мог легко перейти в нужное место; или отправить посетителя с текущей веб-страницы в нужное место какой-то другой страницы Вашего сайта.
Якоря, также, как и гиперссылки, создают при помощи хорошо известного нам тега <a>, однако, в случае якорей атрибут href в нем присутствовать не должен. Вместо него следует поместить обязательный здесь атрибут id, который задаст уникальное (в пределах текущей веб-страницы) имя для нашего якоря (имя может содержать только латинские буквы, цифры и знаки подчеркивания, начинаться оно должно с буквы).
И еще кое-что. Тег <a> является парным тегом, и, обычно, между открывающим и закрывающим тегом помещают текст ссылки, изображение или что-либо еще. Однако, при создании якоря не нужно ничего помещать между открывающим и закрывающим тегом <a>. Получается, так называемый, пустой тег.
Итак, в то место, куда должен попасть посетитель вашего ресурса после клика по определенной ссылки ставим якорь, который должен выглядеть примерно вот так:
<a id="one"></a>
Этот якорь нужно поместить перед началом того куска контента, на который посетитель должен попасть (например, перед началом нужной главы).
Якорь готов! Теперь нужно на него сослаться. Ссылаться можно либо из другой веб-страницы, либо из той же самой. Это зависит от стоящей перед Вами задачи.
Для того, чтобы сослаться на якорь достаточно создать обычную гиперссылку, добавив в адрес атрибута href имя нужного нам якоря. Имя якоря ставят в самый конец значения атрибута href гиперссылки и отделяют от него символом # (решетка).
Допустим, страница, содержащая якорь хранится в файле «yakor.html» и имеет идентификатор «one».
Создайте гиперссылку, при щелчке на которую посетитель должен будет попасть в то место веб-страницы, где Вы поставили якорь и пропишите в атрибуте href имя файла и идентификатор якоря.
Выглядеть это должно вот так:
<a href="yakor.html#one">Раздел номер один</a>
Вот в общем то и все. Теперь при клике на эту ссылку, человек попадет прямо в то место веб-страницы, где Вы оставили якорь с идентификатором «one».
Создавать таких якорей и гиперссылок можно столько, сколько требуется. Только не забывайте присваивать каждому новому якорю новый идентификатор.
Посмотреть пример работы якорей Вы можете щелкнув по иконке «Демо» в начале статьи. А если Вам потребуется исходный код демо-примера, Вы можете скачать его, кликнув по иконке «Исходники».
На этом я буду заканчивать эту небольшую статью. Надеюсь она была Вам полезна.
Оставляйте свои отзывы и делитесь статьей с друзьями при помощи кнопок соц. сетей.
Если Вы еще не подписаны на обновления блога – подписывайтесь! Наш архив полезностей пополняется и будет пополняться и дальше. Так что оставайтесь на связи!
Удачи Вам и всяческих Успехов!
До новых встреч, друзья!
