Как сделать ссылку внутри страницы?

Ссылки внутри страницы очень полезны в документах с большим количеством текста(строк) например ФАКах или чем то подобном. Такая навигация достигается двумя способами:

1)Первый способ создать ссылку внутри документа при помощи атрибута NAME тега A, т.е. методом дублирования значения атрибута href в атрибут name вот таким способом:
первым делом создаем ссылку <a href="#nazvanie"> анкор </a> символ "#", т.к в этом случае он говорит браузеру что это не обычная ссылка, а ссылка на закладку.
И уже в нужном нам месте мы ставим ссылку:
<a name="nazvanie"> текст </a> , Обратите внимание что мы href заменили name

Чтобы закрепить пройденный материал и увидеть все в действии предлагаю создать что-то в виде фака(ответы на часто задаваемые вопросы), для этого мы используем внутренние ссылки и списки определений

        <html>
        <head>
        <title>Внутренняя навигация</title>
        </head>
        <body>
            <a href="#punkt1"> анкор1 </a><br>
            <a href="#punkt2"> анкор2 </a><br>
            <a href="#punkt3"> анкор3 </a><br>
        <DL>
       <DT> <a name="punkt1">;Неупорядоченные списки </a>
       <DD> Служат для вывода текста без номинации
       <DT> <a name="punkt2">Упорядоченные списки </a>
       <DD> Служат для вывода текста с номинацией
       <DT> <a name="punkt3">Списки определений</a>
       <DD> Служат для вывода текста каждого элемента парой.
       </DL>
        </body>
        </html>
Сохраним это документ как link.html и посмотреть что получилось, правда весь текст я заменил на стихи, вы тоже в этом файле в теги DD вставте много текста и пунктов 10-15

Достоинством этого способа есть то, что ссылки на закладки можно поставить из другого документа, создайте новый или откройте любой другой документ созданный нами раньше и вставте в него код этой ссылки:
<a href="link.html#punkt1"> анкор1 </a> и после сохранения при нажатии на ссылку вы попадете в наш link.html
Закладки можно ставить не только из других документов, но и из других сайтов:
<a href="http://my_site.ru/link.html#punkt1"> анкор1 </a>

Второй способ создания закладок при помощи идентификаторов.
Как и впервом способе мы создаем ссылку на закладку:
<a href="#punkt1"> анкор1 </a>
но в саму закладку мы создаем без тега <a>, а вместо него мы ставим ID(идентификатор) любому визуальному тегу, т.е. любому тегу который помещен между тегами <body> и <body> но не к самому тегу body
Давайте отредактируем наш файл link.html и создадим закладки на верх страницы:

        <html>
        <head>
        <title>Внутренняя навигация</title>
        </head>
        <body>
              <b id="verh"> содержание: </b><br>
            <a href="#punkt1"> анкор1 </a><br>
            <a href="#punkt2"> анкор2 </a><br>
            <a href="#punkt3"> анкор3 </a><br>
        <DL>
       <DT> <a name="punkt1"> Неупорядоченные списки </a>
       <DD> Служат для вывода текста без нумерации
         <a href="#verh"> на верх </a><strongr>
       <DT> <a name="punkt2">Упорядоченные списки </a>
       <DD> Служат для вывода текста с нумерацией
         <a href="#verh"> на верх </a><br>
       <DT> <a name="punkt3">Списки определений</a>
       <DD> Служат для вывода текста каждого элемента парой.
         <a href="#verh"> на верх </a><br>
       </DL>
        </body>
        </html>
и сохраним
Мы создали ссылки на закладки и присвоили значение verh атрибуту ID в теге strong, соответственно при нажатии ссылки "на верх" нас будет перебрасывать к тегу B, т.е. на верх.

Ну вот почти и все хитрости с ссылками... Почему почти? Потому что ссылки делать мы умеем а вот правильно прописывать пути нет!!! Этим и займемся в следующей главе.

Смотрите также: