Главная » Все про HTML » Как вставить ссылку-якорь в HTML. Урок – 6 (для начинающих)

Как вставить ссылку-якорь в HTML. Урок – 6 (для начинающих)

2013-06-29 / Вр:20:33 / просмотров: 22278

Будем учиться закидывать якорь на HTML странице. Вы только не подумайте, учить мореходным штучкам я не буду :smile: .

Итак, что такое ссылка-якорь в HTML?

Якорь - это закладка с уникальным именем которая размещена на определенном месте веб-страницы и служит для быстрого перехода к ней по ссылке.

Если сказать простыми словами, то якорь - это что-то на подобии закладок в книге.

Для чего нужно использовать якорь в в HTML? Если у вас по тексту получилась объемная страничка, тогда можно для быстрого перехода к нужному разделу использовать якорь. Читатели вашей странички еще спасибо скажут, ведь как-то некорректно крутить колесик мышки, чтобы найти нужный раздел.

Пример, как выглядит ссылка-якорь в HTML:

Как вставить ссылку-якорь в HTML. Урок - 6

На примере вы можете увидеть, что при нажатии вкладки "Перевод песни группы HIM", посетителя перекинет именно на этот раздел (на песню группы HIM).

Если вам ничего не понятно, предлагаю приступить к практике, так лучше усвоится или поймете материал.

Как создать или закинуть якорь?

Вот ссылка-якорь

<a name="имя якоря-1">Текст или заголовок</a>

а это ссылка, которая привязывается к якорю.

<a href="#имя якоря-1">Ссылка закладки на раздел</a>

Внимание:обязательно нужно использовать для привязки якоря к ссылке символ #.

Итак, давайте посмотрим, как выглядят якоря в html файле.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку в html</title>
</head>
<body>
<H2>Перевод песен.</H2>
<a href="#stih1">Перевод песни группы Type o negative</a>
<BR>
<a href="#stih2">Перевод песни группы HIM</a>
<BR>
<a href="#stih3">Перевод песни группы Nazareth</a>
<BR><BR><BR><BR><BR><BR><BR><BR>

<H3><a name="stih1">Перевод песни группы Type o negative</a></H3>
<p>
... бла-бла-бла 1...
</p>
<H3><a name="stih2">Перевод песни группы HIM</a></H3>
<p>
... бла-бла-бла 2...
</p>
<H3><a name="stih3">Перевод песни группы Nazareth</a></H3>
<p>
... бла-бла-бла 3...
</p>

</body>
</html>

Результат:

Как вставить ссылку-якорь в HTML. Урок - 6

[посмотреть пример]

Как бросить якорь на другую веб страницу?

Якорь можно бросить на другую страницу веб-ресурса или страницы. Для этого пропишите в атрибуте href URL-адрес страницы, добавьте к нему символ # и название якоря.

<p><a href="/primer.html#new1">Текст для перехода</a></p>

primer.html - это другая страница.
#new1 - название якоря.

Теперь на странице primer.html бросаем якорь на нужный раздел текста.

<p><a name="new1">нужный раздел текста</a></p>

new1 - название якоря.

Посмотрим пример:

Создайте html документ с названием "1.html".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку-якорь в html</title>
</head>
<body>

<p>текст</p>
<a href="/2.html#stih1">Перевод песни группы Type o negative</a>
<p>текст</p>

</body>
</html>

Теперь создайте html документ с названием "2.html".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку-якорь в html</title>
</head>
<body>

<p>текст</p>
<p><a name="stih1">нужный раздел текста</a></p>
<p>текст</p>

</body>
</html>

[посмотреть пример]