Якорная ссылка
Всем начинающим программистам на HTML, так или иначе приходится создавать ссылки. Ссылки, это неотъемлемый элемент любого html-документа. На любом современном сайте вы можете увидеть огромное количество ссылок. Эти ссылки могут направлять нас как внутри сайта, по разделам и страницам, так и перенаправлять нас на другие сторонние ресурсы. На мой взгляд, если бы не было бы ссылок, то не было бы интернета, по крайней мере, такого, каким мы его знаем сейчас.
В этой статье речь пойдет о, так называемых, якорных ссылках. Что такое якорная ссылка? Представьте себе, как корабль или лодка кидает якорь для того, чтобы не отходить с места стоянки. Якорная ссылка работает примерно также. Мы заранее устанавливаем якорь в том месте, куда нам нужно будет переместиться. Т.е. якорная ссылка, по нажатию на неё, переместить нас в то место, где установлен якорь, внутри страницы, на которой находился пользователь, т.е. новая страница не подгружается, пользователь остается на ней. Или это может быть переход в определенное место другого документа.
Далее рассмотрим пример создания якорной ссылки и ее работу. Предположим, у нас есть три раздела, по которым мы можем быстро перемещаться. Нам необходимо создать меню и три раздела.
<ul class="menu"> <li><a href="#first">Первый раздел</a></li> <li><a href="#second">Второй раздел</a></li> <li><a href="#third">Третий раздел</a></li> </ul>
Обратите внимание на адрес ссылки
href="#first"
Вначале стоит решетка, а потом название «first», который будет направлять в раздел с «first». Далее создаем разделы:
<ul class="menu"> <li><a href="#first">Первый раздел</a></li> <li><a href="#second">Второй раздел</a></li> <li><a href="#third">Третий раздел</a></li> </ul> <a name="first"><h2>Первый раздел</h2></a> <p>...</p> <a name="second"><h2>Второй раздел</h2></a> <p>...</p> <a name="third"><h2>Третий раздел</h2></a> <p>...</p>
Обратите внимание, что в ссылках на разделах указывается атрибут «name», a в меню используется атрибут «href».
Вот так выглядят и работают якорные ссылки.