Ссылки внутри страницы
Ссылки допустимо указывать не только на другой сайт или документ, но и на элемент внутри страницы. Такая возможность применяется для добавления оглавления страницы с быстрым переходом к нужному разделу (так делает, например, Википедия) или для создания различных элементов интерфейса вроде вкладок.
Элемент, на который требуется сделать ссылку, обозначается идентификатором, а адрес ссылки меняет свой вид на #id, как показано в примере 1.
Пример 1. Ссылка на заголовок
Результат данного примера показан на рис. 1. К каждому заголовку добавлен уникальный идентификатор через атрибут id , а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.
Рис. 1. Ссылки на заголовки
Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.
Псевдокласс :target
CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target , как показано в примере 2.
Пример 2. Использование :target
Теперь, если переходить по ссылкам оглавления, то заголовки будут менять свой цвет и фон (рис. 2).
Рис. 2. Стиль заголовка при переходе
Как сделать внутреннюю ссылку в 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: Ссылка внутри страницы
HTML ссылки можно также использовать для перехода к определённому месту внутри страницы (не обязательно текущей). В качестве места на странице, к которому будет осуществлён переход по ссылке, используется любой HTML-элемент, который допустимо использовать внутри элемента . Чтобы определить элемент, к которому будет осуществлён переход, ему нужно указать идентификатор с помощью атрибута id:
Заголовок
Теперь, чтобы при клике по ссылке был выполнен переход к элементу, который находится на одной странице с ведущей на него ссылкой, нужно в качестве значения атрибута href элемента написать символ решётки (#), после которого указать идентификатор элемента, к которому будет выполнен переход:
Чтобы перейти к определённому месту на другой странице, нужно указать решётку и необходимый идентификатор после URL-адреса:
ссылка ссылка
Примечание: основная польза от ссылок внутри веб-страницы заключается в том, что на страницах с большим объёмом содержимого, пользователю не приходится прокручивать всю веб-страницу в поисках нужного раздела, а сразу щёлкнув по названию нужного раздела, перейти к нему.
С этой темой смотрят:
- Как сделать ссылку в html
- Абсолютные и относительные ссылки html
- Открытие html ссылки в новой вкладке
- Как сделать картинку ссылкой
- HTML тег
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru
Якоря и ссылки внутри страницы
Поставить ссылку, которая ведет внутрь страницы к конкретному блоку (разделу), можно двумя способами:
1. Добавьте в нужное место специальный блок — T173 Якорная ссылка из категории Другое. В Контенте T173 пропишите желаемое название для якоря, например: «contacts». И можно теперь переходить к этому месту, в котором находится блок T173, указывая ссылку вида «#contacts» на кнопках или в меню. Сам блок невидимый.
2. Поставить ссылку на любой блок: Для этого вам нужно в адресе ссылки прописать «#rec129000». Этот уникальный номер есть у каждого блока. Его можно найти в контекстной панели Settings блока (в самом низу). Обратите внимание, что если вы скопируете страницу, то номера блоков поменяются и вам нужно будет поставить ссылки заново.
Чтобы по ссылке посетитель сайта переходил к конкретному месту на другой странице, поставьте ссылку вида: /pagename#anchorname , где pagename — это адрес страницы, на которую нужно перейти, а anchorname — название якоря, который обозначает место, куда должен быть отправлен посетитель.
Если вы хотите, чтобы переход к назначенному блоку был плавным, «скользящим», добавьте на страницу блок T178 (Библиотека блоков → Другое → Плавный скролл до локальной ссылки).
Обращаем внимание, что на странице достаточно одного такого модификатора — использование нескольких на одной странице может привести к ошибкам.