Якоря | htmlbook.ru
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a> (пример 9.1). В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.
Пример 9.1. Создание якоря
<!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=utf-8"> <title>Быстрый переход внутри документа</title> </head> <body> <p><a name="top"></a></p> <p>...</p> <p><a href="#top">Наверх</a></p> </body> </html>
Между тегами <a name=»top»> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов name и href совпадали (символ решетки не в счет).
С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.
Cсылку можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в атрибуте href тега <a> надо указать адрес документа и в конце добавить символ решетки # и имя закладки (пример 9.2).
Пример 9.2. Ссылка на закладку из другой веб-страницы
<!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=utf-8">
<title>Якорь в другом документе</title>
</head>
<body>
<p><a href="text.html#bottom">Перейти к нижней части текста</a></p>
</body>
</html>В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.
Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет.
Как сделать якоря и быстрые ссылки
Якорь — это метка на странице сайта, до которой можно осуществить быстрый переход. Якоря применяют для того, чтобы направить посетителя в определённый раздел сайта.Рассмотрим самые популярные:
-Прокрутка к секции при нажатии на кнопку или картинку
-Прокрутка к секции при нажатии на текст
-Внешние ссылки к нужной секции (например для Яндекс.Директа)
Автоякоря в кнопках и картинках
У блоков Кнопка и Картинка в редакторе сайта уже есть вшитая функция якорной ссылки.Для начала, добавьте на сайт блок Кнопка, после чего кликните по ней в редакторе сайта.
1. Выберите поведение кнопки
Для того, чтобы кнопка была именно якорной ссылкой — на панели редактирования выберите действие кнопки «Прокрутка к секции».
2. Выберите секцию, к которой будет вести кнопка
Нажмите появившуюся на панели редактора кнопку «Выбрать секцию» и в открывшемся меню выбора кликните по той секции сайта, куда нужно прокрутить страницу при клике на вашу кнопку.Выбрав секцию, кликните по ней (она выделится зеленым) и нажмите Сохранить.
Готово! Теперь при клике на добавленную вами таким образом кнопку, посетитель вашего сайта будет попадать на выбранную вами секцию!
Якорь в тексте
1. Создание HTML якоря
Добавьте на страницу блок «HTML блок» в том месте, куда будет осуществляться переход.Вставить любой HTML-код можно по данной инструкции.
Откройте редактирование кода, кликнув по блоку два раза левой кнопкой мыши:
Вставьте следующий код:
<a name="xxxx"></a>
где xxxx — это имя якоря английскими буквами. Замените xxxx на свое имя якоря.
Нажмите кнопку «Применить».
2. Создайте ссылку в тексте
В любом текстовом блоке выделите текст, который надо сделать ссылкой. Нажмите в панели редактирования текста кнопку с цепочкой. Перейдите на вкладку «Якорь»:
В поле со знаком # введите имя своего якоря, точно также как в прошлом шаге.
Теперь при клике на этот текст на опубликованном сайте страница будет прокручиваться к тому месту, где у вас установлен HTML блок.
3. Плавный переход к якорю
Перейдите в раздел «Общие» настроек сайта и передвиньте переключатель.
Он должен быть в выключенном положении.
Внешние ссылки к якорям или быстрые ссылки для Яндекс.Директа
Когда вы размещаете объявление в Директе, у вас есть возможность сделать так называемые «быстрые ссылки» — ссылки на определенные страницы сайта, на которые можно перейти сразу из объявления.
Если у вас сайт многостраничный то все просто — можно указать ссылки на эти страницы и все. Но что делать, когда вы хотите сделать ссылки на разделы одной и той же страницы?
Для этого можно использовать в некотором смысле «обходной» но вполне рабочий вариант, вам поможет функционал Якорей.
1. Создайте якорь на сайте
Для того чтобы отметить место на сайте, куда будет направляться клиент, добавьте в это место HTML блок (Добавить элемент → Блоки → HTML-блок)
2. Составьте код якоря
В редактировании HTML блока напишите следующий код:
<a name="xxxx"></a>где xxxx — название вашего якоря (произвольное название, одним словом, без пробелов, латинскими буквами).
3. Отключите Плавные Якоря
Когда переход на якорь происходит прямо на странице (допустим, если вы делали навигационное меню из якорей на сайте) — то функция плавных якорей полезна.Но при переходе на якорь со сторонних сайтов, например из Директа, эта функция может помешать корректному переходу, поэтому лучше её отключить.
Для отключения перейдите в Настройки сайта —> Общие и отключите опцию «Плавные якоря»
4. Разместите ссылку в рекламном объявлении в Быстрых ссылках
Теперь можно откуда угодно ссылаться на созданный Вами якорь. осталось только написать саму ссылку. Составляется она так:Если (например) адрес вашего сайта site.ru, то ссылка на якорь на этом сайте будет:
site.ru/#xxxxгде xxxx — название вашего якоря (то самое, что вы указывали в html блоке якоря на сайте).
Якорь на сайте — что это и как сделать якорь на сайте | History-of-Blog.ru
Якорь на сайте: что это такое, зачем нужно и как сделать?
Здравствуйте уважаемые читатели блога history-of-blog.ru. Немногим известно, что на страницу сайта можно поставить якоря, а тех, кто пользуется ими еще меньше. Однако использование якорей на сайте в некоторых случаях является очень удобной функцией – она помогает сразу находить нужную информацию и экономить время. Но давайте обо всем по порядку.
Вот один из примеров использования якорей:
Из этой статьи Вы узнаете:
Позднее я опубликовал еще одну очень важную статью:
Как сделать прокрутку страницы до якоря плавной (на jQuery)
Как Вы видите я сделал небольшое содержание данной статьи, которое выполнено в виде ссылок, кликнув по одной из них, Вы, без перезагрузки страницы, окажетесь в определенном месте статьи. Итак:
Что такое якорь на сайте.
Якорь на сайте – это такой тег, который ставится в html-код страницы, на который мы можем сделать ссылку. Таким образом кликая по ссылке якоря мы можем открыть страницу на любом месте, в зависимости от того куда ссылается якорь.
Самый распространенный пример якоря на сайте – это тег more (читать далее), который используется практически в каждом шаблоне WordPress. Кликая по ссылке “читать далее” перед посетителем открывается статья не с самого начала, а на том моменте где он закончил чтение.
Зачем нужны якоря и в каких случаях их использовать.
Как было сказано выше якоря нужны для того, чтобы пользователь мог сразу найти нужную ему информацию. Кликнув по ссылке которая ему интересна он сразу отправляется на определенное место на странице.
Например:Посетителю стало интересно мнение Руслана Ахматьянова по поводу вопроса: “Что важнее для сайта? Посещаемость, пузомерки, траст или какой-либо другой параметр?”. Самым удобным вариантом ответить на этот вопрос является предоставить посетителю следующую ссылку. Согласитесь, предоставить человеку такую ссылку гораздо удобнее, ведь в таком случае ему не придется искать этот вопрос в интервью. Может быть это не самый лучший пример, но чтобы понять суть якорей вполне сгодится.
Так же с помощью якорей очень удобно разбивать большие статьи. Например если читатель знает что такое якорь для сайта и его устройство, но не знает как его установить, то кликнув по последней ссылке в содержании статьи он сразу перейдет к этой теме.
Практически ни одна страница FAQ (правила) уважающего себя сервиса не обходится без якорей. Зайдите в свой аккаунт GoGetLinks и посмотрите как устроена у них эта страница:
Кликая по интересующему нас вопросу – сразу под ним “выезжает” ответ, а в строке браузера добавляется небольшая приписка к странице # и целое число:
В данном случае вместе с якорями используются другие средства, благодаря которым страница FAQ становится еще удобнее – прием скрытия контента, то есть пока мы не кликнем по вопросу мы не узнаем на него ответ, что в принципе нам и не нужно. Таким образом целая страница, с большим обилием контента, практически помещается в первом экране (часть страницы которую мы видим не прокручивая ее колесиком мышки).
Как сделать якоря на странице с записью.
Вставить якоря на страницу с записью можно несколькими способами. Давайте рассмотри самый удобный, простой и органичный из них. Поделим его на два этапа:
1. Делаем якорь на странице сайта:
Сначала нужно определится с тем местом сайта, которое будет находится в самом верху. Например мне нужно чтобы страница открылась с этого места:
Нет проблем! Открываем статью в Html-редакторе:
и ищем заголовок h4 “Зачем нужны якоря и в каких случаях их использовать.“:
Затем в месте где открывается заголовок (<h4>) приписываем через пробел id=”2″, где вместо двойки можно использовать любое целое число или символы. Таким образом наша строчка в html будет выглядеть вот так:
Вместо заголовка h4 может использоваться любой тег: новый абзац (<p>), выделение жирным (<strong> или <b>) и так далее. Таким образом мы может “закинуть якорь” куда угодно.
2. Делаем ссылку на якорь:
Теперь подбираем анкор ссылки, который будет вести на якорь. В моем примере это элемент списка в начале статьи: “Зачем нужны якоря и в каких случаях их использовать”.
Так же открываем статью в HTML-редакторе и ищем эти строки:
Делаем из нашего анкора ссылку следующего вида:Перед анкором добавляем:
<a href="#2">
А после закрываем эту ссылку:
</a>
Обратите внимание на двойку – это число мы указывали в предыдущем шаге, оно должно совпадать.
Теперь при переходе по этой ссылке мы сразу окажемся в нужной части страницы, а в строке бразера появится приписка #2.
Это самый простой метод вставки якорей на сайт без дополнительных “украшательств”. В заключении поста вот такая картинка в тему, которая отражает смысл данной статьи:
Похожие статьи:
Комментировать через ВКонтакте:
Как превратить якорь электродвигателя в эффективный инструмент
Из ротора сгоревшего щеточного электродвигателя, на базе которого собраны практически все электроинструменты – болгарки, дрели, перфораторы шуруповерты, бормашины, электропилы и т. д. – можно сделать интересный и практичный инструмент, который может пригодиться в любом гараже или мастерской. Что для этого нам будет нужно?
Понадобится
Помимо не дефицитного якоря, который можно извлечь из сгоревшей дрели, болгарки и т. д. или легко отыскать в пункте приема металла, у нас должны быть:
- тиски слесарные;
- съемник подшипников;
- ножовка по металлу;
- газовая горелка или электрическая духовка;
- отвертка плоская;
- плоскогубцы;
- наждачная бумага разной зернистости.
Технология переделки якоря в инструмент
Это сделать совсем нетрудно, обладая даже начальными навыками слесарного дела. Удаляем с якоря все съемные детали – гайки, кольца, шестерни, подшипники, используя съемник, молоток и плоскогубцы.
С помощью ножовки по металлу отрезаем часть якоря, на которой расположены контактные пластины щеточного узла, выполняя рез строго по торцу магнитопровода, предварительно закрепив ротор в губках слесарных тисков.
Удаляем из магнитопровода медную обмотку якоря. Для этого закрепляем его вертикально за вал в тисках и с помощью газовой горелки разогреваем и выпариваем лак обмотки якоря.
Греть ротор можно в одном месте. Поскольку медь – отличный проводник не только электричества, но и тепла, оно быстро распространится по всей обмотке и расплавит электроизоляционный лак.
Как только лак закипит и начнет капать с другой стороны якоря, прогрев можно заканчивать и приступать к удалению обмотки, выковыривая ее с помощью отвертки и, вытягивая из пазов магнитопровода плоскогубцами. Если процесс становится затруднительным, можно снова немного прогреть обмотку пламенем газовой горелки.
После удаления всей обмотки из магнитопровода открывается система сквозных отверстий и пазов, которые до этого были заполнены медной обмоткой и залиты лаком.
С помощью доступных средств очищаем магнитопровод от нагара и остатков электроизоляционного лака.
Нам остается снабдить магнитопровод-насадку кусочками наждачной бумаги одинаковой длины, которые очень просто и надежно крепятся в пазах.
В результате получается очень эффективный абразивный инструмент, который в зависимости от номера наждачной ленты может выполнить те или иные операции.
Практическое применение
Проверим наш самодельный абразивный инструмент в деле.
Для этого закрепляем вал бывшего якоря, который теперь выполняет функции хвостовика, в патрон дрели, и шлифуем поверхность деревянной и металлической заготовки. Результат получается отличным, а процесс – эффективным.
Самодельную насадку можно использовать несколько по-другому. Берем кусочек наждачной бумаги, по длине равный размеру окружности насадки, и сгибаем ее концы под углом. Обхватываем ею насадку, а согнутые и сомкнутые концы заправляем в паз.
Такой вариант насадки в состоянии легко и быстро выполнять цилиндрические углубления в деревянных и металлических заготовках.
Обе версии инструмента позволяют растачивать, шлифовать и полировать различные поверхности и отверстия.
Смотрите видео
Якорь в HTML | Закладка на веб-странице
Якорь в HTML | Закладка на веб-странице
Якорь в HTML – это закладка на поле веб-страницы. Вся эта статья сделана закладками-якорями. Кликая по ссылкам в этой статье и перемещаясь по закладкам на этой странице можно легко понять, что такое якоря, зачем они нужны и как они работают.
- Пример использования якоря
- Действие якоря
- Показания к применению якоря
- Имя якоря
- Код якоря
- Код классического якоря (тег <а>)
- Код правильного якоря
- «невидимый» и «видимый» якоря
- Код самого простого якоря
- Якорь в заголовке, в списке, в таблице.
Якорь в любом открывающем теге элемента HTML…
- Ссылка на якорь
- Код ссылки на якорь, в пределах одной страницы
- Код ссылки на якорь, расположенный на другой странице
- Код ссылки на якорь, расположенный на другом домене (блоге, сайте)
- Абсолютная ссылка
(продолжение статьи – Зачем на сайте якоря)
Пример практического использования якорей в HTML – настоящая статья с меню-оглавлением. В этом случае, в ключевые разделы и заголовки текста статьи были установлены якоря, а пункты меню оглавления – выступают ссылками на них. Кликая по ссылкам в меню оглавления статьи, пользователь перемещается в нужные места и разделы в теле самой статьи.
Переход пользователя по ссылке на якорь приводит его (пользователя) к месту установки якоря, к «заякоренной» намеченной точке на веб-странице. Иными словами, при переходе пользователя по ссылке на якорь – веб-страница откроется в браузере не со своего сначала, а сразу в том месте, где этот якорь установлен. Более подробно можно почитать в статье «Зачем на сайте якоря»
Якорь в гипертекстовой разметке HTML применяется, когда необходимо направить пользователя непосредственно в требуемое место страницы, минуя утомительное листание всего текста. Такое перенаправление может понадобиться в рекламных целях, или просто – по желанию другого пользователя. Например, если нужно сделать интерактивное меню-оглавление для большой статьи, такое как в статье про якоря.
Чтобы создать и установить якорь на веб-странице,
нужно вставить код якоря в код html-документа и
Имя якоря – это его условный идентификатор, по которому браузер находит якорь на странице. Имя якоря может быть любым. Желательно, оно должно соответствовать тематике страницы и содержать, минимум три символа. Имя якоря может содержать цифры и латинские буквы в любой комбинации. Выбор имени для якоря ничем не ограничивается, кроме одного – оно должно быть уникальным в пределах страницы своего месторасположения.
На одной странице (по одному веб-адресу) не может быть двух якорей с одинаковым именем. Если на одной странице будут находиться якоря с одинаковым именем, то они – либо совсем не будут работать, либо будет открываться только первый из них (это зависит от браузера пользователя).
Но! Якоря с одинаковым именем, расположенные на разных веб-страницах (по разным веб-адресам) – будут прекрасно работать. Например, у меня на всех страницах блога стоит якорь «zaglavie» и отлично работает на каждой странице.
(Более подробно тема изложена в материале «Теория якорного дела»)
Общий вид современного кода якоря в HTML представляет собой конструкцию из любого открывающего тега HTML и его атрибута, задающего уникальное имя (идентификатор) для якоря.
Изначально, для создания пользовательских якорей, в HTML был задуман тег <a> и его атрибут name. Параллельно атрибуту name, у тега <a> существовал атрибут id, который тоже расценивался как якорь на веб-странице. Так они и стали родоначальниками классических якорей – тег <a> и его атрибуты – name и (или) id
Код классического якоря создаётся при помощи тега <a>
При этом – имя якоря (его идентификатор)
задаётся через атрибуты тега <a> – name или id
Таким образом, код классического якоря,
вставляемый в документ HTML будет иметь вид
<a name=»razdel»></a> или <a></a>
где, слово «razdel» – это произвольное уникальное имя якоря
в пределах страницы его местонахождения.
Правильные якоря бывают видимыми и невидимыми. «Видимым» называется тот якорь, который имеет анкор – видимую часть элемента. Как правило, это текстовая часть. Лично я такими якорями никогда не пользуюсь, поэтому упомянул про них исключительно ради объективности своего обзора.
Код невидимого якоря:
<a name=»razdel»></a> или <a></a>
Код видимого якоря:
<a name=»razdel»>ТЕКСТ</a> или <a> ТЕКСТ </a>
где, слово «ТЕКСТ» – видимая часть текста якоря (анкор). Этот текст (анкор) будет «отсвечивать» в месте установки якоря.
И тут возникает вопрос в правильности выбора атрибута.
Какой из них правильней будет использовать – name или id ???
Если работают-то оба ???
Относительно выбора атрибута name или id, то по отношению тега <a> – прекрасно работают оба варианта, поскольку тег <a> отлично поддерживает оба из них. Лично я, долгое время использовал конструкцию вида <p><a name=»razdel«></a></p>, которую вручную вставлял в HTML-код текста непосредственно перед заголовком (тегом <Н>). При этом, якорь красиво открывал страницу сайта в месте его установки, с небольшим пробелом вверху экрана.
Через некоторое время, после очередного обновления своего HTML-редактора, я заметил, что он автоматически заменяет name на id, и везде ставит якоря, вида <a></a>
Всё понятно. Атрибут (идентификатор) «id» стал более предпочтительным, поскольку он более универсален. Атрибут (идентификатор) «id» легко обрабатывается браузером и поддерживается большинством тегов XHTML и HTML. В то время, когда атрибут name – это очень специфичный атрибут, который поддерживается только тегом <a>. И, если при помощи идентификатора id можно вставить якорь, практически в любой элемент веб-разметки, то при помощи атрибута name можно всунуть якорь только в тег <a>…
Но! С другой стороны – атрибут name, как раз-таки и придуман для создания якорей. При чём, этот атрибут придуман ещё на заре Интернет-времён и поддерживается ещё в древнейшем HTML 3.2. А это значит, что наш дорогой «name» уже присутствует на миллионах веб-страниц и его ещё не скоро отправят на помойку. Просто не смогут!
Таким образом получается что, с точки зрения классики веб-языков и истории создания кода якорей, то – более правильным будет атрибут name. Ну, а с точки зрения удобства, универсальности и прогресса, то, естественно – код правильного якоря должен быть написан через атрибут id и иметь вид: <a></a>
Но, два раза правильно – так не бывает! Где же истина?
И, как будет более правильно, <a name=»razdel»></a> или <a></a>?
Истину, как всегда, можно узреть в корне проблемы, задавшись вопросом – «А при чём здесь вообще тег <a>, если атрибут id поддерживают почти все теги HTML?». Если атрибут id имеет такую широкую поддержку, то не проще будет пользоваться именно им? Ведь тогда код якоря значительно упрощается и сводится к виду id=»razdel», который можно установить почти в любой открывающий тег HTML и XHTML!
Атрибут («id») поддерживают теги списков (ul, ol, li, dl, dd, dt), теги таблицы (table, tr, td…), теги блоков и абзацев (div, p) и ещё семь десятков открывающих тегов других элементов HTML. И, во все из них можно вставить или попытаться вставить якорь, при помощи атрибута «id». Делается это достаточно просто – в открывающий тег требемого элемента нужно добавить конструкцию, вида id=»razdel», где, естественно, слово «razdel» – это уникальное имя якоря в пределах его страницы. Если такая конструкция там уже есть, например – она может быть сделана верстальщиком шаблона сайта, значит – ничего делать не нужно. Якорь уже стоит. Надо только запомнить его имя и сделать ссылку на него.
Якорь в заголовке, в списке, в таблице.
|
(к оглавлению) |
Таким образом, учитывая что код самого простого якоря имеет вид id=»razdel», то код требуемого элемента разметки HTML, с установленным в него якорем, будет выглядеть, примерно так:
- для заголовка (h2, h3, h4, h5, h5, h6)
- <h2>Текст заголовка…
- для списка (ul, ol, dl) и его элементов (li, dt, dd)
- <ul>тело списка…
<li>тело элемента списка… - для элементов таблицы (table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr)
- <table>тело таблицы или её элемента…
… и так далее, и тому подобные конструкции, вида:
<div> или <p>
и всё это будут – якоря в открывающих тегах элементов HTML.
(закрывающие теги для элементов, естественно – обязательно)
Прошу прощения за столь вольное обращение с написанием тегов, но я всего лишь хотел подчеркнуть собственное бессилие перед созиданием и проверкой семи десятков почти одинаковых примеров. И так понятно, что код якоря вида id=»razdel» можно вставить, практически в любой открывающий тег HTML. И такой якорь должен работать. Для примера, вся эта статья сделана именно такими якорями.
Ссылка на якорь создаётся при помощи тега <a> и его атрибута href. Ссылка на якорь ничем не отличается от обычной ссылки, с той только разницей, что к адресу веб-документа добавляется решётка (#) и имя якоря. Как и все остальные ссылки на свете, ссылки на якорь могут быть локальными и абсолютными. Локальные – это ссылки на якорь в пределах одного сайта (домена), абсолютные – это ссылки с указанием полного веб-пути к веб-странице и якорю на ней. Как правило, абсолютные ссылки используют для якорей расположенных на других сайтах (доменах). Количество ссылок на один якорь и место расположения этих ссылок ни чем не лимитировано и ни как не ограничено. На один и тот же якорь может быть сколько угодно ссылок, расположенным по всем страницам всех сайтов Интернета.
Все ссылки на якоря можно условно разделить на три группы:
- 1 группа – Локальные ссылки на якорь,
расположенный в пределах одной страницы - Код ссылки на якорь, расположенный в пределах одной и той же страницы, будет выглядеть так: <a href=»#razdel»>ТЕКСТ ССЫЛКИ</a> где, razdel – это уникальное имя якоря в пределах документа html, а ТЕКСТ ССЫЛКИ – это видимая текстовая часть (анкор) ссылки.
Если якорь и ссылка на него находятся в пределах одной страницы сайта или блога, то полный путь к якорю в ссылке указывать не обязательно, достаточно просто решётки и имени якоря – #razdel. Браузер сам найдёт якорь на странице, причём сделает это гораздо быстрее, нежели в случае с полным указанием абсолютного пути к якорю, когда потребуется перезагрузка страницы.
- 2 группа – Локальные ссылки на якорь,
расположенный в пределах одного домена (сайта, блога) - Код ссылки на якорь, расположенный на другой странице в том же домене имеет вид: <a href=»/adress-stranici.html#razdel»>ТЕКСТ ССЫЛКИ</a> где, /adress-stranici.html – адрес веб-страницы без указания домена, razdel – уникальное имя якоря, в пределах именно той страницы, где он расположен.
Если якорь и ссылка на него находятся в пределах одного домена (сайта, блога), то имя домена в ссылке указывать не обязательно. Браузер сам отсчитает путь к документу и найдёт якорь на странице
- 3 группа – Абсолютные ссылки на якорь,
расположенный на другом домене (блоге, сайте) - Если якорь и ссылка на него находятся на страницах разных сайтов с разными доменными именами, то в такой ссылке нужно прописать полный (абсолютный) путь к веб-документу и якорю на нём. Делается это, с указанием протокола (обычно http), домена (доменного имени сайта), полного адреса страницы и уникального имени самого якоря. Код такой ссылки будет выглядеть так:
<a href=»http://tehnopost.info/adress-stranici.html#razdel»>ТЕКСТ ССЫЛКИ</a> где, http://tehnopost.info/adress-stranici.html – полный адрес страницы в Сети, с указанием домена, razdel – уникальное имя якоря, в пределах страницы его местонахождения.
Ссылка с указанием полного пути называется абсолютной ссылкой.
Абсолютные ссылки можно использовать для любых якорей, даже находящихся на одной и той же странице. Абсолютные ссылки наиболее предпочтительны для SEO-оптимизации страницы и сайта, ибо, зачастую – якоря, на которые сделаны абсолютные ссылки – могут быть засчитаны поисковиком за абсолютно разные веб-адреса и тексты. И, даже – якоря, на которые сделаны абсолютные ссылки – могут предлагаться отдельными позициями при выдаче в СЕРП (страницу поисковой выдачи). По крайней мере, у Google такое иногда наблюдается.
Недостаток работы абсолютной ссылки на якорь – полная перезагрузка страницы из сервера. Т.е. переход на якорь происходит с полной перезагрузкой страницы в браузер, даже если якорь и ссылка на него находятся на одной странице. Полная перезагрузка страницы занимает дополнительное время, создаёт дополнительную нагрузку на сетевое подключение, дополнительно жрёт трафик пользователя и самое главное – не работает без подключённого Интернета (в локальном или автономном режиме).
Якорь в HTML | Закладка на веб-странице на tehnopost.info
(продолжение статьи – Зачем на сайте якоря)
- Зачем на сайте якоря
- Теория якорного дела
- Якорь в HTML – как это работает
- Якоря и SEO (поисковая оптимизация)
- Ограничения на количество якорей
- Код якоря и ссылки на него,
способы установки якорей …
Исходный код:
<a href=»#c204″>204</a>
<a href=»#razdel»>ТЕКСТ ССЫЛКИ</a>
<p><span>Р</span>азумные люди приспосабливаются к окружающему миру.
Неразумные люди приспосабливают мир к себе. <br>Вот почему прогресс определяется
действиями неразумных людей.</p>
<p>Бернард Шоу</p>
<div>
<span>
204
</span>
Не работает. <br>
Может быть это специфика <br>
сконвертированного<br>
из doc html-файла?<br>
Буду благодарна за помощь<br>
</div>
Пример работы:
204 ТЕКСТ ССЫЛКИ
Разумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе.
Вот почему прогресс определяется действиями неразумных людей.
Бернард Шоу
204 Не работает.
Может быть это специфика
сконвертированного
из doc html-файла?
Буду благодарна за помощь
Буду благодарна за помощь
Якорь wordpress способы его установки на страницах блога
302
Якорь wordpress позволяет разбить статью на логические разделы в виде ссылок (анкоров). Создать краткое содержание всей страницы, помогает читателям быстро переместиться в тот или иной раздел, улучшая при этом юзабилити, удобство пользования, профессионализм и прочие моменты.
Примеры таких якорей — это ссылки в конце страницы «на верх» или «вернуться назад», содержание электронной книги, поста. Такие якоря применяются широко на лендингах для навигации и описания товара, услуге.
Как сделать якорь wordpress и какие для этого есть инструменты.
На практике, такие якоря целесообразно применять если статья достаточно большая, чтобы в самом начале можно было ознакомиться с кратким содержанием всех разделов и при необходимости сразу попасть в нужный.
Есть 3 наиболее простых и доступных варианта для решения данной задачи.
Поставить якорь в wordpress с помощью html-кода.
Установить плагин Better Anchor Links
Установить редактор TinyMCE Advanced
Конечно есть и другие возможности (php, framework, javascript), но это можно оставить любителям тестировать и программировать.
Проверить работу таких якорей можно покликав по каждой ссылке в начале поста.
А теперь по порядку.
Как поставить якорь в wordpress с помощью html-кода.
Делается это в режиме html-кода любого редактора которым вы пользуетесь в своем движке wordpress. Допустим что у меня есть заголовок третьего уровня <h4>Заголовок третьего уровня</h4> и для быстрого доступа к этому заголовку, мне необходимо поставить якорь вначале статьи.
Для этого, к данному заголовку нужно добавить пустую ссылку-якорь и придумать для нее идентификатор (id).
Например <a id=»integer»></a>, и этот id необходимо подставить в начале заголовка <h4><a id=»integer»></a>Заголовок третьего уровня</h4>
Следующий шаг — это создать ссылку на это самый id. В моем примере, id=»integer»
<a href=»#integer»>ссылка на якорь</a>. При нажатии на эту ссылку, будет происходить автоматическая прокрутка до якоря.
Якорь wordpress можно поставить в любом месте страницы и навигацию по этим якорям можно сделать с прокруткой в любое место статьи.
Как поставить якорь в wordpress с помощью плагина Better Anchor Links
Плюсы и минусы этого варианта.
+ автоматическое создание якоря в тегах h2-h6 и содержания в начале страницы
+ базовые и собственные css-стили якорей
+ собственный виджет
+ создание собственного заголовка
+ «вернуться к содержанию» рядом с заголовком (ссылка при необходимости).
На практике все выглядит достаточно просто. Как только в тексте появляется тег любого из заголовков h2-h6, плагин тут же автоматом подставляет якорь.
— давно не обновляется
— узконаправленность плагина (только для якорных ссылок)
Скачать плагин можно на сайте wordpress Better Anchor Links
Якорь wordpress с помощью визуального редактора TinyMCE Advanced
И третий, на мой взгляд, самый практичный — это установить редактор TinyMCE Advanced, который способен решить множество задач не только с контентом и его форматированием, но и с якорями в том числе.
Вопрос установки пропустим и сразу взглянем на внешний вид настроек данного редактора.
Главные особенности редактора
Во-первых, сам редактор с более широким функционалом (15 дополнительных кнопок) чем редактор установленный по умолчанию в wordpress.
Во-вторых, настройка функционала происходит путем перетаскивания нужных кнопок в рабочую поверхность.
В-третьих, всегда актуальная версия
Что касается непосредственно установки якорных ссылок, то для начала необходимо добавить в рабочую панель редактора специальную кнопку.
Якорь wordpress создается путем перетаскивания кнопки-якоря в нужное место на странице, а затем просто делается ссылка на этот якорь с указанием id. Название id можно придумывать какое угодно.
Ссылка на этот якорь делается как обычно. Выделяем нужный нам текст и в качестве ссылки подставляем решетку с названием придуманного id.
Важно чтобы для каждого якоря должен быть разный id.
Для лучшей наглядности я записал видео по работе с анкорными ссылками wordpress.
Что такое якорь на сайте. Как сделать быстрый переход к нужной строке сайта.
Что такое якорь на сайте. Как сделать на сайте быстрый переход к нужной строке. Это удобная функция для статей с большим количеством знаков или длинных сайтов одностраничников. С её помощью посетитель может быстро очутиться на нужной строчке в тексте.
Если это статья, то можно сделать как бы оглавление в начале. Это удобно посетителю. Он быстро может прочитать, то, что его интересует больше всего. А если информация его не разочарует, то возможно, что он захочет прочитать и остальное, таким образом, он подольше задержится на сайте. А это будет улучшать поведенческие факторы и навигацию сайта.
Якорь частенько используют на длинных продающих сайтах, после каждого блока информации пишут, например «Скачайте прямо сейчас свой экземпляр». И как только вы кликаете на ссылку, браузер подводит вас к блоку, где написана цена, гарантии и есть ссылка, для перехода к оплате.
Вот как будет выглядеть содержание этой статьи с якорями:
Как сделать якорь на сайте пример.
Очень просто. В режиме html (в админке вордпресс этот режим называется – Текст) нужно выбрать строку, которая будет перенаправлять на якорь. И окружить её тегами.
Фраза «Ваш текст», окружена нужными тэгами:
<a href="#giv"> Ваш текст </a>
И при нажатии на неё посетителя перенесёт на фразу, которая тоже окружена другими тэгами. Но якорь там должен быть именно тот, который в слове или фразе, с которой его будет перекидывать.
"#giv"
этот значок указывает на якорь. Вы можете написать вместо giv любые символы или цифры. И ваш якорь должен быть с теми же знаками или цифрами.
И словосочетание естественно напишите своё.
А теперь как оформить строчку, на которую будет перенаправлен посетитель, после нажатия на ссылку. Вот как она будет выглядеть, я специально не меняла слова, чтобы вам было понятно.
<a> Ваш текст </a>
В тексте эта строчка будет выглядеть как ссылка, но если на неё нажать, то вы никуда не перейдёте.
Если же вы не хотите, чтобы фраза (это наш якорь) на которую будет перебрасывать первая ссылка, не выглядела как URL, то окружите её тегами, например <h3>Ваша фраза</h3> (эти теги создают заголовок из простого шрифта).
А если окружаете фразу этими тэгами, то можете просто добавить в теги
id="giv"
вот как это будет выглядеть:
<h3> Ваш текст </h3>
Вместо тега — а для якоря, вы можете использовать теги — div,p. А вместо id, слово — name. То есть
<div name=”giv”>Ваш текст </div>
или
<p name=”giv”>Ваш текст</p>
И ещё маленький секрет, когда посетитель переходит на якорь, то фраза-якорь убегает наверх монитора, да так, что её не видно. Ролик видно наполовину и картинку тоже.
Так вот, чтобы этого не происходило, вы можете схитрить. И написать код якоря вообще без текста, и разместить код немного выше фразы, ролика или картинки. Для этого есть 4 варианта написания:
Сделать якорь можно не только на фразу, но и на картинку и на видеоролик. Для этого точно так же окружаем код картинки или видеоролика кодом
<a> код видео или изображения</a>
Или любым из 6-ти предыдущих кодов.
Как сделать якорь на другую страницу сайта.
Это очень просто, пишем URL статьи, а в конце ставим /#якорь той фразы, на которую будет перенаправлять ссылка. Естественно, что сам якорь на той странице уже сделан.
Чтобы было понятнее, использую якорь, который писала до этого https://ccылка на статью/#giv
То есть тот набор знаков, который вы задавали для якоря. И посетитель будет попадать на указанную вами фразу, фото или ролик.
И лучше сделать так, чтобы она открывалась в новом окне.
Как сделать ссылку для интернета, чтобы посетитель сразу попадал на якорь.
Если вы хотите поделиться в соцсетях на статью с якорем, то формировать ссылку нужно так же, как написано выше. То есть поставить в конце ссылки /#якорь.
Как сделать якорь на сайте с помощью плагина wordpress.
Помогать нам в этом будет плагин AddQuicktag, он вообще-то применяется для удобного внедрения на блог шроткодов. Вы можете его скачать здесь или установить при помощи поиска плагинов в административной панели блога.
Не волнуйтесь — это лёгкий плагин и никакой нагрузки на блог он оказывать не будет, а просто проставит коды, в нужном вам месте. Ведь тяжесть плагинов напрямую зависит от того какой скрипт он выполняет. А здесь ничего тяжёлого нет. Так что советую поставить.
Иначе, пока вы не запомните коды, вам придётся «скакать» и смотреть их.
Итак, установили и активировали плагин AddQuicktag, теперь на странице с плагинами, нажимаем Настройки.
И добавляем:
- 1 – Название будущей кнопки (вы можете поставить любое)
- 2 – Начало кода для начальной фразы, кликнув на которую посетитель перескакивает на якорь
- 3 – Конец кода (хотя это делать не обязательно, потому что для закрытия тега, есть кнопка в вордпресс админке)
- 4 – проставляем галочки, для того чтобы указать, где будет применяться этот код
- 5 – жмём сохранить
А теперь идём в админ панель, в раздел редактирования статей. Переходим там в режим HTML (Текст). И добавляем код для якоря.
- Для этого ставим курсор в начало фразы — цифра 1 на скриншоте
- Нажимаем на кнопку – цифра 2 ( у меня она называется Якорь 1).
- Когда появится код, вставляем символы для якоря после знака #
- Ставим курсор в конец фразы и нажимаем либо ещё раз на кнопку Якорь1, либо на кнопку — Закрыть код (она есть на всех панелях вордпресс редактора статей по умолчанию)
Тоже самое проделываем с кодом для якоря. И всё, теперь у вас есть удобный инструмент для вставки якоря.
Как сделать якорь с привязкой по времени для видеоролика.
Это не совсем якорь и называется по-другому, но я решила, что для кого-то это будет полезная информация. Тем более, что URL выглядит почти так же так же, как и ссылка с якорем.
Идея состоит в том, чтобы отправить ссылку на видео, которое будет начинаться с нужного вам времени. И после того, как по вашей ссылке перейдут, ролик начнётся не сначала, а с заданного времени. Например, начало там не важно, или ролик очень длинный, и некоторые зрители просто не досмотрят до самого нужно и закроют видео, так ничего и не поняв.
- Первый способ получить ссылку с привязкой ко времени
Это можно сделать прямо на ЮТубе. Или на любом сайте, если там стоит ролик с видеохостинга YouTube.
Как только видео дойдёт до нужной минуты (или часа, зависит от длины ролика) — кликайте на ролик правой кнопкой мыши. И вы увидите список, выбирайте: Получить URL видео с привязкой ко времени.
После этого появится ссылка на привязанное ко времени видео. Копируйте URL и отправляйте, туда, куда хотели. Выглядеть ссылка будет примерно вот так https://youtu.be/EgjfrkEnFxA?t=11m56s
– это время привязки в секундах. Можете его подкорректировать при желании, не обязательно ждать пока сервис сгенерирует нужное время.
А если ролик идёт несколько часов, такое тоже бывает. А вы хотите, чтобы знакомый перешёл сразу же в видео на нужный момент через 2 часа, 30 минут и 23 секунды. Тогда вам после ссылки нужно разместить вот такой код — t=02h40m23s
- Второй способ как получить ссылку на ролик с привязкой ко времени
Если первый способ можно применять на любом сайте, где есть видео с ЮТуба. То этот способ подходит, только в том случае если вы находитесь на YouTube.
Спускаемся под видео. Жмём на слово – Поделиться. И как только видео дойдёт до нужного времени, сразу же ставим галочку рядом со словом – Начало. В окошечке рядом мы видим как меняется время. А выше всего этого вы можете скопировать ссылку, с привязкой ко времени.
А здесь ссылочка уже выглядит по-другому, вот так https://www.youtube.com/watch?v=EgjfrkEnFxA#t=721
В этому случае сервис показывает время в секундах.
В этой статье, я рассказала вам, как поставить якорь на сайт, для того, чтобы посетитель попадал на нужный абзац или, строку или картинку, или видео в статье. А так же рассказала, как сделать ссылку на видео с привязкой ко времени.
С Уважением, Татьяна Чиронова
Сохраните пост к себе на стенку в соцсети
А здесь можно публиковать анонсы постов по теме: