Закладки или ссылки внутри страницы

В этом уроке мы продолжим разговор о ссылках. Иногда возникает такая

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

же страницы - закладку, в народе называемую якорем. Такая навигация внутри одного и того же

документа весьма удобна. Создаваться она может двумя способами.

Способ первый - с помощью атрибута name (имя закладки) тэга a:

<h2>Григорий Остер, "Вредные советы.<br />
Книга для непослушных детей и их родителей".</h2>
<a href="#stih1">Ссылка на стих первый</a><br />
<a href="#stih2">Ссылка на стих второй</a><br />
<a href="#stih3">Ссылка на стих третий</a><br /><br
 />
Недавно ученые открыли, что на свете бывают непослушные дети, которые 
все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они
 берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они 
тут же начинают не здороваться. Ученые придумали, что таким детям нужно 
давать не полезные, а вредные советы. Они все сделают наоборот, и 
получится как раз правильно.

<h3><a name="stih1">Стих первый</a></h3>
... стих 1...

<h3><a name="stih2">Стих второй</a></h3>
... стих 2...

<h3><a name="stih3">Стих третий</a></h3>
... стих 3...

Заголовки (стих первый, стих второй, стих третий) в нашем примере мы

сделали закладками, использовав атрибут тэга a - name:

<a name="stih3">Стих третий</a>

Затем мы сделали на них ссылки:

<a href="#stih3">Ссылка на стих третий</a>

Заметьте - <a href="#stih3"> - символ решетки (#) перед именем

закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на

закладку и из других страниц, тогда ссылка будет выглядеть следующим

образом:

<a href="ancorpri.html#stih3"> Ссылка на стих третий из какого-то 
другого документа </a>

или

<a href="http://www.mysite.ru/ancorpri.html#stih1"> Ссылка на стих
 третий из какого-то другого документа </a>

(имя сайта, имя документа + имя закладки)

Способ второй - есть такой атрибут - id, который назначает тэгу

(элементу) уникальное имя в пределах одной страницы (кроме тэгов Base,

Head, Html, Meta, Script, Style, Title). Что мешает нам задать id,

например, тэгу h3 (заголовкам)? Ничего.

<h2>Григорий Остер, "Вредные советы.<br />
Книга для непослушных детей и их родителей".</h2>
<a href="#stih1">Ссылка на стих первый</a><br />
<a href="#stih2">Ссылка на стих второй</a><br />
<a href="#stih3">Ссылка на стих третий</a><br /><br
 />
Недавно ученые открыли, что на свете бывают непослушные дети, которые 
все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они
 берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они 
тут же начинают не здороваться. Ученые придумали, что таким детям нужно 
давать не полезные, а вредные советы. Они все сделают наоборот, и 
получится как раз правильно.

<h3 id="stih1">Стих первый</h3>
... стих 1...

<h3 id="stih2">Стих второй</h3>
... стих 2...

<h3 id="stih3">Стих третий</h3>
... стих 3...

Посмотрите, внешне ничего не изменилось и все действует так же, как и в

первом примере, поэтому Вы можете использовать спокойно любой из этих

двух способов (какой больше нравится).

Также хотим Вас предостеречь, никогда не делайте так:

<a href="#stih">Ссылка на ...</a><br />
...
<a name="STIH">Закладка</a>

Если Вы, например, напишите имя закладки большими буквами, а, ссылаясь,

укажете это имя маленькими, то браузер может посчитать это за два разных

имени (а может и за одно), поэтому во избежание ошибок учитывайте это, и

пишите имена в одном регистре.

На этом наш урок хотелось бы закончить.

Поделиться...