Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Якоря - создаем закладки

До сих пор мы с вами рассматривали ссылки, которые просто вели на другие документы в интернете. А в этом уроке вы научитесь создавать якоря. Якорь (анкор) в HTML — это специальная закладка, которая используется для перемещения пользователя к определенному участку страницы при нажатии на ссылку.

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

Для создания якоря вам необходимо в месте, к которому будет переход по ссылке, указать <A name="имя"></A>, где имя якоря — любое слово на английском языке. Как видите, у закладки совершенно не обязательно писать что-то между тегами, ведь она используется только в роли служебной метки. Самое главное не забывайте, что <A> — это встроенный (inline) тег и ставить его можно только внутри HTML-элементов, которые могут содержать данный тип. Впрочем таких элементов очень много.

А вот чтобы сделать ссылку на якорь надо написать <A href="#имя">любой текст</A>, именно так, со знаком решетка (#) впереди.

Два важных замечания! Обратите внимание, что имя якоря в обоих местах надо указывать в одном регистре, то есть нельзя написать в якоре имя, а в ссылке на него #ИМЯ. Кроме этого, на каждой HTML-странице не может быть два якоря с одинаковыми именами, иначе браузер не поймет к какому из них делать переход. А вот ссылок на один и тот же якорь может быть сколько угодно!

Пример создания якорей в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Создание якорей (закладок)</title>
</head>
<body>
<p><a name="ontop"></a>Параграф.</p>
<p>Параграф. <a href="#ontop">В начало</a></p>
<p>Параграф. <a href="#ontop">В начало</a></p>
<p>Параграф. <a href="#ontop">В начало</a></p>
<p>Параграф. <a href="#ontop">В начало</a></p>
</body>
</html>

Результат в браузере

Параграф.

Параграф. В начало

Параграф. В начало

Параграф. В начало

Параграф. В начало

Ссылка на якорь другой HTML-страницы

Ну что ж, внутри страницы мы с вами научились перемещаться. Теперь научимся создавать ссылки из одной HTML-страницы на якоря других страниц. Это ведь бывает очень удобно, особенно если вы ссылаетесь на страницу в которой очень много информации, а пользователю нужен только определенный раздел. Итак, чтобы создать ссылку на якорь другой страницы необходимо в атрибуте href в конце адреса указать #имя нужного якоря.

Пример создания ссылки на якорь другой HTML-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Создание ссылки на якорь другой страницы</title>
</head>
<body>
<p>О разведении кактусов вы можете прочитать в разделе
   <a href="flowers.html#cactus">Кактусы</a>
   статьи и цветоводстве.</p>
</body>
</html>

Извините, но результат примера я вам не покажу, так как в кактусах не силен и статей о них на сайте не держу. :)

На сленге SEO-оптимизаторов (ребят, которые раскручивают сайты в интернете) «анкорами» часто называют не то, что мы здесь с вами изучили, а содержимое тега <A>, то есть то, что пользователи видят на странице.

Домашнее задание.

  1. Создайте заголовок статьи и трех ее разделов.
  2. Под каждым заголовком напишите несколько параграфов, но под заголовком статьи сделайте их столько, чтобы они занимали примерно полторы страницы.
  3. В конце каждого раздела создайте ссылку на заголовок статьи.
  4. Сразу под заголовком статьи напишите ссылки на все ее разделы.
  5. Создайте какой-нибудь файл (например, page2.html) и сделайте в нем ссылки на все разделы созданной ранее страницы. Этот пункт есть только в ответах, но я уверен — вы справитесь! Кстати, «до кучи» можете положить page2.html в другую папку и попрактиковаться в относительных адресах.
Ссылки на электронную почту← Содержание →Изображения