Как сделать внутреннюю ссылку в 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 .
На этом, пожалуй, разговор о ссылках я закончу. Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.
Создание внутренних и внешних ссылок функцией ГИПЕРССЫЛКА
Кроме того, эта функция умеет создавать заполненную форму письма email, что сильно помогает при рассылке типовых оповещений.
Синтаксис функции прост:
=ГИПЕРССЫЛКА( Адрес ; Текст )
- Текст — это видимый текст гиперссылки в ячейке (обычно выделенный синим цветом и подчеркиванием, как все гиперссылки), по которому щелкает пользователь. Может быть любым, это роли не играет.
- Адрес — место, куда мы хотим сослаться (и это самое интересное).
Давайте рассмотрим все варианты подробнее.
Ссылка на веб-страницу
Это самый простой и очевидный вариант применения нашей функции ГИПЕРССЫЛКА (HYPERLINK) . Первым аргументом здесь будет полная ссылка на веб-страницу (URL):
Обратите внимание, что адрес должен быть полным, т.е. обязательно начинаться с протокола (обычно «http»). При щелчке по созданной ссылке заданный сайт откроется в браузере по умолчанию.
Ссылка на ячейку внутри книги
Если нужна ссылка на ячейку или диапазон, находящийся внутри текущей книги, то адрес нужно будет указать следующим образом:
Здесь знак решетки (#) обозначает текущую книгу. Вместо адреса одной ячейки можно, само-собой, указать целый диапазон.
Если имя листа содержит пробелы, то его обязательно заключать в апострофы — иначе ссылка не сработает:
Ссылка на ячейку во внешней книге
Можно легко создать ссылку на ячейку во внешней книге. Тогда в качестве первого аргумента нужен будет полный путь к файлу (с расширением!), имя листа и адрес ячейки:
Аналогично внутренней ссылке, если имя листа содержит пробелы, то его необходимо дополнительно заключить в апострофы.
Ссылка на файл на сервере
Также поддерживаются сетевые ссылки, если файл сохранен, например, на корпоративном сервере в общей папке — в этом случае используется путь в формате UNC, начинающийся с двух обратных дробей:
Ссылка на именованный диапазон
Если вы создали именованный диапазон (например, через Формулы — Диспетчер имен — Создать), то можно спокойно использовать это имя в ссылке:
Если нужно сослаться на именованный диапазон во внешнем файле, то потребуется уточнить его имя и путь к нему, как в предыдущем пункте. Имя листа указывать уже не нужно:
Ссылка на умную таблицу или ее элементы
Если вы знакомы с умными таблицами, то знаете какая это полезная штука. При желании, можно легко создать с помощью функции ГИПЕРССЫЛКА (HYPERLINK) ссылку на любой нужный нам фрагмент умной таблицы или на нее целиком. Для этого в первом аргументе нужно указать имя таблицы (например Таблица1) и кодовое обозначение ее элемента:
Поддерживаются следующие обозначения:
- Таблица1[#Все] — ссылка на всю таблицу, включая заголовки столбцов, данные и строку итогов
- Таблица1[#Данные] или просто Таблица1 — ссылка только на данные (без строки заголовка и итогов)
- Таблица1[#Заголовки] — ссылка только на первую строку таблицы с заголовками столбцов
- Таблица1[#Итоги] — ссылка на строку итогов (если она включена)
Формирование заполненной формы письма email
Это относительно экзотический вариант применения функции гиперссылка, позволяющий создавать заполненный бланк электронного письма:
При щелчке по такой ссылке мы увидим вот такую красоту:
Можно указывать несколько адресатов, получателей обычной и скрытой копий, форматировать текст письма и т.д. Очень удобно для служебных уведомлений и рассылок. Единственное, что нельзя таким образом сделать — прикрепить вложения. Подробнее про все возможности и параметры такого способа рассказано в отдельной статье.
Использование нестандартных символов
Иногда можно сочетать функцию ГИПЕРССЫЛКА с функцией вывода нестандартных знаков СИМВОЛ (CHAR), которую мы уже разбирали. Это позволяет заменить простой текст ссылки на что-то более симпатичное:
Ссылки по теме
- Создание писем функцией ГИПЕРССЫЛКА
- Динамические гиперссылки с помощью функций ПОИСКПОЗ и ГИПЕРССЫЛКА
Добавление гиперссылок в расположение в одном документе
Вы можете добавить гиперссылки в документ, чтобы предоставить читателю мгновенный доступ к другим частям того же документа. Чтобы создать ее, необходимо сначала создать «закладку» в предполагаемом месте назначения. Затем можно создать ссылку (гиперссылку) на эту закладку в другом месте документа.
Создание конечной закладки
Назначение гиперссылки можно пометить закладкой или стилем заголовка.
Вставка закладки
- Выберите целевой элемент или просто щелкните место, куда нужно вставить закладку.
- В группе меню Вставка ленты перейдите к ссылке > закладка.
- введите имя в поле Имя закладки;
Важно: Имена закладок должны начинаться с буквы. После этого они могут включать цифры и буквы, но не пробелы. Если необходимо разделить слова, можно использовать символ подчеркивания ( _ ). Например, First_heading.
Применение стиля заголовка к закладке
Необходимо применить стиль заголовка к новой закладке. Стили заголовков используются для определения связываемых назначений.
- Выберите закладку, к которой будет применен стиль заголовка.
- В области Главная >Стили ленты выберите стиль заголовка для применения к закладке.
Создание ссылки на закладку
После создания конечной закладки можно создать гиперссылку на нее.
- Выделите текст или объект, который вы хотите использовать в качестве гиперссылки с возможностью выбора.
- Щелкните правой кнопкой мыши и выберите пункт Связать.
- В разделе Связать с выберите параметр Место в документе.
- В списке выберите заголовок или закладку, на которую должна указывать гиперссылка.
Примечание: Чтобы настроить всплывающую подсказку, которая появляется, когда вы наводите указатель мыши на гиперссылку, выберите пункт Всплывающая подсказка, а затем введите нужный текст.
Ссылки внутри страницы
Ссылки допустимо указывать не только на другой сайт или документ, но и на элемент внутри страницы. Такая возможность применяется для добавления оглавления страницы с быстрым переходом к нужному разделу (так делает, например, Википедия) или для создания различных элементов интерфейса вроде вкладок.
Элемент, на который требуется сделать ссылку, обозначается идентификатором, а адрес ссылки меняет свой вид на #id, как показано в примере 1.
Пример 1. Ссылка на заголовок
Результат данного примера показан на рис. 1. К каждому заголовку добавлен уникальный идентификатор через атрибут id , а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.
Рис. 1. Ссылки на заголовки
Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.
Псевдокласс :target
CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target , как показано в примере 2.
Пример 2. Использование :target
Теперь, если переходить по ссылкам оглавления, то заголовки будут менять свой цвет и фон (рис. 2).
Рис. 2. Стиль заголовка при переходе