Якоря

Якоря — что это такое, зачем они нужны и как их создавать?

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

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

Способ создания якорей хорошо описан на сайте http://www.webadvisor.ru

Вот цитата с этого сайта:

Как создать ссылку-якорь в HTML

1. Вначале нужно сделать метку (вставить якорь) в соответствующем месте страницы сайта и дать ей имя.

В примере ниже якорю дано имя «link», но вы можете присвоить якорю своё имя. Обычно это слово обобщает смысл текста, на который вы даёте ссылку и пишется на латинице, может содержать и латинские буквы, и цифры.

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

Для создания ссылки в HTML используется тег <a>. Атрибут <name> данного тега — задает имя якоря внутри документа.

Пример: <a name=»link»></a>

Примечание: В XHTML и HTML5 вместо name для определения якоря нужно указывать атрибут id. Между <a> и </a> текст писать не обязательно, так как задача якоря указать место закладки на странице.

Пример: <a id=»link»></a>

2. К якорю надо создать ссылку, кликнув по которой посетитель попадёт в то место, где находится якорь.

Для создания ссылки в HTML используется тег <a>. Атрибут <href> данного тега — задает адрес документа, куда следует перейти. Тег <a> с атрибутом <href> — обычная ссылка, к которой, для создания ссылки на якорь в конце URL адреса нужно добавить символ решетки # и имя якоря.

Пример: <a href=»http://webadvisor.ru/#link»>Текст для перехода </a>

Примечание: Если якорь и ссылка на него находятся на одной странице, адрес страницы в ссылке указывать не нужно.

Пример: <a href=»#link»>Текст для перехода </a>

Наметил несколько страниц, на которых собираюсь использовать якоря. Список таких страниц, возможно, опубликую чуть позже.

Вот пример действующих в пределах одной страницы трёх якорей:

Переход к Секции 1

Переход к Секции 2

Переход к Секции 3

1. Секция 1

Текст секции 1

2. Секция 2

Текст секции 2

3. Секция 3

Текст секции 3

А вот соответствующие коды:

<a href=»#section1″>Переход к Секции 1</a>

<a href=»#section2″>Переход к Секции 2</a>

<a href=»#section3″>Переход к Секции 3</a>

<h3><a id=»section1″></a>1. Секция 1</h3>
Текст секции 1
<h3><a id=»section2″></a>2. Секция 2</h3>
Текст секции 2
<h3><a id=»section3″></a>3. Секция 3</h3>
Текст секции 3

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

…!

Приглашаю всех высказываться в Комментариях. Критику и обмен опытом одобряю и приветствую. В хороших комментариях сохраняю ссылку на сайт автора!

И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
ЯкоряПродолжение тут…

Deviz_18

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.