StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
13.07.2015
11:01
22131
6
Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7
Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке будем учиться закидывать якоря на HTML странице 
.
Не пугайтесь! Вы правильно попали – здесь я не буду рассказывать и учить мореходным штучкам. В этом уроке я расскажу, что такое HTML-якорь, как сделать якорь на HTML странице и как закинуть якорь на другую страницу.
Урок будет очень полезный и важный, потому что вы еще не один раз столкнетесь с HTML-якорями.
○ Что такое ссылка-якорь в HTML?
Якорь - это закладка с уникальным именем, которая размещена в html документе в определенном месте и служит для быстрого перехода к ней по ссылке.
Если вы любите ассоциативное разъяснение, тогда выражусь так:
Якорь - это что-то на подобии закладок или содержания в книге.
Частенько используют ссылки-Якоря, для бизнес-сайтов (одностаничники) или же в самом начале статьи, для быстрого перехода до нужного раздела (так как в Википедии).
○ Пример, как выглядит ссылка-якорь на веб-странице:
Если нажать на ссылку «Перевод песни группы Type o negative», пользователя перекинет на раздел «Перевод песни группы Type o negative».
Я думаю, что вы уже уяснили, что такое ссылка-Якорь в HTML. Если нет, не расстраивайтесь. Не забивайте голову теорией, так как после практичных примеров, вам станет все ясно 
.
○ Как создать якорь на HTML
Чтобы создать якорь на веб-странице, к тегу <a> пропишите атрибут «name», где в значение указываете уникальное название, например, «stepkinblog» .
Вот так выглядит макет якоря в HTML:
<a name="имя_якоря">Текст или заголовок</a>
Для тега <a> закрывающий тег </a> обязателен.
Внимание: название якоря должно быть прописано на латинице.
Неправильно:
<a name="степкинблог">Текст или заголовок</a>
Правильно:
<a name="stepkinblog">Текст или заголовок</a>
Можно вместо атрибута «name» написать атрибут «id»
<a id="имя_якоря"></a>
Теперь нужно создать ссылку на якорь. Для этого напишите стандартную ссылку <a>, где в атрибуте «href» нужно указать название якоря через значок «#»:
<a href="#имя_якоря">Ссылка на раздел (якорь)</a>
можно и так
<a href="#имя_якоря"></a>Ссылка на раздел (якорь)
Внимание: название якоря должно быть прописано на латинице.
Неправильно:
<a href="#степкинблог">Ссылка на раздел (якорь)</a>
Правильно:
<a href="#stepkinblog">Ссылка на раздел (якорь)</a>
Пример:
<html> <head> <title>Как вставить якорь-ссылку в html</title> </head> <body> <H2>Содержание сделанно на на HTML.</H2> <a href="#stih1">Перейти на статью №1 - Про блог BlogGood.ru</a> <BR> <a href="#stih2">Перейти на статью №2 - Про блог StepkinBlog.ru</a> <BR> <a href="#stih3">Перейти на статью №3 - Про сайт wm-money.org.ua</a> <BR><BR><BR><BR><BR><BR><BR><BR> <H3><a name="stih1"></a>Статья №1 - Про блог BlogGood.ru</H3> <p> Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое… </p> <H3><a name="stih2"></a>Статья №2 - Про блог StepkinBlog.ru</H3> <p> Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap </p> <H3><a name="stih3"></a>Статья №3 - Про сайт wm-money.org.ua</H3> <p> Обмен, вывод и ввод WebMoney </p> </body> </html>
○ Как сделать html якорь на другую страницу
Припустим, у вас есть две веб-страницы. На первой странице вы хотите сделать ссылку, которая будет отправлять пользователя на определенный раздел другой страницы, например, на дату жизни писателя Тараса Шевченко.
Итак, это делается так. На первой странице делаете ссылку на якорь. На второй странице нужно создать в нужном месте якорь.
Чтобы создать ссылку на якорь, которая находится на другой странице или на сайте, нужно указать в атрибуте «href» адрес сайта, веб страничку и имя якоря.
<a href="название_страницы#имя_якоря"></a>
Или так
<a href="http://адрес_сайта/название_страницы#имя_якоря"></a>
Теперь попробуем все это реализовать на примере.
Создайте страницу под названием, например, «index-1.html».
Вставьте в текст ссылку на якорь:
<p>текст.. <a href="index-2.html#new1">Т. Г. Шевченко</a> …текст</p>
Полностью готовый HTML код:
<html> <head> <title>Как вставить ссылку-якорь в html</title> </head> <body> <p>текст <a href="index-2.html#new1">Т.Г.Шевченко</a> текст</p> </body> </html>
Теперь создадим вторую страницу, под названием «index-2.html» и указываем в нужном разделе текста якорь.
<p>текст… <a name="new1">Биография Т. Г. Шевченко</a> …текст</p>
Полностью готовый HTML код:
<html> <head> <title>Как вставить ссылку-якорь в html</title> </head> <body> <p>текст… <a name="new1">Биография Т. Г. Шевченко</a> …текст</p> </body> </html>
Теперь сохраним и посмотрим на результат.
На сегодня все. Подписывайтесь на обновления блога, чтобы не пропустить уроки HTML.
Случайные записи:
- Нам 2 годика! С Днем Рождения StepkinBlog.ru!!!
- Как прописать мета теги. Основы HTML для начинающих. Урок №21
- Форматирование текста в HTML. Основы HTML для начинающих. Урок №3
- Контейнер. Основы bootstrap 3 для начинающих. Урок №3
- Создание, проверка и удаление каталога (папки) посредством кода PHP. Основы PHP с нуля. Урок №23
А если часть текста под картинкой урезана и ниже - "подробней...". Тоже якорь? Как его делать?
Ответить
29 мая, 2017 at 23:18
Не совсем понял вопрос. Если можно, опишите подробней.
Ответить
Вроде бы все хорошо, но нет раздела как сделать якорь на раздел на ДРУГОМ сайте.
Ответить
17 июня, 2017 at 23:22
Хм, как это нет, а это случайно не этот раздел -"Как сделать html якорь на другую страницу" (см. самом низу).
Оно?
Ответить
Добрый день.
Подскажите, для того чтобы сделать ссылку на другой сайт, необходимо создать два отдельных файла .html?
Соответственно, сколько ссылок столько и будет отдельных файлов?
Ответить
2 апреля, 2018 at 23:11
Здравствуйте, Денис!
Да, верно! Например, есть меню, "Главная, О нас, Контакты".
Будет 3-и ссылки на три файла
Ответить