Якоря - создаем закладки
До сих пор мы с вами рассматривали ссылки, которые просто вели на другие документы в интернете. А в этом уроке вы научитесь создавать якоря. Якорь (анкор) в HTML — это специальная закладка, которая используется для перемещения пользователя к определенному участку страницы при нажатии на ссылку.
Как создать якорь и ссылку на него?
Для создания якоря вам необходимо в месте, к которому будет переход по ссылке, указать <A name="имя"></A>, где имя якоря — любое слово на английском языке. Как видите, у закладки совершенно не обязательно писать что-то между тегами, ведь она используется только в роли служебной метки. Самое главное не забывайте, что <A> — это встроенный (inline) тег и ставить его можно только внутри HTML-элементов, которые могут содержать данный тип. Впрочем таких элементов очень много.
А вот чтобы сделать ссылку на якорь надо написать <A href="#имя">любой текст</A>, именно так, со знаком решетка (#) впереди.
Два важных замечания! Обратите внимание, что имя якоря в обоих местах надо указывать в одном регистре, то есть нельзя написать в якоре имя, а в ссылке на него #ИМЯ. Кроме этого, на каждой HTML-странице не может быть два якоря с одинаковыми именами, иначе браузер не поймет к какому из них делать переход. А вот ссылок на один и тот же якорь может быть сколько угодно!
Пример создания якорей в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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" "https://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>, то есть то, что пользователи видят на странице.
Домашнее задание.
- Создайте заголовок статьи и трех ее разделов.
- Под каждым заголовком напишите несколько параграфов, но под заголовком статьи сделайте их столько, чтобы они занимали примерно полторы страницы.
- В конце каждого раздела создайте ссылку на заголовок статьи.
- Сразу под заголовком статьи напишите ссылки на все ее разделы.
- Создайте какой-нибудь файл (например, page2.html) и сделайте в нем ссылки на все разделы созданной ранее страницы. Этот пункт есть только в ответах, но я уверен — вы справитесь! Кстати, «до кучи» можете положить page2.html в другую папку и попрактиковаться в относительных адресах.
| Ссылки на электронную почту | ← Содержание → | Изображения |