Логин или email:
Пароль:
Зайти через вконтакте
Зайти через тест аккаунт
Навигация:
Панель управления оформлением проекта
Все статьи по теме: html / Уроки по html

Закладки

До этого времени я говорил только о ссылках, которые используют для перехода на другие страницы сайта или на другой ресурс. Пришло время поговорить о другом типе ссылки. Отличительная особенность закладок заключается в том, что они предназначены для навигации внутри страницы. Представьте себе, что на вашем сайте написан роман-эпопея Л.Н Толстого "Война и мир" и найти нужную вам главу будет не просто, но совсем другое дело, если в начале романа будет описано содержание. Например, что-то типа этого:

Глава первая
Глава вторая

И допустим, кликнув по нужной главе, посетитель сразу окажется в нужном месте романа, разве это не прекрасно?=) Воооот, именно для этого и нужны закладки! Все теги имеет атрибут id, который и позволит установить уникальное имя для каждой главы, собственно, позволит сделать метку в начале новой главы! После чего мы просто сделаем ссылку на эту метку и по нажатию на нее будем оказываться на нужной нам главе! Предположим перед каждой главой у нас будет заголовок <h2>, тогда мы сможем дать этому заголовку уникальное имя, указав его в атрибуте id, то есть вот так:

<h2 id="glava1"> Глава первая </h2>


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

<a href="#glava1"> Глава первая </a>


Обратите внимание, когда создаем ссылку, перед именем метки стоит знак решетки #. Давайте возьмем две главы романа Война и Мир и сделаем закладки для быстрого перехода по главам.

<html>
<head>
<title> Закладки </title>
</head>
<body>
<center>
<h1> Война и Мир </h1><br>
<h2> Том первый </h2><br>
</center>
<br>

<a href="#glava1"> Глава первая </a><br>
<a href="#glava2"> Глава вторая </a><br>

<h2 id="glava1"> Глава первая </h2>
А здесь текст первой главы! Я не буду писать его здесь!

<h2 id="glava2"> Глава вторая </h2>
А здесь текст второй главы! Я не буду писать его здесь!

</body>
</html>

Вот видите какой удобной для пользователей можно сделать навигацию. Хоть я и писал, что закладки используются для навигации на странице, но их также можно использовать и для переходов с других страниц или сайтов. Отличается такая ссылка от обычной только тем, что после имени страницы, на которую ссылаемся, нужно еще указать уникальное имя, того места статьи, в котором хотим оказаться при переходе по ссылки. Выглядит это вот так:

<a href="pagetwo.html#glava2"> Глава вторая </a> 


В данном примере подразумевается то, что при переходе с одной страницы, на вторую страницу, нас сразу перенесет на вторую главу.

<a href="http://m.advisor4u.ru/shkola/#new_test"> Новые тесты </a> 


Допустим такую ссылку вы разместили на своем сайте, после перехода по ней, вы окажетесь на моем сайте, да еще и на теме "Новые тесты"!

Теперь вы можете сообразить навигацию на вашей странице, потренируйтесь с внутренними ссылками, используйте их как внутри одной страницы, так и для внешних переходов. И не забывайте указывать решетку # перед уникальным именем, когда прописываете ссылку.
Проверьте себя :)

Средняя оценка статьи: 4.67 балл
Назад
6 из 12
Вперед
326
Статья подготовлена пользователем:
Рейтинг: 0.00
Все статьи по теме: html / Уроки по html