HTML: Ссылка внутри страницы
HTML ссылки можно также использовать для перехода к определённому месту внутри страницы (не обязательно текущей). В качестве места на странице, к которому будет осуществлён переход по ссылке, используется любой HTML-элемент, который допустимо использовать внутри элемента . Чтобы определить элемент, к которому будет осуществлён переход, ему нужно указать идентификатор с помощью атрибута id:
Заголовок
Теперь, чтобы при клике по ссылке был выполнен переход к элементу, который находится на одной странице с ведущей на него ссылкой, нужно в качестве значения атрибута href элемента написать символ решётки (#), после которого указать идентификатор элемента, к которому будет выполнен переход:
Чтобы перейти к определённому месту на другой странице, нужно указать решётку и необходимый идентификатор после URL-адреса:
ссылка ссылка
Примечание: основная польза от ссылок внутри веб-страницы заключается в том, что на страницах с большим объёмом содержимого, пользователю не приходится прокручивать всю веб-страницу в поисках нужного раздела, а сразу щёлкнув по названию нужного раздела, перейти к нему.
С этой темой смотрят:
- Как сделать ссылку в html
- Абсолютные и относительные ссылки html
- Открытие html ссылки в новой вкладке
- Как сделать картинку ссылкой
- HTML тег
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Ссылки внутри страницы
Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки следует вначале сделать закладку (якорь) в соответствующем месте и дать ей имя при помощи атрибута name тега , как показано в примере 1.
Пример 1. Создание внутренней ссылки
Закладка Друг уронил утюг в унитаз. И разбил его. Не утюг разбил, а унитаз. Причем так разбил, что по назначению унитаз и использовать никак нельзя, ни боком, ни передом. Мгновением назад только что вот все было хорошо и вот уже дыра прямо в унитазе, да такая, что можно забыть, что есть такой предмет в доме. Махнул рукой нечаянно, а потом мучайся.
Наверх
Между тегами и отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике.
Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки (пример 2).
Пример 2. Ссылка на закладку из другой веб-страницы
Закладка Перейти к нижней части текста
В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom .
Как сделать внутреннюю ссылку в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
О ссылках я рассказывал здесь и здесь, но там речь шла только о переходах на внешние страницы. Однако довольно часто в HTML приходится делать ссылки внутри страницы. Например, если в одном документе у вас несколько разделов, а в начале статьи должно быть содержание документа со ссылками на эти разделы.
И в этой статье я расскажу о том, как сделать ссылку внутри страницы в HTML.
Как создать внутреннюю ссылку в HTML
Итак, ссылка на текст внутри страницы в HTML создаётся за два шага:
- Надо создать ссылку.
- Надо обозначить место в тексте, куда ведёт ссылка.
Создать ссылку можно так:
То есть вы используете всё тот же атрибут href , но вместо URL пишите имя ссылки. А чтобы браузер знал, что эта ссылка ведёт на место внутри страницы, перед именем надо поставить знак # .
На втором шаге вы должны обозначить место в документе, куда ведёт ссылка. Обозначить место в документе, куда должна вести ссылка, можно одним из двух способов:
name_link«>Заголовок в статье
name_link«>Заголовок в статье
Первый способ более старый, и он будет работать во всех браузерах.
Второй способ более современный (лучше использовать именно его), но в некоторых старых браузерах это работать не будет.
Разумеется, атрибуты id или name могут быть использованы не только в заголовках, но и в других тегах. Например, в тегах абзаца или картинки. Так что внутренняя ссылка может вести на любое место в документе.
Ну а теперь пример для лучшего понимания:
my_link_1">Ссылка на заголовок 1
my_link_2">Ссылка на заголовок 2
my_link_1">Первый заголовок в статье
Это текст внутри документа под первым заголовком.
my_link_2">Второй заголовок в статье
Это текст внутри документа под вторым заголовком.
Переход по ссылке внутри страницы в HTML может выполняться не только внутри страницы, где расположена ссылка, но и к обозначенному месту другой страницы в Интернете (разумеется, если это место там обозначено с помощью id или name ).
Например, если на странице моего сайта https://info-master.su/programming/web/html/link-attributes.php есть подзаголовок, который обозначен так:
tabindex«>Атрибут TABINDEX
то для того, чтобы с вашего сайта вы могли перейти именно на эту часть страницы, вы должны прописать такую ссылку:
И таким образом пользователь может перейти не в начало страницы, а сразу к нужному участку, то есть к подзаголовку Атрибут TABINDEX .
На этом, пожалуй, разговор о ссылках я закончу. Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.
Как сделать ссылки внутри страницы на разные разделы?
Прежде чем ответить на вопрос — как создать сайт и добавить ссылки внутри страницы, давайте разберемся с тем, что же такое ссылки?
Внутренние ссылки — это базовые элементы, которые используются для перехода с одной страницы на другую. Создать HTML ссылку проще, чем вы могли подумать. Для этого достаточно использовать элемент а (ancor) и его атрибут href. Заключенный между открывающим тэгом и закрывающим текст, и будет текстом ссылки. Например:
Если необходимо создать ссылку между страницами ресурса все еще проще. К примеру, у нас есть две страницы (страница HTML шаблонов (https://www.templatemonster.com/ru/website-templates-type/)) и MotoCMS шаблонов (https://www.templatemonster.com/ru/flash-cms-templates-type/), которые находятся на одном сайте (папке), тогда код ссылки будет выглядеть:
А что если необходимо создать ссылку внутри страницы? Все также достаточно просто. Случается, что необходимо сделать ссылку с начала страницы на ее конец, или к примеру, с оглавления на главу и т.д. Место документа (заголовка) помечается следующей конструкцией:
А если необходимо маркировать любое другое место:
Раздел1:
После чего вы сможете ссылаться на любую помеченную область, простым указание ее имени после обозначения #. Например: