Согласие на обработку персональных данных.

09.07.2020
Новые видео и статья Операторы != и == против операторов !== и ===.

04.07.2020
Новый выпуск журнала Автоматизация и Программирование.

15.06.2020
Новые видео и статья JavaScript и CSS.

10.06.2020
Новые видео и статья Как в С++ получить от пользователя строку с пробелами.

08.06.2020
Новый выпуск журнала Автоматизация и Программирование.



Раздел: Сайтостроение / HTML /

Как сделать внутреннюю ссылку в HTML

Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:

>>> Вёрстка сайта с нуля 2.0 >>>

О ссылках я рассказывал здесь и здесь, но там речь шла только о переходах на внешние страницы. Однако довольно часто в HTML приходится делать ссылки внутри страницы. Например, если в одном документе у вас несколько разделов, а в начале статьи должно быть содержание документа со ссылками на эти разделы.

И в этой статье я расскажу о том, как сделать ссылку внутри страницы в HTML...

Как создать внутреннюю ссылку в HTML

Итак, ссылка на текст внутри страницы в HTML создаётся за два шага:

  1. Надо создать ссылку.
  2. Надо обозначить место в тексте, куда ведёт ссылка.

Создать ссылку можно так:

<a href="#name_link">Название ссылки</a>

То есть вы используете всё тот же атрибут href, но вместо URL пишите имя ссылки. А чтобы браузер знал, что эта ссылка ведёт на место внутри страницы, перед именем надо поставить знак #.

На втором шаге вы должны обозначить место в документе, куда ведёт ссылка. Обозначить место в документе, куда должна вести ссылка, можно одним из двух способов:

<h2><a name="name_link">Заголовок в статье</a></h2>

или

<h2 id="name_link">Заголовок в статье</h2>

Первый способ более старый, и он будет работать во всех браузерах.

Второй способ более современный (лучше использовать именно его), но в некоторых старых браузерах это работать не будет.

Разумеется, атрибуты id или name могут быть использованы не только в заголовках, но и в других тегах. Например, в тегах абзаца или картинки. Так что внутренняя ссылка может вести на любое место в документе.

Ну а теперь пример для лучшего понимания:

<a href="#my_link_1">Ссылка на заголовок 1</a><br>
<a href="#my_link_2">Ссылка на заголовок 2</a><br>

   
<br><br>
   
<h2><a name="my_link_1">Первый заголовок в статье</a></h2>
<p>
Это текст внутри документа под первым заголовком. 
</p>

<h2 id="my_link_2">Второй заголовок в статье</h2>
<p>
Это текст внутри документа под вторым заголовком. 
</p>

Переход по ссылке внутри страницы в HTML может выполняться не только внутри страницы, где расположена ссылка, но и к обозначенному месту другой страницы в Интернете (разумеется, если это место там обозначено с помощью id или name).

Например, если на странице моего сайта https://info-master.su/programming/web/html/link-attributes.php есть подзаголовок, который обозначен так:

<h2 id="tabindex">Атрибут TABINDEX</h2>

то для того, чтобы с вашего сайта вы могли перейти именно на эту часть страницы, вы должны прописать такую ссылку:

<a href="https://info-master.su/programming/web/html/link-attributes.php#tabindex">
Ссылка на участок другой страницы
</a>

И таким образом пользователь может перейти не в начало страницы, а сразу к нужному участку, то есть к подзаголовку Атрибут TABINDEX.

На этом, пожалуй, разговор о ссылках я закончу. Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.


Как создать свой сайт Как создать свой сайт

Очень небольшая книга, которую можно прочитать буквально за 15 минут. Но эти 15 минут дадут вам представление о том, как создаются современные сайты... Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика