BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Будем учиться закидывать якорь на 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>

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Yrianaggs

    Привет!извините просто незнал где написать. Подскажите пожалуйста, как сделать такой вид комментариев как у Вас на сайте!?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    могу отправить готвый код CSS

    Ответить

  2. Андрей

    Нет ссылки с 6-ого на 7-ой урок. :sad:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Андрей. простите, забыл поставить. Посмотрите здесь

    Ответить

    Андрей отвечает:

    Да, прочитал все что мне было нужно, помог ребенку с информатикой. Большое спасибо за вашу работу.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Андрей!

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 671
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3683