HTML » Ссылка внутри страницы HTML
Иногда на практике возникает необходимость сделать ссылку на определенную область внутри одной страницы HTML. Это очень полезный «прием», ведь с его помощью мы всегда можем направить читателя по клику в ту область страницы, в которую нам необходимо.
Ссылку внутри страницы можно сделать двумя способами, давайте их рассмотрим:
1) Ссылка внутри страницы с помощью атрибута «name»:
<html> <head> <title>Структура HTML документа</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <p> <a href="#link">Перейти к разделу 5</a></p> <h2> Заголовок раздела 1</h2> <p>Текст раздела 1</p> <h3>Заголовок раздела 2</h3> <p>Текст раздела 2</p> <h3>Заголовок раздела 3</h3> <p>Текст раздела 3</p> <h3>Заголовок раздела 4</h3> <p>Текст раздела 4</p> <h3><a name="link">Заголовок раздела 5</a></h3> <h3>Заголовок раздела 6</h3> <p>Текст раздела 6</p> <h3>Заголовок раздела 7</h3> <p>Текст раздела 7</p> <h3>Заголовок раздела 8</h3> <p>Текст раздела 8</p> <h3>Заголовок раздела 9</h3> <p>Текст раздела 9</p> <h3>Заголовок раздела 10</h3> <p>Текст раздела 10</p> </body> </html>
В данном примере мы прописали ссылку (строка 7) и непосредственно сам атрибут «name» с параметром «link». В результате чего, при нажатии по ссылке «Перейти к заголовку раздела 5» нас перебросит к 5 заголовку, т.к. именно для него мы и задали метку.
2) Ссылка внутри страницы с помощью атрибута (идентификатора) «id»:
<html> <head> <title>Структура HTML документа</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <p> <a href="#link">Перейти к разделу 5</a></p> <h2>Заголовок раздела 1</h2> <p>Текст раздела 1</p> <h3>Заголовок раздела 2</h3> <p>Текст раздела 2</p> <h3>Заголовок раздела 3</h3> <p>Текст раздела 3</p> <h3>Заголовок раздела 4</h3> <p>Текст раздела 4</p> <div><h3>Заголовок раздела 5</h3></div> <p>Текст раздела 5</p> <h3>Заголовок раздела 6</h3> <p>Текст раздела 6</p> <h3>Заголовок раздела 7</h3> <p>Текст раздела 7</p> <h3>Заголовок раздела 8</h3> <p>Текст раздела 8</p> <h3>Заголовок раздела 9</h3> <p>Текст раздела 9</p> <h3>Заголовок раздела 10</h3> <p>Текст раздела 10</p> </body> </html>
Данный пример практически аналогичен первому. Вместо атрибута «name» здесь используется идентификатор «id». Можно использовать любой вариант, какой больше нравится. Вот по такому принципу и формируется ссылка внутри страницы.
Урок 8: Ссылкиrustutorial — HTML.net
В этом уроке вы научитесь создавать ссылки — переходы с одной страницы на другую.
Что необходимо для создания ссылки?
Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом — и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на HTML.net:
Пример 1:
<a href="http://www.html.net/">Это ссылка на HTML.net</a>
будет выглядеть в браузере:
Элемент a обозначает «якорь/anchor». Атрибут href это сокращение от «hypertext reference/гипертекстовая ссылка», специфицирующий
место, на которое выполняется переход по данной ссылке — обычно это internet-адрес
и/или имя файла.
В примере атрибут href имеет значение «http://www.html.net»,
которое является полным адресом HTML.net
и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что»http://»
всегда должно входить в состав URLов. Слова «Это ссылка на HTML.net» это текст,
который показывается в браузере как ссылка. Не забудьте закрыть тэг </a>.
Как насчёт ссылок между моими собственными страницами?
Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:
Пример 2:
<a href="page2.htm">Щёлкните здесь для перехода на page 2</a>
Если page 2 помещена в подпапку «subfolder», ссылка выглядит так:
Пример 3:
<a href="subfolder/page2.htm">Щёлкните здесь для перехода на page 2</a>
В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:
Пример 4:
<a href="../page1.htm">Ссылка на page 1</a>
Сочетание «../» указывает на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка. Следуя этой логике, вы можете также указать на два уровня выше «../../» или более.
Разобрались? Альтернативно вы всегда можете указать полный адрес файла (URL).
А ссылки внутри страницы?
Вы можете также создавать ссылки-переходы внутри самой страницы — например, оглавление со ссылками на главы. Всё, что вам необходимо, — использовать атрибут id и символ «#».
Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:
<h2>heading 1</h2>
Теперь можно создать ссылку на этот элемент с помощью знака «#» в атрибуте ссылки. Знак «#» сообщает браузеру, что это переход на той же самой странице. После «#» должен следовать id тэга, на который выполняется переход. Например:
<a href="#heading1">Ссылка на heading 1</a>
Всё станет понятнее на примере:
Пример 5:
<html> <head> </head> <body> <p><a href="#heading1">Ссылка на heading 1</a></p> <p><a href="#heading2">Ссылка на heading 2</a></p> <h2>heading 1</h2> <p>Text text text text</p> <h2>heading 2</h2> <p>Text text text text</p> </body> </html>
выглядит в браузере (щёлкните по ссылкам):
(Примечание: атрибут id должен начинаться с буквы)
Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ:
Пример 6:
Ссылка на <a href="mailto:[email protected]">Отправить e-mail nobody на HTML.net</a>
будет в браузере:
Единственное отличие в ссылках на e-mail и на файл состоит в том, что, вместо
адреса документа, вы записываете mailto: с последующим адресом
электронной почты/e-mail. При щелчке по ссылке открывается программа по
умолчанию для работы с электронной почтой с адресом, уже записанным в строке
адреса. Обратите внимание, что эта функция будет работать только в том случае,
если e-mail программа установлена на вашем компьютере. Попробуйте!
Есть ещё какие-нибудь другие атрибуты, которые мне нужно знать?
Для создания ссылки вы обязательно должны использовать атрибут href.
Кроме того, в ссылку можно поместить title:
Пример 7:
<a href="http://www.html.net/" title="Посещайте HTML.net и изучайте HTML">HTML.net</a>
будет выглядеть в браузере:
Атрибут title используется для краткого описания ссылки. Если вы — не щёлкая мышью — поместите её указатель над ссылкой, вы увидите, как появится текст «Посещайте HTML.net и изучайте HTML».
<< Урок 7: Атрибуты
Урок 9: Изображения >>
Внутренние ссылки. Cсылки на внутренние страницы сайта.
Внутренние ссылки – это обычные гиперссылки, которые отсылают к целевым страницам (целям), расположенным на том же домене, с которым связана исходная страница.
Обычными словами, внутренняя ссылка – это ссылка, которая ссылается на другую страницу того же сайта.
Пример кода:
<a title="ключевое слово" href="http://great-world.ru">текст ссылки</a> |
Оптимальный формат ссылки
Используйте ключевые слова в анкорном тексте ссылки, в котором будут присутствовать ключевые слова целевой страницы.
Что такое внутренняя ссылка?
Внутренние ссылки – это ссылки, которые отсылают с одной страницы домена на другую страницу, расположенную на том же домене. Они широко используются для основного меню навигации сайта.
Такие ссылки обычно используются в следующих случаях:
- Они помогают пользователям перемещаться по сайту.
- Они позволяют создавать иерархию в размещении информации на сайте.
- Они помогают распространению ссылочной массы вокруг сайта.
SEO-оптимизация внутренних ссылок
Внутренние ссылки являются самым полезным инструментом в создании архитектуры сайта и источником ссылочной массы (URLы тоже важны). Поэтому этот раздел посвящен созданию SEO оптимизированной структуры сайта, содержащего внутренние ссылки.
Поисковые машины на отдельной странице должны видеть содержание сайта со всеми его страницами и их основными ключевыми словами. Они также должны иметь доступ к дружественной для поисковиков ссылочной структуре, выстроенной таким образом, чтобы те смоги пройти по всем ссылкам и полностью отсканировать весь сайт. На многих сайтах присутствует критическая ошибка – их владельцы скрывают или запутывают ссылки для переходов с основного меню, поисковые машины в таком случае не получают к ним доступа и не могут отсканировать страницы. На рисунке ниже иллюстрируется, каким образом это происходит:
На рисунке показано как разукрашенный поисковый робот от Google изучает страницу «А» и видит внутренние ссылка на страницы «В» и «Е». Тем не менее, даже если на страницах «С» и «D» расположена важная информация, паучок не сможет на них попасть и изучить (даже не будет знать об их существовании), так как не существует прямой ссылки на них. Что касается Google, то он ничего не узнает об этих страницах – замечательный контент, хорошее таргетирование ключевых слов и качественные маркетинговые приемы – все будет впустую, если поисковик не сможет найти такие страницы.
Оптимальная структура сайта должна быть похожей на пирамиду, где вершиной будет главная страница:
Такая структура содержит минимальное количество переходов от главной страницы до любой из страниц. Это очень полезно, так как создает ссылочную массу , которая распределяется на все страницы сайта. Данную структуру используют большинство мощных сайтов.
Но каким образом все это достигается? Лучший способ реализации – это использовать внутренние ссылки и дополнительные URL структуры. Ниже можно увидеть формат корректного редактирования внутренней ссылки.
вид ссылки
На приведенной иллюстрации тег «a» указывает на начало ссылки. В тегах ссылки могут содержаться рисунки, текстовая информация или другие объекты, которые обеспечивают ее «кликабельность» и создают такую выделенную зону, на которую пользователь должен кликнуть для перехода на другую страницу. Это оригинальная концепция Интернет – «гиперссылки» project management collaboration software.
Расположение реферальной ссылки говорит браузеру (и поисковым машинам), по какому адресу расположена целевая страница. Далее, видимая для пользователей текстовая часть ссылки, которая в SEO мире называется «анкорный текст», на которой указывается целевая страница сайта. Тег закрывает ссылку, таким образом, все элементы, расположенные после него, не будут иметь атрибутивного значения.
Это базовый формат построения ссылок – и он самый понятный для поисковых роботов. Поисковики знают, что они должны добавить такую ссылку в базу данных интернета и использовать ее в рейтинговых значениях ресурса (как ТИЦ и PR), а затем посетить ее и проиндексировать.
Ниже приведены некоторые самые распространенные причины, почему страницы могут быть не проиндексированы, а ссылки нерабочими:
Ссылки, доступные только через внутренние поисковые разделы
Поисковики не станут выполнять поиск для нахождения такого контента, а потому он будет считать, что миллионы страниц специально скрыты за недоступными внутренними поисковыми разделами.
Ссылки из Javascript
Ссылки, созданные с использованием Javascript, могут быть или полностью нечитаемыми, или иметь очень маленький вес. По этой причине рекомендовано использовать стандартные ссылки в HTML вместо Javascript для переходов на страницы, на которых будут важны показатели поискового трафика.
Ссылки во Flash, Java или через другие плагины.
Ссылки, встроенные во Flash-баннер, Java или другие подобные форматы обычно недоступны для считывания поисковыми машинами.
Ссылки, заблокированные в мета-теге Robots или файле Robots.txt
Файлы мета-тега Robots и Robots.txt позволяют владельцу ограничивать доступ поискового робота к выбранным страницам сайта.
Ссылки на страницах с сотнями или тысячами ссылок
Все поисковые машины имеют лимит в 150 ссылок на страницу, прежде чем они прекратят индексацию таких ссылок на другие страницы. Такое лимитирование достаточно гибкое и некоторые важнейшие страницы могут иметь до 200, даже до 250 различных ссылок, но на практике будет разумнее не делать более 150 ссылок, чтобы не рисковать при индексировании всех страниц.
Ссылки во frame или Iframe
Технически, ссылки во frame и Iframe индексируются, но они представляют некоторые трудности для их организации поисковыми машинами. Только продвинутые пользователи с хорошими техническими знаниями о поисковой индексации и организации ссылок в кадрах могут использовать такие элементы вместе с их комбинацией с внутренними ссылками.
Для предупреждения таких ошибок у веб-маcтера должны быть качественные, удобные для поисковика HTML-ссылки, которые позволят ему без труда проиндексировать контент целевой страницы. Ссылки могут иметь связанные с ним атрибуты, но поисковые машины практически их всех игнорирует, однако за важным исключением – тег rel=»nofollow» будет ими учитываться.
<a href="адрес страницы" rel="nofollow">закрытая от поиска ссылка</a> |
В этом примере, добавив в тег ссылки атрибут rel=»nofollow», веб-мастер дает понять поисковым машинам, что он не хочет, чтобы эта страница учитывалась в обычной ссылочной массе. Nofollow возник как метод, который помогал остановить автоматические комментарии блога, гостевой книги и другой спам, но со временем превратился в способ управления индексированием страниц поисковыми машинами. Ссылки с тегом nofollow разными поисковыми машинами интерпретируются по-разному.
Алексей Повловский
Как сделать ссылку на определенное место другой страницы
Привет! Сегодня рассмотрим, как создать ссылку на определенное место страницы. Казалось бы, элементарная вещь, но далеко не все знают, как это осуществить. Иногда появляется необходимость добавлять такие ссылки в свои статьи, чтобы посетитель сайта мог одним кликом мышки перейти не только на другую страницу сайта, но и в нужное место на этой странице. Чтобы понять, как это работает, перейдите по этой ссылке.
Вы перейдете на другую страницу, и в место, где описывается, как установить и настроить плагин WP Social Buttons. Иногда это очень полезно, что позволяет избежать лишних объяснений в статье. Человек переходит по ссылке, и сразу может прочитать нужную информацию.
Как сделать ссылку на определенное место данной страницы
Возможно, Вы замечали, что на многих сайтах, почти в самом начале статьи, добавляют ссылки на нужное место в статье. Это удобно для посетителей, так как при клике на такую ссылку, он может перейти к нужной ему информации, и почитать то, что его интересует.
Такие ссылки создавать достаточно просто. Для этого надо в нужном месте на странице создать «якорь», а затем на этой же странице надо добавить ссылку на этот «якорь».
1. Ссылка на якорь <a href=“#anchor”>Текст</a>
2. Якорь <a id=“anchor”></a> Текст на странице… Вместо id, можно написать атрибут name
В кавычках ссылки и якоря, может быть любой текст, но он должен быть одинаковым:
1. Ссылка <a href=“#biz”>Текст</a>
2. Якорь <a id=“biz”></a> Текст на странице
Если Вы кликните по этой ссылке, то перейдете в самое начало страницы.
Как сделать ссылку на определенное место другой страницы
Здесь принцип тот же, только переход осуществляется на другую страницу. Для этого надо создать на другой странице сайта, в нужном участке текста «якорь», как b в примере выше <a id=“anchor”></a>, а затем создать ссылку с якорем на эту страницу:
<a href=“http://link.html#anchor”>Текст </a> — ссылка на другую страницу, где вместо anchor, можно написать любые знаки, но такие же, как у якоря на другой странице.
<a id=“anchor”></a>
Как сделать ссылку в виде картинки на другую страницу в определенное место
Здесь принцип тот же, что и в примерах выше, но, если у Вас сайт на Worpress, тогда нужно перейти в редактор картинки, затем выбрать «Произвольный URL» и добавить ссылку с якорем на другую страницу.