Якорные ссылки

Возникают ситуации когда нужно сделать ссылку не на другой документ, страницу или сайт, а внутри того же документа, например в пределах одной страницы, называют такую ссылку "Якорем".

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

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

Первый способ создается с помощью атрибута name тега <а>
Создаем оглавление, (ссылки на стихотворения).


  <h3>Оглавление:</h3>
<A href="#stih1">Валентин Берестов. Большой мороз </A>
<BR>
<A href="#stih2">Евгений Пермяк. Волшебные краски</A>
<BR>
<A href="#stih3">Корней Чуковский ПУТАНИЦА</A>


Теперь при помощи атрибута name делаем закладки к стихотворениям, которыми послужат заголовки самих стихотворений:

<H3><A name="stih1">Валентин Берестов. Большой мороз</A></H3>
<PRE>
Текст первого стихотворения.
</PRE>
<H3><A name="stih2">Евгений Пермяк. Волшебные краски</A></H3>
<PRE>
Тест второго стихотворения.
</PRE>
<H3><A name="stih3">Корней Чуковский ПУТАНИЦА</A></H3> <PRE>
Текст третьего стихотворения.
</PRE>
    Посмотреть

Во втором способе используется атрибут - id, который назначает тэгу уникальное имя в пределах одного документа исключения составляют теги: Base, Head, Html, Meta, Script, Style, Title.
Аналогично первому способу создаем оглавление:


  <h3>Оглавление:</h3>
<A href="#stih1">Валентин Берестов. Большой мороз </A>
<BR>
<A href="#stih2">Евгений Пермяк. Волшебные краски</A>
<BR>
<A href="#stih3">Корней Чуковский ПУТАНИЦА</A>


Далее с помощью атрибута id для тега <H3> назначаем имя.

<H3 id="stih1">Валентин Берестов. Большой мороз</H3>
<PRE>
Текст первого стихотворения.
</PRE>
<H3 id="stih2">Евгений Пермяк. Волшебные краски</H3>
<PRE>
Текст второго стихотворения.
</PRE>
<H3 id="stih3">Корней Чуковский ПУТАНИЦА</H3>
<PRE>
Текст третьего стихотворения.
</PRE>
    Посмотреть

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

<A href="page.html#stih10"> Ссылка на стих десятый из какой-то другой страницы. </A>

<A href="http://www.site.ru/page.html#stih1"> Ссылка на стих первый из какого-то другого сайта.</A>



Вернуться назад Перейти к следующей странице



2009 - 2018г. andron09_73@mail.ru