Иногда на практике возникает необходимость сделать ссылку на определенную область внутри одной страницы HTML. Это очень полезный «прием», ведь с его помощью мы всегда можем направить читателя по клику в ту область страницы, в которую нам необходимо.
Ссылку внутри страницы можно сделать двумя способами, давайте их рассмотрим:
1) Ссылка внутри страницы с помощью атрибута «name»:
<html> <head> <title>Структура HTML документа</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <p> <a href="#link">Перейти к разделу 5</a></p> <h1> Заголовок раздела 1</h1> <p>Текст раздела 1</p> <h2>Заголовок раздела 2</h2> <p>Текст раздела 2</p> <h2>Заголовок раздела 3</h2> <p>Текст раздела 3</p> <h2>Заголовок раздела 4</h2> <p>Текст раздела 4</p> <h2><a name="link">Заголовок раздела 5</a></h2> <h2>Заголовок раздела 6</h2> <p>Текст раздела 6</p> <h2>Заголовок раздела 7</h2> <p>Текст раздела 7</p> <h2>Заголовок раздела 8</h2> <p>Текст раздела 8</p> <h2>Заголовок раздела 9</h2> <p>Текст раздела 9</p> <h2>Заголовок раздела 10</h2> <p>Текст раздела 10</p> </body> </html>
В данном примере мы прописали ссылку (строка 7) и непосредственно сам атрибут «name» с параметром «link» (строка 16). В результате чего, при нажатии по ссылке «Перейти к заголовку раздела 5» нас перебросит к 5 заголовку, т.к. именно для него мы и задали метку.
2) Ссылка внутри страницы с помощью атрибута (идентификатора) «id»:
<html> <head> <title>Структура HTML документа</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <p> <a href="#link">Перейти к разделу 5</a></p> <h1>Заголовок раздела 1</h1> <p>Текст раздела 1</p> <h2>Заголовок раздела 2</h2> <p>Текст раздела 2</p> <h2>Заголовок раздела 3</h2> <p>Текст раздела 3</p> <h2>Заголовок раздела 4</h2> <p>Текст раздела 4</p> <div id="link"><h2>Заголовок раздела 5</h2></div> <p>Текст раздела 5</p> <h2>Заголовок раздела 6</h2> <p>Текст раздела 6</p> <h2>Заголовок раздела 7</h2> <p>Текст раздела 7</p> <h2>Заголовок раздела 8</h2> <p>Текст раздела 8</p> <h2>Заголовок раздела 9</h2> <p>Текст раздела 9</p> <h2>Заголовок раздела 10</h2> <p>Текст раздела 10</p> </body> </html>
Данный пример практически аналогичен первому. Вместо атрибута «name» здесь используется идентификатор «id». Можно использовать любой вариант, какой больше нравится. Вот по такому принципу и формируется ссылка внутри страницы.
