как сделать якорь на странице

Поддержи проект!!!

Подробно о якорях в html

1. Якорь на определенную часть страницы -> href + # + name
2. Якорь на определенную часть страницы -> href + # + id
3. Как сделать якорь на другую страницу

Скопировать ссылку

Якорь на определенную часть страницы -> href + # + name

В первом пункте повторим определение - "что такое якорь":

Якорь html на странице - это как и морской термин выполняет определенную задачу! Прикрепляет часть страницы к данному якорю, и по ссылке, которая расположена в другом месте, либо вообще на другой странице, при нажатии на которую, вы попадете на ту часть текста, где расположен данный якорь..


Обязательное условие для якоря

Имя у якоря должно быть уникальным.

В данный момент существует два вида якорей:

Все ещё поддерживаемый атрибут name(считается устаревшим.)

Синтаксис якоря name

Создаем ссылку вида:

<a href="#yakor">Перейдем к якорю.</a>

Располагаем в требуемом месте якорь:

<a name=yakor></a>



Результат исполнения якоря в html

Для того, чтобы протестировать работу якоря в html нажмите по ссылке:

Перейдем к якорю.

Скопировать ссылку

Якорь на определенную часть страницы -> href + # + id

Второй пример якоря на определенную часть текста - всё тоже самое. что и в первом пункте, только с той разницей, что вместо name используется id.


Как вы знаете, условие использования id - аналогичные, что и для name - уникальное имя.

Синтаксис якоря id

Создаем ссылку вида:

<a href="#yakor_2">Перейдем к якорю 2.</a>

Располагаем в требуемом месте якорь:

<a id =yakor_2></a>



Результат исполнения якоря в html

Для того, чтобы протестировать работу якоря в html нажмите по ссылке:

Перейдем к якорю.





---






Пример реализации работы якоря в html

здесь может быть текст

Выше вы видите такую конструкцию:
<a name=yakor>здесь может быть текст</a>
Теперь давайте вернемся в ту часть страницы, с которой мы сюда пришли вернуться к первой ссылки на которую только что нажали.




Пример реализации работы якоря в html

Выше вы сможете увидеть такую конструкцию если нажмете исследовать элемент:

<a id=yakor_2></a>

Мы можем вернуться в то место, откуда пришли вместо name опять id

Скопировать ссылку

как сделать якорь на другую страницу

Чтобы сделать якорь на другую страницу нам понадобится :

Тег ссылки

Сам адрес, возьмем предыдущую тему и якорь на первую тему. После html добавляем решетку и якорь paragraph_1

https://dwweb.ru/page/css/property/005_width_css.html#paragraph_1

Соберем весь якорь на другую страницу вместе:

Html :
<a href=https://dwweb.ru/page/css/property/005_width_css.html#paragraph_1 target=_blank>Якорь на другую страницу</a>
Результат: Якорь на другую страницу

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =